@coveord/plasma-mantine 49.3.4 → 49.3.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePaginationProps {\n    /**\n     * The total number of page. Use null only if your table is paginated client side\n     */\n    totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n    const updatePage = (newPage: number) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    return (\n        <Pagination\n            page={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            getItemAriaLabel={(label) => {\n                switch (label) {\n                    case 'prev':\n                        return 'previous page';\n                    case 'next':\n                        return 'next page';\n                    default:\n                        return `${label}`;\n                }\n            }}\n        />\n    );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":";;;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,aAAa;AASpC,OAAO,IAAMC,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDF,YAAAA,YAA/CG,QAA+CH,UAA/CG,OAAOC,WAAwCJ,UAAxCI,UAAUC,eAA8BL,UAA9BK,cAAcC,eAAgBN,UAAhBM;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,SAAS,SAACK;mBAA2B,wCAC9BA;gBACHC,YAAY,wCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQb,eAAe,IAAI,GAAGI,iBAAiBJ,UAAU;IAE/D,qBACI,KAACH;QACGiB,MAAMb,MAAMO,UAAU,CAACC,SAAS,GAAG;QACnCM,UAAUV;QACVQ,OAAOA;QACPG,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePaginationProps {\n    /**\n     * The total number of page. Use null only if your table is paginated client side\n     */\n    totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n    const updatePage = (newPage: number) => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    return (\n        <Pagination\n            page={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            getItemAriaLabel={(label) => {\n                switch (label) {\n                    case 'prev':\n                        return 'previous page';\n                    case 'next':\n                        return 'next page';\n                    default:\n                        return `${label}`;\n                }\n            }}\n        />\n    );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":";;;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,iBAAiB;AASxC,OAAO,IAAMC,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDF,YAAAA,YAA/CG,QAA+CH,UAA/CG,OAAOC,WAAwCJ,UAAxCI,UAAUC,eAA8BL,UAA9BK,cAAcC,eAAgBN,UAAhBM;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,SAAS,SAACK;mBAAe,wCAClBA;gBACHC,YAAY,wCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQb,eAAe,IAAI,GAAGI,iBAAiBJ,UAAU;IAE/D,qBACI,KAACH;QACGiB,MAAMb,MAAMO,UAAU,CAACC,SAAS,GAAG;QACnCM,UAAUV;QACVQ,OAAOA;QACPG,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ,EAAE"}

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

@@ -2,7 +2,7 @@ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Group, SegmentedControl, Text } from "@mantine/core";
-import { useTable } from "./useTable";
+import { useTable } from "./TableContext";
 export var TablePerPage = function(param) {
     var _param_label = param.label, label = _param_label === void 0 ? "Results per page" : _param_label, _param_values = param.values, values = _param_values === void 0 ? [
         25,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n    /**\n     * The label displayed before the control\n     *\n     * @default Results per page\n     */\n    label?: string;\n    /**\n     * The per page choices to display\n     *\n     * @default [25, 50, 100]\n     */\n    values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n    label = 'Results per page',\n    values = [25, 50, 100],\n}) => {\n    const {state, setState} = useTable();\n\n    const updatePerPage = (newPerPage: string) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return (\n        <Group>\n            <Text>{label}</Text>\n            <SegmentedControl\n                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n                onChange={updatePerPage}\n                data={values.map((value) => value.toString())}\n                color=\"action\"\n                size=\"md\"\n            />\n        </Group>\n    );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAI5D,SAAQC,QAAQ,QAAO,aAAa;AAiBpC,OAAO,IAAMC,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,MAACP;;0BACG,KAACE;0BAAMG;;0BACP,KAACJ;gBACGe,OAAOT,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACG,QAAQ,gBAAlCV,iDAAAA,sCAAwCD,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACW,QAAQ,EAAE;gBACrEC,UAAUT;gBACVU,MAAMb,OAAOc,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;AAEFlB,aAAamB,YAAY,GAAG"}
+{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePerPageProps {\n    /**\n     * The label displayed before the control\n     *\n     * @default Results per page\n     */\n    label?: string;\n    /**\n     * The per page choices to display\n     *\n     * @default [25, 50, 100]\n     */\n    values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n    label = 'Results per page',\n    values = [25, 50, 100],\n}) => {\n    const {state, setState} = useTable();\n\n    const updatePerPage = (newPerPage: string) => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return (\n        <Group>\n            <Text>{label}</Text>\n            <SegmentedControl\n                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n                onChange={updatePerPage}\n                data={values.map((value) => value.toString())}\n                color=\"action\"\n                size=\"md\"\n            />\n        </Group>\n    );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAG5D,SAAQC,QAAQ,QAAO,iBAAiB;AAiBxC,OAAO,IAAMC,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAAe,wCAClBA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,MAACP;;0BACG,KAACE;0BAAMG;;0BACP,KAACJ;gBACGe,OAAOT,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACG,QAAQ,gBAAlCV,iDAAAA,sCAAwCD,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACW,QAAQ,EAAE;gBACrEC,UAAUT;gBACVU,MAAMb,OAAOc,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;AAEFlB,aAAamB,YAAY,GAAG"}

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

@@ -2,8 +2,8 @@ import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, Group, Text } from "@mantine/core";
-import { useTable } from "./useTable";
+import { Group, Select, Text } from "@mantine/core";
+import { useTable } from "./TableContext";
 export var TablePredicate = function(param) {
     var id = param.id, data = param.data, label = param.label;
     var _useTable = useTable(), onChange = _useTable.onChange, form = _useTable.form;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Select, SelectItem, Group, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePredicateProps {\n    /**\n     * Unique identifier for this predicate. Will be used to access the selected value in the table state\n     */\n    id: string;\n    /**\n     * The values to display in the predicate\n     */\n    data: SelectItem[];\n    /**\n     * Input label (not displayed for now)\n     *\n     * @default default to the predicate id\n     */\n    label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {\n    const {onChange, form} = useTable();\n\n    const onUpdate = (newValue: string) => {\n        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n        onChange?.();\n    };\n\n    return (\n        <Group spacing=\"xs\">\n            {label ? <Text>{label}:</Text> : null}\n            <Select\n                withinPortal\n                value={form.values.predicates[id]}\n                onChange={onUpdate}\n                data={data}\n                aria-label={label ?? id}\n                searchable={data.length > 7}\n            />\n        </Group>\n    );\n};\n"],"names":["Select","Group","Text","useTable","TablePredicate","id","data","label","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","spacing","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;AAAA,SAAQA,MAAM,EAAcC,KAAK,EAAEC,IAAI,QAAO,gBAAgB;AAE9D,SAAQC,QAAQ,QAAO,aAAa;AAmBpC,OAAO,IAAMC,iBAAyD,gBAAuB;QAArBC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBJ,YAAAA,YAAlBK,WAAkBL,UAAlBK,UAAUC,OAAQN,UAARM;IAEjB,IAAMC,WAAW,SAACC,UAAqB;QACnCF,KAAKG,aAAa,CAAC,cAAc,wCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,qBAACT,IAAKM;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,MAACP;QAAMc,SAAQ;;YACVR,sBAAQ,MAACL;;oBAAMK;oBAAM;;iBAAW,IAAI;0BACrC,KAACP;gBACGgB,YAAY;gBACZC,OAAOR,KAAKI,MAAM,CAACC,UAAU,CAACT,GAAG;gBACjCG,UAAUE;gBACVJ,MAAMA;gBACNY,cAAYX,kBAAAA,mBAAAA,QAASF,EAAE;gBACvBc,YAAYb,KAAKc,MAAM,GAAG;;;;AAI1C,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Group, Select, SelectItem, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePredicateProps {\n    /**\n     * Unique identifier for this predicate. Will be used to access the selected value in the table state\n     */\n    id: string;\n    /**\n     * The values to display in the predicate\n     */\n    data: SelectItem[];\n    /**\n     * Input label (not displayed for now)\n     *\n     * @default default to the predicate id\n     */\n    label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {\n    const {onChange, form} = useTable();\n\n    const onUpdate = (newValue: string) => {\n        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n        onChange?.();\n    };\n\n    return (\n        <Group spacing=\"xs\">\n            {label ? <Text>{label}:</Text> : null}\n            <Select\n                withinPortal\n                value={form.values.predicates[id]}\n                onChange={onUpdate}\n                data={data}\n                aria-label={label ?? id}\n                searchable={data.length > 7}\n            />\n        </Group>\n    );\n};\n"],"names":["Group","Select","Text","useTable","TablePredicate","id","data","label","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","spacing","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;AAAA,SAAQA,KAAK,EAAEC,MAAM,EAAcC,IAAI,QAAO,gBAAgB;AAG9D,SAAQC,QAAQ,QAAO,iBAAiB;AAmBxC,OAAO,IAAMC,iBAAyD,gBAAuB;QAArBC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBJ,YAAAA,YAAlBK,WAAkBL,UAAlBK,UAAUC,OAAQN,UAARM;IAEjB,IAAMC,WAAW,SAACC,UAAqB;QACnCF,KAAKG,aAAa,CAAC,cAAc,wCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,qBAACT,IAAKM;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,MAACR;QAAMe,SAAQ;;YACVR,sBAAQ,MAACL;;oBAAMK;oBAAM;;iBAAW,IAAI;0BACrC,KAACN;gBACGe,YAAY;gBACZC,OAAOR,KAAKI,MAAM,CAACC,UAAU,CAACT,GAAG;gBACjCG,UAAUE;gBACVJ,MAAMA;gBACNY,cAAYX,kBAAAA,mBAAAA,QAASF,EAAE;gBACvBc,YAAYb,KAAKc,MAAM,GAAG;;;;AAI1C,EAAE"}

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

@@ -1,4 +1,4 @@
 export * from "./Table";
-export * from "./useTable";
+export { useTable } from "./TableContext";
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {type onTableChangeEvent} from './TableContext';\nexport * from './useTable';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AAExB,cAAc,aAAa"}
+{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';\n"],"names":["useTable"],"mappings":"AAAA,cAAc,UAAU;AACxB,SAAQA,QAAQ,QAAO,iBAAiB"}

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

@@ -1,28 +1,36 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { useClickOutside } from "@mantine/hooks";
 import { functionalUpdate } from "@tanstack/table-core";
-import { useState } from "react";
-export var useRowSelection = function(table) {
-    var _useState = _sliced_to_array(useState({}), 2), rowSelection = _useState[0], setRowSelection = _useState[1];
+import isEqual from "fast-deep-equal";
+export var useRowSelection = function(table, param) {
+    var multiRowSelectionEnabled = param.multiRowSelectionEnabled;
+    var outsideClickRef = useClickOutside(function() {
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
+    });
     table.setOptions(function(prev) {
         return _object_spread_props(_object_spread({}, prev), {
             onRowSelectionChange: function(rowSelectionUpdater) {
                 table.setState(function(old) {
-                    var selectedRowsIds = functionalUpdate(rowSelectionUpdater, old["rowSelection"]);
-                    setRowSelection(function(current) {
-                        var currentRowsById = table.getRowModel().rowsById;
-                        return Object.keys(selectedRowsIds).reduce(function(memo, rowId) {
-                            if (current[rowId]) {
-                                memo[rowId] = current[rowId];
-                            } else {
-                                memo[rowId] = currentRowsById[rowId].original;
+                    var newRowSelection = functionalUpdate(rowSelectionUpdater, old["rowSelection"]);
+                    if (isEqual(old["rowSelection"], newRowSelection)) {
+                        return old;
+                    }
+                    var rows = table.getRowModel().rowsById;
+                    Object.keys(newRowSelection).forEach(function(rowId) {
+                        if (newRowSelection[rowId] === true) {
+                            var _rows_rowId;
+                            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;
-                        }, {});
+                            var _rows_rowId_original;
+                            newRowSelection[rowId] = (_rows_rowId_original = (_rows_rowId = rows[rowId]) === null || _rows_rowId === void 0 ? void 0 : _rows_rowId.original) !== null && _rows_rowId_original !== void 0 ? _rows_rowId_original : true;
+                        }
                     });
                     return _object_spread_props(_object_spread({}, old), {
-                        rowSelection: selectedRowsIds
+                        rowSelection: newRowSelection
                     });
                 });
             }
@@ -32,7 +40,7 @@ export var useRowSelection = function(table) {
         table.resetRowSelection(true);
     };
     var getSelectedRows = function() {
-        return Object.values(rowSelection);
+        return Object.values(table.getState().rowSelection);
     };
     var _getSelectedRows_;
     var getSelectedRow = function() {
@@ -41,7 +49,8 @@ export var useRowSelection = function(table) {
     return {
         clearSelection: clearSelection,
         getSelectedRow: getSelectedRow,
-        getSelectedRows: getSelectedRows
+        getSelectedRows: getSelectedRows,
+        outsideClickRef: outsideClickRef
     };
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {functionalUpdate, Table} from '@tanstack/table-core';\nimport {useState} from 'react';\n\nexport const useRowSelection = <T>(table: Table<T>) => {\n    const [rowSelection, setRowSelection] = useState<Record<string, T>>({});\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const selectedRowsIds = functionalUpdate(rowSelectionUpdater, old['rowSelection']);\n                setRowSelection((current) => {\n                    const currentRowsById = table.getRowModel().rowsById;\n                    return Object.keys(selectedRowsIds).reduce((memo, rowId) => {\n                        if (current[rowId]) {\n                            memo[rowId] = current[rowId];\n                        } else {\n                            memo[rowId] = currentRowsById[rowId].original;\n                        }\n                        return memo;\n                    }, {} as Record<string, T>);\n                });\n\n                return {\n                    ...old,\n                    rowSelection: selectedRowsIds,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values(rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {\n        clearSelection,\n        getSelectedRow,\n        getSelectedRows,\n    };\n};\n"],"names":["functionalUpdate","useState","useRowSelection","table","rowSelection","setRowSelection","setOptions","prev","onRowSelectionChange","rowSelectionUpdater","setState","old","selectedRowsIds","current","currentRowsById","getRowModel","rowsById","Object","keys","reduce","memo","rowId","original","clearSelection","resetRowSelection","getSelectedRows","values","getSelectedRow"],"mappings":";;;AAAA,SAAQA,gBAAgB,QAAc,uBAAuB;AAC7D,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,OAAO,IAAMC,kBAAkB,SAAIC,OAAoB;IACnD,IAAwCF,6BAAAA,SAA4B,CAAC,QAA9DG,eAAiCH,cAAnBI,kBAAmBJ;IAExCE,MAAMG,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHC,sBAAsB,SAACC,qBAAwB;gBAC3CN,MAAMO,QAAQ,CAAC,SAACC,KAAQ;oBACpB,IAAMC,kBAAkBZ,iBAAiBS,qBAAqBE,GAAG,CAAC,eAAe;oBACjFN,gBAAgB,SAACQ,SAAY;wBACzB,IAAMC,kBAAkBX,MAAMY,WAAW,GAAGC,QAAQ;wBACpD,OAAOC,OAAOC,IAAI,CAACN,iBAAiBO,MAAM,CAAC,SAACC,MAAMC,OAAU;4BACxD,IAAIR,OAAO,CAACQ,MAAM,EAAE;gCAChBD,IAAI,CAACC,MAAM,GAAGR,OAAO,CAACQ,MAAM;4BAChC,OAAO;gCACHD,IAAI,CAACC,MAAM,GAAGP,eAAe,CAACO,MAAM,CAACC,QAAQ;4BACjD,CAAC;4BACD,OAAOF;wBACX,GAAG,CAAC;oBACR;oBAEA,OAAO,wCACAT;wBACHP,cAAcQ;;gBAEtB;YACJ;;;IAGJ,IAAMW,iBAAiB,WAAM;QACzBpB,MAAMqB,iBAAiB,CAAC,IAAI;IAChC;IAEA,IAAMC,kBAAkB;eAAMR,OAAOS,MAAM,CAACtB;;QAEfqB;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB,IAAI;;IAEzD,OAAO;QACHF,gBAAAA;QACAI,gBAAAA;QACAF,iBAAAA;IACJ;AACJ,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {useClickOutside} from '@mantine/hooks';\nimport {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {RowSelectionWithData, TableProps, TableState} from './Table.types';\n\nexport const useRowSelection = <T>(\n    table: Table<T>,\n    {multiRowSelectionEnabled}: Pick<TableProps<T>, 'multiRowSelectionEnabled'>\n) => {\n    const outsideClickRef = useClickOutside(() => {\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    });\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const newRowSelection = functionalUpdate(\n                    rowSelectionUpdater,\n                    old['rowSelection']\n                ) as RowSelectionWithData<T>;\n\n                if (isEqual(old['rowSelection'], newRowSelection)) {\n                    return old;\n                }\n\n                const rows = table.getRowModel().rowsById;\n\n                Object.keys(newRowSelection).forEach((rowId) => {\n                    if (newRowSelection[rowId] === true) {\n                        if (!rows[rowId]) {\n                            console.error(\n                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'\n                            );\n                        }\n                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n                    }\n                });\n\n                return {\n                    ...old,\n                    rowSelection: newRowSelection as RowSelectionState,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useClickOutside","functionalUpdate","isEqual","useRowSelection","table","multiRowSelectionEnabled","outsideClickRef","clearSelection","setOptions","prev","onRowSelectionChange","rowSelectionUpdater","setState","old","newRowSelection","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","rowSelection","resetRowSelection","getSelectedRows","values","getState","getSelectedRow"],"mappings":";;AAAA,SAAQA,eAAe,QAAO,iBAAiB;AAC/C,SAAQC,gBAAgB,QAAiC,uBAAuB;AAChF,OAAOC,aAAa,kBAAkB;AAItC,OAAO,IAAMC,kBAAkB,SAC3BC,cAEC;QADAC,iCAAAA;IAED,IAAMC,kBAAkBN,gBAAgB,WAAM;QAC1C,IAAI,CAACK,0BAA0B;YAC3BE;QACJ,CAAC;IACL;IAEAH,MAAMI,UAAU,CAAC,SAACC;QAAU,OAAA,wCACrBA;YACHC,sBAAsB,SAACC,qBAAwB;gBAC3CP,MAAMQ,QAAQ,CAAC,SAACC,KAAQ;oBACpB,IAAMC,kBAAkBb,iBACpBU,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIX,QAAQW,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX,CAAC;oBAED,IAAME,OAAOX,MAAMY,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACL,iBAAiBM,OAAO,CAAC,SAACC,OAAU;wBAC5C,IAAIP,eAAe,CAACO,MAAM,KAAK,IAAI,EAAE;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER,CAAC;gCACwBR;4BAAzBD,eAAe,CAACO,MAAM,GAAGN,CAAAA,uBAAAA,CAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,yBAAAA,KAAAA,IAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B,IAAI,AAAM;wBACjE,CAAC;oBACL;oBAEA,OAAO,wCACAF;wBACHY,cAAcX;;gBAEtB;YACJ;;;IAGJ,IAAMP,iBAAiB,WAAM;QACzBH,MAAMsB,iBAAiB,CAAC,IAAI;IAChC;IAEA,IAAMC,kBAAkB;eAAMT,OAAOU,MAAM,CAAC,AAACxB,MAAMyB,QAAQ,GAAqBJ,YAAY;;QAE/DE;IAA7B,IAAMG,iBAAiB;eAAMH,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB,IAAI;;IAEzD,OAAO;QAACpB,gBAAAA;QAAgBuB,gBAAAA;QAAgBH,iBAAAA;QAAiBrB,iBAAAA;IAAe;AAC5E,EAAE"}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport * from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\nexport {Pagination} from '@mantine/core';\n// explicitly overriding mantine components\nexport {\n    Header,\n    Table,\n    type TableProps,\n    type HeaderProps,\n    Modal,\n    Button,\n    type ButtonProps,\n    Menu,\n    type MenuItemProps,\n} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["Pagination","Header","Table","Modal","Button","Menu","useForm","createFormContext"],"mappings":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,SAAQA,UAAU,QAAO,gBAAgB;AACzC,2CAA2C;AAC3C,SACIC,MAAM,EACNC,KAAK,EAGLC,KAAK,EACLC,MAAM,EAENC,IAAI,QAED,eAAe;AACtB,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport * from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\nexport {Pagination} from '@mantine/core';\n// explicitly overriding mantine components\nexport {\n    Header,\n    Table,\n    type TableProps,\n    type TableState,\n    type InitialTableState,\n    type HeaderProps,\n    Modal,\n    Button,\n    type ButtonProps,\n    Menu,\n    type MenuItemProps,\n} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["Pagination","Header","Table","Modal","Button","Menu","useForm","createFormContext"],"mappings":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,SAAQA,UAAU,QAAO,gBAAgB;AACzC,2CAA2C;AAC3C,SACIC,MAAM,EACNC,KAAK,EAKLC,KAAK,EACLC,MAAM,EAENC,IAAI,QAED,eAAe;AACtB,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "49.3.4",
+  "version": "49.3.6",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -20,12 +20,13 @@
     "@tanstack/react-table": "8.7.9",
     "@tanstack/table-core": "8.7.9",
     "dayjs": "1.11.3",
+    "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",
     "react-beautiful-dnd": "13.1.1",
-    "@coveord/plasma-react-icons": "49.2.2",
-    "@coveord/plasma-tokens": "48.25.0"
+    "@coveord/plasma-react-icons": "49.3.6",
+    "@coveord/plasma-tokens": "49.3.6"
   },
   "devDependencies": {
     "@emotion/react": "11.10.5",
@@ -35,8 +36,8 @@
     "@mantine/form": "5.9.2",
     "@mantine/hooks": "5.9.2",
     "@mantine/modals": "5.9.2",
-    "@swc/cli": "0.1.57",
-    "@swc/core": "1.3.31",
+    "@swc/cli": "0.1.61",
+    "@swc/core": "1.3.35",
     "@swc/jest": "0.2.23",
     "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",

package/src/components/collection/CollectionItem.tsx

@@ -19,7 +19,7 @@ interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useSty
 const RemoveButton: FunctionComponent<{
     onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({onClick}) => (
-    <ActionIcon variant="subtle" onClick={onClick} color="action">
+    <ActionIcon sx={{alignSelf: 'center'}} variant="subtle" onClick={onClick} color="action">
         <RemoveSize16Px height={16} />
     </ActionIcon>
 );
@@ -69,7 +69,7 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
                     {...provided.draggableProps}
                     className={cx(classes.item, {[classes.itemDragging]: isDragging})}
                 >
-                    <div {...provided.dragHandleProps}>
+                    <div {...provided.dragHandleProps} style={{alignSelf: 'center'}}>
                         <DragAndDropSize16Px height={16} />
                     </div>
                     {children}

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

@@ -0,0 +1,58 @@
+import {createStyles} from '@mantine/core';
+
+interface TableStylesParams {
+    hasHeader: boolean;
+    multiRowSelectionEnabled: boolean;
+}
+
+const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
+    const rowBackgroundColor =
+        theme.colorScheme === 'dark'
+            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+            : theme.colors[theme.primaryColor][0];
+    return {
+        table: {
+            width: '100%',
+            '& td:first-of-type, th:first-of-type > *': {
+                paddingLeft: theme.spacing.xl,
+            },
+            '& tbody td': {
+                verticalAlign: 'top',
+            },
+        },
+
+        header: {
+            position: 'sticky',
+            top: hasHeader ? 69 : 0,
+            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
+            transition: 'box-shadow 150ms ease',
+            zIndex: 12, // skeleton is 11
+
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: 0,
+                borderBottom: `1px solid ${theme.colors.gray[2]}`,
+            },
+        },
+
+        rowSelected: {
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
+        },
+
+        rowCollapsibleButtonCell: {
+            textAlign: 'right',
+            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
+        },
+
+        row: {
+            '&:hover': {
+                backgroundColor: rowBackgroundColor,
+            },
+        },
+    };
+});
+
+export default useStyles;

package/src/components/table/Table.tsx

@@ -1,23 +1,24 @@
-import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
+import {Box, Center, Collapse, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
 import {useForm} from '@mantine/form';
-import {useClickOutside, useDidUpdate} from '@mantine/hooks';
+import {useDidUpdate} from '@mantine/hooks';
 import {
     ColumnDef,
     defaultColumnSizing,
     flexRender,
     getCoreRowModel,
     Row,
-    TableState,
+    TableState as TanstackTableState,
     useReactTable,
 } from '@tanstack/react-table';
-import {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';
+import {Children, Dispatch, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';
 
+import useStyles from './Table.styles';
+import {TableFormType, TableProps, TableState, TableType} from './Table.types';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
-import {onTableChangeEvent, TableContext, TableFormType} from './TableContext';
+import {TableContext} from './TableContext';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
@@ -29,159 +30,6 @@ import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
 
-interface TableStylesParams {
-    hasHeader: boolean;
-    multiRowSelectionEnabled: boolean;
-}
-
-const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
-    const rowBackgroundColor =
-        theme.colorScheme === 'dark'
-            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
-            : theme.colors[theme.primaryColor][0];
-    return {
-        table: {
-            width: '100%',
-            '& td:first-of-type, th:first-of-type > *': {
-                paddingLeft: theme.spacing.xl,
-            },
-            '& tbody td': {
-                verticalAlign: 'top',
-            },
-        },
-
-        header: {
-            position: 'sticky',
-            top: hasHeader ? 69 : 0,
-            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
-            transition: 'box-shadow 150ms ease',
-            zIndex: 12, // skeleton is 11
-
-            '&::after': {
-                content: '""',
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                bottom: 0,
-                borderBottom: `1px solid ${theme.colors.gray[2]}`,
-            },
-        },
-
-        rowSelected: {
-            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
-        },
-
-        rowCollapsibleButtonCell: {
-            textAlign: 'right',
-            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
-        },
-
-        row: {
-            '&:hover': {
-                backgroundColor: rowBackgroundColor,
-            },
-        },
-    };
-});
-
-export interface TableProps<T> {
-    /**
-     * Data to display in the table
-     */
-    data: T[];
-    /**
-     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
-     */
-    getRowId?: CoreOptions<T>['getRowId'];
-    /**
-     * Columns to display in the table.
-     *
-     * @see https://tanstack.com/table/v8/docs/guide/column-defs
-     */
-    columns: Array<ColumnDef<T>>;
-    /**
-     * Function called when the table mounts
-     *
-     * @param state the state of the table
-     */
-    onMount?: onTableChangeEvent;
-    /**
-     * Function called when the table should update
-     *
-     * @param state the state of the table
-     */
-    onChange?: onTableChangeEvent;
-    /**
-     * 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;
-    /**
-     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table
-     */
-    noDataChildren?: ReactNode;
-    /**
-     * Whether the table is loading or not
-     *
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`
-     *
-     * @example
-     * <Table ...>
-     *     <Table.Header>
-     *         <div>Hello</div>
-     *     </Table.Header>
-     * </Table>
-     */
-    children?: ReactNode;
-
-    /**
-     * Initial state of the table
-     */
-    initialState?: InitialTableState & Partial<TableFormType>;
-    /**
-     * Action passed when user double clicks on a row
-     */
-    doubleClickAction?: (datum: T) => void;
-    /**
-     * Whether the user can select multiple rows in order to perform actions in bulk
-     *
-     * @default false
-     */
-    multiRowSelectionEnabled?: boolean;
-
-    options?: Omit<
-        Partial<TableOptions<T>>,
-        | 'initialState'
-        | 'data'
-        | 'columns'
-        | 'manualPagination'
-        | 'enableMultiRowSelection'
-        | 'getRowId'
-        | 'getRowCanExpand'
-        | 'enableRowSelection'
-    >;
-}
-
-interface TableType {
-    <T>(props: TableProps<T>): ReactElement;
-    Actions: typeof TableActions;
-    Filter: typeof TableFilter;
-    Footer: typeof TableFooter;
-    Header: typeof TableHeader;
-    Pagination: typeof TablePagination;
-    PerPage: typeof TablePerPage;
-    Predicate: typeof TablePredicate;
-    DateRangePicker: typeof TableDateRangePicker;
-    CollapsibleColumn: typeof TableCollapsibleColumn;
-    AccordionColumn: typeof TableAccordionColumn;
-}
-
 export const Table: TableType = <T,>({
     data,
     getRowId,
@@ -219,13 +67,15 @@ export const Table: TableType = <T,>({
         enableRowSelection: !loading,
         ...options,
     });
-    const [state, setState] = useState<TableState>(table.initialState);
+    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);
     table.setOptions((prev) => ({
         ...prev,
-        state,
-        onStateChange: setState,
+        state: state as TanstackTableState,
+        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,
     }));
-    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);
+    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {
+        multiRowSelectionEnabled,
+    });
     const isFiltered =
         !!state.globalFilter ||
         Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||
@@ -253,12 +103,6 @@ export const Table: TableType = <T,>({
         setState((prevState) => ({...prevState, globalFilter: ''}));
     }, []);
 
-    const outsideClickRef = useClickOutside(() => {
-        if (!multiRowSelectionEnabled) {
-            clearSelection();
-        }
-    });
-
     if (!data) {
         return (
             <Center sx={{flexGrow: 1}}>
@@ -269,14 +113,15 @@ export const Table: TableType = <T,>({
 
     const rows = table.getRowModel().rows.map((row) => {
         const rowChildren = getExpandChildren?.(row.original) ?? null;
+        const isSelected = !!row.getIsSelected();
 
         return (
             <Fragment key={row.id}>
                 <tr
                     onClick={() => row.toggleSelected()}
                     onDoubleClick={() => doubleClickAction?.(row.original)}
-                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}
-                    aria-selected={row.getIsSelected()}
+                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}
+                    aria-selected={isSelected}
                 >
                     {row.getVisibleCells().map((cell) => {
                         const size = cell.column.getSize();
@@ -299,7 +144,7 @@ export const Table: TableType = <T,>({
                 {rowChildren ? (
                     <tr>
                         <td
-                            colSpan={columns.length + 1}
+                            colSpan={table.getAllColumns().length}
                             style={{
                                 padding: 0,
                                 borderTop: row.getIsExpanded() ? undefined : 'none',
@@ -356,7 +201,7 @@ export const Table: TableType = <T,>({
                                     rows
                                 ) : (
                                     <tr>
-                                        <td colSpan={columns.length}>{noDataChildren}</td>
+                                        <td colSpan={table.getAllColumns().length}>{noDataChildren}</td>
                                     </tr>
                                 )}
                             </tbody>