@coveord/plasma-mantine 49.3.5 → 49.4.0

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

@@ -3,9 +3,9 @@ import {render, screen, userEvent, waitFor, within} from '@test-utils';
 import {FunctionComponent} from 'react';
 
 import {Table} from '../Table';
-import {useTable} from '../useTable';
+import {useTable} from '../TableContext';
 
-type RowData = {firstName: string; lastName?: string};
+type RowData = {id: string; firstName: string; lastName?: string};
 
 const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [
@@ -15,7 +15,13 @@ const columns: Array<ColumnDef<RowData>> = [
 
 describe('Table', () => {
     it('renders the data', () => {
-        render(<Table data={[{firstName: 'first', lastName: 'last'}]} columns={columns} />);
+        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();
@@ -45,7 +51,7 @@ describe('Table', () => {
                 enableSorting: false,
             }),
         ];
-        render(<Table data={[{firstName: 'first', lastName: 'last'}]} columns={customColumns} />);
+        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();
@@ -141,7 +147,8 @@ describe('Table', () => {
         ];
         render(
             <Table
-                data={[{firstName: 'first', lastName: 'last'}]}
+                getRowId={({id}) => id}
+                data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
                 getExpandChildren={(row: RowData) => <Fixture row={row} />}
                 columns={customColumns}
             />
@@ -172,10 +179,11 @@ describe('Table', () => {
         ];
         render(
             <Table
+                getRowId={({id}) => id}
                 data={[
-                    {firstName: 'Luke', lastName: 'Skywalker'},
-                    {firstName: 'Lea', lastName: 'Skywalker'},
-                    {firstName: 'Han', lastName: 'Solo'},
+                    {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}
@@ -200,9 +208,10 @@ describe('Table', () => {
         ];
         render(
             <Table
+                getRowId={({id}) => id}
                 data={[
-                    {firstName: 'Jack', lastName: 'Russel'},
-                    {firstName: 'Golden', lastName: 'Retriever'},
+                    {id: '🆔-1', firstName: 'Jack', lastName: 'Russel'},
+                    {id: '🆔-2', firstName: 'Golden', lastName: 'Retriever'},
                 ]}
                 getExpandChildren={(row: RowData) => <Fixture row={row} />}
                 columns={customColumns}
@@ -234,14 +243,18 @@ describe('Table', () => {
         const doubleClickSpy = vi.fn();
         render(
             <Table<RowData>
-                data={[{firstName: 'Mario'}, {firstName: 'Luigi'}]}
+                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({firstName: 'Mario'});
+        expect(doubleClickSpy).toHaveBeenCalledWith({id: '🆔-1', firstName: 'Mario'});
     });
 
     it('reset row selection when user click outside the table', async () => {
@@ -250,9 +263,10 @@ describe('Table', () => {
             <div>
                 <div>I'm a header</div>
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'first', lastName: 'last'},
-                        {firstName: 'patate', lastName: 'king'},
+                        {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                        {id: '🆔-2', firstName: 'patate', lastName: 'king'},
                     ]}
                     columns={columns}
                 />
@@ -276,9 +290,10 @@ describe('Table', () => {
         it('displays a checkbox as the first cell of each row', () => {
             render(
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'John', lastName: 'Smith'},
-                        {firstName: 'Jane', lastName: 'Doe'},
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled
@@ -293,13 +308,33 @@ describe('Table', () => {
             });
         });
 
+        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({delay: null});
             render(
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'John', lastName: 'Smith'},
-                        {firstName: 'Jane', lastName: 'Doe'},
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled
@@ -321,9 +356,10 @@ describe('Table', () => {
                 <div>
                     <div>I'm a header</div>
                     <Table
+                        getRowId={({id}) => id}
                         data={[
-                            {firstName: 'first', lastName: 'last'},
-                            {firstName: 'patate', lastName: 'king'},
+                            {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                            {id: '🆔-2', firstName: 'patate', lastName: 'king'},
                         ]}
                         columns={columns}
                         multiRowSelectionEnabled
@@ -348,9 +384,10 @@ describe('Table', () => {
             const user = userEvent.setup({delay: null});
             render(
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'John', lastName: 'Smith'},
-                        {firstName: 'Jane', lastName: 'Doe'},
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled

package/src/components/table/index.ts

@@ -1,3 +1,3 @@
 export * from './Table';
-export {type onTableChangeEvent} from './TableContext';
-export * from './useTable';
+export {useTable} from './TableContext';
+export {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';

package/src/components/table/useRowSelection.ts

@@ -1,29 +1,48 @@
-import {functionalUpdate, Table} from '@tanstack/table-core';
-import {useState} from 'react';
+import {useClickOutside} from '@mantine/hooks';
+import {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';
+import isEqual from 'fast-deep-equal';
 
-export const useRowSelection = <T>(table: Table<T>) => {
-    const [rowSelection, setRowSelection] = useState<Record<string, T>>({});
+import {RowSelectionWithData, TableProps, TableState} from './Table.types';
+
+export const useRowSelection = <T>(
+    table: Table<T>,
+    {multiRowSelectionEnabled}: Pick<TableProps<T>, 'multiRowSelectionEnabled'>
+) => {
+    const outsideClickRef = useClickOutside(() => {
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
+    });
 
     table.setOptions((prev) => ({
         ...prev,
         onRowSelectionChange: (rowSelectionUpdater) => {
             table.setState((old) => {
-                const selectedRowsIds = functionalUpdate(rowSelectionUpdater, old['rowSelection']);
-                setRowSelection((current) => {
-                    const currentRowsById = table.getRowModel().rowsById;
-                    return Object.keys(selectedRowsIds).reduce((memo, rowId) => {
-                        if (current[rowId]) {
-                            memo[rowId] = current[rowId];
-                        } else {
-                            memo[rowId] = currentRowsById[rowId].original;
+                const newRowSelection = functionalUpdate(
+                    rowSelectionUpdater,
+                    old['rowSelection']
+                ) as RowSelectionWithData<T>;
+
+                if (isEqual(old['rowSelection'], newRowSelection)) {
+                    return old;
+                }
+
+                const rows = table.getRowModel().rowsById;
+
+                Object.keys(newRowSelection).forEach((rowId) => {
+                    if (newRowSelection[rowId] === true) {
+                        if (!rows[rowId]) {
+                            console.error(
+                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'
+                            );
                         }
-                        return memo;
-                    }, {} as Record<string, T>);
+                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);
+                    }
                 });
 
                 return {
                     ...old,
-                    rowSelection: selectedRowsIds,
+                    rowSelection: newRowSelection as RowSelectionState,
                 };
             });
         },
@@ -33,13 +52,9 @@ export const useRowSelection = <T>(table: Table<T>) => {
         table.resetRowSelection(true);
     };
 
-    const getSelectedRows = () => Object.values(rowSelection);
+    const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);
 
     const getSelectedRow = () => getSelectedRows()[0] ?? null;
 
-    return {
-        clearSelection,
-        getSelectedRow,
-        getSelectedRows,
-    };
+    return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};
 };

package/src/index.ts

@@ -15,6 +15,8 @@ export {
     Header,
     Table,
     type TableProps,
+    type TableState,
+    type InitialTableState,
     type HeaderProps,
     Modal,
     Button,

package/dist/cjs/components/table/useTable.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useTable", {
-    enumerable: true,
-    get: function() {
-        return useTable;
-    }
-});
-var _react = require("react");
-var _tableContext = require("./TableContext");
-var useTable = function() {
-    var ctx = (0, _react.useContext)(_tableContext.TableContext);
-    if (ctx === null) {
-        throw new Error("useTable must be used inside of a TableContext.Provider");
-    }
-    return ctx;
-};
-
-//# sourceMappingURL=useTable.js.map

package/dist/cjs/components/table/useTable.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/table/useTable.tsx"],"sourcesContent":["import {useContext} from 'react';\nimport {TableContext} from './TableContext';\n\nexport const useTable = () => {\n    const ctx = useContext(TableContext);\n    if (ctx === null) {\n        throw new Error('useTable must be used inside of a TableContext.Provider');\n    }\n\n    return ctx;\n};\n"],"names":["useTable","ctx","useContext","TableContext","Error"],"mappings":";;;;+BAGaA;;;eAAAA;;;qBAHY;4BACE;AAEpB,IAAMA,WAAW,WAAM;IAC1B,IAAMC,MAAMC,IAAAA,iBAAU,EAACC,0BAAY;IACnC,IAAIF,QAAQ,IAAI,EAAE;QACd,MAAM,IAAIG,MAAM,2DAA2D;IAC/E,CAAC;IAED,OAAOH;AACX"}

package/dist/definitions/components/table/useTable.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export declare const useTable: () => {
-    onChange: () => void;
-    state: import("@tanstack/table-core").TableState;
-    setState: import("react").Dispatch<(prevState: import("@tanstack/table-core").TableState) => import("@tanstack/table-core").TableState>;
-    isFiltered: boolean;
-    clearFilters: () => void;
-    getSelectedRow: () => any;
-    getSelectedRows: () => any[];
-    clearSelection: () => void;
-    form: import("@mantine/form").UseFormReturnType<import("./TableContext").TableFormType, (values: import("./TableContext").TableFormType) => import("./TableContext").TableFormType>;
-    containerRef: import("react").RefObject<HTMLDivElement>;
-    multiRowSelectionEnabled: boolean;
-    getPageCount: () => number;
-};
-//# sourceMappingURL=useTable.d.ts.map

package/dist/definitions/components/table/useTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useTable.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAOpB,CAAC"}

package/dist/esm/components/table/useTable.js

@@ -1,11 +0,0 @@
-import { useContext } from "react";
-import { TableContext } from "./TableContext";
-export var useTable = function() {
-    var ctx = useContext(TableContext);
-    if (ctx === null) {
-        throw new Error("useTable must be used inside of a TableContext.Provider");
-    }
-    return ctx;
-};
-
-//# sourceMappingURL=useTable.js.map

package/dist/esm/components/table/useTable.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/table/useTable.tsx"],"sourcesContent":["import {useContext} from 'react';\nimport {TableContext} from './TableContext';\n\nexport const useTable = () => {\n    const ctx = useContext(TableContext);\n    if (ctx === null) {\n        throw new Error('useTable must be used inside of a TableContext.Provider');\n    }\n\n    return ctx;\n};\n"],"names":["useContext","TableContext","useTable","ctx","Error"],"mappings":"AAAA,SAAQA,UAAU,QAAO,QAAQ;AACjC,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,OAAO,IAAMC,WAAW,WAAM;IAC1B,IAAMC,MAAMH,WAAWC;IACvB,IAAIE,QAAQ,IAAI,EAAE;QACd,MAAM,IAAIC,MAAM,2DAA2D;IAC/E,CAAC;IAED,OAAOD;AACX,EAAE"}

package/src/components/table/useTable.tsx

@@ -1,11 +0,0 @@
-import {useContext} from 'react';
-import {TableContext} from './TableContext';
-
-export const useTable = () => {
-    const ctx = useContext(TableContext);
-    if (ctx === null) {
-        throw new Error('useTable must be used inside of a TableContext.Provider');
-    }
-
-    return ctx;
-};