@coveord/plasma-mantine 52.9.0 → 52.10.1

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

@@ -1,6 +1,5 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, waitFor} from '@test-utils';
-import {act} from 'react-dom/test-utils';
+import {render, screen, userEvent, waitFor, within} from '@test-utils';
 
 import {Table} from '../Table';
 
@@ -20,62 +19,32 @@ const basicTableWithDateRangePicker = (
     </Table>
 );
 
-// Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
-// I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
-// but the animation was still happening. :(
-vi.mock('@mantine/hooks', async () => {
-    const actual = await vi.importActual('@mantine/hooks');
-    return {
-        ...actual,
-        useReduceMotion: () => true,
-    };
-});
-
 describe('Table.DateRangePicker', () => {
-    beforeEach(() => {
-        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
-    });
-
-    afterEach(() => {
-        vi.useRealTimers();
-    });
-
     it('displays the initial dates', async () => {
         render(basicTableWithDateRangePicker);
 
-        await waitFor(() => {
-            expect(screen.getByText('Jan 01, 2022 - Jan 07, 2022')).toBeVisible();
-        });
+        expect(screen.getByText('Jan 01, 2022 - Jan 07, 2022')).toBeVisible();
     });
 
     it('opens the dialog when clicking on the calendar button', async () => {
-        // Otherwise, css transition is not triggered in Mantine component
-        vi.useRealTimers();
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         render(basicTableWithDateRangePicker);
 
-        await screen.findByRole('button', {name: 'calendar'});
-        await act(async () => {
-            await user.click(screen.getByRole('button', {name: 'calendar'}));
-        });
-        expect(screen.queryByRole('dialog')).toBeVisible();
+        await user.click(screen.getByRole('button', {name: 'calendar'}));
+        expect(screen.getByRole('dialog', {name: 'calendar'})).toBeVisible();
     });
 
     it('closes the dialog when clicking back on the calendar button', async () => {
-        // Otherwise, css transition is not triggered in Mantine component
-        vi.useRealTimers();
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         render(basicTableWithDateRangePicker);
 
-        await screen.findByRole('button', {name: 'calendar'});
-        await act(async () => {
-            await user.click(screen.getByRole('button', {name: 'calendar'}));
-            await user.click(screen.getByRole('button', {name: 'calendar'}));
-        });
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
+        await user.click(screen.getByRole('button', {name: 'calendar'}));
+        await user.click(screen.getByRole('button', {name: 'calendar'}));
+        expect(screen.queryByRole('dialog', {name: 'calendar'})).not.toBeInTheDocument();
+    }, 10000);
 
     it('displays the selected date range in the table', async () => {
+        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
         const user = userEvent.setup({delay: null});
         const onChange = vi.fn();
         render(
@@ -85,35 +54,33 @@ describe('Table.DateRangePicker', () => {
                 onChange={onChange}
                 initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
             >
-                <Table.Header>
+                <Table.Header data-testid="table-header">
                     <Table.DateRangePicker
                         presets={{preset: {label: 'Preset', range: [new Date(2022, 0, 8), new Date(2022, 0, 14)]}}}
                     />
                 </Table.Header>
             </Table>
         );
+        const tableHeader = screen.getByTestId('table-header');
 
-        await screen.findByText('Jan 01, 2022 - Jan 07, 2022');
-        await screen.findByRole('button', {name: 'calendar'});
-
-        await user.click(screen.getByRole('button', {name: 'calendar'}));
+        expect(within(tableHeader).getByText('Jan 01, 2022 - Jan 07, 2022')).toBeInTheDocument();
+        await user.click(within(tableHeader).getByRole('button', {name: 'calendar'}));
 
-        await screen.findByRole('dialog');
+        const calendar = await screen.findByRole('dialog', {name: 'calendar'});
 
         // select a preset
-        await user.click(
-            screen.getByRole('searchbox', {
-                name: 'Date range',
-            })
-        );
-        await user.click(screen.getByRole('option', {name: 'Preset'}));
-
-        await user.click(screen.getByRole('button', {name: 'Apply'}));
-        vi.advanceTimersByTime(500);
+        await user.click(within(calendar).getByRole('searchbox', {name: 'Date range'}));
+        await user.click(within(calendar).getByRole('option', {name: 'Preset'}));
+        await user.click(within(calendar).getByRole('button', {name: 'Apply'}));
 
-        await waitFor(() => expect(screen.queryByText('Jan 08, 2022 - Jan 14, 2022')).toBeVisible());
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledTimes(1);
+        });
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({dateRange: [new Date(2022, 0, 8), new Date(2022, 0, 14)]})
         );
-    });
+        expect(within(tableHeader).getByText('Jan 08, 2022 - Jan 14, 2022')).toBeInTheDocument();
+
+        vi.useRealTimers();
+    }, 20000);
 });

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

