@coveord/plasma-mantine 55.8.0 → 56.0.0

package/dist/cjs/components/collection/CollectionItem.js

@@ -16,18 +16,22 @@ var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _sortable = require("@dnd-kit/sortable");
 var _utilities = require("@dnd-kit/utilities");
 var _core = require("@mantine/core");
+var _actionicon = require("../action-icon");
 var _CollectionContext = require("./CollectionContext");
+var defaultProps = {
+    removable: true,
+    gap: 'sm'
+};
 var RemoveButton = function(param) {
     var onClick = param.onClick;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_actionicon.ActionIcon.Quaternary, {
         style: {
             alignSelf: 'center'
         },
-        variant: "subtle",
         onClick: onClick,
-        color: "action",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.RemoveSize16Px, {
-            height: 16
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconTrash, {
+            "aria-label": "Remove",
+            size: 16
         })
     });
 };
@@ -38,44 +42,90 @@ var RemoveButtonPlaceholder = function() {
         }
     });
 };
-var StaticCollectionItem = function(param) {
-    var onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, children = param.children;
+var StaticCollectionItem = function(props) {
+    var _useProps = (0, _core.useProps)('CollectionItem', defaultProps, props), children = _useProps.children, removable = _useProps.removable, onRemove = _useProps.onRemove, id = _useProps.id, // Style props
+    style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
+        "children",
+        "removable",
+        "onRemove",
+        "id",
+        "style",
+        "className",
+        "classNames",
+        "styles"
+    ]);
     var ctx = (0, _CollectionContext.useCollectionContext)();
     var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
         onClick: onRemove
     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButtonPlaceholder, {});
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({}, ctx.getStyles('item')), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
+        "data-testid": "item-".concat(id)
+    }, ctx.getStyles('item', {
+        style: style,
+        className: className,
+        classNames: classNames,
+        styles: styles
+    }), others), {
         children: [
             children,
             removeButton
         ]
     }));
 };
