@coveord/plasma-mantine 52.27.4 → 53.0.1

package/dist/cjs/components/table/table-filter/TableFilter.d.ts

@@ -1,4 +1,24 @@
-import { FunctionComponent } from 'react';
-import { TableFilterProps } from './TableFilter.types';
-export declare const TableFilter: FunctionComponent<TableFilterProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+export type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';
+export interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {
+    /**
+     * The placeholder for the filter input
+     *
+     * @default "Search by any field"
+     */
+    placeholder?: string;
+}
+export type TableFilterFactory = Factory<{
+    props: TableFilterProps;
+    ref: HTMLDivElement;
+    stylesNames: TableFilterStylesNames;
+    compound: true;
+}>;
+export declare const TableFilter: import("@mantine/core").MantineComponent<{
+    props: TableFilterProps;
+    ref: HTMLDivElement;
+    stylesNames: TableFilterStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableFilter.d.ts.map

package/dist/cjs/components/table/table-filter/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAMpG,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA0D3D,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,QAAQ,EAAW,OAAO,EAA4B,MAAM,eAAe,CAAC;AAChG,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAO1F,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAEpF,MAAM,WAAW,gBAAiB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,kBAAkB,CAAC;IAC1F;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,WAAW;WAVb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAsEhB,CAAC"}

package/dist/cjs/components/table/table-filter/TableFilter.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "TableFilter", {
         return TableFilter;
     }
 });
-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");
@@ -16,24 +15,23 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
-var _react = require("react");
 var _hooks = require("@mantine/hooks");
-var _Tablestyles = require("../Table.styles");
+var _react = require("react");
+var _Table = require("../Table");
 var _TableContext = require("../TableContext");
-var _TableFilterstyles = /*#__PURE__*/ _interop_require_default._(require("./TableFilter.styles"));
-var TableFilter = function(_param) {
-    var _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Search by any field" : _param_placeholder, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties._(_param, [
+var defaultProps = {
+    placeholder: "Search by any field"
+};
+var TableFilter = (0, _core.factory)(function(props, ref) {
+    var ctx = (0, _TableContext.useTableStyles)();
+    var _useProps = (0, _core.useProps)("PlasmaTableFilter", defaultProps, props), placeholder = _useProps.placeholder, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
         "placeholder",
         "classNames",
+        "className",
         "styles",
-        "unstyled"
+        "style",
+        "vars"
     ]);
-    var classes = (0, _TableFilterstyles.default)(null, {
-        name: "TableFilter",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }).classes;
     var _useTable = (0, _TableContext.useTable)(), state = _useTable.state, setState = _useTable.setState;
     var _useState = _sliced_to_array._((0, _react.useState)(state.globalFilter), 2), filter = _useState[0], setFilter = _useState[1];
     var _useDebouncedValue = _sliced_to_array._((0, _hooks.useDebouncedValue)(filter, 300), 2), debounced = _useDebouncedValue[0], cancel = _useDebouncedValue[1];
@@ -63,29 +61,35 @@ var TableFilter = function(_param) {
     }, [
         state.globalFilter
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+    var stylesApiProps = {
+        classNames: classNames,
+        styles: styles
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
-        order: _Tablestyles.TableComponentsOrder.Filter,
-        py: "sm",
-        className: classes.root,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, _object_spread._({
-            className: classes.wrapper,
+        order: _Table.TableComponentsOrder.Filter,
+        ref: ref
+    }, ctx.getStyles("filterRoot", _object_spread._({
+        className: className,
+        style: style
+    }, stylesApiProps)), others), {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, _object_spread_props._(_object_spread._({}, ctx.getStyles("filterWrapper", stylesApiProps)), {
             placeholder: placeholder,
             autoComplete: "off",
-            mb: "md",
             rightSection: filter ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
                 onClick: handleClear,
+                color: "gray",
+                variant: "subtle",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
                     height: 16
                 })
-            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, {
-                height: 16,
-                className: classes.empty
-            }),
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, _object_spread._({
+                height: 16
+            }, ctx.getStyles("filterEmpty", stylesApiProps))),
             value: filter,
             onChange: handleChange
-        }, others))
-    });
-};
+        }))
+    }));
+});
 
 //# sourceMappingURL=TableFilter.js.map

