@coveord/plasma-mantine 52.27.3 → 53.0.0

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

@@ -104,7 +104,7 @@ describe('Table.Filter', () => {
 
         const Fixture = () => {
             const {clearFilters} = useTable();
-            return <Button data-testId="clear-button" onClick={clearFilters} />;
+            return <Button data-testid="clear-button" onClick={clearFilters} />;
         };
 
         render(

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

@@ -1,7 +1,9 @@
 import {ColumnDef, createColumnHelper, getPaginationRowModel} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
+import {useState} from 'react';
 
 import {Table} from '../Table';
+import {useTable} from '../TableContext';
 
 type RowData = {name: string};
 
@@ -134,4 +136,79 @@ describe('Table.Pagination', () => {
         );
         expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
     });
+
+    it('changes page when the current page is greater than the total number of pages', async () => {
+        const user = userEvent.setup();
+        const onChangePage = vi.fn();
+        const Fixture = () => {
+            const {state} = useTable();
+            const [totalPages, setTotalPages] = useState(state.pagination.pageIndex + 1);
+            const removeAPage = () => setTotalPages(totalPages - 1);
+
+            return (
+                <>
+                    <button data-testid="remove-page" onClick={removeAPage}>
+                        change total pages
+                    </button>
+                    <Table.Pagination totalPages={totalPages} onPageChange={onChangePage} />
+                </>
+            );
+        };
+        render(
+            <Table data={[{name: 'grains'}]} columns={columns} initialState={{pagination: {pageSize: 1, pageIndex: 2}}}>
+                <Table.Footer>
+                    <Fixture />
+                </Table.Footer>
+            </Table>,
+        );
+
+        expect(screen.getByRole('cell', {name: 'grains'})).toBeVisible();
+        let buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(6);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+        expect(buttons[1]).toHaveAccessibleName('previous page');
+        expect(buttons[2]).toHaveAccessibleName('1');
+        expect(buttons[3]).toHaveAccessibleName('2');
+        expect(buttons[4]).toHaveAccessibleName('3');
+        expect(buttons[5]).toHaveAccessibleName('next page');
+
+        // remove a page
+        await user.click(screen.getByTestId('remove-page'));
+
+        // The page is 2, but the index is 1
+        expect(onChangePage).toHaveBeenCalledWith(1);
+
+        buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(5);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+        expect(buttons[1]).toHaveAccessibleName('previous page');
+        expect(buttons[2]).toHaveAccessibleName('1');
+        expect(buttons[3]).toHaveAccessibleName('2');
+        expect(buttons[4]).toHaveAccessibleName('next page');
+
+        // remove a page
+        await user.click(screen.getByTestId('remove-page'));
+
+        // The page is 1, but the index is 0
+        expect(onChangePage).toHaveBeenCalledWith(0);
+
+        buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(4);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+        expect(buttons[1]).toHaveAccessibleName('previous page');
+        expect(buttons[2]).toHaveAccessibleName('1');
+        expect(buttons[3]).toHaveAccessibleName('next page');
+
+        onChangePage.mockReset();
+
+        // remove a page
+        await user.click(screen.getByTestId('remove-page'));
+
+        // There is no more pages
+        expect(onChangePage).not.toHaveBeenCalled();
+
+        buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(1);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+    });
 });

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

@@ -31,7 +31,7 @@ describe('Table.Predicate', () => {
         );
 
         await waitFor(() => {
-            expect(screen.getByRole('searchbox', {name: 'rank'})).toHaveValue('Second');
+            expect(screen.getByRole('textbox', {name: 'rank'})).toHaveValue('Second');
         });
         expect(onMount).toHaveBeenCalledWith(expect.objectContaining({predicates: {rank: 'second'}}));
     });
@@ -53,10 +53,10 @@ describe('Table.Predicate', () => {
             </Table>,
         );
 
-        await user.click(screen.getByRole('searchbox', {name: 'rank'}));
+        await user.click(screen.getByRole('textbox', {name: 'rank'}));
         await user.click(screen.getByRole('option', {name: 'First'}));
 
-        expect(screen.getByRole('searchbox', {name: 'rank'})).toHaveValue('First');
+        expect(screen.getByRole('textbox', {name: 'rank'})).toHaveValue('First');
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledTimes(1);
         });
