@coveord/plasma-mantine 48.1.1 → 48.2.1

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

@@ -29,13 +29,20 @@ import {Th} from './Th';
 const useStyles = createStyles<string, {hasHeader: boolean}>((theme, {hasHeader}, getRef) => ({
     table: {
         width: '100%',
+        '& td:first-child': {
+            paddingLeft: theme.spacing.md,
+        },
     },
+
     header: {
         position: 'sticky',
         top: hasHeader ? 69 : 0,
         backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
         transition: 'box-shadow 150ms ease',
         zIndex: 12, // skeleton is 11
+        '& tr th:first-child div': {
+            paddingLeft: theme.spacing.md,
+        },
 
         '&::after': {
             content: '""',

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__/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})})

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

@@ -69,6 +69,7 @@ describe('Table.Predicate', () => {
     });
 
     it('calls onChange when changing the predicate', async () => {
+        const user = userEvent.setup({delay: null});
         const onChange = jest.fn();
         render(
             <Table
@@ -97,13 +98,13 @@ describe('Table.Predicate', () => {
             ).toHaveValue('Second');
         });
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'rank',
             })
         );
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('option', {
                 name: 'First',
             })