@coveord/plasma-mantine 52.27.4 → 53.0.1

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

@@ -18,23 +18,26 @@ _export(exports, {
 });
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
-var defaultProps = {
+var _actionicon = require("../../action-icon");
+var _TableContext = require("../TableContext");
+var sharedProps = {
     id: "collapsible",
     enableSorting: false,
     header: "",
-    size: 62
+    size: 84
 };
-var TableCollapsibleColumn = _object_spread_props._(_object_spread._({}, defaultProps), {
+var TableCollapsibleColumn = _object_spread_props._(_object_spread._({}, sharedProps), {
     cell: function(info) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(CollapsibleIcon, {
             info: info
         });
     }
 });
-var TableAccordionColumn = _object_spread_props._(_object_spread._({}, defaultProps), {
+var TableAccordionColumn = _object_spread_props._(_object_spread._({}, sharedProps), {
     cell: function(info) {
         var onToggle = function() {
             // close all other rows when the current row not is expanded
@@ -48,8 +51,26 @@ var TableAccordionColumn = _object_spread_props._(_object_spread._({}, defaultPr
         });
     }
 });
-var CollapsibleIcon = function(param) {
-    var info = param.info, onToggle = param.onToggle;
+var defaultProps = {
+    iconExpanded: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadUpSize16Px, {
+        height: 16
+    }),
+    iconCollapsed: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadDownSize16Px, {
+        height: 16
+    })
+};
+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, [
+        "info",
+        "onToggle",
+        "iconExpanded",
+        "iconCollapsed",
+        "classNames",
+        "className",
+        "style",
+        "styles"
+    ]);
     var handler = info.row.getToggleExpandedHandler();
     var onClick = function(e) {
         var _onToggle;
@@ -57,12 +78,20 @@ var CollapsibleIcon = function(param) {
         (_onToggle = onToggle) === null || _onToggle === void 0 ? void 0 : _onToggle(e);
         handler();
     };
-    return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
+    return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_actionicon.ActionIcon, _object_spread_props._(_object_spread._({
+        ref: ref,
         onClick: onClick,
         variant: "subtle",
-        radius: "sm",
-        children: info.row.getIsExpanded() ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadDownSize24Px, {})
-    }) : null;
-};
+        color: "gray",
+        radius: "sm"
+    }, ctx.getStyles("collapsibleIcon", {
+        className: className,
+        classNames: classNames,
+        styles: styles,
+        style: style
+    }), others), {
+        children: info.row.getIsExpanded() ? iconExpanded : iconCollapsed
+    })) : null;
+});
 
 //# sourceMappingURL=TableCollapsibleColumn.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...defaultProps,\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    ...defaultProps,\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\nconst CollapsibleIcon: FunctionComponent<{\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\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 onClick={onClick} variant=\"subtle\" radius=\"sm\">\n            {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n        </ActionIcon>\n    ) : null;\n};\n"],"names":["TableCollapsibleColumn","TableAccordionColumn","defaultProps","id","enableSorting","header","size","cell","info","CollapsibleIcon","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","ActionIcon","variant","radius","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":";;;;;;;;;;;IAeaA,sBAAsB;eAAtBA;;IAQAC,oBAAoB;eAApBA;;;;;;gCAvB4C;oBAChC;AAIzB,IAAMC,eAAmC;IACrCC,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;;AAGJ,IAAMC,kBAGD;QAAED,aAAAA,MAAME,iBAAAA;IACT,IAAMK,UAAUP,KAAKG,GAAG,CAACK,wBAAwB;IACjD,IAAMC,UAAU,SAACC;YAEbR;QADAQ,EAAEC,eAAe;SACjBT,YAAAA,sBAAAA,gCAAAA,UAAWQ;QACXH;IACJ;IACA,OAAOP,KAAKG,GAAG,CAACS,YAAY,mBACxB,qBAACC,gBAAU;QAACJ,SAASA;QAASK,SAAQ;QAASC,QAAO;kBACjDf,KAAKG,GAAG,CAACC,aAAa,mBAAK,qBAACY,qCAAmB,sBAAM,qBAACC,uCAAqB;SAEhF;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":["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"}

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

