@coveord/plasma-mantine 56.8.1 → 56.9.0

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} />,
 };

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

@@ -1,50 +1,21 @@
-import {
-    BoxProps,
-    Button,
-    Checkbox,
-    CompoundStylesApiProps,
-    Divider,
-    factory,
-    Factory,
-    Grid,
-    Popover,
-    ScrollArea,
-    Stack,
-    Tooltip,
-    useProps,
-} from '@mantine/core';
-import {flexRender, Header} from '@tanstack/react-table';
-import {ReactNode} from 'react';
-import {TableComponentsOrder} from '../Table.js';
-import {useTableContext} from '../TableContext.js';
+import {IconSettings} from '@coveord/plasma-react-icons';
+import {Checkbox, Combobox, Text, Tooltip, useCombobox} from '@mantine/core';
+import {flexRender, Header, Table} from '@tanstack/react-table';
+import {ActionIcon} from '../../ActionIcon/ActionIcon';
 
-export type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';
-
-export interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiProps<TableColumnsSelectorFactory> {
-    /**
-     * The label of the button
-     * @default 'Edit columns'
-     */
-    label?: ReactNode;
-    /**
-     * The style variant of the button
-     * @default 'outline'
-     */
-    buttonVariant?: string;
-    /**
-     * Whether the count of visible columns is shown in the button label.
-     * @default false
-     */
-    showVisibleCountLabel?: boolean;
+export interface TableColumnsSelectorOptions {
     /**
      * 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.
+     * Must be a positive integer (greater than 0).
      */
     maxSelectableColumns?: number;
     /**
      * The content to display in the footer when maxSelectableColumns is defined.
+     * Can be a string or a function that receives the maxSelectableColumns value.
+     * @default (max) => `You can display up to ${max} columns.`
      */
-    footer?: ReactNode;
+    footer?: string | ((maxSelectableColumns: number) => string);
     /**
      * The tooltip to display when the user hovers over a disabled checkbox because of the limit.
      * @default 'You have reached the maximum display limit.'
@@ -57,108 +28,108 @@ export interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiPr
     alwaysVisibleTooltip?: string;
 }
 
-export type TableColumnsSelectorFactory = Factory<{
-    props: TableColumnsSelectorProps;
-    ref: HTMLDivElement;
-    stylesNames: TableColumnsSelectorStylesNames;
-    compound: true;
-}>;
+export interface TableColumnsSelectorHeaderProps {
+    table: Table<unknown>;
+    options?: TableColumnsSelectorOptions;
+}
 
-const defaultProps: Partial<TableColumnsSelectorProps> = {
-    label: 'Edit columns',
-    buttonVariant: 'outline',
+const DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {
+    footer: (maxSelectableColumns: number) => string;
+} = {
+    footer: (max) => `You can display up to ${max} columns.`,
     limitReachedTooltip: 'You have reached the maximum display limit.',
     alwaysVisibleTooltip: 'This column is always visible.',
-    showVisibleCountLabel: false,
 };
 
-export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props, ref) => {
-    const {getStyles} = useTableContext();
-    const {
-        label,
-        buttonVariant,
-        showVisibleCountLabel,
-        maxSelectableColumns,
-        footer,
-        limitReachedTooltip,
-        alwaysVisibleTooltip,
-        classNames,
-        className,
-        styles,
-        style,
-        vars,
-        ...others
-    } = useProps('TableColumnsSelector', defaultProps, props);
-    const {table} = useTableContext();
+export const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelectorHeaderProps) => {
+    const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {
+        ...DEFAULT_OPTIONS,
+        ...options,
+    };
 
-    const allColumns = table.getAllLeafColumns();
+    const combobox = useCombobox({
+        onDropdownClose: () => {
+            combobox.resetSelectedOption();
+        },
+        onDropdownOpen: () => combobox.updateSelectedOptionIndex('active'),
+    });
 
+    const allColumns = table.getAllLeafColumns();
     const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);
     const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;
 
+    // Validate maxSelectableColumns - must be a positive integer to be effective
+    const effectiveMaxColumns =
+        maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;
+
     if (filteredColumns.length <= 0) {
         return null;
     }
 
-    const stylesApiProps = {classNames, styles};
+    const getColumnState = (column: (typeof filteredColumns)[number]) => {
+        const alwaysVisible = !column.getCanHide();
+        const isDisabled =
+            (effectiveMaxColumns !== undefined &&
+                selectedColumnsCount >= effectiveMaxColumns &&
+                !column.getIsVisible()) ||
+            alwaysVisible;
+        const isVisible = column.getIsVisible() || alwaysVisible;
+        return {alwaysVisible, isDisabled, isVisible};
+    };
 
-    return (
-        <Grid.Col
-            span="content"
-            order={TableComponentsOrder.ColumnsSelector}
-            {...getStyles('columnSelector', {className, style, ...stylesApiProps})}
-            {...others}
-        >
-            <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 {...getStyles('columnSelectorWrapper', stylesApiProps)}>
-                            {filteredColumns.map((column) => {
-                                const alwaysVisible = !column.getCanHide();
-                                const isDisabled =
-                                    (selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible()) ||
-                                    alwaysVisible;
+    const handleOptionClick = (columnId: string) => {
+        const column = filteredColumns.find((col) => col.id === columnId);
+        if (column) {
+            const {isDisabled} = getColumnState(column);
+            if (!isDisabled) {
+                column.toggleVisibility();
+            }
+        }
+    };
 
-                                return (
-                                    <Tooltip
-                                        label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}
-                                        disabled={!isDisabled}
-                                        position="left"
-                                        key={column.id}
-                                    >
-                                        <div>
-                                            <Checkbox
-                                                key={column.id}
-                                                label={flexRender(column.columnDef.header, {
-                                                    table,
-                                                    column,
-                                                    header: {column} as Header<unknown, unknown>,
-                                                })}
-                                                name={column.id}
-                                                checked={column.getIsVisible() || alwaysVisible}
-                                                disabled={isDisabled}
-                                                onChange={column.getToggleVisibilityHandler()}
-                                            />
-                                        </div>
-                                    </Tooltip>
-                                );
+    const columnOptions = filteredColumns.map((column) => {
+        const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);
+
+        return (
+            <Combobox.Option value={column.id} key={column.id} disabled={isDisabled} active={isVisible}>
+                <Tooltip
+                    label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}
+                    disabled={!isDisabled}
+                    position="left"
+                >
+                    <div>
+                        <Checkbox
+                            checked={isVisible}
+                            label={flexRender(column.columnDef.header, {
+                                table,
+                                column,
+                                header: {column} as Header<unknown, unknown>,
                             })}
-                        </Stack>
-                    </ScrollArea.Autosize>
-                    {maxSelectableColumns && (
-                        <>
-                            <Divider mb="xs" mt="sm" />
-                            {footer}
-                        </>
-                    )}
-                </Popover.Dropdown>
-            </Popover>
-        </Grid.Col>
+                            disabled={isDisabled}
+                        />
+                    </div>
+                </Tooltip>
+            </Combobox.Option>
+        );
+    });
+
+    return (
+        <Combobox store={combobox} position="bottom-end" shadow="md" onOptionSubmit={handleOptionClick}>
+            <Combobox.Target>
+                <ActionIcon.Tertiary onClick={() => combobox.toggleDropdown()} aria-label="settings">
+                    <IconSettings height={16} />
+                </ActionIcon.Tertiary>
+            </Combobox.Target>
+            <Combobox.Dropdown miw={270}>
+                <Combobox.Options>{columnOptions}</Combobox.Options>
+                {effectiveMaxColumns && (
+                    <Combobox.Footer>
+                        <Text size="sm" c="dimmed">
+                            {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}
+                        </Text>
+                    </Combobox.Footer>
+                )}
+            </Combobox.Dropdown>
+        </Combobox>
     );
-});
+};

package/src/index.ts

@@ -118,6 +118,7 @@ export * from './components/StickyFooter/StickyFooter.js';
 
 // Table - override Mantine Table
 export {flexRender as renderTableCell} from '@tanstack/react-table';
+export {TableActionsColumn} from './components/Table/table-column/TableActionsColumn.js';
 export {type TablePredicateProps} from './components/Table/table-predicate/TablePredicate.js';
 export {Table, TableComponentsOrder, type PlasmaTableFactory} from './components/Table/Table.js';
 export {