package/dist/cjs/components/table/table-filter/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, Grid, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableFilter.styles';\nimport {TableFilterProps} from './TableFilter.types';\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n    const [filter, setFilter] = useState(state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: debounced,\n        }));\n        return cancel;\n    }, [debounced]);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        setFilter(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        setFilter('');\n    };\n\n    useEffect(() => {\n        setFilter(state.globalFilter);\n    }, [state.globalFilter]);\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n            <TextInput\n                className={classes.wrapper}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                mb=\"md\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon onClick={handleClear}>\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <FilterSize16Px height={16} className={classes.empty} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n                {...others}\n            />\n        </Grid.Col>\n    );\n};\n"],"names":["TableFilter","placeholder","classNames","styles","unstyled","others","classes","useStyles","name","useTable","state","setState","useState","globalFilter","filter","setFilter","useDebouncedValue","debounced","cancel","useDidUpdate","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","useEffect","Grid","Col","span","order","TableComponentsOrder","Filter","py","className","root","TextInput","wrapper","autoComplete","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","FilterSize16Px","empty","onChange"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;;gCAV+B;oBACF;qBACkD;qBAE9C;2BACX;4BACZ;0EACD;AAGf,IAAMA,cAAmD;oCAC5DC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWC,IAAAA,0BAAS,EAAC,MAAM;QAACC,MAAM;QAAeN,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BG,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IACd,IAA4BC,+BAAAA,IAAAA,eAAQ,EAACF,MAAMG,YAAY,OAAhDC,SAAqBF,cAAbG,YAAaH;IAC5B,IAA4BI,wCAAAA,IAAAA,wBAAiB,EAACF,QAAQ,UAA/CG,YAAqBD,uBAAVE,SAAUF;IAE5BG,IAAAA,mBAAY,EAAC;QACTR,SAAS,SAACS;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BR,cAAcI;;;QAElB,OAAOC;IACX,GAAG;QAACD;KAAU;IAEd,IAAMO,eAAqD,SAACC;QACxD,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPX,UAAUW;IACd;IAEA,IAAME,cAAoD;QACtDb,UAAU;IACd;IAEAc,IAAAA,gBAAS,EAAC;QACNd,UAAUL,MAAMG,YAAY;IAChC,GAAG;QAACH,MAAMG,YAAY;KAAC;IAEvB,qBACI,qBAACiB,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,MAAM;QAAEC,IAAG;QAAKC,WAAW/B,QAAQgC,IAAI;kBACxF,cAAA,qBAACC,eAAS;YACNF,WAAW/B,QAAQkC,OAAO;YAC1BvC,aAAaA;YACbwC,cAAa;YACbC,IAAG;YACHC,cACI7B,uBACI,qBAAC8B,gBAAU;gBAACC,SAASjB;0BACjB,cAAA,qBAACkB,+BAAa;oBAACC,QAAQ;;+BAG3B,qBAACC,gCAAc;gBAACD,QAAQ;gBAAIV,WAAW/B,QAAQ2C,KAAK;;YAG5DvB,OAAOZ;YACPoC,UAAU1B;WACNnB;;AAIpB"}
+{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, BoxProps, factory, Factory, Grid, TextInput, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';\n\nexport interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport type TableFilterFactory = Factory<{\n    props: TableFilterProps;\n    ref: HTMLDivElement;\n    stylesNames: TableFilterStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableFilterProps> = {\n    placeholder: 'Search by any field',\n};\n\nexport const TableFilter = factory<TableFilterFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableFilter',\n        defaultProps,\n        props,\n    );\n    const {state, setState} = useTable();\n    const [filter, setFilter] = useState(state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: debounced,\n        }));\n        return cancel;\n    }, [debounced]);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        setFilter(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        setFilter('');\n    };\n\n    useEffect(() => {\n        setFilter(state.globalFilter);\n    }, [state.globalFilter]);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.Filter}\n            ref={ref}\n            {...ctx.getStyles('filterRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <TextInput\n                {...ctx.getStyles('filterWrapper', stylesApiProps)}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon onClick={handleClear} color=\"gray\" variant=\"subtle\">\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <FilterSize16Px height={16} {...ctx.getStyles('filterEmpty', stylesApiProps)} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n            />\n        </Grid.Col>\n    );\n});\n"],"names":["TableFilter","defaultProps","placeholder","factory","props","ref","ctx","useTableStyles","useProps","classNames","className","styles","style","vars","others","useTable","state","setState","useState","globalFilter","filter","setFilter","useDebouncedValue","debounced","cancel","useDidUpdate","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","useEffect","stylesApiProps","Grid","Col","span","order","TableComponentsOrder","Filter","getStyles","TextInput","autoComplete","rightSection","ActionIcon","onClick","color","variant","CrossSize16Px","height","FilterSize16Px","onChange"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;gCA/B+B;oBACoC;qBAElC;qBAC2B;qBAEtC;4BACI;AAoBvC,IAAMC,eAA0C;IAC5CC,aAAa;AACjB;AAEO,IAAMF,cAAcG,IAAAA,aAAO,EAAqB,SAACC,OAAOC;IAC3D,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAA6EC,YAAAA,IAAAA,cAAQ,EACjF,qBACAP,cACAG,QAHGF,cAAsEM,UAAtEN,aAAaO,aAAyDD,UAAzDC,YAAYC,YAA6CF,UAA7CE,WAAWC,SAAkCH,UAAlCG,QAAQC,QAA0BJ,UAA1BI,OAAOC,OAAmBL,UAAnBK,MAASC,sCAAUN;QAAtEN;QAAaO;QAAYC;QAAWC;QAAQC;QAAOC;;IAK1D,IAA0BE,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IACd,IAA4BC,+BAAAA,IAAAA,eAAQ,EAACF,MAAMG,YAAY,OAAhDC,SAAqBF,cAAbG,YAAaH;IAC5B,IAA4BI,wCAAAA,IAAAA,wBAAiB,EAACF,QAAQ,UAA/CG,YAAqBD,uBAAVE,SAAUF;IAE5BG,IAAAA,mBAAY,EAAC;QACTR,SAAS,SAACS;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BR,cAAcI;;;QAElB,OAAOC;IACX,GAAG;QAACD;KAAU;IAEd,IAAMO,eAAqD,SAACC;QACxD,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPX,UAAUW;IACd;IAEA,IAAME,cAAoD;QACtDb,UAAU;IACd;IAEAc,IAAAA,gBAAS,EAAC;QACNd,UAAUL,MAAMG,YAAY;IAChC,GAAG;QAACH,MAAMG,YAAY;KAAC;IAEvB,IAAMiB,iBAAiB;QAAC3B,YAAAA;QAAYE,QAAAA;IAAM;IAE1C,qBACI,qBAAC0B,UAAI,CAACC,GAAG;QACLC,MAAK;QACLC,OAAOC,2BAAoB,CAACC,MAAM;QAClCrC,KAAKA;OACDC,IAAIqC,SAAS,CAAC,cAAc;QAACjC,WAAAA;QAAWE,OAAAA;OAAUwB,kBAClDtB;kBAEJ,cAAA,qBAAC8B,eAAS,8CACFtC,IAAIqC,SAAS,CAAC,iBAAiBP;YACnClC,aAAaA;YACb2C,cAAa;YACbC,cACI1B,uBACI,qBAAC2B,gBAAU;gBAACC,SAASd;gBAAae,OAAM;gBAAOC,SAAQ;0BACnD,cAAA,qBAACC,+BAAa;oBAACC,QAAQ;;+BAG3B,qBAACC,gCAAc;gBAACD,QAAQ;eAAQ9C,IAAIqC,SAAS,CAAC,eAAeP;YAGrEJ,OAAOZ;YACPkC,UAAUxB;;;AAI1B"}

package/dist/cjs/components/table/table-footer/TableFooter.d.ts

@@ -1,4 +1,7 @@
-import { FunctionComponent } from 'react';
-import { TableFooterProps } from './TableFooter.types';
+import { GroupProps } from '@mantine/core';
+import { FunctionComponent, ReactNode } from 'react';
+export interface TableFooterProps extends GroupProps {
+    children?: ReactNode;
+}
 export declare const TableFooter: FunctionComponent<TableFooterProps>;
 //# sourceMappingURL=TableFooter.d.ts.map

package/dist/cjs/components/table/table-footer/TableFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAI3D,CAAC"}
+{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAC,MAAM,eAAe,CAAC;AAChD,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAE3D,CAAC"}

package/dist/cjs/components/table/table-footer/TableFooter.js

@@ -8,22 +8,18 @@ Object.defineProperty(exports, "TableFooter", {
         return TableFooter;
     }
 });
+var _extends = require("@swc/helpers/_/_extends");
+var _object_destructuring_empty = require("@swc/helpers/_/_object_destructuring_empty");
 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 TableFooter = function(_param) /*#__PURE__*/ {
-    var children = _param.children, others = _object_without_properties._(_param, [
-        "children"
-    ]);
-    return (0, _jsxruntime.jsx)(_core.Group, _object_spread_props._(_object_spread._({
-        position: "apart",
+    var others = _extends._({}, _object_destructuring_empty._(_param));
+    return (0, _jsxruntime.jsx)(_core.Group, _object_spread._({
+        justify: "space-between",
         px: "xl",
         py: "md"
-    }, others), {
-        children: children
-    }));
+    }, others));
 };
 
 //# sourceMappingURL=TableFooter.js.map

package/dist/cjs/components/table/table-footer/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {TableFooterProps} from './TableFooter.types';\n\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (\n    <Group position=\"apart\" px=\"xl\" py=\"md\" {...others}>\n        {children}\n    </Group>\n);\n"],"names":["TableFooter","children","others","Group","position","px","py"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;;oBAJO;AAIb,IAAMA,cAAmD;QAAEC,kBAAAA,UAAaC;QAAbD;;WAC9D,qBAACE,WAAK;QAACC,UAAS;QAAQC,IAAG;QAAKC,IAAG;OAASJ;kBACvCD;;AACE"}
+{"version":3,"sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"sourcesContent":["import {Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nexport interface TableFooterProps extends GroupProps {\n    children?: ReactNode;\n}\n\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({...others}) => (\n    <Group justify=\"space-between\" px=\"xl\" py=\"md\" {...others} />\n);\n"],"names":["TableFooter","others","Group","justify","px","py"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;;;oBAPmB;AAOzB,IAAMA,cAAmD;QAAKC;WACjE,qBAACC,WAAK;QAACC,SAAQ;QAAgBC,IAAG;QAAKC,IAAG;OAASJ;AAAS"}

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

@@ -1,4 +1,22 @@
-import { FunctionComponent } from 'react';
-import { TableHeaderProps } from './TableHeader.types';
-export declare const TableHeader: FunctionComponent<TableHeaderProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { ReactNode } from 'react';
+export type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';
+export interface TableHeaderProps extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>, CompoundStylesApiProps<TableHeaderFactory> {
+    children?: ReactNode;
+    unselectAllLabel?: string;
+    selectedCountLabel?: (count: number) => string;
+}
+export type TableHeaderFactory = Factory<{
+    props: TableHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: TableHeaderStylesNames;
+    compound: true;
+}>;
+export declare const TableHeader: import("@mantine/core").MantineComponent<{
+    props: TableHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: TableHeaderStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAOxC,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA8C3D,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,QAAQ,EAAW,OAAO,EAA0B,MAAM,eAAe,CAAC;AACvF,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAOhC,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,QAAQ,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC,EACpD,sBAAsB,CAAC,kBAAkB,CAAC;IAE9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAClD;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAOH,eAAO,MAAM,WAAW;WAXb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAkDhB,CAAC"}

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "TableHeader", {
         return TableHeader;
     }
 });
-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");
@@ -17,60 +16,74 @@ var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _button = require("../../button");
 var _TableLayoutControl = require("../layouts/TableLayoutControl");
-var _Tablestyles = require("../Table.styles");
+var _Table = require("../Table");
 var _TableContext = require("../TableContext");
-var _TableHeaderstyles = /*#__PURE__*/ _interop_require_default._(require("./TableHeader.styles"));
-var TableHeader = function(_param) {
-    var classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, others = _object_without_properties._(_param, [
+var defaultProps = {
+    unselectAllLabel: "Unselect all",
+    selectedCountLabel: function(count) {
+        return "".concat(count, " selected");
+    }
+};
+var TableHeader = (0, _core.factory)(function(props, ref) {
+    var ctx = (0, _TableContext.useTableStyles)();
+    var _useProps = (0, _core.useProps)("PlasmaTableHeader", defaultProps, props), unselectAllLabel = _useProps.unselectAllLabel, selectedCountLabel = _useProps.selectedCountLabel, children = _useProps.children, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
+        "unselectAllLabel",
+        "selectedCountLabel",
+        "children",
         "classNames",
+        "className",
         "styles",
-        "unstyled",
-        "children"
+        "style",
+        "vars"
     ]);
     var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection, disableRowSelection = _useTable.disableRowSelection;
-    var classes = (0, _TableHeaderstyles.default)(null, {
-        name: "TableHeader",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }).classes;
     var selectedRows = getSelectedRows();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Grid, _object_spread_props._(_object_spread._({
-        justify: "flex-start",
-        align: "center",
-        gutter: "sm",
-        p: 0,
-        pl: "md",
-        pr: "lg",
-        m: 0,
-        className: classes.root
-    }, others), {
-        children: [
-            multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
-                span: "auto",
-                py: "sm",
-                className: classes.multiSelectInfo,
-                order: _Tablestyles.TableComponentsOrder.MultiSelectInfo,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
-                    label: "Unselect all",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_button.Button, {
-                        onClick: clearSelection,
-                        variant: "subtle",
-                        disabled: disableRowSelection,
-                        leftIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
-                            height: 16
-                        }),
-                        children: [
-                            selectedRows.length,
-                            " selected"
-                        ]
+    var stylesApiProps = {
+        classNames: classNames,
+        styles: styles
+    };
+    var innerStyles = ctx.getStyles("headerGridInner", stylesApiProps);
+    var gridStyles = ctx.getStyles("headerGrid", stylesApiProps);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({
+        ref: ref
+    }, ctx.getStyles("headerRoot", _object_spread._({
+        className: className,
+        style: style
+    }, stylesApiProps)), others), {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Grid, {
+            justify: "flex-start",
+            align: "center",
+            classNames: {
+                inner: innerStyles.className,
+                root: gridStyles.className
+            },
+            styles: {
+                inner: innerStyles.style,
+                root: gridStyles.style
+            },
+            children: [
+                multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
+                    span: "auto"
+                }, ctx.getStyles("headerCol", stylesApiProps)), {
+                    order: _Table.TableComponentsOrder.MultiSelectInfo,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
+                        label: unselectAllLabel,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
+                            onClick: clearSelection,
+                            variant: "subtle",
+                            disabled: disableRowSelection,
+                            leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
+                                height: 16
+                            }),
+                            children: selectedCountLabel(selectedRows.length)
+                        })
                     })
-                })
-            }) : null,
-            children,
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLayoutControl.TableLayoutControl, {})
-        ]
+                })) : null,
+                children,
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLayoutControl.TableLayoutControl, {})
+            ]
+        })
     }));
