@coveord/plasma-mantine 52.9.0 → 52.10.0

package/src/components/table/TableLastUpdated.tsx

@@ -0,0 +1,51 @@
+import {createStyles, DefaultProps, Group, Selectors, Text} from '@mantine/core';
+import {useDidUpdate} from '@mantine/hooks';
+import dayjs from 'dayjs';
+import {FunctionComponent, useState} from 'react';
+import {useTable} from './TableContext';
+
+const useStyles = createStyles((theme) => ({
+    root: {
+        minHeight: '98px',
+    },
+    label: {
+        color: theme.colors.gray[6],
+    },
+}));
+
+type TableLastUpdatedStylesNames = Selectors<typeof useStyles>;
+
+interface TableLastUpdatedProps extends DefaultProps<TableLastUpdatedStylesNames> {
+    /**
+     * Label to contextualize the date
+     *
+     * @default "Last update:"
+     */
+    label?: string;
+}
+
+export const TableLastUpdated: FunctionComponent<TableLastUpdatedProps & {dependencies?: never}> = ({
+    label = 'Last update:',
+    dependencies,
+    classNames,
+    styles,
+    unstyled,
+    ...others
+}) => {
+    const {classes} = useStyles(null, {name: 'TableLastUpdated', classNames, styles, unstyled});
+    const {state} = useTable();
+    const [time, setTime] = useState(new Date());
+
+    useDidUpdate(() => {
+        setTime(new Date());
+    }, [state, ...dependencies]);
+
+    return (
+        <Group className={classes.root} px="xl" position="right">
+            <Text size="xs" className={classes.label} {...others}>
+                {label}
+                <span role="timer">{dayjs(time).format('h:mm:ss A')}</span>
+            </Text>
+        </Group>
+    );
+};

package/src/components/table/TablePagination.tsx

@@ -29,6 +29,7 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
             total={total}
             boundaries={0}
             size="md"
+            spacing="xs"
             getControlProps={(control) => {
                 switch (control) {
                     case 'previous':

package/src/components/table/TablePerPage.tsx

@@ -32,14 +32,14 @@ export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE:
     };
 
     return (
-        <Group>
-            <Text>{label}</Text>
+        <Group spacing="sm">
+            <Text fw={500}>{label}</Text>
             <SegmentedControl
                 value={state.pagination.pageSize.toString() ?? values?.[1].toString()}
                 onChange={updatePerPage}
                 data={values.map((value) => value.toString())}
                 color="action"
-                size="md"
+                size="sm"
             />
         </Group>
     );

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

@@ -1,9 +1,10 @@
 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 {useState} from 'react';
 import {Table} from '../Table';
-import {useTable} from '../TableContext';
 import {TableLayout} from '../Table.types';
+import {useTable} from '../TableContext';
 
 type RowData = {id: string; firstName: string; lastName?: string};
 
@@ -141,6 +142,44 @@ describe('Table', () => {
         expect(screen.getByRole('row', {name: 'patate king', selected: false})).toBeInTheDocument();
     });
 
+    it('does not reset row selection when clicking within one of the specified additionalRootNodes, even if it is outside the table', async () => {
+        const user = userEvent.setup();
+
+        const Fixture = () => {
+            const [cousinNode, setCousinNode] = useState<HTMLDivElement>();
+
+            return (
+                <>
+                    <div key="inside" ref={setCousinNode} data-testid="table-cousin">
+                        clicking inside here does not clear rows selection
+                    </div>
+                    <div key="outside" data-testid="outside-element">
+                        clicking inside here clears rows selection
+                    </div>
+                    <Table
+                        getRowId={({id}) => id}
+                        data={[
+                            {id: '🆔-1', firstName: 'John', lastName: 'Doe'},
+                            {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
+                        ]}
+                        columns={columns}
+                        additionalRootNodes={[cousinNode]}
+                    />
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        const row = screen.getByRole('row', {name: /John Doe/i, selected: false});
+        expect(row).toBeInTheDocument();
+        await user.click(row);
+        expect(screen.getByRole('row', {name: /John Doe/i, selected: true})).toBeInTheDocument();
+        await user.click(screen.getByTestId('table-cousin'));
+        expect(screen.getByRole('row', {name: /John Doe/i, selected: true})).toBeInTheDocument();
+        await user.click(screen.getByTestId('outside-element'));
+        expect(screen.getByRole('row', {name: /John Doe/i, selected: false})).toBeInTheDocument();
+    });
+
     describe('with multiple layouts', () => {
         const layouts: TableLayout[] = [
             {
@@ -243,13 +282,13 @@ describe('Table', () => {
                     onRowSelectionChange={onRowSelectionChangeSpy}
                 />
             );
-            await user.click(screen.getByRole('row', {name: /jane doe/i}));
+            await user.click(within(screen.getByRole('row', {name: /jane doe/i})).getByRole('checkbox'));
             expect(onRowSelectionChangeSpy).toHaveBeenCalledTimes(1);
             expect(onRowSelectionChangeSpy).toHaveBeenCalledWith([{id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}]);
 
             onRowSelectionChangeSpy.mockClear();
 
-            await user.click(screen.getByRole('row', {name: /john smith/i}));
+            await user.click(within(screen.getByRole('row', {name: /john smith/i})).getByRole('checkbox'));
             expect(onRowSelectionChangeSpy).toHaveBeenCalledTimes(1);
             expect(onRowSelectionChangeSpy).toHaveBeenCalledWith([
                 {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
@@ -284,7 +323,7 @@ describe('Table', () => {
 
             expect(row).toBeInTheDocument();
 
-            await user.click(row);
+            await user.click(within(row).getByRole('checkbox'));
 
             expect(screen.getByRole('row', {name: /patate king/i, selected: true})).toBeInTheDocument();
 

package/src/components/table/__tests__/TableActions.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 {Button} from '../../button';
 import {Table} from '../Table';
@@ -57,6 +57,7 @@ describe('Table.Actions', () => {
             const renderSpy = vi.fn().mockImplementation(() => <div />);
             render(
                 <Table<RowData>
+                    getRowId={(row) => row.name}
                     data={[{name: 'fruit'}, {name: 'vegetable'}, {name: 'bread'}]}
                     columns={columns}
                     multiRowSelectionEnabled
@@ -66,8 +67,8 @@ describe('Table.Actions', () => {
                     </Table.Header>
                 </Table>
             );
-            await user.click(screen.getByRole('cell', {name: 'fruit'}));
-            await user.click(screen.getByRole('cell', {name: 'vegetable'}));
+            await user.click(within(screen.getByRole('row', {name: /fruit/})).getByRole('checkbox'));
+            await user.click(within(screen.getByRole('row', {name: /vegetable/})).getByRole('checkbox'));
             expect(renderSpy).toHaveBeenCalledWith([{name: 'fruit'}, {name: 'vegetable'}]);
         });
     });

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>