@coveord/plasma-mantine 56.8.0 → 56.9.0

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

@@ -106,6 +106,9 @@ export * from './components/Modal/ModalFooter.js';
 // Prompt
 export * from './components/Prompt/Prompt.js';
 
+// RadioCard - override Mantine RadioCard
+export {RadioCard, type RadioCardProps} from './components/RadioCard/RadioCard.js';
+
 // Read Only - override Mantine PasswordInput and Select
 export {PasswordInput} from './components/PasswordInput/PasswordInput.js';
 export {Select} from './components/Select/Select.js';
@@ -115,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 {

package/src/styles/RadioCard.module.css

@@ -5,7 +5,51 @@
 }
 
 .card {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: var(--mantine-spacing-sm);
+    border-radius: var(--mantine-radius-lg);
+
+    &[data-checked] {
+        border-color: var(--mantine-primary-color-filled);
+    }
+
     &[disabled] {
         pointer-events: none;
+
+        .title {
+            color: var(--mantine-color-disabled-color);
+        }
+
+        .description {
+            color: var(--mantine-color-disabled-color);
+        }
     }
 }
+
+.container {
+    flex-wrap: nowrap;
+    gap: var(--mantine-spacing-sm);
+    align-items: baseline;
+    justify-content: flex-start;
+    width: 100%;
+    margin-bottom: var(--mantine-spacing-xs);
+}
+
+.title {
+    flex: 1;
+    color: var(--coveo-color-title);
+    word-break: break-word;
+}
+
+.description {
+    padding-left: var(--mantine-spacing-lg);
+    color: var(--mantine-color-dimmed);
+    font-weight: 400;
+    font-size: var(--mantine-font-size-xs);
+}
+
+.indicator {
+    cursor: pointer;
+}

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

