@coveord/plasma-mantine 52.27.4 → 53.0.0

package/src/components/table/Table.tsx

@@ -1,60 +1,131 @@
-import {Box, Center, Loader} from '@mantine/core';
+import {Box, Center, Factory, Loader, useProps, useStyles} from '@mantine/core';
 import {useForm} from '@mantine/form';
-import {useDidUpdate} from '@mantine/hooks';
+import {useDidUpdate, useMergedRef} from '@mantine/hooks';
 import {
     ColumnDef,
-    Row,
-    TableState as TanstackTableState,
     defaultColumnSizing,
     getCoreRowModel,
+    Row,
+    TableState as TanstackTableState,
     useReactTable,
 } from '@tanstack/react-table';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {Children, Dispatch, ReactElement, cloneElement, useCallback, useEffect, useState} from 'react';
+import {Children, cloneElement, Dispatch, ForwardedRef, ReactElement, useCallback, useEffect, useState} from 'react';
 
 import {useRowSelection} from '../../hooks/useRowSelection';
-import useStyles from './Table.styles';
-import {TableFormType, TableProps, TableState, TableType} from './Table.types';
-import {TableContext} from './TableContext';
+import {CustomComponentThemeExtend, identity} from '../../utils';
 import {TableLayouts} from './layouts/TableLayouts';
-import {TableActions} from './table-actions/TableActions';
-import {TableAccordionColumn, TableCollapsibleColumn} from './table-column/TableCollapsibleColumn';
+import {TableActions, TableActionsStylesNames} from './table-actions/TableActions';
+import {
+    TableAccordionColumn,
+    TableCollapsibleColumn,
+    TableCollapsibleColumnStylesNames,
+} from './table-column/TableCollapsibleColumn';
 import {TableSelectableColumn} from './table-column/TableSelectableColumn';
-import {TableColumnsSelector} from './table-columns-selector/TableColumnsSelector';
+import {TableColumnsSelector, TableColumnsSelectorStylesNames} from './table-columns-selector/TableColumnsSelector';
 import {TableConsumer} from './table-consumer/TableConsumer';
