@coveord/plasma-mantine 52.5.0 → 52.7.0

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableLayoutControl", {
+    enumerable: true,
+    get: function() {
+        return TableLayoutControl;
+    }
+});
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _jsxruntime = require("react/jsx-runtime");
+var _core = require("@mantine/core");
+var _Tablestyles = require("./Table.styles");
+var _TableContext = require("./TableContext");
+var TableLayoutControl = function() {
+    var _useTable = (0, _TableContext.useTable)(), form = _useTable.form, layouts = _useTable.layouts;
+    return layouts.length > 1 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+        order: _Tablestyles.TableComponentsOrder.LayoutControl,
+        span: "content",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.SegmentedControl, _object_spread._({
+            color: "action",
+            data: layouts.map(function(param) {
+                var name = param.name, Icon = param.icon;
+                return {
+                    value: name,
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Center, {
+                        children: [
+                            Icon ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
+                                        height: 16
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Space, {
+                                        w: "xs"
+                                    })
+                                ]
+                            }) : null,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+                                children: name
+                            })
+                        ]
+                    })
+                };
+            })
+        }, form.getInputProps("layout")))
+    }) : null;
+};
+
+//# sourceMappingURL=TableLayoutControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/TableLayoutControl.tsx"],"sourcesContent":["import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nexport const TableLayoutControl = () => {\n    const {form, layouts} = useTable();\n    return layouts.length > 1 ? (\n        <Grid.Col order={TableComponentsOrder.LayoutControl} span=\"content\">\n            <SegmentedControl\n                color=\"action\"\n                data={layouts.map(({name, icon: Icon}) => ({\n                    value: name,\n                    label: (\n                        <Center>\n                            {Icon ? (\n                                <>\n                                    <Icon height={16} />\n                                    <Space w=\"xs\" />\n                                </>\n                            ) : null}\n                            <Box>{name}</Box>\n                        </Center>\n                    ),\n                }))}\n                {...form.getInputProps('layout')}\n            />\n        </Grid.Col>\n    ) : null;\n};\n"],"names":["TableLayoutControl","useTable","form","layouts","length","Grid","Col","order","TableComponentsOrder","LayoutControl","span","SegmentedControl","color","data","map","name","icon","Icon","value","label","Center","height","Space","w","Box","getInputProps"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;oBAJ4C;2BACtB;4BACZ;AAEhB,IAAMA,qBAAqB;IAC9B,IAAwBC,YAAAA,IAAAA,2BAAjBC,OAAiBD,UAAjBC,MAAMC,UAAWF,UAAXE;IACb,OAAOA,QAAQC,SAAS,kBACpB,qBAACC,WAAKC;QAAIC,OAAOC,kCAAqBC;QAAeC,MAAK;kBACtD,cAAA,qBAACC;YACGC,OAAM;YACNC,MAAMV,QAAQW,IAAI;oBAAEC,aAAAA,MAAMC,AAAMC,aAAND;uBAAiB;oBACvCE,OAAOH;oBACPI,qBACI,sBAACC;;4BACIH,qBACG;;kDACI,qBAACA;wCAAKI,QAAQ;;kDACd,qBAACC;wCAAMC,GAAE;;;iCAEb;0CACJ,qBAACC;0CAAKT;;;;gBAGlB;;WACIb,KAAKuB,cAAc;SAG/B;AACR"}

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

@@ -0,0 +1,4 @@
+import { SkeletonProps } from '@mantine/core';
+import { FunctionComponent } from 'react';
+export declare const TableLoading: FunctionComponent<SkeletonProps>;
+//# sourceMappingURL=TableLoading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableLoading.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,aAAa,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,aAAa,CAIzD,CAAC"}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableLoading", {
+    enumerable: true,
+    get: function() {
+        return TableLoading;
+    }
+});
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _jsxruntime = require("react/jsx-runtime");
+var _core = require("@mantine/core");
+var TableLoading = function(props) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Skeleton, _object_spread_props._(_object_spread._({
+        style: {
+            display: "inline-block"
+        }
+    }, props), {
+        sx: !props.visible ? {
+            borderRadius: 0
+        } : undefined,
+        children: props.children
+    }));
+};
+
+//# sourceMappingURL=TableLoading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/TableLoading.tsx"],"sourcesContent":["import {Skeleton, SkeletonProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport const TableLoading: FunctionComponent<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n"],"names":["TableLoading","props","Skeleton","style","display","sx","visible","borderRadius","undefined","children"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;;oBAHyB;AAG/B,IAAMA,eAAiD,SAACC;yBAC3D,qBAACC;QAASC,OAAO;YAACC,SAAS;QAAc;OAAOH;QAAOI,IAAI,CAACJ,MAAMK,UAAU;YAACC,cAAc;QAAC,IAAIC;kBAC3FP,MAAMQ"}

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,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDC,YAAAA,IAAAA,sBAAQ,KAAvDC,QAA+CD,UAA/CC,OAAOC,WAAwCF,UAAxCE,UAAUC,eAA8BH,UAA9BG,cAAcC,eAAgBJ,UAAhBI;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,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,IAAI,GAAGK,iBAAiBL,UAAU;IAE/D,qBACI,qBAACe,gBAAU;QACPC,OAAOd,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCO,UAAUX;QACVQ,OAAOA;QACPI,YAAY;QACZC,MAAK;QACLC,iBAAiB,SAACC,SAAY;YAC1B,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            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,2BAA/CC,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;oBAAYC,WAAWH,UAAU;;;;QAE/DH,aAAaO,QAAQC,eAAe;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQd,eAAe,OAAOK,iBAAiBL;IAErD,qBACI,qBAACe;QACGC,OAAOd,MAAMO,WAAWC,YAAY;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"}

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,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BC,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,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,sCAAwCF,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACe,QAAQ,EAAE;gBACrEC,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>\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;IAEtB,IAA0BC,YAAAA,IAAAA,2BAAnBC,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;;0BACG,qBAACC;0BAAMb;;0BACP,qBAACc;gBACGC,OAAOZ,CAAAA,sCAAAA,MAAMK,WAAWE,SAASM,wBAA1Bb,iDAAAA,sCAAwCF,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACe;gBAC3DC,UAAUZ;gBACVa,MAAMjB,OAAOkB,IAAI,SAACJ;2BAAUA,MAAMC;;gBAClCI,OAAM;gBACNC,MAAK;;;;AAIrB;AAEAtB,aAAauB,eAAe"}

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

