@coveord/plasma-mantine 52.9.0 → 52.10.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/TableLastUpdated.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Group, Selectors, Text} from '@mantine/core';\nimport {useDidUpdate} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {\n        minHeight: '98px',\n    },\n    label: {\n        color: theme.colors.gray[6],\n    },\n}));\n\ntype TableLastUpdatedStylesNames = Selectors<typeof useStyles>;\n\ninterface TableLastUpdatedProps extends DefaultProps<TableLastUpdatedStylesNames> {\n    /**\n     * Label to contextualize the date\n     *\n     * @default \"Last update:\"\n     */\n    label?: string;\n}\n\nexport const TableLastUpdated: FunctionComponent<TableLastUpdatedProps & {dependencies?: never}> = ({\n    label = 'Last update:',\n    dependencies,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableLastUpdated', classNames, styles, unstyled});\n    const {state} = useTable();\n    const [time, setTime] = useState(new Date());\n\n    useDidUpdate(() => {\n        setTime(new Date());\n    }, [state, ...dependencies]);\n\n    return (\n        <Group className={classes.root} px=\"xl\" position=\"right\">\n            <Text size=\"xs\" className={classes.label} {...others}>\n                {label}\n                <span role=\"timer\">{dayjs(time).format('h:mm:ss A')}</span>\n            </Text>\n        </Group>\n    );\n};\n"],"names":["TableLastUpdated","useStyles","createStyles","theme","root","minHeight","label","color","colors","gray","dependencies","classNames","styles","unstyled","others","classes","name","state","useTable","useState","Date","time","setTime","useDidUpdate","Group","className","px","position","Text","size","span","role","dayjs","format"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;;;oBA1BoD;qBACtC;8DACT;qBACwB;4BACnB;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,MAAM;YACFC,WAAW;QACf;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAaO,IAAMT,mBAAsF;8BAC/FM,OAAAA,kCAAQ,+BACRI,sBAAAA,cACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QALHR;QACAI;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,MAAM;QAACe,MAAM;QAAoBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAlFE;IACP,IAAM,AAACE,QAASC,IAAAA,sBAAQ,IAAjBD;IACP,IAAwBE,+BAAAA,IAAAA,eAAQ,EAAC,IAAIC,aAA9BC,OAAiBF,cAAXG,UAAWH;IAExBI,IAAAA,mBAAY,EAAC;QACTD,QAAQ,IAAIF;IAChB,GAAG;QAACH;KAAuB,CAAxB,OAAQ,uBAAGP;IAEd,qBACI,qBAACc,WAAK;QAACC,WAAWV,QAAQX,IAAI;QAAEsB,IAAG;QAAKC,UAAS;kBAC7C,cAAA,sBAACC,UAAI;YAACC,MAAK;YAAKJ,WAAWV,QAAQT,KAAK;WAAMQ;;gBACzCR;8BACD,qBAACwB;oBAAKC,MAAK;8BAASC,IAAAA,cAAK,EAACX,MAAMY,MAAM,CAAC;;;;;AAIvD"}

package/dist/cjs/components/table/TablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAIxC,UAAU,oBAAoB;IAC1B;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAkCnE,CAAC"}
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAIxC,UAAU,oBAAoB;IAC1B;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAmCnE,CAAC"}

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

@@ -35,6 +35,7 @@ var TablePagination = function(param) {
         total: total,
         boundaries: 0,
         size: "md",
+        spacing: "xs",
         getControlProps: function(control) {
             switch(control){
                 case "previous":

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

@@ -1 +1 @@
-{"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            value={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            getControlProps={(control) => {\n                switch (control) {\n                    case 'previous':\n                        return {\n                            component: 'button',\n                            'aria-label': 'previous page',\n                        };\n                    case 'next':\n                        return {component: 'button', 'aria-label': 'next page'};\n                    default:\n                        return {};\n                }\n            }}\n        />\n    );\n};\n"],"names":["TablePagination","totalPages","useTable","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","Pagination","value","onChange","boundaries","size","getControlProps","control","component"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;oBAZY;4BAGF;AAShB,IAAMA,kBAA2D;QAAEC,mBAAAA;IACtE,IAAsDC,YAAAA,IAAAA,sBAAQ,KAAvDC,QAA+CD,UAA/CC,OAAOC,WAAwCF,UAAxCE,UAAUC,eAA8BH,UAA9BG,cAAcC,eAAgBJ,UAAhBI;IACtC,IAAMC,aAAa,SAACC;QAChBJ,SAAS,SAACK;mBAAe,4CAClBA;gBACHC,YAAY,4CAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQd,eAAe,OAAOK,iBAAiBL;IAErD,qBACI,qBAACe,gBAAU;QACPC,OAAOd,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCO,UAAUX;QACVQ,OAAOA;QACPI,YAAY;QACZC,MAAK;QACLC,iBAAiB,SAACC;YACd,OAAQA;gBACJ,KAAK;oBACD,OAAO;wBACHC,WAAW;wBACX,cAAc;oBAClB;gBACJ,KAAK;oBACD,OAAO;wBAACA,WAAW;wBAAU,cAAc;oBAAW;gBAC1D;oBACI,OAAO,CAAC;YAChB;QACJ;;AAGZ"}
+{"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            value={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            spacing=\"xs\"\n            getControlProps={(control) => {\n                switch (control) {\n                    case 'previous':\n                        return {\n                            component: 'button',\n                            'aria-label': 'previous page',\n                        };\n                    case 'next':\n                        return {component: 'button', 'aria-label': 'next page'};\n                    default:\n                        return {};\n                }\n            }}\n        />\n    );\n};\n"],"names":["TablePagination","totalPages","useTable","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","Pagination","value","onChange","boundaries","size","spacing","getControlProps","control","component"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;oBAZY;4BAGF;AAShB,IAAMA,kBAA2D;QAAEC,mBAAAA;IACtE,IAAsDC,YAAAA,IAAAA,sBAAQ,KAAvDC,QAA+CD,UAA/CC,OAAOC,WAAwCF,UAAxCE,UAAUC,eAA8BH,UAA9BG,cAAcC,eAAgBJ,UAAhBI;IACtC,IAAMC,aAAa,SAACC;QAChBJ,SAAS,SAACK;mBAAe,4CAClBA;gBACHC,YAAY,4CAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQd,eAAe,OAAOK,iBAAiBL;IAErD,qBACI,qBAACe,gBAAU;QACPC,OAAOd,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCO,UAAUX;QACVQ,OAAOA;QACPI,YAAY;QACZC,MAAK;QACLC,SAAQ;QACRC,iBAAiB,SAACC;YACd,OAAQA;gBACJ,KAAK;oBACD,OAAO;wBACHC,WAAW;wBACX,cAAc;oBAClB;gBACJ,KAAK;oBACD,OAAO;wBAACA,WAAW;wBAAU,cAAc;oBAAW;gBAC1D;oBACI,OAAO,CAAC;YAChB;QACJ;;AAGZ"}

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

@@ -33,8 +33,10 @@ var TablePerPage = function(param) {
     };
     var _state_pagination_pageSize_toString;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
+        spacing: "sm",
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
+                fw: 500,
                 children: label
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.SegmentedControl, {
@@ -44,7 +46,7 @@ var TablePerPage = function(param) {
                     return value.toString();
                 }),
                 color: "action",
-                size: "md"
+                size: "sm"
             })
         ]
     });

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

@@ -1 +1 @@
-{"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":["TablePerPage","label","values","useTable","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","Group","Text","SegmentedControl","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;oBApB+B;4BAGrB;AAiBhB,IAAMA,eAA8E;6BACvFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;QAeqCA,0BAAAA;IAb3D,IAA0BC,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,gBAAgB,SAACC;QACnBF,SAAS,SAACG;mBAAe,4CAClBA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,sBAACS,WAAK;;0BACF,qBAACC,UAAI;0BAAEb;;0BACP,qBAACc,sBAAgB;gBACbC,OAAOZ,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACM,QAAQ,gBAAlCb,iDAAAA,uCAAwCF,UAAAA,oBAAAA,+BAAAA,oBAAAA,SAAAA,OAAQ,CAAC,EAAE,EAACe,QAAQ,cAApBf,wCAAAA;gBAC/CgB,UAAUZ;gBACVa,MAAMjB,OAAOkB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB;AAEAtB,aAAauB,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 spacing=\"sm\">\n            <Text fw={500}>{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=\"sm\"\n            />\n        </Group>\n    );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["TablePerPage","label","values","useTable","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","Group","spacing","Text","fw","SegmentedControl","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;oBApB+B;4BAGrB;AAiBhB,IAAMA,eAA8E;6BACvFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;QAeqCA,0BAAAA;IAb3D,IAA0BC,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,gBAAgB,SAACC;QACnBF,SAAS,SAACG;mBAAe,4CAClBA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,sBAACS,WAAK;QAACC,SAAQ;;0BACX,qBAACC,UAAI;gBAACC,IAAI;0BAAMf;;0BAChB,qBAACgB,sBAAgB;gBACbC,OAAOd,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACQ,QAAQ,gBAAlCf,iDAAAA,uCAAwCF,UAAAA,oBAAAA,+BAAAA,oBAAAA,SAAAA,OAAQ,CAAC,EAAE,EAACiB,QAAQ,cAApBjB,wCAAAA;gBAC/CkB,UAAUd;gBACVe,MAAMnB,OAAOoB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB;AAEAxB,aAAayB,YAAY,GAAG"}

package/dist/cjs/components/table/layouts/RowLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,WAAW,EAAmB,MAAM,gBAAgB,CAAC;AA2I7D,eAAO,MAAM,SAAS,EAAE,WAKvB,CAAC"}
+{"version":3,"file":"RowLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,WAAW,EAAmB,MAAM,gBAAgB,CAAC;AA6K7D,eAAO,MAAM,SAAS,EAAE,WAKvB,CAAC"}

package/dist/cjs/components/table/layouts/RowLayout.js

@@ -18,14 +18,16 @@ var _react = require("react");
 var _TableCollapsibleColumn = require("../TableCollapsibleColumn");
 var _TableContext = require("../TableContext");
 var _TableLoading = require("../TableLoading");
+var _TableSelectableColumn = require("../TableSelectableColumn");
 var _Th = require("../Th");
 var useStyles = (0, _core.createStyles)(function(theme, param) {
     var multiRowSelectionEnabled = param.multiRowSelectionEnabled, disableRowSelection = param.disableRowSelection;
-    var rowBackgroundColor = theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors[theme.primaryColor][0];
+    var rowBackgroundColor = theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];
+    var border = "".concat((0, _core.rem)(1), " solid ").concat(theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]);
     return {
         headerColumns: {
             "& th:first-of-type > *": {
-                paddingLeft: theme.spacing.xl
+                paddingLeft: "40px"
             },
             "& input[type=checkbox]": {
                 backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
@@ -56,9 +58,23 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
             padding: "calc(".concat(theme.spacing.xs, "/2) ").concat(theme.spacing.sm, " !important")
         },
         row: {
+            "& td:first-of-type": {
+                paddingLeft: "40px"
+            },
             "&:hover": {
                 backgroundColor: rowBackgroundColor
             }
+        },
+        cell: {
+            verticalAlign: "middle",
+            // We must use height instead of minHeight here, otherwise it doesn't apply
+            height: "56px",
+            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
+            borderBottom: border
+        },
+        collapsible: {
+            backgroundColor: rowBackgroundColor,
+            borderBottom: border
         }
     };
 });
@@ -90,18 +106,28 @@ var RowLayoutBody = function(param) {
         disableRowSelection: disableRowSelection,
         multiRowSelectionEnabled: multiRowSelectionEnabled
     }), classes = _useStyles.classes, cx = _useStyles.cx;
+    var toggleCollapsible = function(el) {
+        var cell = el.children[el.children.length - 1];
+        cell.querySelector("button").click();
+    };
     var rows = table.getRowModel().rows.map(function(row) {
         var _getExpandChildren;
         var _getExpandChildren1;
         var rowChildren = (_getExpandChildren1 = (_getExpandChildren = getExpandChildren) === null || _getExpandChildren === void 0 ? void 0 : _getExpandChildren(row.original)) !== null && _getExpandChildren1 !== void 0 ? _getExpandChildren1 : null;
         var isSelected = !!row.getIsSelected();
+        var onClick = function(event) {
+            if (rowChildren) {
+                toggleCollapsible(event.currentTarget);
+            }
+            if (!disableRowSelection && !multiRowSelectionEnabled) {
+                row.toggleSelected();
+            }
+        };
         var _obj;
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
-                    onClick: function() {
-                        return disableRowSelection ? undefined : row.toggleSelected();
-                    },
+                    onClick: onClick,
                     onDoubleClick: function() {
                         var _doubleClickAction;
                         return (_doubleClickAction = doubleClickAction) === null || _doubleClickAction === void 0 ? void 0 : _doubleClickAction(row.original);
@@ -111,11 +137,18 @@ var RowLayoutBody = function(param) {
                     children: row.getVisibleCells().map(function(cell) {
                         var size = cell.column.getSize();
                         var width = size !== _tablecore.defaultColumnSizing.size ? size : undefined;
+                        var onCollapsibleCellClick = function(event) {
+                            if (cell.column.id === _TableSelectableColumn.TableSelectableColumn.id && !disableRowSelection) {
+                                event.stopPropagation();
+                                row.getToggleSelectedHandler();
+                            }
+                        };
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
                             style: {
                                 width: width
                             },
-                            className: cx(_define_property._({}, classes.rowCollapsibleButtonCell, cell.column.id === _TableCollapsibleColumn.TableCollapsibleColumn.id)),
+                            className: cx(classes.cell, _define_property._({}, classes.rowCollapsibleButtonCell, cell.column.id === _TableCollapsibleColumn.TableCollapsibleColumn.id)),
+                            onClick: onCollapsibleCellClick,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLoading.TableLoading, {
                                 visible: loading,
                                 children: (0, _reacttable.flexRender)(cell.column.columnDef.cell, cell.getContext())
@@ -127,13 +160,12 @@ var RowLayoutBody = function(param) {
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
                         colSpan: table.getAllColumns().length,
                         style: {
-                            padding: 0,
-                            borderTop: row.getIsExpanded() ? undefined : "none",
-                            borderBottom: row.getIsExpanded() ? undefined : "none"
+                            padding: 0
                         },
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Collapse, {
                             in: row.getIsExpanded(),
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+                                className: classes.collapsible,
                                 px: "sm",
                                 py: "xs",
                                 children: rowChildren

package/dist/cjs/components/table/layouts/RowLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n\n            '& input[type=checkbox]': {\n                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n                pointerEvents: disableRowSelection ? 'none' : 'auto',\n                cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n                '& + svg': {\n                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n                },\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowUnselectable: {\n            '& input[type=checkbox]': {\n                backgroundColor: `${theme.colors.gray[2]}`,\n                borderColor: `${theme.colors.gray[3]}`,\n                pointerEvents: 'none',\n                cursor: 'not-allowed',\n\n                '&:checked + svg': {\n                    color: `${theme.colors.gray[5]}`,\n                },\n            },\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => (disableRowSelection ? undefined : row.toggleSelected())}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","headerColumns","paddingLeft","spacing","xl","backgroundColor","gray","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","RowLayoutHeader","table","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","Fragment","onClick","toggleSelected","onDoubleClick","aria-selected","getVisibleCells","cell","size","column","getSize","width","defaultColumnSizing","td","style","TableCollapsibleColumn","TableLoading","visible","flexRender","columnDef","getContext","colSpan","getAllColumns","length","borderTop","getIsExpanded","borderBottom","Collapse","in","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n    return {\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: '40px',\n            },\n\n            '& input[type=checkbox]': {\n                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n                pointerEvents: disableRowSelection ? 'none' : 'auto',\n                cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n                '& + svg': {\n                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n                },\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowUnselectable: {\n            '& input[type=checkbox]': {\n                backgroundColor: `${theme.colors.gray[2]}`,\n                borderColor: `${theme.colors.gray[3]}`,\n                pointerEvents: 'none',\n                cursor: 'not-allowed',\n\n                '&:checked + svg': {\n                    color: `${theme.colors.gray[5]}`,\n                },\n            },\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '& td:first-of-type': {\n                paddingLeft: '40px',\n            },\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n\n        cell: {\n            verticalAlign: 'middle',\n            // We must use height instead of minHeight here, otherwise it doesn't apply\n            height: '56px',\n            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n            borderBottom: border,\n        },\n\n        collapsible: {\n            backgroundColor: rowBackgroundColor,\n            borderBottom: border,\n        },\n    };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n    const toggleCollapsible = (el: HTMLTableRowElement) => {\n        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n        cell.querySelector('button').click();\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n            if (rowChildren) {\n                toggleCollapsible(event.currentTarget);\n            }\n            if (!disableRowSelection && !multiRowSelectionEnabled) {\n                row.toggleSelected();\n            }\n        };\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={onClick}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n                                event.stopPropagation();\n                                row.getToggleSelectedHandler();\n                            }\n                        };\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx(classes.cell, {\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                                onClick={onCollapsibleCellClick}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","event","currentTarget","toggleSelected","Fragment","onDoubleClick","aria-selected","getVisibleCells","size","column","getSize","width","defaultColumnSizing","onCollapsibleCellClick","TableSelectableColumn","stopPropagation","getToggleSelectedHandler","td","style","TableCollapsibleColumn","TableLoading","visible","flexRender","columnDef","getContext","colSpan","getAllColumns","Collapse","in","getIsExpanded","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":"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"}

package/dist/cjs/components/table/useRowSelection.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { Table } from '@tanstack/table-core';
 import { TableProps } from './Table.types';
-export declare const useRowSelection: <T>(table: Table<T>, { onRowSelectionChange, multiRowSelectionEnabled, }: Pick<TableProps<T>, "multiRowSelectionEnabled" | "onRowSelectionChange">) => {
+export declare const useRowSelection: <T>(table: Table<T>, { onRowSelectionChange, multiRowSelectionEnabled, additionalRootNodes, }: Pick<TableProps<T>, "multiRowSelectionEnabled" | "onRowSelectionChange" | "additionalRootNodes">) => {
     clearSelection: () => void;
     getSelectedRow: () => T;
     getSelectedRows: () => T[];
-    outsideClickRef: import("react").MutableRefObject<any>;
+    outsideClickRef: import("react").MutableRefObject<HTMLDivElement>;
 };
 //# sourceMappingURL=useRowSelection.d.ts.map

package/dist/cjs/components/table/useRowSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useRowSelection.ts"],"names":[],"mappings":";AACA,OAAO,EAAsC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAGhF,OAAO,EAAuB,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3E,eAAO,MAAM,eAAe;;;;;CA0D3B,CAAC"}
+{"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useRowSelection.ts"],"names":[],"mappings":";AACA,OAAO,EAAsC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAIhF,OAAO,EAAuB,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3E,eAAO,MAAM,eAAe;;;;;CAgE3B,CAAC"}

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

@@ -11,16 +11,21 @@ Object.defineProperty(exports, "useRowSelection", {
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _hooks = require("@mantine/hooks");
 var _tablecore = require("@tanstack/table-core");
 var _fastdeepequal = /*#__PURE__*/ _interop_require_default._(require("fast-deep-equal"));
+var _react = require("react");
 var useRowSelection = function(table, param) {
-    var onRowSelectionChange = param.onRowSelectionChange, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
-    var outsideClickRef = (0, _hooks.useClickOutside)(function() {
+    var onRowSelectionChange = param.onRowSelectionChange, multiRowSelectionEnabled = param.multiRowSelectionEnabled, _param_additionalRootNodes = param.additionalRootNodes, additionalRootNodes = _param_additionalRootNodes === void 0 ? [] : _param_additionalRootNodes;
+    var outsideClickRef = (0, _react.useRef)();
+    (0, _hooks.useClickOutside)(function() {
         if (!multiRowSelectionEnabled) {
             clearSelection();
         }
-    });
+    }, null, [
+        outsideClickRef.current
+    ].concat(_to_consumable_array._(additionalRootNodes)));
     table.setOptions(function(prev) {
         return _object_spread_props._(_object_spread._({}, prev), {
             onRowSelectionChange: function(rowSelectionUpdater) {

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

@@ -1 +1 @@
-{"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    {\n        onRowSelectionChange,\n        multiRowSelectionEnabled,\n    }: Pick<TableProps<T>, 'onRowSelectionChange' | '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                onRowSelectionChange?.(Object.values(newRowSelection));\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":["useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","outsideClickRef","useClickOutside","clearSelection","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","functionalUpdate","isEqual","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","values","rowSelection","resetRowSelection","getSelectedRows","getState","getSelectedRow"],"mappings":";;;;+BAMaA;;;eAAAA;;;;;;qBANiB;yBAC2B;sEACrC;AAIb,IAAMA,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA;IAGJ,IAAMC,kBAAkBC,IAAAA,sBAAe,EAAC;QACpC,IAAI,CAACF,0BAA0B;YAC3BG;QACJ;IACJ;IAEAL,MAAMM,UAAU,CAAC,SAACC;eAAU,4CACrBA;YACHN,sBAAsB,SAACO;gBACnBR,MAAMS,QAAQ,CAAC,SAACC;wBAuBZT;oBAtBA,IAAMU,kBAAkBC,IAAAA,2BAAgB,EACpCJ,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIG,IAAAA,sBAAO,EAACH,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAMI,OAAOd,MAAMe,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACP,iBAAiBQ,OAAO,CAAC,SAACC;wBAClC,IAAIT,eAAe,CAACS,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBH,eAAe,CAACS,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;qBAEAb,wBAAAA,kCAAAA,4CAAAA,sBAAuBgB,OAAOO,MAAM,CAACb;oBAErC,OAAO,4CACAD;wBACHe,cAAcd;;gBAEtB;YACJ;;;IAGJ,IAAMN,iBAAiB;QACnBL,MAAM0B,iBAAiB,CAAC;IAC5B;IAEA,IAAMC,kBAAkB;eAAMV,OAAOO,MAAM,CAAC,AAACxB,MAAM4B,QAAQ,GAAqBH,YAAY;;QAE/DE;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACtB,gBAAAA;QAAgBwB,gBAAAA;QAAgBF,iBAAAA;QAAiBxB,iBAAAA;IAAe;AAC5E"}
+{"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 {useRef} from 'react';\nimport {RowSelectionWithData, TableProps, TableState} from './Table.types';\n\nexport const useRowSelection = <T>(\n    table: Table<T>,\n    {\n        onRowSelectionChange,\n        multiRowSelectionEnabled,\n        additionalRootNodes = [],\n    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>\n) => {\n    const outsideClickRef = useRef<HTMLDivElement>();\n    useClickOutside(\n        () => {\n            if (!multiRowSelectionEnabled) {\n                clearSelection();\n            }\n        },\n        null,\n        [outsideClickRef.current, ...additionalRootNodes]\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                onRowSelectionChange?.(Object.values(newRowSelection));\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":["useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","additionalRootNodes","outsideClickRef","useRef","useClickOutside","clearSelection","current","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","functionalUpdate","isEqual","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","values","rowSelection","resetRowSelection","getSelectedRows","getState","getSelectedRow"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;;;qBAPiB;yBAC2B;sEACrC;qBAEC;AAGd,IAAMA,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA,6DACAC,qBAAAA,8DAAsB,EAAE;IAG5B,IAAMC,kBAAkBC,IAAAA,aAAM;IAC9BC,IAAAA,sBAAe,EACX;QACI,IAAI,CAACJ,0BAA0B;YAC3BK;QACJ;IACJ,GACA,MACA;QAACH,gBAAgBI,OAAO;KAAyB,CAAjD,OAA0B,uBAAGL;IAGjCH,MAAMS,UAAU,CAAC,SAACC;eAAU,4CACrBA;YACHT,sBAAsB,SAACU;gBACnBX,MAAMY,QAAQ,CAAC,SAACC;wBAuBZZ;oBAtBA,IAAMa,kBAAkBC,IAAAA,2BAAgB,EACpCJ,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIG,IAAAA,sBAAO,EAACH,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAMI,OAAOjB,MAAMkB,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACP,iBAAiBQ,OAAO,CAAC,SAACC;wBAClC,IAAIT,eAAe,CAACS,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBH,eAAe,CAACS,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;qBAEAhB,wBAAAA,kCAAAA,4CAAAA,sBAAuBmB,OAAOO,MAAM,CAACb;oBAErC,OAAO,4CACAD;wBACHe,cAAcd;;gBAEtB;YACJ;;;IAGJ,IAAMP,iBAAiB;QACnBP,MAAM6B,iBAAiB,CAAC;IAC5B;IAEA,IAAMC,kBAAkB;eAAMV,OAAOO,MAAM,CAAC,AAAC3B,MAAM+B,QAAQ,GAAqBH,YAAY;;QAE/DE;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACvB,gBAAAA;QAAgByB,gBAAAA;QAAgBF,iBAAAA;QAAiB1B,iBAAAA;IAAe;AAC5E"}

package/dist/esm/components/code-editor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAyIzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA2IzD,CAAC"}

package/dist/esm/components/code-editor/CodeEditor.js

@@ -91,8 +91,10 @@ export var CodeEditor = function(props) {
         }
     };
     var handleSearch = function() {
-        editorRef.current.focus();
-        editorRef.current.trigger("editor", "actions.find", "");
+        if (editorRef.current) {
+            editorRef.current.focus();
+            editorRef.current.trigger("editor", "actions.find", "");
+        }
     };
     useEffect(function() {
         if (monacoLoader === "local") {

package/dist/esm/components/code-editor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        editorRef.current.focus();\n        editorRef.current.trigger('editor', 'actions.find', '');\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(onFocus);\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useRef","useParentHeight","XML","CopyToClipboard","Search","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","classes","finalValue","_value","handleChange","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","_label","Label","_description","Description","_error","Error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(onFocus);\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useRef","useParentHeight","XML","CopyToClipboard","Search","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","classes","finalValue","_value","handleChange","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","_label","Label","_description","Description","_error","Error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","sx","Math","max"],"mappings":"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"}

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAC,MAAM,eAAe,CAAC;AAG9D,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,oBAAoB,CAAC;CAC/B;AAED,UAAU,iCAAiC,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,sHA4CvC,CAAC"}
+{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAC,MAAM,eAAe,CAAC;AAG9D,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,oBAAoB,CAAC;CAC/B;AAED,UAAU,iCAAiC,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,sHA6CvC,CAAC"}

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js

@@ -46,7 +46,8 @@ export var DateRangePickerPresetSelect = function(param) {
     }, selectProps), {
         value: selectedPreset,
         onChange: onChangePreset,
-        data: selectData
+        data: selectData,
+        maxDropdownHeight: 240
     }));
 };
 

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {Select, SelectItem, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n    const selectData: SelectItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!)\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n        />\n    );\n};\n"],"names":["Select","dayjs","useEffect","useState","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data"],"mappings":";;;;AAAA,SAAQA,MAAM,QAAgC,gBAAgB;AAC9D,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAe1C,OAAO,IAAMC,8BAA8B;QACvCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA2BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;iDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEpG,IAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQL,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOf,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,IAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC;yDAAEC,gBAAI,AAACC,kBAAAA;uBAAYnB,MAAMmB,KAAK,CAAC,EAAE,EAAGC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKL,MAAMK,KAAK,CAAC,EAAE,EAAGe,MAAM,CAACf,KAAK,CAAC,EAAE;;YAE5F,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,IAA4Cd,6BAAAA,SAAwBY,0BAA7DO,iBAAqCnB,cAArBoB,oBAAqBpB;IAE5CD,UAAU;QACN,IAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB;IACJ,GAAG;QAAClB;KAAM;IAEV,IAAMmB,iBAAiB,SAACC;YAEpBnB;QADA,IAAMa,QAAQf,OAAO,CAACqB,SAAS,CAACN,KAAK;SACrCb,YAAAA,sBAAAA,gCAAAA,UAAWa;IACf;IAEA,qBACI,KAACpB;QACGc,OAAM;QACNa,aAAY;OACRnB;QACJF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;;AAGlB,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {Select, SelectItem, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n    const selectData: SelectItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!)\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n            maxDropdownHeight={240}\n        />\n    );\n};\n"],"names":["Select","dayjs","useEffect","useState","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data","maxDropdownHeight"],"mappings":";;;;AAAA,SAAQA,MAAM,QAAgC,gBAAgB;AAC9D,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAe1C,OAAO,IAAMC,8BAA8B;QACvCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA2BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;iDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEpG,IAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQL,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOf,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,IAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC;yDAAEC,gBAAI,AAACC,kBAAAA;uBAAYnB,MAAMmB,KAAK,CAAC,EAAE,EAAGC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKL,MAAMK,KAAK,CAAC,EAAE,EAAGe,MAAM,CAACf,KAAK,CAAC,EAAE;;YAE5F,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,IAA4Cd,6BAAAA,SAAwBY,0BAA7DO,iBAAqCnB,cAArBoB,oBAAqBpB;IAE5CD,UAAU;QACN,IAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB;IACJ,GAAG;QAAClB;KAAM;IAEV,IAAMmB,iBAAiB,SAACC;YAEpBnB;QADA,IAAMa,QAAQf,OAAO,CAACqB,SAAS,CAACN,KAAK;SACrCb,YAAAA,sBAAAA,gCAAAA,UAAWa;IACf;IAEA,qBACI,KAACpB;QACGc,OAAM;QACNa,aAAY;OACRnB;QACJF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;QACNoB,mBAAmB;;AAG/B,EAAE"}

package/dist/esm/components/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AASA,OAAO,EAAwC,SAAS,EAAC,MAAM,eAAe,CAAC;AAiB/E,eAAO,MAAM,KAAK,EAAE,SAwKnB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAwC,SAAS,EAAC,MAAM,eAAe,CAAC;AAiB/E,eAAO,MAAM,KAAK,EAAE,SA+KnB,CAAC"}

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

@@ -2,14 +2,16 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Center, Loader, Table as MantineTable } from "@mantine/core";
+import { Box, Center, Loader } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDidUpdate } from "@mantine/hooks";
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import debounce from "lodash.debounce";
 import defaultsDeep from "lodash.defaultsdeep";
-import { Children, useCallback, useEffect, useState } from "react";
+import { Children, cloneElement, useCallback, useEffect, useState } from "react";
+import { TableLayouts } from "./layouts/TableLayouts";
 import useStyles from "./Table.styles";
 import { TableActions } from "./TableActions";
 import { TableAccordionColumn, TableCollapsibleColumn } from "./TableCollapsibleColumn";
@@ -19,17 +21,17 @@ import { TableDateRangePicker } from "./TableDateRangePicker";
 import { TableFilter } from "./TableFilter";
 import { TableFooter } from "./TableFooter";
 import { TableHeader } from "./TableHeader";
+import { TableLastUpdated } from "./TableLastUpdated";
+import { TableLoading } from "./TableLoading";
 import { TablePagination } from "./TablePagination";
 import { TablePerPage } from "./TablePerPage";
 import { TablePredicate } from "./TablePredicate";
 import { TableSelectableColumn } from "./TableSelectableColumn";
 import { useRowSelection } from "./useRowSelection";
-import { TableLoading } from "./TableLoading";
-import { TableLayouts } from "./layouts/TableLayouts";
 export var Table = function(param) {
     var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, _param_layouts = param.layouts, layouts = _param_layouts === void 0 ? [
         TableLayouts.Rows
-    ] : _param_layouts, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled, disableRowSelection = param.disableRowSelection, onRowSelectionChange = param.onRowSelectionChange, _param_options = param.options, options = _param_options === void 0 ? {} : _param_options;
+    ] : _param_layouts, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled, disableRowSelection = param.disableRowSelection, onRowSelectionChange = param.onRowSelectionChange, additionalRootNodes = param.additionalRootNodes, _param_options = param.options, options = _param_options === void 0 ? {} : _param_options;
     var _initialState, _initialState1, _initialState2, _options, _getExpandChildren, _form_values, _form_values_dateRange, _form_values_dateRange1;
     var convertedChildren = Children.toArray(children);
     var header = convertedChildren.find(function(child) {
@@ -41,6 +43,9 @@ export var Table = function(param) {
     var consumer = convertedChildren.find(function(child) {
         return child.type === TableConsumer;
     });
+    var lastUpdated = convertedChildren.find(function(child) {
+        return child.type === TableLastUpdated;
+    });
     var predicates = initialState.predicates, dateRange = initialState.dateRange, initialStateWithoutForm = _object_without_properties(initialState, [
         "predicates",
         "dateRange"
@@ -62,7 +67,8 @@ export var Table = function(param) {
         initialState: defaultsDeep(initialStateWithoutForm, {
             pagination: {
                 pageSize: TablePerPage.DEFAULT_SIZE
-            }
+            },
+            globalFilter: ""
         }),
         data: data,
         columns: multiRowSelectionEnabled ? [
@@ -86,7 +92,8 @@ export var Table = function(param) {
     });
     var _useRowSelection = useRowSelection(table, {
         multiRowSelectionEnabled: multiRowSelectionEnabled,
-        onRowSelectionChange: onRowSelectionChange
+        onRowSelectionChange: onRowSelectionChange,
+        additionalRootNodes: additionalRootNodes
     }), clearSelection = _useRowSelection.clearSelection, getSelectedRow = _useRowSelection.getSelectedRow, getSelectedRows = _useRowSelection.getSelectedRows, outsideClickRef = _useRowSelection.outsideClickRef;
     var _form_values_predicates;
     var isFiltered = !!state.globalFilter || Object.keys((_form_values_predicates = (_form_values = form.values) === null || _form_values === void 0 ? void 0 : _form_values.predicates) !== null && _form_values_predicates !== void 0 ? _form_values_predicates : {}).some(function(predicate) {
@@ -137,6 +144,7 @@ export var Table = function(param) {
         return name === form.values.layout;
     });
     var hasRows = table.getRowModel().rows.length > 0;
+    var _lastUpdated_props_dependencies;
     return /*#__PURE__*/ _jsx(Box, {
         ref: outsideClickRef,
         children: /*#__PURE__*/ _jsxs(TableContext.Provider, {
@@ -160,10 +168,9 @@ export var Table = function(param) {
                 consumer,
                 !hasRows && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
-                        /*#__PURE__*/ _jsxs(MantineTable, {
+                        /*#__PURE__*/ _jsxs(Box, {
+                            component: "table",
                             className: classes.table,
-                            horizontalSpacing: "sm",
-                            verticalSpacing: "xs",
                             pb: "sm",
                             children: [
                                 /*#__PURE__*/ _jsxs("thead", {
@@ -171,10 +178,8 @@ export var Table = function(param) {
                                     children: [
                                         !!header ? /*#__PURE__*/ _jsx("tr", {
                                             children: /*#__PURE__*/ _jsx("th", {
-                                                // need to use inline style because Mantine define style on `.mantine-{id} thead tr th`
                                                 style: {
-                                                    padding: 0,
-                                                    fontWeight: "unset"
+                                                    padding: 0
                                                 },
                                                 colSpan: table.getAllColumns().length,
                                                 children: header
@@ -206,7 +211,12 @@ export var Table = function(param) {
                                 })
                             ]
                         }),
-                        footer
+                        footer,
+                        lastUpdated ? /*#__PURE__*/ cloneElement(lastUpdated, {
+                            dependencies: [
+                                data
+                            ].concat(_to_consumable_array((_lastUpdated_props_dependencies = lastUpdated.props.dependencies) !== null && _lastUpdated_props_dependencies !== void 0 ? _lastUpdated_props_dependencies : []))
+                        }) : null
                     ]
                 })
             ]
@@ -217,6 +227,7 @@ Table.Actions = TableActions;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;
 Table.Header = TableHeader;
+Table.LastUpdated = TableLastUpdated;
 Table.Pagination = TablePagination;
 Table.Predicate = TablePredicate;
 Table.PerPage = TablePerPage;