@coveord/plasma-mantine 52.5.0 → 52.7.0

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

@@ -1,10 +1,9 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, waitFor, within} from '@test-utils';
-import {FunctionComponent} from 'react';
+import {render, screen, userEvent, waitFor} from '@test-utils';
 
 import {Table} from '../Table';
-import {TableProps} from '../Table.types';
 import {useTable} from '../TableContext';
+import {TableLayout} from '../Table.types';
 
 type RowData = {id: string; firstName: string; lastName?: string};
 
@@ -14,127 +13,44 @@ const columns: Array<ColumnDef<RowData>> = [
     columnHelper.accessor('lastName', {enableSorting: false}),
 ];
 
-describe('Table', () => {
-    it('renders the data', () => {
-        render(
-            <Table
-                getRowId={({id}) => id}
-                data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
-                columns={columns}
-            />
-        );
-
-        expect(screen.getByRole('columnheader', {name: 'firstName'})).toBeVisible();
-        expect(screen.getByRole('columnheader', {name: 'lastName'})).toBeVisible();
-
-        expect(
-            screen.getByRole('cell', {
-                name: /first/i,
-            })
-        ).toBeVisible();
-        expect(
-            screen.getByRole('cell', {
-                name: /last/i,
-            })
-        ).toBeVisible();
-    });
-
-    it('formats the data', () => {
-        const customColumns: Array<ColumnDef<RowData>> = [
-            columnHelper.accessor('firstName', {
-                header: () => 'First Name',
-                cell: (info) => info.getValue().toUpperCase(),
-                enableSorting: false,
-            }),
-            columnHelper.accessor('lastName', {
-                header: () => 'Last Name',
-                cell: (info) => info.getValue().toUpperCase(),
-                enableSorting: false,
-            }),
-        ];
-        render(<Table data={[{id: '🆔', firstName: 'first', lastName: 'last'}]} columns={customColumns} />);
-
-        expect(screen.getByRole('columnheader', {name: 'First Name'})).toBeVisible();
-        expect(screen.getByRole('columnheader', {name: 'Last Name'})).toBeVisible();
-
-        expect(
-            screen.getByRole('cell', {
-                name: 'FIRST',
-            })
-        ).toBeVisible();
-        expect(
-            screen.getByRole('cell', {
-                name: 'LAST',
-            })
-        ).toBeVisible();
-    });
-
-    it('renders the noDataChildren when the table is empty', () => {
-        const Fixture: FunctionComponent = () => <button>Hello</button>;
-        render(<Table data={[]} noDataChildren={<Fixture />} columns={columns} />);
+const EmptyState = () => {
+    const {isFiltered} = useTable();
+    return isFiltered ? <span data-testid="filtered-empty-state" /> : <span data-testid="empty-state" />;
+};
 
-        expect(screen.getByRole('button', {name: 'Hello'})).toBeVisible();
-    });
-
-    it('hides the footer and header when the table is empty and not filtered', () => {
-        const NoData = () => <span data-testid="empty-state" />;
-        const customColumns: Array<ColumnDef<RowData>> = [
-            columnHelper.accessor('firstName', {
-                header: () => 'First Name',
-                cell: (info) => info.getValue().toUpperCase(),
-                enableSorting: false,
-            }),
-            columnHelper.accessor('lastName', {
-                header: () => 'Last Name',
-                cell: (info) => info.getValue().toUpperCase(),
-                enableSorting: false,
-            }),
-        ];
-        render(
-            <Table data={[]} columns={customColumns} noDataChildren={<NoData />}>
-                <Table.Header data-testid="table-header">header</Table.Header>
-                <Table.Footer data-testid="table-footer">footer</Table.Footer>
-            </Table>
-        );
+describe('Table', () => {
+    describe('when it has no data', () => {
+        it('hides the footer and header if the table is not filtered', () => {
+            render(
+                <Table data={[]} columns={columns} noDataChildren={<EmptyState />}>
+                    <Table.Header data-testid="table-header">header</Table.Header>
+                    <Table.Footer data-testid="table-footer">footer</Table.Footer>
+                </Table>
+            );
 
-        expect(screen.queryByTestId('table-header')).not.toBeInTheDocument();
-        expect(screen.queryByTestId('table-footer')).not.toBeInTheDocument();
-        expect(screen.getByTestId('empty-state')).toBeInTheDocument();
-    });
+            expect(screen.queryByTestId('table-header')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('table-footer')).not.toBeInTheDocument();
+            expect(screen.getByTestId('empty-state')).toBeVisible();
+        });
 
-    it('does not hide the footer and header when the table is empty and filtered', () => {
-        const NoData = () => {
-            const {isFiltered} = useTable();
-            return isFiltered ? <span data-testid="filtered-empty-state" /> : <span data-testid="empty-state" />;
-        };
-        const customColumns: Array<ColumnDef<RowData>> = [
-            columnHelper.accessor('firstName', {
-                header: () => 'First Name',
-                cell: (info) => info.getValue().toUpperCase(),
-                enableSorting: false,
-            }),
-            columnHelper.accessor('lastName', {
-                header: () => 'Last Name',
-                cell: (info) => info.getValue().toUpperCase(),
-                enableSorting: false,
-            }),
-        ];
-        render(
-            <Table
-                data={[]}
-                columns={customColumns}
-                noDataChildren={<NoData />}
-                initialState={{globalFilter: 'something'}}
-            >
-                <Table.Header data-testid="table-header">header</Table.Header>
-                <Table.Footer data-testid="table-footer">footer</Table.Footer>
-            </Table>
-        );
+        it('does not hide the footer and header if the table is filtered', () => {
+            render(
+                <Table
+                    data={[]}
+                    columns={columns}
+                    noDataChildren={<EmptyState />}
+                    initialState={{globalFilter: 'something'}}
+                >
+                    <Table.Header data-testid="table-header">header</Table.Header>
+                    <Table.Footer data-testid="table-footer">footer</Table.Footer>
+                </Table>
+            );
 
-        expect(screen.getByTestId('table-header')).toBeInTheDocument();
-        expect(screen.getByTestId('table-footer')).toBeInTheDocument();
-        expect(screen.getByTestId('filtered-empty-state')).toBeInTheDocument();
-        expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
+            expect(screen.getByTestId('table-header')).toBeVisible();
+            expect(screen.getByTestId('table-footer')).toBeVisible();
+            expect(screen.getByTestId('filtered-empty-state')).toBeVisible();
+            expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
+        });
     });
 
     it('updates the table when a component in Table.Consumer triggers a change', async () => {
@@ -162,176 +78,42 @@ describe('Table', () => {
         });
     });
 
-    describe('shows a loading animation', () => {
-        const doRender = (props: Omit<TableProps<RowData>, 'columns'>) => {
-            const NoData = () => {
-                const {isFiltered, clearFilters} = useTable();
-                return isFiltered ? (
-                    <button data-testid="filtered-empty-state" onClick={clearFilters}></button>
-                ) : (
-                    <span data-testid="empty-state" />
-                );
-            };
-
-            const customColumns: Array<ColumnDef<RowData>> = [
-                columnHelper.accessor('firstName', {
-                    header: () => 'First Name',
-                    cell: (info) => info.getValue().toUpperCase(),
-                    enableSorting: false,
-                }),
-                columnHelper.accessor('lastName', {
-                    header: () => 'Last Name',
-                    cell: (info) => info.getValue().toUpperCase(),
-                    enableSorting: false,
-                }),
-            ];
+    describe('when it is loading', () => {
+        it('shows a loading animation over the no data children (filtered)', () => {
             render(
-                <Table columns={customColumns} noDataChildren={<NoData />} {...props}>
+                <Table
+                    loading
+                    data={[]}
+                    columns={columns}
+                    noDataChildren={<EmptyState />}
+                    initialState={{globalFilter: 'something'}}
+                >
                     <Table.Header>
                         <Table.Filter data-testid="table-filter" />
                     </Table.Header>
                 </Table>
             );
-        };
-
-        it('when the table filtered, empty and loading', () => {
-            doRender({loading: true, data: [], initialState: {globalFilter: 'something'}});
             expect(screen.getByTestId('filtered-empty-state').parentElement).toHaveClass(
                 'mantine-Skeleton-root mantine-Skeleton-visible'
             );
         });
 
-        it('when the table not filtered, empty and loading', () => {
-            doRender({data: [], loading: true});
+        it('shows a loading animation over the no data children (unfiltered)', () => {
+            render(
+                <Table loading data={[]} columns={columns} noDataChildren={<EmptyState />}>
+                    <Table.Header>
+                        <Table.Filter data-testid="table-filter" />
+                    </Table.Header>
+                </Table>
+            );
             expect(screen.getByTestId('empty-state').parentElement).toHaveClass(
                 'mantine-Skeleton-root mantine-Skeleton-visible'
             );
         });
     });
 
-    it('opens the collapsible rows when the user click on the toggle', async () => {
-        const user = userEvent.setup({delay: null});
-        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
-        const customColumns: Array<ColumnDef<RowData>> = [
-            columnHelper.accessor('firstName', {
-                enableSorting: false,
-            }),
-            Table.CollapsibleColumn as ColumnDef<RowData>,
-        ];
-        render(
-            <Table
-                getRowId={({id}) => id}
-                data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
-                getExpandChildren={(row: RowData) => <Fixture row={row} />}
-                columns={customColumns}
-            />
-        );
-
-        // wait for the collapsible icon to show
-        await screen.findByRole('button', {name: 'arrowHeadDown'});
-
-        expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
-
-        await user.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
-        await waitFor(() => {
-            expect(screen.queryByText('Collapsible content: last')).toBeVisible();
-        });
-    });
-
-    it('renders the collapsible button only for rows that can be expanded', async () => {
-        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => (
-            <div>
-                Collapsible content: {row.firstName} {row.lastName}
-            </div>
-        );
-        const customColumns: Array<ColumnDef<RowData>> = [
-            columnHelper.accessor('firstName', {
-                enableSorting: false,
-            }),
-            Table.CollapsibleColumn as ColumnDef<RowData>,
-        ];
-        render(
-            <Table
-                getRowId={({id}) => id}
-                data={[
-                    {id: '🆔-1', firstName: 'Luke', lastName: 'Skywalker'},
-                    {id: '🆔-2', firstName: 'Lea', lastName: 'Skywalker'},
-                    {id: '🆔-3', firstName: 'Han', lastName: 'Solo'},
-                ]}
-                getExpandChildren={(row: RowData) => (row.lastName === 'Skywalker' ? <Fixture row={row} /> : null)}
-                columns={customColumns}
-            />
-        );
-
-        // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
-
-        const allRows = screen.getAllByRole('button', {name: 'arrowHeadDown'});
-        expect(allRows).toHaveLength(2);
-    });
-
-    it('closes the opened collapsible when using the accordion column and the user expand a different row', async () => {
-        const user = userEvent.setup({delay: null});
-        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
-        const customColumns: Array<ColumnDef<RowData>> = [
-            columnHelper.accessor('firstName', {
-                enableSorting: false,
-            }),
-            Table.AccordionColumn as ColumnDef<RowData>,
-        ];
-        render(
-            <Table
-                getRowId={({id}) => id}
-                data={[
-                    {id: '🆔-1', firstName: 'Jack', lastName: 'Russel'},
-                    {id: '🆔-2', firstName: 'Golden', lastName: 'Retriever'},
-                ]}
-                getExpandChildren={(row: RowData) => <Fixture row={row} />}
-                columns={customColumns}
-            />
-        );
-
-        // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
-
-        expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
-        expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
-
-        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'arrowHeadDown'}));
-        await waitFor(() => {
-            expect(screen.queryByText('Collapsible content: Russel')).toBeVisible();
-        });
-        expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
-
-        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'arrowHeadDown'}));
-
-        await waitFor(() => {
-            expect(screen.queryByText('Collapsible content: Retriever')).toBeVisible();
-        });
-        expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
-    });
-
-    it('calls an action when user double clicks on a row', async () => {
-        const user = userEvent.setup();
-        const doubleClickSpy = vi.fn();
-        render(
-            <Table<RowData>
-                getRowId={({id}) => id}
-                data={[
-                    {id: '🆔-1', firstName: 'Mario'},
-                    {id: '🆔-2', firstName: 'Luigi'},
-                ]}
-                columns={columns}
-                doubleClickAction={doubleClickSpy}
-            ></Table>
-        );
-        await user.dblClick(screen.getByRole('cell', {name: 'Mario'}));
-        expect(doubleClickSpy).toHaveBeenCalledTimes(1);
-        expect(doubleClickSpy).toHaveBeenCalledWith({id: '🆔-1', firstName: 'Mario'});
-    });
-
     it('reset row selection when user click outside the table', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         render(
             <div>
                 <div>I'm a header</div>
@@ -359,73 +141,96 @@ describe('Table', () => {
         expect(screen.getByRole('row', {name: 'patate king', selected: false})).toBeInTheDocument();
     });
 
-    describe('when multi row selection is enabled', () => {
-        it('displays a checkbox as the first cell of each row', () => {
+    describe('with multiple layouts', () => {
+        const layouts: TableLayout[] = [
+            {
+                name: 'Layout 1',
+                Header: () => <tr data-testid="layout1-header" />,
+                Body: () => <tr data-testid="layout1-body" />,
+            },
+            {
+                name: 'Layout 2',
+                Header: () => <tr data-testid="layout2-header" />,
+                Body: () => <tr data-testid="layout2-body" />,
+            },
+        ];
+
+        it('handles switching layout', async () => {
+            const user = userEvent.setup();
             render(
                 <Table
                     getRowId={({id}) => id}
-                    data={[
-                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
-                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
-                    ]}
+                    data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
                     columns={columns}
-                    multiRowSelectionEnabled
-                />
+                    layouts={layouts}
+                >
+                    <Table.Header data-testid="table-header" />
+                </Table>
             );
-
-            expect(screen.getByRole('columnheader', {name: /select all from this page/i})).toBeInTheDocument();
-
-            const rows = screen.getAllByRole('row');
-            rows.forEach((row) => {
-                expect(within(row).getByRole('checkbox', {name: /select/i})).toBeInTheDocument();
-            });
+            expect(screen.getByRole('radio', {name: /layout 1/i})).toBeChecked();
+            expect(screen.getByTestId('layout1-header')).toBeInTheDocument();
+            expect(screen.getByTestId('layout1-body')).toBeInTheDocument();
+            expect(screen.getByRole('radio', {name: /layout 2/i})).not.toBeChecked();
+            expect(screen.queryByTestId('layout2-header')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('layout2-body')).not.toBeInTheDocument();
+
+            await user.click(screen.getByRole('radio', {name: /layout 2/i}));
+
+            expect(screen.getByRole('radio', {name: /layout 2/i})).toBeChecked();
+            expect(screen.getByTestId('layout2-header')).toBeInTheDocument();
+            expect(screen.getByTestId('layout2-body')).toBeInTheDocument();
+            expect(screen.getByRole('radio', {name: /layout 1/i})).not.toBeChecked();
+            expect(screen.queryByTestId('layout1-header')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('layout1-body')).not.toBeInTheDocument();
         });
 
-        it('selects the rows specified in the initial state on mount', () => {
+        it('does not refetch data when switching layout', async () => {
+            const user = userEvent.setup();
+            const fetchDataSpy = vi.fn();
             render(
                 <Table
                     getRowId={({id}) => id}
-                    data={[
-                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
-                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
-                    ]}
+                    data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
                     columns={columns}
-                    multiRowSelectionEnabled
-                    initialState={{
-                        rowSelection: {'🆔-2': {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}},
-                    }}
-                />
+                    onMount={fetchDataSpy}
+                    onChange={fetchDataSpy}
+                    layouts={layouts}
+                >
+                    <Table.Header data-testid="table-header" />
+                </Table>
             );
 
-            expect(screen.getByRole('row', {name: /jane doe/i, selected: true})).toBeInTheDocument();
+            await user.click(screen.getByRole('radio', {name: /layout 2/i}));
+            await user.click(screen.getByRole('radio', {name: /layout 1/i}));
+            expect(fetchDataSpy).toHaveBeenCalledTimes(1);
         });
 
-        it('selects all rows of the current page when clicking on the checkbox that is in the column header', async () => {
-            const user = userEvent.setup({delay: null});
+        it('renders the layout specified in the initialState', () => {
             render(
                 <Table
                     getRowId={({id}) => id}
-                    data={[
-                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
-                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
-                    ]}
+                    data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
                     columns={columns}
-                    multiRowSelectionEnabled
-                />
+                    layouts={layouts}
+                    initialState={{layout: 'Layout 2'}}
+                >
+                    <Table.Header data-testid="table-header" />
+                </Table>
             );
 
-            const selectAll = screen.getByRole('checkbox', {name: /select all from this page/i});
-            await user.click(selectAll);
-
-            expect(screen.getAllByRole('row', {selected: true})).toHaveLength(2);
-            await user.click(selectAll);
-
-            expect(screen.queryAllByRole('row', {selected: true})).toEqual([]);
+            expect(screen.getByRole('radio', {name: /layout 2/i})).toBeChecked();
+            expect(screen.getByTestId('layout2-header')).toBeInTheDocument();
+            expect(screen.getByTestId('layout2-body')).toBeInTheDocument();
+            expect(screen.getByRole('radio', {name: /layout 1/i})).not.toBeChecked();
+            expect(screen.queryByTestId('layout1-header')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('layout1-body')).not.toBeInTheDocument();
         });
+    });
 
+    describe('when multi row selection is enabled', () => {
         it('calls the onRowSelectionChange prop when the row selection changes', async () => {
             const onRowSelectionChangeSpy = vi.fn();
-            const user = userEvent.setup({delay: null});
+            const user = userEvent.setup();
             render(
                 <Table
                     getRowId={({id}) => id}
@@ -459,7 +264,7 @@ describe('Table', () => {
         });
 
         it('does not clear the row selection when clicking outside the table', async () => {
-            const user = userEvent.setup({delay: null});
+            const user = userEvent.setup();
             render(
                 <div>
                     <div>I'm a header</div>
@@ -489,7 +294,7 @@ describe('Table', () => {
         });
 
         it('unselects all the selected rows when clicking on the the unselect button from the table header', async () => {
-            const user = userEvent.setup({delay: null});
+            const user = userEvent.setup();
             render(
                 <Table
                     getRowId={({id}) => id}
@@ -508,5 +313,24 @@ describe('Table', () => {
             await user.click(screen.getByRole('button', {name: /2 selected/i}));
             expect(screen.queryAllByRole('row', {selected: true})).toEqual([]);
         });
+
+        it('does not display number of selected rows if disableRowSelection is true', async () => {
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                    initialState={{
+                        rowSelection: {'🆔-2': {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}},
+                    }}
+                />
+            );
+
+            expect(screen.queryByRole('button', {name: /1 selected/i})).not.toBeInTheDocument();
+        });
     });
 });

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

@@ -1,5 +1,6 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
+import {act} from 'react-dom/test-utils';
 
 import {Table} from '../Table';
 
@@ -7,6 +8,17 @@ 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>
+);
 
 // 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}}}}}>
@@ -20,8 +32,6 @@ vi.mock('@mantine/hooks', async () => {
 });
 
 describe('Table.DateRangePicker', () => {
-    // vi.setTimeout(15000);
-
     beforeEach(() => {
         vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
     });
@@ -30,24 +40,41 @@ describe('Table.DateRangePicker', () => {
         vi.useRealTimers();
     });
 
-    it('displays the intial dates', async () => {
-        render(
-            <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>
-        );
+    it('displays the initial dates', async () => {
+        render(basicTableWithDateRangePicker);
 
         await waitFor(() => {
             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});
+        render(basicTableWithDateRangePicker);
+
+        await screen.findByRole('button', {name: 'calendar'});
+        await act(async () => {
+            await user.click(screen.getByRole('button', {name: 'calendar'}));
+        });
+        expect(screen.queryByRole('dialog')).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});
+        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();
+    });
+
     it('displays the selected date range in the table', async () => {
         const user = userEvent.setup({delay: null});
         const onChange = vi.fn();

package/src/components/table/index.ts

@@ -1,3 +1,4 @@
 export * from './Table';
 export {useTable} from './TableContext';
 export {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';
+export {TableLayouts} from './layouts/TableLayouts';