@coveord/plasma-mantine 49.3.4 → 49.3.6

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;
-};