@@ -83,9 +83,9 @@ describe('Table.Predicate', () => {
                 </Table.Footer>
             </Table>,
         );
-        await user.click(screen.getByRole('searchbox', {name: 'rank'}));
+        await user.click(screen.getByRole('textbox', {name: 'rank'}));
         await user.click(screen.getByRole('option', {name: 'First'}));
-        expect(screen.getByRole('searchbox', {name: 'rank'})).toHaveValue('First');
+        expect(screen.getByRole('textbox', {name: 'rank'})).toHaveValue('First');
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledTimes(1);
         });

package/src/components/table/index.ts

@@ -8,4 +8,4 @@ export {
     type onTableChangeEvent,
 } from './Table.types';
 export {useTable} from './TableContext';
-export {type TableLayoutProps} from './layouts/RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182
+export {type TableLayoutProps} from './layouts/TableLayouts';

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

@@ -1,5 +1,5 @@
 import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';
-import {TableComponentsOrder} from '../Table.styles';
+import {TableComponentsOrder} from '../Table';
 import {useTable} from '../TableContext';
 
 export const TableLayoutControl = () => {
@@ -8,8 +8,8 @@ export const TableLayoutControl = () => {
         <Grid.Col order={TableComponentsOrder.LayoutControl} span="content">
             <SegmentedControl
                 color="action"
-                data={layouts.map(({name, icon: Icon}) => ({
-                    value: name,
+                data={layouts.map(({displayName, Icon}) => ({
+                    value: displayName,
                     label: (
                         <Center>
                             {Icon ? (
@@ -18,7 +18,7 @@ export const TableLayoutControl = () => {
                                     <Space w="xs" />
                                 </>
                             ) : null}
-                            <Box>{name}</Box>
+                            <Box>{displayName}</Box>
                         </Center>
                     ),
                 }))}

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

@@ -1,4 +1,26 @@
-import {RowLayout} from './RowLayout';
+import {Table} from '@tanstack/table-core';
+import {ReactNode} from 'react';
+import {RowLayout} from './row-layout/RowLayout';
+
+export interface TableLayoutProps<T = unknown> {
+    table: Table<T>;
+    loading?: boolean;
+    /**
+     * Action passed when user double-clicks on a row
+     */
+    doubleClickAction?: (datum: T) => void;
+    /**
+     * Function that generates the expandable content of a row
+     * Return null for rows that don't need to be expandable
+     *
+     * @param datum the row for which the children should be generated.
+     */
+    getExpandChildren?: (datum: T) => ReactNode;
+    /**
+     * Whether clicking on a selected row will deselect the row or not.
+     */
+    keepSelection?: boolean;
+}
 
 export const TableLayouts = {
     Rows: RowLayout,

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

@@ -386,6 +386,8 @@ describe('RowLayout', () => {
         });
 
         it('prevents click on checkboxes if disableRowSelection is true', async () => {
+            const user = userEvent.setup();
+            const onClick = vi.fn();
             render(
                 <Table
                     getRowId={({id}) => id}
@@ -398,13 +400,14 @@ describe('RowLayout', () => {
                     disableRowSelection
                 />,
             );
-
-            expect(screen.getByRole('checkbox', {name: /select all/i})).toHaveStyle('pointerEvents: none');
+            await user.click(screen.getByRole('checkbox', {name: /select all/i}));
+            expect(onClick).not.toHaveBeenCalled();
 
             const rows = screen.getAllByRole('row');
             rows.forEach(async (row) => {
-                const checkbox = within(row).getByRole('checkbox', {name: /select/i});
-                expect(checkbox).toHaveStyle('pointerEvents: none');
+                await user.click(within(row).getByRole('checkbox', {name: /select/i}));
+
+                expect(onClick).not.toHaveBeenCalled();
             });
         });
     });

package/src/components/table/layouts/row-layout/RowLayout.module.css

@@ -0,0 +1,63 @@
+.headerRow {
+    &[data-selectable='true'] input[type='checkbox'] {
+        border-color: var(--mantine-color-gray-4);
+        pointer-events: auto;
+        cursor: default;
+    }
+
+    &[data-selectable='false'] input[type='checkbox'] {
+        background-color: var(--mantine-color-gray-2);
+        border-color: var(--mantine-color-gray-3);
+        pointer-events: none;
+        cursor: not-allowed;
+        & + svg {
+            color: var(--mantine-color-gray-5);
+        }
+    }
+}
+
+.row {
+    overflow-wrap: anywhere;
+    & td:first-of-type {
+        padding-left: 40px;
+    }
+    @mixin hover {
+        background-color: var(--mantine-color-gray-1);
+    }
+
+    &[data-selectable='false'] input[type='checkbox'] {
+        background-color: var(--mantine-color-gray-2);
+        border-color: var(--mantine-color-gray-3);
+        pointer-events: none;
+        cursor: not-allowed;
+        &:checked + svg {
+            color: var(--mantine-color-gray-5);
+        }
+    }
+    &[data-selected='true'] {
+        &[data-multi-selection='false'] {
+            background-color: var(--mantine-color-gray-1);
+        }
+        &[data-multi-selection='true'] {
+            background-color: transparent;
+        }
+    }
+
+    &[data-collapsible-cell='true'] {
+        text-align: right;
+        padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm) !important;
+    }
+}
+
+.cell {
+    vertical-align: middle;
+    /* We must use height instead of minHeight here, otherwise it doesn’t apply*/
+    height: 56px;
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    border-bottom: rem(1) solid var(--mantine-color-gray-3);
+}
+
+.collapsibleWrapper {
+    border-bottom: rem(1) solid var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-1);
+}

package/src/components/table/layouts/row-layout/RowLayout.tsx

@@ -0,0 +1,39 @@
+import {factory, Factory, StylesApiProps, useProps, useStyles} from '@mantine/core';
+import {ReactNode} from 'react';
+import classes from './RowLayout.module.css';
+import {TableLayout} from '../../Table.types';
+import {RowLayoutBody, RowLayoutBodyStylesNames} from './RowLayoutBody';
+import {RowLayoutProvider} from './RowLayoutContext';
+import {RowLayoutHeader, RowLayoutHeaderStyleNames} from './RowLayoutHeader';
+import {RowLayoutIcon, RowLayoutIconStylesNames} from './RowLayoutIcon';
+
+type RowLayoutStylesNames = RowLayoutHeaderStyleNames | RowLayoutIconStylesNames | RowLayoutBodyStylesNames;
+export interface RowLayoutProps extends StylesApiProps<RowLayoutFactory> {
+    children: ReactNode;
+}
+
+export type RowLayoutFactory = Factory<{
+    props: RowLayoutProps;
+    stylesNames: RowLayoutStylesNames;
+    staticComponents: TableLayout;
+}>;
+const defaultProps: Partial<RowLayoutProps> = {};
+
+export const RowLayout = factory<RowLayoutFactory>((props, ref) => {
+    const {children, styles, classNames, unstyled} = useProps('PlasmaRowLayout', defaultProps, props);
+    const getStyles = useStyles<RowLayoutFactory>({
+        name: 'PlasmaRowLayout',
+        classes,
+        props,
+        styles,
+        classNames,
+        unstyled,
+    });
+
+    return <RowLayoutProvider value={{getStyles}}>{children}</RowLayoutProvider>;
+});
+
+RowLayout.Body = RowLayoutBody;
+RowLayout.Header = RowLayoutHeader;
+RowLayout.Icon = RowLayoutIcon;
+RowLayout.displayName = 'Rows';

package/src/components/table/layouts/{RowLayout.tsx → row-layout/RowLayoutBody.tsx}

@@ -1,50 +1,47 @@
-import {ListSize16Px} from '@coveord/plasma-react-icons';
-import {Box, Collapse} from '@mantine/core';
+import {Box, BoxProps, Collapse, Factory, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
 import {flexRender} from '@tanstack/react-table';
 import {defaultColumnSizing} from '@tanstack/table-core';
-import {Fragment, type MouseEvent} from 'react';
-import {TableLayout} from '../Table.types';
-import {useTable} from '../TableContext';
-import {TableCollapsibleColumn} from '../table-column/TableCollapsibleColumn';
-import {TableSelectableColumn} from '../table-column/TableSelectableColumn';
-import {Th} from '../table-header/Th';
-import {TableLoading} from '../table-loading/TableLoading';
-import useStyles from './RowLayout.styles';
-import {TableLayoutProps} from './RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182
+import {ForwardedRef, Fragment, type MouseEvent} from 'react';
+import {CustomComponentThemeExtend, identity} from '../../../../utils';
+import {TableCollapsibleColumn} from '../../table-column/TableCollapsibleColumn';
+import {TableSelectableColumn} from '../../table-column/TableSelectableColumn';
+import {TableLoading} from '../../table-loading/TableLoading';
+import {useTable} from '../../TableContext';
+import {TableLayoutProps} from '../TableLayouts';
+import {useRowLayout} from './RowLayoutContext';
 
-const RowLayoutHeader = <T,>({table, classNames, styles, unstyled}: TableLayoutProps<T>) => {
-    const {multiRowSelectionEnabled, disableRowSelection} = useTable();
-    const {classes} = useStyles(
-        {disableRowSelection, multiRowSelectionEnabled},
-        {name: 'RowLayout', classNames, styles, unstyled},
-    );
-    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}</>;
-};
+export type RowLayoutBodyStylesNames = 'row' | 'cell' | 'collapsibleRow' | 'collapsibleWrapper';
 
-const RowLayoutBody = <T,>({
-    table,
-    doubleClickAction,
-    getExpandChildren,
-    loading,
-    keepSelection,
-    classNames,
-    styles,
-    unstyled,
-    ...others
-}: TableLayoutProps<T>) => {
-    const {multiRowSelectionEnabled, disableRowSelection} = useTable();
-    const {classes, cx} = useStyles(
-        {disableRowSelection, multiRowSelectionEnabled},
-        {name: 'RowLayout', classNames, styles, unstyled},
-    );
+export interface RowLayoutBodyProps<T>
+    extends BoxProps,
+        TableLayoutProps<T>,
+        CompoundStylesApiProps<RowLayoutBodyFactory> {}
+
+export type RowLayoutBodyFactory = Factory<{
+    props: RowLayoutBodyProps<unknown>;
+    ref: HTMLTableRowElement;
+    stylesNames: RowLayoutBodyStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<RowLayoutBodyProps<unknown>> = {};
 
+export const RowLayoutBody = <T,>(props: RowLayoutBodyProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {
+    const ctx = useRowLayout();
+    const {
+        table,
+        doubleClickAction,
+        getExpandChildren,
+        loading,
+        keepSelection,
+        classNames,
+        className,
+        styles,
+        style,
+        ...others
+    } = useProps('RowLayoutBody', defaultProps as RowLayoutBodyProps<T>, props);
+    const {multiRowSelectionEnabled, disableRowSelection} = useTable();
     const toggleCollapsible = (el: HTMLTableRowElement) => {
         const cell = el.children[el.children.length - 1] as HTMLTableCellElement;
         cell.querySelector('button').click();
@@ -68,12 +65,13 @@ const RowLayoutBody = <T,>({
                 <tr
                     onClick={onClick}
                     onDoubleClick={() => doubleClickAction?.(row.original)}
-                    className={cx(classes.row, {
-                        [classes.rowSelected]: isSelected,
-                        [classes.rowUnselectable]: disableRowSelection,
-                    })}
+                    data-selectable={!disableRowSelection}
+                    data-selected={isSelected}
+                    data-multi-selection={multiRowSelectionEnabled}
                     aria-selected={isSelected}
                     data-testid={row.id}
+                    {...ctx.getStyles('row', {classNames, className, styles, style})}
+                    {...others}
                 >
                     {row.getVisibleCells().map((cell) => {
                         const columnSizing = {
@@ -89,18 +87,19 @@ const RowLayoutBody = <T,>({
                                 row.getToggleSelectedHandler();
                             }
                         };
+
                         return (
                             <td
                                 key={cell.id}
                                 data-testid={cell.id}
+                                className={ctx.getStyles('cell', {classNames, styles}).className}
                                 style={{
-                                    width: columnSizing.size ?? 'auto',
-                                    minWidth: columnSizing.minSize,
-                                    maxWidth: columnSizing.maxSize,
+                                    width: `${columnSizing.size}px` ?? 'auto',
+                                    minWidth: `${columnSizing.minSize}px`,
+                                    maxWidth: `${columnSizing.maxSize}px`,
+                                    ...ctx.getStyles('cell', {classNames, styles}).style,
                                 }}
-                                className={cx(classes.cell, {
-                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
-                                })}
+                                data-collapsible-cell={cell.column.id === TableCollapsibleColumn.id}
                                 onClick={onCollapsibleCellClick}
                             >
                                 <TableLoading visible={loading}>
@@ -111,7 +110,7 @@ const RowLayoutBody = <T,>({
                     })}
                 </tr>
                 {rowChildren ? (
-                    <tr>
+                    <tr {...ctx.getStyles('collapsibleRow', {classNames, styles})}>
                         <td
                             colSpan={table.getAllColumns().length}
                             style={{
@@ -119,7 +118,7 @@ const RowLayoutBody = <T,>({
                             }}
                         >
                             <Collapse in={row.getIsExpanded()}>
-                                <Box className={classes.collapsible} px="sm" py="xs">
+                                <Box {...ctx.getStyles('collapsibleWrapper', {classNames, styles})} px="sm" py="xs">
                                     {rowChildren}
                                 </Box>
                             </Collapse>
@@ -133,9 +132,4 @@ const RowLayoutBody = <T,>({
     return <>{rows}</>;
 };
 
-export const RowLayout: TableLayout = {
-    name: 'Rows',
-    icon: ListSize16Px,
-    Header: RowLayoutHeader,
-    Body: RowLayoutBody,
-};
+RowLayoutBody.extend = identity as CustomComponentThemeExtend<RowLayoutBodyFactory>;

package/src/components/table/layouts/row-layout/RowLayoutContext.tsx

@@ -0,0 +1,9 @@
+import {createSafeContext, GetStylesApi} from '@mantine/core';
+import {type RowLayoutFactory} from './RowLayout';
+
+interface RowLayoutContextType {
+    getStyles: GetStylesApi<RowLayoutFactory>;
+}
+export const [RowLayoutProvider, useRowLayout] = createSafeContext<RowLayoutContextType>(
+    'RowLayout was not found in the component tree',
+);

package/src/components/table/layouts/row-layout/RowLayoutHeader.tsx

@@ -0,0 +1,51 @@
+import {BoxProps, Factory, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {ForwardedRef} from 'react';
+import {CustomComponentThemeExtend, identity} from '../../../../utils';
+import {Th} from '../../table-header/Th';
+import {useTable} from '../../TableContext';
+import {type TableLayoutProps} from '../TableLayouts';
+import {RowLayoutBodyFactory} from './RowLayoutBody';
+import {useRowLayout} from './RowLayoutContext';
+
+export type RowLayoutHeaderStyleNames = 'headerRow';
+
+export interface RowLayoutHeaderProps<T>
+    extends BoxProps,
+        TableLayoutProps<T>,
+        CompoundStylesApiProps<RowLayoutBodyFactory> {}
+
+type RowLayoutHeaderFactory = Factory<{
+    props: RowLayoutHeaderProps<unknown>;
+    ref: HTMLTableRowElement;
+    stylesNames: RowLayoutHeaderStyleNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<RowLayoutHeaderProps<unknown>> = {};
+
+export const RowLayoutHeader = <T,>(props: RowLayoutHeaderProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {
+    const ctx = useRowLayout();
+    const {table, getExpandChildren, loading, className, style, classNames, styles, ...others} = useProps(
+        'RowLayoutHeader',
+        defaultProps as RowLayoutHeaderProps<T>,
+        props,
+    );
+    const {multiRowSelectionEnabled, disableRowSelection} = useTable();
+
+    const headers = table.getHeaderGroups().map((headerGroup) => (
+        <tr
+            key={headerGroup.id}
+            data-selectable={!disableRowSelection}
+            data-multi-selection={multiRowSelectionEnabled}
+            {...ctx.getStyles('headerRow', {className, classNames, styles, style})}
+            {...others}
+        >
+            {headerGroup.headers.map((columnHeader) => (
+                <Th key={columnHeader.id} header={columnHeader} />
+            ))}
+        </tr>
+    ));
+    return <>{headers}</>;
+};
+RowLayoutHeader.extend = identity as CustomComponentThemeExtend<RowLayoutHeaderFactory>;

package/src/components/table/layouts/row-layout/RowLayoutIcon.tsx

@@ -0,0 +1,27 @@
+import {Icon as IconType, ListSize16Px} from '@coveord/plasma-react-icons';
+import {factory, Factory, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {useRowLayout} from './RowLayoutContext';
+
+export type RowLayoutIconStylesNames = 'icon';
+export interface RowLayoutIconProps extends CompoundStylesApiProps<RowLayoutIconFactory> {
+    icon: IconType;
+}
+
+export type RowLayoutIconFactory = Factory<{
+    props: RowLayoutIconProps;
+    ref: SVGSVGElement;
+    stylesNames: RowLayoutIconStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<RowLayoutIconProps> = {
+    icon: ListSize16Px,
+};
+
+export const RowLayoutIcon = factory<RowLayoutIconFactory>((props, ref) => {
+    const ctx = useRowLayout();
+    const {icon: Icon, classNames, styles} = useProps('RowLayoutIcon', defaultProps, props);
+
+    return <Icon ref={ref} {...ctx.getStyles('icon', {styles, classNames})} />;
+});