@coveord/plasma-mantine 56.8.0 → 56.9.0

package/src/components/Table/Table.tsx

@@ -2,10 +2,10 @@ import {Box, Center, Factory, Loader, useProps, useStyles} from '@mantine/core';
 import {useClickOutside, useMergedRef} from '@mantine/hooks';
 import {
     ColumnDef,
-    Row,
-    RowSelectionState,
     defaultColumnSizing,
     getCoreRowModel,
+    Row,
+    RowSelectionState,
     useReactTable,
 } from '@tanstack/react-table';
 import isEqual from 'fast-deep-equal';
@@ -16,8 +16,8 @@ import {TableLayout, TableProps} from './Table.types.js';
 import {TableProvider} from './TableContext.js';
 import {TableLayouts} from './layouts/TableLayouts.js';
 import {TableActionItem, TableActionItemStylesNames} from './table-actions/TableActionItem.js';
-import {TableHeaderActionsStylesNames} from './table-actions/TableHeaderActions.js';
 import {TableActionsListStylesNames} from './table-actions/TableActionsList.js';
+import {TableHeaderActionsStylesNames} from './table-actions/TableHeaderActions.js';
 import {TableActionsColumn} from './table-column/TableActionsColumn.js';
 import {
     TableAccordionColumn,
@@ -25,7 +25,6 @@ import {
     TableCollapsibleColumnStylesNames,
 } from './table-column/TableCollapsibleColumn.js';
 import {TableSelectableColumn} from './table-column/TableSelectableColumn.js';
-import {TableColumnsSelector, TableColumnsSelectorStylesNames} from './table-columns-selector/TableColumnsSelector.js';
 import {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker.js';
 import {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter.js';
 import {TableFooter} from './table-footer/TableFooter.js';
@@ -53,8 +52,7 @@ type TableStylesNames =
     | TableHeaderStylesNames
     | TableThStylesNames
     | TableLastUpdatedStylesNames
-    | TablePredicateStylesNames
-    | TableColumnsSelectorStylesNames;
+    | TablePredicateStylesNames;
 
 export type PlasmaTableFactory = Factory<{
     props: TableProps<unknown>;
@@ -65,7 +63,6 @@ export type PlasmaTableFactory = Factory<{
         ActionsColumn: typeof TableActionsColumn;
         ActionItem: typeof TableActionItem;
         CollapsibleColumn: typeof TableCollapsibleColumn;
-        ColumnsSelector: typeof TableColumnsSelector;
         DateRangePicker: typeof TableDateRangePicker;
         Filter: typeof TableFilter;
         Footer: typeof TableFooter;
@@ -297,7 +294,6 @@ export const TableComponentsOrder = {
     Predicate: 5,
     Filter: 4,
     DateRangePicker: 3,
-    ColumnsSelector: 2,
     LayoutControl: 1,
 };
 
@@ -305,7 +301,6 @@ Table.AccordionColumn = TableAccordionColumn;
 Table.ActionsColumn = TableActionsColumn;
 Table.ActionItem = TableActionItem;
 Table.CollapsibleColumn = TableCollapsibleColumn;
-Table.ColumnsSelector = TableColumnsSelector;
 Table.DateRangePicker = TableDateRangePicker;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;

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

@@ -0,0 +1,325 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent, waitFor} from '@test-utils';
+
+import {Table} from '../Table.js';
+import {TableActionsColumn} from '../table-column/TableActionsColumn.js';
+import {useTable} from '../use-table.js';
+
+type RowData = {name: string; age: number; email: string; phone: string};
+const columnHelper = createColumnHelper<RowData>();
+
+const mockData: RowData[] = [
+    {name: 'John', age: 30, email: 'john@test.com', phone: '123-456'},
+    {name: 'Jane', age: 25, email: 'jane@test.com', phone: '789-012'},
+];
+
+const getBaseColumns = (): Array<ColumnDef<RowData>> => [
+    columnHelper.accessor('name', {header: 'Name', enableSorting: false}),
+    columnHelper.accessor('age', {header: 'Age', enableSorting: false}),
+    columnHelper.accessor('email', {header: 'Email', enableSorting: false}),
+    columnHelper.accessor('phone', {header: 'Phone', enableSorting: false}),
+    TableActionsColumn as ColumnDef<RowData>,
+];
+
+describe('TableColumnsSelectorHeader', () => {
+    it('renders the column selector button in the actions column header when rowConfigurable is true', () => {
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={getBaseColumns()}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        expect(screen.getByRole('button', {name: 'settings'})).toBeVisible();
+    });
+
+    it('renders all columns in the dropdown except control columns', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={getBaseColumns()}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        await user.click(screen.getByRole('button', {name: 'settings'}));
+
+        const columnsCheckboxes = await screen.findAllByRole('checkbox');
+        expect(columnsCheckboxes).toHaveLength(4);
+        expect(columnsCheckboxes[0]).toHaveAccessibleName('Name');
+        expect(columnsCheckboxes[1]).toHaveAccessibleName('Age');
+        expect(columnsCheckboxes[2]).toHaveAccessibleName('Email');
+        expect(columnsCheckboxes[3]).toHaveAccessibleName('Phone');
+    });
+
+    it('renders all checkboxes checked by default', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={getBaseColumns()}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        await user.click(screen.getByRole('button', {name: 'settings'}));
+
+        expect(await screen.findByRole('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('hides a column when the user unchecks it', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={getBaseColumns()}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        expect(screen.getByRole('columnheader', {name: 'Email'})).toBeVisible();
+
+        await user.click(screen.getByRole('button', {name: 'settings'}));
+        await user.click(await screen.findByRole('checkbox', {name: 'Email'}));
+
+        expect(screen.queryByRole('columnheader', {name: 'Email'})).not.toBeInTheDocument();
+    });
+
+    it('shows a column when the user checks it', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>({
+                initialState: {columnVisibility: {email: false}},
+            });
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={getBaseColumns()}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        expect(screen.queryByRole('columnheader', {name: 'Email'})).not.toBeInTheDocument();
+
+        await user.click(screen.getByRole('button', {name: 'settings'}));
+        await user.click(await screen.findByRole('checkbox', {name: 'Email'}));
+
+        expect(screen.getByRole('columnheader', {name: 'Email'})).toBeVisible();
+    });
+
+    it('renders a disabled checked checkbox for columns that are always visible', async () => {
+        const user = userEvent.setup();
+        const columnsWithNonHideable: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('name', {header: 'Name', enableSorting: false}),
+            columnHelper.accessor('age', {header: 'Age', enableSorting: false, enableHiding: false}),
+            columnHelper.accessor('email', {header: 'Email', enableSorting: false}),
+            TableActionsColumn as ColumnDef<RowData>,
+        ];
+
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={columnsWithNonHideable}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        await user.click(screen.getByRole('button', {name: 'settings'}));
+
+        const ageColumn = await screen.findByRole('checkbox', {name: 'Age'});
+        expect(ageColumn).toBeChecked();
+        expect(ageColumn).toBeDisabled();
+    });
+
+    it('renders a tooltip when hovering a disabled always visible column checkbox', async () => {
+        const user = userEvent.setup();
+        const columnsWithNonHideable: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('name', {header: 'Name', enableSorting: false}),
+            columnHelper.accessor('age', {header: 'Age', enableSorting: false, enableHiding: false}),
+            TableActionsColumn as ColumnDef<RowData>,
+        ];
+
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={columnsWithNonHideable}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        await user.click(screen.getByRole('button', {name: 'settings'}));
+        const ageCheckbox = await screen.findByRole('checkbox', {name: 'Age'});
+        await user.hover(ageCheckbox.closest('div')!);
+
+        await waitFor(() => {
+            expect(screen.getByRole('tooltip', {name: 'This column is always visible.'})).toBeVisible();
+        });
+    });
+
+    it('renders unchecked checkboxes for columns that are not visible in the initial state', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>({
+                initialState: {columnVisibility: {email: false}},
+            });
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={getBaseColumns()}
+                    options={{meta: {rowConfigurable: true}}}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        await user.click(screen.getByRole('button', {name: 'settings'}));
+
+        expect(await screen.findByRole('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();
+    });
+
+    describe('maxSelectableColumns', () => {
+        it('disables unchecked columns when the maximum number of visible columns is reached', async () => {
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const store = useTable<RowData>({
+                    initialState: {columnVisibility: {email: false, phone: false}},
+                });
+                return (
+                    <Table
+                        store={store}
+                        data={mockData}
+                        columns={getBaseColumns()}
+                        options={{meta: {rowConfigurable: {maxSelectableColumns: 2}}}}
+                    />
+                );
+            };
+            render(<Fixture />);
+
+            await user.click(screen.getByRole('button', {name: 'settings'}));
+
+            // Name and Age are visible (2 columns = max)
+            expect(await screen.findByRole('checkbox', {name: 'Name'})).toBeChecked();
+            expect(screen.getByRole('checkbox', {name: 'Name'})).not.toBeDisabled();
+            expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+            expect(screen.getByRole('checkbox', {name: 'Age'})).not.toBeDisabled();
+
+            // Email and Phone are hidden and should be disabled
+            expect(screen.getByRole('checkbox', {name: 'Email'})).not.toBeChecked();
+            expect(screen.getByRole('checkbox', {name: 'Email'})).toBeDisabled();
+            expect(screen.getByRole('checkbox', {name: 'Phone'})).not.toBeChecked();
+            expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeDisabled();
+        });
+
+        it('renders a footer with the max columns message when maxSelectableColumns is set', async () => {
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const store = useTable<RowData>();
+                return (
+                    <Table
+                        store={store}
+                        data={mockData}
+                        columns={getBaseColumns()}
+                        options={{meta: {rowConfigurable: {maxSelectableColumns: 5}}}}
+                    />
+                );
+            };
+            render(<Fixture />);
+
+            await user.click(screen.getByRole('button', {name: 'settings'}));
+
+            expect(await screen.findByText('You can display up to 5 columns.')).toBeVisible();
+        });
+
+        it('does not render a footer when maxSelectableColumns is not set', async () => {
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const store = useTable<RowData>();
+                return (
+                    <Table
+                        store={store}
+                        data={mockData}
+                        columns={getBaseColumns()}
+                        options={{meta: {rowConfigurable: true}}}
+                    />
+                );
+            };
+            render(<Fixture />);
+
+            await user.click(screen.getByRole('button', {name: 'settings'}));
+
+            await screen.findByRole('checkbox', {name: 'Name'});
+            expect(screen.queryByText(/You can display up to/)).not.toBeInTheDocument();
+        });
+
+        it('enables a disabled column when a visible column is hidden', async () => {
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const store = useTable<RowData>({
+                    initialState: {columnVisibility: {email: false, phone: false}},
+                });
+                return (
+                    <Table
+                        store={store}
+                        data={mockData}
+                        columns={getBaseColumns()}
+                        options={{meta: {rowConfigurable: {maxSelectableColumns: 2}}}}
+                    />
+                );
+            };
+            render(<Fixture />);
+
+            await user.click(screen.getByRole('button', {name: 'settings'}));
+
+            // Email is disabled because max is reached
+            expect(await screen.findByRole('checkbox', {name: 'Email'})).toBeDisabled();
+
+            // Hide Name column
+            await user.click(screen.getByRole('checkbox', {name: 'Name'}));
+
+            // Now Email should be enabled
+            expect(screen.getByRole('checkbox', {name: 'Email'})).not.toBeDisabled();
+        });
+    });
+});

