@coveord/plasma-mantine 53.0.1 → 53.1.2

package/dist/cjs/components/table/table-actions/TableActions.js

@@ -20,7 +20,7 @@ var defaultProps = {};
 var TableActions = function(props) {
     var ctx = (0, _TableContext.useTableStyles)();
     var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
-    var _useProps = (0, _core.useProps)("PlasmaTableActions", defaultProps, props), style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, children = _useProps.children, others = _object_without_properties._(_useProps, [
+    var _useProps = (0, _core.useProps)('PlasmaTableActions', defaultProps, props), style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, children = _useProps.children, others = _object_without_properties._(_useProps, [
         "style",
         "className",
         "classNames",
@@ -34,10 +34,10 @@ var TableActions = function(props) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
         order: _Table.TableComponentsOrder.Actions
-    }, ctx.getStyles("actionsRoot", {}), others), {
+    }, ctx.getStyles('actionsRoot', {}), others), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, _object_spread_props._(_object_spread._({
             gap: "xs"
-        }, ctx.getStyles("actionsGroup", {})), {
+        }, ctx.getStyles('actionsGroup', {})), {
             children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
         }))
     }));

package/dist/cjs/components/table/table-actions/TableActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"sourcesContent":["import {Factory, Grid, GridColProps, Group, useProps} from '@mantine/core';\nimport {ForwardedRef, ReactElement, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../../utils';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableActionsStylesNames = 'actionsRoot' | 'actionsGroup';\n\nexport interface TableActionsProps<T> extends Omit<GridColProps, 'children'> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navy.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\ntype TableActionsFactory = Factory<{\n    props: TableActionsProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: TableActionsStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableActionsProps<unknown>> = {};\n\nexport const TableActions = <T,>(props: TableActionsProps<T> & {ref?: ForwardedRef<HTMLDivElement>}): ReactElement => {\n    const ctx = useTableStyles();\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const {style, className, classNames, styles, children, ...others} = useProps(\n        'PlasmaTableActions',\n        defaultProps,\n        props,\n    );\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} {...ctx.getStyles('actionsRoot', {})} {...others}>\n            <Group gap=\"xs\" {...ctx.getStyles('actionsGroup', {})}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n\nTableActions.extend = identity as CustomComponentThemeExtend<TableActionsFactory>;\n"],"names":["TableActions","defaultProps","props","ctx","useTableStyles","useTable","getSelectedRows","multiRowSelectionEnabled","useProps","style","className","classNames","styles","children","others","selectedRows","length","Grid","Col","span","order","TableComponentsOrder","Actions","getStyles","Group","gap","extend","identity"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;oBAzC8C;qBAGR;qBAChB;4BACI;AAkCvC,IAAMC,eAAoD,CAAC;AAEpD,IAAMD,eAAe,SAAKE;IAC7B,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAAoDC,YAAAA,IAAAA,sBAAQ,KAArDC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAoEC,YAAAA,IAAAA,cAAQ,EACxE,sBACAP,cACAC,QAHGO,QAA6DD,UAA7DC,OAAOC,YAAsDF,UAAtDE,WAAWC,aAA2CH,UAA3CG,YAAYC,SAA+BJ,UAA/BI,QAAQC,WAAuBL,UAAvBK,UAAaC,sCAAUN;QAA7DC;QAAOC;QAAWC;QAAYC;QAAQC;;IAK7C,IAAME,eAAeT;IAErB,IAAIS,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,qBAACC,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,2BAAoB,CAACC,OAAO;OAAMnB,IAAIoB,SAAS,CAAC,eAAe,CAAC,IAAQT;kBACpG,cAAA,qBAACU,WAAK;YAACC,KAAI;WAAStB,IAAIoB,SAAS,CAAC,gBAAgB,CAAC;sBAC9ChB,2BACK,AAACM,SAAsCE,gBACvC,AAACF,SAAqCE,YAAY,CAAC,EAAE;;;AAI3E;AAEAf,aAAa0B,MAAM,GAAGC,eAAQ"}
+{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"sourcesContent":["import {Factory, Grid, GridColProps, Group, useProps} from '@mantine/core';\nimport {ForwardedRef, ReactElement, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../../utils';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableActionsStylesNames = 'actionsRoot' | 'actionsGroup';\n\nexport interface TableActionsProps<T> extends Omit<GridColProps, 'children'> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navy.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\ntype TableActionsFactory = Factory<{\n    props: TableActionsProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: TableActionsStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableActionsProps<unknown>> = {};\n\nexport const TableActions = <T,>(props: TableActionsProps<T> & {ref?: ForwardedRef<HTMLDivElement>}): ReactElement => {\n    const ctx = useTableStyles();\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const {style, className, classNames, styles, children, ...others} = useProps(\n        'PlasmaTableActions',\n        defaultProps,\n        props,\n    );\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} {...ctx.getStyles('actionsRoot', {})} {...others}>\n            <Group gap=\"xs\" {...ctx.getStyles('actionsGroup', {})}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n\nTableActions.extend = identity as CustomComponentThemeExtend<TableActionsFactory>;\n"],"names":["TableActions","defaultProps","props","ctx","useTableStyles","useTable","getSelectedRows","multiRowSelectionEnabled","useProps","style","className","classNames","styles","children","others","selectedRows","length","Grid","Col","span","order","TableComponentsOrder","Actions","getStyles","Group","gap","extend","identity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;oBAzC8C;qBAGR;qBAChB;4BACI;AAkCvC,IAAMC,eAAoD,CAAC;AAEpD,IAAMD,eAAe,SAAKE;IAC7B,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAAoDC,YAAAA,IAAAA,sBAAQ,KAArDC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAoEC,YAAAA,IAAAA,cAAQ,EACxE,sBACAP,cACAC,QAHGO,QAA6DD,UAA7DC,OAAOC,YAAsDF,UAAtDE,WAAWC,aAA2CH,UAA3CG,YAAYC,SAA+BJ,UAA/BI,QAAQC,WAAuBL,UAAvBK,UAAaC,sCAAUN;QAA7DC;QAAOC;QAAWC;QAAYC;QAAQC;;IAK7C,IAAME,eAAeT;IAErB,IAAIS,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,qBAACC,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,2BAAoB,CAACC,OAAO;OAAMnB,IAAIoB,SAAS,CAAC,eAAe,CAAC,IAAQT;kBACpG,cAAA,qBAACU,WAAK;YAACC,KAAI;WAAStB,IAAIoB,SAAS,CAAC,gBAAgB,CAAC;sBAC9ChB,2BACK,AAACM,SAAsCE,gBACvC,AAACF,SAAqCE,YAAY,CAAC,EAAE;;;AAI3E;AAEAf,aAAa0B,MAAM,GAAGC,eAAQ"}

package/dist/cjs/components/table/table-column/TableCollapsibleColumn.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TableCollapsibleColumn: function() {
-        return TableCollapsibleColumn;
-    },
     TableAccordionColumn: function() {
         return TableAccordionColumn;
+    },
+    TableCollapsibleColumn: function() {
+        return TableCollapsibleColumn;
     }
 });
 var _object_spread = require("@swc/helpers/_/_object_spread");