-};
+});
 
 //# sourceMappingURL=TableHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Grid, Tooltip} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {Button} from '../../button';\nimport {TableLayoutControl} from '../layouts/TableLayoutControl';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableHeader.styles';\nimport {TableHeaderProps} from './TableHeader.types';\n\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...others\n}) => {\n    const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const selectedRows = getSelectedRows();\n\n    return (\n        <Grid\n            justify=\"flex-start\"\n            align=\"center\"\n            gutter=\"sm\"\n            p={0}\n            pl=\"md\"\n            pr=\"lg\"\n            m={0}\n            className={classes.root}\n            {...others}\n        >\n            {multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                <Grid.Col\n                    span=\"auto\"\n                    py=\"sm\"\n                    className={classes.multiSelectInfo}\n                    order={TableComponentsOrder.MultiSelectInfo}\n                >\n                    <Tooltip label=\"Unselect all\">\n                        <Button\n                            onClick={clearSelection}\n                            variant=\"subtle\"\n                            disabled={disableRowSelection}\n                            leftIcon={<CrossSize16Px height={16} />}\n                        >\n                            {selectedRows.length} selected\n                        </Button>\n                    </Tooltip>\n                </Grid.Col>\n            ) : null}\n            {children}\n            <TableLayoutControl />\n        </Grid>\n    );\n};\n"],"names":["TableHeader","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","disableRowSelection","classes","useStyles","name","selectedRows","Grid","justify","align","gutter","p","pl","pr","m","className","root","length","Col","span","py","multiSelectInfo","order","TableComponentsOrder","MultiSelectInfo","Tooltip","label","Button","onClick","variant","disabled","leftIcon","CrossSize16Px","height","TableLayoutControl"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;;gCAXe;oBACA;sBAGP;kCACY;2BACE;4BACZ;0EACD;AAGf,IAAMA,cAAmD;QAC5DC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAyFE,YAAAA,IAAAA,sBAAQ,KAA1FC,kBAAkFD,UAAlFC,iBAAiBC,2BAAiEF,UAAjEE,0BAA0BC,iBAAuCH,UAAvCG,gBAAgBC,sBAAuBJ,UAAvBI;IAClE,IAAM,AAACC,UAAWC,IAAAA,0BAAS,EAAC,MAAM;QAACC,MAAM;QAAeZ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EQ;IACP,IAAMG,eAAeP;IAErB,qBACI,sBAACQ,UAAI;QACDC,SAAQ;QACRC,OAAM;QACNC,QAAO;QACPC,GAAG;QACHC,IAAG;QACHC,IAAG;QACHC,GAAG;QACHC,WAAWZ,QAAQa,IAAI;OACnBnB;;YAEHG,4BAA4BM,aAAaW,MAAM,GAAG,kBAC/C,qBAACV,UAAI,CAACW,GAAG;gBACLC,MAAK;gBACLC,IAAG;gBACHL,WAAWZ,QAAQkB,eAAe;gBAClCC,OAAOC,iCAAoB,CAACC,eAAe;0BAE3C,cAAA,qBAACC,aAAO;oBAACC,OAAM;8BACX,cAAA,sBAACC,cAAM;wBACHC,SAAS3B;wBACT4B,SAAQ;wBACRC,UAAU5B;wBACV6B,wBAAU,qBAACC,+BAAa;4BAACC,QAAQ;;;4BAEhC3B,aAAaW,MAAM;4BAAC;;;;iBAIjC;YACHrB;0BACD,qBAACsC,sCAAkB;;;AAG/B"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, BoxProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../../button';\nimport {TableLayoutControl} from '../layouts/TableLayoutControl';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';\n\nexport interface TableHeaderProps\n    extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>,\n        CompoundStylesApiProps<TableHeaderFactory> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n    unselectAllLabel?: string;\n    selectedCountLabel?: (count: number) => string;\n}\n\nexport type TableHeaderFactory = Factory<{\n    props: TableHeaderProps;\n    ref: HTMLDivElement;\n    stylesNames: TableHeaderStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableHeaderProps> = {\n    unselectAllLabel: 'Unselect all',\n    selectedCountLabel: (count) => `${count} selected`,\n};\n\nexport const TableHeader = factory<TableHeaderFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {unselectAllLabel, selectedCountLabel, children, classNames, className, styles, style, vars, ...others} =\n        useProps('PlasmaTableHeader', defaultProps, props);\n    const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();\n    const selectedRows = getSelectedRows();\n\n    const stylesApiProps = {classNames, styles};\n    const innerStyles = ctx.getStyles('headerGridInner', stylesApiProps);\n    const gridStyles = ctx.getStyles('headerGrid', stylesApiProps);\n\n    return (\n        <Box ref={ref} {...ctx.getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>\n            <Grid\n                justify=\"flex-start\"\n                align=\"center\"\n                classNames={{inner: innerStyles.className, root: gridStyles.className}}\n                styles={{inner: innerStyles.style, root: gridStyles.style}}\n            >\n                {multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                    <Grid.Col\n                        span=\"auto\"\n                        {...ctx.getStyles('headerCol', stylesApiProps)}\n                        order={TableComponentsOrder.MultiSelectInfo}\n                    >\n                        <Tooltip label={unselectAllLabel}>\n                            <Button\n                                onClick={clearSelection}\n                                variant=\"subtle\"\n                                disabled={disableRowSelection}\n                                leftSection={<CrossSize16Px height={16} />}\n                            >\n                                {selectedCountLabel(selectedRows.length)}\n                            </Button>\n                        </Tooltip>\n                    </Grid.Col>\n                ) : null}\n                {children}\n                <TableLayoutControl />\n            </Grid>\n        </Box>\n    );\n});\n"],"names":["TableHeader","defaultProps","unselectAllLabel","selectedCountLabel","count","factory","props","ref","ctx","useTableStyles","useProps","children","classNames","className","styles","style","vars","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","disableRowSelection","selectedRows","stylesApiProps","innerStyles","getStyles","gridStyles","Box","Grid","justify","align","inner","root","length","Col","span","order","TableComponentsOrder","MultiSelectInfo","Tooltip","label","Button","onClick","variant","disabled","leftSection","CrossSize16Px","height","TableLayoutControl"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;;;gCAjCe;oBAC2C;sBAIlD;kCACY;qBACE;4BACI;AAoBvC,IAAMC,eAA0C;IAC5CC,kBAAkB;IAClBC,oBAAoB,SAACC;eAAU,AAAC,GAAQ,OAANA,OAAM;;AAC5C;AAEO,IAAMJ,cAAcK,IAAAA,aAAO,EAAqB,SAACC,OAAOC;IAC3D,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IACIC,YAAAA,IAAAA,cAAQ,EAAC,qBAAqBT,cAAcK,QADzCJ,mBACHQ,UADGR,kBAAkBC,qBACrBO,UADqBP,oBAAoBQ,WACzCD,UADyCC,UAAUC,aACnDF,UADmDE,YAAYC,YAC/DH,UAD+DG,WAAWC,SAC1EJ,UAD0EI,QAAQC,QAClFL,UADkFK,OAAOC,OACzFN,UADyFM,MAASC,sCAClGP;QADGR;QAAkBC;QAAoBQ;QAAUC;QAAYC;QAAWC;QAAQC;QAAOC;;IAE7F,IAAyFE,YAAAA,IAAAA,sBAAQ,KAA1FC,kBAAkFD,UAAlFC,iBAAiBC,2BAAiEF,UAAjEE,0BAA0BC,iBAAuCH,UAAvCG,gBAAgBC,sBAAuBJ,UAAvBI;IAClE,IAAMC,eAAeJ;IAErB,IAAMK,iBAAiB;QAACZ,YAAAA;QAAYE,QAAAA;IAAM;IAC1C,IAAMW,cAAcjB,IAAIkB,SAAS,CAAC,mBAAmBF;IACrD,IAAMG,aAAanB,IAAIkB,SAAS,CAAC,cAAcF;IAE/C,qBACI,qBAACI,SAAG;QAACrB,KAAKA;OAASC,IAAIkB,SAAS,CAAC,cAAc;QAACb,WAAAA;QAAWE,OAAAA;OAAUS,kBAAsBP;kBACvF,cAAA,sBAACY,UAAI;YACDC,SAAQ;YACRC,OAAM;YACNnB,YAAY;gBAACoB,OAAOP,YAAYZ,SAAS;gBAAEoB,MAAMN,WAAWd,SAAS;YAAA;YACrEC,QAAQ;gBAACkB,OAAOP,YAAYV,KAAK;gBAAEkB,MAAMN,WAAWZ,KAAK;YAAA;;gBAExDK,4BAA4BG,aAAaW,MAAM,GAAG,kBAC/C,qBAACL,UAAI,CAACM,GAAG;oBACLC,MAAK;mBACD5B,IAAIkB,SAAS,CAAC,aAAaF;oBAC/Ba,OAAOC,2BAAoB,CAACC,eAAe;8BAE3C,cAAA,qBAACC,aAAO;wBAACC,OAAOvC;kCACZ,cAAA,qBAACwC,cAAM;4BACHC,SAAStB;4BACTuB,SAAQ;4BACRC,UAAUvB;4BACVwB,2BAAa,qBAACC,+BAAa;gCAACC,QAAQ;;sCAEnC7C,mBAAmBoB,aAAaW,MAAM;;;sBAInD;gBACHvB;8BACD,qBAACsC,sCAAkB;;;;AAInC"}

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

