chore: adds new strict rules for TypeScript

liferay · Jul 21, 2023 · e7bcd24 · e7bcd24
1 parent 37ceb8a
commit e7bcd24
Show file tree

Hide file tree

Showing 47 changed files with 237 additions and 227 deletions.
diff --git a/packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx b/packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx
@@ -226,7 +226,7 @@ describe('Autocomplete incremental interactions', () => {
 
 		const [two] = getAllByRole('option');
 
-		fireEvent.click(two);
+		fireEvent.click(two!);
 
 		expect(document.querySelector('.dropdown-menu')).toBeFalsy();
 		expect(input.value).toBe('two');
@@ -308,25 +308,25 @@ describe('Autocomplete incremental interactions', () => {
 
 		userEvent.keyboard('[ArrowDown]');
 
-		expect(getAllByRole('option')[0].getAttribute('aria-selected')).toBe(
+		expect(getAllByRole('option')[0]!.getAttribute('aria-selected')).toBe(
 			'true'
 		);
 
 		userEvent.keyboard('[ArrowLeft]');
 
-		expect(getAllByRole('option')[0].getAttribute('aria-selected')).toBe(
+		expect(getAllByRole('option')[0]!.getAttribute('aria-selected')).toBe(
 			'false'
 		);
 
 		userEvent.keyboard('[ArrowDown]');
 
-		expect(getAllByRole('option')[0].getAttribute('aria-selected')).toBe(
+		expect(getAllByRole('option')[0]!.getAttribute('aria-selected')).toBe(
 			'true'
 		);
 
 		userEvent.keyboard('[ArrowRight]');
 
-		expect(getAllByRole('option')[0].getAttribute('aria-selected')).toBe(
+		expect(getAllByRole('option')[0]!.getAttribute('aria-selected')).toBe(
 			'false'
 		);
 	});
@@ -352,7 +352,7 @@ describe('Autocomplete incremental interactions', () => {
 
 		expect(queryByRole('listbox')).toBeDefined();
 		expect(input.getAttribute('aria-activedescendant')).toBe('three');
-		expect(getAllByRole('option')[2].getAttribute('aria-selected')).toBe(
+		expect(getAllByRole('option')[2]!.getAttribute('aria-selected')).toBe(
 			'true'
 		);
 	});
@@ -378,7 +378,7 @@ describe('Autocomplete incremental interactions', () => {
 
 		expect(queryByRole('listbox')).toBeDefined();
 		expect(input.getAttribute('aria-activedescendant')).toBe('one');
-		expect(getAllByRole('option')[0].getAttribute('aria-selected')).toBe(
+		expect(getAllByRole('option')[0]!.getAttribute('aria-selected')).toBe(
 			'true'
 		);
 	});
@@ -446,7 +446,7 @@ describe('Autocomplete incremental interactions', () => {
 
 			const [two] = getAllByRole('option');
 
-			fireEvent.click(two);
+			fireEvent.click(two!);
 
 			expect(queryByRole('listbox')).toBeFalsy();
 			expect(input.value).toBe('two');
@@ -488,7 +488,7 @@ describe('Autocomplete incremental interactions', () => {
 
 			const [two] = getAllByRole('option');
 
-			fireEvent.click(two);
+			fireEvent.click(two!);
 
 			expect(queryByRole('listbox')).toBeFalsy();
 			expect(input.value).toBe('two');
@@ -532,7 +532,7 @@ describe('Autocomplete incremental interactions', () => {
 
 			const [two] = getAllByRole('option');
 
-			fireEvent.click(two);
+			fireEvent.click(two!);
 
 			expect(queryByRole('listbox')).toBeFalsy();
 			expect(input.value).toBe('two');

diff --git a/packages/clay-breadcrumb/src/__tests__/index.tsx b/packages/clay-breadcrumb/src/__tests__/index.tsx
@@ -67,7 +67,7 @@ describe('ClayBreadcrumb', () => {
 		);
 
 		expect(mockWarnings).toBeCalled();
-		expect(mockWarnings.mock.calls[0][0]).toBe(
+		expect(mockWarnings.mock.calls[0]![0]).toBe(
 			'Warning: ClayBreadcrumb expects at least one `active` item on `items`.'
 		);
 
@@ -129,7 +129,7 @@ describe('ClayBreadcrumb', () => {
 
 		expect(itemClickMock).toHaveBeenCalled();
 
-		expect(itemClickMock.mock.calls[0][0].type).toBe('click');
+		expect(itemClickMock.mock.calls[0]![0].type).toBe('click');
 
 		expect(container).toMatchSnapshot();
 	});

diff --git a/packages/clay-breadcrumb/src/index.tsx b/packages/clay-breadcrumb/src/index.tsx
@@ -99,8 +99,8 @@ const ClayBreadcrumb = ({
 				{items.length > 3 && !collapsed ? (
 					<Items
 						items={[
-							items[items.length - 2],
-							items[items.length - 1],
+							items[items.length - 2]!,
+							items[items.length - 1]!,
 						]}
 					/>
 				) : (

diff --git a/packages/clay-color-picker/src/__tests__/index.tsx b/packages/clay-color-picker/src/__tests__/index.tsx
@@ -383,7 +383,7 @@ describe('Interactions', () => {
 				'.clay-color-dropdown-menu .clay-color-swatch-item'
 			);
 
-			fireEvent.click(splotchArray[5], {});
+			fireEvent.click(splotchArray[5]!, {});
 
 			const hexInput = editorGetByTestId('customHexInput');
 

diff --git a/packages/clay-core/src/aria/useFocusWithin.tsx b/packages/clay-core/src/aria/useFocusWithin.tsx
@@ -28,7 +28,7 @@ type Props<T> = {
 function getId(element: HTMLElement) {
 	const [type, id] = element.getAttribute('data-id')!.split(',');
 
-	return type === 'number' ? Number(id) : id;
+	return type === 'number' ? Number(id) : id!;
 }
 
 export function FocusWithinProvider<T extends HTMLElement>({
@@ -61,7 +61,7 @@ export function FocusWithinProvider<T extends HTMLElement>({
 		const hasItem = items.find((item) => focusId === getId(item));
 
 		if (!hasItem && items.length) {
-			setFocusId(getId(items[0]));
+			setFocusId(getId(items[0]!));
 		}
 	}, [children]);
 

diff --git a/packages/clay-core/src/collection/useCollection.tsx b/packages/clay-core/src/collection/useCollection.tsx
@@ -44,7 +44,7 @@ const CollectionContext = React.createContext({} as CollectionContextProps);
 const SECTION_NAMES = ['Group', 'Section'];
 
 function getItemId(value: Record<string, any> | string | number) {
-	return typeof value === 'object' ? value.id : value;
+	return typeof value === 'object' ? value['id'] : value;
 }
 
 export function useCollection<
@@ -187,7 +187,7 @@ export function useCollection<
 
 				layoutKeysRef.current.set(key, {prevKey});
 
-				if (layoutKeysRef.current.has(prevKey)) {
+				if (prevKey && layoutKeysRef.current.has(prevKey)) {
 					layoutKeysRef.current.set(prevKey, {
 						...layoutKeysRef.current.get(prevKey),
 						nextKey: key,
@@ -197,7 +197,7 @@ export function useCollection<
 
 			if (items && children instanceof Function) {
 				for (let index = 0; index < items.length; index++) {
-					const item = items[index];
+					const item = items[index] as T;
 					const publicItem =
 						exclude && typeof item === 'object'
 							? excludeProps(item as Record<any, any>, exclude)
@@ -230,7 +230,7 @@ export function useCollection<
 			if (children instanceof Function && items) {
 				if (virtualizer) {
 					return virtualizer.getVirtualItems().map((virtual) => {
-						const item = items[virtual.index];
+						const item = items[virtual.index] as T;
 
 						const publicItem =
 							exclude && typeof item === 'object'

diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx
@@ -389,8 +389,8 @@ export function Picker<T extends Record<string, any> | string | number>({
 				id={id}
 				onClick={() => setActive(!active)}
 				onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {
-					if (otherProps.onKeyDown) {
-						otherProps.onKeyDown(event);
+					if (otherProps['onKeyDown']) {
+						otherProps['onKeyDown'](event);
 					}
 
 					switch (event.key) {

diff --git a/packages/clay-core/src/picker/__tests__/BasicRendering.tsx b/packages/clay-core/src/picker/__tests__/BasicRendering.tsx
@@ -114,8 +114,8 @@ describe('Picker basic rendering', () => {
 
 		const [apple] = getAllByRole('option');
 
-		expect(apple.getAttribute('aria-selected')).toBe('true');
-		expect(apple.textContent).toBe('Apple');
+		expect(apple!.getAttribute('aria-selected')).toBe('true');
+		expect(apple!.textContent).toBe('Apple');
 	});
 
 	it('renders the component as disabled', () => {
@@ -174,8 +174,8 @@ describe('Picker basic rendering', () => {
 		expect(selectedValue.getAttribute('aria-labelledby')).toBe(
 			'picker-label'
 		);
-		expect(label.getAttribute('id')).toBe('picker-label');
-		expect(label.getAttribute('for')).toBe('picker');
+		expect(label!.getAttribute('id')).toBe('picker-label');
+		expect(label!.getAttribute('for')).toBe('picker');
 	});
 
 	it('render component with custom trigger', () => {

diff --git a/packages/clay-core/src/picker/__tests__/IncrementalInteractions.tsx b/packages/clay-core/src/picker/__tests__/IncrementalInteractions.tsx
@@ -415,12 +415,12 @@ describe('Picker incremental interactions', () => {
 
 			const [, , blueberry] = getAllByRole('option');
 
-			userEvent.hover(blueberry);
+			userEvent.hover(blueberry!);
 
 			expect(combobox.getAttribute('aria-activedescendant')).toBe(
 				'Blueberry'
 			);
-			expect(blueberry.classList).toContain('hover');
+			expect(blueberry!.classList).toContain('hover');
 		});
 
 		it.concurrent.each([
@@ -446,7 +446,7 @@ describe('Picker incremental interactions', () => {
 
 				const [apple, banana, blueberry] = getAllByRole('option');
 
-				userEvent.hover(banana);
+				userEvent.hover(banana!);
 
 				expect(combobox.getAttribute('aria-activedescendant')).toBe(
 					'Banana'
@@ -458,12 +458,12 @@ describe('Picker incremental interactions', () => {
 					expect(combobox.getAttribute('aria-activedescendant')).toBe(
 						'Apple'
 					);
-					expect(apple.classList).toContain('focus');
+					expect(apple!.classList).toContain('focus');
 				} else {
 					expect(combobox.getAttribute('aria-activedescendant')).toBe(
 						'Blueberry'
 					);
-					expect(blueberry.classList).toContain('focus');
+					expect(blueberry!.classList).toContain('focus');
 				}
 			}
 		);

diff --git a/packages/clay-core/src/tree-view/DragAndDrop.tsx b/packages/clay-core/src/tree-view/DragAndDrop.tsx
@@ -134,7 +134,7 @@ function getNextTarget(
 
 	const [type, key] = target.getAttribute('data-id')!.split(',');
 
-	return type === 'number' ? Number(key) : key;
+	return type === 'number' ? Number(key) : key!;
 }
 
 const defaultMessages: DragAndDropMessages = {
@@ -254,7 +254,7 @@ export function DragAndDropProvider<T>({
 				dragNode.item as Record<any, any>,
 				tree.nodeByPath(indexes).parent as Record<any, any>,
 				{
-					next: indexes[indexes.length - 1],
+					next: indexes[indexes.length - 1]!,
 					previous: dragNode.index,
 				}
 			);
@@ -346,7 +346,7 @@ export function DragAndDropProvider<T>({
 									.split(',');
 
 								return !denylist.has(
-									type === 'number' ? Number(key) : key
+									type === 'number' ? Number(key) : key!
 								);
 							}
 						);
@@ -365,15 +365,15 @@ export function DragAndDropProvider<T>({
 							...state,
 						};
 
-						if (denylist.has(newState.currentTarget!)) {
+						if (item && denylist.has(newState.currentTarget!)) {
 							const [type, key] = item
 								.getAttribute('data-id')!
 								.split(',');
 
 							newState.position =
 								event.key === Keys.Up ? 'top' : 'bottom';
 							newState.currentTarget =
-								type === 'number' ? Number(key) : key;
+								type === 'number' ? Number(key) : key!;
 						} else if (
 							(event.key === Keys.Up &&
 								state.position === 'bottom') ||
@@ -398,7 +398,7 @@ export function DragAndDropProvider<T>({
 								newState.position =
 									event.key === Keys.Up ? 'bottom' : 'middle';
 								newState.currentTarget =
-									type === 'number' ? Number(key) : key;
+									type === 'number' ? Number(key) : key!;
 							}
 						}
 
@@ -431,7 +431,7 @@ export function DragAndDropProvider<T>({
 									any
 								>,
 								{
-									next: indexes[indexes.length - 1],
+									next: indexes[indexes.length - 1]!,
 									previous: dragNode.index,
 								}
 							);

diff --git a/packages/clay-core/src/tree-view/TreeViewItem.tsx b/packages/clay-core/src/tree-view/TreeViewItem.tsx
@@ -447,7 +447,7 @@ export const TreeViewItem = React.forwardRef<
 										.then((newItem) => {
 											replace(item.indexes, {
 												...newItem,
-												index: item.index,
+												index: item['index'],
 												indexes: item.indexes,
 												itemRef: item.itemRef,
 												key: item.key,