@@ -1,6 +1,16 @@
-import { SelectItem } from '@mantine/core';
+import { DefaultProps, SelectItem, Selectors } from '@mantine/core';
 import { FunctionComponent } from 'react';
-interface TablePredicateProps {
+declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        root: string;
+        wrapper: string;
+        label: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+type TablePredicateStylesNames = Selectors<typeof useStyles>;
+interface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {
     /**
      * Unique identifier for this predicate. Will be used to access the selected value in the table state
      */

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

@@ -1 +1 @@
-{"version":3,"file":"TablePredicate.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePredicate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,UAAU,EAAO,MAAM,eAAe,CAAC;AACpE,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAKxC,UAAU,mBAAmB;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAuBjE,CAAC"}
+{"version":3,"file":"TablePredicate.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePredicate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAuB,UAAU,EAAE,SAAS,EAAO,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAKxC,QAAA,MAAM,SAAS;;;;;;;;CAIZ,CAAC;AAEJ,KAAK,yBAAyB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAE7D,UAAU,mBAAoB,SAAQ,YAAY,CAAC,yBAAyB,CAAC;IACzE;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAgCjE,CAAC"}

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

@@ -11,25 +11,50 @@ Object.defineProperty(exports, "TablePredicate", {
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
 var _Tablestyles = require("./Table.styles");
 var _TableContext = require("./TableContext");
-var TablePredicate = function(param) {
-    var id = param.id, data = param.data, label = param.label;
+var useStyles = (0, _core.createStyles)(function(theme) {
+    return {
+        root: {},
+        wrapper: {},
+        label: {}
+    };
+});
+var TablePredicate = function(_param) {
+    var id = _param.id, data = _param.data, label = _param.label, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties._(_param, [
+        "id",
+        "data",
+        "label",
+        "classNames",
+        "styles",
+        "unstyled"
+    ]);
+    var classes = useStyles(null, {
+        name: "TablePredicate",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }).classes;
     var _useTable = (0, _TableContext.useTable)(), onChange = _useTable.onChange, form = _useTable.form;
     var onUpdate = function(newValue) {
         form.setFieldValue("predicates", _object_spread_props._(_object_spread._({}, form.values.predicates), _define_property._({}, id, newValue)));
         onChange === null || onChange === void 0 ? void 0 : onChange();
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
         order: _Tablestyles.TableComponentsOrder.Predicate,
         py: "sm",
+        className: classes.root
+    }, others), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
             spacing: "xs",
+            className: classes.wrapper,
             children: [
                 label ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Text, {
+                    className: classes.label,
                     children: [
                         label,
                         ":"
@@ -45,7 +70,7 @@ var TablePredicate = function(param) {
                 })
             ]
         })
-    });
+    }));
 };
 
 //# sourceMappingURL=TablePredicate.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Grid, Group, Select, SelectItem, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\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        <Grid.Col span=\"content\" order={TableComponentsOrder.Predicate} py=\"sm\">\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        </Grid.Col>\n    );\n};\n"],"names":["TablePredicate","id","data","label","useTable","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","Grid","Col","span","order","TableComponentsOrder","Predicate","py","Group","spacing","Text","Select","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;oBAvBuC;2BAEjB;4BAEZ;AAmBhB,IAAMA,iBAAyD,gBAAuB;QAArBC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBC,YAAAA,IAAAA,sBAAQ,KAA1BC,WAAkBD,UAAlBC,UAAUC,OAAQF,UAARE;IAEjB,IAAMC,WAAW,SAACC,UAAqB;QACnCF,KAAKG,aAAa,CAAC,cAAc,4CAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,uBAACV,IAAKO;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,qBAACO,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,SAAS;QAAEC,IAAG;kBAC/D,cAAA,sBAACC,WAAK;YAACC,SAAQ;;gBACVjB,sBAAQ,sBAACkB,UAAI;;wBAAElB;wBAAM;;qBAAW,IAAI;8BACrC,qBAACmB,YAAM;oBACHC,YAAY;oBACZC,OAAOlB,KAAKI,MAAM,CAACC,UAAU,CAACV,GAAG;oBACjCI,UAAUE;oBACVL,MAAMA;oBACNuB,cAAYtB,kBAAAA,mBAAAA,QAASF,EAAE;oBACvByB,YAAYxB,KAAKyB,MAAM,GAAG;;;;;AAK9C"}
