@coveord/plasma-mantine 52.26.6 → 52.27.0

package/src/components/table/Table.tsx

@@ -21,6 +21,7 @@ import {TableLayouts} from './layouts/TableLayouts';
 import {TableActions} from './table-actions/TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './table-column/TableCollapsibleColumn';
 import {TableSelectableColumn} from './table-column/TableSelectableColumn';
+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';
@@ -91,6 +92,8 @@ export const Table: TableType = <T,>({
         ...options,
     });
 
+    const getAllColumns = table.getAllFlatColumns;
+
     const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);
     table.setOptions((prev) => ({
         ...prev,
@@ -144,7 +147,7 @@ export const Table: TableType = <T,>({
     }
 
     const Layout = layouts.find(({name}) => name === form.values.layout);
-    const hasRows = table.getRowModel().rows.length > 0;
+    const hasRows = table.getRowModel()?.rows.length > 0;
 
     return (
         <Box ref={outsideClickRef}>
@@ -164,6 +167,7 @@ export const Table: TableType = <T,>({
                     getPageCount: table.getPageCount,
                     disableRowSelection,
                     layouts,
+                    getAllColumns,
                 }}
             >
                 {consumer}
@@ -217,6 +221,7 @@ export const Table: TableType = <T,>({
     );
 };
 
+Table.ColumnsSelector = TableColumnsSelector;
 Table.Actions = TableActions;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;

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

@@ -2,6 +2,7 @@ import {Icon} from '@coveord/plasma-react-icons';
 import {DefaultProps, Selectors} from '@mantine/core';
 import {UseFormReturnType} from '@mantine/form';
 import {
+    Column,
     ColumnDef,
     CoreOptions,
     TableOptions,
@@ -11,10 +12,12 @@ import {
 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';
@@ -25,7 +28,6 @@ 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 useStyles from './Table.styles';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -84,6 +86,10 @@ export type TableFormType = {
 };
 
 export type TableContextType<TData> = {
+    /**
+     * Returns all flat columns in the table.
+     */
+    getAllColumns: () => Array<Column<TData, unknown>>;
     /**
      * Function to call when the table needs an update
      */
@@ -262,6 +268,7 @@ export interface TableProps<T> extends DefaultProps<TableStylesNames> {
 
 export interface TableType {
     <T>(props: TableProps<T>): ReactElement;
+    ColumnsSelector: typeof TableColumnsSelector;
     Actions: typeof TableActions;
     Filter: typeof TableFilter;
     Footer: typeof TableFooter;

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

@@ -0,0 +1,260 @@
+import {Box} from '@mantine/core';
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent} from '@test-utils';
+import {Table} from '../Table';
+import {TableColumnsSelector} from '../table-columns-selector/TableColumnsSelector';
+
+const mockData = [
+    {
+        name: 'John Doe',
+        age: 30,
+        email: 'john.doe@example.com',
+        phone: '123-456-7890',
+        body: 'coucou',
+    },
+    {
+        name: 'Jane Doe',
+        age: 25,
+        email: 'jane.doe@example.com',
+        phone: '098-765-4321',
+        body: 'coucou 2',
+    },
+];
+
+const columnNames: Record<string, string> = {
+    name: 'Name',
+    age: 'Age',
+    email: 'Email',
+    phone: 'Phone',
+};
+
+type RowData = {
+    name: string;
+    age: number;
+    email: string;
+    phone: string;
+    body: string;
+};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [
+    columnHelper.accessor('name', {enableSorting: false}),
+    columnHelper.accessor('age', {enableSorting: false}),
+    columnHelper.accessor('email', {enableSorting: false}),
+    columnHelper.accessor('phone', {enableSorting: false}),
+    Table.CollapsibleColumn as ColumnDef<RowData>,
+];
+
+describe('TableColumnsSelector', () => {
+    it('render the edit button in the table header', () => {
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+
+        expect(screen.getByRole('button', {name: 'Edit columns'})).toBeVisible();
+        expect(screen.queryByRole('button', {name: 'Edit columns (4)'})).not.toBeInTheDocument();
+    });
+
+    it('renders the custom label when defined', () => {
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} label="Custom label" />
+                </Table.Header>
+            </Table>,
+        );
+
+        expect(screen.getByRole('button', {name: 'Custom label'})).toBeVisible();
+    });
+
+    it('renders the count of visible columns if showVisibleCountLabel is true', () => {
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} showVisibleCountLabel />
+                </Table.Header>
+            </Table>,
+        );
+
+        expect(screen.getByRole('button', {name: 'Edit columns (4)'})).toBeVisible();
+    });
+
+    it('renders all columns in the dropdown, except the collapsible and the multiselectRow by default', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table
+                data={mockData}
+                columns={columns}
+                multiRowSelectionEnabled
+                getExpandChildren={(datum) => <Box py="xs">{datum.body}</Box>}
+            >
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+        // columns are rendered
+        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();
+
+        // columns are not in the dropdown
+        expect(screen.queryByRole('checkbox', {name: /collapsible/i})).not.toBeInTheDocument();
+        expect(screen.queryByRole('checkbox', {name: 'select'})).not.toBeInTheDocument();
+    });
+
+    it('renders all checkboxes checked by default', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Email'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
+    });
+
+    it('does not render the checkboxes for the columns that are in the nonHideableColumns prop', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} nonHideableColumns={['name']} />
+                </Table.Header>
+            </Table>,
+        );
+
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+        expect(screen.queryByRole('checkbox', {name: 'Name'})).not.toBeInTheDocument();
+        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Email'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
+    });
+
+    it('renders unchecked checkboxes for the columns that are not visible in the inital state of the table', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Email'})).not.toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
+    });
+
+    it('renders disabled checkboxes when the maxSelectableColumns is set and the maximum number of columns is checked', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} maxSelectableColumns={3} />
+                </Table.Header>
+            </Table>,
+        );
+
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+        const nameCheckBox = screen.getByRole('checkbox', {name: /name/i});
+        const ageCheckBox = screen.getByRole('checkbox', {name: /age/i});
+        const emailCheckBox = screen.getByRole('checkbox', {name: /email/i});
+        const phoneCheckBox = screen.getByRole('checkbox', {name: /phone/i});
+
+        expect(nameCheckBox).toBeChecked();
+        expect(nameCheckBox).toBeEnabled();
+        expect(ageCheckBox).toBeChecked();
+        expect(ageCheckBox).toBeEnabled();
+        expect(emailCheckBox).not.toBeChecked();
+        expect(emailCheckBox).toBeDisabled();
+        expect(phoneCheckBox).toBeChecked();
+        expect(phoneCheckBox).toBeEnabled();
+
+        await user.click(nameCheckBox);
+
+        expect(nameCheckBox).toBeEnabled();
+    });
+
+    it('renders a tooltip when the maxSelectableColumns is set and the maximum number of columns is checked and the user hover a disabled checkbox', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
+                <Table.Header>
+                    <TableColumnsSelector
+                        columnNames={columnNames}
+                        maxSelectableColumns={3}
+                        limitReachedTooltip="You can display up to 3 columns"
+                    />
+                </Table.Header>
+            </Table>,
+        );
+
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+        const emailCheckBoxWrapper = screen.getByRole('checkbox', {name: /email/i}).parentElement;
+
+        await user.hover(emailCheckBoxWrapper);
+
+        expect(screen.getByText('You can display up to 3 columns')).toBeVisible();
+    });
+
+    describe('footer', () => {
+        it('does not render the footer when maxSelectableColumns is not defined', async () => {
+            const user = userEvent.setup();
+            render(
+                <Table data={mockData} columns={columns}>
+                    <Table.Header>
+                        <TableColumnsSelector columnNames={columnNames} />
+                    </Table.Header>
+                </Table>,
+            );
+
+            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+            expect(screen.queryByText('You can display up to 3 columns')).not.toBeInTheDocument();
+        });
+
+        it('renders the footer when maxSelectableColumns is defined and footer is defined', async () => {
+            const user = userEvent.setup();
+            render(
+                <Table data={mockData} columns={columns}>
+                    <Table.Header>
+                        <TableColumnsSelector
+                            columnNames={columnNames}
+                            maxSelectableColumns={3}
+                            footer="You can display so many patate"
+                        />
+                    </Table.Header>
+                </Table>,
+            );
+
+            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+
+            expect(screen.getByText('You can display so many patate')).toBeVisible();
+        });
+    });
+});

