@coveord/plasma-mantine 48.22.5 → 48.23.0

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

@@ -1,5 +1,5 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent} from '@test-utils';
+import {render, screen, userEvent, within} from '@test-utils';
 
 import {Table} from '../Table';
 
@@ -37,4 +37,51 @@ describe('Table.Filter', () => {
 
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({globalFilter: 'vegetable'}));
     });
+
+    it('goes back to the first page when changing the filter', async () => {
+        const user = userEvent.setup({delay: null});
+        const onChange = jest.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>
+        );
+
+        await user.type(screen.getByRole('textbox'), 'veg');
+
+        expect(onChange).toHaveBeenCalledWith(
+            expect.objectContaining({globalFilter: 'veg', pagination: {pageIndex: 0, pageSize: 50}})
+        );
+    });
+
+    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 = jest.fn();
+            render(
+                <Table
+                    data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                    columns={columns}
+                    onChange={onChange}
+                    multiRowSelectionEnabled
+                >
+                    <Table.Header>
+                        <Table.Filter />
+                    </Table.Header>
+                </Table>
+            );
+
+            await user.click(
+                within(screen.getByRole('row', {name: /fruit/i})).getByRole('checkbox', {name: /select row/i})
+            );
+            await user.type(screen.getByRole('textbox'), 'veg');
+            expect(screen.getByRole('button', {name: /1 selected/i})).toBeInTheDocument();
+        });
+    });
 });

package/src/components/table/useRowSelection.ts

@@ -0,0 +1,45 @@
+import {functionalUpdate, Table} from '@tanstack/table-core';
+import {useState} from 'react';
+
+export const useRowSelection = <T>(table: Table<T>) => {
+    const [rowSelection, setRowSelection] = useState<Record<string, T>>({});
+
+    table.setOptions((prev) => ({
+        ...prev,
+        onRowSelectionChange: (rowSelectionUpdater) => {
+            table.setState((old) => {
+                const selectedRowsIds = functionalUpdate(rowSelectionUpdater, old['rowSelection']);
+                setRowSelection((current) => {
+                    const currentRowsById = table.getRowModel().rowsById;
+                    return Object.keys(selectedRowsIds).reduce((memo, rowId) => {
+                        if (current[rowId]) {
+                            memo[rowId] = current[rowId];
+                        } else {
+                            memo[rowId] = currentRowsById[rowId].original;
+                        }
+                        return memo;
+                    }, {} as Record<string, T>);
+                });
+
+                return {
+                    ...old,
+                    rowSelection: selectedRowsIds,
+                };
+            });
+        },
+    }));
+
+    const clearSelection = () => {
+        table.resetRowSelection(true);
+    };
+
+    const getSelectedRows = () => Object.values(rowSelection);
+
+    const getSelectedRow = () => getSelectedRows()[0] ?? null;
+
+    return {
+        clearSelection,
+        getSelectedRow,
+        getSelectedRows,
+    };
+};

package/src/theme/Theme.tsx

@@ -5,6 +5,7 @@ import {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mant
 import {PlasmaColors} from './PlasmaColors';
 
 export const plasmaTheme: MantineThemeOverride = {
+    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts
     colorScheme: 'light',
     fontFamily: 'canada-type-gibson, sans-serif',
     black: color.primary.gray[9],
@@ -59,7 +60,7 @@ export const plasmaTheme: MantineThemeOverride = {
         Button: {
             styles: (theme, params: ButtonStylesParams) => ({
                 root: {
-                    '&': {fontWeight: 400},
+                    fontWeight: 400,
                     backgroundColor: params.variant === 'outline' ? 'white' : undefined,
                 },
             }),
@@ -81,17 +82,23 @@ export const plasmaTheme: MantineThemeOverride = {
             defaultProps: {
                 withAsterisk: false,
             },
+            styles: (theme) => ({
+                label: {
+                    marginBottom: theme.spacing.xs,
+                    lineHeight: '20px',
+                },
+                description: {
+                    lineHeight: '20px',
+                    fontSize: theme.fontSizes.sm,
+                    color: theme.colors.gray[7],
+                    marginBottom: theme.spacing.xs,
+                },
+            }),
         },
         TextInput: {
             defaultProps: {
                 radius: 8,
             },
-            styles: (theme) => ({
-                description: {
-                    fontSize: 'inherit',
-                    paddingBottom: theme.spacing.xs,
-                },
-            }),
         },
         Tooltip: {
             defaultProps: {