+{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Grid, Group, Select, SelectItem, Selectors, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {},\n    label: {},\n}));\n\ntype TablePredicateStylesNames = Selectors<typeof useStyles>;\n\ninterface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {\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> = ({\n    id,\n    data,\n    label,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TablePredicate', classNames, styles, unstyled});\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        <Grid.Col span=\"content\" order={TableComponentsOrder.Predicate} py=\"sm\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {label ? <Text className={classes.label}>{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        </Grid.Col>\n    );\n};\n"],"names":["TablePredicate","useStyles","createStyles","theme","root","wrapper","label","id","data","classNames","styles","unstyled","others","classes","name","useTable","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","Grid","Col","span","order","TableComponentsOrder","Predicate","py","className","Group","spacing","Text","Select","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;oBA/B8E;2BAGxD;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;IACZ;;AAqBO,IAAMN,iBAAyD;QAClEO,YAAAA,IACAC,cAAAA,MACAF,eAAAA,OACAG,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QANHL;QACAC;QACAF;QACAG;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWZ,UAAU,MAAM;QAACa,MAAM;QAAkBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAhFE;IACP,IAAyBE,YAAAA,IAAAA,2BAAlBC,WAAkBD,UAAlBC,UAAUC,OAAQF,UAARE;IAEjB,IAAMC,WAAW,SAACC;QACdF,KAAKG,cAAc,cAAc,4CAAIH,KAAKI,OAAOC,aAAY,uBAACf,IAAKY;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,qBAACO,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAAWC,IAAG;QAAKC,WAAWjB,QAAQT;OAAUQ;kBACjG,cAAA,sBAACmB;YAAMC,SAAQ;YAAKF,WAAWjB,QAAQR;;gBAClCC,sBAAQ,sBAAC2B;oBAAKH,WAAWjB,QAAQP;;wBAAQA;wBAAM;;qBAAW;8BAC3D,qBAAC4B;oBACGC,YAAY;oBACZC,OAAOnB,KAAKI,OAAOC,UAAU,CAACf,GAAG;oBACjCS,UAAUE;oBACVV,MAAMA;oBACN6B,cAAY/B,kBAAAA,mBAAAA,QAASC;oBACrB+B,YAAY9B,KAAK+B,SAAS;;;;;AAK9C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableSelectableColumn.tsx"],"sourcesContent":["import {Checkbox, Tooltip} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\n\n/**\n * Generic column to use when your table needs multi selection of rows\n */\nexport const TableSelectableColumn: ColumnDef<unknown> = {\n    id: 'select',\n    enableSorting: false,\n    header: ({table}) => {\n        const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';\n        return (\n            <Tooltip label={label}>\n                <Checkbox\n                    checked={table.getIsAllPageRowsSelected()}\n                    indeterminate={table.getIsSomePageRowsSelected()}\n                    onChange={table.getToggleAllPageRowsSelectedHandler()}\n                    sx={{display: 'flex'}}\n                    aria-label={label}\n                />\n            </Tooltip>\n        );\n    },\n    cell: ({row}) => (\n        <Checkbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={row.getToggleSelectedHandler()}\n            sx={{display: 'flex'}}\n            aria-label=\"Select row\"\n        />\n    ),\n};\n"],"names":["TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","Tooltip","Checkbox","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":";;;;+BAMaA;;;eAAAA;;;;oBANmB;AAMzB,IAAMA,wBAA4C;IACrDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ,gBAAa;YAAXC,cAAAA;QACN,IAAMC,QAAQD,MAAME,oBAAoB,KAAK,gCAAgC,2BAA2B;QACxG,qBACI,qBAACC,aAAO;YAACF,OAAOA;sBACZ,cAAA,qBAACG,cAAQ;gBACLC,SAASL,MAAMM,wBAAwB;gBACvCC,eAAeP,MAAMQ,yBAAyB;gBAC9CC,UAAUT,MAAMU,mCAAmC;gBACnDC,IAAI;oBAACC,SAAS;gBAAM;gBACpBC,cAAYZ;;;IAI5B;IACAa,MAAM;YAAEC,YAAAA;6BACJ,qBAACX,cAAQ;YACLC,SAASU,IAAIC,aAAa;YAC1BT,eAAeQ,IAAIE,iBAAiB;YACpCR,UAAUM,IAAIG,wBAAwB;YACtCP,IAAI;gBAACC,SAAS;YAAM;YACpBC,cAAW;;;AAGvB"}
+{"version":3,"sources":["../../../../src/components/table/TableSelectableColumn.tsx"],"sourcesContent":["import {Checkbox, Tooltip} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\n\n/**\n * Generic column to use when your table needs multi selection of rows\n */\nexport const TableSelectableColumn: ColumnDef<unknown> = {\n    id: 'select',\n    enableSorting: false,\n    header: ({table}) => {\n        const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';\n        return (\n            <Tooltip label={label}>\n                <Checkbox\n                    checked={table.getIsAllPageRowsSelected()}\n                    indeterminate={table.getIsSomePageRowsSelected()}\n                    onChange={table.getToggleAllPageRowsSelectedHandler()}\n                    sx={{display: 'flex'}}\n                    aria-label={label}\n                />\n            </Tooltip>\n        );\n    },\n    cell: ({row}) => (\n        <Checkbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={row.getToggleSelectedHandler()}\n            sx={{display: 'flex'}}\n            aria-label=\"Select row\"\n        />\n    ),\n};\n"],"names":["TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","Tooltip","Checkbox","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":";;;;+BAMaA;;;eAAAA;;;;oBANmB;AAMzB,IAAMA,wBAA4C;IACrDC,IAAI;IACJC,eAAe;IACfC,QAAQ;YAAEC,cAAAA;QACN,IAAMC,QAAQD,MAAME,yBAAyB,gCAAgC;QAC7E,qBACI,qBAACC;YAAQF,OAAOA;sBACZ,cAAA,qBAACG;gBACGC,SAASL,MAAMM;gBACfC,eAAeP,MAAMQ;gBACrBC,UAAUT,MAAMU;gBAChBC,IAAI;oBAACC,SAAS;gBAAM;gBACpBC,cAAYZ;;;IAI5B;IACAa,MAAM;YAAEC,YAAAA;6BACJ,qBAACX;YACGC,SAASU,IAAIC;YACbT,eAAeQ,IAAIE;YACnBR,UAAUM,IAAIG;YACdP,IAAI;gBAACC,SAAS;YAAM;YACpBC,cAAW;;;AAGvB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAsB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAqCd,CAAC"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAuB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAqCd,CAAC"}

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

@@ -17,7 +17,8 @@ var useStyles = (0, _core.createStyles)(function(theme) {
         th: {
             fontWeight: "400 !important",
             padding: "0 !important",
-            verticalAlign: "middle"
+            verticalAlign: "middle",
+            whiteSpace: "nowrap"
         },
         control: {
             width: "100%",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        whiteSpace: 'nowrap',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        color: theme.colors.gray[6],\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text size=\"xs\" py=\"xs\" px=\"sm\" fw={500}>\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\" fw={500}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                    </Text>\n                    <Center>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","fontWeight","padding","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","py","px","fw","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","height"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;gCAxC8D;oBACX;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPH,SAAS,AAAC,GAAsBH,OAApBA,MAAMO,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBR,MAAMO,OAAO,CAACE,EAAE;YAChDC,YAAY;YACZC,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FC,OAAOf,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAE3B,WAAW;gBACPH,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAME,eAAe;IACjBC,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMxB,KAAK,gBAA8B;QAAxB2B,eAAAA;IACpB,IAAM,AAACC,UAAW3B,YAAX2B;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMtB,QAAQoB,SAASG,+BAAmB,CAACH,IAAI,GAAGA,OAAOI,SAAS;IAElE,IAAIN,OAAOO,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACP,OAAOG,MAAM,CAACK,UAAU,IAAI;QAC7B,qBACI,qBAAC/B;YAAGgC,WAAWR,QAAQxB,EAAE;YAAEiC,OAAO;gBAAC5B,OAAAA;YAAK;sBACpC,cAAA,qBAAC6B,UAAI;gBAACT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BC,IAAAA,sBAAU,EAACf,OAAOG,MAAM,CAACa,SAAS,CAAChB,MAAM,EAAEA,OAAOiB,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASlB,OAAOG,MAAM,CAACgB,uBAAuB;IACpD,IAAMC,eAAepB,OAAOG,MAAM,CAACkB,WAAW,MAAM;IACpD,IAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,qBAAC3C;QAAGgC,WAAWR,QAAQxB,EAAE;QAAEiC,OAAO;YAAC5B,OAAAA;QAAK;QAAGyC,aAAWxB,aAAa,CAACqB,aAAa;kBAC7E,cAAA,qBAACI,oBAAc;YAACC,SAASP;YAAQT,WAAWR,QAAQpB,OAAO;sBACvD,cAAA,sBAAC6C,WAAK;gBAACC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB,UAAI;wBAACT,MAAK;wBAAKY,IAAI;kCACfC,IAAAA,sBAAU,EAACf,OAAOG,MAAM,CAACa,SAAS,CAAChB,MAAM,EAAEA,OAAOiB,UAAU;;kCAEjE,qBAACY,YAAM;kCACH,cAAA,qBAACP;4BAAKQ,QAAQ;;;;;;;AAMtC"}
+{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        whiteSpace: 'nowrap',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        color: theme.colors.gray[6],\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text size=\"xs\" py=\"xs\" px=\"sm\" fw={500}>\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\" fw={500}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                    </Text>\n                    <Center>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","fontWeight","padding","verticalAlign","whiteSpace","control","width","spacing","xs","sm","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","py","px","fw","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","height"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;gCAzC8D;oBACX;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;QAChB;QAEAC,SAAS;YACLC,OAAO;YACPJ,SAAS,AAAC,GAAsBH,OAApBA,MAAMQ,QAAQC,IAAG,KAAoB,OAAjBT,MAAMQ,QAAQE;YAC9CL,YAAY;YACZM,iBAAiBX,MAAMY,gBAAgB,SAASZ,MAAMa,OAAOC,IAAI,CAAC,EAAE,GAAGd,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAC3FC,OAAOf,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAE3B,WAAW;gBACPH,iBAAiBX,MAAMY,gBAAgB,SAASZ,MAAMa,OAAOC,IAAI,CAAC,EAAE,GAAGd,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAME,eAAe;IACjBC,KAAKC;IACLC,MAAMC;IACNC,MAAMC;AACV;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMxB,KAAK;QAAM2B,eAAAA;IACpB,IAAM,AAACC,UAAW3B,YAAX2B;IACP,IAAMC,OAAOF,OAAOG,OAAOC;IAC3B,IAAMrB,QAAQmB,SAASG,gCAAoBH,OAAOA,OAAOI;IAEzD,IAAIN,OAAOO,eAAe;QACtB,OAAO;IACX;IAEA,IAAI,CAACP,OAAOG,OAAOK,cAAc;QAC7B,qBACI,qBAAC/B;YAAGgC,WAAWR,QAAQxB;YAAIiC,OAAO;gBAAC3B,OAAAA;YAAK;sBACpC,cAAA,qBAAC4B;gBAAKT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BC,IAAAA,wBAAWf,OAAOG,OAAOa,UAAUhB,QAAQA,OAAOiB;;;IAInE;IAEA,IAAMC,SAASlB,OAAOG,OAAOgB;IAC7B,IAAMC,eAAepB,OAAOG,OAAOkB,iBAAiB;IACpD,IAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,qBAAC3C;QAAGgC,WAAWR,QAAQxB;QAAIiC,OAAO;YAAC3B,OAAAA;QAAK;QAAGwC,aAAWxB,aAAa,CAACqB,aAAa;kBAC7E,cAAA,qBAACI;YAAeC,SAASP;YAAQT,WAAWR,QAAQnB;sBAChD,cAAA,sBAAC4C;gBAAMC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB;wBAAKT,MAAK;wBAAKY,IAAI;kCACfC,IAAAA,wBAAWf,OAAOG,OAAOa,UAAUhB,QAAQA,OAAOiB;;kCAEvD,qBAACY;kCACG,cAAA,qBAACP;4BAAKQ,QAAQ;;;;;;;AAMtC"}

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

@@ -1,4 +1,5 @@
 export * from './Table';
 export { useTable } from './TableContext';
 export { type onTableChangeEvent, type InitialTableState, type TableState, type TableProps } from './Table.types';
+export { TableLayouts } from './layouts/TableLayouts';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AAChH,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC"}

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

@@ -2,14 +2,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useTable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTable: function() {
         return _TableContext.useTable;
+    },
+    TableLayouts: function() {
+        return _TableLayouts.TableLayouts;
     }
 });
 var _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./Table"), exports);
 var _TableContext = require("./TableContext");
+var _TableLayouts = require("./layouts/TableLayouts");
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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":";;;;+BACQA;;;eAAAA,sBAAQ;;;;uBADF;4BACS"}
+{"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';\nexport {TableLayouts} from './layouts/TableLayouts';\n"],"names":["useTable","TableLayouts"],"mappings":";;;;;;;;;;;IACQA,QAAQ;eAARA;;IAEAC,YAAY;eAAZA;;;;uBAHM;4BACS;4BAEI"}

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

@@ -0,0 +1,3 @@
+import { TableLayout } from '../Table.types';
+export declare const RowLayout: TableLayout;
+//# sourceMappingURL=RowLayout.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RowLayout", {
+    enumerable: true,
+    get: function() {
+        return RowLayout;
+    }
+});
+var _define_property = require("@swc/helpers/_/_define_property");
+var _jsxruntime = require("react/jsx-runtime");
+var _plasmareacticons = require("@coveord/plasma-react-icons");
+var _core = require("@mantine/core");
+var _reacttable = require("@tanstack/react-table");
+var _tablecore = require("@tanstack/table-core");
+var _react = require("react");
+var _TableCollapsibleColumn = require("../TableCollapsibleColumn");
+var _TableContext = require("../TableContext");
+var _TableLoading = require("../TableLoading");
+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];
+    return {
+        headerColumns: {
+            "& th:first-of-type > *": {
+                paddingLeft: theme.spacing.xl
+            },
+            "& input[type=checkbox]": {
+                backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
+                borderColor: disableRowSelection ? "".concat(theme.colors.gray[3]) : "".concat(theme.colors.gray[4]),
+                pointerEvents: disableRowSelection ? "none" : "auto",
+                cursor: disableRowSelection ? "not-allowed" : "default",
+                "& + svg": {
+                    color: disableRowSelection ? "".concat(theme.colors.gray[5]) : "inherit"
+                }
+            }
+        },
+        rowSelected: {
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
+        },
+        rowUnselectable: {
+            "& input[type=checkbox]": {
+                backgroundColor: "".concat(theme.colors.gray[2]),
+                borderColor: "".concat(theme.colors.gray[3]),
+                pointerEvents: "none",
+                cursor: "not-allowed",
+                "&:checked + svg": {
+                    color: "".concat(theme.colors.gray[5])
+                }
+            }
+        },
+        rowCollapsibleButtonCell: {
+            textAlign: "right",
+            padding: "calc(".concat(theme.spacing.xs, "/2) ").concat(theme.spacing.sm, " !important")
+        },
+        row: {
+            "&:hover": {
+                backgroundColor: rowBackgroundColor
+            }
+        }
+    };
+});
+var RowLayoutHeader = function(param) {
+    var table = param.table;
+    var _useTable = (0, _TableContext.useTable)(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
+    var classes = useStyles({
+        disableRowSelection: disableRowSelection,
+        multiRowSelectionEnabled: multiRowSelectionEnabled
+    }).classes;
+    var headers = table.getHeaderGroups().map(function(headerGroup) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+            className: classes.headerColumns,
+            children: headerGroup.headers.map(function(columnHeader) {
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Th.Th, {
+                    header: columnHeader
+                }, columnHeader.id);
+            })
+        }, headerGroup.id);
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: headers
+    });
+};
+var RowLayoutBody = function(param) {
+    var table = param.table, doubleClickAction = param.doubleClickAction, getExpandChildren = param.getExpandChildren, loading = param.loading;
+    var _useTable = (0, _TableContext.useTable)(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
+    var _useStyles = useStyles({
+        disableRowSelection: disableRowSelection,
+        multiRowSelectionEnabled: multiRowSelectionEnabled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
+    var rows = table.getRowModel().rows.map(function(row) {
+        var _getExpandChildren;
+        var rowChildren = (_getExpandChildren = getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original)) !== null && _getExpandChildren !== void 0 ? _getExpandChildren : null;
+        var isSelected = !!row.getIsSelected();
+        var _obj;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                    onClick: function() {
+                        return disableRowSelection ? undefined : row.toggleSelected();
+                    },
+                    onDoubleClick: function() {
+                        return doubleClickAction === null || doubleClickAction === void 0 ? void 0 : doubleClickAction(row.original);
+                    },
+                    className: cx(classes.row, (_obj = {}, _define_property._(_obj, classes.rowSelected, isSelected), _define_property._(_obj, classes.rowUnselectable, disableRowSelection), _obj)),
+                    "aria-selected": isSelected,
+                    children: row.getVisibleCells().map(function(cell) {
+                        var size = cell.column.getSize();
+                        var width = size !== _tablecore.defaultColumnSizing.size ? size : undefined;
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
+                            style: {
+                                width: width
+                            },
+                            className: cx(_define_property._({}, classes.rowCollapsibleButtonCell, cell.column.id === _TableCollapsibleColumn.TableCollapsibleColumn.id)),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLoading.TableLoading, {
+                                visible: loading,
+                                children: (0, _reacttable.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                            })
+                        }, cell.id);
+                    })
+                }),
+                rowChildren ? /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
+                        colSpan: table.getAllColumns().length,
+                        style: {
+                            padding: 0,
+                            borderTop: row.getIsExpanded() ? undefined : "none",
+                            borderBottom: row.getIsExpanded() ? undefined : "none"
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Collapse, {
+                            in: row.getIsExpanded(),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+                                px: "sm",
+                                py: "xs",
+                                children: rowChildren
+                            })
+                        })
+                    })
+                }) : null
+            ]
+        }, row.id);
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: rows
+    });
+};
+var RowLayout = {
+    name: "Rows",
+    icon: _plasmareacticons.ListSize16Px,
+    Header: RowLayoutHeader,
+    Body: RowLayoutBody
+};
+
+//# sourceMappingURL=RowLayout.js.map

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