package/src/components/table/layouts/RowLayout.tsx

@@ -50,7 +50,7 @@ const RowLayoutBody = <T,>({
         cell.querySelector('button').click();
     };
 
-    const rows = table.getRowModel().rows.map((row) => {
+    const rows = table.getRowModel()?.rows.map((row) => {
         const rowChildren = getExpandChildren?.(row.original) ?? null;
         const isSelected = !!row.getIsSelected();
         const shouldKeepSelection = keepSelection && isSelected;

package/src/components/table/table-columns-selector/TableColumnsSelector.styles.ts

@@ -0,0 +1,8 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {maxWidth: '100%'},
+    wrapper: {
+        display: 'inline-flex',
+    },
+}));

package/src/components/table/table-columns-selector/TableColumnsSelector.tsx

@@ -0,0 +1,78 @@
+import {Button, Checkbox, Divider, Grid, Popover, ScrollArea, Stack, Tooltip} from '@mantine/core';
+import {FunctionComponent} from 'react';
+
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
+import useStyles from './TableColumnsSelector.styles';
+import {TableColumnsSelectorProps} from './TableColumnsSelector.types';
+
+const COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];
+
+export const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps> = ({
+    classNames,
+    styles,
+    unstyled,
+    label = 'Edit columns',
+    buttonVariant = 'outline',
+    showVisibleCountLabel = false,
+    nonHideableColumns = [],
+    maxSelectableColumns,
+    footer,
+    limitReachedTooltip = 'You have reached the maximum display limit.',
+    columnNames,
+}) => {
+    const {classes} = useStyles(null, {name: 'TableColumnsSelector', classNames, styles, unstyled});
+    const {getAllColumns} = useTable();
+
+    const columnsToExclude = [...nonHideableColumns, ...COLUMNS_IDS_TO_EXCLUDE];
+
+    const filteredColumns = getAllColumns().filter((column) => !columnsToExclude.includes(column.id));
+
+    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;
+
+    if (filteredColumns.length <= 0) {
+        return null;
+    }
+
+    return (
+        <Grid.Col span="content" order={TableComponentsOrder.ColumnsSelector} py="sm" className={classes.root}>
+            <Popover withinPortal position="bottom" shadow="md">
+                <Popover.Target>
+                    <Button variant={buttonVariant}>{`${label}${
+                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''
+                    }`}</Button>
+                </Popover.Target>
+                <Popover.Dropdown miw={240}>
+                    <ScrollArea.Autosize mah={154}>
+                        <Stack>
+                            {filteredColumns.map((column) => {
+                                const isDisabled =
+                                    selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();
+                                return (
+                                    <Tooltip label={limitReachedTooltip} disabled={!isDisabled} position="left">
+                                        <div>
+                                            <Checkbox
+                                                key={column.id}
+                                                label={columnNames?.[column.id] || column.id}
+                                                name={column.id}
+                                                checked={column.getIsVisible()}
+                                                disabled={isDisabled}
+                                                onChange={column.getToggleVisibilityHandler()}
+                                            />
+                                        </div>
+                                    </Tooltip>
+                                );
+                            })}
+                        </Stack>
+                    </ScrollArea.Autosize>
+                    {maxSelectableColumns && (
+                        <>
+                            <Divider mb="xs" mt="sm" />
+                            {footer}
+                        </>
+                    )}
+                </Popover.Dropdown>
+            </Popover>
+        </Grid.Col>
+    );
+};

package/src/components/table/table-columns-selector/TableColumnsSelector.types.ts

@@ -0,0 +1,46 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import {ReactNode} from 'react';
+import useStyles from './TableColumnsSelector.styles';
+
+type TableColumnsSelectorStylesNames = Selectors<typeof useStyles>;
+
+export interface TableColumnsSelectorProps extends DefaultProps<TableColumnsSelectorStylesNames> {
+    /**
+     * The label of the button
+     * @default 'Edit columns'
+     */
+    label?: ReactNode;
+    /**
+     * The style variant of the button
+     * @default 'outline'
+     */
+    buttonVariant?: string;
+    /**
+     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.
+     * @default []
+     */
+    nonHideableColumns?: string[];
+    /**
+     * Whether the count of visible columns is shown in the button label.
+     * @default false
+     */
+    showVisibleCountLabel?: boolean;
+    /**
+     * The maximum number of columns that can be selected at the same time.
+     * If defined a footer will render with the remaining number of columns that can be selected.
+     */
+    maxSelectableColumns?: number;
+    /**
+     * A dictionary of column ids and names to use for the checkbox labels.
+     */
+    columnNames: Record<string, string>;
+    /**
+     * The content to display in the footer when maxSelectableColumns is defined.
+     */
+    footer?: ReactNode;
+    /**
+     * The tooltip to display when the user hovers over a disabled checkbox.
+     * @default 'You have reached the maximum display limit.'
+     */
+    limitReachedTooltip?: string;
+}