@coveord/plasma-mantine 52.9.0 → 52.10.1

package/src/components/date-range-picker/__tests__/EditableDateRangePicker.spec.tsx

@@ -1,8 +1,8 @@
-import {DateRangePickerValue} from '@mantine/dates';
 import {render, screen, userEvent} from '@test-utils';
 import {useState} from 'react';
 
 import {EditableDateRangePicker} from '../EditableDateRangePicker';
+import {DateRangePickerValue} from '../DateRangePickerInlineCalendar';
 
 describe('EditableDateRangePicker', () => {
     it('renders an input for the start and an input for the end', () => {
@@ -19,7 +19,7 @@ describe('EditableDateRangePicker', () => {
     });
 
     it('updates when editing values', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const [value, setValue] = useState<DateRangePickerValue>([null, null]);
             return (
@@ -44,5 +44,5 @@ describe('EditableDateRangePicker', () => {
         await user.type(endInput, 'Jan 14, 2022');
 
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
-    });
+    }, 10000);
 });

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -8,24 +8,28 @@ describe('ModalWizard', () => {
 
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
             {
+                id: 'step2',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
                 element: <div> Slide 2</div>,
             },
             {
+                id: 'step3',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: false}),
                 element: <div> Slide 3</div>,
             },
             {
+                id: 'step4',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: false}),
@@ -46,13 +50,14 @@ describe('ModalWizard', () => {
                 onNext={onNextSpy}
                 onPrevious={onPreviousSpy}
             >
-                {modelSteps.map((model_item) => (
+                {modelSteps.map((step) => (
                     <ModalWizard.Step
-                        docLink={model_item.docLink}
+                        key={step.id}
+                        docLink={step.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={model_item.validateStep}
+                        validateStep={step.validateStep}
                     >
-                        {model_item.element}
+                        {step.element}
                     </ModalWizard.Step>
                 ))}
             </ModalWizard>
@@ -165,6 +170,7 @@ describe('ModalWizard', () => {
 
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -179,6 +185,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -201,6 +208,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -215,6 +223,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -237,6 +246,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -252,6 +262,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -274,6 +285,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -289,6 +301,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -313,6 +326,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -328,6 +342,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}

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

@@ -3,15 +3,6 @@ import {createStyles} from '@mantine/core';
 const useStyles = createStyles<string>((theme) => ({
     table: {
         width: '100%',
-        '& thead tr th': {
-            borderBottom: 'none',
-        },
-        '& td:first-of-type': {
-            paddingLeft: theme.spacing.xl,
-        },
-        '& tbody td': {
-            verticalAlign: 'top',
-        },
     },
 
     header: {

package/src/components/table/Table.tsx

@@ -1,11 +1,12 @@
-import {Box, Center, Loader, Table as MantineTable} from '@mantine/core';
+import {Box, Center, Loader} from '@mantine/core';
 import {useForm} from '@mantine/form';
 import {useDidUpdate} from '@mantine/hooks';
-import {ColumnDef, Row, TableState as TanstackTableState, getCoreRowModel, useReactTable} from '@tanstack/react-table';
+import {ColumnDef, getCoreRowModel, Row, TableState as TanstackTableState, useReactTable} from '@tanstack/react-table';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {Children, Dispatch, ReactElement, useCallback, useEffect, useState} from 'react';
+import {Children, cloneElement, Dispatch, ReactElement, useCallback, useEffect, useState} from 'react';
 
+import {TableLayouts} from './layouts/TableLayouts';
 import useStyles from './Table.styles';
 import {TableFormType, TableProps, TableState, TableType} from './Table.types';
 import {TableActions} from './TableActions';
@@ -16,13 +17,13 @@ import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
 import {TableHeader} from './TableHeader';
+import {TableLastUpdated} from './TableLastUpdated';
+import {TableLoading} from './TableLoading';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
 import {TableSelectableColumn} from './TableSelectableColumn';
 import {useRowSelection} from './useRowSelection';
-import {TableLoading} from './TableLoading';
-import {TableLayouts} from './layouts/TableLayouts';
 
 export const Table: TableType = <T,>({
     data,
@@ -40,12 +41,14 @@ export const Table: TableType = <T,>({
     multiRowSelectionEnabled,
     disableRowSelection,
     onRowSelectionChange,
+    additionalRootNodes,
     options = {},
 }: TableProps<T>) => {
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
     const footer = convertedChildren.find((child) => child.type === TableFooter);
     const consumer = convertedChildren.find((child) => child.type === TableConsumer);
+    const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);
 
     const {predicates, dateRange, ...initialStateWithoutForm} = initialState;
     const form = useForm<TableFormType>({
@@ -58,7 +61,10 @@ export const Table: TableType = <T,>({
     const {classes} = useStyles();
 
     const table = useReactTable({
-        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
+        initialState: defaultsDeep(initialStateWithoutForm, {
+            pagination: {pageSize: TablePerPage.DEFAULT_SIZE},
+            globalFilter: '',
+        }),
         data,
         columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,
         getCoreRowModel: getCoreRowModel(),
@@ -79,6 +85,7 @@ export const Table: TableType = <T,>({
     const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {
         multiRowSelectionEnabled,
         onRowSelectionChange,
+        additionalRootNodes,
     });
     const isFiltered =
         !!state.globalFilter ||
@@ -149,15 +156,11 @@ export const Table: TableType = <T,>({
                     noDataChildren
                 ) : (
                     <>
-                        <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
+                        <Box component="table" className={classes.table} pb="sm">
                             <thead className={classes.header}>
                                 {!!header ? (
                                     <tr>
-                                        <th
-                                            // need to use inline style because Mantine define style on `.mantine-{id} thead tr th`
-                                            style={{padding: 0, fontWeight: 'unset'}}
-                                            colSpan={table.getAllColumns().length}
-                                        >
+                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
                                             {header}
                                         </th>
                                     </tr>
@@ -185,8 +188,13 @@ export const Table: TableType = <T,>({
                                     </tr>
                                 )}
                             </tbody>
-                        </MantineTable>
+                        </Box>
                         {footer}
+                        {lastUpdated
+                            ? cloneElement(lastUpdated, {
+                                  dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],
+                              })
+                            : null}
                     </>
                 )}
             </TableContext.Provider>
@@ -198,6 +206,7 @@ Table.Actions = TableActions;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;
 Table.Header = TableHeader;
+Table.LastUpdated = TableLastUpdated;
 Table.Pagination = TablePagination;
 Table.Predicate = TablePredicate;
 Table.PerPage = TablePerPage;

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

@@ -1,16 +1,17 @@
+import {Icon} from '@coveord/plasma-react-icons';
 import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
     CoreOptions,
+    InitialTableState as TanstackInitialTableState,
     Table,
     TableOptions,
-    InitialTableState as TanstackInitialTableState,
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
 
-import {Icon} from '@coveord/plasma-react-icons';
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
+import {TableLayouts} from './layouts/TableLayouts';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
 import {TableConsumer} from './TableConsumer';
@@ -18,11 +19,11 @@ import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
 import {TableHeader} from './TableHeader';
+import {TableLastUpdated} from './TableLastUpdated';
 import {TableLoading} from './TableLoading';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableLayouts} from './layouts/TableLayouts';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -245,6 +246,15 @@ export interface TableProps<T> {
      * @default false
      */
     disableRowSelection?: boolean;
+    /**
+     * Nodes that are considered inside the table.
+     *
+     * Rows normally get unselected when clicking outside the table, but sometimes it has difficulties guessing what is inside or outside, for example when using modals.
+     * You can use this prop to force the table to consider some nodes to be inside the table.
+     *
+     * @see https://mantine.dev/hooks/use-click-outside/#multiple-nodes
+     */
+    additionalRootNodes?: HTMLElement[];
     /**
      * Additional options that can be passed to the table
      */
@@ -268,6 +278,7 @@ export interface TableType {
     Filter: typeof TableFilter;
     Footer: typeof TableFooter;
     Header: typeof TableHeader;
+    LastUpdated: typeof TableLastUpdated;
     Pagination: typeof TablePagination;
     PerPage: typeof TablePerPage;
     Predicate: typeof TablePredicate;

package/src/components/table/TableFooter.tsx

@@ -5,7 +5,7 @@ interface TableFooterProps extends DefaultProps {
     children?: ReactNode;
 }
 export const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (
-    <Group position="apart" px="md" py="sm" {...others}>
+    <Group position="apart" px="xl" py="md" {...others}>
         {children}
     </Group>
 );

package/src/components/table/TableHeader.tsx

@@ -15,7 +15,7 @@ const useStyles = createStyles((theme) => ({
         borderBottom: `1px solid ${theme.colors.gray[3]}`,
     },
     multiSelectInfo: {
-        justifySelf: 'flex-start',
+        display: 'flex',
     },
 }));
 

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'}]);
         });
     });