-var DisabledCollectionItem = function(param) {
-    var children = param.children;
+var DisabledCollectionItem = function(props) {
     var ctx = (0, _CollectionContext.useCollectionContext)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, _object_spread_props._(_object_spread._({}, ctx.getStyles('item')), {
+    var _useProps = (0, _core.useProps)('CollectionItem', defaultProps, props), children = _useProps.children, id = _useProps.id, // Style props
+    style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
+        "children",
+        "id",
+        "style",
+        "className",
+        "classNames",
+        "styles"
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, _object_spread_props._(_object_spread._({
+        "data-testid": "item-".concat(id)
+    }, ctx.getStyles('item', {
+        style: style,
+        className: className,
+        classNames: classNames,
+        styles: styles
+    }), others), {
         children: children
     }));
 };
-var DraggableCollectionItem = function(param) {
-    var id = param.id, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, children = param.children;
+var DraggableCollectionItem = function(props) {
     var ctx = (0, _CollectionContext.useCollectionContext)();
+    var _useProps = (0, _core.useProps)('CollectionItem', defaultProps, props), children = _useProps.children, removable = _useProps.removable, onRemove = _useProps.onRemove, id = _useProps.id, // Style props
+    className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
+        "children",
+        "removable",
+        "onRemove",
+        "id",
+        "className",
+        "classNames",
+        "styles"
+    ]);
     var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
         onClick: onRemove
     }) : null;
     var _useSortable = (0, _sortable.useSortable)({
         id: id
     }), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging, setActivatorNodeRef = _useSortable.setActivatorNodeRef;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._(_object_spread_props._(_object_spread._({
+        "data-testid": "item-".concat(id),
         ref: setNodeRef
     }, ctx.getStyles('item', {
         style: transform ? {
             transform: _utilities.CSS.Transform.toString(transform),
             transition: transition
-        } : undefined
+        } : undefined,
+        className: className,
+        classNames: classNames,
+        styles: styles
     })), {
-        "data-isdragging": isDragging,
+        "data-isdragging": isDragging
+    }), others), {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
                 ref: setActivatorNodeRef

package/dist/cjs/components/collection/CollectionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {ActionIcon, Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon style={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group {...ctx.getStyles('item')}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n    const ctx = useCollectionContext();\n    return <Group {...ctx.getStyles('item')}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    id,\n    onRemove,\n    removable = true,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n            })}\n            data-isdragging={isDragging}\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","style","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","width","StaticCollectionItem","onRemove","removable","children","ctx","useCollectionContext","removeButton","Group","getStyles","DisabledCollectionItem","DraggableCollectionItem","id","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","CSS","Transform","toString","undefined","data-isdragging","DragAndDropSize24Px","draggable","disabled","otherProps"],"mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;gCApFqC;wBACxB;yBACR;oBAC0B;iCAGT;AAanC,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,OAAO;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC/E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIP,OAAO;YAACQ,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF;QAC1FC,iBAAAA,mCACAC,WAAAA,0CAAY,yBACZC,iBAAAA;IAEA,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,IAAMC,eAAeJ,aAAaD,yBAAW,qBAACb;QAAaC,SAASY;uBAAe,qBAACJ;IAEpF,qBACI,sBAACU,WAAK,8CAAKH,IAAII,SAAS,CAAC;;YACpBL;YACAG;;;AAGb;AAEA,IAAMG,yBAA0F;QAAEN,iBAAAA;IAC9F,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,qBAAO,qBAACE,WAAK,8CAAKH,IAAII,SAAS,CAAC;kBAAUL;;AAC9C;AAEA,IAAMO,0BAA2F;QAC7FC,WAAAA,IACAV,iBAAAA,mCACAC,WAAAA,0CAAY,yBACZC,iBAAAA;IAEA,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,IAAMC,eAAeJ,aAAaD,yBAAW,qBAACb;QAAaC,SAASY;SAAe;IACnF,IAAoGW,eAAAA,IAAAA,qBAAW,EAAC;QAC5GD,IAAAA;IACJ,IAFOE,aAA6FD,aAA7FC,YAAYC,YAAiFF,aAAjFE,WAAWC,aAAsEH,aAAtEG,YAAYC,YAA0DJ,aAA1DI,WAAWC,aAA+CL,aAA/CK,YAAYC,aAAmCN,aAAnCM,YAAYC,sBAAuBP,aAAvBO;IAI7E,qBACI,sBAACZ,WAAK;QACFa,KAAKL;OACDX,IAAII,SAAS,CAAC,QAAQ;QACtBjB,OAAOyB,YACD;YACIA,WAAWK,cAAG,CAACC,SAAS,CAACC,QAAQ,CAACP;YAClCC,YAAAA;QACJ,IACAO;IACV;QACAC,mBAAiBP;;0BAEjB,qBAACpB;gBAAIsB,KAAKD;eAAyBL,WAAeD,YAAgBT,IAAII,SAAS,CAAC;0BAC5E,cAAA,qBAACkB,qCAAmB;oBAAC9B,QAAQ;;;YAEhCO;YACAG;;;AAGb;AAEO,IAAMnB,iBAA4E;QACrFwC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACnB,6CAA2BoB;IACvC;IACA,IAAIF,WAAW;QACX,qBAAO,qBAACjB,8CAA4BmB;IACxC;IACA,qBAAO,qBAAC7B,2CAAyB6B;AACrC"}
+{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, IconTrash} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {Group, GroupProps, useProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {ActionIcon} from '../action-icon';\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst defaultProps: Partial<CollectionItemSharedProps> = {\n    removable: true,\n    gap: 'sm',\n};\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>\n        <IconTrash aria-label=\"Remove\" size={16} />\n    </ActionIcon.Quaternary>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        id,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n        </Group>\n    );\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n                className,\n                classNames,\n                styles,\n            })}\n            data-isdragging={isDragging}\n            {...others}\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","defaultProps","removable","gap","RemoveButton","onClick","ActionIcon","Quaternary","style","alignSelf","IconTrash","aria-label","size","RemoveButtonPlaceholder","div","width","StaticCollectionItem","props","useProps","children","onRemove","id","className","classNames","styles","others","ctx","useCollectionContext","removeButton","Group","data-testid","getStyles","DisabledCollectionItem","DraggableCollectionItem","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","CSS","Transform","toString","undefined","data-isdragging","DragAndDropSize24Px","height","draggable","disabled","otherProps"],"mappings":";;;;+BAsIaA;;;eAAAA;;;;;;;gCAtIgC;wBACnB;yBACR;oBACwB;0BAGjB;iCACU;AAanC,IAAMC,eAAmD;IACrDC,WAAW;IACXC,KAAK;AACT;AAEA,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,sBAAU,CAACC,UAAU;QAACC,OAAO;YAACC,WAAW;QAAQ;QAAGJ,SAASA;kBAC1D,cAAA,qBAACK,2BAAS;YAACC,cAAW;YAASC,MAAM;;;;AAI7C,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIN,OAAO;YAACO,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,SAACC;IAC3F,IAYIC,YAAAA,IAAAA,cAAQ,EAAC,kBAAkBjB,cAAcgB,QAXzCE,WAWAD,UAXAC,UACAjB,YAUAgB,UAVAhB,WACAkB,WASAF,UATAE,UACAC,KAQAH,UARAG,IAEA,cAAc;IACdb,QAKAU,UALAV,OACAc,YAIAJ,UAJAI,WACAC,aAGAL,UAHAK,YACAC,SAEAN,UAFAM,QACGC,sCACHP;QAXAC;QACAjB;QACAkB;QACAC;QAGAb;QACAc;QACAC;QACAC;;IAGJ,IAAME,MAAMC,IAAAA,uCAAoB;IAChC,IAAMC,eAAe1B,aAAakB,yBAAW,qBAAChB;QAAaC,SAASe;uBAAe,qBAACP;IAEpF,qBACI,sBAACgB,WAAK;QACFC,eAAa,AAAC,QAAU,OAAHT;OACjBK,IAAIK,SAAS,CAAC,QAAQ;QAACvB,OAAAA;QAAOc,WAAAA;QAAWC,YAAAA;QAAYC,QAAAA;IAAM,IAC3DC;;YAEHN;YACAS;;;AAGb;AAEA,IAAMI,yBAA0F,SAACf;IAC7F,IAAMS,MAAMC,IAAAA,uCAAoB;IAChC,IAUIT,YAAAA,IAAAA,cAAQ,EAAC,kBAAkBjB,cAAcgB,QATzCE,WASAD,UATAC,UACAE,KAQAH,UARAG,IAEA,cAAc;IACdb,QAKAU,UALAV,OACAc,YAIAJ,UAJAI,WACAC,aAGAL,UAHAK,YACAC,SAEAN,UAFAM,QACGC,sCACHP;QATAC;QACAE;QAGAb;QACAc;QACAC;QACAC;;IAGJ,qBACI,qBAACK,WAAK;QACFC,eAAa,AAAC,QAAU,OAAHT;OACjBK,IAAIK,SAAS,CAAC,QAAQ;QAACvB,OAAAA;QAAOc,WAAAA;QAAWC,YAAAA;QAAYC,QAAAA;IAAM,IAC3DC;kBAEHN;;AAGb;AAEA,IAAMc,0BAA2F,SAAChB;IAC9F,IAAMS,MAAMC,IAAAA,uCAAoB;IAChC,IAWIT,YAAAA,IAAAA,cAAQ,EAAC,kBAAkBjB,cAAcgB,QAVzCE,WAUAD,UAVAC,UACAjB,YASAgB,UATAhB,WACAkB,WAQAF,UARAE,UACAC,KAOAH,UAPAG,IAEA,cAAc;IACdC,YAIAJ,UAJAI,WACAC,aAGAL,UAHAK,YACAC,SAEAN,UAFAM,QACGC,sCACHP;QAVAC;QACAjB;QACAkB;QACAC;QAGAC;QACAC;QACAC;;IAGJ,IAAMI,eAAe1B,aAAakB,yBAAW,qBAAChB;QAAaC,SAASe;SAAe;IACnF,IAAoGc,eAAAA,IAAAA,qBAAW,EAAC;QAC5Gb,IAAAA;IACJ,IAFOc,aAA6FD,aAA7FC,YAAYC,YAAiFF,aAAjFE,WAAWC,aAAsEH,aAAtEG,YAAYC,YAA0DJ,aAA1DI,WAAWC,aAA+CL,aAA/CK,YAAYC,aAAmCN,aAAnCM,YAAYC,sBAAuBP,aAAvBO;IAI7E,qBACI,sBAACZ,WAAK;QACFC,eAAa,AAAC,QAAU,OAAHT;QACrBqB,KAAKL;OACDX,IAAIK,SAAS,CAAC,QAAQ;QACtBvB,OAAO8B,YACD;YACIA,WAAWK,cAAG,CAACC,SAAS,CAACC,QAAQ,CAACP;YAClCC,YAAAA;QACJ,IACAO;QACNxB,WAAAA;QACAC,YAAAA;QACAC,QAAAA;IACJ;QACAuB,mBAAiBP;QACbf;;0BAEJ,qBAACX;gBAAI4B,KAAKD;eAAyBL,WAAeD,YAAgBT,IAAIK,SAAS,CAAC;0BAC5E,cAAA,qBAACiB,qCAAmB;oBAACC,QAAQ;;;YAEhC9B;YACAS;;;AAGb;AAEO,IAAM5B,iBAA4E;QACrFkD,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACnB,6CAA2BoB;IACvC;IACA,IAAIF,WAAW;QACX,qBAAO,qBAACjB,8CAA4BmB;IACxC;IACA,qBAAO,qBAACpC,2CAAyBoC;AACrC"}

package/dist/cjs/components/copyToClipboard/CopyToClipboard.d.ts