@@ -1,3 +1,29 @@
-import { ThProps } from './Th.types';
-export declare const Th: <T>(props: ThProps<T>) => import("react/jsx-runtime").JSX.Element;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { Header } from '@tanstack/react-table';
+import { ComponentType, ForwardedRef, SVGProps } from 'react';
+import { CustomComponentThemeExtend } from '../../../utils';
+export type TableThStylesNames = 'th';
+export type SortState = 'asc' | 'desc' | 'none';
+export interface ThProps<T = unknown> extends BoxProps, CompoundStylesApiProps<TableThFactory> {
+    header: Header<T, unknown>;
+    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;
+}
+export type TableThFactory = Factory<{
+    props: ThProps;
+    ref: HTMLTableCellElement;
+    stylesNames: TableThStylesNames;
+    compound: true;
+}>;
+export declare const Th: {
+    <T>(props: ThProps<T> & {
+        ref?: ForwardedRef<HTMLTableCellElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    extend: CustomComponentThemeExtend<{
+        props: ThProps;
+        ref: HTMLTableCellElement;
+        stylesNames: TableThStylesNames;
+        compound: true;
+    }>;
+};
 //# 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":"AAKA,OAAO,EAAY,OAAO,EAAC,MAAM,YAAY,CAAC;AAkB9C,eAAO,MAAM,EAAE,mEA0Cd,CAAC"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAkC,MAAM,eAAe,CAAC;AACjF,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAiB,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAC,0BAA0B,EAAW,MAAM,gBAAgB,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,cAAc,CAAC;IAC1F,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;AAcD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,oBAAoB,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,EAAE;;cAAmC,aAAa,oBAAoB,CAAC;;;eAVzE,OAAO;aACT,oBAAoB;qBACZ,kBAAkB;kBACrB,IAAI;;CAgEjB,CAAC"}

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "Th", {
         return 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");
@@ -16,7 +15,8 @@ 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 _Thstyles = /*#__PURE__*/ _interop_require_default._(require("./Th.styles"));
+var _utils = require("../../../utils");
+var _TableContext = require("../TableContext");
 var SortingIcons = {
     asc: _plasmareacticons.ArrowUpSize16Px,
     desc: _plasmareacticons.ArrowDownSize16Px,
@@ -31,32 +31,42 @@ 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, [
+    var ctx = (0, _TableContext.useTableStyles)();
+    var _useProps = (0, _core.useProps)("PlasmaTableTh", defaultProps, props), header = _useProps.header, sortingIcons = _useProps.sortingIcons, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
         "header",
+        "sortingIcons",
         "classNames",
+        "className",
         "styles",
-        "unstyled",
-        "sortingIcons"
+        "style",
+        "vars"
     ]);
     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 _useStyles = (0, _Thstyles.default)(columnSizing, {
-        name: "PlasmaTableColumnHeader",
+    var thStyles = ctx.getStyles("th", {
         classNames: classNames,
+        className: className,
         styles: styles,
-        unstyled: unstyled
-    }), classes = _useStyles.classes, cx = _useStyles.cx;
+        style: style
+    });
     if (header.isPlaceholder) {
         return null;
     }
     if (!header.column.getCanSort()) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
-            className: classes.root,
+        var _columnSizing_size;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", _object_spread_props._(_object_spread._({
+            className: thStyles.className,
+            style: _object_spread_props._(_object_spread._({}, thStyles.style), {
+                width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : "auto",
+                minWidth: columnSizing.minSize,
+                maxWidth: columnSizing.maxSize
+            })
+        }, others), {
             children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
-        });
+        }));
     }
     var onSort = header.column.getToggleSortingHandler();
     var sortingOrder = header.column.getIsSorted() || "none";