@@ -0,0 +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":";;;;+BAgJaA;;;eAAAA;;;;;gCAhJc;oBACe;0BACjB;yBACS;qBACX;sCAEc;4BACd;4BACI;kBACV;AAOjB,IAAMC,YAAYC,IAAAA,oBAAwC,SAACC;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IACzF,IAAMC,qBACFH,MAAMI,gBAAgB,SAChBJ,MAAMK,GAAGC,KAAKN,MAAMO,MAAM,CAACP,MAAMQ,aAAa,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,aAAa,CAAC,EAAE;IAC7C,OAAO;QACHC,eAAe;YACX,0BAA0B;gBACtBC,aAAaV,MAAMW,QAAQC;YAC/B;YAEA,0BAA0B;gBACtBC,iBAAiBX,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,OAAOO,IAAI,CAAC,EAAE,IAAKC;gBACnEC,aAAad,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,OAAOO,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBd,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBACtFG,eAAef,sBAAsB,SAAS;gBAC9CgB,QAAQhB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPiB,OAAOjB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,OAAOO,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAM,aAAa;YACTP,iBAAiBZ,2BAA2Bc,YAAYZ;QAC5D;QAEAkB,iBAAiB;YACb,0BAA0B;gBACtBR,iBAAiB,AAAC,GAAuB,OAArBb,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBACxCE,aAAa,AAAC,GAAuB,OAArBhB,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBACpCG,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBnB,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAQ,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BxB,OAAvBA,MAAMW,QAAQc,IAAG,QAAuB,OAAjBzB,MAAMW,QAAQe,IAAG;QAC7D;QAEAC,KAAK;YACD,WAAW;gBACPd,iBAAiBV;YACrB;QACJ;IACJ;AACJ;AAEA,IAAMyB,kBAAkB;QAAMC,cAAAA;IAC1B,IAAwDC,YAAAA,IAAAA,2BAAjD7B,2BAAiD6B,UAAjD7B,0BAA0BC,sBAAuB4B,UAAvB5B;IACjC,IAAM,AAAC6B,UAAWjC,UAAU;QAACI,qBAAAA;QAAqBD,0BAAAA;IAAwB,GAAnE8B;IACP,IAAMC,UAAUH,MAAMI,kBAAkBC,IAAI,SAACC;6BACzC,qBAACC;YAAwBC,WAAWN,QAAQtB;sBACvC0B,YAAYH,QAAQE,IAAI,SAACI;qCACtB,qBAACC;oBAAyBC,QAAQF;mBAAzBA,aAAaG;;WAFrBN,YAAYM;;IAMzB,qBAAO;kBAAGT;;AACd;AAEA,IAAMU,gBAAgB;QAAMb,cAAAA,OAAOc,0BAAAA,mBAAmBC,0BAAAA,mBAAmBC,gBAAAA;IACrE,IAAwDf,YAAAA,IAAAA,2BAAjD7B,2BAAiD6B,UAAjD7B,0BAA0BC,sBAAuB4B,UAAvB5B;IACjC,IAAsBJ,aAAAA,UAAU;QAACI,qBAAAA;QAAqBD,0BAAAA;IAAwB,IAAvE8B,UAAejC,WAAfiC,SAASe,KAAMhD,WAANgD;IAEhB,IAAMC,OAAOlB,MAAMmB,cAAcD,KAAKb,IAAI,SAACP;YACnBiB;QAApB,IAAMK,cAAcL,CAAAA,qBAAAA,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBjB,IAAIuB,uBAAxBN,gCAAAA,qBAAqC;QACzD,IAAMO,aAAa,CAAC,CAACxB,IAAIyB;YAOc;QALvC,qBACI,sBAACC;;8BACG,qBAACjB;oBACGkB,SAAS;+BAAOpD,sBAAsBa,YAAYY,IAAI4B;;oBACtDC,eAAe;wBAAMb,OAAAA,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBhB,IAAIuB;;oBAC7Cb,WAAWS,GAAGf,QAAQJ,MAAK,WACvB,mBADuB,MACtBI,QAAQX,aAAc+B,aACvB,mBAFuB,MAEtBpB,QAAQV,iBAAkBnB,sBAFJ;oBAI3BuD,iBAAeN;8BAEdxB,IAAI+B,kBAAkBxB,IAAI,SAACyB;wBACxB,IAAMC,OAAOD,KAAKE,OAAOC;wBACzB,IAAMC,QAAQH,SAASI,+BAAoBJ,OAAOA,OAAO7C;wBACzD,qBACI,qBAACkD;4BAEGC,OAAO;gCAACH,OAAAA;4BAAK;4BACb1B,WAAWS,GACP,uBAACf,QAAQT,0BAA2BqC,KAAKE,OAAOpB,OAAO0B,+CAAuB1B;sCAGlF,cAAA,qBAAC2B;gCAAaC,SAASxB;0CAClByB,IAAAA,wBAAWX,KAAKE,OAAOU,UAAUZ,MAAMA,KAAKa;;2BAP5Cb,KAAKlB;oBAWtB;;gBAEHQ,4BACG,qBAACb;8BACG,cAAA,qBAAC6B;wBACGQ,SAAS5C,MAAM6C,gBAAgBC;wBAC/BT,OAAO;4BACH1C,SAAS;4BACToD,WAAWjD,IAAIkD,kBAAkB9D,YAAY;4BAC7C+D,cAAcnD,IAAIkD,kBAAkB9D,YAAY;wBACpD;kCAEA,cAAA,qBAACgE;4BAASC,IAAIrD,IAAIkD;sCACd,cAAA,qBAACI;gCAAIC,IAAG;gCAAKC,IAAG;0CACXlC;;;;qBAKjB;;WA7COtB,IAAIc;IAgD3B;IAEA,qBAAO;kBAAGM;;AACd;AAEO,IAAMlD,YAAyB;IAClCuF,MAAM;IACNC,MAAMC;IACNC,QAAQ3D;IACR4D,MAAM9C;AACV"}