@@ -22,7 +22,7 @@ var TableSelectableColumn = {
                 checked: table.getIsAllPageRowsSelected(),
                 indeterminate: table.getIsSomePageRowsSelected(),
                 onChange: table.getToggleAllPageRowsSelectedHandler(),
-                sx: {
+                style: {
                     display: "flex"
                 },
                 "aria-label": label
@@ -35,7 +35,7 @@ var TableSelectableColumn = {
             checked: row.getIsSelected(),
             indeterminate: row.getIsSomeSelected(),
             onChange: row.getToggleSelectedHandler(),
-            sx: {
+            style: {
                 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                    sx={{display: 'flex'}}\n                    aria-label={label}\n                />\n            </Tooltip>\n        );\n    },\n    cell: ({row}) => (\n        <Checkbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={row.getToggleSelectedHandler()}\n            sx={{display: 'flex'}}\n            aria-label=\"Select row\"\n        />\n    ),\n};\n"],"names":["TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","Tooltip","Checkbox","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":";;;;+BAMaA;;;eAAAA;;;;oBANmB;AAMzB,IAAMA,wBAA4C;IACrDC,IAAI;IACJC,eAAe;IACfC,QAAQ;YAAEC,cAAAA;QACN,IAAMC,QAAQD,MAAME,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,IAAI;oBAACC,SAAS;gBAAM;gBACpBC,cAAYZ;;;IAI5B;IACAa,MAAM;YAAEC,YAAAA;6BACJ,qBAACX,cAAQ;YACLC,SAASU,IAAIC,aAAa;YAC1BT,eAAeQ,IAAIE,iBAAiB;YACpCR,UAAUM,IAAIG,wBAAwB;YACtCP,IAAI;gBAACC,SAAS;YAAM;YACpBC,cAAW;;;AAGvB"}
+{"version":3,"sources":["../../../../../src/components/table/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"}

package/dist/cjs/components/table/table-columns-selector/TableColumnsSelector.d.ts

@@ -1,4 +1,57 @@
-import { FunctionComponent } from 'react';
-import { TableColumnsSelectorProps } from './TableColumnsSelector.types';
-export declare const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { ReactNode } from 'react';
+export type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';
+export interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiProps<TableColumnsSelectorFactory> {
+    /**
+     * The label of the button
+     * @default 'Edit columns'
+     */
+    label?: ReactNode;
+    /**
+     * The style variant of the button
+     * @default 'outline'
+     */
+    buttonVariant?: string;
+    /**
+     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.
+     * @default []
+     */
+    nonHideableColumns?: string[];
+    /**
+     * Whether the count of visible columns is shown in the button label.
+     * @default false
+     */
+    showVisibleCountLabel?: boolean;
+    /**
+     * The maximum number of columns that can be selected at the same time.
+     * If defined a footer will render with the remaining number of columns that can be selected.
+     */
+    maxSelectableColumns?: number;
+    /**
+     * A dictionary of column ids and names to use for the checkbox labels.
+     */
+    columnNames: Record<string, string>;
+    /**
+     * The content to display in the footer when maxSelectableColumns is defined.
+     */
+    footer?: ReactNode;
+    /**
+     * The tooltip to display when the user hovers over a disabled checkbox.
+     * @default 'You have reached the maximum display limit.'
+     */
+    limitReachedTooltip?: string;
+}
+export type TableColumnsSelectorFactory = Factory<{
+    props: TableColumnsSelectorProps;
+    ref: HTMLDivElement;
+    stylesNames: TableColumnsSelectorStylesNames;
+    compound: true;
+}>;
+export declare const TableColumnsSelector: import("@mantine/core").MantineComponent<{
+    props: TableColumnsSelectorProps;
+    ref: HTMLDivElement;
+    stylesNames: TableColumnsSelectorStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableColumnsSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAC,yBAAyB,EAAC,MAAM,8BAA8B,CAAC;AAIvE,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CAmE7E,CAAC"}
+{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EAKR,OAAO,EAOV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKhC,MAAM,MAAM,+BAA+B,GAAG,gBAAgB,GAAG,uBAAuB,CAAC;AAEzF,MAAM,WAAW,yBAA0B,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,2BAA2B,CAAC;IAC5G;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC;IAC9C,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAWH,eAAO,MAAM,oBAAoB;WAftB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EA0FhB,CAAC"}

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

@@ -8,25 +8,41 @@ Object.defineProperty(exports, "TableColumnsSelector", {
         return TableColumnsSelector;
     }
 });
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
-var _Tablestyles = require("../Table.styles");
+var _Table = require("../Table");
 var _TableContext = require("../TableContext");
-var _TableColumnsSelectorstyles = /*#__PURE__*/ _interop_require_default._(require("./TableColumnsSelector.styles"));
 var COLUMNS_IDS_TO_EXCLUDE = [
     "collapsible",
     "select"
 ];
-var TableColumnsSelector = function(param) {
-    var classNames = param.classNames, styles = param.styles, unstyled = param.unstyled, _param_label = param.label, label = _param_label === void 0 ? "Edit columns" : _param_label, _param_buttonVariant = param.buttonVariant, buttonVariant = _param_buttonVariant === void 0 ? "outline" : _param_buttonVariant, _param_showVisibleCountLabel = param.showVisibleCountLabel, showVisibleCountLabel = _param_showVisibleCountLabel === void 0 ? false : _param_showVisibleCountLabel, _param_nonHideableColumns = param.nonHideableColumns, nonHideableColumns = _param_nonHideableColumns === void 0 ? [] : _param_nonHideableColumns, maxSelectableColumns = param.maxSelectableColumns, footer = param.footer, _param_limitReachedTooltip = param.limitReachedTooltip, limitReachedTooltip = _param_limitReachedTooltip === void 0 ? "You have reached the maximum display limit." : _param_limitReachedTooltip, columnNames = param.columnNames;
-    var classes = (0, _TableColumnsSelectorstyles.default)(null, {
-        name: "TableColumnsSelector",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }).classes;
+var defaultProps = {
+    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, [
+        "label",
+        "buttonVariant",
+        "showVisibleCountLabel",
+        "nonHideableColumns",
+        "maxSelectableColumns",
+        "footer",
+        "limitReachedTooltip",
+        "columnNames",
+        "classNames",
+        "className",
+        "styles",
+        "style",
+        "vars"
+    ]);
     var getAllColumns = (0, _TableContext.useTable)().getAllColumns;
     var columnsToExclude = _to_consumable_array._(nonHideableColumns).concat(_to_consumable_array._(COLUMNS_IDS_TO_EXCLUDE));
     var filteredColumns = getAllColumns().filter(function(column) {
@@ -38,11 +54,17 @@ var TableColumnsSelector = function(param) {
     if (filteredColumns.length <= 0) {
         return null;
     }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+    var stylesApiProps = {
+        classNames: classNames,
+        styles: styles
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
-        order: _Tablestyles.TableComponentsOrder.ColumnsSelector,
-        py: "sm",
-        className: classes.root,
+        order: _Table.TableComponentsOrder.ColumnsSelector
+    }, ctx.getStyles("columnSelector", _object_spread._({
+        className: className,
+        style: style
+    }, stylesApiProps)), others), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
             withinPortal: true,
             position: "bottom",
@@ -59,7 +81,7 @@ var TableColumnsSelector = function(param) {
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ScrollArea.Autosize, {
                             mah: 154,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, {
+                            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();
@@ -78,7 +100,7 @@ var TableColumnsSelector = function(param) {
                                         })
                                     });
                                 })
-                            })
+                            }))
                         }),
                         maxSelectableColumns && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                             children: [
@@ -93,7 +115,7 @@ var TableColumnsSelector = function(param) {
                 })
             ]
         })