@@ -1,6 +1,6 @@
-import { MantineColor } from '@mantine/core';
-import { FunctionComponent } from 'react';
-export interface CopyToClipboardProps {
+import { ActionIconProps, MantineColor } from '@mantine/core';
+import { FunctionComponent, MouseEventHandler } from 'react';
+export interface CopyToClipboardProps extends ActionIconProps {
     /**
      * The value to be copied to the clipboard.
      */
@@ -14,13 +14,25 @@ export interface CopyToClipboardProps {
     /**
      * Called each time the value is copied to the clipboard
      */
-    onCopy?: () => void;
+    onCopy?: MouseEventHandler<HTMLButtonElement>;
     /**
      * The color of the icon when idle
      *
      * @default 'gray'
      */
     color?: MantineColor | (string & {});
+    /**
+     * The text displayed when hovering over the button
+     *
+     * @default 'Copy to clipboard'
+     */
+    tooltipLabelCopy?: string;
+    /**
+     * The text displayed when the value is copied to the clipboard
+     *
+     * @default 'Copied'
+     */
+    tooltipLabelCopied?: string;
 }
 export declare const CopyToClipboard: FunctionComponent<CopyToClipboardProps>;
 //# sourceMappingURL=CopyToClipboard.d.ts.map

package/dist/cjs/components/copyToClipboard/CopyToClipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,YAAY,EAAqB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACxC;AAqBD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAU/D,CAAC"}
+{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,eAAe,EAAc,YAAY,EAAqB,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IACzD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA6BD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAU/D,CAAC"}

package/dist/cjs/components/copyToClipboard/CopyToClipboard.js

@@ -9,32 +9,41 @@ Object.defineProperty(exports, "CopyToClipboard", {
     }
 });
 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 CopyToClipboardButton = function(param) {
-    var value = param.value, onCopy = param.onCopy, color = param.color;
+var _actionicon = require("../action-icon");
+var CopyToClipboardButton = function(_param) {
+    var value = _param.value, onCopy = _param.onCopy, color = _param.color, _param_tooltipLabelCopy = _param.tooltipLabelCopy, tooltipLabelCopy = _param_tooltipLabelCopy === void 0 ? 'Copy to clipboard' : _param_tooltipLabelCopy, _param_tooltipLabelCopied = _param.tooltipLabelCopied, tooltipLabelCopied = _param_tooltipLabelCopied === void 0 ? 'Copied' : _param_tooltipLabelCopied, others = _object_without_properties._(_param, [
+        "value",
+        "onCopy",
+        "color",
+        "tooltipLabelCopy",
+        "tooltipLabelCopied"
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.CopyButton, {
         value: value,
         timeout: 2000,
         children: function(param) {
             var copied = param.copied, copy = param.copy;
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
-                label: copied ? 'Copied' : 'Copy',
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
-                    variant: "subtle",
+                label: copied ? tooltipLabelCopied : tooltipLabelCopy,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_actionicon.ActionIcon.Quaternary, _object_spread_props._(_object_spread._({
+                    "aria-label": tooltipLabelCopy,
                     color: copied ? 'success' : color,
-                    onClick: function() {
+                    onClick: function(clickEvent) {
                         copy();
-                        onCopy === null || onCopy === void 0 ? void 0 : onCopy();
-                    },
-                    children: copied ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CheckSize16Px, {
-                        height: 16
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CopySize16Px, {
-                        height: 16
+                        onCopy === null || onCopy === void 0 ? void 0 : onCopy(clickEvent);
+                    }
+                }, others), {
+                    children: copied ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconClipboardCheck, {
+                        size: 16
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconClipboardText, {
+                        size: 16
                     })
-                })
+                }))
             });
         }
     });
@@ -47,9 +56,7 @@ var CopyToClipboard = function(_param) {
         value: others.value,
         readOnly: true,
         autoComplete: "off",
-        rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyToClipboardButton, _object_spread._({
-            color: "action"
-        }, others))
+        rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyToClipboardButton, _object_spread._({}, others))
     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyToClipboardButton, _object_spread._({}, others));
 };
 

