@coveord/plasma-mantine 52.5.0 → 52.7.0

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

@@ -0,0 +1,150 @@
+import {ListSize16Px} from '@coveord/plasma-react-icons';
+import {Box, Collapse, createStyles} from '@mantine/core';
+import {flexRender} from '@tanstack/react-table';
+import {defaultColumnSizing} from '@tanstack/table-core';
+import {Fragment} from 'react';
+import {TableLayout, TableLayoutProps} from '../Table.types';
+import {TableCollapsibleColumn} from '../TableCollapsibleColumn';
+import {useTable} from '../TableContext';
+import {TableLoading} from '../TableLoading';
+import {Th} from '../Th';
+
+interface TableStylesParams {
+    multiRowSelectionEnabled: boolean;
+    disableRowSelection: boolean;
+}
+
+const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {
+    const rowBackgroundColor =
+        theme.colorScheme === 'dark'
+            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+            : theme.colors[theme.primaryColor][0];
+    return {
+        headerColumns: {
+            '& th:first-of-type > *': {
+                paddingLeft: theme.spacing.xl,
+            },
+
+            '& input[type=checkbox]': {
+                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,
+                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,
+                pointerEvents: disableRowSelection ? 'none' : 'auto',
+                cursor: disableRowSelection ? 'not-allowed' : 'default',
+
+                '& + svg': {
+                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',
+                },
+            },
+        },
+
+        rowSelected: {
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
+        },
+
+        rowUnselectable: {
+            '& input[type=checkbox]': {
+                backgroundColor: `${theme.colors.gray[2]}`,
+                borderColor: `${theme.colors.gray[3]}`,
+                pointerEvents: 'none',
+                cursor: 'not-allowed',
+
+                '&:checked + svg': {
+                    color: `${theme.colors.gray[5]}`,
+                },
+            },
+        },
+
+        rowCollapsibleButtonCell: {
+            textAlign: 'right',
+            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,
+        },
+
+        row: {
+            '&:hover': {
+                backgroundColor: rowBackgroundColor,
+            },
+        },
+    };
+});
+
+const RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {
+    const {multiRowSelectionEnabled, disableRowSelection} = useTable();
+    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});
+    const headers = table.getHeaderGroups().map((headerGroup) => (
+        <tr key={headerGroup.id} className={classes.headerColumns}>
+            {headerGroup.headers.map((columnHeader) => (
+                <Th key={columnHeader.id} header={columnHeader} />
+            ))}
+        </tr>
+    ));
+    return <>{headers}</>;
+};
+
+const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {
+    const {multiRowSelectionEnabled, disableRowSelection} = useTable();
+    const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});
+
+    const rows = table.getRowModel().rows.map((row) => {
+        const rowChildren = getExpandChildren?.(row.original) ?? null;
+        const isSelected = !!row.getIsSelected();
+
+        return (
+            <Fragment key={row.id}>
+                <tr
+                    onClick={() => (disableRowSelection ? undefined : row.toggleSelected())}
+                    onDoubleClick={() => doubleClickAction?.(row.original)}
+                    className={cx(classes.row, {
+                        [classes.rowSelected]: isSelected,
+                        [classes.rowUnselectable]: disableRowSelection,
+                    })}
+                    aria-selected={isSelected}
+                >
+                    {row.getVisibleCells().map((cell) => {
+                        const size = cell.column.getSize();
+                        const width = size !== defaultColumnSizing.size ? size : undefined;
+                        return (
+                            <td
+                                key={cell.id}
+                                style={{width}}
+                                className={cx({
+                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
+                                })}
+                            >
+                                <TableLoading visible={loading}>
+                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                </TableLoading>
+                            </td>
+                        );
+                    })}
+                </tr>
+                {rowChildren ? (
+                    <tr>
+                        <td
+                            colSpan={table.getAllColumns().length}
+                            style={{
+                                padding: 0,
+                                borderTop: row.getIsExpanded() ? undefined : 'none',
+                                borderBottom: row.getIsExpanded() ? undefined : 'none',
+                            }}
+                        >
+                            <Collapse in={row.getIsExpanded()}>
+                                <Box px="sm" py="xs">
+                                    {rowChildren}
+                                </Box>
+                            </Collapse>
+                        </td>
+                    </tr>
+                ) : null}
+            </Fragment>
+        );
+    });
+
+    return <>{rows}</>;
+};
+
+export const RowLayout: TableLayout = {
+    name: 'Rows',
+    icon: ListSize16Px,
+    Header: RowLayoutHeader,
+    Body: RowLayoutBody,
+};

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