-    });
-};
+    }));
+});
 
 //# sourceMappingURL=TableColumnsSelector.js.map

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 {Button, Checkbox, Divider, Grid, Popover, ScrollArea, Stack, Tooltip} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableColumnsSelector.styles';\nimport {TableColumnsSelectorProps} from './TableColumnsSelector.types';\n\nconst COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];\n\nexport const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps> = ({\n    classNames,\n    styles,\n    unstyled,\n    label = 'Edit columns',\n    buttonVariant = 'outline',\n    showVisibleCountLabel = false,\n    nonHideableColumns = [],\n    maxSelectableColumns,\n    footer,\n    limitReachedTooltip = 'You have reached the maximum display limit.',\n    columnNames,\n}) => {\n    const {classes} = useStyles(null, {name: 'TableColumnsSelector', classNames, styles, unstyled});\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    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.ColumnsSelector} py=\"sm\" className={classes.root}>\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>\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","classNames","styles","unstyled","label","buttonVariant","showVisibleCountLabel","nonHideableColumns","maxSelectableColumns","footer","limitReachedTooltip","columnNames","classes","useStyles","name","getAllColumns","useTable","columnsToExclude","filteredColumns","filter","column","includes","id","selectedColumnsCount","getIsVisible","length","Grid","Col","span","order","TableComponentsOrder","ColumnsSelector","py","className","root","Popover","withinPortal","position","shadow","Target","Button","variant","Dropdown","miw","ScrollArea","Autosize","mah","Stack","map","isDisabled","Tooltip","disabled","div","Checkbox","checked","onChange","getToggleVisibilityHandler","Divider","mb","mt"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;oBAVsE;2BAGhD;4BACZ;mFACD;AAGtB,IAAMC,yBAAyB;IAAC;IAAe;CAAS;AAEjD,IAAMD,uBAAqE;QAC9EE,mBAAAA,YACAC,eAAAA,QACAC,iBAAAA,+BACAC,OAAAA,kCAAQ,4DACRC,eAAAA,kDAAgB,uEAChBC,uBAAAA,kEAAwB,wEACxBC,oBAAAA,4DAAqB,EAAE,8BACvBC,6BAAAA,sBACAC,eAAAA,2CACAC,qBAAAA,8DAAsB,4EACtBC,oBAAAA;IAEA,IAAM,AAACC,UAAWC,IAAAA,mCAAS,EAAC,MAAM;QAACC,MAAM;QAAwBb,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAtFS;IACP,IAAM,AAACG,gBAAiBC,IAAAA,sBAAQ,IAAzBD;IAEP,IAAME,mBAAmB,AAAC,uBAAGV,2BAAoB,uBAAGP;IAEpD,IAAMkB,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,qBACI,qBAACC,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,eAAe;QAAEC,IAAG;QAAKC,WAAWrB,QAAQsB,IAAI;kBACjG,cAAA,sBAACC,aAAO;YAACC,YAAY;YAACC,UAAS;YAASC,QAAO;;8BAC3C,qBAACH,aAAO,CAACI,MAAM;8BACX,cAAA,qBAACC,YAAM;wBAACC,SAASpC;kCAAgB,AAAC,GAC9BC,OADgCF,OAEnC,OADGE,wBAAwB,AAAC,KAAyB,OAArBiB,sBAAqB,OAAK;;;8BAG/D,sBAACY,aAAO,CAACO,QAAQ;oBAACC,KAAK;;sCACnB,qBAACC,gBAAU,CAACC,QAAQ;4BAACC,KAAK;sCACtB,cAAA,qBAACC,WAAK;0CACD7B,gBAAgB8B,GAAG,CAAC,SAAC5B;wCAQKT;oCAPvB,IAAMsC,aACF1B,wBAAwBf,wBAAwB,CAACY,OAAOI,YAAY;oCACxE,qBACI,qBAAC0B,aAAO;wCAAC9C,OAAOM;wCAAqByC,UAAU,CAACF;wCAAYZ,UAAS;kDACjE,cAAA,qBAACe;sDACG,cAAA,qBAACC,cAAQ;gDAELjD,OAAOO,EAAAA,eAAAA,yBAAAA,mCAAAA,YAAa,CAACS,OAAOE,EAAE,CAAC,KAAIF,OAAOE,EAAE;gDAC5CR,MAAMM,OAAOE,EAAE;gDACfgC,SAASlC,OAAOI,YAAY;gDAC5B2B,UAAUF;gDACVM,UAAUnC,OAAOoC,0BAA0B;+CALtCpC,OAAOE,EAAE;;;gCAUlC;;;wBAGPd,sCACG;;8CACI,qBAACiD,aAAO;oCAACC,IAAG;oCAAKC,IAAG;;gCACnBlD;;;;;;;;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"],"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"}

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