package/dist/cjs/components/copyToClipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport interface CopyToClipboardProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: () => void;\n    /**\n     * The color of the icon when idle\n     *\n     * @default 'gray'\n     */\n    color?: MantineColor | (string & {});\n}\n\nconst CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy, color}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    variant=\"subtle\"\n                    color={copied ? 'success' : color}\n                    onClick={() => {\n                        copy();\n                        onCopy?.();\n                    }}\n                >\n                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                </ActionIcon>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>\n    withLabel ? (\n        <TextInput\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton color=\"action\" {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n"],"names":["CopyToClipboard","CopyToClipboardButton","value","onCopy","color","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","variant","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","TextInput","readOnly","autoComplete","rightSection"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;gCA9C6B;oBAC6B;AA0BvE,IAAMC,wBAAoF;QAAEC,cAAAA,OAAOC,eAAAA,QAAQC,cAAAA;yBACvG,qBAACC,gBAAU;QAACH,OAAOA;QAAOI,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW;0BAChC,cAAA,qBAACI,gBAAU;oBACPC,SAAQ;oBACRR,OAAOG,SAAS,YAAYH;oBAC5BS,SAAS;wBACLL;wBACAL,mBAAAA,6BAAAA;oBACJ;8BAECI,uBAAS,qBAACO,+BAAa;wBAACC,QAAQ;uCAAS,qBAACC,8BAAY;wBAACD,QAAQ;;;;;;;AAO7E,IAAMf,kBAA2D;QAAEiB,mBAAAA,WAAcC;QAAdD;;WACtEA,0BACI,qBAACE,eAAS;QACNjB,OAAOgB,OAAOhB,KAAK;QACnBkB,QAAQ;QACRC,cAAa;QACbC,4BAAc,qBAACrB;YAAsBG,OAAM;WAAac;uBAG5D,qBAACjB,4CAA0BiB"}
+{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {IconClipboardCheck, IconClipboardText} from '@coveord/plasma-react-icons';\nimport {ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';\nimport {FunctionComponent, MouseEventHandler} from 'react';\nimport {ActionIcon} from '../action-icon';\n\nexport interface CopyToClipboardProps extends ActionIconProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * The color of the icon when idle\n     *\n     * @default 'gray'\n     */\n    color?: MantineColor | (string & {});\n    /**\n     * The text displayed when hovering over the button\n     *\n     * @default 'Copy to clipboard'\n     */\n    tooltipLabelCopy?: string;\n    /**\n     * The text displayed when the value is copied to the clipboard\n     *\n     * @default 'Copied'\n     */\n    tooltipLabelCopied?: string;\n}\n\nconst CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({\n    value,\n    onCopy,\n    color,\n    tooltipLabelCopy = 'Copy to clipboard',\n    tooltipLabelCopied = 'Copied',\n    ...others\n}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? tooltipLabelCopied : tooltipLabelCopy}>\n                <ActionIcon.Quaternary\n                    aria-label={tooltipLabelCopy}\n                    color={copied ? 'success' : color}\n                    onClick={(clickEvent) => {\n                        copy();\n                        onCopy?.(clickEvent);\n                    }}\n                    {...others}\n                >\n                    {copied ? <IconClipboardCheck size={16} /> : <IconClipboardText size={16} />}\n                </ActionIcon.Quaternary>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>\n    withLabel ? (\n        <TextInput\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n"],"names":["CopyToClipboard","CopyToClipboardButton","value","onCopy","color","tooltipLabelCopy","tooltipLabelCopied","others","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","Quaternary","aria-label","onClick","clickEvent","IconClipboardCheck","size","IconClipboardText","withLabel","TextInput","readOnly","autoComplete","rightSection"],"mappings":";;;;+BAmEaA;;;eAAAA;;;;;;;gCAnEuC;oBACwB;0BAEnD;AAqCzB,IAAMC,wBAAoF;QACtFC,eAAAA,OACAC,gBAAAA,QACAC,eAAAA,wCACAC,kBAAAA,wDAAmB,kFACnBC,oBAAAA,4DAAqB,sCAClBC;QALHL;QACAC;QACAC;QACAC;QACAC;;yBAGA,qBAACE,gBAAU;QAACN,OAAOA;QAAOO,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,qBAACC,aAAO;gBAACC,OAAOH,SAASJ,qBAAqBD;0BAC1C,cAAA,qBAACS,sBAAU,CAACC,UAAU;oBAClBC,cAAYX;oBACZD,OAAOM,SAAS,YAAYN;oBAC5Ba,SAAS,SAACC;wBACNP;wBACAR,mBAAAA,6BAAAA,OAASe;oBACb;mBACIX;8BAEHG,uBAAS,qBAACS,oCAAkB;wBAACC,MAAM;uCAAS,qBAACC,mCAAiB;wBAACD,MAAM;;;;;;;AAOnF,IAAMpB,kBAA2D;QAAEsB,mBAAAA,WAAcf;QAAde;;WACtEA,0BACI,qBAACC,eAAS;QACNrB,OAAOK,OAAOL,KAAK;QACnBsB,QAAQ;QACRC,cAAa;QACbC,4BAAc,qBAACzB,4CAA0BM;uBAG7C,qBAACN,4CAA0BM"}

package/dist/cjs/components/date-range-picker/DateRange.module.css

@@ -1,7 +1,7 @@
 .picker {
-    border-bottom: 1px solid var(--mantine-color-gray-2);
+    border-bottom: 1px solid var(--mantine-color-default-border);
 }
 
 .save {
-    border-top: 1px solid var(--mantine-color-gray-2);
+    border-top: 1px solid var(--mantine-color-default-border);
 }

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

@@ -1,18 +1,17 @@
-import { DatePickerBaseProps } from '@mantine/dates';
+import { DatePickerBaseProps, type DateStringValue, type DatesRangeValue } from '@mantine/dates';
 import { DateRangePickerPreset } from './DateRangePickerPresetSelect';
 import { EditableDateRangePickerProps } from './EditableDateRangePicker';
-export type DateRangePickerValue = [Date | null, Date | null];
 export interface DateRangePickerInlineCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /**
      * Initial selected range
      */
-    initialRange: DateRangePickerValue;
+    initialRange: DatesRangeValue<DateStringValue | null>;
     /**
      * Function called when the user applies the new date range
      *
      * @param range the newly selected dates
      */
-    onApply: (range: DateRangePickerValue) => void;
+    onApply: (range: DatesRangeValue<DateStringValue | null>) => void;
     /**
      * Function called when the user click on the cancel button
      */

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAM/D,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAC9D,MAAM,WAAW,kCACb,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IACrE;;OAEG;IACH,YAAY,EAAE,oBAAoB,CAAC;IACnC;;;;OAIG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAOD,eAAO,MAAM,6BAA6B,GAAI,yFAQ3C,kCAAkC,4CAoEpC,CAAC"}
+{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAM3G,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAChG,MAAM,WAAW,kCACb,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IACrE;;OAEG;IACH,YAAY,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IACtD;;;;OAIG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAMD,eAAO,MAAM,6BAA6B,GAAI,yFAQ3C,kCAAkC,4CAmEpC,CAAC"}

package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js

@@ -24,7 +24,7 @@ var isDateRangePickerValue = function(value) {
     return Array.isArray(value) && value.length === 2;
 };
 var endOfDay = function(value) {
-    return value ? (0, _dayjs.default)(value).endOf('day').toDate() : value;
+    return value ? (0, _dayjs.default)(value).endOf('day').toISOString() : value;
 };
 var DateRangePickerInlineCalendar = function(param) {
     var initialRange = param.initialRange, onApply = param.onApply, onCancel = param.onCancel, presets = param.presets, startProps = param.startProps, endProps = param.endProps, rangeCalendarProps = param.rangeCalendarProps;
@@ -35,8 +35,16 @@ var DateRangePickerInlineCalendar = function(param) {
     });
     var calendarInputProps = form.getInputProps('dates');
     var onCalendarChange = function(range) {
+        // If the current value is [null, null] and a date is selected, set [selectedValue, null]
+        if (isDateRangePickerValue(range) && range[0] && range[1] === null) {
+            calendarInputProps.onChange([
+                (0, _dayjs.default)(range[0]).toISOString(),
+                null
+            ]);
+            return;
+        }
         var normalized = isDateRangePickerValue(range) && range[1] ? [
-            range[0],
+            (0, _dayjs.default)(range[0]).toISOString(),
             endOfDay(range[1])
         ] : range;
         calendarInputProps.onChange(normalized);
@@ -109,14 +117,11 @@ var DateRangePickerInlineCalendar = function(param) {
                 py: "sm",
                 className: _DateRangemodulecss.default.save,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
-                        variant: "outline",
-                        size: "xs",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button.Tertiary, {
                         onClick: onCancel,
                         children: "Cancel"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
-                        size: "xs",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button.Primary, {
                         onClick: onCalendarApply,
                         children: "Apply"
                     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport dayjs from 'dayjs';\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nconst isDateRangePickerValue = (value: unknown): value is DateRangePickerValue =>\n    Array.isArray(value) && value.length === 2;\n\nconst endOfDay = (value: Date): Date => (value ? dayjs(value).endOf('day').toDate() : value);\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarChange = (range: Date | Date[] | DateRangePickerValue): void => {\n        const normalized = isDateRangePickerValue(range) && range[1] ? [range[0], endOfDay(range[1])] : range;\n        calendarInputProps.onChange(normalized);\n    };\n\n    const onCalendarApply = () => {\n        // In case the user only clicked the start date, but not the end date,\n        // assume a single day was meant to be selected.\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = endOfDay(form.values.dates[0]);\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n                <EditableDateRangePicker\n                    value={calendarInputProps.value}\n                    {...calendarInputProps}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect\n                            value={calendarInputProps.value}\n                            presets={presets}\n                            {...calendarInputProps}\n                            selectProps={{comboboxProps: {withinPortal: false}}}\n                        />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    columnsToScroll={1}\n                    type=\"range\"\n                    styles={{day: {textAlign: 'center'}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                    onChange={onCalendarChange}\n                />\n            </Center>\n\n            <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["DateRangePickerInlineCalendar","isDateRangePickerValue","value","Array","isArray","length","endOfDay","dayjs","endOf","toDate","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","useForm","initialValues","dates","calendarInputProps","getInputProps","onCalendarChange","range","normalized","onChange","onCalendarApply","values","Group","align","gap","grow","px","py","className","DateRangeClasses","picker","EditableDateRangePicker","Space","w","DateRangePickerPresetSelect","selectProps","comboboxProps","withinPortal","Center","DatePicker","numberOfColumns","columnsToScroll","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","Button","variant","size","onClick"],"mappings":";;;;+BAoDaA;;;eAAAA;;;;;;;oBApDsB;qBACW;oBACxB;8DAEJ;sBACG;2EACQ;2CACoC;uCACG;AAuCpE,IAAMC,yBAAyB,SAACC;WAC5BC,MAAMC,OAAO,CAACF,UAAUA,MAAMG,MAAM,KAAK;;AAE7C,IAAMC,WAAW,SAACJ;WAAuBA,QAAQK,IAAAA,cAAK,EAACL,OAAOM,KAAK,CAAC,OAAOC,MAAM,KAAKP;;AAE/E,IAAMF,gCAAgC;QACzCU,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOC,IAAAA,aAAO,EAAC;QACjBC,eAAe;YACXC,OAAOV;QACX;IACJ;IACA,IAAMW,qBAAqBJ,KAAKK,aAAa,CAAC;IAE9C,IAAMC,mBAAmB,SAACC;QACtB,IAAMC,aAAaxB,uBAAuBuB,UAAUA,KAAK,CAAC,EAAE,GAAG;YAACA,KAAK,CAAC,EAAE;YAAElB,SAASkB,KAAK,CAAC,EAAE;SAAE,GAAGA;QAChGH,mBAAmBK,QAAQ,CAACD;IAChC;IAEA,IAAME,kBAAkB;QACpB,sEAAsE;QACtE,gDAAgD;QAChD,IAAI,CAACV,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE,EAAE;YACvBH,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE,GAAGd,SAASW,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE;QACxD;QACAT,QAAQM,KAAKW,MAAM,CAACR,KAAK;IAC7B;IAEA,qBACI;;0BACI,sBAACS,WAAK;gBAACC,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACC,MAAM;;kCAClF,qBAACC,gDAAuB;wBACpBpC,OAAOmB,mBAAmBnB,KAAK;uBAC3BmB;wBACJP,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,qBAAC0B,WAAK;gCAACC,GAAE;;0CACT,qBAACC,wDAA2B;gCACxBvC,OAAOmB,mBAAmBnB,KAAK;gCAC/BW,SAASA;+BACLQ;gCACJqB,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,qBAACC,YAAM;gBAACX,IAAG;gBAAKD,IAAG;0BACf,cAAA,qBAACa,iBAAU;oBACPC,iBAAiB;oBACjBC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;mBAClBtC,oBACAK;oBACJK,UAAUH;;;0BAIlB,sBAACM,WAAK;gBAAC0B,SAAQ;gBAAQxB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACoB,IAAI;;kCAC5E,qBAACC,cAAM;wBAACC,SAAQ;wBAAUC,MAAK;wBAAKC,SAAShD;kCAAU;;kCAGvD,qBAAC6C,cAAM;wBAACE,MAAK;wBAAKC,SAASjC;kCAAiB;;;;;;AAM5D"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport dayjs from 'dayjs';\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DatesRangeValue<DateStringValue | null>;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DatesRangeValue<DateStringValue | null>) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nconst isDateRangePickerValue = (value: unknown): value is DatesRangeValue => Array.isArray(value) && value.length === 2;\n\nconst endOfDay = (value: DateStringValue): DateStringValue => (value ? dayjs(value).endOf('day').toISOString() : value);\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarChange = (range: DateStringValue | DatesRangeValue<DateStringValue | null>): void => {\n        // If the current value is [null, null] and a date is selected, set [selectedValue, null]\n        if (isDateRangePickerValue(range) && range[0] && range[1] === null) {\n            calendarInputProps.onChange([dayjs(range[0]).toISOString(), null]);\n            return;\n        }\n        const normalized =\n            isDateRangePickerValue(range) && range[1] ? [dayjs(range[0]).toISOString(), endOfDay(range[1])] : range;\n        calendarInputProps.onChange(normalized);\n    };\n\n    const onCalendarApply = () => {\n        // In case the user only clicked the start date, but not the end date,\n        // assume a single day was meant to be selected.\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = endOfDay(form.values.dates[0]);\n        }\n        onApply(form.values.dates);\n    };\n    return (\n        <>\n            <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n                <EditableDateRangePicker\n                    value={calendarInputProps.value}\n                    {...calendarInputProps}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect\n                            value={calendarInputProps.value}\n                            presets={presets}\n                            {...calendarInputProps}\n                            selectProps={{comboboxProps: {withinPortal: false}}}\n                        />\n                    </>\n                ) : null}\n            </Group>\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    columnsToScroll={1}\n                    type=\"range\"\n                    styles={{day: {textAlign: 'center'}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                    onChange={onCalendarChange}\n                />\n            </Center>\n            <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n                <Button.Tertiary onClick={onCancel}>Cancel</Button.Tertiary>\n                <Button.Primary onClick={onCalendarApply}>Apply</Button.Primary>\n            </Group>\n        </>\n    );\n};\n"],"names":["DateRangePickerInlineCalendar","isDateRangePickerValue","value","Array","isArray","length","endOfDay","dayjs","endOf","toISOString","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","useForm","initialValues","dates","calendarInputProps","getInputProps","onCalendarChange","range","onChange","normalized","onCalendarApply","values","Group","align","gap","grow","px","py","className","DateRangeClasses","picker","EditableDateRangePicker","Space","w","DateRangePickerPresetSelect","selectProps","comboboxProps","withinPortal","Center","DatePicker","numberOfColumns","columnsToScroll","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","Button","Tertiary","onClick","Primary"],"mappings":";;;;+BAiDaA;;;eAAAA;;;;;;;oBAjDsB;qBACuD;oBACpE;8DAEJ;sBACG;2EACQ;2CACoC;uCACG;AAqCpE,IAAMC,yBAAyB,SAACC;WAA6CC,MAAMC,OAAO,CAACF,UAAUA,MAAMG,MAAM,KAAK;;AAEtH,IAAMC,WAAW,SAACJ;WAA6CA,QAAQK,IAAAA,cAAK,EAACL,OAAOM,KAAK,CAAC,OAAOC,WAAW,KAAKP;;AAE1G,IAAMF,gCAAgC;QACzCU,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOC,IAAAA,aAAO,EAAC;QACjBC,eAAe;YACXC,OAAOV;QACX;IACJ;IACA,IAAMW,qBAAqBJ,KAAKK,aAAa,CAAC;IAE9C,IAAMC,mBAAmB,SAACC;QACtB,yFAAyF;QACzF,IAAIvB,uBAAuBuB,UAAUA,KAAK,CAAC,EAAE,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YAChEH,mBAAmBI,QAAQ,CAAC;gBAAClB,IAAAA,cAAK,EAACiB,KAAK,CAAC,EAAE,EAAEf,WAAW;gBAAI;aAAK;YACjE;QACJ;QACA,IAAMiB,aACFzB,uBAAuBuB,UAAUA,KAAK,CAAC,EAAE,GAAG;YAACjB,IAAAA,cAAK,EAACiB,KAAK,CAAC,EAAE,EAAEf,WAAW;YAAIH,SAASkB,KAAK,CAAC,EAAE;SAAE,GAAGA;QACtGH,mBAAmBI,QAAQ,CAACC;IAChC;IAEA,IAAMC,kBAAkB;QACpB,sEAAsE;QACtE,gDAAgD;QAChD,IAAI,CAACV,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE,EAAE;YACvBH,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE,GAAGd,SAASW,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE;QACxD;QACAT,QAAQM,KAAKW,MAAM,CAACR,KAAK;IAC7B;IACA,qBACI;;0BACI,sBAACS,WAAK;gBAACC,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACC,MAAM;;kCAClF,qBAACC,gDAAuB;wBACpBpC,OAAOmB,mBAAmBnB,KAAK;uBAC3BmB;wBACJP,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,qBAAC0B,WAAK;gCAACC,GAAE;;0CACT,qBAACC,wDAA2B;gCACxBvC,OAAOmB,mBAAmBnB,KAAK;gCAC/BW,SAASA;+BACLQ;gCACJqB,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAER,qBAACC,YAAM;gBAACX,IAAG;gBAAKD,IAAG;0BACf,cAAA,qBAACa,iBAAU;oBACPC,iBAAiB;oBACjBC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;mBAClBtC,oBACAK;oBACJI,UAAUF;;;0BAGlB,sBAACM,WAAK;gBAAC0B,SAAQ;gBAAQxB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACoB,IAAI;;kCAC5E,qBAACC,cAAM,CAACC,QAAQ;wBAACC,SAAS/C;kCAAU;;kCACpC,qBAAC6C,cAAM,CAACG,OAAO;wBAACD,SAAShC;kCAAiB;;;;;;AAI1D"}

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

@@ -1,14 +1,13 @@
-import { CalendarBaseProps } from '@mantine/dates';
-import { DateRangePickerValue } from './DateRangePickerInlineCalendar';
+import { CalendarBaseProps, type DateStringValue, type DatesRangeValue } from '@mantine/dates';
 import { DateRangePickerPreset } from './DateRangePickerPresetSelect';
 import { EditableDateRangePickerProps } from './EditableDateRangePicker';
 interface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */
-    defaultValue?: DateRangePickerValue;
+    defaultValue?: DatesRangeValue<DateStringValue | null>;
     /** Value for controlled input */
-    value?: DateRangePickerValue;
+    value?: DatesRangeValue<DateStringValue | null>;
     /** onChange value for controlled input */
-    onChange?(value: DateRangePickerValue): void;
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
     /**
      * The presets to display
      *

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerPopoverCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAa,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,UAAU,mCAAoC,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IAC/G,2CAA2C;IAC3C,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,iCAAiC;IACjC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAEhD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,iBAAiB,EACjB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAED,eAAO,MAAM,8BAA8B,GAAI,uFAQ5C,mCAAmC,4CAuDrC,CAAC"}
+{"version":3,"file":"DateRangePickerPopoverCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAc,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAKzG,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,UAAU,mCAAoC,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IAC/G,2CAA2C;IAC3C,YAAY,CAAC,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IACvD,iCAAiC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAChD,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,iBAAiB,EACjB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAED,eAAO,MAAM,8BAA8B,GAAI,uFAQ5C,mCAAmC,4CA6DrC,CAAC"}

package/dist/cjs/components/date-range-picker/DateRangePickerPopoverCalendar.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "DateRangePickerPopoverCalendar", {
         return DateRangePickerPopoverCalendar;
     }
 });
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _jsxruntime = require("react/jsx-runtime");
@@ -15,6 +16,7 @@ var _core = require("@mantine/core");
 var _dates = require("@mantine/dates");
 var _hooks = require("@mantine/hooks");
 var _react = require("react");
+var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
 var _DateRangePickerPresetSelect = require("./DateRangePickerPresetSelect");
 var _EditableDateRangePicker = require("./EditableDateRangePicker");
 var DateRangePickerPopoverCalendar = function(param) {
@@ -33,6 +35,12 @@ var DateRangePickerPopoverCalendar = function(param) {
         ]
     }), 2), _value = _useUncontrolled[0], handleChange = _useUncontrolled[1];
     var onCalendarChange = function(dates) {
+        if (dates[0] !== null) {
+            dates[0] = (0, _dayjs.default)(dates[0]).toISOString();
+        }
+        if (dates[1] !== null) {
+            dates[1] = (0, _dayjs.default)(dates[1]).toISOString();
+        }
         handleChange === null || handleChange === void 0 ? void 0 : handleChange(dates);
         if (dates[1] !== null) {
             setOpened(false);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DateRangePickerValue;\n    /** Value for controlled input */\n    value?: DateRangePickerValue;\n    /** onChange value for controlled input */\n    onChange?(value: DateRangePickerValue): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerPopoverCalendar = ({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DateRangePickerValue) => {\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Target>\n                    <Group align=\"center\">\n                        <EditableDateRangePicker\n                            value={_value}\n                            onChange={handleChange}\n                            onFocus={() => setOpened(true)}\n                            startProps={startProps}\n                            endProps={endProps}\n                        />\n                        {presets ? (\n                            <>\n                                <Space w=\"sm\" />\n                                <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                            </>\n                        ) : null}\n                    </Group>\n                </Popover.Target>\n                <Popover.Dropdown>\n                    <DatePicker\n                        ref={ref}\n                        type=\"range\"\n                        styles={{day: {textAlign: 'center'}}}\n                        numberOfColumns={2}\n                        columnsToScroll={1}\n                        firstDayOfWeek={0}\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","useState","opened","setOpened","ref","useClickOutside","useUncontrolled","finalValue","_value","handleChange","onCalendarChange","dates","Popover","trapFocus","Target","Group","align","EditableDateRangePicker","onFocus","Space","w","DateRangePickerPresetSelect","Dropdown","DatePicker","type","styles","day","textAlign","numberOfColumns","columnsToScroll","firstDayOfWeek","allowSingleDateInRange"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;oBArCuB;qBACQ;qBACG;qBACxB;2CAG0C;uCACG;AA8B7D,IAAMA,iCAAiC;QAC1CC,gBAAAA,SACAC,cAAAA,OACAC,qBAAAA,cACAC,iBAAAA,UACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAA4BC,+BAAAA,IAAAA,eAAQ,EAAC,YAA9BC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAMG,MAAMC,IAAAA,sBAAe,EAAC;eAAMF,UAAU;;IAE5C,IAA+BG,sCAAAA,IAAAA,sBAAe,EAAuB;QACjEX,OAAAA;QACAC,cAAAA;QACAC,UAAAA;QACAU,YAAY;YAAC;YAAM;SAAK;IAC5B,QALOC,SAAwBF,qBAAhBG,eAAgBH;IAO/B,IAAMI,mBAAmB,SAACC;QACtBF,yBAAAA,mCAAAA,aAAeE;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBR,UAAU;QACd;IACJ;IAEA,qBACI;kBACI,cAAA,sBAACS,aAAO;YAACV,QAAQA;YAAQL,UAAUM;YAAWU,SAAS;;8BACnD,qBAACD,aAAO,CAACE,MAAM;8BACX,cAAA,sBAACC,WAAK;wBAACC,OAAM;;0CACT,qBAACC,gDAAuB;gCACpBtB,OAAOa;gCACPX,UAAUY;gCACVS,SAAS;2CAAMf,UAAU;;gCACzBL,YAAYA;gCACZC,UAAUA;;4BAEbL,wBACG;;kDACI,qBAACyB,WAAK;wCAACC,GAAE;;kDACT,qBAACC,wDAA2B;wCAAC3B,SAASA;wCAASC,OAAOa;wCAAQX,UAAUY;;;iCAE5E;;;;8BAGZ,qBAACG,aAAO,CAACU,QAAQ;8BACb,cAAA,qBAACC,iBAAU;wBACPnB,KAAKA;wBACLoB,MAAK;wBACLC,QAAQ;4BAACC,KAAK;gCAACC,WAAW;4BAAQ;wBAAC;wBACnCC,iBAAiB;wBACjBC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtBpC,OAAOa;wBACPX,UAAUa;uBACNV;;;;;AAM5B"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker, type DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport dayjs from 'dayjs';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DatesRangeValue<DateStringValue | null>;\n    /** Value for controlled input */\n    value?: DatesRangeValue<DateStringValue | null>;\n    /** onChange value for controlled input */\n    onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerPopoverCalendar = ({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue> | null>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DatesRangeValue<DateStringValue | null>) => {\n        if (dates[0] !== null) {\n            dates[0] = dayjs(dates[0]).toISOString();\n        }\n        if (dates[1] !== null) {\n            dates[1] = dayjs(dates[1]).toISOString();\n        }\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Target>\n                    <Group align=\"center\">\n                        <EditableDateRangePicker\n                            value={_value}\n                            onChange={handleChange}\n                            onFocus={() => setOpened(true)}\n                            startProps={startProps}\n                            endProps={endProps}\n                        />\n                        {presets ? (\n                            <>\n                                <Space w=\"sm\" />\n                                <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                            </>\n                        ) : null}\n                    </Group>\n                </Popover.Target>\n                <Popover.Dropdown>\n                    <DatePicker\n                        ref={ref}\n                        type=\"range\"\n                        styles={{day: {textAlign: 'center'}}}\n                        numberOfColumns={2}\n                        columnsToScroll={1}\n                        firstDayOfWeek={0}\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","useState","opened","setOpened","ref","useClickOutside","useUncontrolled","finalValue","_value","handleChange","onCalendarChange","dates","dayjs","toISOString","Popover","trapFocus","Target","Group","align","EditableDateRangePicker","onFocus","Space","w","DateRangePickerPresetSelect","Dropdown","DatePicker","type","styles","day","textAlign","numberOfColumns","columnsToScroll","firstDayOfWeek","allowSingleDateInRange"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;;oBApCuB;qBACoD;qBACzC;qBACxB;8DAEL;2CAC+C;uCACG;AA6B7D,IAAMA,iCAAiC;QAC1CC,gBAAAA,SACAC,cAAAA,OACAC,qBAAAA,cACAC,iBAAAA,UACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAA4BC,+BAAAA,IAAAA,eAAQ,EAAC,YAA9BC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAMG,MAAMC,IAAAA,sBAAe,EAAC;eAAMF,UAAU;;IAE5C,IAA+BG,sCAAAA,IAAAA,sBAAe,EAA0C;QACpFX,OAAAA;QACAC,cAAAA;QACAC,UAAAA;QACAU,YAAY;YAAC;YAAM;SAAK;IAC5B,QALOC,SAAwBF,qBAAhBG,eAAgBH;IAO/B,IAAMI,mBAAmB,SAACC;QACtB,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBA,KAAK,CAAC,EAAE,GAAGC,IAAAA,cAAK,EAACD,KAAK,CAAC,EAAE,EAAEE,WAAW;QAC1C;QACA,IAAIF,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBA,KAAK,CAAC,EAAE,GAAGC,IAAAA,cAAK,EAACD,KAAK,CAAC,EAAE,EAAEE,WAAW;QAC1C;QACAJ,yBAAAA,mCAAAA,aAAeE;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBR,UAAU;QACd;IACJ;IAEA,qBACI;kBACI,cAAA,sBAACW,aAAO;YAACZ,QAAQA;YAAQL,UAAUM;YAAWY,SAAS;;8BACnD,qBAACD,aAAO,CAACE,MAAM;8BACX,cAAA,sBAACC,WAAK;wBAACC,OAAM;;0CACT,qBAACC,gDAAuB;gCACpBxB,OAAOa;gCACPX,UAAUY;gCACVW,SAAS;2CAAMjB,UAAU;;gCACzBL,YAAYA;gCACZC,UAAUA;;4BAEbL,wBACG;;kDACI,qBAAC2B,WAAK;wCAACC,GAAE;;kDACT,qBAACC,wDAA2B;wCAAC7B,SAASA;wCAASC,OAAOa;wCAAQX,UAAUY;;;iCAE5E;;;;8BAGZ,qBAACK,aAAO,CAACU,QAAQ;8BACb,cAAA,qBAACC,iBAAU;wBACPrB,KAAKA;wBACLsB,MAAK;wBACLC,QAAQ;4BAACC,KAAK;gCAACC,WAAW;4BAAQ;wBAAC;wBACnCC,iBAAiB;wBACjBC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtBtC,OAAOa;wBACPX,UAAUa;uBACNV;;;;;AAM5B"}

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

@@ -1,13 +1,13 @@
 import { SelectProps } from '@mantine/core';
-import { DateRangePickerValue } from './DateRangePickerInlineCalendar';
+import type { DatesRangeValue, DateStringValue } from '@mantine/dates';
 export interface DateRangePickerPreset {
     label: string;
-    range: DateRangePickerValue;
+    range: DatesRangeValue<DateStringValue>;
 }
 interface DateRangePickerPresetsSelectProps {
     presets: Record<string, DateRangePickerPreset>;
-    value: DateRangePickerValue;
-    onChange?(value: DateRangePickerValue): void;
+    value: DatesRangeValue<DateStringValue>;
+    onChange?(value: DatesRangeValue): void;
     selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;
 }
 export declare const DateRangePickerPresetSelect: ({ presets, value, onChange, selectProps, }: DateRangePickerPresetsSelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAC,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,oBAAoB,CAAC;CAC/B;AAED,UAAU,iCAAiC;IACvC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,iCAAiC,4CAwCnC,CAAC"}
+{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAIrE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED,UAAU,iCAAiC;IACvC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACxC,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,iCAAiC,4CAyCnC,CAAC"}

package/dist/cjs/components/date-range-picker/DateRangePickerPresetSelect.js

@@ -29,7 +29,7 @@ var DateRangePickerPresetSelect = function(param) {
         if (value[0] !== null && value[1] !== null && (0, _dayjs.default)(value[0]).unix() !== (0, _dayjs.default)(value[1]).unix()) {
             var selected = Object.entries(presets).find(function(param) {
                 var _param = _sliced_to_array._(param, 2), range = _param[1].range;
-                return (0, _dayjs.default)(range[0]).isSame(value[0]) && (0, _dayjs.default)(value[1]).isSame(value[1]);
+                return (0, _dayjs.default)(range[0]).isSame((0, _dayjs.default)(value[0]).toISOString()) && (0, _dayjs.default)(range[1]).isSame((0, _dayjs.default)(value[1]).toISOString());
             });
             if (selected) {
                 return selected[0];

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {ComboboxItem, Select, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = ({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps) => {\n    const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([, {range}]) => dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]),\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n            maxDropdownHeight={240}\n        />\n    );\n};\n"],"names":["DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","dayjs","unix","selected","find","range","isSame","useState","selectedPreset","setSelectedPreset","useEffect","newPreset","onChangePreset","presetId","Select","placeholder","data","maxDropdownHeight"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;;oBAjBmC;8DAC9B;qBACgB;AAe3B,IAAMA,8BAA8B;QACvCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA6BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;mDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEtG,IAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQU,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,OAAOD,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,IAAI;YAC7F,IAAMC,WAAWR,OAAOC,OAAO,CAACN,SAASc,IAAI,CACzC;2DAAI,AAACC,kBAAAA;uBAAYJ,IAAAA,cAAK,EAACI,KAAK,CAAC,EAAE,EAAEC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKU,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEe,MAAM,CAACf,KAAK,CAAC,EAAE;;YAExF,IAAIY,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,IAA4CI,+BAAAA,IAAAA,eAAQ,EAAgBP,0BAA7DQ,iBAAqCD,cAArBE,oBAAqBF;IAE5CG,IAAAA,gBAAS,EAAC;QACN,IAAMC,YAAYX;QAClB,IAAIW,cAAcH,gBAAgB;YAC9BC,kBAAkBE;QACtB;IACJ,GAAG;QAACpB;KAAM;IAEV,IAAMqB,iBAAiB,SAACC;QACpB,IAAMR,QAAQf,OAAO,CAACuB,SAAS,CAACR,KAAK;QACrCb,qBAAAA,+BAAAA,SAAWa;IACf;IAEA,qBACI,qBAACS,YAAM;QACHf,OAAM;QACNgB,aAAY;OACRtB;QACJF,OAAOiB;QACPhB,UAAUoB;QACVI,MAAMtB;QACNuB,mBAAmB;;AAG/B"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {ComboboxItem, Select, SelectProps} from '@mantine/core';\nimport type {DatesRangeValue, DateStringValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DatesRangeValue<DateStringValue>;\n}\n\ninterface DateRangePickerPresetsSelectProps {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DatesRangeValue<DateStringValue>;\n    onChange?(value: DatesRangeValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = ({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps) => {\n    const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([, {range}]) =>\n                    dayjs(range[0]).isSame(dayjs(value[0]).toISOString()) &&\n                    dayjs(range[1]).isSame(dayjs(value[1]).toISOString()),\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n            maxDropdownHeight={240}\n        />\n    );\n};\n"],"names":["DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","dayjs","unix","selected","find","range","isSame","toISOString","useState","selectedPreset","setSelectedPreset","useEffect","newPreset","onChangePreset","presetId","Select","placeholder","data","maxDropdownHeight"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;;oBAjBmC;8DAE9B;qBACgB;AAc3B,IAAMA,8BAA8B;QACvCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA6BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;mDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IACtG,IAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQU,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,OAAOD,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,IAAI;YAC7F,IAAMC,WAAWR,OAAOC,OAAO,CAACN,SAASc,IAAI,CACzC;2DAAI,AAACC,kBAAAA;uBACDJ,IAAAA,cAAK,EAACI,KAAK,CAAC,EAAE,EAAEC,MAAM,CAACL,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEgB,WAAW,OAClDN,IAAAA,cAAK,EAACI,KAAK,CAAC,EAAE,EAAEC,MAAM,CAACL,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEgB,WAAW;;YAE1D,IAAIJ,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,IAA4CK,+BAAAA,IAAAA,eAAQ,EAAgBR,0BAA7DS,iBAAqCD,cAArBE,oBAAqBF;IAE5CG,IAAAA,gBAAS,EAAC;QACN,IAAMC,YAAYZ;QAClB,IAAIY,cAAcH,gBAAgB;YAC9BC,kBAAkBE;QACtB;IACJ,GAAG;QAACrB;KAAM;IAEV,IAAMsB,iBAAiB,SAACC;QACpB,IAAMT,QAAQf,OAAO,CAACwB,SAAS,CAACT,KAAK;QACrCb,qBAAAA,+BAAAA,SAAWa;IACf;IAEA,qBACI,qBAACU,YAAM;QACHhB,OAAM;QACNiB,aAAY;OACRvB;QACJF,OAAOkB;QACPjB,UAAUqB;QACVI,MAAMvB;QACNwB,mBAAmB;;AAG/B"}

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

@@ -1,8 +1,7 @@
-import { DatePickerProps } from '@mantine/dates';
-import { DateRangePickerValue } from './DateRangePickerInlineCalendar';
+import { DatePickerProps, DateStringValue, type DatesRangeValue } from '@mantine/dates';
 export interface EditableDateRangePickerProps {
-    value: DateRangePickerValue;
-    onChange?(value: DateRangePickerValue): void;
+    value: DatesRangeValue<DateStringValue | null>;
+    onChange?(value: DatesRangeValue<DateStringValue> | null): void;
     onFocus?: () => void;
     /**
      * Props for the start input