@coveord/plasma-mantine 53.1.4 → 54.0.0

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

@@ -1,7 +1,8 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, waitFor} from '@test-utils';
+import {render, screen, userEvent} from '@test-utils';
 
 import {Table} from '../Table';
+import {useTable} from '../use-table';
 
 type RowData = {name: string};
 
@@ -9,88 +10,33 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.Predicate', () => {
-    it('calls onMount with the initial value', async () => {
-        const onMount = vi.fn();
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                onMount={onMount}
-                initialState={{predicates: {rank: 'second'}}}
-            >
-                <Table.Header>
-                    <Table.Predicate
-                        id="rank"
-                        data={[
-                            {value: 'first', label: 'First'},
-                            {value: 'second', label: 'Second'},
-                        ]}
-                    />
-                </Table.Header>
-            </Table>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('textbox', {name: 'rank'})).toHaveValue('Second');
-        });
-        expect(onMount).toHaveBeenCalledWith(expect.objectContaining({predicates: {rank: 'second'}}));
-    });
-
-    it('calls onChange when changing the predicate', async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
-                <Table.Header data-testid="table-header">
-                    <Table.Predicate
-                        id="rank"
-                        data={[
-                            {value: 'first', label: 'First'},
-                            {value: 'second', label: 'Second'},
-                        ]}
-                    />
-                </Table.Header>
-            </Table>,
-        );
-
-        await user.click(screen.getByRole('textbox', {name: 'rank'}));
-        await user.click(screen.getByRole('option', {name: 'First'}));
-
-        expect(screen.getByRole('textbox', {name: 'rank'})).toHaveValue('First');
-        await waitFor(() => {
-            expect(onChange).toHaveBeenCalledTimes(1);
-        });
-        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({predicates: {rank: 'first'}}));
-    });
-
     it('goes back to the first page when changing the predicate', async () => {
         const user = userEvent.setup();
-        const onChange = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
-                <Table.Header>
-                    <Table.Predicate
-                        id="rank"
-                        data={[
-                            {value: 'first', label: 'First'},
-                            {value: 'second', label: 'Second'},
-                        ]}
-                    />
-                </Table.Header>
-                <Table.Footer>
-                    <Table.PerPage />
-                    <Table.Pagination totalPages={2} />
-                </Table.Footer>
-            </Table>,
-        );
+        const data = [{name: 'fruit'}, {name: 'vegetable'}];
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {pagination: {pageIndex: 1}, totalEntries: 52}});
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Header>
+                        <Table.Predicate
+                            id="rank"
+                            data={[
+                                {value: 'first', label: 'First'},
+                                {value: 'second', label: 'Second'},
+                            ]}
+                        />
+                    </Table.Header>
+                    <Table.Footer>
+                        <Table.PerPage />
+                        <Table.Pagination />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
+        expect(screen.getByRole('button', {name: '2', current: 'page'})).toBeVisible();
         await user.click(screen.getByRole('textbox', {name: 'rank'}));
         await user.click(screen.getByRole('option', {name: 'First'}));
-        expect(screen.getByRole('textbox', {name: 'rank'})).toHaveValue('First');
-        await waitFor(() => {
-            expect(onChange).toHaveBeenCalledTimes(1);
-        });
-        expect(onChange).toHaveBeenCalledWith(
-            expect.objectContaining({predicates: {rank: 'first'}, pagination: {pageIndex: 0, pageSize: 50}}),
-        );
+        expect(screen.getByRole('button', {name: '1', current: 'page'})).toBeVisible();
     });
 });

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

@@ -1,7 +1,8 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, waitFor} from '@test-utils';
+import {render, screen, userEvent} from '@test-utils';
 
 import {Table} from '../Table';
+import {useTable} from '../use-table';
 
 type RowData = {name: string; type: 'fruit' | 'vegetable'; colors: string[]};
 const columnHelper = createColumnHelper<RowData>();
@@ -20,7 +21,11 @@ describe('Th', () => {
             {name: 'apple', type: 'fruit', colors: ['red', 'green']},
             {name: 'potato', type: 'vegetable', colors: ['brown', 'blue', 'yellow']},
         ];
-        render(<Table data={data} columns={columns} />);
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return <Table store={store} data={data} columns={columns} />;
+        };
+        render(<Fixture />);
 
         const headers = screen.getAllByRole('columnheader');
         expect(headers[0]).toHaveAccessibleName(/name doubleArrowHead/i);
@@ -33,22 +38,22 @@ describe('Th', () => {
             {name: 'apple', type: 'fruit', colors: ['red', 'green']},
             {name: 'potato', type: 'vegetable', colors: ['brown', 'blue', 'yellow']},
         ];
-        const onChange = vi.fn();
-        render(<Table data={data} columns={columns} onChange={onChange} />);
-
-        await user.click(screen.getByRole('columnheader', {name: /name doubleArrowHead/i}));
-        await waitFor(() => {
-            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
-        });
-
-        await user.click(screen.getByRole('columnheader', {name: /name arrowUp/i}));
-        await waitFor(() => {
-            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: true}]}));
-        });
-
-        await user.click(screen.getByRole('columnheader', {name: /name arrowDown/i}));
-        await waitFor(() => {
-            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
-        });
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return <Table store={store} data={data} columns={columns} />;
+        };
+        render(<Fixture />);
+
+        const unsortedRowHeader = screen.getByRole('columnheader', {name: /name doubleArrowHead/i});
+        expect(unsortedRowHeader).toBeVisible();
+        await user.click(unsortedRowHeader);
+
+        const sortedAscRowHeader = screen.getByRole('columnheader', {name: /name arrowUp/i});
+        expect(sortedAscRowHeader).toBeVisible();
+        await user.click(sortedAscRowHeader);
+
+        const sortedDescRowHeader = screen.getByRole('columnheader', {name: /name arrowDown/i});
+        expect(sortedDescRowHeader).toBeVisible();
+        await user.click(sortedDescRowHeader);
     });
 });

package/src/components/table/index.ts

@@ -1,11 +1,5 @@
 export {flexRender as renderTableCell} from '@tanstack/react-table';
 export * from './Table';
-export {
-    type InitialTableState,
-    type TableLayout,
-    type TableProps,
-    type TableState,
-    type onTableChangeEvent,
-} from './Table.types';
-export {useTable} from './TableContext';
-export {type TableLayoutProps} from './layouts/TableLayouts';
+export {type TableLayout, type TableProps, type TableLayoutProps, type TableAction} from './Table.types';
+export {useTable, type TableState, type TableStore, type UseTableOptions} from './use-table';
+export {useTableContext} from './TableContext';

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

@@ -1,13 +1,12 @@
 import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';
 import {TableComponentsOrder} from '../Table';
-import {useTable} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export const TableLayoutControl = () => {
-    const {form, layouts} = useTable();
+    const {layouts, store} = useTableContext();
     return layouts.length > 1 ? (
         <Grid.Col order={TableComponentsOrder.LayoutControl} span="content">
             <SegmentedControl
-                color="action"
                 data={layouts.map(({displayName, Icon}) => ({
                     value: displayName,
                     label: (
@@ -22,7 +21,8 @@ export const TableLayoutControl = () => {
                         </Center>
                     ),
                 }))}
-                {...form.getInputProps('layout')}
+                value={store.state.layout === null ? layouts[0].displayName : store.state.layout}
+                onChange={store.setLayout}
             />
         </Grid.Col>
     ) : null;

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

@@ -1,27 +1,5 @@
-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,
 };