@@ -1,4 +1,31 @@
-import { FunctionComponent } from 'react';
-import { TableDateRangePickerProps } from './TableDateRangePicker.types';
-export declare const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { DateRangePickerInlineCalendarProps, DateRangePickerPreset } from '../../date-range-picker';
+export type TableDateRangePickerStylesNames = 'dateRangeRoot';
+export interface TableDateRangePickerProps extends BoxProps, CompoundStylesApiProps<TableDateRangePickerFactory>, Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {
+    /**
+     * An object containing date presets.
+     * If empty the preset dropdown won't be shown
+     *
+     * @example
+     * {
+     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
+     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
+     * }
+     * @default {}
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+}
+export type TableDateRangePickerFactory = Factory<{
+    props: TableDateRangePickerProps;
+    ref: HTMLDivElement;
+    stylesNames: TableDateRangePickerStylesNames;
+    compound: true;
+}>;
+export declare const TableDateRangePicker: import("@mantine/core").MantineComponent<{
+    props: TableDateRangePickerProps;
+    ref: HTMLDivElement;
+    stylesNames: TableDateRangePickerStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableDateRangePicker.d.ts.map

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

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

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "TableDateRangePicker", {
         return TableDateRangePicker;
     }
 });
+var _instanceof = require("@swc/helpers/_/_instanceof");
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
@@ -16,89 +17,83 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
-var _hooks = require("@mantine/hooks");
 var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
-var _button = require("../../button");
+var _react = require("react");
 var _daterangepicker = require("../../date-range-picker");
-var _Tablestyles = require("../Table.styles");
+var _Table = require("../Table");
 var _TableContext = require("../TableContext");
-var _TableDateRangePickerstyles = /*#__PURE__*/ _interop_require_default._(require("./TableDateRangePicker.styles"));
-var TableDateRangePicker = function(_param) {
-    var _param_presets = _param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = _param.rangeCalendarProps, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties._(_param, [
+var defaultProps = {
+    presets: {}
+};
+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, [
         "presets",
         "rangeCalendarProps",
         "classNames",
+        "className",
         "styles",
-        "unstyled"
+        "style",
+        "vars"
     ]);
-    var classes = (0, _TableDateRangePickerstyles.default)(null, {
-        name: "TableDateRangePicker",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }).classes;
-    var _useToggle = _sliced_to_array._((0, _hooks.useToggle)(), 2), opened = _useToggle[0], toggleOpened = _useToggle[1];
+    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);
-        toggleOpened(false);
+        setOpened(false);
     };
     var onCancel = function() {
-        toggleOpened(false);
+        setOpened(false);
     };
     var formatDate = function(date) {
         return (0, _dayjs.default)(date).format("MMM DD, YYYY");
     };
     var formattedRange = "".concat(formatDate(form.values.dateRange[0]), " - ").concat(formatDate(form.values.dateRange[1]));
+    var dateRangeInitialized = form.values.dateRange.every(function(date) {
+        return _instanceof._(date, Date);
+    });
+    var stylesApiProps = {
+        classNames: classNames,
+        styles: styles
+    };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
-        order: _Tablestyles.TableComponentsOrder.DateRangePicker,
-        py: "sm",
-        className: classes.root
-    }, others), {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
-            spacing: "xs",
-            className: classes.wrapper,
+        order: _Table.TableComponentsOrder.DateRangePicker,
+        ref: ref
+    }, ctx.getStyles("dateRangeRoot", _object_spread._({
+        className: className,
+        style: style
+    }, stylesApiProps)), others), {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
+            withinPortal: true,
+            opened: opened,
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
-                    span: true,
-                    className: classes.label,
-                    children: formattedRange
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
-                    opened: opened,
-                    onChange: toggleOpened,
-                    withinPortal: true,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
-                                variant: "outline",
-                                color: "gray",
-                                onClick: function() {
-                                    return toggleOpened();
-                                },
-                                px: "xs",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CalendarSize24Px, {
-                                    width: 24,
-                                    height: 24
-                                })
-                            })
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.InputBase, {
+                        component: "button",
+                        leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CalendarSize16Px, {
+                            height: 16
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Dropdown, {
-                            p: 0,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_daterangepicker.DateRangePickerInlineCalendar, {
-                                initialRange: form.values.dateRange,
-                                onApply: onApply,
-                                onCancel: onCancel,
-                                presets: presets,
-                                rangeCalendarProps: rangeCalendarProps
-                            })
-                        })
-                    ]
+                        miw: 220,
+                        onClick: function() {
+                            return setOpened(true);
+                        },
+                        children: dateRangeInitialized ? formattedRange : "Select date range"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Dropdown, {
+                    p: 0,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_daterangepicker.DateRangePickerInlineCalendar, {
+                        initialRange: form.values.dateRange,
+                        onApply: onApply,
+                        onCancel: onCancel,
+                        presets: presets,
+                        rangeCalendarProps: rangeCalendarProps
+                    })
                 })
             ]
         })
     }));