@@ -25,9 +25,9 @@ var _core = require("@mantine/core");
 var _actionicon = require("../../action-icon");
 var _TableContext = require("../TableContext");
 var sharedProps = {
-    id: "collapsible",
+    id: 'collapsible',
     enableSorting: false,
-    header: "",
+    header: '',
     size: 84
 };
 var TableCollapsibleColumn = _object_spread_props._(_object_spread._({}, sharedProps), {
@@ -61,7 +61,7 @@ var defaultProps = {
 };
 var CollapsibleIcon = (0, _core.factory)(function(props, ref) {
     var ctx = (0, _TableContext.useTableStyles)();
-    var _useProps = (0, _core.useProps)("PlasmaTableCollapsibleColumn", defaultProps, props), info = _useProps.info, onToggle = _useProps.onToggle, iconExpanded = _useProps.iconExpanded, iconCollapsed = _useProps.iconCollapsed, classNames = _useProps.classNames, className = _useProps.className, style = _useProps.style, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
+    var _useProps = (0, _core.useProps)('PlasmaTableCollapsibleColumn', defaultProps, props), info = _useProps.info, onToggle = _useProps.onToggle, iconExpanded = _useProps.iconExpanded, iconCollapsed = _useProps.iconCollapsed, classNames = _useProps.classNames, className = _useProps.className, style = _useProps.style, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
         "info",
         "onToggle",
         "iconExpanded",
@@ -73,9 +73,8 @@ var CollapsibleIcon = (0, _core.factory)(function(props, ref) {
     ]);
     var handler = info.row.getToggleExpandedHandler();
     var onClick = function(e) {
-        var _onToggle;
         e.stopPropagation();
-        (_onToggle = onToggle) === null || _onToggle === void 0 ? void 0 : _onToggle(e);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
         handler();
     };
     return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_actionicon.ActionIcon, _object_spread_props._(_object_spread._({
@@ -84,7 +83,7 @@ var CollapsibleIcon = (0, _core.factory)(function(props, ref) {
         variant: "subtle",
         color: "gray",
         radius: "sm"
-    }, ctx.getStyles("collapsibleIcon", {
+    }, ctx.getStyles('collapsibleIcon', {
         className: className,
         classNames: classNames,
         styles: styles,

package/dist/cjs/components/table/table-column/TableCollapsibleColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Factory, factory, useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent, ReactNode} from 'react';\nimport {ActionIcon, ActionIconProps} from '../../action-icon';\nimport {useTableStyles} from '../TableContext';\n\nexport type TableCollapsibleColumnStylesNames = 'collapsibleIcon';\n\nconst sharedProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\ninterface CollapsibleIconProps extends ActionIconProps {\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n    iconExpanded?: ReactNode;\n    iconCollapsed?: ReactNode;\n}\n\ntype TableCollapsibleColumnFactory = Factory<{\n    props: CollapsibleIconProps;\n    ref: HTMLButtonElement;\n    stylesNames: TableCollapsibleColumnStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<CollapsibleIconProps> = {\n    iconExpanded: <ArrowHeadUpSize16Px height={16} />,\n    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,\n};\n\nconst CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(\n        'PlasmaTableCollapsibleColumn',\n        defaultProps,\n        props,\n    );\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon\n            ref={ref}\n            onClick={onClick}\n            variant=\"subtle\"\n            color=\"gray\"\n            radius=\"sm\"\n            {...ctx.getStyles('collapsibleIcon', {className, classNames, styles, style})}\n            {...others}\n        >\n            {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}\n        </ActionIcon>\n    ) : null;\n});\n"],"names":["TableCollapsibleColumn","TableAccordionColumn","sharedProps","id","enableSorting","header","size","cell","info","CollapsibleIcon","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","defaultProps","iconExpanded","ArrowHeadUpSize16Px","height","iconCollapsed","ArrowHeadDownSize16Px","factory","props","ref","ctx","useTableStyles","useProps","classNames","className","style","styles","others","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","ActionIcon","variant","color","radius","getStyles"],"mappings":";;;;;;;;;;;IAmBaA,sBAAsB;eAAtBA;;IAQAC,oBAAoB;eAApBA;;;;;;;gCA3B4C;oBAChB;0BAGC;4BACb;AAI7B,IAAMC,cAAkC;IACpCC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,MAAM;AACV;AAKO,IAAMN,yBAA6C,4CACnDE;IACHK,MAAM,SAACC;6BAAS,qBAACC;YAAgBD,MAAMA;;;;AAMpC,IAAMP,uBAA2C,4CACjDC;IACHK,MAAM,SAACC;QACH,IAAME,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACF,KAAKG,GAAG,CAACC,aAAa,IAAI;gBAC3BJ,KAAKK,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,qBAACL;YAAgBC,UAAUA;YAAUF,MAAMA;;IACtD;;AAiBJ,IAAMO,eAA8C;IAChDC,4BAAc,qBAACC,qCAAmB;QAACC,QAAQ;;IAC3CC,6BAAe,qBAACC,uCAAqB;QAACF,QAAQ;;AAClD;AAEA,IAAMT,kBAAkBY,IAAAA,aAAO,EAAgC,SAACC,OAAOC;IACnE,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAAuGC,YAAAA,IAAAA,cAAQ,EAC3G,gCACAX,cACAO,QAHGd,OAAgGkB,UAAhGlB,MAAME,WAA0FgB,UAA1FhB,UAAUM,eAAgFU,UAAhFV,cAAcG,gBAAkEO,UAAlEP,eAAeQ,aAAmDD,UAAnDC,YAAYC,YAAuCF,UAAvCE,WAAWC,QAA4BH,UAA5BG,OAAOC,SAAqBJ,UAArBI,QAAWC,sCAAUL;QAAhGlB;QAAME;QAAUM;QAAcG;QAAeQ;QAAYC;QAAWC;QAAOC;;IAKlF,IAAME,UAAUxB,KAAKG,GAAG,CAACsB,wBAAwB;IACjD,IAAMC,UAAU,SAACC;YAEbzB;QADAyB,EAAEC,eAAe;SACjB1B,YAAAA,sBAAAA,gCAAAA,UAAWyB;QACXH;IACJ;IACA,OAAOxB,KAAKG,GAAG,CAAC0B,YAAY,mBACxB,qBAACC,sBAAU;QACPf,KAAKA;QACLW,SAASA;QACTK,SAAQ;QACRC,OAAM;QACNC,QAAO;OACHjB,IAAIkB,SAAS,CAAC,mBAAmB;QAACd,WAAAA;QAAWD,YAAAA;QAAYG,QAAAA;QAAQD,OAAAA;IAAK,IACtEE;kBAEHvB,KAAKG,GAAG,CAACC,aAAa,KAAKI,eAAeG;UAE/C;AACR"}
+{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Factory, factory, useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent, ReactNode} from 'react';\nimport {ActionIcon, ActionIconProps} from '../../action-icon';\nimport {useTableStyles} from '../TableContext';\n\nexport type TableCollapsibleColumnStylesNames = 'collapsibleIcon';\n\nconst sharedProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\ninterface CollapsibleIconProps extends ActionIconProps {\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n    iconExpanded?: ReactNode;\n    iconCollapsed?: ReactNode;\n}\n\ntype TableCollapsibleColumnFactory = Factory<{\n    props: CollapsibleIconProps;\n    ref: HTMLButtonElement;\n    stylesNames: TableCollapsibleColumnStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<CollapsibleIconProps> = {\n    iconExpanded: <ArrowHeadUpSize16Px height={16} />,\n    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,\n};\n\nconst CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(\n        'PlasmaTableCollapsibleColumn',\n        defaultProps,\n        props,\n    );\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon\n            ref={ref}\n            onClick={onClick}\n            variant=\"subtle\"\n            color=\"gray\"\n            radius=\"sm\"\n            {...ctx.getStyles('collapsibleIcon', {className, classNames, styles, style})}\n            {...others}\n        >\n            {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}\n        </ActionIcon>\n    ) : null;\n});\n"],"names":["TableAccordionColumn","TableCollapsibleColumn","sharedProps","id","enableSorting","header","size","cell","info","CollapsibleIcon","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","defaultProps","iconExpanded","ArrowHeadUpSize16Px","height","iconCollapsed","ArrowHeadDownSize16Px","factory","props","ref","ctx","useTableStyles","useProps","classNames","className","style","styles","others","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","ActionIcon","variant","color","radius","getStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA2BaA,oBAAoB;eAApBA;;IARAC,sBAAsB;eAAtBA;;;;;;;gCAnB4C;oBAChB;0BAGC;4BACb;AAI7B,IAAMC,cAAkC;IACpCC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,MAAM;AACV;AAKO,IAAML,yBAA6C,4CACnDC;IACHK,MAAM,SAACC;6BAAS,qBAACC;YAAgBD,MAAMA;;;;AAMpC,IAAMR,uBAA2C,4CACjDE;IACHK,MAAM,SAACC;QACH,IAAME,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACF,KAAKG,GAAG,CAACC,aAAa,IAAI;gBAC3BJ,KAAKK,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,qBAACL;YAAgBC,UAAUA;YAAUF,MAAMA;;IACtD;;AAiBJ,IAAMO,eAA8C;IAChDC,4BAAc,qBAACC,qCAAmB;QAACC,QAAQ;;IAC3CC,6BAAe,qBAACC,uCAAqB;QAACF,QAAQ;;AAClD;AAEA,IAAMT,kBAAkBY,IAAAA,aAAO,EAAgC,SAACC,OAAOC;IACnE,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAAuGC,YAAAA,IAAAA,cAAQ,EAC3G,gCACAX,cACAO,QAHGd,OAAgGkB,UAAhGlB,MAAME,WAA0FgB,UAA1FhB,UAAUM,eAAgFU,UAAhFV,cAAcG,gBAAkEO,UAAlEP,eAAeQ,aAAmDD,UAAnDC,YAAYC,YAAuCF,UAAvCE,WAAWC,QAA4BH,UAA5BG,OAAOC,SAAqBJ,UAArBI,QAAWC,sCAAUL;QAAhGlB;QAAME;QAAUM;QAAcG;QAAeQ;QAAYC;QAAWC;QAAOC;;IAKlF,IAAME,UAAUxB,KAAKG,GAAG,CAACsB,wBAAwB;IACjD,IAAMC,UAAU,SAACC;QACbA,EAAEC,eAAe;QACjB1B,qBAAAA,+BAAAA,SAAWyB;QACXH;IACJ;IACA,OAAOxB,KAAKG,GAAG,CAAC0B,YAAY,mBACxB,qBAACC,sBAAU;QACPf,KAAKA;QACLW,SAASA;QACTK,SAAQ;QACRC,OAAM;QACNC,QAAO;OACHjB,IAAIkB,SAAS,CAAC,mBAAmB;QAACd,WAAAA;QAAWD,YAAAA;QAAYG,QAAAA;QAAQD,OAAAA;IAAK,IACtEE;kBAEHvB,KAAKG,GAAG,CAACC,aAAa,KAAKI,eAAeG;UAE/C;AACR"}

package/dist/cjs/components/table/table-column/TableSelectableColumn.js

@@ -11,11 +11,11 @@ Object.defineProperty(exports, "TableSelectableColumn", {
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
 var TableSelectableColumn = {
-    id: "select",
+    id: 'select',
     enableSorting: false,
     header: function(param) {
         var table = param.table;
-        var label = table.getIsAllRowsSelected() ? "Unselect all from this page" : "Select all from this page";
+        var label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
             label: label,
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Checkbox, {
@@ -23,7 +23,7 @@ var TableSelectableColumn = {
                 indeterminate: table.getIsSomePageRowsSelected(),
                 onChange: table.getToggleAllPageRowsSelectedHandler(),
                 style: {
-                    display: "flex"
+                    display: 'flex'
                 },
                 "aria-label": label
             })
@@ -36,7 +36,7 @@ var TableSelectableColumn = {
             indeterminate: row.getIsSomeSelected(),
             onChange: row.getToggleSelectedHandler(),
             style: {
-                display: "flex"
+                display: 'flex'
             },
             "aria-label": "Select row"
         });

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

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

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

@@ -17,18 +17,18 @@ var _core = require("@mantine/core");
 var _Table = require("../Table");
 var _TableContext = require("../TableContext");
 var COLUMNS_IDS_TO_EXCLUDE = [
-    "collapsible",
-    "select"
+    'collapsible',
+    'select'
 ];
 var defaultProps = {
-    label: "Edit columns",
-    buttonVariant: "outline",
-    limitReachedTooltip: "You have reached the maximum display limit.",
+    label: 'Edit columns',
+    buttonVariant: 'outline',
+    limitReachedTooltip: 'You have reached the maximum display limit.',
     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 _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, [
         "label",
         "buttonVariant",
         "showVisibleCountLabel",
@@ -61,7 +61,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._({
+    }, ctx.getStyles('columnSelector', _object_spread._({
         className: className,
         style: style
     }, stylesApiProps)), others), {
@@ -73,7 +73,7 @@ var TableColumnsSelector = (0, _core.factory)(function(props, ref) {
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Button, {
                         variant: buttonVariant,
-                        children: "".concat(label).concat(showVisibleCountLabel ? " (".concat(selectedColumnsCount, ")") : "")
+                        children: "".concat(label).concat(showVisibleCountLabel ? " (".concat(selectedColumnsCount, ")") : '')
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover.Dropdown, {
@@ -81,9 +81,8 @@ 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._({}, ctx.getStyles('columnSelectorWrapper', stylesApiProps)), {
                                 children: filteredColumns.map(function(column) {
-                                    var _columnNames;
                                     var isDisabled = selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();
                                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
                                         label: limitReachedTooltip,
@@ -91,7 +90,7 @@ var TableColumnsSelector = (0, _core.factory)(function(props, ref) {
                                         position: "left",
                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Checkbox, {
-                                                label: ((_columnNames = columnNames) === null || _columnNames === void 0 ? void 0 : _columnNames[column.id]) || column.id,
+                                                label: (columnNames === null || columnNames === void 0 ? void 0 : columnNames[column.id]) || column.id,
                                                 name: column.id,
                                                 checked: column.getIsVisible(),
                                                 disabled: isDisabled,

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"],"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;wCAQKZ;oCAPvB,IAAMwC,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,EAAAA,eAAAA,yBAAAA,mCAAAA,YAAa,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    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"}

package/dist/cjs/components/table/table-consumer/TableConsumer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-consumer/TableConsumer.tsx"],"sourcesContent":["import type {FunctionComponent, ReactNode} from 'react';\n\nexport const TableConsumer: FunctionComponent<{children: ReactNode}> = ({children}) => <>{children}</>;\n"],"names":["TableConsumer","children"],"mappings":";;;;+BAEaA;;;eAAAA;;;;AAAN,IAAMA,gBAA0D;QAAEC,iBAAAA;yBAAc;kBAAGA"}
+{"version":3,"sources":["../../../../../src/components/table/table-consumer/TableConsumer.tsx"],"sourcesContent":["import type {FunctionComponent, ReactNode} from 'react';\n\nexport const TableConsumer: FunctionComponent<{children: ReactNode}> = ({children}) => <>{children}</>;\n"],"names":["TableConsumer","children"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;;AAAN,IAAMA,gBAA0D;QAAEC,iBAAAA;yBAAc;kBAAGA"}

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

@@ -27,7 +27,7 @@ var defaultProps = {
 };
 var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
     var ctx = (0, _TableContext.useTableStyles)();
-    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, [
+    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",
         "classNames",
@@ -39,14 +39,14 @@ var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
     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);
+        form.setFieldValue('dateRange', dates);
         setOpened(false);
     };
     var onCancel = function() {
         setOpened(false);
     };
     var formatDate = function(date) {
-        return (0, _dayjs.default)(date).format("MMM DD, YYYY");
+        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) {
@@ -60,7 +60,7 @@ var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
         span: "content",
         order: _Table.TableComponentsOrder.DateRangePicker,
         ref: ref
-    }, ctx.getStyles("dateRangeRoot", _object_spread._({
+    }, ctx.getStyles('dateRangeRoot', _object_spread._({
         className: className,
         style: style
     }, stylesApiProps)), others), {
@@ -78,7 +78,7 @@ var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
                         onClick: function() {
                             return setOpened(true);
                         },
-                        children: dateRangeInitialized ? formattedRange : "Select date range"
+                        children: dateRangeInitialized ? formattedRange : 'Select date range'
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Dropdown, {

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"],"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, 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"}

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

@@ -20,11 +20,11 @@ var _react = require("react");
 var _Table = require("../Table");
 var _TableContext = require("../TableContext");
 var defaultProps = {
-    placeholder: "Search by any field"
+    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, [
+    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",
@@ -54,7 +54,7 @@ var TableFilter = (0, _core.factory)(function(props, ref) {
         setFilter(value);
     };
     var handleClear = function() {
-        setFilter("");
+        setFilter('');
     };
     (0, _react.useEffect)(function() {
         setFilter(state.globalFilter);
@@ -69,11 +69,11 @@ var TableFilter = (0, _core.factory)(function(props, ref) {
         span: "content",
         order: _Table.TableComponentsOrder.Filter,
         ref: ref
-    }, ctx.getStyles("filterRoot", _object_spread._({
+    }, 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)), {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, _object_spread_props._(_object_spread._({}, ctx.getStyles('filterWrapper', stylesApiProps)), {
             placeholder: placeholder,
             autoComplete: "off",
             rightSection: filter ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
@@ -85,7 +85,7 @@ var TableFilter = (0, _core.factory)(function(props, ref) {
                 })
             }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, _object_spread._({
                 height: 16
-            }, ctx.getStyles("filterEmpty", stylesApiProps))),
+            }, ctx.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"],"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, 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"}

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

@@ -13,9 +13,9 @@ var _object_destructuring_empty = require("@swc/helpers/_/_object_destructuring_
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
-var TableFooter = function(_param) /*#__PURE__*/ {
+var TableFooter = function(_param) {
     var others = _extends._({}, _object_destructuring_empty._(_param));
-    return (0, _jsxruntime.jsx)(_core.Group, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, _object_spread._({
         justify: "space-between",
         px: "xl",
         py: "md"

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, 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"}
+{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;;;;oBAPmB;AAOzB,IAAMA,cAAmD;QAAKC;yBACjE,qBAACC,WAAK;QAACC,SAAQ;QAAgBC,IAAG;QAAKC,IAAG;OAASJ"}

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

@@ -19,14 +19,14 @@ var _TableLayoutControl = require("../layouts/TableLayoutControl");
 var _Table = require("../Table");
 var _TableContext = require("../TableContext");
 var defaultProps = {
-    unselectAllLabel: "Unselect all",
+    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, [
+    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",
@@ -42,11 +42,11 @@ var TableHeader = (0, _core.factory)(function(props, ref) {
         classNames: classNames,
         styles: styles
     };
-    var innerStyles = ctx.getStyles("headerGridInner", stylesApiProps);
-    var gridStyles = ctx.getStyles("headerGrid", stylesApiProps);
+    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._({
+    }, ctx.getStyles('headerRoot', _object_spread._({
         className: className,
         style: style
     }, stylesApiProps)), others), {
@@ -64,7 +64,7 @@ var TableHeader = (0, _core.factory)(function(props, ref) {
             children: [
                 multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
                     span: "auto"
-                }, ctx.getStyles("headerCol", stylesApiProps)), {
+                }, ctx.getStyles('headerCol', stylesApiProps)), {
                     order: _Table.TableComponentsOrder.MultiSelectInfo,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
                         label: unselectAllLabel,

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"],"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, 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"}

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

@@ -23,16 +23,16 @@ var SortingIcons = {
     none: _plasmareacticons.DoubleArrowHeadVSize16Px
 };
 var SortingLabels = {
-    asc: "ascending",
-    desc: "descending",
-    none: "none"
+    asc: 'ascending',
+    desc: 'descending',
+    none: 'none'
 };
 var defaultProps = {
     sortingIcons: SortingIcons
 };
 var Th = function(props) {
     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, [
+    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",
@@ -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 = ctx.getStyles('th', {
         classNames: classNames,
         className: className,
         styles: styles,
@@ -60,7 +60,7 @@ var Th = function(props) {
         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",
+                width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : 'auto',
                 minWidth: columnSizing.minSize,
                 maxWidth: columnSizing.maxSize
             })
@@ -69,7 +69,7 @@ var Th = function(props) {
         }));
     }
     var onSort = header.column.getToggleSortingHandler();
-    var sortingOrder = header.column.getIsSorted() || "none";
+    var sortingOrder = header.column.getIsSorted() || 'none';
     var Icon = sortingIcons[sortingOrder];
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.UnstyledButton, _object_spread_props._(_object_spread._({
         component: "th",