From e7bcd24385bb4a899d365e2498bf6c976d4e1982 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Fri, 21 Jul 2023 17:49:38 -0500 Subject: [PATCH] chore: adds new strict rules for TypeScript --- .../src/__tests__/IncrementalInteractions.tsx | 20 ++-- .../clay-breadcrumb/src/__tests__/index.tsx | 4 +- packages/clay-breadcrumb/src/index.tsx | 4 +- .../clay-color-picker/src/__tests__/index.tsx | 2 +- .../clay-core/src/aria/useFocusWithin.tsx | 4 +- .../src/collection/useCollection.tsx | 8 +- packages/clay-core/src/picker/Picker.tsx | 4 +- .../src/picker/__tests__/BasicRendering.tsx | 8 +- .../__tests__/IncrementalInteractions.tsx | 10 +- .../clay-core/src/tree-view/DragAndDrop.tsx | 14 +-- .../clay-core/src/tree-view/TreeViewItem.tsx | 2 +- .../__tests__/IncrementalInteractions.tsx | 104 +++++++++--------- packages/clay-core/src/tree-view/useItem.tsx | 20 ++-- .../src/tree-view/useMultipleSelection.tsx | 2 +- packages/clay-core/src/tree-view/useTree.ts | 2 +- packages/clay-core/src/vertical-nav/Item.tsx | 2 +- .../src/vertical-nav/VerticalNav.tsx | 10 +- .../src/__tests__/index.tsx | 58 +++++----- .../clay-data-provider/src/useResource.tsx | 2 +- packages/clay-date-picker/src/Helpers.ts | 2 +- packages/clay-date-picker/src/Hooks.ts | 22 ++-- packages/clay-date-picker/src/TimePicker.tsx | 2 +- .../clay-date-picker/src/WeekdayHeader.tsx | 4 +- packages/clay-date-picker/src/index.tsx | 14 +-- packages/clay-drop-down/src/DropDown.tsx | 4 +- .../src/DropDownWithDrilldown.tsx | 6 +- .../clay-drop-down/src/DropDownWithItems.tsx | 2 +- .../src/__tests__/DropDownWithDrilldown.tsx | 4 +- .../clay-drop-down/src/__tests__/index.tsx | 8 +- packages/clay-form/src/DualListBox.tsx | 26 ++--- packages/clay-form/src/SelectBox.tsx | 6 +- packages/clay-list/src/List.tsx | 4 +- .../src/__tests__/index.tsx | 6 +- packages/clay-localized-input/src/index.tsx | 4 +- packages/clay-modal/src/Provider.tsx | 2 +- .../src/__tests__/IncrementalInteractions.tsx | 2 +- .../src/MultiStepNavWithBasicItems.tsx | 6 +- packages/clay-nav/src/Vertical.tsx | 2 +- .../src/__tests__/index.tsx | 2 +- .../src/PaginationBarWithBasicItems.tsx | 4 +- .../src/PaginationWithBasicItems.tsx | 2 +- packages/clay-shared/src/getEllipsisItems.tsx | 4 +- .../clay-shared/src/setElementFullHeight.ts | 2 +- packages/clay-shared/src/sub.ts | 2 +- .../clay-shared/src/useFocusManagement.ts | 4 +- packages/clay-tabs/src/__tests__/index.tsx | 16 +-- tsconfig.json | 22 +++- 47 files changed, 237 insertions(+), 227 deletions(-) diff --git a/packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx b/packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx index bca902b134..5f2edcda79 100644 --- 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 index ee95707a74..a5bdab41c2 100644 --- 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 index bc65c1bd48..859cedc560 100644 --- a/packages/clay-breadcrumb/src/index.tsx +++ b/packages/clay-breadcrumb/src/index.tsx @@ -99,8 +99,8 @@ const ClayBreadcrumb = ({ {items.length > 3 && !collapsed ? ( ) : ( diff --git a/packages/clay-color-picker/src/__tests__/index.tsx b/packages/clay-color-picker/src/__tests__/index.tsx index 7e6b3751da..55358614d5 100644 --- 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 index 1bd3c8af20..59b68c9fc3 100644 --- a/packages/clay-core/src/aria/useFocusWithin.tsx +++ b/packages/clay-core/src/aria/useFocusWithin.tsx @@ -28,7 +28,7 @@ type Props = { 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({ @@ -61,7 +61,7 @@ export function FocusWithinProvider({ 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 index f840024044..b20377bf0f 100644 --- 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 | 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, 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 index 0806a756e3..2b63cffcaf 100644 --- a/packages/clay-core/src/picker/Picker.tsx +++ b/packages/clay-core/src/picker/Picker.tsx @@ -389,8 +389,8 @@ export function Picker | string | number>({ id={id} onClick={() => setActive(!active)} onKeyDown={(event: React.KeyboardEvent) => { - 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 index 6dc50a77f4..ec864431d9 100644 --- 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 index 4375eb3748..de4fbf976a 100644 --- 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 index 4e00f9b060..a6b0bfa4a0 100644 --- 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({ dragNode.item as Record, tree.nodeByPath(indexes).parent as Record, { - next: indexes[indexes.length - 1], + next: indexes[indexes.length - 1]!, previous: dragNode.index, } ); @@ -346,7 +346,7 @@ export function DragAndDropProvider({ .split(','); return !denylist.has( - type === 'number' ? Number(key) : key + type === 'number' ? Number(key) : key! ); } ); @@ -365,7 +365,7 @@ export function DragAndDropProvider({ ...state, }; - if (denylist.has(newState.currentTarget!)) { + if (item && denylist.has(newState.currentTarget!)) { const [type, key] = item .getAttribute('data-id')! .split(','); @@ -373,7 +373,7 @@ export function DragAndDropProvider({ 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({ 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({ 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 index 6873436ec1..ce15d77e78 100644 --- 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, diff --git a/packages/clay-core/src/tree-view/__tests__/IncrementalInteractions.tsx b/packages/clay-core/src/tree-view/__tests__/IncrementalInteractions.tsx index f29f39396d..ba352b6138 100644 --- a/packages/clay-core/src/tree-view/__tests__/IncrementalInteractions.tsx +++ b/packages/clay-core/src/tree-view/__tests__/IncrementalInteractions.tsx @@ -109,7 +109,7 @@ describe('TreeView incremental interactions', () => { }, ]} > - {(item, selection, expand) => ( + {(item, _selection, expand) => ( { @@ -208,9 +208,9 @@ describe('TreeView incremental interactions', () => { 'input.custom-control-input[type=checkbox]' ); - fireEvent.click(item0); + fireEvent.click(item0!); - expect(item0.checked).toBeFalsy(); + expect(item0!.checked).toBeFalsy(); expect( container.querySelectorAll( 'input.custom-control-input[type=checkbox]:indeterminate' @@ -243,14 +243,14 @@ describe('TreeView incremental interactions', () => { 'input.custom-control-input[type=checkbox]' ); - fireEvent.click(root); + fireEvent.click(root!); - expect(root.checked).toBeTruthy(); + expect(root!.checked).toBeTruthy(); - fireEvent.click(item); + fireEvent.click(item!); - expect(item.checked).toBeTruthy(); - expect(root.checked).toBeFalsy(); + expect(item!.checked).toBeTruthy(); + expect(root!.checked).toBeFalsy(); }); it('select multiple item using multiple selection', () => { @@ -281,11 +281,11 @@ describe('TreeView incremental interactions', () => { 'input.custom-control-input[type=checkbox]' ); - fireEvent.click(root); - fireEvent.click(item); + fireEvent.click(root!); + fireEvent.click(item!); - expect(item.checked).toBeTruthy(); - expect(root.checked).toBeTruthy(); + expect(item!.checked).toBeTruthy(); + expect(root!.checked).toBeTruthy(); }); it('select children and parent recursively using recursive multiple selection', () => { @@ -338,7 +338,7 @@ describe('TreeView incremental interactions', () => { 'input.custom-control-input[type=checkbox]' ); - expect(item.checked).toBeTruthy(); + expect(item!.checked).toBeTruthy(); }); it('pressing space selects item', () => { @@ -406,14 +406,14 @@ describe('TreeView incremental interactions', () => { const [root, item] = getAllByRole('treeitem'); - fireEvent.click(root); + fireEvent.click(root!); - expect(root.classList).toContain('active'); + expect(root!.classList).toContain('active'); - fireEvent.click(item); + fireEvent.click(item!); - expect(item.classList).toContain('active'); - expect(root.classList).not.toContain('active'); + expect(item!.classList).toContain('active'); + expect(root!.classList).not.toContain('active'); }); it('trigger selection manually using single selection', () => { @@ -471,12 +471,12 @@ describe('TreeView incremental interactions', () => { fireEvent.click(getByTestId('root')); - expect(root.classList).toContain('active'); + expect(root!.classList).toContain('active'); fireEvent.click(getByTestId('item')); - expect(item.classList).toContain('active'); - expect(root.classList).not.toContain('active'); + expect(item!.classList).toContain('active'); + expect(root!.classList).not.toContain('active'); }); it('trigger selection manually using multiple selection', () => { @@ -552,8 +552,8 @@ describe('TreeView incremental interactions', () => { fireEvent.click(getByTestId('root')); fireEvent.click(getByTestId('item')); - expect(item.classList).toContain('active'); - expect(root.classList).toContain('active'); + expect(item!.classList).toContain('active'); + expect(root!.classList).toContain('active'); }); it('trigger selection manually using recursive multiple selection', () => { @@ -624,8 +624,8 @@ describe('TreeView incremental interactions', () => { fireEvent.click(getByTestId('root')); - expect(item.classList).toContain('active'); - expect(root.classList).toContain('active'); + expect(item!.classList).toContain('active'); + expect(root!.classList).toContain('active'); }); }); @@ -702,7 +702,7 @@ describe('TreeView incremental interactions', () => { const [root, item] = getAllByRole('treeitem'); - fireEvent.keyDown(root, {key: 'ArrowRight'}); + fireEvent.keyDown(root!, {key: 'ArrowRight'}); expect(document.activeElement).toBe(item); }); @@ -793,7 +793,7 @@ describe('TreeView incremental interactions', () => { const [root, item] = getAllByRole('treeitem'); - fireEvent.keyDown(item, {key: 'ArrowLeft'}); + fireEvent.keyDown(item!, {key: 'ArrowLeft'}); expect(document.activeElement).toBe(root); }); @@ -884,15 +884,15 @@ describe('TreeView incremental interactions', () => { const [foo, bar, baz] = getAllByRole('treeitem'); - fireEvent.keyDown(foo, {key: 'ArrowRight'}); + fireEvent.keyDown(foo!, {key: 'ArrowRight'}); - fireEvent.keyDown(foo, {key: 'ArrowDown'}); + fireEvent.keyDown(foo!, {key: 'ArrowDown'}); - fireEvent.keyDown(baz, {key: 'ArrowUp'}); + fireEvent.keyDown(baz!, {key: 'ArrowUp'}); expect(document.activeElement).toBe(bar); - fireEvent.keyDown(bar, {key: 'ArrowUp'}); + fireEvent.keyDown(bar!, {key: 'ArrowUp'}); expect(document.activeElement).toBe(foo); }); @@ -940,7 +940,7 @@ describe('TreeView incremental interactions', () => { const [, item] = getAllByRole('treeitem'); - fireEvent.click(item); + fireEvent.click(item!); await waitFor(() => getByText('Item 2')); @@ -990,7 +990,7 @@ describe('TreeView incremental interactions', () => { const [, item] = getAllByRole('treeitem'); - fireEvent.keyDown(item, {key: 'ArrowRight'}); + fireEvent.keyDown(item!, {key: 'ArrowRight'}); await waitFor(() => getByText('Item 2')); @@ -1041,7 +1041,7 @@ describe('TreeView incremental interactions', () => { const [, item] = getAllByRole('treeitem'); - fireEvent.click(item); + fireEvent.click(item!); expect( container.querySelectorAll( @@ -1092,8 +1092,8 @@ describe('TreeView incremental interactions', () => { name: 'Root', }, ]} - onLoadMore={async (item, cursor: number = 0) => { - const fakeData = data[cursor]; + onLoadMore={async (_item, cursor: number = 0) => { + const fakeData = data[cursor]!; const next = cursor + 1; if (cursor === null) { @@ -1101,12 +1101,12 @@ describe('TreeView incremental interactions', () => { } return { - cursor: next <= fakeData.length ? next : null, + cursor: next <= fakeData!.length ? next : null, items: fakeData, }; }} > - {(item, s, expand, load) => ( + {(item, _selection, expand, load) => ( {item.name} @@ -1188,23 +1188,23 @@ describe('TreeView incremental interactions', () => { const [item1, item2] = getAllByRole('treeitem'); - expect(item1.classList).not.toContain('focus'); + expect(item1!.classList).not.toContain('focus'); - fireEvent.focus(item1); + fireEvent.focus(item1!); - expect(item1.classList).toContain('focus'); + expect(item1!.classList).toContain('focus'); const [button1] = getAllByRole('button'); - fireEvent.click(button1); + fireEvent.click(button1!); - expect(button1.getAttribute('aria-expanded')).toBe('true'); - expect(item1.classList).toContain('focus'); + expect(button1!.getAttribute('aria-expanded')).toBe('true'); + expect(item1!.classList).toContain('focus'); - userEvent.click(item2); + userEvent.click(item2!); - expect(button1.getAttribute('aria-expanded')).toBe('false'); - expect(item1.classList).not.toContain('focus'); + expect(button1!.getAttribute('aria-expanded')).toBe('false'); + expect(item1!.classList).not.toContain('focus'); }); it('focus on item with action and move focus to another element the action should not be visible', () => { @@ -1236,15 +1236,15 @@ describe('TreeView incremental interactions', () => { const [item1, item2] = getAllByRole('treeitem'); - expect(item1.classList).not.toContain('focus'); + expect(item1!.classList).not.toContain('focus'); userEvent.tab(); - expect(item1.classList).toContain('focus'); + expect(item1!.classList).toContain('focus'); - userEvent.click(item2); + userEvent.click(item2!); - expect(item1.classList).not.toContain('focus'); - expect(item2.classList).not.toContain('focus'); + expect(item1!.classList).not.toContain('focus'); + expect(item2!.classList).not.toContain('focus'); }); }); diff --git a/packages/clay-core/src/tree-view/useItem.tsx b/packages/clay-core/src/tree-view/useItem.tsx index f07e6e9a3a..38940a8b7e 100644 --- a/packages/clay-core/src/tree-view/useItem.tsx +++ b/packages/clay-core/src/tree-view/useItem.tsx @@ -67,7 +67,7 @@ export function ItemContextProvider({children, value}: Props) { position, } = useDnD(); - const keyRef = useRef(getKey(value.key)); + const keyRef = useRef(getKey(value['key'])); const childRef = useRef(null); @@ -144,7 +144,7 @@ export function ItemContextProvider({children, value}: Props) { accept: 'treeViewItem', canDrop(dragItem: unknown) { return !isMovingIntoItself( - (dragItem as Value).item.indexes, + (dragItem as Value)['item'].indexes, item.indexes ); }, @@ -156,7 +156,7 @@ export function ItemContextProvider({children, value}: Props) { if ( monitor.didDrop() || !monitor.canDrop() || - (dragItem as Value).item.key === item.key || + (dragItem as Value)['item'].key === item.key || !isValidDrop.current ) { return; @@ -178,11 +178,11 @@ export function ItemContextProvider({children, value}: Props) { const tree = createImmutableTree(items as any, nestedKey!); const isMoved = onItemMove( - removeItemInternalProps((dragItem as Value).item), + removeItemInternalProps((dragItem as Value)['item']), tree.nodeByPath(indexes).parent, { - next: indexes[indexes.length - 1], - previous: (dragItem as Value).item.index, + next: indexes[indexes.length - 1]!, + previous: (dragItem as Value)['item'].index, } ); @@ -191,7 +191,7 @@ export function ItemContextProvider({children, value}: Props) { } } - reorder((dragItem as Value).item.indexes, indexes); + reorder((dragItem as Value)['item'].indexes, indexes); }, hover(dragItem, monitor) { if (!monitor.canDrop() || isDragging) { @@ -258,12 +258,12 @@ export function ItemContextProvider({children, value}: Props) { const isHovered = onItemHover( removeItemInternalProps( - (dragItem as unknown as Value).item + (dragItem as unknown as Value)['item'] ), tree.nodeByPath(indexes).parent, { - next: indexes[indexes.length - 1], - previous: (dragItem as unknown as Value).item.index, + next: indexes[indexes.length - 1]!, + previous: (dragItem as unknown as Value)['item'].index, } ); diff --git a/packages/clay-core/src/tree-view/useMultipleSelection.tsx b/packages/clay-core/src/tree-view/useMultipleSelection.tsx index 05f25a482e..01e4c98c26 100644 --- a/packages/clay-core/src/tree-view/useMultipleSelection.tsx +++ b/packages/clay-core/src/tree-view/useMultipleSelection.tsx @@ -260,7 +260,7 @@ export function useMultipleSelection( children.forEach((item, index) => { // TODO: The `key` property of the component that the developer // can set is not being considered. - const key = getKey(index, item.id, currentKey); + const key = getKey(index, item['id'], currentKey); if (select) { selecteds.add(key); diff --git a/packages/clay-core/src/tree-view/useTree.ts b/packages/clay-core/src/tree-view/useTree.ts index cb1f207f0f..50a8aff2b6 100644 --- a/packages/clay-core/src/tree-view/useTree.ts +++ b/packages/clay-core/src/tree-view/useTree.ts @@ -542,7 +542,7 @@ export function createImmutableTree>>( [...from].slice(0, -1).join('') === [...path].slice(0, -1).join(''); - let index = path[path.length - 1]; + let index = path[path.length - 1]!; // If moving an item within the same parent and the drop position of // the item is greater than the origin it affects the position diff --git a/packages/clay-core/src/vertical-nav/Item.tsx b/packages/clay-core/src/vertical-nav/Item.tsx index 8926e0a776..efc17721fd 100644 --- a/packages/clay-core/src/vertical-nav/Item.tsx +++ b/packages/clay-core/src/vertical-nav/Item.tsx @@ -63,7 +63,7 @@ function findSelectedNested(items: Array): T | undefined { if ('items' in item) { return findSelectedNested( - (item as Record).items as Array + (item as Record)['items'] as Array ); } diff --git a/packages/clay-core/src/vertical-nav/VerticalNav.tsx b/packages/clay-core/src/vertical-nav/VerticalNav.tsx index 1aff4247f9..8265cca564 100644 --- a/packages/clay-core/src/vertical-nav/VerticalNav.tsx +++ b/packages/clay-core/src/vertical-nav/VerticalNav.tsx @@ -34,7 +34,7 @@ const Trigger = ({ ); -type Props = { +type Props | string> = { /** * Flag to define which item has the active state/current page. */ @@ -118,19 +118,21 @@ function depthActive>( } if ('items' in item) { - return depthActive(item.items as Array); + return depthActive(item['items'] as Array); } return false; }); } -function VerticalNav(props: Props): JSX.Element & { +function VerticalNav | string>( + props: Props +): JSX.Element & { Trigger: typeof Trigger; Item: typeof Item; }; -function VerticalNav({ +function VerticalNav | string>({ active, activation = 'manual', children, diff --git a/packages/clay-data-provider/src/__tests__/index.tsx b/packages/clay-data-provider/src/__tests__/index.tsx index 621777a531..c9bdfbb01a 100644 --- a/packages/clay-data-provider/src/__tests__/index.tsx +++ b/packages/clay-data-provider/src/__tests__/index.tsx @@ -67,7 +67,7 @@ describe('ClayDataProvider', () => { await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(1)); - expect(fetchMock.mock.calls[0][0]).toEqual('https://clay.data/'); + expect(fetchMock.mock.calls[0]![0]).toEqual('https://clay.data/'); expect(container.innerHTML).toMatchSnapshot(); }); @@ -82,7 +82,7 @@ describe('ClayDataProvider', () => { await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(1)); - expect(fetchMock.mock.calls[0][0]).toEqual('https://clay.data'); + expect(fetchMock.mock.calls[0]![0]).toEqual('https://clay.data'); }); it('call clay.data with a custom fetch', async () => { @@ -146,7 +146,7 @@ describe('ClayDataProvider', () => { await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(1)); - expect(fetchMock.mock.calls[0][0]).toEqual('https://clay.data/'); + expect(fetchMock.mock.calls[0]![0]).toEqual('https://clay.data/'); expect(container.innerHTML).toMatchSnapshot(); }); @@ -172,11 +172,11 @@ describe('ClayDataProvider', () => { ); - await fetchMock.mock.results[0].value; + await fetchMock.mock.results[0]!.value; expect(fetchMock.mock.calls.length).toEqual(1); - expect(fetchMock.mock.calls[0][0]).toEqual('https://clay.data/'); + expect(fetchMock.mock.calls[0]![0]).toEqual('https://clay.data/'); expect(container.innerHTML).toMatchSnapshot(); }); @@ -197,22 +197,22 @@ describe('ClayDataProvider', () => { timeout: 15000, }); expect(spy.mock.calls.length).toBe(5); - expect(spy.mock.calls[0][0]).not.toBe( + expect(spy.mock.calls[0]![0]).not.toBe( 'DataProvider: Trying 1 of 5 will happen in 150ms' ); - expect(spy.mock.calls[1][0]).not.toBe( + expect(spy.mock.calls[1]![0]).not.toBe( 'DataProvider: Trying 2 of 5 will happen in 300ms' ); - expect(spy.mock.calls[2][0]).not.toBe( + expect(spy.mock.calls[2]![0]).not.toBe( 'DataProvider: Trying 3 of 5 will happen in 600ms' ); - expect(spy.mock.calls[3][0]).not.toBe( + expect(spy.mock.calls[3]![0]).not.toBe( 'DataProvider: Trying 4 of 5 will happen in 1200ms' ); - expect(spy.mock.calls[4][0]).not.toBe( + expect(spy.mock.calls[4]![0]).not.toBe( 'DataProvider: Trying 5 of 5 will happen in 2400ms' ); - expect(fetchMock.mock.calls[0][0]).toEqual('https://clay.data/'); + expect(fetchMock.mock.calls[0]![0]).toEqual('https://clay.data/'); expect(container.innerHTML).toMatchSnapshot(); spy.mockRestore(); @@ -238,22 +238,22 @@ describe('ClayDataProvider', () => { timeout: 8000, }); expect(spy.mock.calls.length).toBe(5); - expect(spy.mock.calls[0][0]).toBe( + expect(spy.mock.calls[0]![0]).toBe( 'DataProvider: Trying 1 of 5 will happen in 150ms' ); - expect(spy.mock.calls[1][0]).toBe( + expect(spy.mock.calls[1]![0]).toBe( 'DataProvider: Trying 2 of 5 will happen in 300ms' ); - expect(spy.mock.calls[2][0]).toBe( + expect(spy.mock.calls[2]![0]).toBe( 'DataProvider: Trying 3 of 5 will happen in 600ms' ); - expect(spy.mock.calls[3][0]).toBe( + expect(spy.mock.calls[3]![0]).toBe( 'DataProvider: Trying 4 of 5 will happen in 1200ms' ); - expect(spy.mock.calls[4][0]).toBe( + expect(spy.mock.calls[4]![0]).toBe( 'DataProvider: Trying 5 of 5 will happen in 2400ms' ); - expect(fetchMock.mock.calls[0][0]).toEqual('https://clay.data/'); + expect(fetchMock.mock.calls[0]![0]).toEqual('https://clay.data/'); expect(container.innerHTML).toMatchSnapshot(); spy.mockRestore(); @@ -276,18 +276,18 @@ describe('ClayDataProvider', () => { ); - await fetchMock.mock.results[0].value; + await fetchMock.mock.results[0]!.value; expect(fetchMock.mock.calls.length).toEqual(1); rerender(); await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(2)); - await fetchMock.mock.results[1].value; + await fetchMock.mock.results[1]!.value; - expect(fetchMock.mock.calls[0][0]).toEqual( + expect(fetchMock.mock.calls[0]![0]).toEqual( 'https://clay.data/?name=Bar' ); - expect(fetchMock.mock.calls[1][0]).toEqual( + expect(fetchMock.mock.calls[1]![0]).toEqual( 'https://clay.data/?name=Baz' ); }); @@ -306,7 +306,7 @@ describe('ClayDataProvider', () => { await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(1)); - expect(fetchMock.mock.calls[0][0]).toEqual( + expect(fetchMock.mock.calls[0]![0]).toEqual( 'https://clay.data/?name=Bar' ); }); @@ -370,7 +370,7 @@ describe('ClayDataProvider', () => { jest.runAllTimers(); - await fetchMock.mock.results[0].value; + await fetchMock.mock.results[0]!.value; await waitFor(() => expect(fetchMock).toBeCalledTimes(2)); }); @@ -397,7 +397,7 @@ describe('ClayDataProvider', () => { await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(3)); expect(container.innerHTML).toMatchSnapshot(); - expect(fetchMock.mock.calls[0][0]).toEqual('https://clay.data/'); + expect(fetchMock.mock.calls[0]![0]).toEqual('https://clay.data/'); }); it('data must be aggregated when using paginated data', async () => { @@ -453,7 +453,7 @@ describe('ClayDataProvider', () => { ); await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(1)); - expect(fetchMock.mock.calls[0][0]).toEqual( + expect(fetchMock.mock.calls[0]![0]).toEqual( 'https://clay.data/?limit=10' ); @@ -463,7 +463,7 @@ describe('ClayDataProvider', () => { await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(2)); - expect(fetchMock.mock.calls[1][0]).toEqual( + expect(fetchMock.mock.calls[1]![0]).toEqual( 'https://clay.data/?cursor=1&limit=10' ); @@ -471,7 +471,7 @@ describe('ClayDataProvider', () => { await waitFor(() => expect(fetchMock.mock.calls.length).toEqual(3)); - expect(fetchMock.mock.calls[2][0]).toEqual( + expect(fetchMock.mock.calls[2]![0]).toEqual( 'https://clay.data/?cursor=2&limit=10' ); @@ -661,7 +661,7 @@ describe('ClayDataProvider', () => { const [listitem1, listitem2] = getAllByRole('listitem'); - expect(listitem1.innerHTML).toBe('Foo'); - expect(listitem2.innerHTML).toBe('Baz'); + expect(listitem1!.innerHTML).toBe('Foo'); + expect(listitem2!.innerHTML).toBe('Baz'); }); }); diff --git a/packages/clay-data-provider/src/useResource.tsx b/packages/clay-data-provider/src/useResource.tsx index 51fac2b97e..cbc383a098 100644 --- a/packages/clay-data-provider/src/useResource.tsx +++ b/packages/clay-data-provider/src/useResource.tsx @@ -618,6 +618,6 @@ const useResource = ({ // This is just a fake component so that react-docgen can generate the Table // API for useResource hook. // eslint-disable-next-line @typescript-eslint/no-unused-vars -const Resource = (props: Props) =>
; +const Resource = (_props: Props) =>
; export {Resource, useResource}; diff --git a/packages/clay-date-picker/src/Helpers.ts b/packages/clay-date-picker/src/Helpers.ts index c5f9b0addc..e092eb1727 100644 --- a/packages/clay-date-picker/src/Helpers.ts +++ b/packages/clay-date-picker/src/Helpers.ts @@ -32,7 +32,7 @@ export function range({end, start}: {end: number; start: number}) { { length: end - start + 1, }, - (v, k) => k + start + (_v, k) => k + start ); } diff --git a/packages/clay-date-picker/src/Hooks.ts b/packages/clay-date-picker/src/Hooks.ts index b1b1816aae..2ed4be9302 100644 --- a/packages/clay-date-picker/src/Hooks.ts +++ b/packages/clay-date-picker/src/Hooks.ts @@ -155,9 +155,9 @@ export const useCalendarNavigation = ({ document.activeElement!.getAttribute('data-index') ); - const currentRow = weeks[currentRowPosition]; + const currentRow = weeks[currentRowPosition]!; - let nextFocus: IDay | null = null; + let nextFocus: IDay | null | undefined = null; switch (event.key) { case Keys.Right: @@ -312,7 +312,7 @@ export const useCalendarNavigation = ({ lastKeyPressed.current === Keys.Up ? weeks.length - 1 : 0 - ]; + ]!; switch (lastKeyPressed.current) { case Keys.Right: @@ -328,7 +328,7 @@ export const useCalendarNavigation = ({ lastKeyPressed.current === Keys.Left ? newRow.length - 1 : 0 - ] + ]! ); break; } @@ -346,7 +346,7 @@ export const useCalendarNavigation = ({ lastKeyPressed.current === Keys.Up ? weeks.length - 2 : 1 - ][position]; + ]![position]!; } focusNext(nextFocus); @@ -436,18 +436,18 @@ function getWeekArray(d: Date, firstDayOfWeek = 0): Month { }); // unshift days from start of the first week - const firstWeek = weekArray[0]; + const firstWeek = weekArray[0]!; for (let i = 7 - firstWeek.length; i > 0; i -= 1) { - const outsideDate = clone(firstWeek[0].date); - outsideDate.setDate(firstWeek[0].date.getDate() - 1); + const outsideDate = clone(firstWeek[0]!.date); + outsideDate.setDate(firstWeek[0]!.date.getDate() - 1); firstWeek.unshift({date: outsideDate, previousMonth: true}); } // push days until the end of the last week - const lastWeek = weekArray[weekArray.length - 1]; + const lastWeek = weekArray[weekArray.length - 1]!; for (let i = lastWeek.length; i < 7; i += 1) { - const outsideDate = clone(lastWeek[lastWeek.length - 1].date); - outsideDate.setDate(lastWeek[lastWeek.length - 1].date.getDate() + 1); + const outsideDate = clone(lastWeek[lastWeek.length - 1]!.date); + outsideDate.setDate(lastWeek[lastWeek.length - 1]!.date.getDate() + 1); lastWeek.push({date: outsideDate, nextMonth: true}); } diff --git a/packages/clay-date-picker/src/TimePicker.tsx b/packages/clay-date-picker/src/TimePicker.tsx index 1dd8f8e34e..18c2bd5d83 100644 --- a/packages/clay-date-picker/src/TimePicker.tsx +++ b/packages/clay-date-picker/src/TimePicker.tsx @@ -61,7 +61,7 @@ const ClayDatePickerTimePicker = ({ React.useEffect(() => { const [hours, minutesAndAmpm] = currentTime.split(':'); - const [minutes, ampm] = minutesAndAmpm.split(' '); + const [minutes, ampm] = minutesAndAmpm!.split(' '); setValues((prevValues) => ({ ...prevValues, diff --git a/packages/clay-date-picker/src/WeekdayHeader.tsx b/packages/clay-date-picker/src/WeekdayHeader.tsx index fe40384f5e..d1c18e119d 100644 --- a/packages/clay-date-picker/src/WeekdayHeader.tsx +++ b/packages/clay-date-picker/src/WeekdayHeader.tsx @@ -28,11 +28,11 @@ const ClayDatePickerWeekdayHeader = ({ className="date-picker-days-row date-picker-row" role="presentation" > - {weekdaysShort.map((weekday, index) => { + {weekdaysShort.map((_weekday, index) => { return React.Children.only( children({ key: index, - weekday: weekdaysShort[(index + firstDayOfWeek) % 7], + weekday: weekdaysShort[(index + firstDayOfWeek) % 7]!, }) ); })} diff --git a/packages/clay-date-picker/src/index.tsx b/packages/clay-date-picker/src/index.tsx index fcc5796b2d..741491d9ad 100644 --- a/packages/clay-date-picker/src/index.tsx +++ b/packages/clay-date-picker/src/index.tsx @@ -311,7 +311,7 @@ const ClayDatePicker = React.forwardRef( }); if (days) { - return [normalizeTime(days[0]), normalizeTime(days[1])]; + return [normalizeTime(days[0]!), normalizeTime(days[1]!)]; } } @@ -493,17 +493,17 @@ const ClayDatePicker = React.forwardRef( if (days) { const [startDate, endDate] = days; - changeMonth(startDate); + changeMonth(startDate!); - setDaysSelected([startDate, endDate]); + setDaysSelected([startDate!, endDate!]); if (time) { setCurrentTime( - startDate.getHours(), - startDate.getMinutes(), + startDate!.getHours(), + startDate!.getMinutes(), use12Hours ? (formatDate( - startDate, + startDate!, 'a' ) as Input['ampm']) : undefined @@ -779,7 +779,7 @@ function fromStringToRange( ): readonly [Date, Date] { const [startDateString, endDateString] = value.split(RANGE_SEPARATOR); - const startDate = parseDate(startDateString, dateFormat, referenceDate); + const startDate = parseDate(startDateString!, dateFormat, referenceDate); return [ startDate, diff --git a/packages/clay-drop-down/src/DropDown.tsx b/packages/clay-drop-down/src/DropDown.tsx index 67804a597f..074fd0bb58 100644 --- a/packages/clay-drop-down/src/DropDown.tsx +++ b/packages/clay-drop-down/src/DropDown.tsx @@ -254,7 +254,7 @@ function ClayDropDown({ const list = getFocusableList(menuElementRef); if (list.length) { - list[0].focus(); + list[0]!.focus(); } } @@ -330,7 +330,7 @@ function ClayDropDown({ const list = getFocusableList(menuElementRef); if (list.length) { - list[0].focus(); + list[0]!.focus(); } }, 10); }} diff --git a/packages/clay-drop-down/src/DropDownWithDrilldown.tsx b/packages/clay-drop-down/src/DropDownWithDrilldown.tsx index 4ba15f603a..4c56837731 100644 --- a/packages/clay-drop-down/src/DropDownWithDrilldown.tsx +++ b/packages/clay-drop-down/src/DropDownWithDrilldown.tsx @@ -227,10 +227,10 @@ export const ClayDropDownWithDrilldown = ({ direction={direction} header={ activeMenu === menuKey && !!history.length - ? history.slice(-1)[0].title + ? history.slice(-1)[0]!.title : undefined } - items={menus[menuKey]} + items={menus[menuKey]!} key={menuKey} messages={messages} onBack={() => { @@ -242,7 +242,7 @@ export const ClayDropDownWithDrilldown = ({ setDirection('prev'); - setActiveMenu(parent.id); + setActiveMenu(parent!.id); }} onForward={(title, childId) => { setHistory([ diff --git a/packages/clay-drop-down/src/DropDownWithItems.tsx b/packages/clay-drop-down/src/DropDownWithItems.tsx index b42af5e840..a733edf7b7 100644 --- a/packages/clay-drop-down/src/DropDownWithItems.tsx +++ b/packages/clay-drop-down/src/DropDownWithItems.tsx @@ -196,7 +196,7 @@ const findNested = < // because it will be in another menu and the current menu does not need // to know the information of what exists inside the contextual one, like // knowing if there is an icon. - if (item.items && item.type !== 'contextual') { + if (item.items && item['type'] !== 'contextual') { return findNested(item.items, key); } diff --git a/packages/clay-drop-down/src/__tests__/DropDownWithDrilldown.tsx b/packages/clay-drop-down/src/__tests__/DropDownWithDrilldown.tsx index 1d118c845a..e16dd2a916 100644 --- a/packages/clay-drop-down/src/__tests__/DropDownWithDrilldown.tsx +++ b/packages/clay-drop-down/src/__tests__/DropDownWithDrilldown.tsx @@ -105,7 +105,7 @@ describe('ClayDropDownWithDrilldown', () => { jest.runAllTimers(); expect( - document.querySelectorAll('.drilldown-item')[1].classList + document.querySelectorAll('.drilldown-item')[1]!.classList ).toContain('drilldown-current'); }); @@ -135,7 +135,7 @@ describe('ClayDropDownWithDrilldown', () => { jest.runAllTimers(); expect( - document.querySelectorAll('.drilldown-item')[0].classList + document.querySelectorAll('.drilldown-item')[0]!.classList ).toContain('drilldown-current'); }); diff --git a/packages/clay-drop-down/src/__tests__/index.tsx b/packages/clay-drop-down/src/__tests__/index.tsx index fb9fa0fa37..1812c99f45 100644 --- a/packages/clay-drop-down/src/__tests__/index.tsx +++ b/packages/clay-drop-down/src/__tests__/index.tsx @@ -454,14 +454,14 @@ describe('ClayDropDown', () => { expect(fruit).toBeDefined(); expect(vegetable).toBeDefined(); - const [fruit1, fruit2, fruit3] = getAllByRole(fruit, 'menuitem'); + const [fruit1, fruit2, fruit3] = getAllByRole(fruit!, 'menuitem'); expect(fruit1).toBeDefined(); expect(fruit2).toBeDefined(); expect(fruit3).toBeDefined(); const [vegetable1, vegetable2, vegetable3] = getAllByRole( - vegetable, + vegetable!, 'menuitem' ); @@ -523,8 +523,8 @@ describe('ClayDropDown', () => { const [fruit, vegetable] = cGetAllByRole('group'); - const fruits = getAllByRole(fruit, 'menuitem'); - const vegetables = getAllByRole(vegetable, 'menuitem'); + const fruits = getAllByRole(fruit!, 'menuitem'); + const vegetables = getAllByRole(vegetable!, 'menuitem'); expect(fruits.length).toBe(1); expect(vegetables.length).toBe(1); diff --git a/packages/clay-form/src/DualListBox.tsx b/packages/clay-form/src/DualListBox.tsx index b58964822d..b8b3685e28 100644 --- a/packages/clay-form/src/DualListBox.tsx +++ b/packages/clay-form/src/DualListBox.tsx @@ -14,9 +14,9 @@ type TItems = Array>; function swapArrayItems(arrays: TItems, selectedIndexes: Array) { const [sourceArray, targetArray] = arrays; - const newTargetArray = [...targetArray]; + const newTargetArray = [...targetArray!]; - const newSourceArray = sourceArray.filter((item, index) => { + const newSourceArray = sourceArray!.filter((item, index) => { if (selectedIndexes.includes(index)) { newTargetArray.push(item); @@ -109,7 +109,7 @@ const ClayDualListBox = ({ className, disableLTR, disableRTL, - items, + items = [[], []], left = {}, onItemsChange, right = {}, @@ -134,8 +134,8 @@ const ClayDualListBox = ({ const [leftItems, rightItems] = items; - const selectedIndexesLeft = getSelectedIndexes(leftItems, leftSelected); - const selectedIndexesRight = getSelectedIndexes(rightItems, rightSelected); + const selectedIndexesLeft = getSelectedIndexes(leftItems!, leftSelected); + const selectedIndexesRight = getSelectedIndexes(rightItems!, rightSelected); return (
@@ -143,11 +143,11 @@ const ClayDualListBox = ({ - onItemsChange([newLeftItems, rightItems]) + onItemsChange([newLeftItems, rightItems!]) } onSelectChange={handleLeftSelectedChange} size={size} @@ -163,11 +163,11 @@ const ClayDualListBox = ({ displayType="secondary" onClick={() => { const [arrayLeft, arrayRight] = swapArrayItems( - [leftItems, rightItems], + [leftItems!, rightItems!], selectedIndexesLeft ); - onItemsChange([arrayLeft, arrayRight]); + onItemsChange([arrayLeft!, arrayRight!]); }} small spritemap={spritemap} @@ -182,11 +182,11 @@ const ClayDualListBox = ({ displayType="secondary" onClick={() => { const [arrayRight, arrayLeft] = swapArrayItems( - [rightItems, leftItems], + [rightItems!, leftItems!], selectedIndexesRight ); - onItemsChange([arrayLeft, arrayRight]); + onItemsChange([arrayLeft!, arrayRight!]); }} small spritemap={spritemap} @@ -197,11 +197,11 @@ const ClayDualListBox = ({ - onItemsChange([leftItems, newRightItems]) + onItemsChange([leftItems!, newRightItems]) } onSelectChange={handleRightSelectedChange} showArrows diff --git a/packages/clay-form/src/SelectBox.tsx b/packages/clay-form/src/SelectBox.tsx index 79c1ea02d9..00ae42ed99 100644 --- a/packages/clay-form/src/SelectBox.tsx +++ b/packages/clay-form/src/SelectBox.tsx @@ -18,7 +18,7 @@ function arrayMove( oldIndex: number, newIndex: number ) { - arrayToMove.splice(newIndex, 0, arrayToMove.splice(oldIndex, 1)[0]); + arrayToMove.splice(newIndex, 0, arrayToMove.splice(oldIndex, 1)[0]!); return arrayToMove; } @@ -27,7 +27,7 @@ function reorderUp(array: Array, selectedIndexes: Array) { let clonedArray = [...array]; for (let i = 0; i < selectedIndexes.length; i++) { - const item = selectedIndexes[i]; + const item = selectedIndexes[i]!; if (item === 0) { return clonedArray; @@ -43,7 +43,7 @@ function reorderDown(array: Array, selectedIndexes: Array) { let clonedArray = [...array]; for (let i = 0; i < selectedIndexes.length; i++) { - const item = selectedIndexes[i]; + const item = selectedIndexes[i]!; if (selectedIndexes.includes(clonedArray.length - 1)) { return clonedArray; diff --git a/packages/clay-list/src/List.tsx b/packages/clay-list/src/List.tsx index 7f78ae7b1e..affa282926 100644 --- a/packages/clay-list/src/List.tsx +++ b/packages/clay-list/src/List.tsx @@ -50,9 +50,9 @@ function ClayList({ 'show-quick-actions-on-hover': showQuickActionsOnHover, })} > - {process.env.NODE_ENV !== 'development' && children} + {process.env['NODE_ENV'] !== 'development' && children} - {process.env.NODE_ENV === 'development' && + {process.env['NODE_ENV'] === 'development' && children && React.Children.map(children, (child) => { warning( diff --git a/packages/clay-localized-input/src/__tests__/index.tsx b/packages/clay-localized-input/src/__tests__/index.tsx index 15637d0d77..5620b104aa 100644 --- a/packages/clay-localized-input/src/__tests__/index.tsx +++ b/packages/clay-localized-input/src/__tests__/index.tsx @@ -42,7 +42,7 @@ describe('ClayLocalizedInput', () => { locales={locales} onSelectedLocaleChange={() => {}} onTranslationsChange={() => {}} - selectedLocale={locales[0]} + selectedLocale={locales[0]!} spritemap="/path/to/svg" translations={{ 'en-US': 'Apple', @@ -65,7 +65,7 @@ describe('ClayLocalizedInput', () => { onTranslationsChange={() => {}} prependContent={prepend} resultFormatter={(val) => `https://liferay.com${prepend}${val}`} - selectedLocale={locales[0]} + selectedLocale={locales[0]!} spritemap="/path/to/svg" translations={{ 'en-US': 'Apple', @@ -85,7 +85,7 @@ describe('ClayLocalizedInput', () => { locales={locales} onSelectedLocaleChange={onSelectedChangeFn} onTranslationsChange={() => {}} - selectedLocale={locales[0]} + selectedLocale={locales[0]!} spritemap="/path/to/svg" translations={{ 'en-US': 'Apple', diff --git a/packages/clay-localized-input/src/index.tsx b/packages/clay-localized-input/src/index.tsx index 6731296bb7..0109ff127a 100644 --- a/packages/clay-localized-input/src/index.tsx +++ b/packages/clay-localized-input/src/index.tsx @@ -109,7 +109,7 @@ const ClayLocalizedInput = React.forwardRef( ) => { const [active, setActive] = React.useState(false); - const defaultLanguage = locales[0]; + const defaultLanguage = locales[0]!; return ( @@ -227,7 +227,7 @@ const ClayLocalizedInput = React.forwardRef( - {resultFormatter(translations[defaultLanguage.label])} + {resultFormatter(translations[defaultLanguage.label]!)} ); diff --git a/packages/clay-modal/src/Provider.tsx b/packages/clay-modal/src/Provider.tsx index 711e065ccf..ed66f02e17 100644 --- a/packages/clay-modal/src/Provider.tsx +++ b/packages/clay-modal/src/Provider.tsx @@ -77,7 +77,7 @@ const initialState = { }; const reducer = ( - state: TState, + _state: TState, action: TAction ): TState & {visible: boolean} => { switch (action.type) { diff --git a/packages/clay-multi-select/src/__tests__/IncrementalInteractions.tsx b/packages/clay-multi-select/src/__tests__/IncrementalInteractions.tsx index 6283175c30..4482333f60 100644 --- a/packages/clay-multi-select/src/__tests__/IncrementalInteractions.tsx +++ b/packages/clay-multi-select/src/__tests__/IncrementalInteractions.tsx @@ -119,7 +119,7 @@ describe('MultiSelect incremental interactions', () => { const [close] = getAllByRole('button'); - userEvent.click(close); + userEvent.click(close!); expect(queryAllByRole('row').length).toEqual(0); }); diff --git a/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx b/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx index 5b724e0524..0b51fbe1fd 100644 --- a/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx +++ b/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx @@ -111,7 +111,7 @@ export const ClayMultiStepNavWithBasicItems = ({ let showSteps = steps; const indexEnd = steps.length - 1; - const lastStep = steps[indexEnd]; + const lastStep = steps[indexEnd]!; if (steps.length > maxStepsShown) { const indexBeforeDropdown = maxStepsShown - 1; @@ -171,8 +171,8 @@ export const ClayMultiStepNavWithBasicItems = ({ > {activeInDropDown - ? steps[internalActive].title - : steps[showSteps.length].title} + ? steps[internalActive]!.title + : steps[showSteps.length]!.title} diff --git a/packages/clay-nav/src/Vertical.tsx b/packages/clay-nav/src/Vertical.tsx index ffdfed9725..e97283fabe 100644 --- a/packages/clay-nav/src/Vertical.tsx +++ b/packages/clay-nav/src/Vertical.tsx @@ -11,7 +11,7 @@ interface IItem extends React.ComponentProps { /** * Flag to indicate if item is active. */ - active?: boolean; + active?: boolean | undefined; /** * Callback for when item is clicked. diff --git a/packages/clay-navigation-bar/src/__tests__/index.tsx b/packages/clay-navigation-bar/src/__tests__/index.tsx index ada1c7460e..080819da52 100644 --- a/packages/clay-navigation-bar/src/__tests__/index.tsx +++ b/packages/clay-navigation-bar/src/__tests__/index.tsx @@ -193,7 +193,7 @@ describe('ClayNavigationBar', () => { ); expect(mockWarnings).toBeCalled(); - expect(mockWarnings.mock.calls[0][0]).toBe( + expect(mockWarnings.mock.calls[0]![0]).toBe( 'Warning: ClayNavigationBar expects 0 or 1 active children, but received 2' ); expect(container).toMatchSnapshot(); diff --git a/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx b/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx index 89e1f73536..2c086cef32 100644 --- a/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx +++ b/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx @@ -27,8 +27,6 @@ const defaultDeltas = [ }, ]; -type Items = React.ComponentProps['items']; - interface IDelta { /** * Path or URL to be used for some SPA focused use cases. @@ -212,7 +210,7 @@ export const ClayPaginationBarWithBasicItems = ({ }); if (!activeDelta) { - activeDelta = deltas[0].label; + activeDelta = deltas[0]!.label; } const totalPages = Math.ceil(totalItems / activeDelta); diff --git a/packages/clay-pagination/src/PaginationWithBasicItems.tsx b/packages/clay-pagination/src/PaginationWithBasicItems.tsx index 23ed5d9514..108a204774 100644 --- a/packages/clay-pagination/src/PaginationWithBasicItems.tsx +++ b/packages/clay-pagination/src/PaginationWithBasicItems.tsx @@ -149,7 +149,7 @@ const ClayPaginationWithBasicItems = React.forwardRef( const pages = Array(totalPages) .fill(0) - .map((item, index) => index + 1); + .map((_item, index) => index + 1); return ( diff --git a/packages/clay-shared/src/getEllipsisItems.tsx b/packages/clay-shared/src/getEllipsisItems.tsx index c3434ef4b0..fa74dc5599 100644 --- a/packages/clay-shared/src/getEllipsisItems.tsx +++ b/packages/clay-shared/src/getEllipsisItems.tsx @@ -67,7 +67,7 @@ export const getEllipsisItems = ( const rightBuffer = getBufferList(rightBufferStart, lastIndex, config); const newArray = [ - items[0], + items[0]!, ...leftBuffer, ...items.slice( Math.max(activeIndex - ellipsisBuffer, 1), @@ -78,7 +78,7 @@ export const getEllipsisItems = ( ]; if (items.length > 1) { - newArray.push(items[lastIndex]); + newArray.push(items[lastIndex]!); } return newArray; diff --git a/packages/clay-shared/src/setElementFullHeight.ts b/packages/clay-shared/src/setElementFullHeight.ts index 2b2c40d084..8a6b5ee870 100644 --- a/packages/clay-shared/src/setElementFullHeight.ts +++ b/packages/clay-shared/src/setElementFullHeight.ts @@ -11,7 +11,7 @@ export function setElementFullHeight(element: HTMLElement) { let height = 0; for (let i = 0; i < element.children.length; i++) { - height += element.children[i].clientHeight; + height += element.children[i]!.clientHeight; } element.setAttribute('style', `height: ${height}px`); diff --git a/packages/clay-shared/src/sub.ts b/packages/clay-shared/src/sub.ts index f7f6842b99..5504f935ea 100644 --- a/packages/clay-shared/src/sub.ts +++ b/packages/clay-shared/src/sub.ts @@ -14,7 +14,7 @@ export const sub = (langKey: string, args: Array) => { .filter((val) => val.length !== 0); for (let i = 0; i < args.length; i++) { - const arg = args[i]; + const arg = args[i]!; const indexKey = `{${i}}`; diff --git a/packages/clay-shared/src/useFocusManagement.ts b/packages/clay-shared/src/useFocusManagement.ts index d9e8cfcc25..6f8ff16ee7 100644 --- a/packages/clay-shared/src/useFocusManagement.ts +++ b/packages/clay-shared/src/useFocusManagement.ts @@ -278,12 +278,12 @@ export function useFocusManagement(scope: React.RefObject) { // this happens, we want to track where the next node is in case we // reach the end of the list of focusable nodes. if (nextFocusInFiber !== nextFocusInDoc) { - nextFocusInDocRef.current = nextFocusInDoc; + nextFocusInDocRef.current = nextFocusInDoc!; } // Same as above, except we track the previous node for tabbing backwards. if (prevFocusInFiber !== prevFocusInDoc) { - prevFocusInDocRef.current = prevFocusInDoc; + prevFocusInDocRef.current = prevFocusInDoc!; } let nextActive = backwards ? prevFocusInFiber : nextFocusInFiber; diff --git a/packages/clay-tabs/src/__tests__/index.tsx b/packages/clay-tabs/src/__tests__/index.tsx index bd1d8a80b3..c0c48cd04b 100644 --- a/packages/clay-tabs/src/__tests__/index.tsx +++ b/packages/clay-tabs/src/__tests__/index.tsx @@ -96,8 +96,8 @@ describe('ClayTabs', () => { const tabItems = getAllByTestId('tabItem'); - expect(tabItems[0].nodeName).toBe('A'); - expect(tabItems[1].nodeName).toBe('A'); + expect(tabItems[0]!.nodeName).toBe('A'); + expect(tabItems[1]!.nodeName).toBe('A'); }); it('renders disabled nav items', () => { @@ -118,8 +118,8 @@ describe('ClayTabs', () => { const tabItems = getAllByTestId('tabItem'); - expect(tabItems[2].classList).toContain('disabled'); - expect(tabItems[2].attributes.getNamedItem('disabled')).toBeTruthy(); + expect(tabItems[2]!.classList).toContain('disabled'); + expect(tabItems[2]!.attributes.getNamedItem('disabled')).toBeTruthy(); }); it('emits a number when clicking an item', () => { @@ -142,10 +142,10 @@ describe('ClayTabs', () => { const tabItems = getAllByTestId('tabItem'); - fireEvent.click(tabItems[0]); + fireEvent.click(tabItems[0]!); expect(onClick).toBeCalled(); - fireEvent.click(tabItems[1]); + fireEvent.click(tabItems[1]!); expect(onClick).toBeCalled(); }); @@ -166,10 +166,10 @@ describe('ClayTabs', () => { const tabItems = getAllByRole('tab'); const tabPanels = getAllByRole('tabpanel'); - expect(tabItems[0].innerHTML).toBe('Two'); + expect(tabItems[0]!.innerHTML).toBe('Two'); expect(tabItems.length).toBe(1); - expect(tabPanels[0].innerHTML).toBe('Content Two'); + expect(tabPanels[0]!.innerHTML).toBe('Content Two'); expect(tabPanels.length).toBe(1); }); diff --git a/tsconfig.json b/tsconfig.json index 1116e4777c..486742a72e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,16 +1,26 @@ { "compilerOptions": { + "allowJs": true, + "allowUnreachableCode": true, + "allowUnusedLabels": true, + "baseUrl": ".", "esModuleInterop": true, - "noEmit": true, - "strict": true, "jsx": "react", - "target": "es2015", - "resolveJsonModule": true, "module": "esnext", "moduleResolution": "node", + "noEmit": true, + "noFallthroughCasesInSwitch": true, + "noImplicitAny": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noUncheckedIndexedAccess": true, + "noUnusedParameters": true, "removeComments": true, - "allowJs": true, - "baseUrl": ".", + "resolveJsonModule": true, + "strict": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "target": "es2015", "paths": { "@clayui/*": ["node_modules/@clayui/*/src"], "*": ["custom-types/*", "node_modules/*", "packages/*"]