-};
+});
 
 //# sourceMappingURL=TableDateRangePicker.js.map

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 {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport {useToggle} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {FunctionComponent} from 'react';\n\nimport {Button} from '../../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerValue} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableDateRangePicker.styles';\nimport {TableDateRangePickerProps} from './TableDateRangePicker.types';\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableDateRangePicker', classNames, styles, unstyled});\n    const [opened, toggleOpened] = useToggle();\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        toggleOpened(false);\n    };\n    const onCancel = () => {\n        toggleOpened(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\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            py=\"sm\"\n            className={classes.root}\n            {...others}\n        >\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                <Text span className={classes.label}>\n                    {formattedRange}\n                </Text>\n                <Popover opened={opened} onChange={toggleOpened} withinPortal>\n                    <Popover.Target>\n                        <Button variant=\"outline\" color=\"gray\" onClick={() => toggleOpened()} px=\"xs\">\n                            <CalendarSize24Px width={24} height={24} />\n                        </Button>\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            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["TableDateRangePicker","presets","rangeCalendarProps","classNames","styles","unstyled","others","classes","useStyles","name","useToggle","opened","toggleOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formattedRange","values","dateRange","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","py","className","root","Group","spacing","wrapper","Text","label","Popover","onChange","withinPortal","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;;;gCAbkB;oBACU;qBACjB;8DACN;sBAGG;+BAC6C;2BAC/B;4BACZ;mFACD;AAGf,IAAMA,uBAAqE;gCAC9EC,SAAAA,sCAAU,CAAC,oBACXC,4BAAAA,oBACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWC,IAAAA,mCAAS,EAAC,MAAM;QAACC,MAAM;QAAwBN,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAtFE;IACP,IAA+BG,gCAAAA,IAAAA,gBAAS,SAAjCC,SAAwBD,eAAhBE,eAAgBF;IAC/B,IAAM,AAACG,OAAQC,IAAAA,sBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC;QACbH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,aAAa;IACjB;IACA,IAAMM,WAAW;QACbN,aAAa;IACjB;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;IAEvG,qBACI,qBAACC,UAAI,CAACC,GAAG;QACLC,MAAK;QACLC,OAAOC,iCAAoB,CAACC,eAAe;QAC3CC,IAAG;QACHC,WAAW1B,QAAQ2B,IAAI;OACnB5B;kBAEJ,cAAA,sBAAC6B,WAAK;YAACC,SAAQ;YAAKH,WAAW1B,QAAQ8B,OAAO;;8BAC1C,qBAACC,UAAI;oBAACV,IAAI;oBAACK,WAAW1B,QAAQgC,KAAK;8BAC9BhB;;8BAEL,sBAACiB,aAAO;oBAAC7B,QAAQA;oBAAQ8B,UAAU7B;oBAAc8B,YAAY;;sCACzD,qBAACF,aAAO,CAACG,MAAM;sCACX,cAAA,qBAACC,cAAM;gCAACC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMnC;;gCAAgBoC,IAAG;0CACrE,cAAA,qBAACC,kCAAgB;oCAACC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,qBAACX,aAAO,CAACY,QAAQ;4BAACC,GAAG;sCACjB,cAAA,qBAACC,8CAA6B;gCAC1BC,cAAc1C,KAAKW,MAAM,CAACC,SAAS;gCACnCV,SAASA;gCACTG,UAAUA;gCACVjB,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD"}
+{"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"}