@coveord/plasma-mantine 52.24.1 → 52.25.0

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

@@ -1 +1 @@
-{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,wBAmEG"}
+{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,wBA+DG"}

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

@@ -15,9 +15,6 @@ var _default = (0, _core.createStyles)(function(theme, param) {
     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: "40px"
-            },
             "& input[type=checkbox]": {
                 backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
                 borderColor: disableRowSelection ? "".concat(theme.colors.gray[3]) : "".concat(theme.colors.gray[4]),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((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            overflowWrap: 'anywhere',\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"],"names":["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","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":";;;;+BAMA;;;eAAA;;;oBANgC;IAMhC,WAAeA,IAAAA,kBAAY,EAAgC,SAACC;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IAC1F,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBW,IAAAA,SAAG,EAAC,IAAG,WAAoF,OAA3EX,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACK,IAAI,CAAC,EAAE,GAAGZ,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHI,eAAe;YACX,0BAA0B;gBACtBC,aAAa;YACjB;YAEA,0BAA0B;gBACtBC,iBAAiBb,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKO;gBACnEC,aAAaf,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFS,eAAehB,sBAAsB,SAAS;gBAC9CiB,QAAQjB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPkB,OAAOlB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAY,aAAa;YACTN,iBAAiBd,2BAA2Be,YAAYb;QAC5D;QAEAmB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBf,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCQ,aAAa,AAAC,GAAuB,OAArBjB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCS,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBpB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAc,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BzB,OAAvBA,MAAM0B,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjB3B,MAAM0B,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBf,aAAa;YACjB;YACA,WAAW;gBACPC,iBAAiBZ;YACrB;YACA2B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRR,SAAS,AAAC,GAAsBzB,OAApBA,MAAM0B,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjB3B,MAAM0B,OAAO,CAACE,EAAE;YAChDM,cAAcxB;QAClB;QAEAyB,aAAa;YACTpB,iBAAiBZ;YACjB+B,cAAcxB;QAClB;IACJ;AACJ"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((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            '& 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            overflowWrap: 'anywhere',\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"],"names":["createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","dark","headerColumns","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","paddingLeft","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":";;;;+BAMA;;;eAAA;;;oBANgC;IAMhC,WAAeA,IAAAA,kBAAY,EAAgC,SAACC;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IAC1F,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBW,IAAAA,SAAG,EAAC,IAAG,WAAoF,OAA3EX,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACK,IAAI,CAAC,EAAE,GAAGZ,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHI,eAAe;YACX,0BAA0B;gBACtBC,iBAAiBZ,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKM;gBACnEC,aAAad,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFQ,eAAef,sBAAsB,SAAS;gBAC9CgB,QAAQhB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPiB,OAAOjB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAW,aAAa;YACTN,iBAAiBb,2BAA2Bc,YAAYZ;QAC5D;QAEAkB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBd,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCO,aAAa,AAAC,GAAuB,OAArBhB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCQ,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBnB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAa,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BxB,OAAvBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBC,aAAa;YACjB;YACA,WAAW;gBACPf,iBAAiBX;YACrB;YACA2B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRT,SAAS,AAAC,GAAsBxB,OAApBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE;YAChDO,cAAcxB;QAClB;QAEAyB,aAAa;YACTrB,iBAAiBX;YACjB+B,cAAcxB;QAClB;IACJ;AACJ"}

package/dist/cjs/components/table/table-header/Th.d.ts

@@ -1,3 +1,3 @@
 import { ThProps } from './Th.types';
-export declare const Th: <T>({ header }: ThProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: <T>(props: ThProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Th.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AAcnC,eAAO,MAAM,EAAE,wEA0Cd,CAAC"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,OAAO,EAAC,MAAM,YAAY,CAAC;AAkB9C,eAAO,MAAM,EAAE,mEA0Cd,CAAC"}

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "Th", {
 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 _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
@@ -26,56 +27,58 @@ var SortingLabels = {
     desc: "descending",
     none: "none"
 };
-var Th = function(param) {
-    var header = param.header;
+var defaultProps = {
+    sortingIcons: SortingIcons
+};
+var Th = function(props) {
+    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("PlasmaTableColumnHeader", defaultProps, props), header = _useComponentDefaultProps.header, classNames = _useComponentDefaultProps.classNames, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, sortingIcons = _useComponentDefaultProps.sortingIcons, others = _object_without_properties._(_useComponentDefaultProps, [
+        "header",
+        "classNames",
+        "styles",
+        "unstyled",
+        "sortingIcons"
+    ]);
     var columnSizing = _object_spread_props._(_object_spread._({}, _reacttable.defaultColumnSizing), {
         size: header.column.columnDef.size,
         minSize: header.column.columnDef.minSize,
         maxSize: header.column.columnDef.maxSize
     });
-    var classes = (0, _Thstyles.default)(columnSizing).classes;
+    var _useStyles = (0, _Thstyles.default)(columnSizing, {
+        name: "PlasmaTableColumnHeader",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
     if (header.isPlaceholder) {
         return null;
     }
     if (!header.column.getCanSort()) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
-            className: classes.th,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
-                size: "xs",
-                py: "xs",
-                px: "sm",
-                fw: 500,
-                children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
-            })
+            className: classes.root,
+            children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
         });
     }
     var onSort = header.column.getToggleSortingHandler();
     var sortingOrder = header.column.getIsSorted() || "none";
-    var Icon = SortingIcons[sortingOrder];
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
-        className: classes.th,
-        "aria-sort": SortingLabels[sortingOrder],
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.UnstyledButton, {
-            onClick: onSort,
-            className: classes.control,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
-                position: "apart",
-                noWrap: true,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
-                        size: "xs",
-                        fw: 500,
-                        children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
-                            height: 14
-                        })
-                    })
-                ]
-            })
+    var Icon = sortingIcons[sortingOrder];
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.UnstyledButton, _object_spread_props._(_object_spread._({
+        component: "th",
+        onClick: onSort,
+        className: cx(classes.root, classes.control),
+        "aria-sort": SortingLabels[sortingOrder]
+    }, others), {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
+            noWrap: true,
+            spacing: "xs",
+            children: [
+                (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext()),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
+                    height: 16,
+                    width: 16
+                })
+            ]
         })
