@coveord/plasma-mantine 48.2.0 → 48.3.0

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -4,21 +4,23 @@ import dayjs from 'dayjs';
 import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
 
 describe('DateRangePickerInlineCalendar', () => {
-    it('calls onApply when the user clicks on the apply button', () => {
+    it('calls onApply when the user clicks on the apply button', async () => {
+        const user = userEvent.setup({delay: null});
         const onApply = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledTimes(1);
         expect(onApply).toHaveBeenCalledWith([null, null]);
     });
 
-    it('calls onCancel when the user clicks on the cancel button', () => {
+    it('calls onCancel when the user clicks on the cancel button', async () => {
+        const user = userEvent.setup({delay: null});
         const onCancel = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={jest.fn()} onCancel={onCancel} />);
 
-        userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+        await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
         expect(onCancel).toHaveBeenCalledTimes(1);
     });
@@ -29,7 +31,8 @@ describe('DateRangePickerInlineCalendar', () => {
         expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
     });
 
-    it('calls onApply with the selected dates when choosing a preset', () => {
+    it('calls onApply with the selected dates when choosing a preset', async () => {
+        const user = userEvent.setup({delay: null});
         const onApply = jest.fn();
         render(
             <DateRangePickerInlineCalendar
@@ -42,50 +45,52 @@ describe('DateRangePickerInlineCalendar', () => {
             />
         );
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'select me'}));
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('option', {name: 'select me'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([new Date(1999, 11, 31), new Date(2000, 0, 1)]);
     });
 
-    it('calls onApply with the selected dates when clicking in the calendar', () => {
+    it('calls onApply with the selected dates when clicking in the calendar', async () => {
+        const user = userEvent.setup({delay: null});
         jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const onApply = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
 
         // click once for the start, once for the end
-        userEvent.click(screen.getAllByRole('button', {name: '8'})[0]);
-        userEvent.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 14)]);
 
         jest.useRealTimers();
     });
 
-    it('calls onApply with the selected dates when typing in the inputs', () => {
+    it('calls onApply with the selected dates when typing in the inputs', async () => {
+        const user = userEvent.setup({delay: null});
         const onApply = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
 
         const startInput = screen.getByRole('textbox', {
             name: /start/i,
         });
-        userEvent.clear(startInput);
-        userEvent.type(startInput, 'Jan 8, 2022');
+        await user.clear(startInput);
+        await user.type(startInput, 'Jan 8, 2022');
 
         const endInput = screen.getByRole('textbox', {
             name: /end/i,
         });
-        userEvent.clear(endInput);
-        userEvent.type(endInput, 'Jan 14, 2022');
+        await user.clear(endInput);
+        await user.type(endInput, 'Jan 14, 2022');
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([
             dayjs(new Date(2022, 0, 8)).startOf('day').toDate(),

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -19,7 +19,8 @@ describe('DateRangePickerPopoverCalendar', () => {
         expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
     });
 
-    it('updates with the selected dates when choosing a preset', () => {
+    it('updates with the selected dates when choosing a preset', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
             return (
@@ -36,17 +37,18 @@ describe('DateRangePickerPopoverCalendar', () => {
         };
         render(<Fixture />);
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'select me'}));
+        await user.click(screen.getByRole('option', {name: 'select me'}));
 
         expect(screen.getByTestId('json')).toHaveTextContent('["1999-12-31T00:00:00.000Z","2000-01-01T00:00:00.000Z"]');
     });
 
-    it('calls onApply with the selected dates when clicking in the calendar', () => {
+    it('calls onApply with the selected dates when clicking in the calendar', async () => {
+        const user = userEvent.setup({delay: null});
         jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
@@ -59,10 +61,10 @@ describe('DateRangePickerPopoverCalendar', () => {
         };
         render(<Fixture />);
 
-        userEvent.click(screen.getByRole('textbox', {name: 'Start'}));
+        await user.click(screen.getByRole('textbox', {name: 'Start'}));
         // click once for the start, once for the end
-        userEvent.click(screen.getAllByRole('button', {name: '8'})[0]);
-        userEvent.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
 
         // hides the calendar when the second date is clicked
         expect(screen.queryByRole('button', {name: '8'})).not.toBeInTheDocument();
@@ -72,7 +74,8 @@ describe('DateRangePickerPopoverCalendar', () => {
         jest.useRealTimers();
     });
 
-    it('calls onApply with the selected dates when typing in the inputs', () => {
+    it('calls onApply with the selected dates when typing in the inputs', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
             return (
@@ -87,14 +90,14 @@ describe('DateRangePickerPopoverCalendar', () => {
         const startInput = screen.getByRole('textbox', {
             name: /start/i,
         });
-        userEvent.clear(startInput);
-        userEvent.type(startInput, 'Jan 8, 2022');
+        await user.clear(startInput);
+        await user.type(startInput, 'Jan 8, 2022');
 
         const endInput = screen.getByRole('textbox', {
             name: /end/i,
         });
-        userEvent.clear(endInput);
-        userEvent.type(endInput, 'Jan 14, 2022');
+        await user.clear(endInput);
+        await user.type(endInput, 'Jan 14, 2022');
 
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
     });

package/src/components/date-range-picker/__tests__/DateRangePickerPresetSelect.spec.tsx

@@ -3,7 +3,8 @@ import {render, screen, userEvent} from '@test-utils';
 import {DateRangePickerPresetSelect} from '../DateRangePickerPresetSelect';
 
 describe('DateRangePickerPresetSelect', () => {
-    it('calls onChange when selecting a preset', () => {
+    it('calls onChange when selecting a preset', async () => {
+        const user = userEvent.setup({delay: null});
         const onChange = jest.fn();
         render(
             <DateRangePickerPresetSelect
@@ -15,12 +16,12 @@ describe('DateRangePickerPresetSelect', () => {
             />
         );
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'select me'}));
+        await user.click(screen.getByRole('option', {name: 'select me'}));
 
         expect(onChange).toHaveBeenCalledWith([new Date(1999, 11, 31), new Date(2000, 0, 1)]);
     });

package/src/components/date-range-picker/__tests__/EditableDateRangePicker.spec.tsx

@@ -18,7 +18,8 @@ describe('EditableDateRangePicker', () => {
         expect(screen.getByText('SEPARATOR')).toBeVisible();
     });
 
-    it('updates when editing values', () => {
+    it('updates when editing values', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const [value, setValue] = useState<DateRangePickerValue>([null, null]);
             return (
@@ -33,14 +34,14 @@ describe('EditableDateRangePicker', () => {
         const startInput = screen.getByRole('textbox', {
             name: /start/i,
         });
-        userEvent.clear(startInput);
-        userEvent.type(startInput, 'Jan 8, 2022');
+        await user.clear(startInput);
+        await user.type(startInput, 'Jan 8, 2022');
 
         const endInput = screen.getByRole('textbox', {
             name: /end/i,
         });
-        userEvent.clear(endInput);
-        userEvent.type(endInput, 'Jan 14, 2022');
+        await user.clear(endInput);
+        await user.type(endInput, 'Jan 14, 2022');
 
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
     });

package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx

@@ -9,7 +9,8 @@ describe('InlineConfirm', () => {
         expect(screen.getByText('Hello World')).toBeVisible();
     });
 
-    it('calls the onClick prop when clicking on a button', () => {
+    it('calls the onClick prop when clicking on a button', async () => {
+        const user = userEvent.setup({delay: null});
         const onClickSpy = jest.fn();
         render(
             <InlineConfirm>
@@ -19,12 +20,13 @@ describe('InlineConfirm', () => {
             </InlineConfirm>
         );
 
-        userEvent.click(screen.getByRole('button', {name: 'Delete'}));
+        await user.click(screen.getByRole('button', {name: 'Delete'}));
 
         expect(onClickSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('replace the children with a prompt when clicking on a button which requires confirmation', () => {
+    it('replace the children with a prompt when clicking on a button which requires confirmation', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
@@ -34,13 +36,14 @@ describe('InlineConfirm', () => {
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
         expect(screen.getByRole('button', {name: 'Remove'})).toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
 
         expect(screen.getByText('Are you sure?')).toBeVisible();
         expect(screen.queryByRole('button', {name: 'Remove'})).not.toBeInTheDocument();
     });
 
-    it('hides the prompt when the user cancel and call onConfirm when the user confirms', () => {
+    it('hides the prompt when the user cancel and call onConfirm when the user confirms', async () => {
+        const user = userEvent.setup({delay: null});
         const confirmSpy = jest.fn();
         render(
             <InlineConfirm>
@@ -55,22 +58,23 @@ describe('InlineConfirm', () => {
             </InlineConfirm>
         );
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
         expect(screen.getByText('Are you sure?')).toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'I changed my mind'}));
+        await user.click(screen.getByRole('button', {name: 'I changed my mind'}));
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
         expect(confirmSpy).not.toHaveBeenCalled();
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
         expect(screen.getByText('Are you sure?')).toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'I confirm'}));
+        await user.click(screen.getByRole('button', {name: 'I confirm'}));
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
         expect(confirmSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('shows the prompt related to the clicked button', () => {
+    it('shows the prompt related to the clicked button', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="remove">Remove</InlineConfirm.Button>
@@ -81,13 +85,13 @@ describe('InlineConfirm', () => {
             </InlineConfirm>
         );
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
         expect(screen.getByText('Delete X?')).toBeVisible();
         expect(screen.queryByText('Print?')).not.toBeInTheDocument();
 
-        userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+        await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
-        userEvent.click(screen.getByRole('button', {name: 'Print'}));
+        await user.click(screen.getByRole('button', {name: 'Print'}));
         expect(screen.queryByText('Delete X?')).not.toBeInTheDocument();
         expect(screen.getByText('Print?')).toBeVisible();
     });

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -2,7 +2,8 @@ import {render, screen, userEvent} from '@test-utils';
 import {ModalWizard} from '../ModalWizard';
 
 describe('ModalWizard', () => {
-    it('navigate slides using footer buttons', () => {
+    it('navigate slides using footer buttons', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -69,7 +70,7 @@ describe('ModalWizard', () => {
         });
         expect(nextButton).toBeInTheDocument();
 
-        userEvent.click(nextButton);
+        await user.click(nextButton);
 
         expect(
             screen.getByRole('heading', {
@@ -96,7 +97,7 @@ describe('ModalWizard', () => {
         });
         expect(nextButton).toBeInTheDocument();
 
-        userEvent.click(nextButton);
+        await user.click(nextButton);
 
         expect(
             screen.getByRole('heading', {
@@ -125,7 +126,7 @@ describe('ModalWizard', () => {
         expect(nextButton).toBeInTheDocument();
         expect(nextButton).toBeDisabled();
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('button', {
                 name: /previous/i,
             })
@@ -152,7 +153,8 @@ describe('ModalWizard', () => {
         ).toBeInTheDocument();
     });
 
-    it('modal wizard onClose', () => {
+    it('modal wizard onClose', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -182,12 +184,13 @@ describe('ModalWizard', () => {
         const closeButton = screen.getByRole('button', {
             name: /closebuttonlabel/i,
         });
-        userEvent.click(closeButton);
+        await user.click(closeButton);
 
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('modal wizard onCancel', () => {
+    it('modal wizard onCancel', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -217,12 +220,13 @@ describe('ModalWizard', () => {
         const cancelButton = screen.getByRole('button', {
             name: /cancel/i,
         });
-        userEvent.click(cancelButton);
+        await user.click(cancelButton);
 
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('modal wizard onFinish', () => {
+    it('modal wizard onFinish', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -254,11 +258,12 @@ describe('ModalWizard', () => {
             name: /finish/i,
         });
 
-        userEvent.click(finishButton);
+        await user.click(finishButton);
         expect(onFinish).toHaveBeenCalledTimes(1);
     });
 
-    it('handle dirty state if user confirms close', () => {
+    it('handle dirty state if user confirms close', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -295,13 +300,14 @@ describe('ModalWizard', () => {
         });
 
         handleDirtyState.mockReturnValueOnce(true);
-        userEvent.click(closeButton);
+        await user.click(closeButton);
 
         expect(handleDirtyState).toHaveBeenCalledTimes(1);
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('handle dirty state if user confirms cancel', () => {
+    it('handle dirty state if user confirms cancel', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -338,7 +344,7 @@ describe('ModalWizard', () => {
         });
 
         handleDirtyState.mockReturnValueOnce(false);
-        userEvent.click(closeButton);
+        await user.click(closeButton);
         expect(handleDirtyState).toHaveBeenCalledTimes(1);
         expect(onClose).toHaveBeenCalledTimes(0);
     });

package/src/components/table/Table.tsx

@@ -265,6 +265,7 @@ export const Table: TableType = <T,>({
                     getSelectedRow,
                     clearSelection,
                     form,
+                    containerRef: outsideClickRef,
                 }}
             >
                 {header}

package/src/components/table/TableContext.tsx

@@ -1,7 +1,7 @@
 import {DateRangePickerValue} from '@mantine/dates';
 import {UseFormReturnType} from '@mantine/form';
 import {TableState} from '@tanstack/react-table';
-import {createContext, Dispatch} from 'react';
+import {createContext, Dispatch, RefObject} from 'react';
 
 export type onTableChangeEvent = (params: TableState & TableFormType) => void;
 
@@ -51,6 +51,10 @@ type TableContextType = {
      * Form used to handle predicates and dateRange
      */
     form: UseFormReturnType<TableFormType>;
+    /**
+     * Table container ref
+     */
+    containerRef: RefObject<HTMLDivElement>;
 };
 
 export const TableContext = createContext<TableContextType | null>(null);

package/src/components/table/TablePagination.tsx

@@ -11,12 +11,13 @@ interface TablePaginationProps {
 }
 
 export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {
-    const {state, setState} = useTable();
+    const {state, setState, containerRef} = useTable();
     const updatePage = (newPage: number) => {
         setState((prevState: TableState) => ({
             ...prevState,
             pagination: {...prevState.pagination, pageIndex: newPage - 1},
         }));
+        containerRef.current.scrollIntoView({behavior: 'smooth'});
     };
 
     return (

package/src/components/table/__tests__/Table.spec.tsx

@@ -69,6 +69,7 @@ describe('Table', () => {
     });
 
     it('opens the collapsible rows when the user click on the toggle', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
         const customColumns: Array<ColumnDef<RowData>> = [
             columnHelper.accessor('firstName', {
@@ -89,7 +90,7 @@ describe('Table', () => {
 
         expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: last')).toBeVisible();
         });
@@ -126,7 +127,8 @@ describe('Table', () => {
         expect(allRows).toHaveLength(2);
     });
 
-    it('reset row selection when user click outside the table', () => {
+    it('reset row selection when user click outside the table', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <div>
                 <div>I'm a header</div>
@@ -144,11 +146,11 @@ describe('Table', () => {
 
         expect(row).not.toHaveClass('__mantine-ref-rowSelected');
 
-        userEvent.click(row);
+        await user.click(row);
 
         expect(row).toHaveClass('__mantine-ref-rowSelected');
 
-        userEvent.click(screen.getByText(/i'm a header/i));
+        await user.click(screen.getByText(/i'm a header/i));
 
         expect(row).not.toHaveClass('__mantine-ref-rowSelected');
     });

package/src/components/table/__tests__/TableActions.spec.tsx

@@ -10,7 +10,8 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.Actions', () => {
-    it('displays the actions when the row is selected', () => {
+    it('displays the actions when the row is selected', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <Table<RowData> data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
                 <Table.Header>
@@ -24,12 +25,12 @@ describe('Table.Actions', () => {
         expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
 
         // select the fruit row
-        userEvent.click(screen.getByRole('cell', {name: 'fruit'}));
+        await user.click(screen.getByRole('cell', {name: 'fruit'}));
         expect(screen.getByRole('button', {name: 'Eat fruit'})).toBeVisible();
         expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
 
         // select the vegetable row
-        userEvent.click(screen.getByRole('cell', {name: 'vegetable'}));
+        await user.click(screen.getByRole('cell', {name: 'vegetable'}));
         expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
         expect(screen.getByRole('button', {name: 'Eat vegetable'})).toBeVisible();
     });

package/src/components/table/__tests__/TableDateRangePicker.spec.tsx

@@ -46,6 +46,7 @@ describe('Table.DateRangePicker', () => {
     });
 
     it('displays the selected date range in the table', async () => {
+        const user = userEvent.setup({delay: null});
         const onChange = jest.fn();
         render(
             <Table
@@ -65,19 +66,19 @@ describe('Table.DateRangePicker', () => {
         await screen.findByText('Jan 01, 2022 - Jan 07, 2022');
         await screen.findByRole('button', {name: 'calendar'});
 
-        userEvent.click(screen.getByRole('button', {name: 'calendar'}));
+        await user.click(screen.getByRole('button', {name: 'calendar'}));
 
         await screen.findByRole('dialog');
 
         // select a preset
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'Preset'}));
+        await user.click(screen.getByRole('option', {name: 'Preset'}));
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         await waitFor(() => expect(screen.queryByText('Jan 08, 2022 - Jan 14, 2022')).toBeVisible());
         expect(onChange).toHaveBeenCalledWith(

package/src/components/table/__tests__/TableFilter.spec.tsx

@@ -22,7 +22,8 @@ describe('Table.Filter', () => {
         expect(screen.getByPlaceholderText('hello fruits')).toBeVisible();
     });
 
-    it('calls onChange when typing something in the filter', () => {
+    it('calls onChange when typing something in the filter', async () => {
+        const user = userEvent.setup({delay: null});
         const onChange = jest.fn();
         render(
             <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
@@ -32,7 +33,7 @@ describe('Table.Filter', () => {
             </Table>
         );
 
-        userEvent.type(screen.getByRole('textbox'), 'vegetable');
+        await user.type(screen.getByRole('textbox'), 'vegetable');
 
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({globalFilter: 'vegetable'}));
     });

package/src/components/table/__tests__/TablePagination.spec.tsx

@@ -9,6 +9,14 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.Pagination', () => {
+    beforeEach(() => {
+        if (!HTMLElement.prototype.scrollIntoView) {
+            HTMLElement.prototype.scrollIntoView = () => {
+                jest.fn();
+            };
+        }
+    });
+
     it('displays the number of pages', () => {
         render(
             <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>

package/src/components/table/__tests__/TablePerPage.spec.tsx

@@ -62,7 +62,8 @@ describe('Table.PerPage', () => {
         );
     });
 
-    it('calls onChange when changing the number of items per page', () => {
+    it('calls onChange when changing the number of items per page', async () => {
+        const user = userEvent.setup({delay: null});
         const onChange = jest.fn();
         render(
             <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
@@ -72,7 +73,7 @@ describe('Table.PerPage', () => {
             </Table>
         );
 
-        userEvent.click(screen.queryByRole('radio', {name: '100'}));
+        await user.click(screen.queryByRole('radio', {name: '100'}));
 
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})})