@coveord/plasma-mantine 53.1.4 → 54.0.1

package/dist/cjs/components/table/table-columns-selector/TableColumnsSelector.js

@@ -11,42 +11,39 @@ Object.defineProperty(exports, "TableColumnsSelector", {
 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 _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
+var _reacttable = require("@tanstack/react-table");
 var _Table = require("../Table");
 var _TableContext = require("../TableContext");
-var COLUMNS_IDS_TO_EXCLUDE = [
-    'collapsible',
-    'select'
-];
 var defaultProps = {
     label: 'Edit columns',
     buttonVariant: 'outline',
     limitReachedTooltip: 'You have reached the maximum display limit.',
+    alwaysVisibleTooltip: 'This column is always visible.',
     showVisibleCountLabel: false
 };
 var TableColumnsSelector = (0, _core.factory)(function(props, ref) {
-    var ctx = (0, _TableContext.useTableStyles)();
-    var _useProps = (0, _core.useProps)('TableColumnsSelector', defaultProps, props), label = _useProps.label, buttonVariant = _useProps.buttonVariant, showVisibleCountLabel = _useProps.showVisibleCountLabel, _useProps_nonHideableColumns = _useProps.nonHideableColumns, nonHideableColumns = _useProps_nonHideableColumns === void 0 ? [] : _useProps_nonHideableColumns, maxSelectableColumns = _useProps.maxSelectableColumns, footer = _useProps.footer, limitReachedTooltip = _useProps.limitReachedTooltip, columnNames = _useProps.columnNames, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
+    var getStyles = (0, _TableContext.useTableContext)().getStyles;
+    var _useProps = (0, _core.useProps)('TableColumnsSelector', defaultProps, props), label = _useProps.label, buttonVariant = _useProps.buttonVariant, showVisibleCountLabel = _useProps.showVisibleCountLabel, maxSelectableColumns = _useProps.maxSelectableColumns, footer = _useProps.footer, limitReachedTooltip = _useProps.limitReachedTooltip, alwaysVisibleTooltip = _useProps.alwaysVisibleTooltip, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
         "label",
         "buttonVariant",
         "showVisibleCountLabel",
-        "nonHideableColumns",
         "maxSelectableColumns",
         "footer",
         "limitReachedTooltip",
-        "columnNames",
+        "alwaysVisibleTooltip",
         "classNames",
         "className",
         "styles",
         "style",
         "vars"
     ]);
-    var getAllColumns = (0, _TableContext.useTable)().getAllColumns;
-    var columnsToExclude = _to_consumable_array._(nonHideableColumns).concat(_to_consumable_array._(COLUMNS_IDS_TO_EXCLUDE));
-    var filteredColumns = getAllColumns().filter(function(column) {
-        return !columnsToExclude.includes(column.id);
+    var table = (0, _TableContext.useTableContext)().table;
+    var allColumns = table.getAllLeafColumns();
+    var filteredColumns = allColumns.filter(function(column) {
+        var _column_columnDef_meta;
+        return !((_column_columnDef_meta = column.columnDef.meta) === null || _column_columnDef_meta === void 0 ? void 0 : _column_columnDef_meta.controlColumn);
     });
     var selectedColumnsCount = filteredColumns.filter(function(column) {
         return column.getIsVisible();
@@ -61,7 +58,7 @@ var TableColumnsSelector = (0, _core.factory)(function(props, ref) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
         order: _Table.TableComponentsOrder.ColumnsSelector
-    }, ctx.getStyles('columnSelector', _object_spread._({
+    }, getStyles('columnSelector', _object_spread._({
         className: className,
         style: style
     }, stylesApiProps)), others), {
@@ -81,23 +78,30 @@ var TableColumnsSelector = (0, _core.factory)(function(props, ref) {
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ScrollArea.Autosize, {
                             mah: 154,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, _object_spread_props._(_object_spread._({}, ctx.getStyles('columnSelectorWrapper', stylesApiProps)), {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, _object_spread_props._(_object_spread._({}, getStyles('columnSelectorWrapper', stylesApiProps)), {
                                 children: filteredColumns.map(function(column) {
-                                    var isDisabled = selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();
+                                    var alwaysVisible = !column.getCanHide();
+                                    var isDisabled = selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible() || alwaysVisible;
                                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
-                                        label: limitReachedTooltip,
+                                        label: alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip,
                                         disabled: !isDisabled,
                                         position: "left",
                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Checkbox, {
-                                                label: (columnNames === null || columnNames === void 0 ? void 0 : columnNames[column.id]) || column.id,
+                                                label: (0, _reacttable.flexRender)(column.columnDef.header, {
+                                                    table: table,
+                                                    column: column,
+                                                    header: {
+                                                        column: column
+                                                    }
+                                                }),
                                                 name: column.id,
-                                                checked: column.getIsVisible(),
+                                                checked: column.getIsVisible() || alwaysVisible,
                                                 disabled: isDisabled,
                                                 onChange: column.getToggleVisibilityHandler()
                                             }, column.id)
                                         })
-                                    });
+                                    }, column.id);
                                 })
                             }))
                         }),

package/dist/cjs/components/table/table-columns-selector/TableColumnsSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {\n    BoxProps,\n    Button,\n    Checkbox,\n    Divider,\n    factory,\n    Factory,\n    Grid,\n    Popover,\n    ScrollArea,\n    Stack,\n    Tooltip,\n    useProps,\n} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {ReactNode} from 'react';\n\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';\n\nexport interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiProps<TableColumnsSelectorFactory> {\n    /**\n     * The label of the button\n     * @default 'Edit columns'\n     */\n    label?: ReactNode;\n    /**\n     * The style variant of the button\n     * @default 'outline'\n     */\n    buttonVariant?: string;\n    /**\n     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.\n     * @default []\n     */\n    nonHideableColumns?: string[];\n    /**\n     * Whether the count of visible columns is shown in the button label.\n     * @default false\n     */\n    showVisibleCountLabel?: boolean;\n    /**\n     * The maximum number of columns that can be selected at the same time.\n     * If defined a footer will render with the remaining number of columns that can be selected.\n     */\n    maxSelectableColumns?: number;\n    /**\n     * A dictionary of column ids and names to use for the checkbox labels.\n     */\n    columnNames: Record<string, string>;\n    /**\n     * The content to display in the footer when maxSelectableColumns is defined.\n     */\n    footer?: ReactNode;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox.\n     * @default 'You have reached the maximum display limit.'\n     */\n    limitReachedTooltip?: string;\n}\n\nexport type TableColumnsSelectorFactory = Factory<{\n    props: TableColumnsSelectorProps;\n    ref: HTMLDivElement;\n    stylesNames: TableColumnsSelectorStylesNames;\n    compound: true;\n}>;\n\nconst COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];\n\nconst defaultProps: Partial<TableColumnsSelectorProps> = {\n    label: 'Edit columns',\n    buttonVariant: 'outline',\n    limitReachedTooltip: 'You have reached the maximum display limit.',\n    showVisibleCountLabel: false,\n};\n\nexport const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {\n        label,\n        buttonVariant,\n        showVisibleCountLabel,\n        nonHideableColumns = [],\n        maxSelectableColumns,\n        footer,\n        limitReachedTooltip,\n        columnNames,\n        classNames,\n        className,\n        styles,\n        style,\n        vars,\n        ...others\n    } = useProps('TableColumnsSelector', defaultProps, props);\n    const {getAllColumns} = useTable();\n\n    const columnsToExclude = [...nonHideableColumns, ...COLUMNS_IDS_TO_EXCLUDE];\n\n    const filteredColumns = getAllColumns().filter((column) => !columnsToExclude.includes(column.id));\n\n    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n    if (filteredColumns.length <= 0) {\n        return null;\n    }\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.ColumnsSelector}\n            {...ctx.getStyles('columnSelector', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal position=\"bottom\" shadow=\"md\">\n                <Popover.Target>\n                    <Button variant={buttonVariant}>{`${label}${\n                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''\n                    }`}</Button>\n                </Popover.Target>\n                <Popover.Dropdown miw={240}>\n                    <ScrollArea.Autosize mah={154}>\n                        <Stack {...ctx.getStyles('columnSelectorWrapper', stylesApiProps)}>\n                            {filteredColumns.map((column) => {\n                                const isDisabled =\n                                    selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();\n                                return (\n                                    <Tooltip label={limitReachedTooltip} disabled={!isDisabled} position=\"left\">\n                                        <div>\n                                            <Checkbox\n                                                key={column.id}\n                                                label={columnNames?.[column.id] || column.id}\n                                                name={column.id}\n                                                checked={column.getIsVisible()}\n                                                disabled={isDisabled}\n                                                onChange={column.getToggleVisibilityHandler()}\n                                            />\n                                        </div>\n                                    </Tooltip>\n                                );\n                            })}\n                        </Stack>\n                    </ScrollArea.Autosize>\n                    {maxSelectableColumns && (\n                        <>\n                            <Divider mb=\"xs\" mt=\"sm\" />\n                            {footer}\n                        </>\n                    )}\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["TableColumnsSelector","COLUMNS_IDS_TO_EXCLUDE","defaultProps","label","buttonVariant","limitReachedTooltip","showVisibleCountLabel","factory","props","ref","ctx","useTableStyles","useProps","nonHideableColumns","maxSelectableColumns","footer","columnNames","classNames","className","styles","style","vars","others","getAllColumns","useTable","columnsToExclude","filteredColumns","filter","column","includes","id","selectedColumnsCount","getIsVisible","length","stylesApiProps","Grid","Col","span","order","TableComponentsOrder","ColumnsSelector","getStyles","Popover","withinPortal","position","shadow","Target","Button","variant","Dropdown","miw","ScrollArea","Autosize","mah","Stack","map","isDisabled","Tooltip","disabled","div","Checkbox","name","checked","onChange","getToggleVisibilityHandler","Divider","mb","mt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+EaA;;;eAAAA;;;;;;;;oBAlEN;qBAI4B;4BACI;AAoDvC,IAAMC,yBAAyB;IAAC;IAAe;CAAS;AAExD,IAAMC,eAAmD;IACrDC,OAAO;IACPC,eAAe;IACfC,qBAAqB;IACrBC,uBAAuB;AAC3B;AAEO,IAAMN,uBAAuBO,IAAAA,aAAO,EAA8B,SAACC,OAAOC;IAC7E,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAeIC,YAAAA,IAAAA,cAAQ,EAAC,wBAAwBV,cAAcM,QAd/CL,QAcAS,UAdAT,OACAC,gBAaAQ,UAbAR,eACAE,wBAYAM,UAZAN,sDAYAM,UAXAC,oBAAAA,+DAAqB,EAAE,iCACvBC,uBAUAF,UAVAE,sBACAC,SASAH,UATAG,QACAV,sBAQAO,UARAP,qBACAW,cAOAJ,UAPAI,aACAC,aAMAL,UANAK,YACAC,YAKAN,UALAM,WACAC,SAIAP,UAJAO,QACAC,QAGAR,UAHAQ,OACAC,OAEAT,UAFAS,MACGC,sCACHV;QAdAT;QACAC;QACAE;QACAO;QACAC;QACAC;QACAV;QACAW;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGJ,IAAM,AAACE,gBAAiBC,IAAAA,sBAAQ,IAAzBD;IAEP,IAAME,mBAAmB,AAAC,uBAAGZ,2BAAoB,uBAAGZ;IAEpD,IAAMyB,kBAAkBH,gBAAgBI,MAAM,CAAC,SAACC;eAAW,CAACH,iBAAiBI,QAAQ,CAACD,OAAOE,EAAE;;IAE/F,IAAMC,uBAAuBL,gBAAgBC,MAAM,CAAC,SAACC;eAAWA,OAAOI,YAAY;OAAIC,MAAM;IAE7F,IAAIP,gBAAgBO,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,IAAMC,iBAAiB;QAACjB,YAAAA;QAAYE,QAAAA;IAAM;IAE1C,qBACI,qBAACgB,UAAI,CAACC,GAAG;QACLC,MAAK;QACLC,OAAOC,2BAAoB,CAACC,eAAe;OACvC9B,IAAI+B,SAAS,CAAC,kBAAkB;QAACvB,WAAAA;QAAWE,OAAAA;OAAUc,kBACtDZ;kBAEJ,cAAA,sBAACoB,aAAO;YAACC,YAAY;YAACC,UAAS;YAASC,QAAO;;8BAC3C,qBAACH,aAAO,CAACI,MAAM;8BACX,cAAA,qBAACC,YAAM;wBAACC,SAAS5C;kCAAgB,AAAC,GAC9BE,OADgCH,OAEnC,OADGG,wBAAwB,AAAC,KAAyB,OAArByB,sBAAqB,OAAK;;;8BAG/D,sBAACW,aAAO,CAACO,QAAQ;oBAACC,KAAK;;sCACnB,qBAACC,gBAAU,CAACC,QAAQ;4BAACC,KAAK;sCACtB,cAAA,qBAACC,WAAK,8CAAK5C,IAAI+B,SAAS,CAAC,yBAAyBP;0CAC7CR,gBAAgB6B,GAAG,CAAC,SAAC3B;oCAClB,IAAM4B,aACFzB,wBAAwBjB,wBAAwB,CAACc,OAAOI,YAAY;oCACxE,qBACI,qBAACyB,aAAO;wCAACtD,OAAOE;wCAAqBqD,UAAU,CAACF;wCAAYZ,UAAS;kDACjE,cAAA,qBAACe;sDACG,cAAA,qBAACC,cAAQ;gDAELzD,OAAOa,CAAAA,wBAAAA,kCAAAA,WAAa,CAACY,OAAOE,EAAE,CAAC,KAAIF,OAAOE,EAAE;gDAC5C+B,MAAMjC,OAAOE,EAAE;gDACfgC,SAASlC,OAAOI,YAAY;gDAC5B0B,UAAUF;gDACVO,UAAUnC,OAAOoC,0BAA0B;+CALtCpC,OAAOE,EAAE;;;gCAUlC;;;wBAGPhB,sCACG;;8CACI,qBAACmD,aAAO;oCAACC,IAAG;oCAAKC,IAAG;;gCACnBpD;;;;;;;;AAO7B"}
+{"version":3,"sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {\n    BoxProps,\n    Button,\n    Checkbox,\n    CompoundStylesApiProps,\n    Divider,\n    factory,\n    Factory,\n    Grid,\n    Popover,\n    ScrollArea,\n    Stack,\n    Tooltip,\n    useProps,\n} from '@mantine/core';\nimport {flexRender, Header} from '@tanstack/react-table';\nimport {ReactNode} from 'react';\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';\n\nexport interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiProps<TableColumnsSelectorFactory> {\n    /**\n     * The label of the button\n     * @default 'Edit columns'\n     */\n    label?: ReactNode;\n    /**\n     * The style variant of the button\n     * @default 'outline'\n     */\n    buttonVariant?: string;\n    /**\n     * Whether the count of visible columns is shown in the button label.\n     * @default false\n     */\n    showVisibleCountLabel?: boolean;\n    /**\n     * The maximum number of columns that can be selected at the same time.\n     * If defined a footer will render with the remaining number of columns that can be selected.\n     */\n    maxSelectableColumns?: number;\n    /**\n     * The content to display in the footer when maxSelectableColumns is defined.\n     */\n    footer?: ReactNode;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n     * @default 'You have reached the maximum display limit.'\n     */\n    limitReachedTooltip?: string;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n     * @default 'This column is always visible.'\n     */\n    alwaysVisibleTooltip?: string;\n}\n\nexport type TableColumnsSelectorFactory = Factory<{\n    props: TableColumnsSelectorProps;\n    ref: HTMLDivElement;\n    stylesNames: TableColumnsSelectorStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableColumnsSelectorProps> = {\n    label: 'Edit columns',\n    buttonVariant: 'outline',\n    limitReachedTooltip: 'You have reached the maximum display limit.',\n    alwaysVisibleTooltip: 'This column is always visible.',\n    showVisibleCountLabel: false,\n};\n\nexport const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props, ref) => {\n    const {getStyles} = useTableContext();\n    const {\n        label,\n        buttonVariant,\n        showVisibleCountLabel,\n        maxSelectableColumns,\n        footer,\n        limitReachedTooltip,\n        alwaysVisibleTooltip,\n        classNames,\n        className,\n        styles,\n        style,\n        vars,\n        ...others\n    } = useProps('TableColumnsSelector', defaultProps, props);\n    const {table} = useTableContext();\n\n    const allColumns = table.getAllLeafColumns();\n\n    const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n    if (filteredColumns.length <= 0) {\n        return null;\n    }\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.ColumnsSelector}\n            {...getStyles('columnSelector', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal position=\"bottom\" shadow=\"md\">\n                <Popover.Target>\n                    <Button variant={buttonVariant}>{`${label}${\n                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''\n                    }`}</Button>\n                </Popover.Target>\n                <Popover.Dropdown miw={240}>\n                    <ScrollArea.Autosize mah={154}>\n                        <Stack {...getStyles('columnSelectorWrapper', stylesApiProps)}>\n                            {filteredColumns.map((column) => {\n                                const alwaysVisible = !column.getCanHide();\n                                const isDisabled =\n                                    (selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible()) ||\n                                    alwaysVisible;\n\n                                return (\n                                    <Tooltip\n                                        label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n                                        disabled={!isDisabled}\n                                        position=\"left\"\n                                        key={column.id}\n                                    >\n                                        <div>\n                                            <Checkbox\n                                                key={column.id}\n                                                label={flexRender(column.columnDef.header, {\n                                                    table,\n                                                    column,\n                                                    header: {column} as Header<unknown, unknown>,\n                                                })}\n                                                name={column.id}\n                                                checked={column.getIsVisible() || alwaysVisible}\n                                                disabled={isDisabled}\n                                                onChange={column.getToggleVisibilityHandler()}\n                                            />\n                                        </div>\n                                    </Tooltip>\n                                );\n                            })}\n                        </Stack>\n                    </ScrollArea.Autosize>\n                    {maxSelectableColumns && (\n                        <>\n                            <Divider mb=\"xs\" mt=\"sm\" />\n                            {footer}\n                        </>\n                    )}\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["TableColumnsSelector","defaultProps","label","buttonVariant","limitReachedTooltip","alwaysVisibleTooltip","showVisibleCountLabel","factory","props","ref","getStyles","useTableContext","useProps","maxSelectableColumns","footer","classNames","className","styles","style","vars","others","table","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","stylesApiProps","Grid","Col","span","order","TableComponentsOrder","ColumnsSelector","Popover","withinPortal","position","shadow","Target","Button","variant","Dropdown","miw","ScrollArea","Autosize","mah","Stack","map","alwaysVisible","getCanHide","isDisabled","Tooltip","disabled","div","Checkbox","flexRender","header","name","id","checked","onChange","getToggleVisibilityHandler","Divider","mb","mt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0EaA;;;eAAAA;;;;;;;oBA5DN;0BAC0B;qBAEE;4BACL;AAgD9B,IAAMC,eAAmD;IACrDC,OAAO;IACPC,eAAe;IACfC,qBAAqB;IACrBC,sBAAsB;IACtBC,uBAAuB;AAC3B;AAEO,IAAMN,uBAAuBO,IAAAA,aAAO,EAA8B,SAACC,OAAOC;IAC7E,IAAM,AAACC,YAAaC,IAAAA,6BAAe,IAA5BD;IACP,IAcIE,YAAAA,IAAAA,cAAQ,EAAC,wBAAwBX,cAAcO,QAb/CN,QAaAU,UAbAV,OACAC,gBAYAS,UAZAT,eACAG,wBAWAM,UAXAN,uBACAO,uBAUAD,UAVAC,sBACAC,SASAF,UATAE,QACAV,sBAQAQ,UARAR,qBACAC,uBAOAO,UAPAP,sBACAU,aAMAH,UANAG,YACAC,YAKAJ,UALAI,WACAC,SAIAL,UAJAK,QACAC,QAGAN,UAHAM,OACAC,OAEAP,UAFAO,MACGC,sCACHR;QAbAV;QACAC;QACAG;QACAO;QACAC;QACAV;QACAC;QACAU;QACAC;QACAC;QACAC;QACAC;;IAGJ,IAAM,AAACE,QAASV,IAAAA,6BAAe,IAAxBU;IAEP,IAAMC,aAAaD,MAAME,iBAAiB;IAE1C,IAAMC,kBAAkBF,WAAWG,MAAM,CAAC,SAACC;YAAYA;eAAD,GAACA,yBAAAA,OAAOC,SAAS,CAACC,IAAI,cAArBF,6CAAAA,uBAAuBG,aAAa;;IAC3F,IAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,SAACC;eAAWA,OAAOK,YAAY;OAAIC,MAAM;IAE7F,IAAIR,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,IAAMC,iBAAiB;QAAClB,YAAAA;QAAYE,QAAAA;IAAM;IAE1C,qBACI,qBAACiB,UAAI,CAACC,GAAG;QACLC,MAAK;QACLC,OAAOC,2BAAoB,CAACC,eAAe;OACvC7B,UAAU,kBAAkB;QAACM,WAAAA;QAAWE,OAAAA;OAAUe,kBAClDb;kBAEJ,cAAA,sBAACoB,aAAO;YAACC,YAAY;YAACC,UAAS;YAASC,QAAO;;8BAC3C,qBAACH,aAAO,CAACI,MAAM;8BACX,cAAA,qBAACC,YAAM;wBAACC,SAAS3C;kCAAgB,AAAC,GAC9BG,OADgCJ,OAEnC,OADGI,wBAAwB,AAAC,KAAyB,OAArBwB,sBAAqB,OAAK;;;8BAG/D,sBAACU,aAAO,CAACO,QAAQ;oBAACC,KAAK;;sCACnB,qBAACC,gBAAU,CAACC,QAAQ;4BAACC,KAAK;sCACtB,cAAA,qBAACC,WAAK,8CAAK1C,UAAU,yBAAyBuB;0CACzCT,gBAAgB6B,GAAG,CAAC,SAAC3B;oCAClB,IAAM4B,gBAAgB,CAAC5B,OAAO6B,UAAU;oCACxC,IAAMC,aACF,AAAC1B,wBAAwBjB,wBAAwB,CAACa,OAAOK,YAAY,MACrEuB;oCAEJ,qBACI,qBAACG,aAAO;wCACJvD,OAAOoD,gBAAgBjD,uBAAuBD;wCAC9CsD,UAAU,CAACF;wCACXd,UAAS;kDAGT,cAAA,qBAACiB;sDACG,cAAA,qBAACC,cAAQ;gDAEL1D,OAAO2D,IAAAA,sBAAU,EAACnC,OAAOC,SAAS,CAACmC,MAAM,EAAE;oDACvCzC,OAAAA;oDACAK,QAAAA;oDACAoC,QAAQ;wDAACpC,QAAAA;oDAAM;gDACnB;gDACAqC,MAAMrC,OAAOsC,EAAE;gDACfC,SAASvC,OAAOK,YAAY,MAAMuB;gDAClCI,UAAUF;gDACVU,UAAUxC,OAAOyC,0BAA0B;+CATtCzC,OAAOsC,EAAE;;uCAJjBtC,OAAOsC,EAAE;gCAkB1B;;;wBAGPnD,sCACG;;8CACI,qBAACuD,aAAO;oCAACC,IAAG;oCAAKC,IAAG;;gCACnBxD;;;;;;;;AAO7B"}

package/dist/cjs/components/table/table-date-range-picker/TableDateRangePicker.d.ts

@@ -1,5 +1,4 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 import { DateRangePickerInlineCalendarProps, DateRangePickerPreset } from '../../date-range-picker';
 export type TableDateRangePickerStylesNames = 'dateRangeRoot';
 export interface TableDateRangePickerProps extends BoxProps, CompoundStylesApiProps<TableDateRangePickerFactory>, Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {

package/dist/cjs/components/table/table-date-range-picker/TableDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAA8C,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAI1F,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,+BAA+B,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,yBACb,SAAQ,QAAQ,EACZ,sBAAsB,CAAC,2BAA2B,CAAC,EACnD,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC;IAC9F;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC;IAC9C,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,oBAAoB;WAVtB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EA8DhB,CAAC"}
+{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAA8C,MAAM,eAAe,CAAC;AAIrH,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,+BAA+B,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,yBACb,SAAQ,QAAQ,EACZ,sBAAsB,CAAC,2BAA2B,CAAC,EACnD,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC;IAC9F;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC;IAC9C,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,oBAAoB;WAVtB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EA6DhB,CAAC"}

package/dist/cjs/components/table/table-date-range-picker/TableDateRangePicker.js

@@ -26,7 +26,7 @@ var defaultProps = {
     presets: {}
 };
 var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
-    var ctx = (0, _TableContext.useTableStyles)();
+    var _useTableContext = (0, _TableContext.useTableContext)(), store = _useTableContext.store, getStyles = _useTableContext.getStyles;
     var _useProps = (0, _core.useProps)('PlasmaTableDateRangePicker', defaultProps, props), presets = _useProps.presets, rangeCalendarProps = _useProps.rangeCalendarProps, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
         "presets",
         "rangeCalendarProps",
@@ -37,9 +37,8 @@ var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
         "vars"
     ]);
     var _useState = _sliced_to_array._((0, _react.useState)(false), 2), opened = _useState[0], setOpened = _useState[1];
-    var form = (0, _TableContext.useTable)().form;
     var onApply = function(dates) {
-        form.setFieldValue('dateRange', dates);
+        store.setDateRange(dates);
         setOpened(false);
     };
     var onCancel = function() {
@@ -48,8 +47,8 @@ var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
     var formatDate = function(date) {
         return (0, _dayjs.default)(date).format('MMM DD, YYYY');
     };
-    var formattedRange = "".concat(formatDate(form.values.dateRange[0]), " - ").concat(formatDate(form.values.dateRange[1]));
-    var dateRangeInitialized = form.values.dateRange.every(function(date) {
+    var formattedRange = "".concat(formatDate(store.state.dateRange[0]), " - ").concat(formatDate(store.state.dateRange[1]));
+    var dateRangeInitialized = store.state.dateRange.every(function(date) {
         return _instanceof._(date, Date);
     });
     var stylesApiProps = {
@@ -60,13 +59,14 @@ var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
         span: "content",
         order: _Table.TableComponentsOrder.DateRangePicker,
         ref: ref
-    }, ctx.getStyles('dateRangeRoot', _object_spread._({
+    }, getStyles('dateRangeRoot', _object_spread._({
         className: className,
         style: style
     }, stylesApiProps)), others), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
             withinPortal: true,
             opened: opened,
+            onChange: setOpened,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.InputBase, {
@@ -84,7 +84,7 @@ var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Dropdown, {
                     p: 0,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_daterangepicker.DateRangePickerInlineCalendar, {
-                        initialRange: form.values.dateRange,
+                        initialRange: store.state.dateRange,
                         onApply: onApply,
                         onCancel: onCancel,
                         presets: presets,

package/dist/cjs/components/table/table-date-range-picker/TableDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport dayjs from 'dayjs';\n\nimport {useState} from 'react';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableDateRangePickerStylesNames = 'dateRangeRoot';\n\nexport interface TableDateRangePickerProps\n    extends BoxProps,\n        CompoundStylesApiProps<TableDateRangePickerFactory>,\n        Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport type TableDateRangePickerFactory = Factory<{\n    props: TableDateRangePickerProps;\n    ref: HTMLDivElement;\n    stylesNames: TableDateRangePickerStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableDateRangePickerProps> = {\n    presets: {},\n};\n\nexport const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableDateRangePicker',\n        defaultProps,\n        props,\n    );\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n    const dateRangeInitialized = form.values.dateRange.every((date) => date instanceof Date);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            ref={ref}\n            {...ctx.getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal opened={opened}>\n                <Popover.Target>\n                    <InputBase\n                        component=\"button\"\n                        leftSection={<CalendarSize16Px height={16} />}\n                        miw={220}\n                        onClick={() => setOpened(true)}\n                    >\n                        {dateRangeInitialized ? formattedRange : 'Select date range'}\n                    </InputBase>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["TableDateRangePicker","defaultProps","presets","factory","props","ref","ctx","useTableStyles","useProps","rangeCalendarProps","classNames","className","styles","style","vars","others","useState","opened","setOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formattedRange","values","dateRange","dateRangeInitialized","every","Date","stylesApiProps","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","getStyles","Popover","withinPortal","Target","InputBase","component","leftSection","CalendarSize16Px","height","miw","onClick","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8CaA;;;eAAAA;;;;;;;;;;gCA9CkB;oBAC8C;8DAE3D;qBAEK;+BAMhB;qBAC4B;4BACI;AA6BvC,IAAMC,eAAmD;IACrDC,SAAS,CAAC;AACd;AAEO,IAAMF,uBAAuBG,IAAAA,aAAO,EAA8B,SAACC,OAAOC;IAC7E,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAA6FC,YAAAA,IAAAA,cAAQ,EACjG,8BACAP,cACAG,QAHGF,UAAsFM,UAAtFN,SAASO,qBAA6ED,UAA7EC,oBAAoBC,aAAyDF,UAAzDE,YAAYC,YAA6CH,UAA7CG,WAAWC,SAAkCJ,UAAlCI,QAAQC,QAA0BL,UAA1BK,OAAOC,OAAmBN,UAAnBM,MAASC,sCAAUP;QAAtFN;QAASO;QAAoBC;QAAYC;QAAWC;QAAQC;QAAOC;;IAK1E,IAA4BE,+BAAAA,IAAAA,eAAQ,EAAC,YAA9BC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAM,AAACG,OAAQC,IAAAA,sBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC;QACbH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,UAAU;IACd;IACA,IAAMM,WAAW;QACbN,UAAU;IACd;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,iBAAiB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE;IACvG,IAAMC,uBAAuBb,KAAKW,MAAM,CAACC,SAAS,CAACE,KAAK,CAAC,SAACP;eAASA,AAAI,aAAYQ,CAAhBR,MAAgBQ;;IAEnF,IAAMC,iBAAiB;QAACzB,YAAAA;QAAYE,QAAAA;IAAM;IAE1C,qBACI,qBAACwB,UAAI,CAACC,GAAG;QACLC,MAAK;QACLC,OAAOC,2BAAoB,CAACC,eAAe;QAC3CpC,KAAKA;OACDC,IAAIoC,SAAS,CAAC,iBAAiB;QAAC/B,WAAAA;QAAWE,OAAAA;OAAUsB,kBACrDpB;kBAEJ,cAAA,sBAAC4B,aAAO;YAACC,YAAY;YAAC3B,QAAQA;;8BAC1B,qBAAC0B,aAAO,CAACE,MAAM;8BACX,cAAA,qBAACC,eAAS;wBACNC,WAAU;wBACVC,2BAAa,qBAACC,kCAAgB;4BAACC,QAAQ;;wBACvCC,KAAK;wBACLC,SAAS;mCAAMlC,UAAU;;kCAExBc,uBAAuBH,iBAAiB;;;8BAGjD,qBAACc,aAAO,CAACU,QAAQ;oBAACC,GAAG;8BACjB,cAAA,qBAACC,8CAA6B;wBAC1BC,cAAcrC,KAAKW,MAAM,CAACC,SAAS;wBACnCV,SAASA;wBACTG,UAAUA;wBACVtB,SAASA;wBACTO,oBAAoBA;;;;;;AAM5C"}
+{"version":3,"sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, CompoundStylesApiProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';\nimport dayjs from 'dayjs';\n\nimport {useState} from 'react';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableDateRangePickerStylesNames = 'dateRangeRoot';\n\nexport interface TableDateRangePickerProps\n    extends BoxProps,\n        CompoundStylesApiProps<TableDateRangePickerFactory>,\n        Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport type TableDateRangePickerFactory = Factory<{\n    props: TableDateRangePickerProps;\n    ref: HTMLDivElement;\n    stylesNames: TableDateRangePickerStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableDateRangePickerProps> = {\n    presets: {},\n};\n\nexport const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableDateRangePicker',\n        defaultProps,\n        props,\n    );\n    const [opened, setOpened] = useState(false);\n\n    const onApply = (dates: DateRangePickerValue) => {\n        store.setDateRange(dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;\n    const dateRangeInitialized = store.state.dateRange.every((date) => date instanceof Date);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            ref={ref}\n            {...getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <InputBase\n                        component=\"button\"\n                        leftSection={<CalendarSize16Px height={16} />}\n                        miw={220}\n                        onClick={() => setOpened(true)}\n                    >\n                        {dateRangeInitialized ? formattedRange : 'Select date range'}\n                    </InputBase>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={store.state.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["TableDateRangePicker","defaultProps","presets","factory","props","ref","useTableContext","store","getStyles","useProps","rangeCalendarProps","classNames","className","styles","style","vars","others","useState","opened","setOpened","onApply","dates","setDateRange","onCancel","formatDate","date","dayjs","format","formattedRange","state","dateRange","dateRangeInitialized","every","Date","stylesApiProps","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","Popover","withinPortal","onChange","Target","InputBase","component","leftSection","CalendarSize16Px","height","miw","onClick","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;;;;gCA7CkB;oBACsE;8DACnF;qBAEK;+BAMhB;qBAC4B;4BACL;AA6B9B,IAAMC,eAAmD;IACrDC,SAAS,CAAC;AACd;AAEO,IAAMF,uBAAuBG,IAAAA,aAAO,EAA8B,SAACC,OAAOC;IAC7E,IAA2BC,mBAAAA,IAAAA,6BAAe,KAAnCC,QAAoBD,iBAApBC,OAAOC,YAAaF,iBAAbE;IACd,IAA6FC,YAAAA,IAAAA,cAAQ,EACjG,8BACAR,cACAG,QAHGF,UAAsFO,UAAtFP,SAASQ,qBAA6ED,UAA7EC,oBAAoBC,aAAyDF,UAAzDE,YAAYC,YAA6CH,UAA7CG,WAAWC,SAAkCJ,UAAlCI,QAAQC,QAA0BL,UAA1BK,OAAOC,OAAmBN,UAAnBM,MAASC,sCAAUP;QAAtFP;QAASQ;QAAoBC;QAAYC;QAAWC;QAAQC;QAAOC;;IAK1E,IAA4BE,+BAAAA,IAAAA,eAAQ,EAAC,YAA9BC,SAAqBD,cAAbE,YAAaF;IAE5B,IAAMG,UAAU,SAACC;QACbd,MAAMe,YAAY,CAACD;QACnBF,UAAU;IACd;IACA,IAAMI,WAAW;QACbJ,UAAU;IACd;IAEA,IAAMK,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,iBAAiB,AAAC,GAA4CJ,OAA1CA,WAAWjB,MAAMsB,KAAK,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWjB,MAAMsB,KAAK,CAACC,SAAS,CAAC,EAAE;IACvG,IAAMC,uBAAuBxB,MAAMsB,KAAK,CAACC,SAAS,CAACE,KAAK,CAAC,SAACP;eAASA,AAAI,aAAYQ,CAAhBR,MAAgBQ;;IAEnF,IAAMC,iBAAiB;QAACvB,YAAAA;QAAYE,QAAAA;IAAM;IAE1C,qBACI,qBAACsB,UAAI,CAACC,GAAG;QACLC,MAAK;QACLC,OAAOC,2BAAoB,CAACC,eAAe;QAC3CnC,KAAKA;OACDG,UAAU,iBAAiB;QAACI,WAAAA;QAAWE,OAAAA;OAAUoB,kBACjDlB;kBAEJ,cAAA,sBAACyB,aAAO;YAACC,YAAY;YAACxB,QAAQA;YAAQyB,UAAUxB;;8BAC5C,qBAACsB,aAAO,CAACG,MAAM;8BACX,cAAA,qBAACC,eAAS;wBACNC,WAAU;wBACVC,2BAAa,qBAACC,kCAAgB;4BAACC,QAAQ;;wBACvCC,KAAK;wBACLC,SAAS;mCAAMhC,UAAU;;kCAExBY,uBAAuBH,iBAAiB;;;8BAGjD,qBAACa,aAAO,CAACW,QAAQ;oBAACC,GAAG;8BACjB,cAAA,qBAACC,8CAA6B;wBAC1BC,cAAchD,MAAMsB,KAAK,CAACC,SAAS;wBACnCV,SAASA;wBACTG,UAAUA;wBACVrB,SAASA;wBACTQ,oBAAoBA;;;;;;AAM5C"}

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

@@ -1,5 +1,4 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 export type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';
 export interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {
     /**

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":"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"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAqC,MAAM,eAAe,CAAC;AAOxH,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;EAiEhB,CAAC"}

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

@@ -23,7 +23,7 @@ var defaultProps = {
     placeholder: 'Search by any field'
 };
 var TableFilter = (0, _core.factory)(function(props, ref) {
-    var ctx = (0, _TableContext.useTableStyles)();
+    var _useTableContext = (0, _TableContext.useTableContext)(), store = _useTableContext.store, getStyles = _useTableContext.getStyles;
     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",
@@ -32,18 +32,13 @@ var TableFilter = (0, _core.factory)(function(props, ref) {
         "style",
         "vars"
     ]);
-    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 _useState = _sliced_to_array._((0, _react.useState)(store.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];
     (0, _hooks.useDidUpdate)(function() {
-        setState(function(prevState) {
-            return _object_spread_props._(_object_spread._({}, prevState), {
-                pagination: prevState.pagination ? {
-                    pageIndex: 0,
-                    pageSize: prevState.pagination.pageSize
-                } : prevState.pagination,
-                globalFilter: debounced
-            });
+        store.setGlobalFilter(debounced);
+        store.setPagination({
+            pageIndex: 0,
+            pageSize: store.state.pagination.pageSize
         });
         return cancel;
     }, [
@@ -57,9 +52,9 @@ var TableFilter = (0, _core.factory)(function(props, ref) {
         setFilter('');
     };
     (0, _react.useEffect)(function() {
-        setFilter(state.globalFilter);
+        setFilter(store.state.globalFilter);
     }, [
-        state.globalFilter
+        store.state.globalFilter
     ]);
     var stylesApiProps = {
         classNames: classNames,
@@ -69,11 +64,11 @@ var TableFilter = (0, _core.factory)(function(props, ref) {
         span: "content",
         order: _Table.TableComponentsOrder.Filter,
         ref: ref
-    }, ctx.getStyles('filterRoot', _object_spread._({
+    }, 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)), {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, _object_spread_props._(_object_spread._({}, getStyles('filterWrapper', stylesApiProps)), {
             placeholder: placeholder,
             autoComplete: "off",
             rightSection: filter ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
@@ -85,7 +80,7 @@ var TableFilter = (0, _core.factory)(function(props, ref) {
                 })
             }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, _object_spread._({
                 height: 16
-            }, ctx.getStyles('filterEmpty', stylesApiProps))),
+            }, getStyles('filterEmpty', stylesApiProps))),
             value: filter,
             onChange: handleChange
         }))

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, 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}
+{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, BoxProps, CompoundStylesApiProps, Factory, Grid, TextInput, factory, useProps} from '@mantine/core';\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} 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 {store, getStyles} = useTableContext();\n    const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableFilter',\n        defaultProps,\n        props,\n    );\n    const [filter, setFilter] = useState(store.state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        store.setGlobalFilter(debounced);\n        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});\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(store.state.globalFilter);\n    }, [store.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            {...getStyles('filterRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <TextInput\n                {...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} {...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","useTableContext","store","getStyles","useProps","classNames","className","styles","style","vars","others","useState","state","globalFilter","filter","setFilter","useDebouncedValue","debounced","cancel","useDidUpdate","setGlobalFilter","setPagination","pageIndex","pageSize","pagination","handleChange","event","value","currentTarget","handleClear","useEffect","stylesApiProps","Grid","Col","span","order","TableComponentsOrder","Filter","TextInput","autoComplete","rightSection","ActionIcon","onClick","color","variant","CrossSize16Px","height","FilterSize16Px","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;gCA9B+B;oBAC4D;qBAC1D;qBAC2B;qBAEtC;4BACL;AAoB9B,IAAMC,eAA0C;IAC5CC,aAAa;AACjB;AAEO,IAAMF,cAAcG,IAAAA,aAAO,EAAqB,SAACC,OAAOC;IAC3D,IAA2BC,mBAAAA,IAAAA,6BAAe,KAAnCC,QAAoBD,iBAApBC,OAAOC,YAAaF,iBAAbE;IACd,IAA6EC,YAAAA,IAAAA,cAAQ,EACjF,qBACAR,cACAG,QAHGF,cAAsEO,UAAtEP,aAAaQ,aAAyDD,UAAzDC,YAAYC,YAA6CF,UAA7CE,WAAWC,SAAkCH,UAAlCG,QAAQC,QAA0BJ,UAA1BI,OAAOC,OAAmBL,UAAnBK,MAASC,sCAAUN;QAAtEP;QAAaQ;QAAYC;QAAWC;QAAQC;QAAOC;;IAK1D,IAA4BE,+BAAAA,IAAAA,eAAQ,EAACT,MAAMU,KAAK,CAACC,YAAY,OAAtDC,SAAqBH,cAAbI,YAAaJ;IAC5B,IAA4BK,wCAAAA,IAAAA,wBAAiB,EAACF,QAAQ,UAA/CG,YAAqBD,uBAAVE,SAAUF;IAE5BG,IAAAA,mBAAY,EAAC;QACTjB,MAAMkB,eAAe,CAACH;QACtBf,MAAMmB,aAAa,CAAC;YAACC,WAAW;YAAGC,UAAUrB,MAAMU,KAAK,CAACY,UAAU,CAACD,QAAQ;QAAA;QAE5E,OAAOL;IACX,GAAG;QAACD;KAAU;IAEd,IAAMQ,eAAqD,SAACC;QACxD,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPZ,UAAUY;IACd;IAEA,IAAME,cAAoD;QACtDd,UAAU;IACd;IAEAe,IAAAA,gBAAS,EAAC;QACNf,UAAUb,MAAMU,KAAK,CAACC,YAAY;IACtC,GAAG;QAACX,MAAMU,KAAK,CAACC,YAAY;KAAC;IAE7B,IAAMkB,iBAAiB;QAAC1B,YAAAA;QAAYE,QAAAA;IAAM;IAE1C,qBACI,qBAACyB,UAAI,CAACC,GAAG;QACLC,MAAK;QACLC,OAAOC,2BAAoB,CAACC,MAAM;QAClCrC,KAAKA;OACDG,UAAU,cAAc;QAACG,WAAAA;QAAWE,OAAAA;OAAUuB,kBAC9CrB;kBAEJ,cAAA,qBAAC4B,eAAS,8CACFnC,UAAU,iBAAiB4B;YAC/BlC,aAAaA;YACb0C,cAAa;YACbC,cACI1B,uBACI,qBAAC2B,gBAAU;gBAACC,SAASb;gBAAac,OAAM;gBAAOC,SAAQ;0BACnD,cAAA,qBAACC,+BAAa;oBAACC,QAAQ;;+BAG3B,qBAACC,gCAAc;gBAACD,QAAQ;eAAQ3C,UAAU,eAAe4B;YAGjEJ,OAAOb;YACPkC,UAAUvB;;;AAI1B"}

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

@@ -1,11 +1,16 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 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;
+    /**
+     * Whether to show actions when rows are selected
+     *
+     * default true
+     */
+    showActions?: boolean;
 }
 export type TableHeaderFactory = Factory<{
     props: TableHeaderProps;

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":"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"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,QAAQ,EAAE,sBAAsB,EAAW,OAAO,EAA0B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhC,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;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;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;AAQH,eAAO,MAAM,WAAW;WAZb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EA6DhB,CAAC"}

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

@@ -17,16 +17,19 @@ var _core = require("@mantine/core");
 var _button = require("../../button");
 var _TableLayoutControl = require("../layouts/TableLayoutControl");
 var _Table = require("../Table");
+var _tableactions = require("../table-actions");
 var _TableContext = require("../TableContext");
 var defaultProps = {
     unselectAllLabel: 'Unselect all',
     selectedCountLabel: function(count) {
         return "".concat(count, " selected");
-    }
+    },
+    showActions: true
 };
 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, [
+    var _useTableContext = (0, _TableContext.useTableContext)(), store = _useTableContext.store, getStyles = _useTableContext.getStyles;
+    var _useProps = (0, _core.useProps)('PlasmaTableHeader', defaultProps, props), showActions = _useProps.showActions, 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, [
+        "showActions",
         "unselectAllLabel",
         "selectedCountLabel",
         "children",
@@ -36,17 +39,16 @@ var TableHeader = (0, _core.factory)(function(props, ref) {
         "style",
         "vars"
     ]);
-    var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection, disableRowSelection = _useTable.disableRowSelection;
-    var selectedRows = getSelectedRows();
+    var selectedRows = store.getSelectedRows();
     var stylesApiProps = {
         classNames: classNames,
         styles: styles
     };
-    var innerStyles = ctx.getStyles('headerGridInner', stylesApiProps);
-    var gridStyles = ctx.getStyles('headerGrid', stylesApiProps);
+    var innerStyles = getStyles('headerGridInner', stylesApiProps);
+    var gridStyles = getStyles('headerGrid', stylesApiProps);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({
         ref: ref
-    }, ctx.getStyles('headerRoot', _object_spread._({
+    }, getStyles('headerRoot', _object_spread._({
         className: className,
         style: style
     }, stylesApiProps)), others), {
@@ -62,16 +64,16 @@ var TableHeader = (0, _core.factory)(function(props, ref) {
                 root: gridStyles.style
             },
             children: [
-                multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
+                store.multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
                     span: "auto"
-                }, ctx.getStyles('headerCol', stylesApiProps)), {
+                }, 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,
+                            onClick: store.clearRowSelection,
                             variant: "subtle",
-                            disabled: disableRowSelection,
+                            disabled: !store.rowSelectionEnabled,
                             leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
                                 height: 16
                             }),
@@ -80,6 +82,7 @@ var TableHeader = (0, _core.factory)(function(props, ref) {
                     })
                 })) : null,
                 children,
+                showActions ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_tableactions.TableHeaderActions, {}) : null,
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLayoutControl.TableLayoutControl, {})
             ]
         })

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 {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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../../button';\nimport {TableLayoutControl} from '../layouts/TableLayoutControl';\nimport {TableComponentsOrder} from '../Table';\nimport {TableHeaderActions} from '../table-actions';\nimport {useTableContext} 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     * Whether to show actions when rows are selected\n     *\n     * default true\n     */\n    showActions?: boolean;\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    showActions: true,\n};\n\nexport const TableHeader = factory<TableHeaderFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {\n        showActions,\n        unselectAllLabel,\n        selectedCountLabel,\n        children,\n        classNames,\n        className,\n        styles,\n        style,\n        vars: _vars,\n        ...others\n    } = useProps('PlasmaTableHeader', defaultProps, props);\n    const selectedRows = store.getSelectedRows();\n\n    const stylesApiProps = {classNames, styles};\n    const innerStyles = getStyles('headerGridInner', stylesApiProps);\n    const gridStyles = getStyles('headerGrid', stylesApiProps);\n\n    return (\n        <Box ref={ref} {...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                {store.multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                    <Grid.Col\n                        span=\"auto\"\n                        {...getStyles('headerCol', stylesApiProps)}\n                        order={TableComponentsOrder.MultiSelectInfo}\n                    >\n                        <Tooltip label={unselectAllLabel}>\n                            <Button\n                                onClick={store.clearRowSelection}\n                                variant=\"subtle\"\n                                disabled={!store.rowSelectionEnabled}\n                                leftSection={<CrossSize16Px height={16} />}\n                            >\n                                {selectedCountLabel(selectedRows.length)}\n                            </Button>\n                        </Tooltip>\n                    </Grid.Col>\n                ) : null}\n                {children}\n                {showActions ? <TableHeaderActions /> : null}\n                <TableLayoutControl />\n            </Grid>\n        </Box>\n    );\n});\n"],"names":["TableHeader","defaultProps","unselectAllLabel","selectedCountLabel","count","showActions","factory","props","ref","useTableContext","store","getStyles","useProps","children","classNames","className","styles","style","vars","_vars","others","selectedRows","getSelectedRows","stylesApiProps","innerStyles","gridStyles","Box","Grid","justify","align","inner","root","multiRowSelectionEnabled","length","Col","span","order","TableComponentsOrder","MultiSelectInfo","Tooltip","label","Button","onClick","clearRowSelection","variant","disabled","rowSelectionEnabled","leftSection","CrossSize16Px","height","TableHeaderActions","TableLayoutControl"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;gCAxCe;oBACmE;sBAG1E;kCACY;qBACE;4BACF;4BACH;AA0B9B,IAAMC,eAA0C;IAC5CC,kBAAkB;IAClBC,oBAAoB,SAACC;eAAU,AAAC,GAAQ,OAANA,OAAM;;IACxCC,aAAa;AACjB;AAEO,IAAML,cAAcM,IAAAA,aAAO,EAAqB,SAACC,OAAOC;IAC3D,IAA2BC,mBAAAA,IAAAA,6BAAe,KAAnCC,QAAoBD,iBAApBC,OAAOC,YAAaF,iBAAbE;IACd,IAWIC,YAAAA,IAAAA,cAAQ,EAAC,qBAAqBX,cAAcM,QAV5CF,cAUAO,UAVAP,aACAH,mBASAU,UATAV,kBACAC,qBAQAS,UARAT,oBACAU,WAOAD,UAPAC,UACAC,aAMAF,UANAE,YACAC,YAKAH,UALAG,WACAC,SAIAJ,UAJAI,QACAC,QAGAL,UAHAK,OACAC,AAAMC,QAENP,UAFAM,MACGE,sCACHR;QAVAP;QACAH;QACAC;QACAU;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGJ,IAAMG,eAAeX,MAAMY,eAAe;IAE1C,IAAMC,iBAAiB;QAACT,YAAAA;QAAYE,QAAAA;IAAM;IAC1C,IAAMQ,cAAcb,UAAU,mBAAmBY;IACjD,IAAME,aAAad,UAAU,cAAcY;IAE3C,qBACI,qBAACG,SAAG;QAAClB,KAAKA;OAASG,UAAU,cAAc;QAACI,WAAAA;QAAWE,OAAAA;OAAUM,kBAAsBH;kBACnF,cAAA,sBAACO,UAAI;YACDC,SAAQ;YACRC,OAAM;YACNf,YAAY;gBAACgB,OAAON,YAAYT,SAAS;gBAAEgB,MAAMN,WAAWV,SAAS;YAAA;YACrEC,QAAQ;gBAACc,OAAON,YAAYP,KAAK;gBAAEc,MAAMN,WAAWR,KAAK;YAAA;;gBAExDP,MAAMsB,wBAAwB,IAAIX,aAAaY,MAAM,GAAG,kBACrD,qBAACN,UAAI,CAACO,GAAG;oBACLC,MAAK;mBACDxB,UAAU,aAAaY;oBAC3Ba,OAAOC,2BAAoB,CAACC,eAAe;8BAE3C,cAAA,qBAACC,aAAO;wBAACC,OAAOtC;kCACZ,cAAA,qBAACuC,cAAM;4BACHC,SAAShC,MAAMiC,iBAAiB;4BAChCC,SAAQ;4BACRC,UAAU,CAACnC,MAAMoC,mBAAmB;4BACpCC,2BAAa,qBAACC,+BAAa;gCAACC,QAAQ;;sCAEnC9C,mBAAmBkB,aAAaY,MAAM;;;sBAInD;gBACHpB;gBACAR,4BAAc,qBAAC6C,gCAAkB,QAAM;8BACxC,qBAACC,sCAAkB;;;;AAInC"}

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

@@ -1,5 +1,4 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 import { Header } from '@tanstack/react-table';
 import { ComponentType, ForwardedRef, SVGProps } from 'react';
 import { CustomComponentThemeExtend } from '../../../utils';

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":"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"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAkC,MAAM,eAAe,CAAC;AACzG,OAAO,EAAC,MAAM,EAAkC,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;eAAe,QAAQ,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,aAAa,oBAAoB,CAAC,CAAA;KAAC;;eAV1E,OAAO;aACT,oBAAoB;qBACZ,kBAAkB;kBACrB,IAAI;;CAkEjB,CAAC"}

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

@@ -31,7 +31,7 @@ var defaultProps = {
     sortingIcons: SortingIcons
 };
 var Th = function(props) {
-    var ctx = (0, _TableContext.useTableStyles)();
+    var getStyles = (0, _TableContext.useTableContext)().getStyles;
     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",
@@ -46,7 +46,7 @@ var Th = function(props) {
         minSize: header.column.columnDef.minSize,
         maxSize: header.column.columnDef.maxSize
     });
-    var thStyles = ctx.getStyles('th', {
+    var thStyles = getStyles('th', {
         classNames: classNames,
         className: className,
         styles: styles,
@@ -65,7 +65,11 @@ var Th = function(props) {
                 maxWidth: columnSizing.maxSize
             })
         }, others), {
-            children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
+                wrap: "nowrap",
+                gap: "xs",
+                children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
+            })
         }));
     }
     var onSort = header.column.getToggleSortingHandler();