-import {TableDateRangePicker} from './table-date-range-picker/TableDateRangePicker';
-import {TableFilter} from './table-filter/TableFilter';
+import {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker';
+import {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter';
 import {TableFooter} from './table-footer/TableFooter';
-import {TableHeader} from './table-header/TableHeader';
-import {TableLastUpdated} from './table-last-updated/TableLastUpdated';
+import {TableHeader, TableHeaderStylesNames} from './table-header/TableHeader';
+import {TableThStylesNames} from './table-header/Th';
+import {TableLastUpdated, TableLastUpdatedStylesNames} from './table-last-updated/TableLastUpdated';
 import {TableLoading} from './table-loading/TableLoading';
 import {TablePagination} from './table-pagination/TablePagination';
 import {TablePerPage} from './table-per-page/TablePerPage';
-import {TablePredicate} from './table-predicate/TablePredicate';
-
-export const Table: TableType = <T,>({
-    data,
-    getRowId,
-    noDataChildren,
-    getExpandChildren,
-    initialState = {},
-    columns,
-    layouts = [TableLayouts.Rows],
-    onMount,
-    onChange,
-    children,
-    loading = false,
-    doubleClickAction,
-    multiRowSelectionEnabled,
-    disableRowSelection,
-    onRowSelectionChange,
-    additionalRootNodes,
-    classNames,
-    styles,
-    unstyled,
-    options = {},
-}: TableProps<T>) => {
+import {TablePredicate, TablePredicateStylesNames} from './table-predicate/TablePredicate';
+import classes from './Table.module.css';
+import {TableFormType, TableLayout, TableProps, TableState} from './Table.types';
+import {TableContext, TableStylesProvider} from './TableContext';
+
+type TableStylesNames =
+    | 'root'
+    | 'table'
+    | 'header'
+    | 'body'
+    | TableActionsStylesNames
+    | TableCollapsibleColumnStylesNames
+    | TableDateRangePickerStylesNames
+    | TableFilterStylesNames
+    | TableHeaderStylesNames
+    | TableThStylesNames
+    | TableLastUpdatedStylesNames
+    | TablePredicateStylesNames
+    | TableColumnsSelectorStylesNames;
+
+export type PlasmaTableFactory = Factory<{
+    props: TableProps<unknown>;
+    ref: HTMLDivElement;
+    stylesNames: TableStylesNames;
+    staticComponents: {
+        Actions: typeof TableActions;
+        Filter: typeof TableFilter;
+        Footer: typeof TableFooter;
+        Header: typeof TableHeader;
+        LastUpdated: typeof TableLastUpdated;
+        Pagination: typeof TablePagination;
+        PerPage: typeof TablePerPage;
+        Predicate: typeof TablePredicate;
+        DateRangePicker: typeof TableDateRangePicker;
+        CollapsibleColumn: typeof TableCollapsibleColumn;
+        ColumnsSelector: typeof TableColumnsSelector;
+        AccordionColumn: typeof TableAccordionColumn;
+        Consumer: typeof TableConsumer;
+        Loading: typeof TableLoading;
+        Layouts: typeof TableLayouts;
+    };
+}>;
+
+const defaultProps: Partial<TableProps<unknown>> = {
+    layouts: [TableLayouts.Rows as TableLayout],
+    loading: false,
+    multiRowSelectionEnabled: false,
+    initialState: {},
+    options: {},
+};
+
+export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {
+    const {
+        data,
+        getRowId,
+        noDataChildren,
+        getExpandChildren,
+        initialState,
+        columns,
+        layouts,
+        onMount,
+        onChange,
+        children,
+        loading,
+        doubleClickAction,
+        multiRowSelectionEnabled,
+        disableRowSelection,
+        onRowSelectionChange,
+        additionalRootNodes,
+        options,
+        ref,
+
+        // Style props
+        style,
+        className,
+        classNames,
+        styles,
+        unstyled,
+        ...others
+    } = useProps('PlasmaTable', defaultProps as TableProps<T>, props);
+
+    const getStyles = useStyles<PlasmaTableFactory>({
+        name: 'PlasmaTable',
+        classes,
+        props: props as TableProps<unknown>,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+    });
+
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
     const footer = convertedChildren.find((child) => child.type === TableFooter);
@@ -66,10 +137,9 @@ export const Table: TableType = <T,>({
         initialValues: {
             predicates: initialState?.predicates ?? {},
             dateRange: initialState?.dateRange ?? [null, null],
-            layout: initialState?.layout ?? layouts[0].name,
+            layout: initialState?.layout ?? layouts[0].displayName,
         },
     });
-    const {classes} = useStyles(null, {name: 'PlasmaTable', classNames, styles, unstyled});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {
@@ -105,6 +175,7 @@ export const Table: TableType = <T,>({
         onRowSelectionChange,
         additionalRootNodes,
     });
+    const containerRef = useMergedRef(outsideClickRef, ref);
     const isFiltered =
         !!state.globalFilter ||
         Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||
@@ -140,88 +211,101 @@ export const Table: TableType = <T,>({
 
     if (!data) {
         return (
-            <Center sx={{flexGrow: 1}}>
+            <Center style={{flexGrow: 1}}>
                 <Loader />
             </Center>
         );
     }
 
-    const Layout = layouts.find(({name}) => name === form.values.layout);
-    const hasRows = table.getRowModel()?.rows.length > 0;
+    const Layout = layouts.find(({displayName}) => displayName === form.values.layout);
+    const hasRows = table.getRowModel().rows.length > 0;
 
     return (
-        <Box ref={outsideClickRef}>
-            <TableContext.Provider
-                value={{
-                    onChange: triggerChange,
-                    state,
-                    isFiltered,
-                    setState,
-                    clearFilters,
-                    getSelectedRow,
-                    getSelectedRows,
-                    clearSelection,
-                    form,
-                    containerRef: outsideClickRef,
-                    multiRowSelectionEnabled,
-                    getPageCount: table.getPageCount,
-                    disableRowSelection,
-                    layouts,
-                    getAllColumns,
-                }}
-            >
-                {consumer}
-                {!hasRows && !isFiltered && !loading ? (
-                    noDataChildren
-                ) : (
-                    <>
-                        <Box component="table" className={classes.table} pb="sm">
-                            <thead className={classes.header}>
-                                {!!header ? (
-                                    <tr>
-                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
-                                            {header}
-                                        </th>
-                                    </tr>
-                                ) : null}
-                                <Layout.Header
-                                    table={table}
-                                    doubleClickAction={doubleClickAction}
-                                    getExpandChildren={getExpandChildren}
-                                    loading={loading}
-                                />
-                            </thead>
-                            <tbody className={classes.body}>
-                                {hasRows ? (
-                                    <Layout.Body
-                                        table={table}
-                                        doubleClickAction={doubleClickAction}
-                                        getExpandChildren={getExpandChildren}
-                                        loading={loading}
-                                    />
-                                ) : (
-                                    <tr>
-                                        <td colSpan={table.getAllColumns().length}>
-                                            <TableLoading visible={loading}>{noDataChildren}</TableLoading>
-                                        </td>
-                                    </tr>
-                                )}
-                            </tbody>
-                        </Box>
-                        {footer}
-                        {lastUpdated
-                            ? cloneElement(lastUpdated, {
-                                  dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],
-                              })
-                            : null}
-                    </>
-                )}
-            </TableContext.Provider>
+        <Box ref={containerRef} {...others} {...getStyles('root')}>
+            <TableStylesProvider value={{getStyles}}>
+                <TableContext.Provider
+                    value={{
+                        onChange: triggerChange,
+                        state,
+                        isFiltered,
+                        setState,
+                        clearFilters,
+                        getSelectedRow,
+                        getSelectedRows,
+                        clearSelection,
+                        form,
+                        containerRef: outsideClickRef,
+                        multiRowSelectionEnabled,
+                        getPageCount: table.getPageCount,
+                        getAllColumns,
+                        disableRowSelection,
+                        layouts,
+                    }}
+                >
+                    <Layout>
+                        {consumer}
+                        {!hasRows && !isFiltered && !loading ? (
+                            noDataChildren
+                        ) : (
+                            <>
+                                <Box component="table" {...getStyles('table')} pb="sm">
+                                    <thead {...getStyles('header')}>
+                                        {!!header ? (
+                                            <tr>
+                                                <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
+                                                    {header}
+                                                </th>
+                                            </tr>
+                                        ) : null}
+                                        <Layout.Header
+                                            table={table}
+                                            doubleClickAction={doubleClickAction}
+                                            getExpandChildren={getExpandChildren}
+                                            loading={loading}
+                                        />
+                                    </thead>
+                                    <tbody {...getStyles('body')}>
+                                        {hasRows ? (
+                                            <Layout.Body
+                                                table={table}
+                                                doubleClickAction={doubleClickAction}
+                                                getExpandChildren={getExpandChildren}
+                                                loading={loading}
+                                            />
+                                        ) : (
+                                            <tr>
+                                                <td colSpan={table.getAllColumns().length}>
+                                                    <TableLoading visible={loading}>{noDataChildren}</TableLoading>
+                                                </td>
+                                            </tr>
+                                        )}
+                                    </tbody>
+                                </Box>
+                                {footer}
+                                {lastUpdated
+                                    ? cloneElement(lastUpdated, {
+                                          dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],
+                                      })
+                                    : null}
+                            </>
+                        )}
+                    </Layout>
+                </TableContext.Provider>
+            </TableStylesProvider>
         </Box>
     );
 };
 
-Table.ColumnsSelector = TableColumnsSelector;
+export const TableComponentsOrder = {
+    MultiSelectInfo: 7,
+    Actions: 6,
+    Predicate: 5,
+    Filter: 4,
+    DateRangePicker: 3,
+    ColumnsSelector: 2,
+    LayoutControl: 1,
+};
+
 Table.Actions = TableActions;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;
@@ -236,4 +320,7 @@ Table.AccordionColumn = TableAccordionColumn;
 Table.DateRangePicker = TableDateRangePicker;
 Table.Consumer = TableConsumer;
 Table.Loading = TableLoading;
+Table.ColumnsSelector = TableColumnsSelector;
 Table.Layouts = TableLayouts;
+
+Table.extend = identity as CustomComponentThemeExtend<PlasmaTableFactory>;

package/src/components/table/Table.types.ts

@@ -1,33 +1,19 @@
 import {Icon} from '@coveord/plasma-react-icons';
-import {DefaultProps, Selectors} from '@mantine/core';
+import {BoxProps, StylesApiProps} from '@mantine/core';
 import {UseFormReturnType} from '@mantine/form';
 import {
     Column,
     ColumnDef,
     CoreOptions,
-    TableOptions,
     InitialTableState as TanstackInitialTableState,
+    TableOptions,
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
 
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
-import useStyles from './Table.styles';
-import {TableLayoutProps} from './layouts/RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182
-import {TableLayouts} from './layouts/TableLayouts';
-import {TableActions} from './table-actions/TableActions';
-import {TableAccordionColumn, TableCollapsibleColumn} from './table-column/TableCollapsibleColumn';
-import {TableColumnsSelector} from './table-columns-selector/TableColumnsSelector';
-import {TableConsumer} from './table-consumer/TableConsumer';
-import {TableDateRangePicker} from './table-date-range-picker/TableDateRangePicker';
-import {TableFilter} from './table-filter/TableFilter';
-import {TableFooter} from './table-footer/TableFooter';
-import {TableHeader} from './table-header/TableHeader';
-import {TableLastUpdated} from './table-last-updated/TableLastUpdated';
-import {TableLoading} from './table-loading/TableLoading';
-import {TablePagination} from './table-pagination/TablePagination';
-import {TablePerPage} from './table-per-page/TablePerPage';
-import {TablePredicate} from './table-predicate/TablePredicate';
+import {TableLayoutProps} from './layouts/TableLayouts';
+import {type PlasmaTableFactory} from './Table';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -44,16 +30,17 @@ export interface InitialTableState<TData>
 export type onTableChangeEvent<TData> = (params: TableState<TData> & TableFormType) => void;
 
 export interface TableLayout {
+    (props: {children: ReactNode}): ReactElement;
     /**
      * Name of the layout.
      * Will be displayed in the layout control
      */
-    name: string;
+    displayName: string;
     /**
      * Icon illustrating the layout.
      * Will be displayed in the layout control
      */
-    icon?: Icon;
+    Icon?: Icon;
     /**
      * Header portion of the table.
      * In the standard row layout that is where column headers would be displayed.
@@ -151,9 +138,7 @@ export type TableContextType<TData> = {
     layouts: TableLayout[];
 };
 
-type TableStylesNames = Selectors<typeof useStyles>;
-
-export interface TableProps<T> extends DefaultProps<TableStylesNames> {
+export interface TableProps<T> extends BoxProps, StylesApiProps<PlasmaTableFactory> {
     /**
      * Data to display in the table. Use `null` when the table is initially loading.
      */
@@ -265,22 +250,3 @@ export interface TableProps<T> extends DefaultProps<TableStylesNames> {
         | 'onRowSelectionChange'
     >;
 }
-
-export interface TableType {
-    <T>(props: TableProps<T>): ReactElement;
-    ColumnsSelector: typeof TableColumnsSelector;
-    Actions: typeof TableActions;
-    Filter: typeof TableFilter;
-    Footer: typeof TableFooter;
-    Header: typeof TableHeader;
-    LastUpdated: typeof TableLastUpdated;
-    Pagination: typeof TablePagination;
-    PerPage: typeof TablePerPage;
-    Predicate: typeof TablePredicate;
-    DateRangePicker: typeof TableDateRangePicker;
-    CollapsibleColumn: typeof TableCollapsibleColumn;
-    AccordionColumn: typeof TableAccordionColumn;
-    Consumer: typeof TableConsumer;
-    Loading: typeof TableLoading;
-    Layouts: typeof TableLayouts;
-}

package/src/components/table/TableContext.tsx

@@ -1,5 +1,6 @@
+import {createSafeContext, GetStylesApi} from '@mantine/core';
 import {createContext, useContext} from 'react';
-
+import {type PlasmaTableFactory} from './Table';
 import {TableContextType} from './Table.types';
 
 export const TableContext = createContext<TableContextType<any> | null>(null);
@@ -12,3 +13,11 @@ export const useTable = <T,>(): TableContextType<T> => {
 
     return ctx;
 };
+
+interface TableStyleContextType {
+    getStyles: GetStylesApi<PlasmaTableFactory>;
+}
+
+export const [TableStylesProvider, useTableStyles] = createSafeContext<TableStyleContextType>(
+    'Table component was not found in the tree',
+);

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

@@ -94,9 +94,8 @@ describe('Table', () => {
                     </Table.Header>
                 </Table>,
             );
-            expect(screen.getByTestId('filtered-empty-state').parentElement).toHaveClass(
-                'mantine-Skeleton-root mantine-Skeleton-visible',
-            );
+            expect(screen.getByTestId('filtered-empty-state').parentElement).toBeVisible();
+            expect(screen.getByTestId('filtered-empty-state').parentElement).toHaveClass('mantine-Skeleton-root');
         });
 
         it('shows a loading animation over the no data children (unfiltered)', () => {
@@ -107,9 +106,8 @@ describe('Table', () => {
                     </Table.Header>
                 </Table>,
             );
-            expect(screen.getByTestId('empty-state').parentElement).toHaveClass(
-                'mantine-Skeleton-root mantine-Skeleton-visible',
-            );
+            expect(screen.getByTestId('empty-state').parentElement).toBeVisible();
+            expect(screen.getByTestId('empty-state').parentElement).toHaveClass('mantine-Skeleton-root');
         });
     });
 
@@ -181,18 +179,17 @@ describe('Table', () => {
     });
 
     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" />,
-            },
-        ];
+        const Layout1: TableLayout = ({children}) => <>{children}</>;
+        Layout1.displayName = 'Layout 1';
+        Layout1.Header = () => <tr data-testid="layout1-header" />;
+        Layout1.Body = () => <tr data-testid="layout1-body" />;
+
+        const Layout2: TableLayout = ({children}) => <>{children}</>;
+        Layout2.displayName = 'Layout 2';
+        Layout2.Header = () => <tr data-testid="layout2-header" />;
+        Layout2.Body = () => <tr data-testid="layout2-body" />;
+
+        const layouts: TableLayout[] = [Layout1, Layout2];
 
         it('handles switching layout', async () => {
             const user = userEvent.setup();

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

@@ -1,6 +1,6 @@
 import {Box} from '@mantine/core';
 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';
 import {TableColumnsSelector} from '../table-columns-selector/TableColumnsSelector';
 
@@ -104,10 +104,10 @@ describe('TableColumnsSelector', () => {
         expect(screen.getAllByRole('button', {name: /arrowheaddown/i})).toHaveLength(2);
         expect(screen.getAllByRole('checkbox', {name: /select row/i})).toHaveLength(2);
 
-        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeVisible();
-        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeVisible();
-        expect(screen.getByRole('checkbox', {name: 'Email'})).toBeVisible();
-        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeVisible();
+        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Name'})).toBeVisible());
+        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Age'})).toBeVisible());
+        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Email'})).toBeVisible());
+        await waitFor(() => expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeVisible());
 
         // columns are not in the dropdown
         expect(screen.queryByRole('checkbox', {name: /collapsible/i})).not.toBeInTheDocument();
@@ -219,7 +219,7 @@ describe('TableColumnsSelector', () => {
 
         await user.hover(emailCheckBoxWrapper);
 
-        expect(screen.getByText('You can display up to 3 columns')).toBeVisible();
+        await waitFor(() => expect(screen.getByText('You can display up to 3 columns')).toBeVisible());
     });
 
     describe('footer', () => {
@@ -254,7 +254,7 @@ describe('TableColumnsSelector', () => {
 
             await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
-            expect(screen.getByText('You can display so many patate')).toBeVisible();
+            await waitFor(() => expect(screen.getByText('You can display so many patate')).toBeVisible());
         });
     });
 });

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

@@ -1,5 +1,5 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, waitFor, within} from '@test-utils';
+import {render, screen} from '@test-utils';
 
 import {Table} from '../Table';
 
@@ -23,64 +23,10 @@ describe('Table.DateRangePicker', () => {
     it('displays the initial dates', async () => {
         render(basicTableWithDateRangePicker);
 
-        expect(screen.getByText('Jan 01, 2022 - Jan 07, 2022')).toBeVisible();
+        expect(
+            screen.getByRole('button', {
+                name: /jan 01, 2022 \- jan 07, 2022/i,
+            }),
+        ).toBeVisible();
     });
-
-    it('opens the dialog when clicking on the calendar button', async () => {
-        const user = userEvent.setup();
-        render(basicTableWithDateRangePicker);
-
-        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 () => {
-        const user = userEvent.setup();
-        render(basicTableWithDateRangePicker);
-
-        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(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                onChange={onChange}
-                initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
-            >
-                <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');
-
-        expect(within(tableHeader).getByText('Jan 01, 2022 - Jan 07, 2022')).toBeInTheDocument();
-        await user.click(within(tableHeader).getByRole('button', {name: 'calendar'}));
-
-        const calendar = await screen.findByRole('dialog', {name: 'calendar'});
-
-        // select a preset
-        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(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);
 });