package/src/components/Table/table-column/TableActionsColumn.tsx

@@ -3,7 +3,27 @@ import {useProps} from '@mantine/core';
 import {CellContext, ColumnDef} from '@tanstack/table-core';
 import {FunctionComponent} from 'react';
 import {TableActionsList, TableActionsListProps} from '../table-actions/TableActionsList.js';
+
 import {useTableContext} from '../TableContext.js';
+import {
+    TableColumnsSelectorHeader,
+    TableColumnsSelectorOptions,
+} from '../table-columns-selector/TableColumnsSelector.js';
+
+export interface TableActionsColumnMeta {
+    /**
+     * When set to `true` or an options object, displays a column selector button in the actions column header.
+     * Allows users to show/hide columns in the table.
+     *
+     * @example
+     * // Simple usage
+     * options={{ meta: { rowConfigurable: true } }}
+     *
+     * // With options
+     * options={{ meta: { rowConfigurable: { maxSelectableColumns: 5 } } }}
+     */
+    rowConfigurable?: boolean | TableColumnsSelectorOptions;
+}
 
 /**
  * Generic column to use when your table needs actions on rows
@@ -15,7 +35,14 @@ export const TableActionsColumn: ColumnDef<unknown> = {
     meta: {
         controlColumn: true,
     },
-    header: '',
+    header: ({table}) => {
+        const rowConfigurable = (table.options.meta as TableActionsColumnMeta)?.rowConfigurable;
+        if (!rowConfigurable) {
+            return null;
+        }
+        const options = typeof rowConfigurable === 'boolean' ? {} : rowConfigurable;
+        return <TableColumnsSelectorHeader table={table} options={options} />;
+    },
     size: 84, // 16px padding left + 28px ActionIcon + 40px padding right
     cell: (info) => <ActionsMenu info={info} />,
 };