@@ -0,0 +1,5 @@
+import {RowLayout} from './RowLayout';
+
+export const TableLayouts = {
+    Rows: RowLayout,
+};

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

@@ -0,0 +1,296 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent, waitFor, within} from '@test-utils';
+import {FunctionComponent} from 'react';
+import {Table} from '../../Table';
+
+describe('RowLayout', () => {
+    type RowData = {id: string; firstName: string; lastName?: string};
+
+    const columnHelper = createColumnHelper<RowData>();
+    const columns: Array<ColumnDef<RowData>> = [
+        columnHelper.accessor('firstName', {enableSorting: false}),
+        columnHelper.accessor('lastName', {enableSorting: false}),
+    ];
+
+    it('renders the data using the RowLayout by default', () => {
+        render(
+            <Table
+                getRowId={({id}) => id}
+                data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
+                columns={columns}
+            />
+        );
+
+        expect(screen.getByRole('columnheader', {name: 'firstName'})).toBeVisible();
+        expect(screen.getByRole('columnheader', {name: 'lastName'})).toBeVisible();
+
+        expect(
+            screen.getByRole('cell', {
+                name: /first/i,
+            })
+        ).toBeVisible();
+        expect(
+            screen.getByRole('cell', {
+                name: /last/i,
+            })
+        ).toBeVisible();
+    });
+
+    it('formats the data', () => {
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                header: () => 'First Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+            columnHelper.accessor('lastName', {
+                header: () => 'Last Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+        ];
+        render(<Table data={[{id: '🆔', firstName: 'first', lastName: 'last'}]} columns={customColumns} />);
+
+        expect(screen.getByRole('columnheader', {name: 'First Name'})).toBeVisible();
+        expect(screen.getByRole('columnheader', {name: 'Last Name'})).toBeVisible();
+
+        expect(screen.getByRole('cell', {name: 'FIRST'})).toBeVisible();
+        expect(screen.getByRole('cell', {name: 'LAST'})).toBeVisible();
+    });
+
+    it('opens the collapsible rows when the user click on the toggle', async () => {
+        const user = userEvent.setup();
+        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                enableSorting: false,
+            }),
+            Table.CollapsibleColumn as ColumnDef<RowData>,
+        ];
+        render(
+            <Table
+                getRowId={({id}) => id}
+                data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
+                getExpandChildren={(row: RowData) => <Fixture row={row} />}
+                columns={customColumns}
+            />
+        );
+
+        // wait for the collapsible icon to show
+        await screen.findByRole('button', {name: 'arrowHeadDown'});
+
+        expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
+
+        await user.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
+        await waitFor(() => {
+            expect(screen.queryByText('Collapsible content: last')).toBeVisible();
+        });
+    });
+
+    it('renders the collapsible button only for rows that can be expanded', async () => {
+        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => (
+            <div>
+                Collapsible content: {row.firstName} {row.lastName}
+            </div>
+        );
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                enableSorting: false,
+            }),
+            Table.CollapsibleColumn as ColumnDef<RowData>,
+        ];
+        render(
+            <Table
+                getRowId={({id}) => id}
+                data={[
+                    {id: '🆔-1', firstName: 'Luke', lastName: 'Skywalker'},
+                    {id: '🆔-2', firstName: 'Lea', lastName: 'Skywalker'},
+                    {id: '🆔-3', firstName: 'Han', lastName: 'Solo'},
+                ]}
+                getExpandChildren={(row: RowData) => (row.lastName === 'Skywalker' ? <Fixture row={row} /> : null)}
+                columns={customColumns}
+            />
+        );
+
+        // wait for the collapsible icon to show
+        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+
+        const allRows = screen.getAllByRole('button', {name: 'arrowHeadDown'});
+        expect(allRows).toHaveLength(2);
+    });
+
+    it('closes the opened collapsible when using the accordion column and the user expand a different row', async () => {
+        const user = userEvent.setup();
+        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                enableSorting: false,
+            }),
+            Table.AccordionColumn as ColumnDef<RowData>,
+        ];
+        render(
+            <Table
+                getRowId={({id}) => id}
+                data={[
+                    {id: '🆔-1', firstName: 'Jack', lastName: 'Russel'},
+                    {id: '🆔-2', firstName: 'Golden', lastName: 'Retriever'},
+                ]}
+                getExpandChildren={(row: RowData) => <Fixture row={row} />}
+                columns={customColumns}
+            />
+        );
+
+        // wait for the collapsible icon to show
+        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+
+        expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
+        expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
+
+        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'arrowHeadDown'}));
+        await waitFor(() => {
+            expect(screen.queryByText('Collapsible content: Russel')).toBeVisible();
+        });
+        expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
+
+        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'arrowHeadDown'}));
+
+        await waitFor(() => {
+            expect(screen.queryByText('Collapsible content: Retriever')).toBeVisible();
+        });
+        expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
+    });
+
+    it('calls an action when user double clicks on a row', async () => {
+        const user = userEvent.setup();
+        const doubleClickSpy = vi.fn();
+        render(
+            <Table<RowData>
+                getRowId={({id}) => id}
+                data={[
+                    {id: '🆔-1', firstName: 'Mario'},
+                    {id: '🆔-2', firstName: 'Luigi'},
+                ]}
+                columns={columns}
+                doubleClickAction={doubleClickSpy}
+            ></Table>
+        );
+        await user.dblClick(screen.getByRole('cell', {name: 'Mario'}));
+        expect(doubleClickSpy).toHaveBeenCalledTimes(1);
+        expect(doubleClickSpy).toHaveBeenCalledWith({id: '🆔-1', firstName: 'Mario'});
+    });
+
+    describe('when multi row selection is enabled', () => {
+        it('displays a checkbox as the first cell of each row', () => {
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', 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 the rows specified in the initial state on mount', () => {
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                    initialState={{
+                        rowSelection: {'🆔-2': {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}},
+                    }}
+                />
+            );
+
+            expect(screen.getByRole('row', {name: /jane doe/i, selected: true})).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();
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', 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('prevents row selection if disableRowSelection is true', async () => {
+            const user = userEvent.setup();
+
+            render(
+                <div>
+                    <Table
+                        getRowId={({id}) => id}
+                        data={[
+                            {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                            {id: '🆔-2', firstName: 'patate', lastName: 'king'},
+                        ]}
+                        columns={columns}
+                        multiRowSelectionEnabled
+                        disableRowSelection
+                    />
+                </div>
+            );
+
+            await user.click(screen.getByRole('row', {name: /patate king/i}));
+            expect(screen.getByRole('row', {name: /patate king/i, selected: false})).toBeInTheDocument();
+            expect(screen.queryByRole('row', {name: /patate king/i, selected: true})).not.toBeInTheDocument();
+
+            await user.click(screen.getByRole('row', {name: /first last/i}));
+            expect(screen.getByRole('row', {name: /first last/i, selected: false})).toBeInTheDocument();
+            expect(screen.queryByRole('row', {name: /first last/i, selected: true})).not.toBeInTheDocument();
+        });
+
+        it('prevents click on checkboxes if disableRowSelection is true', async () => {
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                    disableRowSelection
+                />
+            );
+
+            expect(screen.getByRole('checkbox', {name: /select all/i})).toHaveStyle('pointerEvents: none');
+
+            const rows = screen.getAllByRole('row');
+            rows.forEach(async (row) => {
+                const checkbox = within(row).getByRole('checkbox', {name: /select/i});
+                expect(checkbox).toHaveStyle('pointerEvents: none');
+            });
+        });
+    });
+});

package/src/theme/Theme.tsx

@@ -97,11 +97,11 @@ export const plasmaTheme: MantineThemeOverride = {
                         : `0 0 ${getSize({
                               size,
                               sizes: {
-                                  xs: rem(440),
-                                  sm: rem(550),
-                                  md: rem(800),
-                                  lg: rem(1334),
-                                  xl: rem('85%'),
+                                  xs: rem(432),
+                                  sm: rem(664),
+                                  md: rem(896),
+                                  lg: rem(1120),
+                                  xl: rem('88%'),
                               },
                           })}`,
                     overflow: 'auto',
@@ -276,12 +276,12 @@ export const plasmaTheme: MantineThemeOverride = {
                 },
             },
         },
-        Segmented: {
-            styles: {
-                control: {
-                    zIndex: 'unset',
+        SegmentedControl: {
+            styles: (theme) => ({
+                root: {
+                    backgroundColor: theme.colors.gray[2],
                 },
-            },
+            }),
         },
         Stepper: {
             defaultProps: {