@coveord/plasma-mantine 53.1.4 → 54.0.0

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

@@ -1,8 +1,9 @@
 import {Box} from '@mantine/core';
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, waitFor} from '@test-utils';
+import {render, screen, userEvent, waitFor, within} from '@test-utils';
 import {Table} from '../Table';
 import {TableColumnsSelector} from '../table-columns-selector/TableColumnsSelector';
+import {useTable} from '../use-table';
 
 const mockData = [
     {
@@ -21,13 +22,6 @@ const mockData = [
     },
 ];
 
-const columnNames: Record<string, string> = {
-    name: 'Name',
-    age: 'Age',
-    email: 'Email',
-    phone: 'Phone',
-};
-
 type RowData = {
     name: string;
     age: number;
@@ -37,92 +31,107 @@ type RowData = {
 };
 
 const columnHelper = createColumnHelper<RowData>();
-const columns: Array<ColumnDef<RowData>> = [
-    columnHelper.accessor('name', {enableSorting: false}),
-    columnHelper.accessor('age', {enableSorting: false}),
-    columnHelper.accessor('email', {enableSorting: false}),
-    columnHelper.accessor('phone', {enableSorting: false}),
+const baseColumns: Array<ColumnDef<RowData>> = [
+    columnHelper.accessor('name', {header: 'Name', enableSorting: false}),
+    columnHelper.accessor('age', {header: 'Age', enableSorting: false}),
+    columnHelper.accessor('email', {header: 'Email', enableSorting: false}),
+    columnHelper.accessor('phone', {header: 'Phone', enableSorting: false}),
     Table.CollapsibleColumn as ColumnDef<RowData>,
 ];
 
 describe('TableColumnsSelector', () => {
     it('render the edit button in the table header', () => {
-        render(
-            <Table data={mockData} columns={columns}>
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={mockData} columns={baseColumns}>
+                    <Table.Header>
+                        <TableColumnsSelector />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         expect(screen.getByRole('button', {name: 'Edit columns'})).toBeVisible();
         expect(screen.queryByRole('button', {name: 'Edit columns (4)'})).not.toBeInTheDocument();
     });
 
     it('renders the custom label when defined', () => {
-        render(
-            <Table data={mockData} columns={columns}>
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} label="Custom label" />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={mockData} columns={baseColumns}>
+                    <Table.Header>
+                        <TableColumnsSelector label="Custom label" />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         expect(screen.getByRole('button', {name: 'Custom label'})).toBeVisible();
     });
 
     it('renders the count of visible columns if showVisibleCountLabel is true', () => {
-        render(
-            <Table data={mockData} columns={columns}>
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} showVisibleCountLabel />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={mockData} columns={baseColumns}>
+                    <Table.Header>
+                        <TableColumnsSelector showVisibleCountLabel />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         expect(screen.getByRole('button', {name: 'Edit columns (4)'})).toBeVisible();
     });
 
     it('renders all columns in the dropdown, except the collapsible and the multiselectRow by default', async () => {
         const user = userEvent.setup();
-        render(
-            <Table
-                data={mockData}
-                columns={columns}
-                multiRowSelectionEnabled
-                getExpandChildren={(datum) => <Box py="xs">{datum.body}</Box>}
-            >
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>({enableMultiRowSelection: true});
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={baseColumns}
+                    getRowExpandedContent={(datum) => <Box py="xs">{datum.body}</Box>}
+                >
+                    <Table.Header>
+                        <TableColumnsSelector />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-
-        // columns are rendered
-        expect(screen.getAllByRole('button', {name: /arrowheaddown/i})).toHaveLength(2);
-        expect(screen.getAllByRole('checkbox', {name: /select row/i})).toHaveLength(2);
-
-        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Name'})).toBeVisible());
-        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Age'})).toBeVisible());
-        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Email'})).toBeVisible());
-        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeVisible());
-
-        // columns are not in the dropdown
-        expect(screen.queryByRole('checkbox', {name: /collapsible/i})).not.toBeInTheDocument();
-        expect(screen.queryByRole('checkbox', {name: 'select'})).not.toBeInTheDocument();
+        const dropdown = screen.getByRole('dialog', {name: 'Edit columns'});
+        const columnsCheckboxes = within(dropdown).getAllByRole('checkbox');
+
+        expect(columnsCheckboxes).toHaveLength(4);
+        expect(columnsCheckboxes[0]).toHaveAccessibleName('Name');
+        expect(columnsCheckboxes[1]).toHaveAccessibleName('Age');
+        expect(columnsCheckboxes[2]).toHaveAccessibleName('Email');
+        expect(columnsCheckboxes[3]).toHaveAccessibleName('Phone');
     });
 
     it('renders all checkboxes checked by default', async () => {
         const user = userEvent.setup();
-        render(
-            <Table data={mockData} columns={columns}>
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={mockData} columns={baseColumns}>
+                    <Table.Header>
+                        <TableColumnsSelector />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
@@ -132,33 +141,54 @@ describe('TableColumnsSelector', () => {
         expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
     });
 
-    it('does not render the checkboxes for the columns that are in the nonHideableColumns prop', async () => {
+    it('renders a disabled checked checkbox for columns that are always visible', async () => {
+        const columns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('name', {header: 'Name', enableSorting: false}),
+            columnHelper.accessor('age', {header: 'Age', enableSorting: false, enableHiding: false}),
+            columnHelper.accessor('email', {header: 'Email', enableSorting: false}),
+            columnHelper.accessor('phone', {header: 'Phone', enableSorting: false}),
+        ];
         const user = userEvent.setup();
-        render(
-            <Table data={mockData} columns={columns}>
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} nonHideableColumns={['name']} />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={mockData} columns={columns}>
+                    <Table.Header>
+                        <TableColumnsSelector />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
-        expect(screen.queryByRole('checkbox', {name: 'Name'})).not.toBeInTheDocument();
-        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+        expect(screen.queryByRole('checkbox', {name: 'Name'})).toBeChecked();
         expect(screen.getByRole('checkbox', {name: 'Email'})).toBeChecked();
         expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
+
+        const ageColumn = screen.getByRole('checkbox', {name: 'Age'});
+        expect(ageColumn).toBeChecked();
+        expect(ageColumn).toBeDisabled();
+        await user.hover(ageColumn.parentElement);
+        await waitFor(() => {
+            expect(screen.getByRole('tooltip', {name: 'This column is always visible.'})).toBeVisible();
+        });
     });
 
     it('renders unchecked checkboxes for the columns that are not visible in the inital state of the table', async () => {
         const user = userEvent.setup();
-        render(
-            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {columnVisibility: {email: false}}});
+            return (
+                <Table store={store} data={mockData} columns={baseColumns}>
+                    <Table.Header>
+                        <TableColumnsSelector />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
@@ -170,13 +200,17 @@ describe('TableColumnsSelector', () => {
 
     it('renders disabled checkboxes when the maxSelectableColumns is set and the maximum number of columns is checked', async () => {
         const user = userEvent.setup();
-        render(
-            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
-                <Table.Header>
-                    <TableColumnsSelector columnNames={columnNames} maxSelectableColumns={3} />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {columnVisibility: {email: false}}});
+            return (
+                <Table store={store} data={mockData} columns={baseColumns}>
+                    <Table.Header>
+                        <TableColumnsSelector maxSelectableColumns={3} />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
@@ -201,17 +235,20 @@ describe('TableColumnsSelector', () => {
 
     it('renders a tooltip when the maxSelectableColumns is set and the maximum number of columns is checked and the user hover a disabled checkbox', async () => {
         const user = userEvent.setup();
-        render(
-            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
-                <Table.Header>
-                    <TableColumnsSelector
-                        columnNames={columnNames}
-                        maxSelectableColumns={3}
-                        limitReachedTooltip="You can display up to 3 columns"
-                    />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {columnVisibility: {email: false}}});
+            return (
+                <Table store={store} data={mockData} columns={baseColumns}>
+                    <Table.Header>
+                        <TableColumnsSelector
+                            maxSelectableColumns={3}
+                            limitReachedTooltip="You can display up to 3 columns"
+                        />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
@@ -225,13 +262,17 @@ describe('TableColumnsSelector', () => {
     describe('footer', () => {
         it('does not render the footer when maxSelectableColumns is not defined', async () => {
             const user = userEvent.setup();
-            render(
-                <Table data={mockData} columns={columns}>
-                    <Table.Header>
-                        <TableColumnsSelector columnNames={columnNames} />
-                    </Table.Header>
-                </Table>,
-            );
+            const Fixture = () => {
+                const store = useTable<RowData>();
+                return (
+                    <Table store={store} data={mockData} columns={baseColumns}>
+                        <Table.Header>
+                            <TableColumnsSelector />
+                        </Table.Header>
+                    </Table>
+                );
+            };
+            render(<Fixture />);
 
             await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
@@ -240,17 +281,17 @@ describe('TableColumnsSelector', () => {
 
         it('renders the footer when maxSelectableColumns is defined and footer is defined', async () => {
             const user = userEvent.setup();
-            render(
-                <Table data={mockData} columns={columns}>
-                    <Table.Header>
-                        <TableColumnsSelector
-                            columnNames={columnNames}
-                            maxSelectableColumns={3}
-                            footer="You can display so many patate"
-                        />
-                    </Table.Header>
-                </Table>,
-            );
+            const Fixture = () => {
+                const store = useTable<RowData>();
+                return (
+                    <Table store={store} data={mockData} columns={baseColumns}>
+                        <Table.Header>
+                            <TableColumnsSelector maxSelectableColumns={3} footer="You can display so many patate" />
+                        </Table.Header>
+                    </Table>
+                );
+            };
+            render(<Fixture />);
 
             await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 

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

@@ -2,31 +2,27 @@ import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen} from '@test-utils';
 
 import {Table} from '../Table';
+import {useTable} from '../use-table';
 
 type RowData = {name: string};
 
 const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
-const basicTableWithDateRangePicker = (
-    <Table
-        data={[{name: 'fruit'}, {name: 'vegetable'}]}
-        columns={columns}
-        initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
-    >
-        <Table.Header>
-            <Table.DateRangePicker />
-        </Table.Header>
-    </Table>
-);
 
 describe('Table.DateRangePicker', () => {
     it('displays the initial dates', async () => {
-        render(basicTableWithDateRangePicker);
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}});
+            return (
+                <Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                    <Table.Header>
+                        <Table.DateRangePicker />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
-        expect(
-            screen.getByRole('button', {
-                name: /jan 01, 2022 \- jan 07, 2022/i,
-            }),
-        ).toBeVisible();
+        expect(screen.getByRole('button', {name: /jan 01, 2022 \- jan 07, 2022/i})).toBeVisible();
     });
 });

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

@@ -1,9 +1,8 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {act, render, screen, userEvent, within} from '@test-utils';
 
-import {Button} from '@mantine/core';
 import {Table} from '../Table';
-import {useTable} from '../TableContext';
+import {useTable} from '../use-table';
 
 type RowData = {name: string};
 
@@ -18,126 +17,83 @@ describe('Table.Filter', () => {
         vi.useRealTimers();
     });
     it('displays the placeholder', () => {
-        const onChange = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
-                <Table.Header>
-                    <Table.Filter placeholder="hello fruits" />
-                </Table.Header>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                    <Table.Header>
+                        <Table.Filter placeholder="hello fruits" />
+                    </Table.Header>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         expect(screen.getByPlaceholderText('hello fruits')).toBeVisible();
     });
 
-    it('calls onChange when typing something in the filter', async () => {
-        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
-        const onChange = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
-                <Table.Header>
-                    <Table.Filter />
-                </Table.Header>
-            </Table>,
-        );
-
-        await user.type(screen.getByRole('textbox'), 'vegetable');
-
-        act(() => {
-            // 300 ms debounce on TableFilter input
-            vi.advanceTimersByTime(300);
-        });
-        act(() => {
-            // 500 ms debounce on Table onChange callback
-            vi.advanceTimersByTime(500);
-        });
-
-        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({globalFilter: 'vegetable'}));
-    });
-
     it('goes back to the first page when changing the filter', async () => {
         const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
-        const onChange = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
-                <Table.Header>
-                    <Table.Filter />
-                </Table.Header>
-                <Table.Footer>
-                    <Table.PerPage />
-                    <Table.Pagination totalPages={2} />
-                </Table.Footer>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {pagination: {pageIndex: 1}, totalEntries: 52}});
+            return (
+                <Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                    <Table.Header>
+                        <Table.Filter />
+                    </Table.Header>
+                    <Table.Footer>
+                        <Table.Pagination />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
+
+        expect(screen.getByRole('button', {name: '1'})).toBeVisible();
+        expect(screen.getByRole('button', {name: '2', current: 'page'})).toBeVisible();
 
         await user.type(screen.getByRole('textbox'), 'veg');
         act(() => {
             // 300 ms debounce on TableFilter input
             vi.advanceTimersByTime(300);
         });
-        act(() => {
-            // 500 ms debounce on Table onChange callback
-            vi.advanceTimersByTime(500);
-        });
 
-        expect(onChange).toHaveBeenCalledWith(
-            expect.objectContaining({globalFilter: 'veg', pagination: {pageIndex: 0, pageSize: 50}}),
-        );
+        expect(screen.getByRole('button', {name: '1', current: 'page'})).toBeVisible();
+        expect(screen.getByRole('button', {name: '2'})).toBeVisible();
     });
 
     it('clears the filter when clicking on the cross icon', async () => {
         const user = userEvent.setup({delay: null});
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} initialState={{globalFilter: 'foo'}}>
-                <Table.Header>
-                    <Table.Filter placeholder="hello fruits" />
-                </Table.Header>
-            </Table>,
-        );
-        expect(screen.getByRole('textbox')).toHaveValue('foo');
-        await user.click(screen.getByRole('button', {name: /cross/i}));
-        expect(screen.getByRole('textbox')).toHaveValue('');
-    });
-
-    it('clear the filter if the global state filter is cleared', async () => {
-        const user = userEvent.setup({delay: null});
-
         const Fixture = () => {
-            const {clearFilters} = useTable();
-            return <Button data-testid="clear-button" onClick={clearFilters} />;
+            const store = useTable<RowData>({initialState: {globalFilter: 'foo'}});
+            return (
+                <Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                    <Table.Header>
+                        <Table.Filter placeholder="hello fruits" />
+                    </Table.Header>
+                </Table>
+            );
         };
-
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} initialState={{globalFilter: 'foo'}}>
-                <Table.Header>
-                    <Table.Consumer>
-                        <Fixture />
-                    </Table.Consumer>
-                    <Table.Filter />
-                </Table.Header>
-            </Table>,
-        );
+        render(<Fixture />);
         expect(screen.getByRole('textbox')).toHaveValue('foo');
-        await user.click(screen.getByTestId('clear-button'));
+        await user.click(screen.getByRole('button', {name: /cross/i}));
         expect(screen.getByRole('textbox')).toHaveValue('');
     });
 
     describe('when multi row selection is enabled', () => {
         it('does not unselect rows that get filtered out', async () => {
             const user = userEvent.setup({delay: null});
-            const onChange = vi.fn();
-            render(
-                <Table
-                    data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                    columns={columns}
-                    onChange={onChange}
-                    multiRowSelectionEnabled
-                >
-                    <Table.Header>
-                        <Table.Filter />
-                    </Table.Header>
-                </Table>,
-            );
+            const Fixture = () => {
+                const store = useTable<RowData>({enableMultiRowSelection: true});
+                return (
+                    <Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                        <Table.Header>
+                            <Table.Filter />
+                        </Table.Header>
+                    </Table>
+                );
+            };
+            render(<Fixture />);
 
             await user.click(
                 within(screen.getByRole('row', {name: /fruit/i})).getByRole('checkbox', {name: /select row/i}),