@coveord/plasma-mantine 48.22.5 → 48.23.0

package/src/components/table/Table.tsx

@@ -10,7 +10,7 @@ import {
     TableState,
     useReactTable,
 } from '@tanstack/react-table';
-import {InitialTableState} from '@tanstack/table-core';
+import {CoreOptions, InitialTableState} from '@tanstack/table-core';
 import defaultsDeep from 'lodash.defaultsdeep';
 import {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';
 
@@ -24,58 +24,74 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
+import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
+import {useRowSelection} from './useRowSelection';
 
-const useStyles = createStyles<string, {hasHeader: boolean}>((theme, {hasHeader}, getRef) => ({
-    table: {
-        width: '100%',
-        '& td:first-of-type': {
-            paddingLeft: theme.spacing.xl,
+interface TableStylesParams {
+    hasHeader: boolean;
+    multiRowSelectionEnabled: boolean;
+}
+
+const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
+    const rowBackgroundColor =
+        theme.colorScheme === 'dark'
+            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+            : theme.colors[theme.primaryColor][0];
+    return {
+        table: {
+            width: '100%',
+            '& td:first-of-type, th:first-of-type > *': {
+                paddingLeft: theme.spacing.xl,
+            },
         },
-    },
 
-    header: {
-        position: 'sticky',
-        top: hasHeader ? 69 : 0,
-        backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
-        transition: 'box-shadow 150ms ease',
-        zIndex: 12, // skeleton is 11
-        '& tr th:first-of-type button': {
-            paddingLeft: theme.spacing.xl,
+        header: {
+            position: 'sticky',
+            top: hasHeader ? 69 : 0,
+            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
+            transition: 'box-shadow 150ms ease',
+            zIndex: 12, // skeleton is 11
+
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: 0,
+                borderBottom: `1px solid ${theme.colors.gray[2]}`,
+            },
         },
-        '& tr th:first-of-type div': {
-            paddingLeft: theme.spacing.xl,
+
+        rowSelected: {
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
         },
 
-        '&::after': {
-            content: '""',
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            borderBottom: `1px solid ${theme.colors.gray[2]}`,
+        rowSelectionCheckboxCell: {
+            verticalAlign: 'middle',
         },
-    },
 
-    rowSelected: {
-        ref: getRef('rowSelected'),
-    },
+        rowCollapsibleButtonCell: {
+            textAlign: 'right',
+        },
 
-    row: {
-        [`&:hover, &.${getRef('rowSelected')}`]: {
-            backgroundColor:
-                theme.colorScheme === 'dark'
-                    ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
-                    : theme.colors[theme.primaryColor][0],
+        row: {
+            '&:hover': {
+                backgroundColor: rowBackgroundColor,
+            },
         },
-    },
-}));
+    };
+});
 
 interface TableProps<T> {
     /**
      * Data to display in the table
      */
     data: T[];
+    /**
+     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
+     */
+    getRowId?: CoreOptions<T>['getRowId'];
     /**
      * Columns to display in the table.
      *
@@ -131,6 +147,12 @@ interface TableProps<T> {
      * Action passed when user double clicks on a row
      */
     doubleClickAction?: (datum: T) => void;
+    /**
+     * Whether the user can select multiple rows in order to perform actions in bulk
+     *
+     * @default false
+     */
+    multiRowSelectionEnabled?: boolean;
 }
 
 interface TableType {
@@ -142,12 +164,13 @@ interface TableType {
     Pagination: typeof TablePagination;
     PerPage: typeof TablePerPage;
     Predicate: typeof TablePredicate;
-    CollapsibleColumn: typeof TableCollapsibleColumn;
     DateRangePicker: typeof TableDateRangePicker;
+    CollapsibleColumn: typeof TableCollapsibleColumn;
 }
 
 export const Table: TableType = <T,>({
     data,
+    getRowId,
     noDataChildren,
     getExpandChildren,
     initialState = {},
@@ -157,6 +180,7 @@ export const Table: TableType = <T,>({
     children,
     loading = false,
     doubleClickAction,
+    multiRowSelectionEnabled,
 }: TableProps<T>) => {
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
@@ -166,15 +190,16 @@ export const Table: TableType = <T,>({
     const form = useForm<TableFormType>({
         initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
     });
-
-    const {cx, classes} = useStyles({hasHeader: !!header});
+    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
         data,
-        columns,
+        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,
         getCoreRowModel: getCoreRowModel(),
         manualPagination: true,
+        enableMultiRowSelection: !!multiRowSelectionEnabled,
+        getRowId,
         getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,
     });
     const [state, setState] = useState<TableState>(table.initialState);
@@ -183,6 +208,7 @@ export const Table: TableType = <T,>({
         state,
         onStateChange: setState,
     }));
+    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);
 
     const triggerChange = () => onChange?.({...state, ...form.values});
 
@@ -190,13 +216,11 @@ export const Table: TableType = <T,>({
         onMount?.({...state, ...form.values});
     }, []);
 
-    const outsideClickRef = useClickOutside(() => {
-        table.resetRowSelection(true);
-    });
-
     useDidUpdate(() => {
         triggerChange();
-        clearSelection();
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
     }, [state.globalFilter, state.sorting, state.pagination, form.values]);
 
     const clearFilters = useCallback(() => {
@@ -204,14 +228,11 @@ export const Table: TableType = <T,>({
         setState((prevState) => ({...prevState, globalFilter: ''}));
     }, []);
 
-    const clearSelection = () => {
-        setState((prevState) => ({...prevState, rowSelection: {}}));
-    };
-
-    const getSelectedRow = useCallback(
-        () => table.getSelectedRowModel().flatRows?.[0]?.original ?? null,
-        [state.rowSelection]
-    );
+    const outsideClickRef = useClickOutside(() => {
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
+    });
 
     if (!data) {
         return (
@@ -221,25 +242,29 @@ export const Table: TableType = <T,>({
         );
     }
 
-    const toggleRowSelection = (row: Row<T>) => {
-        table.setRowSelection(() => ({[row.id]: !row.getIsSelected()}));
-    };
-
     const rows = table.getRowModel().rows.map((row) => {
         const rowChildren = getExpandChildren?.(row.original) ?? null;
 
         return (
             <Fragment key={row.id}>
                 <tr
-                    onClick={() => toggleRowSelection(row)}
+                    onClick={() => row.toggleSelected()}
                     onDoubleClick={() => doubleClickAction?.(row.original)}
                     className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}
+                    aria-selected={row.getIsSelected()}
                 >
                     {row.getVisibleCells().map((cell) => {
                         const size = cell.column.getSize();
                         const width = size !== defaultColumnSizing.size ? size : undefined;
                         return (
-                            <td key={cell.id} style={{width}}>
+                            <td
+                                key={cell.id}
+                                style={{width}}
+                                className={cx({
+                                    [classes.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,
+                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
+                                })}
+                            >
                                 <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>
                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                 </Skeleton>
@@ -251,10 +276,12 @@ export const Table: TableType = <T,>({
                     <tr>
                         <td
                             colSpan={columns.length + 1}
-                            style={{padding: 0, borderBottomColor: row.getIsExpanded() ? undefined : 'transparent'}}
+                            style={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}
                         >
-                            <Collapse in={row.getIsExpanded()} px="sm" py="xs">
-                                {rowChildren}
+                            <Collapse in={row.getIsExpanded()}>
+                                <Box px="sm" py="xs">
+                                    {rowChildren}
+                                </Box>
                             </Collapse>
                         </td>
                     </tr>
@@ -272,9 +299,11 @@ export const Table: TableType = <T,>({
                     setState,
                     clearFilters,
                     getSelectedRow,
+                    getSelectedRows,
                     clearSelection,
                     form,
                     containerRef: outsideClickRef,
+                    multiRowSelectionEnabled,
                 }}
             >
                 {header}

package/src/components/table/TableActions.tsx

@@ -3,9 +3,9 @@ import {useTable} from './useTable';
 
 interface TableActionsProps<T> {
     /**
-     * Function that return components for the selected row
+     * Function that return components for the selected row or selected rows when multi row selection is enabled
      *
-     * @param datum the data of the selected row
+     * @param datum the data of the selected row(s)
      * @example
      * <Table.Actions<MyType>>
      *     {(datum: MyType) => (
@@ -21,16 +21,16 @@ interface TableActionsProps<T> {
      *     )}
      * </Table.Actions>
      */
-    children: (datum: T) => ReactNode;
+    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);
 }
 
 export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {
-    const {getSelectedRow} = useTable();
-    const selectedRow = getSelectedRow();
+    const {getSelectedRows, multiRowSelectionEnabled} = useTable();
+    const selectedRows = getSelectedRows();
 
-    if (!selectedRow) {
+    if (selectedRows.length <= 0) {
         return null;
     }
 
-    return <>{children(selectedRow)}</>;
+    return <>{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</>;
 };

package/src/components/table/TableCollapsibleColumn.tsx

@@ -4,12 +4,12 @@ import {ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent} from 'react';
 
 /**
- * Generic column to use when your table need collapsible rows
+ * Generic column to use when your table needs collapsible rows
  */
 export const TableCollapsibleColumn: ColumnDef<unknown> = {
     id: 'collapsible',
-    header: '',
     enableSorting: false,
+    header: '',
     cell: (info) => {
         const handler = info.row.getToggleExpandedHandler();
         const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {

package/src/components/table/TableContext.tsx

@@ -40,9 +40,13 @@ type TableContextType = {
      */
     clearFilters: () => void;
     /**
-     * Function that returns the selected row if any
+     * Function that returns the selected row if any.
      */
     getSelectedRow: () => any | null;
+    /**
+     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.
+     */
+    getSelectedRows: () => any[];
     /**
      * Function that clear the selected row
      */
@@ -55,6 +59,7 @@ type TableContextType = {
      * Table container ref
      */
     containerRef: RefObject<HTMLDivElement>;
+    multiRowSelectionEnabled: boolean;
 };
 
 export const TableContext = createContext<TableContextType | null>(null);

package/src/components/table/TableFilter.tsx

@@ -35,7 +35,13 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
 
     const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
         const {value} = event.currentTarget;
-        setState((prevState: TableState) => ({...prevState, globalFilter: value}));
+        setState((prevState: TableState) => ({
+            ...prevState,
+            pagination: prevState.pagination
+                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}
+                : prevState.pagination,
+            globalFilter: value,
+        }));
     };
 
     return (

package/src/components/table/TableHeader.tsx

@@ -1,13 +1,16 @@
-import {createStyles, DefaultProps, Group, Selectors} from '@mantine/core';
+import {CrossSize16Px} from '@coveord/plasma-react-icons';
+import {Button, createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';
 import {FunctionComponent, ReactNode} from 'react';
 
+import {useTable} from './useTable';
+
 const useStyles = createStyles((theme) => ({
     root: {
         position: 'sticky',
         top: 0,
         zIndex: 13, // skeleton is 11
         backgroundColor: theme.colors.gray[1],
-        borderBottom: `1px solid ${theme.colors.gray[4]}`,
+        borderBottom: `1px solid ${theme.colors.gray[3]}`,
     },
 }));
 
@@ -23,9 +26,26 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
     children,
     ...others
 }) => {
+    const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();
     const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
-    return (
-        <Group position="right" spacing="lg" className={classes.root} px="md" py="sm" {...others}>
+    const selectedRows = getSelectedRows();
+    return multiRowSelectionEnabled ? (
+        <Group position="apart" className={classes.root}>
+            {selectedRows.length > 0 ? (
+                <Tooltip label="Unselect all">
+                    <Button onClick={clearSelection} ml="lg" variant="subtle" leftIcon={<CrossSize16Px height={16} />}>
+                        {selectedRows.length} selected
+                    </Button>
+                </Tooltip>
+            ) : (
+                <Space />
+            )}
+            <Group position="right" spacing="lg" px="md" py="sm" {...others}>
+                {children}
+            </Group>
+        </Group>
+    ) : (
+        <Group position="right" spacing="lg" px="md" py="sm" className={classes.root} {...others}>
             {children}
         </Group>
     );

package/src/components/table/TableSelectableColumn.tsx

@@ -0,0 +1,33 @@
+import {Checkbox, Tooltip} from '@mantine/core';
+import {ColumnDef} from '@tanstack/table-core';
+
+/**
+ * Generic column to use when your table needs multi selection of rows
+ */
+export const TableSelectableColumn: ColumnDef<unknown> = {
+    id: 'select',
+    enableSorting: false,
+    header: ({table}) => {
+        const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';
+        return (
+            <Tooltip label={label}>
+                <Checkbox
+                    checked={table.getIsAllPageRowsSelected()}
+                    indeterminate={table.getIsSomePageRowsSelected()}
+                    onChange={table.getToggleAllPageRowsSelectedHandler()}
+                    sx={{display: 'flex'}}
+                    aria-label={label}
+                />
+            </Tooltip>
+        );
+    },
+    cell: ({row}) => (
+        <Checkbox
+            checked={row.getIsSelected()}
+            indeterminate={row.getIsSomeSelected()}
+            onChange={row.getToggleSelectedHandler()}
+            sx={{display: 'flex'}}
+            aria-label="Select row"
+        />
+    ),
+};

package/src/components/table/Th.tsx

@@ -4,27 +4,16 @@ import {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';
 
 const useStyles = createStyles((theme) => ({
     th: {
-        padding: '0 !important',
         fontWeight: '400 !important' as any,
+        padding: '0 !important',
         color: theme.black + '!important',
-        button: {
-            padding: '8px 16px',
-            div: {
-                padding: '0px !important',
-            },
-        },
-        div: {
-            padding: '8px 16px',
-        },
-    },
-
-    noSort: {
-        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+        verticalAlign: 'middle',
     },
 
     control: {
         width: '100%',
-        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+        padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+        whiteSpace: 'nowrap',
 
         '&:hover': {
             backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],
@@ -58,9 +47,7 @@ export const Th = <T,>({header}: ThProps<T>) => {
     if (!header.column.getCanSort()) {
         return (
             <th className={classes.th} style={{width}}>
-                <Text className={classes.noSort} size="xs">
-                    {flexRender(header.column.columnDef.header, header.getContext())}
-                </Text>
+                <Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
             </th>
         );
     }
@@ -72,7 +59,7 @@ export const Th = <T,>({header}: ThProps<T>) => {
     return (
         <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>
             <UnstyledButton onClick={onSort} className={classes.control}>
-                <Group position="apart">
+                <Group position="apart" noWrap>
                     <Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
                     <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>
                         <Icon height={14} />

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

@@ -1,5 +1,5 @@
 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 {FunctionComponent} from 'react';
 
 import {Table} from '../Table';
@@ -75,7 +75,7 @@ describe('Table', () => {
             columnHelper.accessor('firstName', {
                 enableSorting: false,
             }),
-            Table.CollapsibleColumn,
+            Table.CollapsibleColumn as ColumnDef<RowData>,
         ];
         render(
             <Table
@@ -106,7 +106,7 @@ describe('Table', () => {
             columnHelper.accessor('firstName', {
                 enableSorting: false,
             }),
-            Table.CollapsibleColumn,
+            Table.CollapsibleColumn as ColumnDef<RowData>,
         ];
         render(
             <Table
@@ -157,16 +157,109 @@ describe('Table', () => {
             </div>
         );
 
-        const row = screen.getByRole('row', {name: 'patate king'});
+        const row = screen.getByRole('row', {name: 'patate king', selected: false});
 
-        expect(row).not.toHaveClass('__mantine-ref-rowSelected');
+        expect(row).toBeInTheDocument();
 
         await user.click(row);
 
-        expect(row).toHaveClass('__mantine-ref-rowSelected');
+        expect(screen.getByRole('row', {name: 'patate king', selected: true})).toBeInTheDocument();
 
         await user.click(screen.getByText(/i'm a header/i));
 
-        expect(row).not.toHaveClass('__mantine-ref-rowSelected');
+        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', () => {
+            render(
+                <Table
+                    data={[
+                        {firstName: 'John', lastName: 'Smith'},
+                        {firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                />
+            );
+
+            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();
+            });
+        });
+
+        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});
+            render(
+                <Table
+                    data={[
+                        {firstName: 'John', lastName: 'Smith'},
+                        {firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                />
+            );
+
+            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([]);
+        });
+
+        it('does not clear the row selection when clicking outside the table', async () => {
+            const user = userEvent.setup({delay: null});
+            render(
+                <div>
+                    <div>I'm a header</div>
+                    <Table
+                        data={[
+                            {firstName: 'first', lastName: 'last'},
+                            {firstName: 'patate', lastName: 'king'},
+                        ]}
+                        columns={columns}
+                        multiRowSelectionEnabled
+                    />
+                </div>
+            );
+
+            const row = screen.getByRole('row', {name: /patate king/i, selected: false});
+
+            expect(row).toBeInTheDocument();
+
+            await user.click(row);
+
+            expect(screen.getByRole('row', {name: /patate king/i, selected: true})).toBeInTheDocument();
+
+            await user.click(screen.getByText(/i'm a header/i));
+
+            expect(screen.getByRole('row', {name: /patate king/i, selected: true})).toBeInTheDocument();
+        });
+
+        it('unselects all the selected rows when clicking on the the unselect button from the table header', async () => {
+            const user = userEvent.setup({delay: null});
+            render(
+                <Table
+                    data={[
+                        {firstName: 'John', lastName: 'Smith'},
+                        {firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                >
+                    <Table.Header />
+                </Table>
+            );
+
+            await user.click(screen.getByRole('checkbox', {name: /select all/i}));
+            await user.click(screen.getByRole('button', {name: /2 selected/i}));
+            expect(screen.queryAllByRole('row', {selected: true})).toEqual([]);
+        });
     });
 });

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

@@ -34,4 +34,25 @@ describe('Table.Actions', () => {
         expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
         expect(screen.getByRole('button', {name: 'Eat vegetable'})).toBeVisible();
     });
+
+    describe('when multi row selection is enabled', () => {
+        it('passes down an array of selected rows', async () => {
+            const user = userEvent.setup({delay: null});
+            const renderSpy = jest.fn().mockImplementation(() => <div />);
+            render(
+                <Table<RowData>
+                    data={[{name: 'fruit'}, {name: 'vegetable'}, {name: 'bread'}]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                >
+                    <Table.Header>
+                        <Table.Actions>{renderSpy}</Table.Actions>
+                    </Table.Header>
+                </Table>
+            );
+            await user.click(screen.getByRole('cell', {name: 'fruit'}));
+            await user.click(screen.getByRole('cell', {name: 'vegetable'}));
+            expect(renderSpy).toHaveBeenCalledWith([{name: 'fruit'}, {name: 'vegetable'}]);
+        });
+    });
 });