@coveord/plasma-mantine 52.5.0 → 52.6.0

package/src/__tests__/VitestSetup.ts

@@ -1,12 +1,14 @@
-import matchers, {TestingLibraryMatchers} from '@testing-library/jest-dom/matchers';
+import type {TestingLibraryMatchers} from '@testing-library/jest-dom/matchers';
+import matchers from '@testing-library/jest-dom/matchers';
 import {cleanup} from '@testing-library/react';
+import {expect} from 'vitest';
 
-declare global {
-    namespace Vi {
-        interface JestAssertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
-    }
+declare module 'vitest' {
+    interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
 }
+
 expect.extend(matchers);
+
 Object.defineProperty(window, 'matchMedia', {
     writable: true,
     value: vi.fn().mockImplementation((query) => ({

package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx

@@ -108,12 +108,12 @@ export const DateRangePickerInlineCalendar = ({
                     borderTop: `1px solid ${theme.colors.gray[2]}`,
                 })}
             >
-                <Button size="xs" onClick={onCalendarApply}>
-                    Apply
-                </Button>
                 <Button variant="outline" size="xs" onClick={onCancel}>
                     Cancel
                 </Button>
+                <Button size="xs" onClick={onCalendarApply}>
+                    Apply
+                </Button>
             </Group>
         </>
     );

package/src/components/header/Header.tsx

@@ -48,7 +48,11 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
             >
                 <Stack spacing={0}>
                     {breadcrumbs}
-                    <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>
+                    <Title
+                        order={variant === 'page' ? 1 : 3}
+                        color={variant === 'page' ? 'gray.5' : undefined}
+                        sx={{wordBreak: 'break-word'}}
+                    >
                         {otherChildren}
                         {docAnchor}
                     </Title>

package/src/components/header/__tests__/Header.spec.tsx

@@ -10,7 +10,7 @@ describe('Header', () => {
         const header = screen.getByRole('heading');
         expect(header).toMatchInlineSnapshot(`
           <h1
-            class="mantine-Text-root mantine-Title-root mantine-d1yoif"
+            class="mantine-Text-root mantine-Title-root mantine-m67b81"
           >
             child
           </h1>

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         </a>
       </div>
       <h1
-        class="mantine-Text-root mantine-Title-root mantine-d1yoif"
+        class="mantine-Text-root mantine-Title-root mantine-m67b81"
       >
         Title
       </h1>

package/src/components/table/Table.styles.ts

@@ -2,9 +2,10 @@ import {createStyles} from '@mantine/core';
 
 interface TableStylesParams {
     multiRowSelectionEnabled: boolean;
+    disableRowSelection: boolean;
 }
 
-const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled}) => {
+const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {
     const rowBackgroundColor =
         theme.colorScheme === 'dark'
             ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
@@ -44,12 +45,36 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelec
             '& 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`,

package/src/components/table/Table.tsx

@@ -1,13 +1,13 @@
-import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';
+import {Box, Center, Collapse, Loader, Table as MantineTable, Skeleton, SkeletonProps} from '@mantine/core';
 import {useForm} from '@mantine/form';
 import {useDidUpdate} from '@mantine/hooks';
 import {
     ColumnDef,
+    Row,
+    TableState as TanstackTableState,
     defaultColumnSizing,
     flexRender,
     getCoreRowModel,
-    Row,
-    TableState as TanstackTableState,
     useReactTable,
 } from '@tanstack/react-table';
 import debounce from 'lodash.debounce';
@@ -50,6 +50,7 @@ export const Table: TableType = <T,>({
     loading = false,
     doubleClickAction,
     multiRowSelectionEnabled,
+    disableRowSelection,
     onRowSelectionChange,
     options = {},
 }: TableProps<T>) => {
@@ -62,7 +63,7 @@ export const Table: TableType = <T,>({
     const form = useForm<TableFormType>({
         initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
     });
-    const {cx, classes} = useStyles({multiRowSelectionEnabled});
+    const {cx, classes} = useStyles({multiRowSelectionEnabled, disableRowSelection});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
@@ -76,6 +77,7 @@ export const Table: TableType = <T,>({
         enableRowSelection: !loading,
         ...options,
     });
+
     const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);
     table.setOptions((prev) => ({
         ...prev,
@@ -128,9 +130,12 @@ export const Table: TableType = <T,>({
         return (
             <Fragment key={row.id}>
                 <tr
-                    onClick={() => row.toggleSelected()}
+                    onClick={() => (disableRowSelection ? undefined : row.toggleSelected())}
                     onDoubleClick={() => doubleClickAction?.(row.original)}
-                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}
+                    className={cx(classes.row, {
+                        [classes.rowSelected]: isSelected,
+                        [classes.rowUnselectable]: disableRowSelection,
+                    })}
                     aria-selected={isSelected}
                 >
                     {row.getVisibleCells().map((cell) => {
@@ -189,6 +194,7 @@ export const Table: TableType = <T,>({
                     containerRef: outsideClickRef,
                     multiRowSelectionEnabled,
                     getPageCount: table.getPageCount,
+                    disableRowSelection,
                 }}
             >
                 {consumer}

package/src/components/table/Table.types.ts

@@ -2,8 +2,8 @@ import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
     CoreOptions,
-    InitialTableState as TanstackInitialTableState,
     TableOptions,
+    InitialTableState as TanstackInitialTableState,
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
@@ -11,6 +11,7 @@ import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableConsumer} from './TableConsumer';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
@@ -18,7 +19,6 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableConsumer} from './TableConsumer';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -97,6 +97,10 @@ export type TableContextType<TData> = {
      * Whether multi row selection is activated
      */
     multiRowSelectionEnabled: boolean;
+    /**
+     * Whether row selection is enabled or not
+     */
+    disableRowSelection: boolean;
     /**
      * Function that returns the number of pages
      */
@@ -178,6 +182,12 @@ export interface TableProps<T> {
      * @default false
      */
     multiRowSelectionEnabled?: boolean;
+    /**
+     * Whether row selection is enabled or not
+     *
+     * @default false
+     */
+    disableRowSelection?: boolean;
     /**
      * Additional options that can be passed to the table
      */

package/src/components/table/TableDateRangePicker.tsx

@@ -1,8 +1,9 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
 import {Grid, Group, Popover, Text} from '@mantine/core';
 import dayjs from 'dayjs';
-import {FunctionComponent, useState} from 'react';
+import {FunctionComponent} from 'react';
 
+import {useToggle} from '@mantine/hooks';
 import {Button} from '../button';
 import {
     DateRangePickerInlineCalendar,
@@ -33,27 +34,27 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
     presets = {},
     rangeCalendarProps,
 }) => {
-    const [opened, setOpened] = useState(false);
+    const [opened, toggleOpened] = useToggle();
     const {form} = useTable();
 
     const onApply = (dates: DateRangePickerValue) => {
         form.setFieldValue('dateRange', dates);
-        setOpened(false);
+        toggleOpened(false);
     };
     const onCancel = () => {
-        setOpened(false);
+        toggleOpened(false);
     };
 
     const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');
-    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
+    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
 
     return (
         <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
             <Group spacing="xs">
-                <Text span>{formatedRange}</Text>
-                <Popover opened={opened} onChange={setOpened} withinPortal>
+                <Text span>{formattedRange}</Text>
+                <Popover opened={opened} onChange={toggleOpened} withinPortal>
                     <Popover.Target>
-                        <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
+                        <Button variant="outline" color="gray" onClick={() => toggleOpened()} px="xs">
                             <CalendarSize24Px width={24} height={24} />
                         </Button>
                     </Popover.Target>

package/src/components/table/TableHeader.tsx

@@ -30,9 +30,10 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
     children,
     ...others
 }) => {
-    const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();
+    const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();
     const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const selectedRows = getSelectedRows();
+
     return (
         <Grid
             justify="flex-start"
@@ -53,7 +54,12 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
                     order={TableComponentsOrder.MultiSelectInfo}
                 >
                     <Tooltip label="Unselect all">
-                        <Button onClick={clearSelection} variant="subtle" leftIcon={<CrossSize16Px height={16} />}>
+                        <Button
+                            onClick={clearSelection}
+                            variant="subtle"
+                            disabled={disableRowSelection}
+                            leftIcon={<CrossSize16Px height={16} />}
+                        >
                             {selectedRows.length} selected
                         </Button>
                     </Tooltip>

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

@@ -508,5 +508,77 @@ describe('Table', () => {
             await user.click(screen.getByRole('button', {name: /2 selected/i}));
             expect(screen.queryAllByRole('row', {selected: true})).toEqual([]);
         });
+
+        it('prevents row selection if disableRowSelection is true', async () => {
+            const user = userEvent.setup({delay: null});
+
+            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 () => {
+            const user = userEvent.setup({delay: null});
+
+            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');
+            });
+        });
+
+        it('does not display number of selected rows 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
+                    initialState={{
+                        rowSelection: {'🆔-2': {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}},
+                    }}
+                />
+            );
+
+            expect(screen.getByRole('row', {name: /jane doe/i, selected: true})).toBeInTheDocument();
+            expect(screen.queryByRole('button', {name: /1 selected/i})).not.toBeInTheDocument();
+        });
     });
 });

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

@@ -1,5 +1,6 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
+import {act} from 'react-dom/test-utils';
 
 import {Table} from '../Table';
 
@@ -7,6 +8,17 @@ type RowData = {name: string};
 
 const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+const basicTableWithDateRangePicker = (
+    <Table
+        data={[{name: 'fruit'}, {name: 'vegetable'}]}
+        columns={columns}
+        initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
+    >
+        <Table.Header>
+            <Table.DateRangePicker />
+        </Table.Header>
+    </Table>
+);
 
 // Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
 // I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
@@ -20,8 +32,6 @@ vi.mock('@mantine/hooks', async () => {
 });
 
 describe('Table.DateRangePicker', () => {
-    // vi.setTimeout(15000);
-
     beforeEach(() => {
         vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
     });
@@ -30,24 +40,41 @@ describe('Table.DateRangePicker', () => {
         vi.useRealTimers();
     });
 
-    it('displays the intial dates', async () => {
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
-            >
-                <Table.Header>
-                    <Table.DateRangePicker />
-                </Table.Header>
-            </Table>
-        );
+    it('displays the initial dates', async () => {
+        render(basicTableWithDateRangePicker);
 
         await waitFor(() => {
             expect(screen.getByText('Jan 01, 2022 - Jan 07, 2022')).toBeVisible();
         });
     });
 
+    it('opens the dialog when clicking on the calendar button', async () => {
+        // Otherwise, css transition is not triggered in Mantine component
+        vi.useRealTimers();
+        const user = userEvent.setup({delay: null});
+        render(basicTableWithDateRangePicker);
+
+        await screen.findByRole('button', {name: 'calendar'});
+        await act(async () => {
+            await user.click(screen.getByRole('button', {name: 'calendar'}));
+        });
+        expect(screen.queryByRole('dialog')).toBeVisible();
+    });
+
+    it('closes the dialog when clicking back on the calendar button', async () => {
+        // Otherwise, css transition is not triggered in Mantine component
+        vi.useRealTimers();
+        const user = userEvent.setup({delay: null});
+        render(basicTableWithDateRangePicker);
+
+        await screen.findByRole('button', {name: 'calendar'});
+        await act(async () => {
+            await user.click(screen.getByRole('button', {name: 'calendar'}));
+            await user.click(screen.getByRole('button', {name: 'calendar'}));
+        });
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
     it('displays the selected date range in the table', async () => {
         const user = userEvent.setup({delay: null});
         const onChange = vi.fn();

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',