@@ -64,12 +74,12 @@ var Th = function(props) {
     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), {
+        "aria-sort": SortingLabels[sortingOrder],
+        "data-control": true
+    }, thStyles, others), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
-            noWrap: true,
-            spacing: "xs",
+            wrap: "nowrap",
+            gap: "xs",
             children: [
                 (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext()),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
@@ -80,5 +90,6 @@ var Th = function(props) {
         })
     }));
 };
+Th.extend = _utils.identity;
 
 //# 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 {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"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\nimport {AriaAttributes, ComponentType, ForwardedRef, SVGProps} from 'react';\nimport {CustomComponentThemeExtend, identity} from '../../../utils';\nimport {useTableStyles} from '../TableContext';\n\nexport type TableThStylesNames = 'th';\n\nexport type SortState = 'asc' | 'desc' | 'none';\n\nexport interface ThProps<T = unknown> extends BoxProps, CompoundStylesApiProps<TableThFactory> {\n    header: Header<T, unknown>;\n    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;\n}\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\nexport type TableThFactory = Factory<{\n    props: ThProps;\n    ref: HTMLTableCellElement;\n    stylesNames: TableThStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<ThProps> = {\n    sortingIcons: SortingIcons,\n};\n\nexport const Th = <T,>(props: ThProps<T> & {ref?: ForwardedRef<HTMLTableCellElement>}) => {\n    const ctx = useTableStyles();\n    const {header, sortingIcons, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableTh',\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 thStyles = ctx.getStyles('th', {classNames, className, styles, style});\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th\n                className={thStyles.className}\n                style={{\n                    ...thStyles.style,\n                    width: columnSizing.size ?? 'auto',\n                    minWidth: columnSizing.minSize,\n                    maxWidth: columnSizing.maxSize,\n                }}\n                {...others}\n            >\n                {flexRender(header.column.columnDef.header, header.getContext())}\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        <UnstyledButton\n            component=\"th\"\n            onClick={onSort}\n            aria-sort={SortingLabels[sortingOrder]}\n            data-control={true}\n            {...thStyles}\n            {...others}\n        >\n            <Group wrap=\"nowrap\" gap=\"xs\">\n                {flexRender(header.column.columnDef.header, header.getContext())}\n                <Icon height={16} width={16} />\n            </Group>\n        </UnstyledButton>\n    );\n};\nTh.extend = identity as CustomComponentThemeExtend<TableThFactory>;\n"],"names":["Th","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","defaultProps","sortingIcons","props","ctx","useTableStyles","useProps","header","classNames","className","styles","style","vars","others","columnSizing","defaultColumnSizing","size","column","columnDef","minSize","maxSize","thStyles","getStyles","isPlaceholder","getCanSort","th","width","minWidth","maxWidth","flexRender","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","UnstyledButton","component","onClick","aria-sort","data-control","Group","wrap","gap","height","extend","identity"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;gCAxC8D;oBACV;0BAEX;qBAEH;4BACtB;AAW7B,IAAMC,eAAwC;IAC1CC,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgE;IAClEN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AASA,IAAMG,eAAiC;IACnCC,cAAcT;AAClB;AAEO,IAAMD,KAAK,SAAKW;IACnB,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAAsFC,YAAAA,IAAAA,cAAQ,EAC1F,iBACAL,cACAE,QAHGI,SAA+ED,UAA/EC,QAAQL,eAAuEI,UAAvEJ,cAAcM,aAAyDF,UAAzDE,YAAYC,YAA6CH,UAA7CG,WAAWC,SAAkCJ,UAAlCI,QAAQC,QAA0BL,UAA1BK,OAAOC,OAAmBN,UAAnBM,MAASC,sCAAUP;QAA/EC;QAAQL;QAAcM;QAAYC;QAAWC;QAAQC;QAAOC;;IAMnE,IAAME,eAAe,4CACdC,+BAAmB;QACtBC,MAAMT,OAAOU,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAASZ,OAAOU,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASb,OAAOU,MAAM,CAACC,SAAS,CAACE,OAAO;;IAG5C,IAAMC,WAAWjB,IAAIkB,SAAS,CAAC,MAAM;QAACd,YAAAA;QAAYC,WAAAA;QAAWC,QAAAA;QAAQC,OAAAA;IAAK;IAE1E,IAAIJ,OAAOgB,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAAChB,OAAOU,MAAM,CAACO,UAAU,IAAI;YAMVV;QALnB,qBACI,qBAACW;YACGhB,WAAWY,SAASZ,SAAS;YAC7BE,OAAO,4CACAU,SAASV,KAAK;gBACjBe,OAAOZ,CAAAA,qBAAAA,aAAaE,IAAI,cAAjBF,gCAAAA,qBAAqB;gBAC5Ba,UAAUb,aAAaK,OAAO;gBAC9BS,UAAUd,aAAaM,OAAO;;WAE9BP;sBAEHgB,IAAAA,sBAAU,EAACtB,OAAOU,MAAM,CAACC,SAAS,CAACX,MAAM,EAAEA,OAAOuB,UAAU;;IAGzE;IAEA,IAAMC,SAASxB,OAAOU,MAAM,CAACe,uBAAuB;IACpD,IAAMC,eAAe1B,OAAOU,MAAM,CAACiB,WAAW,MAAM;IACpD,IAAMC,OAAOjC,YAAY,CAAC+B,aAAa;IAEvC,qBACI,qBAACG,oBAAc;QACXC,WAAU;QACVC,SAASP;QACTQ,aAAWvC,aAAa,CAACiC,aAAa;QACtCO,gBAAc;OACVnB,UACAR;kBAEJ,cAAA,sBAAC4B,WAAK;YAACC,MAAK;YAASC,KAAI;;gBACpBd,IAAAA,sBAAU,EAACtB,OAAOU,MAAM,CAACC,SAAS,CAACX,MAAM,EAAEA,OAAOuB,UAAU;8BAC7D,qBAACK;oBAAKS,QAAQ;oBAAIlB,OAAO;;;;;AAIzC;AACAlC,GAAGqD,MAAM,GAAGC,eAAQ"}