-    });
+    }));
 };
 
 //# sourceMappingURL=Th.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender} from '@tanstack/react-table';\nimport useStyles from './Th.styles';\nimport {ThProps} from './Th.types';\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 columnSizing = {\n        ...defaultColumnSizing,\n        size: header.column.columnDef.size,\n        minSize: header.column.columnDef.minSize,\n        maxSize: header.column.columnDef.maxSize,\n    };\n\n    const {classes} = useStyles(columnSizing);\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th}>\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} 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","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","columnSizing","defaultColumnSizing","size","column","columnDef","minSize","maxSize","classes","useStyles","isPlaceholder","getCanSort","th","className","Text","py","px","fw","flexRender","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","control","Group","position","noWrap","Center","height"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;gCAlB8D;oBACzB;0BACJ;iEACxB;AAGtB,IAAMC,eAAe;IACjBC,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMN,KAAK;QAAMS,eAAAA;IACpB,IAAMC,eAAe,4CACdC,+BAAmB;QACtBC,MAAMH,OAAOI,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAASN,OAAOI,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASP,OAAOI,MAAM,CAACC,SAAS,CAACE,OAAO;;IAG5C,IAAM,AAACC,UAAWC,IAAAA,iBAAS,EAACR,cAArBO;IAEP,IAAIR,OAAOU,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACV,OAAOI,MAAM,CAACO,UAAU,IAAI;QAC7B,qBACI,qBAACC;YAAGC,WAAWL,QAAQI,EAAE;sBACrB,cAAA,qBAACE,UAAI;gBAACX,MAAK;gBAAKY,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BC,IAAAA,sBAAU,EAAClB,OAAOI,MAAM,CAACC,SAAS,CAACL,MAAM,EAAEA,OAAOmB,UAAU;;;IAI7E;IAEA,IAAMC,SAASpB,OAAOI,MAAM,CAACiB,uBAAuB;IACpD,IAAMC,eAAetB,OAAOI,MAAM,CAACmB,WAAW,MAAM;IACpD,IAAMC,OAAOhC,YAAY,CAAC8B,aAAa;IAEvC,qBACI,qBAACV;QAAGC,WAAWL,QAAQI,EAAE;QAAEa,aAAW1B,aAAa,CAACuB,aAAa;kBAC7D,cAAA,qBAACI,oBAAc;YAACC,SAASP;YAAQP,WAAWL,QAAQoB,OAAO;sBACvD,cAAA,sBAACC,WAAK;gBAACC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB,UAAI;wBAACX,MAAK;wBAAKc,IAAI;kCACfC,IAAAA,sBAAU,EAAClB,OAAOI,MAAM,CAACC,SAAS,CAACL,MAAM,EAAEA,OAAOmB,UAAU;;kCAEjE,qBAACa,YAAM;kCACH,cAAA,qBAACR;4BAAKS,QAAQ;;;;;;;AAMtC"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Group, UnstyledButton, useComponentDefaultProps} from '@mantine/core';\nimport {defaultColumnSizing, flexRender} from '@tanstack/react-table';\nimport {AriaAttributes} from 'react';\nimport useStyles from './Th.styles';\nimport {SortState, ThProps} from './Th.types';\n\nconst SortingIcons: ThProps['sortingIcons'] = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nconst defaultProps: Partial<ThProps> = {\n    sortingIcons: SortingIcons,\n};\n\nexport const Th = <T,>(props: ThProps<T>) => {\n    const {header, classNames, styles, unstyled, sortingIcons, ...others} = useComponentDefaultProps(\n        'PlasmaTableColumnHeader',\n        defaultProps as Partial<ThProps<T>>,\n        props,\n    );\n\n    const columnSizing = {\n        ...defaultColumnSizing,\n        size: header.column.columnDef.size,\n        minSize: header.column.columnDef.minSize,\n        maxSize: header.column.columnDef.maxSize,\n    };\n\n    const {classes, cx} = useStyles(columnSizing, {name: 'PlasmaTableColumnHeader', classNames, styles, unstyled});\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return <th className={classes.root}>{flexRender(header.column.columnDef.header, header.getContext())}</th>;\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = sortingIcons[sortingOrder];\n\n    return (\n        <UnstyledButton\n            component=\"th\"\n            onClick={onSort}\n            className={cx(classes.root, classes.control)}\n            aria-sort={SortingLabels[sortingOrder]}\n            {...others}\n        >\n            <Group noWrap spacing=\"xs\">\n                {flexRender(header.column.columnDef.header, header.getContext())}\n                <Icon height={16} width={16} />\n            </Group>\n        </UnstyledButton>\n    );\n};\n"],"names":["Th","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","defaultProps","sortingIcons","props","useComponentDefaultProps","header","classNames","styles","unstyled","others","columnSizing","defaultColumnSizing","size","column","columnDef","minSize","maxSize","useStyles","name","classes","cx","isPlaceholder","getCanSort","th","className","root","flexRender","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","UnstyledButton","component","onClick","control","aria-sort","Group","noWrap","spacing","height","width"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;gCAvB8D;oBACb;0BAChB;iEAExB;AAGtB,IAAMC,eAAwC;IAC1CC,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgE;IAClEN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEA,IAAMG,eAAiC;IACnCC,cAAcT;AAClB;AAEO,IAAMD,KAAK,SAAKW;IACnB,IAAwEC,4BAAAA,IAAAA,8BAAwB,EAC5F,2BACAH,cACAE,QAHGE,SAAiED,0BAAjEC,QAAQC,aAAyDF,0BAAzDE,YAAYC,SAA6CH,0BAA7CG,QAAQC,WAAqCJ,0BAArCI,UAAUN,eAA2BE,0BAA3BF,cAAiBO,sCAAUL;QAAjEC;QAAQC;QAAYC;QAAQC;QAAUN;;IAM7C,IAAMQ,eAAe,4CACdC,+BAAmB;QACtBC,MAAMP,OAAOQ,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAASV,OAAOQ,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASX,OAAOQ,MAAM,CAACC,SAAS,CAACE,OAAO;;IAG5C,IAAsBC,aAAAA,IAAAA,iBAAS,EAACP,cAAc;QAACQ,MAAM;QAA2BZ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAArGW,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAEhB,IAAIf,OAAOgB,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAAChB,OAAOQ,MAAM,CAACS,UAAU,IAAI;QAC7B,qBAAO,qBAACC;YAAGC,WAAWL,QAAQM,IAAI;sBAAGC,IAAAA,sBAAU,EAACrB,OAAOQ,MAAM,CAACC,SAAS,CAACT,MAAM,EAAEA,OAAOsB,UAAU;;IACrG;IAEA,IAAMC,SAASvB,OAAOQ,MAAM,CAACgB,uBAAuB;IACpD,IAAMC,eAAezB,OAAOQ,MAAM,CAACkB,WAAW,MAAM;IACpD,IAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,qBAACG,oBAAc;QACXC,WAAU;QACVC,SAASP;QACTJ,WAAWJ,GAAGD,QAAQM,IAAI,EAAEN,QAAQiB,OAAO;QAC3CC,aAAWrC,aAAa,CAAC8B,aAAa;OAClCrB;kBAEJ,cAAA,sBAAC6B,WAAK;YAACC,MAAM;YAACC,SAAQ;;gBACjBd,IAAAA,sBAAU,EAACrB,OAAOQ,MAAM,CAACC,SAAS,CAACT,MAAM,EAAEA,OAAOsB,UAAU;8BAC7D,qBAACK;oBAAKS,QAAQ;oBAAIC,OAAO;;;;;AAIzC"}

