@coveord/plasma-mantine 52.11.1 → 52.12.0

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

@@ -1,5 +1,5 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent} from '@test-utils';
+import {render, screen, userEvent, waitFor} from '@test-utils';
 
 import {Table} from '../Table';
 
@@ -69,7 +69,7 @@ describe('Table.PerPage', () => {
     });
 
     it('calls onChange when changing the number of items per page', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
         const onChange = vi.fn();
         render(
             <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
@@ -87,7 +87,7 @@ describe('Table.PerPage', () => {
     });
 
     it('resets page index when changing the number of items per page', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
         const onChange = vi.fn();
         render(
             <Table
@@ -109,4 +109,40 @@ describe('Table.PerPage', () => {
             expect.objectContaining({pagination: expect.objectContaining({pageIndex: 0})})
         );
     });
+
+    it('triggers the onChangePage Callback with the right parameters', async () => {
+        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+        const onPerPageChange = vi.fn();
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                initialState={{pagination: {pageIndex: 1, pageSize: 50}}}
+            >
+                <Table.Footer>
+                    <Table.Pagination totalPages={2} />
+                    <Table.PerPage onPerPageChange={onPerPageChange} />
+                </Table.Footer>
+            </Table>
+        );
+
+        onPerPageChange.mockReset();
+
+        await user.click(screen.getByRole('radio', {name: /100/i}));
+
+        await waitFor(() => {
+            expect(onPerPageChange).toHaveBeenCalledWith(100);
+        });
+    });
+
+    it('renders nothing when there are no pages to show', () => {
+        render(
+            <Table data={[]} columns={columns} initialState={{globalFilter: 'filter'}}>
+                <Table.Footer data-testid="table-footer">
+                    <Table.PerPage />
+                </Table.Footer>
+            </Table>
+        );
+        expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
+    });
 });

package/src/components/table/layouts/RowLayout.tsx

@@ -96,7 +96,13 @@ const RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {
     return <>{headers}</>;
 };
 
-const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {
+const RowLayoutBody = <T,>({
+    table,
+    doubleClickAction,
+    getExpandChildren,
+    loading,
+    keepSelection,
+}: TableLayoutProps<T>) => {
     const {multiRowSelectionEnabled, disableRowSelection} = useTable();
     const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});
 