@@ -0,0 +1,97 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent} from '@test-utils';
+import {useState} from 'react';
+
+import {Table} from '../Table';
+
+type RowData = {name: string};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+
+describe('Table.LastUpdated', () => {
+    beforeEach(() => {
+        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15, 13, 5, 50));
+    });
+
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it('displays the label and time', () => {
+        const {rerender} = render(
+            <Table data={[{name: 'fruit'}]} columns={columns}>
+                <Table.LastUpdated />
+            </Table>
+        );
+
+        expect(screen.getByText('Last update:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
+
+        rerender(
+            <Table data={[{name: 'fruit'}]} columns={columns}>
+                <Table.LastUpdated label="CUSTOM label:" />
+            </Table>
+        );
+
+        expect(screen.queryByText('Last update:')).not.toBeInTheDocument();
+        expect(screen.getByText('CUSTOM label:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
+    });
+
+    it('updates the time when a dependency changes', async () => {
+        const user = userEvent.setup({delay: null});
+
+        // Using a fixture to have a button that will trigger a change of a dependency
+        const Fixture = () => {
+            const [isClicked, setIsClicked] = useState(false);
+            return (
+                <>
+                    <button onClick={() => setIsClicked(true)}>Click me</button>
+                    <Table data={[{name: 'fruit'}]} columns={columns}>
+                        <Table.LastUpdated dependencies={[isClicked]} />
+                    </Table>
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        expect(screen.getByText('Last update:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
+
+        vi.setSystemTime(new Date(2022, 0, 15, 14, 11, 22));
+
+        // the date changed but the dependency didn't change yet, so the timer is still the same
+        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
+
+        // When we click on the button the isClicked switch from false to true which triggers an update
+        await user.click(screen.getByRole('button', {name: 'Click me'}));
+        expect(screen.getByRole('timer')).toHaveTextContent('2:11:22 PM');
+    });
+
+    it('updates the time when the data changes', async () => {
+        const user = userEvent.setup({delay: null});
+        const Fixture = () => {
+            const [data, setData] = useState([{name: 'fruit'}]);
+            return (
+                <>
+                    <button onClick={() => setData([{name: 'vegetable'}])}>Click me</button>
+                    <Table data={data} columns={columns}>
+                        <Table.LastUpdated />
+                    </Table>
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
+
+        vi.setSystemTime(new Date(2022, 0, 15, 14, 11, 22));
+
+        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
+
+        await user.click(screen.getByRole('button', {name: 'Click me'}));
+
+        expect(screen.getByRole('timer')).toHaveTextContent('2:11:22 PM');
+    });
+});

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

@@ -1,5 +1,5 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {act, render, screen, userEvent, waitFor} from '@test-utils';
+import {render, screen, userEvent, waitFor} from '@test-utils';
 
 import {Table} from '../Table';
 
@@ -9,40 +9,6 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.Predicate', () => {
-    beforeEach(() => {
-        vi.useFakeTimers();
-    });
-    afterEach(() => {
-        vi.useRealTimers();
-    });
-    it('displays the intial value', async () => {
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                initialState={{predicates: {rank: 'second'}}}
-            >
-                <Table.Header>
-                    <Table.Predicate
-                        id="rank"
-                        data={[
-                            {value: 'first', label: 'First'},
-                            {value: 'second', label: 'Second'},
-                        ]}
-                    />
-                </Table.Header>
-            </Table>
-        );
-
-        await waitFor(() => {
-            expect(
-                screen.getByRole('searchbox', {
-                    name: 'rank',
-                })
-            ).toHaveValue('Second');
-        });
-    });
-
     it('calls onMount with the initial value', async () => {
         const onMount = vi.fn();
         render(
@@ -65,26 +31,17 @@ describe('Table.Predicate', () => {
         );
 
         await waitFor(() => {
-            expect(
-                screen.getByRole('searchbox', {
-                    name: 'rank',
-                })
-            ).toHaveValue('Second');
+            expect(screen.getByRole('searchbox', {name: 'rank'})).toHaveValue('Second');
         });
         expect(onMount).toHaveBeenCalledWith(expect.objectContaining({predicates: {rank: 'second'}}));
     });
 
     it('calls onChange when changing the predicate', async () => {
-        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+        const user = userEvent.setup();
         const onChange = vi.fn();
         render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                onChange={onChange}
-                initialState={{predicates: {rank: 'second'}}}
-            >
-                <Table.Header>
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
+                <Table.Header data-testid="table-header">
                     <Table.Predicate
                         id="rank"
                         data={[
@@ -96,18 +53,13 @@ describe('Table.Predicate', () => {
             </Table>
         );
 
-        expect(screen.getByRole('searchbox', {name: 'rank'})).toHaveValue('Second');
-
         await user.click(screen.getByRole('searchbox', {name: 'rank'}));
-
         await user.click(screen.getByRole('option', {name: 'First'}));
 
         expect(screen.getByRole('searchbox', {name: 'rank'})).toHaveValue('First');
-        act(() => {
-            vi.advanceTimersByTime(500);
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledTimes(1);
         });
-
-        expect(onChange).toHaveBeenCalledTimes(1);
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({predicates: {rank: 'first'}}));
     });
 });

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

@@ -1,12 +1,13 @@
 import {ListSize16Px} from '@coveord/plasma-react-icons';
-import {Box, Collapse, createStyles} from '@mantine/core';
+import {Box, Collapse, createStyles, rem} from '@mantine/core';
 import {flexRender} from '@tanstack/react-table';
 import {defaultColumnSizing} from '@tanstack/table-core';
-import {Fragment} from 'react';
+import {Fragment, type MouseEvent} from 'react';
 import {TableLayout, TableLayoutProps} from '../Table.types';
 import {TableCollapsibleColumn} from '../TableCollapsibleColumn';
 import {useTable} from '../TableContext';
 import {TableLoading} from '../TableLoading';
+import {TableSelectableColumn} from '../TableSelectableColumn';
 import {Th} from '../Th';
 
 interface TableStylesParams {
@@ -16,13 +17,12 @@ interface TableStylesParams {
 
 const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {
     const rowBackgroundColor =
-        theme.colorScheme === 'dark'
-            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
-            : theme.colors[theme.primaryColor][0];
+        theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];
+    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;
     return {
         headerColumns: {
             '& th:first-of-type > *': {
-                paddingLeft: theme.spacing.xl,
+                paddingLeft: '40px',
             },
 
             '& input[type=checkbox]': {
@@ -60,10 +60,26 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelec
         },
 
         row: {
+            '& td:first-of-type': {
+                paddingLeft: '40px',
+            },
             '&:hover': {
                 backgroundColor: rowBackgroundColor,
             },
         },
+
+        cell: {
+            verticalAlign: 'middle',
+            // We must use height instead of minHeight here, otherwise it doesn't apply
+            height: '56px',
+            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+            borderBottom: border,
+        },
+
+        collapsible: {
+            backgroundColor: rowBackgroundColor,
+            borderBottom: border,
+        },
     };
 });
 
@@ -84,14 +100,27 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
     const {multiRowSelectionEnabled, disableRowSelection} = useTable();
     const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});
 
+    const toggleCollapsible = (el: HTMLTableRowElement) => {
+        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;
+        cell.querySelector('button').click();
+    };
+
     const rows = table.getRowModel().rows.map((row) => {
         const rowChildren = getExpandChildren?.(row.original) ?? null;
         const isSelected = !!row.getIsSelected();
+        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {
+            if (rowChildren) {
+                toggleCollapsible(event.currentTarget);
+            }
+            if (!disableRowSelection && !multiRowSelectionEnabled) {
+                row.toggleSelected();
+            }
+        };
 
         return (
             <Fragment key={row.id}>
                 <tr
-                    onClick={() => (disableRowSelection ? undefined : row.toggleSelected())}
+                    onClick={onClick}
                     onDoubleClick={() => doubleClickAction?.(row.original)}
                     className={cx(classes.row, {
                         [classes.rowSelected]: isSelected,
@@ -102,13 +131,20 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
                     {row.getVisibleCells().map((cell) => {
                         const size = cell.column.getSize();
                         const width = size !== defaultColumnSizing.size ? size : undefined;
+                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {
+                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {
+                                event.stopPropagation();
+                                row.getToggleSelectedHandler();
+                            }
+                        };
                         return (
                             <td
                                 key={cell.id}
                                 style={{width}}
-                                className={cx({
+                                className={cx(classes.cell, {
                                     [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
                                 })}
+                                onClick={onCollapsibleCellClick}
                             >
                                 <TableLoading visible={loading}>
                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -123,12 +159,10 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
                             colSpan={table.getAllColumns().length}
                             style={{
                                 padding: 0,
-                                borderTop: row.getIsExpanded() ? undefined : 'none',
-                                borderBottom: row.getIsExpanded() ? undefined : 'none',
                             }}
                         >
                             <Collapse in={row.getIsExpanded()}>
-                                <Box px="sm" py="xs">
+                                <Box className={classes.collapsible} px="sm" py="xs">
                                     {rowChildren}
                                 </Box>
                             </Collapse>

package/src/components/table/useRowSelection.ts

@@ -2,6 +2,7 @@ import {useClickOutside} from '@mantine/hooks';
 import {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';
 import isEqual from 'fast-deep-equal';
 
+import {useRef} from 'react';
 import {RowSelectionWithData, TableProps, TableState} from './Table.types';
 
 export const useRowSelection = <T>(
@@ -9,13 +10,19 @@ export const useRowSelection = <T>(
     {
         onRowSelectionChange,
         multiRowSelectionEnabled,
-    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled'>
+        additionalRootNodes = [],
+    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>
 ) => {
-    const outsideClickRef = useClickOutside(() => {
-        if (!multiRowSelectionEnabled) {
-            clearSelection();
-        }
-    });
+    const outsideClickRef = useRef<HTMLDivElement>();
+    useClickOutside(
+        () => {
+            if (!multiRowSelectionEnabled) {
+                clearSelection();
+            }
+        },
+        null,
+        [outsideClickRef.current, ...additionalRootNodes]
+    );
 
     table.setOptions((prev) => ({
         ...prev,