package/dist/cjs/components/table/layouts/TableLayouts.d.ts

@@ -0,0 +1,4 @@
+export declare const TableLayouts: {
+    Rows: import("../Table.types").TableLayout;
+};
+//# sourceMappingURL=TableLayouts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableLayouts.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/TableLayouts.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;CAExB,CAAC"}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableLayouts", {
+    enumerable: true,
+    get: function() {
+        return TableLayouts;
+    }
+});
+var _RowLayout = require("./RowLayout");
+var TableLayouts = {
+    Rows: _RowLayout.RowLayout
+};
+
+//# sourceMappingURL=TableLayouts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/table/layouts/TableLayouts.tsx"],"sourcesContent":["import {RowLayout} from './RowLayout';\n\nexport const TableLayouts = {\n    Rows: RowLayout,\n};\n"],"names":["TableLayouts","Rows","RowLayout"],"mappings":";;;;+BAEaA;;;eAAAA;;;yBAFW;AAEjB,IAAMA,eAAe;IACxBC,MAAMC;AACV"}

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,cAKC;QAHGC,6BAAAA,sBACAC,iCAAAA;IAGJ,IAAMC,kBAAkBC,IAAAA,sBAAe,EAAC,WAAM;QAC1C,IAAI,CAACF,0BAA0B;YAC3BG;QACJ,CAAC;IACL;IAEAL,MAAMM,UAAU,CAAC,SAACC;QAAU,OAAA,4CACrBA;YACHN,sBAAsB,SAACO,qBAAwB;gBAC3CR,MAAMS,QAAQ,CAAC,SAACC,KAAQ;oBACpB,IAAMC,kBAAkBC,IAAAA,2BAAgB,EACpCJ,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIG,IAAAA,sBAAO,EAACH,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX,CAAC;oBAED,IAAMI,OAAOd,MAAMe,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACP,iBAAiBQ,OAAO,CAAC,SAACC,OAAU;wBAC5C,IAAIT,eAAe,CAACS,MAAM,KAAK,IAAI,EAAE;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER,CAAC;gCACwBR;4BAAzBH,eAAe,CAACS,MAAM,GAAGN,CAAAA,uBAAAA,CAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,yBAAAA,KAAAA,IAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B,IAAI,AAAM;wBACjE,CAAC;oBACL;oBAEAb,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBgB,OAAOO,MAAM,CAACb;oBAErC,OAAO,4CACAD;wBACHe,cAAcd;;gBAEtB;YACJ;;;IAGJ,IAAMN,iBAAiB,WAAM;QACzBL,MAAM0B,iBAAiB,CAAC,IAAI;IAChC;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,IAAI;;IAEzD,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 {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,wBAAgB;QACpC,IAAI,CAACF,0BAA0B;YAC3BG;QACJ;IACJ;IAEAL,MAAMM,WAAW,SAACC;QAAU,OAAA,4CACrBA;YACHN,sBAAsB,SAACO;gBACnBR,MAAMS,SAAS,SAACC;oBACZ,IAAMC,kBAAkBC,IAAAA,6BACpBJ,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIG,IAAAA,wBAAQH,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAMI,OAAOd,MAAMe,cAAcC;oBAEjCC,OAAOC,KAAKP,iBAAiBQ,QAAQ,SAACC;wBAClC,IAAIT,eAAe,CAACS,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,MACJ;4BAER;gCACyBR;4BAAzBH,eAAe,CAACS,MAAM,GAAGN,CAAAA,uBAAAA,CAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,yBAAAA,KAAAA,IAAAA,YAAaS,sBAAbT,kCAAAA,uBAA0B;wBACvD;oBACJ;oBAEAb,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBgB,OAAOO,OAAOb;oBAErC,OAAO,4CACAD;wBACHe,cAAcd;;gBAEtB;YACJ;;;IAGJ,IAAMN,iBAAiB;QACnBL,MAAM0B,kBAAkB;IAC5B;IAEA,IAAMC,kBAAkB;eAAMV,OAAOO,OAAO,AAACxB,MAAM4B,WAA6BH;;QAEnDE;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACtB,gBAAAA;QAAgBwB,gBAAAA;QAAgBF,iBAAAA;QAAiBxB,iBAAAA;IAAe;AAC5E"}