package/dist/cjs/components/table/table-header/Th.styles.d.ts

@@ -1,10 +1,11 @@
-declare const _default: (params: {
+export interface ThStyleParams {
     size: number;
     minSize: number;
     maxSize: number;
-}, options?: import("@mantine/core").UseStylesOptions<string>) => {
+}
+declare const _default: (params: ThStyleParams, options?: import("@mantine/core").UseStylesOptions<string>) => {
     classes: {
-        th: string;
+        root: string;
         control: string;
     };
     cx: (...args: any) => string;

package/dist/cjs/components/table/table-header/Th.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"names":[],"mappings":";UAEyD,MAAM;aAAW,MAAM;aAAW,MAAM;;;;;;;;;AAAjG,wBAwBI"}
+{"version":3,"file":"Th.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACnB;;;;;;;;;AAED,wBA6BI"}

package/dist/cjs/components/table/table-header/Th.styles.js

@@ -9,27 +9,30 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _core = require("@mantine/core");
-var _columnSizing_size;
-var _default = (0, _core.createStyles)(function(theme, columnSizing) {
+var _default = (0, _core.createStyles)(function(theme, param) {
+    var maxSize = param.maxSize, minSize = param.minSize, size = param.size;
     return {
-        th: {
-            fontWeight: "400 !important",
-            padding: "0 !important",
+        root: {
+            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
             verticalAlign: "middle",
             whiteSpace: "nowrap",
             textAlign: "left",
             color: theme.colors.gray[6],
             backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
-            width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : "auto",
-            minWidth: columnSizing.minSize,
-            maxWidth: columnSizing.maxSize
+            height: theme.spacing.xl,
+            width: size !== null && size !== void 0 ? size : "auto",
+            minWidth: minSize,
+            maxWidth: maxSize,
+            fontWeight: 500,
+            fontSize: theme.fontSizes.xs,
+            "&:first-of-type": {
+                paddingLeft: theme.spacing.xl
+            },
+            "&:last-of-type": {
+                paddingRight: theme.spacing.xl
+            }
         },
         control: {
-            color: "inherit",
-            whiteSpace: "inherit",
-            fontWeight: "inherit",
-            width: "100%",
-            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[7] : theme.colors.gray[1]
             }

package/dist/cjs/components/table/table-header/Th.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        width: columnSizing.size ?? 'auto',\n        minWidth: columnSizing.minSize,\n        maxWidth: columnSizing.maxSize,\n    },\n\n    control: {\n        color: 'inherit',\n        whiteSpace: 'inherit',\n        fontWeight: 'inherit',\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n"],"names":["columnSizing","createStyles","theme","th","fontWeight","padding","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","width","size","minWidth","minSize","maxWidth","maxSize","control","spacing","xs","sm"],"mappings":";;;;+BAEA;;;eAAA;;;oBAF2B;IAWZA;IATf,WAAeC,IAAAA,kBAAY,EAAC,SAACC,OAAOF;WAAoE;QACpGG,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOP,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBV,MAAMW,WAAW,KAAK,SAASX,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGT,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,OAAOd,CAAAA,qBAAAA,aAAae,IAAI,cAAjBf,gCAAAA,qBAAqB;YAC5BgB,UAAUhB,aAAaiB,OAAO;YAC9BC,UAAUlB,aAAamB,OAAO;QAClC;QAEAC,SAAS;YACLX,OAAO;YACPF,YAAY;YACZH,YAAY;YACZU,OAAO;YACPT,SAAS,AAAC,GAAsBH,OAApBA,MAAMmB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBpB,MAAMmB,OAAO,CAACE,EAAE;YAChD,WAAW;gBACPX,iBAAiBV,MAAMW,WAAW,KAAK,SAASX,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGT,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface ThStyleParams {\n    size: number;\n    minSize: number;\n    maxSize: number;\n}\n\nexport default createStyles((theme, {maxSize, minSize, size}: ThStyleParams) => ({\n    root: {\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        height: theme.spacing.xl,\n        width: size ?? 'auto',\n        minWidth: minSize,\n        maxWidth: maxSize,\n        fontWeight: 500,\n        fontSize: theme.fontSizes.xs,\n\n        '&:first-of-type': {\n            paddingLeft: theme.spacing.xl,\n        },\n\n        '&:last-of-type': {\n            paddingRight: theme.spacing.xl,\n        },\n    },\n\n    control: {\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n"],"names":["createStyles","theme","maxSize","minSize","size","root","padding","spacing","xs","sm","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","height","xl","width","minWidth","maxWidth","fontWeight","fontSize","fontSizes","paddingLeft","paddingRight","control"],"mappings":";;;;+BAQA;;;eAAA;;;oBAR2B;IAQ3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;QAAQC,gBAAAA,SAASC,gBAAAA,SAASC,aAAAA;WAA0B;QAC7EC,MAAM;YACFC,SAAS,AAAC,GAAsBL,OAApBA,MAAMM,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBP,MAAMM,OAAO,CAACE,EAAE;YAChDC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,QAAQjB,MAAMM,OAAO,CAACY,EAAE;YACxBC,OAAOhB,iBAAAA,kBAAAA,OAAQ;YACfiB,UAAUlB;YACVmB,UAAUpB;YACVqB,YAAY;YACZC,UAAUvB,MAAMwB,SAAS,CAACjB,EAAE;YAE5B,mBAAmB;gBACfkB,aAAazB,MAAMM,OAAO,CAACY,EAAE;YACjC;YAEA,kBAAkB;gBACdQ,cAAc1B,MAAMM,OAAO,CAACY,EAAE;YAClC;QACJ;QAEAS,SAAS;YACL,WAAW;gBACPZ,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ"}

package/dist/cjs/components/table/table-header/Th.types.d.ts

@@ -1,5 +1,10 @@
+import { DefaultProps, Selectors } from '@mantine/core';
 import { Header } from '@tanstack/react-table';
-export interface ThProps<T> {
+import { ComponentType, SVGProps } from 'react';
+import useStyles from './Th.styles';
+export type SortState = 'asc' | 'desc' | 'none';
+export interface ThProps<T = unknown> extends DefaultProps<Selectors<typeof useStyles>> {
     header: Header<T, unknown>;
+    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;
 }
 //# sourceMappingURL=Th.types.d.ts.map

package/dist/cjs/components/table/table-header/Th.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAE7C,MAAM,WAAW,OAAO,CAAC,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B"}
+{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACnF,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CAC5E"}

package/dist/esm/components/table/layouts/RowLayout.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,wBAmEG"}
+{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,wBA+DG"}

package/dist/esm/components/table/layouts/RowLayout.styles.js

@@ -5,9 +5,6 @@ export default createStyles(function(theme, param) {
     var border = "".concat(rem(1), " solid ").concat(theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]);
     return {
         headerColumns: {
-            "& th:first-of-type > *": {
-                paddingLeft: "40px"
-            },
             "& input[type=checkbox]": {
                 backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
                 borderColor: disableRowSelection ? "".concat(theme.colors.gray[3]) : "".concat(theme.colors.gray[4]),

package/dist/esm/components/table/layouts/RowLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((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            overflowWrap: 'anywhere',\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"],"names":["createStyles","rem","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":"AAAA,SAAQA,YAAY,EAAEC,GAAG,QAAO,gBAAgB;AAMhD,eAAeD,aAA4C,SAACE;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IAC1F,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBD,IAAI,IAAG,WAAoF,OAA3EC,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACI,IAAI,CAAC,EAAE,GAAGX,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHG,eAAe;YACX,0BAA0B;gBACtBC,aAAa;YACjB;YAEA,0BAA0B;gBACtBC,iBAAiBZ,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKM;gBACnEC,aAAad,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFQ,eAAef,sBAAsB,SAAS;gBAC9CgB,QAAQhB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPiB,OAAOjB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAW,aAAa;YACTN,iBAAiBb,2BAA2Bc,YAAYZ;QAC5D;QAEAkB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBd,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCO,aAAa,AAAC,GAAuB,OAArBhB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCQ,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBnB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAa,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BxB,OAAvBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBf,aAAa;YACjB;YACA,WAAW;gBACPC,iBAAiBX;YACrB;YACA0B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRR,SAAS,AAAC,GAAsBxB,OAApBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE;YAChDM,cAAcvB;QAClB;QAEAwB,aAAa;YACTpB,iBAAiBX;YACjB8B,cAAcvB;QAClB;IACJ;AACJ,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((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            '& 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            overflowWrap: 'anywhere',\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"],"names":["createStyles","rem","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","paddingLeft","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":"AAAA,SAAQA,YAAY,EAAEC,GAAG,QAAO,gBAAgB;AAMhD,eAAeD,aAA4C,SAACE;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IAC1F,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBD,IAAI,IAAG,WAAoF,OAA3EC,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACI,IAAI,CAAC,EAAE,GAAGX,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHG,eAAe;YACX,0BAA0B;gBACtBC,iBAAiBX,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKK;gBACnEC,aAAab,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFO,eAAed,sBAAsB,SAAS;gBAC9Ce,QAAQf,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPgB,OAAOhB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAU,aAAa;YACTN,iBAAiBZ,2BAA2Ba,YAAYX;QAC5D;QAEAiB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBb,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCM,aAAa,AAAC,GAAuB,OAArBf,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCO,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBlB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAY,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BvB,OAAvBA,MAAMwB,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjBzB,MAAMwB,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBC,aAAa;YACjB;YACA,WAAW;gBACPf,iBAAiBV;YACrB;YACA0B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRT,SAAS,AAAC,GAAsBvB,OAApBA,MAAMwB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBzB,MAAMwB,OAAO,CAACE,EAAE;YAChDO,cAAcvB;QAClB;QAEAwB,aAAa;YACTrB,iBAAiBV;YACjB8B,cAAcvB;QAClB;IACJ;AACJ,GAAG"}

package/dist/esm/components/table/table-header/Th.d.ts

@@ -1,3 +1,3 @@
 import { ThProps } from './Th.types';
-export declare const Th: <T>({ header }: ThProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: <T>(props: ThProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Th.d.ts.map

package/dist/esm/components/table/table-header/Th.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AAcnC,eAAO,MAAM,EAAE,wEA0Cd,CAAC"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,OAAO,EAAC,MAAM,YAAY,CAAC;AAkB9C,eAAO,MAAM,EAAE,mEA0Cd,CAAC"}

package/dist/esm/components/table/table-header/Th.js

@@ -1,8 +1,9 @@
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px } from "@coveord/plasma-react-icons";
-import { Center, Group, Text, UnstyledButton } from "@mantine/core";
+import { Group, UnstyledButton, useComponentDefaultProps } from "@mantine/core";
 import { defaultColumnSizing, flexRender } from "@tanstack/react-table";
 import useStyles from "./Th.styles";
 var SortingIcons = {
@@ -15,56 +16,58 @@ var SortingLabels = {
     desc: "descending",
     none: "none"
 };
-export var Th = function(param) {
-    var header = param.header;
+var defaultProps = {
+    sortingIcons: SortingIcons
+};
+export var Th = function(props) {
+    var _useComponentDefaultProps = useComponentDefaultProps("PlasmaTableColumnHeader", defaultProps, props), header = _useComponentDefaultProps.header, classNames = _useComponentDefaultProps.classNames, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, sortingIcons = _useComponentDefaultProps.sortingIcons, others = _object_without_properties(_useComponentDefaultProps, [
+        "header",
+        "classNames",
+        "styles",
+        "unstyled",
+        "sortingIcons"
+    ]);
     var columnSizing = _object_spread_props(_object_spread({}, defaultColumnSizing), {
         size: header.column.columnDef.size,
         minSize: header.column.columnDef.minSize,
         maxSize: header.column.columnDef.maxSize
     });
-    var classes = useStyles(columnSizing).classes;
+    var _useStyles = useStyles(columnSizing, {
+        name: "PlasmaTableColumnHeader",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
     if (header.isPlaceholder) {
         return null;
     }
     if (!header.column.getCanSort()) {
         return /*#__PURE__*/ _jsx("th", {
-            className: classes.th,
-            children: /*#__PURE__*/ _jsx(Text, {
-                size: "xs",
-                py: "xs",
-                px: "sm",
-                fw: 500,
-                children: flexRender(header.column.columnDef.header, header.getContext())
-            })
+            className: classes.root,
+            children: flexRender(header.column.columnDef.header, header.getContext())
         });
     }
     var onSort = header.column.getToggleSortingHandler();
     var sortingOrder = header.column.getIsSorted() || "none";
-    var Icon = SortingIcons[sortingOrder];
-    return /*#__PURE__*/ _jsx("th", {
-        className: classes.th,
-        "aria-sort": SortingLabels[sortingOrder],
-        children: /*#__PURE__*/ _jsx(UnstyledButton, {
-            onClick: onSort,
-            className: classes.control,
-            children: /*#__PURE__*/ _jsxs(Group, {
-                position: "apart",
-                noWrap: true,
-                children: [
-                    /*#__PURE__*/ _jsx(Text, {
-                        size: "xs",
-                        fw: 500,
-                        children: flexRender(header.column.columnDef.header, header.getContext())
-                    }),
-                    /*#__PURE__*/ _jsx(Center, {
-                        children: /*#__PURE__*/ _jsx(Icon, {
-                            height: 14
-                        })
-                    })
-                ]
-            })
+    var Icon = sortingIcons[sortingOrder];
+    return /*#__PURE__*/ _jsx(UnstyledButton, _object_spread_props(_object_spread({
+        component: "th",
+        onClick: onSort,
+        className: cx(classes.root, classes.control),
+        "aria-sort": SortingLabels[sortingOrder]
+    }, others), {
+        children: /*#__PURE__*/ _jsxs(Group, {
+            noWrap: true,
+            spacing: "xs",
+            children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                /*#__PURE__*/ _jsx(Icon, {
+                    height: 16,
+                    width: 16
+                })
+            ]
         })
-    });
+    }));
 };
 
 //# sourceMappingURL=Th.js.map

package/dist/esm/components/table/table-header/Th.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender} from '@tanstack/react-table';\nimport useStyles from './Th.styles';\nimport {ThProps} from './Th.types';\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 columnSizing = {\n        ...defaultColumnSizing,\n        size: header.column.columnDef.size,\n        minSize: header.column.columnDef.minSize,\n        maxSize: header.column.columnDef.maxSize,\n    };\n\n    const {classes} = useStyles(columnSizing);\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th}>\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} 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":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Center","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","SortingIcons","asc","desc","none","SortingLabels","Th","header","columnSizing","size","column","columnDef","minSize","maxSize","classes","isPlaceholder","getCanSort","th","className","py","px","fw","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","control","position","noWrap","height"],"mappings":";;;AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAClE,SAAQC,mBAAmB,EAAEC,UAAU,QAAO,wBAAwB;AACtE,OAAOC,eAAe,cAAc;AAGpC,IAAMC,eAAe;IACjBC,KAAKV;IACLW,MAAMZ;IACNa,MAAMX;AACV;AAEA,IAAMY,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK;QAAMC,eAAAA;IACpB,IAAMC,eAAe,wCACdV;QACHW,MAAMF,OAAOG,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAASL,OAAOG,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASN,OAAOG,MAAM,CAACC,SAAS,CAACE,OAAO;;IAG5C,IAAM,AAACC,UAAWd,UAAUQ,cAArBM;IAEP,IAAIP,OAAOQ,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACR,OAAOG,MAAM,CAACM,UAAU,IAAI;QAC7B,qBACI,KAACC;YAAGC,WAAWJ,QAAQG,EAAE;sBACrB,cAAA,KAACrB;gBAAKa,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BtB,WAAWQ,OAAOG,MAAM,CAACC,SAAS,CAACJ,MAAM,EAAEA,OAAOe,UAAU;;;IAI7E;IAEA,IAAMC,SAAShB,OAAOG,MAAM,CAACc,uBAAuB;IACpD,IAAMC,eAAelB,OAAOG,MAAM,CAACgB,WAAW,MAAM;IACpD,IAAMC,OAAO1B,YAAY,CAACwB,aAAa;IAEvC,qBACI,KAACR;QAAGC,WAAWJ,QAAQG,EAAE;QAAEW,aAAWvB,aAAa,CAACoB,aAAa;kBAC7D,cAAA,KAAC5B;YAAegC,SAASN;YAAQL,WAAWJ,QAAQgB,OAAO;sBACvD,cAAA,MAACnC;gBAAMoC,UAAS;gBAAQC,MAAM;;kCAC1B,KAACpC;wBAAKa,MAAK;wBAAKY,IAAI;kCACftB,WAAWQ,OAAOG,MAAM,CAACC,SAAS,CAACJ,MAAM,EAAEA,OAAOe,UAAU;;kCAEjE,KAAC5B;kCACG,cAAA,KAACiC;4BAAKM,QAAQ;;;;;;;AAMtC,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Group, UnstyledButton, useComponentDefaultProps} from '@mantine/core';\nimport {defaultColumnSizing, flexRender} from '@tanstack/react-table';\nimport {AriaAttributes} from 'react';\nimport useStyles from './Th.styles';\nimport {SortState, ThProps} from './Th.types';\n\nconst SortingIcons: ThProps['sortingIcons'] = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nconst defaultProps: Partial<ThProps> = {\n    sortingIcons: SortingIcons,\n};\n\nexport const Th = <T,>(props: ThProps<T>) => {\n    const {header, classNames, styles, unstyled, sortingIcons, ...others} = useComponentDefaultProps(\n        'PlasmaTableColumnHeader',\n        defaultProps as Partial<ThProps<T>>,\n        props,\n    );\n\n    const columnSizing = {\n        ...defaultColumnSizing,\n        size: header.column.columnDef.size,\n        minSize: header.column.columnDef.minSize,\n        maxSize: header.column.columnDef.maxSize,\n    };\n\n    const {classes, cx} = useStyles(columnSizing, {name: 'PlasmaTableColumnHeader', classNames, styles, unstyled});\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return <th className={classes.root}>{flexRender(header.column.columnDef.header, header.getContext())}</th>;\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = sortingIcons[sortingOrder];\n\n    return (\n        <UnstyledButton\n            component=\"th\"\n            onClick={onSort}\n            className={cx(classes.root, classes.control)}\n            aria-sort={SortingLabels[sortingOrder]}\n            {...others}\n        >\n            <Group noWrap spacing=\"xs\">\n                {flexRender(header.column.columnDef.header, header.getContext())}\n                <Icon height={16} width={16} />\n            </Group>\n        </UnstyledButton>\n    );\n};\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Group","UnstyledButton","useComponentDefaultProps","defaultColumnSizing","flexRender","useStyles","SortingIcons","asc","desc","none","SortingLabels","defaultProps","sortingIcons","Th","props","header","classNames","styles","unstyled","others","columnSizing","size","column","columnDef","minSize","maxSize","name","classes","cx","isPlaceholder","getCanSort","th","className","root","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","component","onClick","control","aria-sort","noWrap","spacing","height","width"],"mappings":";;;;AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,KAAK,EAAEC,cAAc,EAAEC,wBAAwB,QAAO,gBAAgB;AAC9E,SAAQC,mBAAmB,EAAEC,UAAU,QAAO,wBAAwB;AAEtE,OAAOC,eAAe,cAAc;AAGpC,IAAMC,eAAwC;IAC1CC,KAAKT;IACLU,MAAMX;IACNY,MAAMV;AACV;AAEA,IAAMW,gBAAgE;IAClEH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,IAAME,eAAiC;IACnCC,cAAcN;AAClB;AAEA,OAAO,IAAMO,KAAK,SAAKC;IACnB,IAAwEZ,4BAAAA,yBACpE,2BACAS,cACAG,QAHGC,SAAiEb,0BAAjEa,QAAQC,aAAyDd,0BAAzDc,YAAYC,SAA6Cf,0BAA7Ce,QAAQC,WAAqChB,0BAArCgB,UAAUN,eAA2BV,0BAA3BU,cAAiBO,oCAAUjB;QAAjEa;QAAQC;QAAYC;QAAQC;QAAUN;;IAM7C,IAAMQ,eAAe,wCACdjB;QACHkB,MAAMN,OAAOO,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAAST,OAAOO,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASV,OAAOO,MAAM,CAACC,SAAS,CAACE,OAAO;;IAG5C,IAAsBpB,aAAAA,UAAUe,cAAc;QAACM,MAAM;QAA2BV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAArGS,UAAetB,WAAfsB,SAASC,KAAMvB,WAANuB;IAEhB,IAAIb,OAAOc,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACd,OAAOO,MAAM,CAACQ,UAAU,IAAI;QAC7B,qBAAO,KAACC;YAAGC,WAAWL,QAAQM,IAAI;sBAAG7B,WAAWW,OAAOO,MAAM,CAACC,SAAS,CAACR,MAAM,EAAEA,OAAOmB,UAAU;;IACrG;IAEA,IAAMC,SAASpB,OAAOO,MAAM,CAACc,uBAAuB;IACpD,IAAMC,eAAetB,OAAOO,MAAM,CAACgB,WAAW,MAAM;IACpD,IAAMC,OAAO3B,YAAY,CAACyB,aAAa;IAEvC,qBACI,KAACpC;QACGuC,WAAU;QACVC,SAASN;QACTH,WAAWJ,GAAGD,QAAQM,IAAI,EAAEN,QAAQe,OAAO;QAC3CC,aAAWjC,aAAa,CAAC2B,aAAa;OAClClB;kBAEJ,cAAA,MAACnB;YAAM4C,MAAM;YAACC,SAAQ;;gBACjBzC,WAAWW,OAAOO,MAAM,CAACC,SAAS,CAACR,MAAM,EAAEA,OAAOmB,UAAU;8BAC7D,KAACK;oBAAKO,QAAQ;oBAAIC,OAAO;;;;;AAIzC,EAAE"}

package/dist/esm/components/table/table-header/Th.styles.d.ts

@@ -1,10 +1,11 @@
-declare const _default: (params: {
+export interface ThStyleParams {
     size: number;
     minSize: number;
     maxSize: number;
-}, options?: import("@mantine/core").UseStylesOptions<string>) => {
+}
+declare const _default: (params: ThStyleParams, options?: import("@mantine/core").UseStylesOptions<string>) => {
     classes: {
-        th: string;
+        root: string;
         control: string;
     };
     cx: (...args: any) => string;

package/dist/esm/components/table/table-header/Th.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"names":[],"mappings":";UAEyD,MAAM;aAAW,MAAM;aAAW,MAAM;;;;;;;;;AAAjG,wBAwBI"}
+{"version":3,"file":"Th.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACnB;;;;;;;;;AAED,wBA6BI"}

package/dist/esm/components/table/table-header/Th.styles.js

@@ -1,25 +1,28 @@
 import { createStyles } from "@mantine/core";
-var _columnSizing_size;
-export default createStyles(function(theme, columnSizing) {
+export default createStyles(function(theme, param) {
+    var maxSize = param.maxSize, minSize = param.minSize, size = param.size;
     return {
-        th: {
-            fontWeight: "400 !important",
-            padding: "0 !important",
+        root: {
+            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
             verticalAlign: "middle",
             whiteSpace: "nowrap",
             textAlign: "left",
             color: theme.colors.gray[6],
             backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
-            width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : "auto",
-            minWidth: columnSizing.minSize,
-            maxWidth: columnSizing.maxSize
+            height: theme.spacing.xl,
+            width: size !== null && size !== void 0 ? size : "auto",
+            minWidth: minSize,
+            maxWidth: maxSize,
+            fontWeight: 500,
+            fontSize: theme.fontSizes.xs,
+            "&:first-of-type": {
+                paddingLeft: theme.spacing.xl
+            },
+            "&:last-of-type": {
+                paddingRight: theme.spacing.xl
+            }
         },
         control: {
-            color: "inherit",
-            whiteSpace: "inherit",
-            fontWeight: "inherit",
-            width: "100%",
-            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[7] : theme.colors.gray[1]
             }

package/dist/esm/components/table/table-header/Th.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        width: columnSizing.size ?? 'auto',\n        minWidth: columnSizing.minSize,\n        maxWidth: columnSizing.maxSize,\n    },\n\n    control: {\n        color: 'inherit',\n        whiteSpace: 'inherit',\n        fontWeight: 'inherit',\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n"],"names":["createStyles","columnSizing","theme","th","fontWeight","padding","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","width","size","minWidth","minSize","maxWidth","maxSize","control","spacing","xs","sm"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;IAW5BC;AATf,eAAeD,aAAa,SAACE,OAAOD;WAAoE;QACpGE,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOP,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBV,MAAMW,WAAW,KAAK,SAASX,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGT,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,OAAOb,CAAAA,qBAAAA,aAAac,IAAI,cAAjBd,gCAAAA,qBAAqB;YAC5Be,UAAUf,aAAagB,OAAO;YAC9BC,UAAUjB,aAAakB,OAAO;QAClC;QAEAC,SAAS;YACLX,OAAO;YACPF,YAAY;YACZH,YAAY;YACZU,OAAO;YACPT,SAAS,AAAC,GAAsBH,OAApBA,MAAMmB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBpB,MAAMmB,OAAO,CAACE,EAAE;YAChD,WAAW;gBACPX,iBAAiBV,MAAMW,WAAW,KAAK,SAASX,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGT,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;GAAI"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface ThStyleParams {\n    size: number;\n    minSize: number;\n    maxSize: number;\n}\n\nexport default createStyles((theme, {maxSize, minSize, size}: ThStyleParams) => ({\n    root: {\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        height: theme.spacing.xl,\n        width: size ?? 'auto',\n        minWidth: minSize,\n        maxWidth: maxSize,\n        fontWeight: 500,\n        fontSize: theme.fontSizes.xs,\n\n        '&:first-of-type': {\n            paddingLeft: theme.spacing.xl,\n        },\n\n        '&:last-of-type': {\n            paddingRight: theme.spacing.xl,\n        },\n    },\n\n    control: {\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n"],"names":["createStyles","theme","maxSize","minSize","size","root","padding","spacing","xs","sm","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","height","xl","width","minWidth","maxWidth","fontWeight","fontSize","fontSizes","paddingLeft","paddingRight","control"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAQ3C,eAAeA,aAAa,SAACC;QAAQC,gBAAAA,SAASC,gBAAAA,SAASC,aAAAA;WAA0B;QAC7EC,MAAM;YACFC,SAAS,AAAC,GAAsBL,OAApBA,MAAMM,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBP,MAAMM,OAAO,CAACE,EAAE;YAChDC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,QAAQjB,MAAMM,OAAO,CAACY,EAAE;YACxBC,OAAOhB,iBAAAA,kBAAAA,OAAQ;YACfiB,UAAUlB;YACVmB,UAAUpB;YACVqB,YAAY;YACZC,UAAUvB,MAAMwB,SAAS,CAACjB,EAAE;YAE5B,mBAAmB;gBACfkB,aAAazB,MAAMM,OAAO,CAACY,EAAE;YACjC;YAEA,kBAAkB;gBACdQ,cAAc1B,MAAMM,OAAO,CAACY,EAAE;YAClC;QACJ;QAEAS,SAAS;YACL,WAAW;gBACPZ,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;GAAI"}

package/dist/esm/components/table/table-header/Th.types.d.ts

@@ -1,5 +1,10 @@
+import { DefaultProps, Selectors } from '@mantine/core';
 import { Header } from '@tanstack/react-table';
-export interface ThProps<T> {
+import { ComponentType, SVGProps } from 'react';
+import useStyles from './Th.styles';
+export type SortState = 'asc' | 'desc' | 'none';
+export interface ThProps<T = unknown> extends DefaultProps<Selectors<typeof useStyles>> {
     header: Header<T, unknown>;
+    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;
 }
 //# sourceMappingURL=Th.types.d.ts.map

package/dist/esm/components/table/table-header/Th.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAE7C,MAAM,WAAW,OAAO,CAAC,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B"}
+{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACnF,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CAC5E"}

package/dist/esm/components/table/table-header/Th.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.types.ts"],"sourcesContent":["import {Header} from '@tanstack/react-table';\n\nexport interface ThProps<T> {\n    header: Header<T, unknown>;\n}\n"],"names":[],"mappings":"AAAA,WAIC"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.types.ts"],"sourcesContent":["import {DefaultProps, Selectors} from '@mantine/core';\nimport {Header} from '@tanstack/react-table';\nimport {ComponentType, SVGProps} from 'react';\nimport useStyles from './Th.styles';\n\nexport type SortState = 'asc' | 'desc' | 'none';\n\nexport interface ThProps<T = unknown> extends DefaultProps<Selectors<typeof useStyles>> {\n    header: Header<T, unknown>;\n    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;\n}\n"],"names":[],"mappings":"AAAA,WAUC"}