@@ -108,11 +114,12 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
     const rows = table.getRowModel().rows.map((row) => {
         const rowChildren = getExpandChildren?.(row.original) ?? null;
         const isSelected = !!row.getIsSelected();
+        const shouldKeepSelection = keepSelection && isSelected;
         const onClick = (event: MouseEvent<HTMLTableRowElement>) => {
             if (rowChildren) {
                 toggleCollapsible(event.currentTarget);
             }
-            if (!disableRowSelection && !multiRowSelectionEnabled) {
+            if (!disableRowSelection && !multiRowSelectionEnabled && !shouldKeepSelection) {
                 row.toggleSelected();
             }
         };
@@ -130,8 +137,13 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
                     data-testid={row.id}
                 >
                     {row.getVisibleCells().map((cell) => {
-                        const size = cell.column.getSize();
-                        const width = size !== defaultColumnSizing.size ? size : undefined;
+                        const columnSizing = {
+                            ...defaultColumnSizing,
+                            size: cell.column.columnDef.size,
+                            minSize: cell.column.columnDef.minSize,
+                            maxSize: cell.column.columnDef.maxSize,
+                        };
+
                         const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {
                             if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {
                                 event.stopPropagation();
@@ -142,7 +154,11 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
                             <td
                                 key={cell.id}
                                 data-testid={cell.id}
-                                style={{width}}
+                                style={{
+                                    width: columnSizing.size,
+                                    minWidth: columnSizing.minSize,
+                                    maxWidth: columnSizing.maxSize,
+                                }}
                                 className={cx(classes.cell, {
                                     [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
                                 })}

package/src/components/table/layouts/__tests__/RowLayout.spec.tsx

@@ -2,6 +2,7 @@ import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor, within} from '@test-utils';
 import {FunctionComponent} from 'react';
 import {Table} from '../../Table';
+import {TableLayouts} from '../TableLayouts';
 
 describe('RowLayout', () => {
     type RowData = {id: string; firstName: string; lastName?: string};
@@ -204,6 +205,95 @@ describe('RowLayout', () => {
         expect(doubleClickSpy).toHaveBeenCalledWith({id: '🆔-1', firstName: 'Mario'});
     });
 
+    it('toggles row selection when clicking on a selected row', async () => {
+        const user = userEvent.setup();
+
+        render(
+            <div>
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                        {id: '🆔-2', firstName: 'patate', lastName: 'king'},
+                    ]}
+                    columns={columns}
+                />
+            </div>
+        );
+
+        await user.click(screen.getByRole('row', {name: /patate king/i}));
+        expect(screen.getByRole('row', {name: /patate king/i, selected: true})).toBeInTheDocument();
+        expect(screen.queryByRole('row', {name: /patate king/i, selected: false})).not.toBeInTheDocument();
+
+        await user.click(screen.getByRole('row', {name: /patate king/i}));
+        expect(screen.getByRole('row', {name: /patate king/i, selected: false})).toBeInTheDocument();
+        expect(screen.queryByRole('row', {name: /patate king/i, selected: true})).not.toBeInTheDocument();
+    });
+
+    it('prevents row toggle if keepSelection is true', async () => {
+        const user = userEvent.setup();
+
+        render(
+            <div>
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                        {id: '🆔-2', firstName: 'patate', lastName: 'king'},
+                    ]}
+                    columns={columns}
+                    layouts={[
+                        {
+                            ...TableLayouts.Rows,
+                            Body: (props) => <TableLayouts.Rows.Body {...props} keepSelection />,
+                        },
+                    ]}
+                />
+            </div>
+        );
+
+        await user.click(screen.getByRole('row', {name: /patate king/i}));
+        expect(screen.getByRole('row', {name: /patate king/i, selected: true})).toBeInTheDocument();
+        expect(screen.queryByRole('row', {name: /patate king/i, selected: false})).not.toBeInTheDocument();
+
+        await user.click(screen.getByRole('row', {name: /patate king/i}));
+        expect(screen.getByRole('row', {name: /patate king/i, selected: true})).toBeInTheDocument();
+        expect(screen.queryByRole('row', {name: /patate king/i, selected: false})).not.toBeInTheDocument();
+    });
+
+    it('allows selection of another row if keepSelection is true', async () => {
+        const user = userEvent.setup();
+
+        render(
+            <div>
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                        {id: '🆔-2', firstName: 'patate', lastName: 'king'},
+                    ]}
+                    columns={columns}
+                    layouts={[
+                        {
+                            ...TableLayouts.Rows,
+                            Body: (props) => <TableLayouts.Rows.Body {...props} keepSelection />,
+                        },
+                    ]}
+                />
+            </div>
+        );
+
+        await user.click(screen.getByRole('row', {name: /patate king/i}));
+        expect(screen.getByRole('row', {name: /patate king/i, selected: true})).toBeInTheDocument();
+        expect(screen.queryByRole('row', {name: /patate king/i, selected: false})).not.toBeInTheDocument();
+
+        await user.click(screen.getByRole('row', {name: /first last/i}));
+        expect(screen.getByRole('row', {name: /patate king/i, selected: false})).toBeInTheDocument();
+        expect(screen.queryByRole('row', {name: /patate king/i, selected: true})).not.toBeInTheDocument();
+        expect(screen.getByRole('row', {name: /first last/i, selected: true})).toBeInTheDocument();
+        expect(screen.queryByRole('row', {name: /first last/i, selected: false})).not.toBeInTheDocument();
+    });
+
     describe('when multi row selection is enabled', () => {
         it('displays a checkbox as the first cell of each row', () => {
             render(

package/src/components/table/useRowSelection.ts

@@ -1,4 +1,4 @@
-import {useClickOutside} from '@mantine/hooks';
+import {useClickOutside, useDidUpdate} from '@mantine/hooks';
 import {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';
 import isEqual from 'fast-deep-equal';
 
@@ -24,6 +24,12 @@ export const useRowSelection = <T>(
         [outsideClickRef.current, ...additionalRootNodes]
     );
 
+    // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.
+    // See this warning introduced in React v.16.13.0: https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render
+    useDidUpdate(() => {
+        onRowSelectionChange?.(getSelectedRows());
+    }, [table.getState().rowSelection]);
+
     table.setOptions((prev) => ({
         ...prev,
         onRowSelectionChange: (rowSelectionUpdater) => {
@@ -50,8 +56,6 @@ export const useRowSelection = <T>(
                     }
                 });
 
-                onRowSelectionChange?.(Object.values(newRowSelection));
-
                 return {
                     ...old,
                     rowSelection: newRowSelection as RowSelectionState,