@@ -1,352 +0,0 @@
-import {Box} from '@mantine/core';
-import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, waitFor, within} from '@test-utils';
-import {Table} from '../Table.js';
-import {TableColumnsSelector} from '../table-columns-selector/TableColumnsSelector.js';
-import {useTable} from '../use-table.js';
-
-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',
-    },
-];
-
-type RowData = {
-    name: string;
-    age: number;
-    email: string;
-    phone: string;
-    body: string;
-};
-
-const columnHelper = createColumnHelper<RowData>();
-const baseColumns: 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}),
-    Table.CollapsibleColumn as ColumnDef<RowData>,
-];
-
-describe('TableColumnsSelector', () => {
-    it('render the edit button in the table header', () => {
-        const Fixture = () => {
-            const store = useTable<RowData>();
-            return (
-                <Table store={store} data={mockData} columns={baseColumns}>
-                    <Table.Header>
-                        <TableColumnsSelector />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        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', () => {
-        const Fixture = () => {
-            const store = useTable<RowData>();
-            return (
-                <Table store={store} data={mockData} columns={baseColumns}>
-                    <Table.Header>
-                        <TableColumnsSelector label="Custom label" />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        expect(screen.getByRole('button', {name: 'Custom label'})).toBeVisible();
-    });
-
-    it('renders the count of visible columns if showVisibleCountLabel is true', () => {
-        const Fixture = () => {
-            const store = useTable<RowData>();
-            return (
-                <Table store={store} data={mockData} columns={baseColumns}>
-                    <Table.Header>
-                        <TableColumnsSelector showVisibleCountLabel />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        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();
-        const Fixture = () => {
-            const store = useTable<RowData>({enableMultiRowSelection: true});
-            return (
-                <Table
-                    store={store}
-                    data={mockData}
-                    columns={baseColumns}
-                    getRowExpandedContent={(datum) => <Box py="xs">{datum.body}</Box>}
-                >
-                    <Table.Header>
-                        <TableColumnsSelector />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-        const dropdown = await screen.findByRole('dialog', {name: 'Edit columns'});
-        const columnsCheckboxes = within(dropdown).getAllByRole('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={baseColumns}>
-                    <Table.Header>
-                        <TableColumnsSelector />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-
-        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('renders a disabled checked checkbox for columns that are always visible', async () => {
-        const columns: 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}),
-            columnHelper.accessor('phone', {header: 'Phone', enableSorting: false}),
-        ];
-        const user = userEvent.setup();
-        const Fixture = () => {
-            const store = useTable<RowData>();
-            return (
-                <Table store={store} data={mockData} columns={columns}>
-                    <Table.Header>
-                        <TableColumnsSelector />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-
-        expect(await screen.findByRole('checkbox', {name: 'Name'})).toBeChecked();
-        expect(screen.getByRole('checkbox', {name: 'Email'})).toBeChecked();
-        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
-
-        const ageColumn = screen.getByRole('checkbox', {name: 'Age'});
-        expect(ageColumn).toBeChecked();
-        expect(ageColumn).toBeDisabled();
-        await user.hover(ageColumn.parentElement);
-        await waitFor(() => {
-            expect(screen.getByRole('tooltip', {name: 'This column is always visible.'})).toBeVisible();
-        });
-    });
-
-    it('renders unchecked checkboxes for the columns that are not visible in the inital state of the table', async () => {
-        const user = userEvent.setup();
-        const Fixture = () => {
-            const store = useTable<RowData>({initialState: {columnVisibility: {email: false}}});
-            return (
-                <Table store={store} data={mockData} columns={baseColumns}>
-                    <Table.Header>
-                        <TableColumnsSelector />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-
-        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();
-    });
-
-    it('renders disabled checkboxes when the maxSelectableColumns is set and the maximum number of columns is checked', async () => {
-        const user = userEvent.setup();
-        const Fixture = () => {
-            const store = useTable<RowData>({initialState: {columnVisibility: {email: false}}});
-            return (
-                <Table store={store} data={mockData} columns={baseColumns}>
-                    <Table.Header>
-                        <TableColumnsSelector maxSelectableColumns={3} />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-
-        const nameCheckBox = await screen.findByRole('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();
-        const Fixture = () => {
-            const store = useTable<RowData>({initialState: {columnVisibility: {email: false}}});
-            return (
-                <Table store={store} data={mockData} columns={baseColumns}>
-                    <Table.Header>
-                        <TableColumnsSelector
-                            maxSelectableColumns={3}
-                            limitReachedTooltip="You can display up to 3 columns"
-                        />
-                    </Table.Header>
-                </Table>
-            );
-        };
-        render(<Fixture />);
-
-        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-
-        const emailCheckBoxWrapper = (await screen.findByRole('checkbox', {name: /email/i})).parentElement;
-
-        await user.hover(emailCheckBoxWrapper);
-
-        await waitFor(() => 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();
-            const Fixture = () => {
-                const store = useTable<RowData>();
-                return (
-                    <Table store={store} data={mockData} columns={baseColumns}>
-                        <Table.Header>
-                            <TableColumnsSelector />
-                        </Table.Header>
-                    </Table>
-                );
-            };
-            render(<Fixture />);
-
-            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();
-            const Fixture = () => {
-                const store = useTable<RowData>();
-                return (
-                    <Table store={store} data={mockData} columns={baseColumns}>
-                        <Table.Header>
-                            <TableColumnsSelector maxSelectableColumns={3} footer="You can display so many patate" />
-                        </Table.Header>
-                    </Table>
-                );
-            };
-            render(<Fixture />);
-
-            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-
-            await waitFor(() => expect(screen.getByText('You can display so many patate')).toBeVisible());
-        });
-    });
-
-    describe('when url sync is activated', () => {
-        afterEach(() => {
-            window.history.replaceState(null, '', '/');
-        });
-
-        it('sets the current visible column ids in the url', async () => {
-            const user = userEvent.setup();
-            const Fixture = () => {
-                const store = useTable<RowData>({
-                    syncWithUrl: true,
-                    initialState: {columnVisibility: {email: false, phone: true}},
-                });
-                return (
-                    <Table store={store} data={mockData} columns={baseColumns}>
-                        <Table.Header>
-                            <TableColumnsSelector />
-                        </Table.Header>
-                    </Table>
-                );
-            };
-            render(<Fixture />);
-            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-            const emailCheckBox = await screen.findByRole('checkbox', {name: /email/i});
-            await user.click(emailCheckBox);
-            await user.click(screen.getByRole('checkbox', {name: /phone/i}));
-            expect(window.location.search).toBe('?show=email&hide=phone');
-        });
-
-        it('determines the initial visible columns from the url', async () => {
-            window.history.replaceState(null, '', '?show=email%2Cphone');
-            const user = userEvent.setup();
-            const Fixture = () => {
-                const store = useTable<RowData>({
-                    syncWithUrl: true,
-                    initialState: {columnVisibility: {email: false, phone: false}},
-                });
-                return (
-                    <Table store={store} data={mockData} columns={baseColumns}>
-                        <Table.Header>
-                            <TableColumnsSelector />
-                        </Table.Header>
-                    </Table>
-                );
-            };
-            render(<Fixture />);
-            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-            expect(await screen.findByRole('checkbox', {name: /email/i})).toBeChecked();
-            expect(screen.getByRole('checkbox', {name: /phone/i})).toBeChecked();
-        });
-    });
-});