@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/DatePicker/primitives/BirthdayPickerSegments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/BirthdayPickerSegments.js","sources":["../../../src/DatePicker/primitives/BirthdayPickerSegments.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { type BirthdayParts, type BirthdayStep, pad } from \"../utils/birthdayHelpers.js\";\n\ninterface BirthdayPickerSegmentsProps {\n    parts: BirthdayParts;\n    activeStep?: BirthdayStep;\n    onStepClick?: (step: BirthdayStep) => void;\n}\n\nconst BirthdayPickerSegments = ({\n    parts,\n    activeStep,\n    onStepClick\n}: BirthdayPickerSegmentsProps) => {\n    const segments: Array<{ step: BirthdayStep; text: string; filled: boolean }> = [\n        { step: \"day\", text: parts.day ? pad(parts.day) : \"DD\", filled: !!parts.day },\n        { step: \"month\", text: parts.month ? pad(parts.month) : \"MM\", filled: !!parts.month },\n        { step: \"year\", text: parts.year ? String(parts.year) : \"YYYY\", filled: !!parts.year }\n    ];\n\n    return (\n        <span className=\"flex items-center gap-xs tabular-nums whitespace-nowrap\">\n            {segments.map((segment, index) => {\n                // A filled part takes the input's value colour; an empty one reads as its placeholder.\n                const className = cn(\n                    \"transition-colors\",\n                    !segment.filled && \"text-neutral-dimmed\",\n                    activeStep === segment.step && \"text-accent-primary\"\n                );\n                return (\n                    <React.Fragment key={segment.step}>\n                        {index > 0 ? <span className=\"text-neutral-dimmed\">/</span> : null}\n                        {onStepClick ? (\n                            <button\n                                type=\"button\"\n                                tabIndex={-1}\n                                data-step={segment.step}\n                                className={cn(className, \"cursor-pointer outline-none\")}\n                                onClick={() => onStepClick(segment.step)}\n                            >\n                                {segment.text}\n                            </button>\n                        ) : (\n                            <span className={className}>{segment.text}</span>\n                        )}\n                    </React.Fragment>\n                );\n            })}\n        </span>\n    );\n};\n\nexport { BirthdayPickerSegments };\n"],"names":["BirthdayPickerSegments","parts","activeStep","onStepClick","segments","pad","String","segment","index","className","cn","React"],"mappings":";;;AAUA,MAAMA,yBAAyB,CAAC,EAC5BC,KAAK,EACLC,UAAU,EACVC,WAAW,EACe;IAC1B,MAAMC,WAAyE;QAC3E;YAAE,MAAM;YAAO,MAAMH,MAAM,GAAG,GAAGI,IAAIJ,MAAM,GAAG,IAAI;YAAM,QAAQ,CAAC,CAACA,MAAM,GAAG;QAAC;QAC5E;YAAE,MAAM;YAAS,MAAMA,MAAM,KAAK,GAAGI,IAAIJ,MAAM,KAAK,IAAI;YAAM,QAAQ,CAAC,CAACA,MAAM,KAAK;QAAC;QACpF;YAAE,MAAM;YAAQ,MAAMA,MAAM,IAAI,GAAGK,OAAOL,MAAM,IAAI,IAAI;YAAQ,QAAQ,CAAC,CAACA,MAAM,IAAI;QAAC;KACxF;IAED,OAAO,WAAP,GACI,oBAAC;QAAK,WAAU;OACXG,SAAS,GAAG,CAAC,CAACG,SAASC;QAEpB,MAAMC,YAAYC,GACd,qBACA,CAACH,QAAQ,MAAM,IAAI,uBACnBL,eAAeK,QAAQ,IAAI,IAAI;QAEnC,OAAO,WAAP,GACI,oBAACI,MAAAA,QAAc;YAAC,KAAKJ,QAAQ,IAAI;WAC5BC,QAAQ,IAAI,WAAJ,GAAI,oBAAC;YAAK,WAAU;WAAsB,OAAW,MAC7DL,cAAc,WAAdA,GACG,oBAAC;YACG,MAAK;YACL,UAAU;YACV,aAAWI,QAAQ,IAAI;YACvB,WAAWG,GAAGD,WAAW;YACzB,SAAS,IAAMN,YAAYI,QAAQ,IAAI;WAEtCA,QAAQ,IAAI,kBAGjB,oBAAC;YAAK,WAAWE;WAAYF,QAAQ,IAAI;IAIzD;AAGZ"}

package/DatePicker/primitives/DateOnlyPicker.js

@@ -3,7 +3,7 @@ import { format } from "date-fns";
 import { Button } from "../../Button/index.js";
 import { Calendar } from "../../Calendar/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
-import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { formatDateForDisplay, parseDateValue } from "../utils/dateHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 const DateOnlyPicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, presets, displayFormat })=>{
     const [open, setOpen] = useState(false);
@@ -16,7 +16,7 @@ const DateOnlyPicker = ({ value, onChange, placeholder, disabled, size, variant,
         handleOpenChange(false);
     };
     const displayValue = formatDateForDisplay(value, "date", displayFormat);
-    const selectedDate = value ? new Date(value) : void 0;
+    const selectedDate = value ? parseDateValue(value) : void 0;
     return /*#__PURE__*/ react.createElement("div", {
         className: className
     }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {

package/DatePicker/primitives/DateOnlyPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/DateOnlyPicker.js","sources":["../../../src/DatePicker/primitives/DateOnlyPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Button } from \"~/Button/index.js\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateOnlyPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst DateOnlyPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    presets,\n    displayFormat\n}: DateOnlyPickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const handlePresetClick = (computeDate: () => Date) => {\n        if (onChange) {\n            onChange(format(computeDate(), \"yyyy-MM-dd\"));\n        }\n        handleOpenChange(false);\n    };\n\n    const displayValue = formatDateForDisplay(value, \"date\", displayFormat);\n    const selectedDate = value ? new Date(value) : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className={presets?.length ? \"flex\" : undefined}>\n                        <Calendar\n                            mode=\"single\"\n                            selected={selectedDate}\n                            onSelect={date => {\n                                if (onChange) {\n                                    onChange(date ? format(date, \"yyyy-MM-dd\") : undefined);\n                                }\n                                handleOpenChange(false);\n                            }}\n                            weekStartsOn={weekStartsOn}\n                        />\n                        {presets && presets.length > 0 && (\n                            <div className=\"flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]\">\n                                {presets.map(preset => {\n                                    const presetDate = format(preset.value(), \"yyyy-MM-dd\");\n                                    return (\n                                        <Button\n                                            key={preset.label}\n                                            variant={value === presetDate ? \"primary\" : \"ghost\"}\n                                            size=\"sm\"\n                                            text={preset.label}\n                                            onClick={() => handlePresetClick(preset.value)}\n                                        />\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateOnlyPicker };\n"],"names":["DateOnlyPicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","presets","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","handlePresetClick","computeDate","format","displayValue","formatDateForDisplay","selectedDate","Date","undefined","PopoverPrimitive","DatePickerTrigger","Calendar","date","preset","presetDate","Button"],"mappings":";;;;;;;AASA,MAAMA,iBAAiB,CAAC,EACpBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,aAAa,EACK;IAClB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIR,cACAA,aAAaQ;IAErB;IAEA,MAAMC,oBAAoB,CAACC;QACvB,IAAIjB,UACAA,SAASkB,OAAOD,eAAe;QAEnCH,iBAAiB;IACrB;IAEA,MAAMK,eAAeC,qBAAqBrB,OAAO,QAAQW;IACzD,MAAMW,eAAetB,QAAQ,IAAIuB,KAAKvB,SAASwB;IAE/C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWf;qBACZ,oBAACgB,kBAAgBA;QAAC,MAAMb;QAAM,cAAcG;qBACxC,oBAACW,mBAAiBA;QACd,cAAcN;QACd,aAAalB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACmB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAWf,SAAS,SAAS,SAASc;qBACvC,oBAACG,UAAQA;QACL,MAAK;QACL,UAAUL;QACV,UAAUM,CAAAA;YACN,IAAI3B,UACAA,SAAS2B,OAAOT,OAAOS,MAAM,gBAAgBJ;YAEjDT,iBAAiB;QACrB;QACA,cAAcR;QAEjBG,WAAWA,QAAQ,MAAM,GAAG,KAAK,WAAL,GACzB,oBAAC;QAAI,WAAU;OACVA,QAAQ,GAAG,CAACmB,CAAAA;QACT,MAAMC,aAAaX,OAAOU,OAAO,KAAK,IAAI;QAC1C,OAAO,WAAP,GACI,oBAACE,QAAMA;YACH,KAAKF,OAAO,KAAK;YACjB,SAAS7B,UAAU8B,aAAa,YAAY;YAC5C,MAAK;YACL,MAAMD,OAAO,KAAK;YAClB,SAAS,IAAMZ,kBAAkBY,OAAO,KAAK;;IAGzD;AAQhC"}
+{"version":3,"file":"DatePicker/primitives/DateOnlyPicker.js","sources":["../../../src/DatePicker/primitives/DateOnlyPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Button } from \"~/Button/index.js\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateOnlyPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, parseDateValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst DateOnlyPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    presets,\n    displayFormat\n}: DateOnlyPickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const handlePresetClick = (computeDate: () => Date) => {\n        if (onChange) {\n            onChange(format(computeDate(), \"yyyy-MM-dd\"));\n        }\n        handleOpenChange(false);\n    };\n\n    const displayValue = formatDateForDisplay(value, \"date\", displayFormat);\n    const selectedDate = value ? parseDateValue(value) : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className={presets?.length ? \"flex\" : undefined}>\n                        <Calendar\n                            mode=\"single\"\n                            selected={selectedDate}\n                            onSelect={date => {\n                                if (onChange) {\n                                    onChange(date ? format(date, \"yyyy-MM-dd\") : undefined);\n                                }\n                                handleOpenChange(false);\n                            }}\n                            weekStartsOn={weekStartsOn}\n                        />\n                        {presets && presets.length > 0 && (\n                            <div className=\"flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]\">\n                                {presets.map(preset => {\n                                    const presetDate = format(preset.value(), \"yyyy-MM-dd\");\n                                    return (\n                                        <Button\n                                            key={preset.label}\n                                            variant={value === presetDate ? \"primary\" : \"ghost\"}\n                                            size=\"sm\"\n                                            text={preset.label}\n                                            onClick={() => handlePresetClick(preset.value)}\n                                        />\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateOnlyPicker };\n"],"names":["DateOnlyPicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","presets","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","handlePresetClick","computeDate","format","displayValue","formatDateForDisplay","selectedDate","parseDateValue","undefined","PopoverPrimitive","DatePickerTrigger","Calendar","date","preset","presetDate","Button"],"mappings":";;;;;;;AASA,MAAMA,iBAAiB,CAAC,EACpBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,aAAa,EACK;IAClB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIR,cACAA,aAAaQ;IAErB;IAEA,MAAMC,oBAAoB,CAACC;QACvB,IAAIjB,UACAA,SAASkB,OAAOD,eAAe;QAEnCH,iBAAiB;IACrB;IAEA,MAAMK,eAAeC,qBAAqBrB,OAAO,QAAQW;IACzD,MAAMW,eAAetB,QAAQuB,eAAevB,SAASwB;IAErD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWf;qBACZ,oBAACgB,kBAAgBA;QAAC,MAAMb;QAAM,cAAcG;qBACxC,oBAACW,mBAAiBA;QACd,cAAcN;QACd,aAAalB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACmB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAWf,SAAS,SAAS,SAASc;qBACvC,oBAACG,UAAQA;QACL,MAAK;QACL,UAAUL;QACV,UAAUM,CAAAA;YACN,IAAI3B,UACAA,SAAS2B,OAAOT,OAAOS,MAAM,gBAAgBJ;YAEjDT,iBAAiB;QACrB;QACA,cAAcR;QAEjBG,WAAWA,QAAQ,MAAM,GAAG,KAAK,WAAL,GACzB,oBAAC;QAAI,WAAU;OACVA,QAAQ,GAAG,CAACmB,CAAAA;QACT,MAAMC,aAAaX,OAAOU,OAAO,KAAK,IAAI;QAC1C,OAAO,WAAP,GACI,oBAACE,QAAMA;YACH,KAAKF,OAAO,KAAK;YACjB,SAAS7B,UAAU8B,aAAa,YAAY;YAC5C,MAAK;YACL,MAAMD,OAAO,KAAK;YAClB,SAAS,IAAMZ,kBAAkBY,OAAO,KAAK;;IAGzD;AAQhC"}

package/DatePicker/primitives/DatePickerPrimitive.d.ts

@@ -1,20 +1,21 @@
 import React from "react";
 import type { DatePickerPrimitiveProps } from "../utils/types.js";
-declare const DatePickerPrimitive: ((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
-    original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+declare const DecoratableDatePickerPrimitive: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+declare const DatePickerPrimitive: typeof DecoratableDatePickerPrimitive & {
+    original: typeof DecoratableDatePickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
-        original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableDatePickerPrimitive & {
+        original: typeof DecoratableDatePickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
-        original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableDatePickerPrimitive & {
+        original: typeof DecoratableDatePickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/DatePicker/primitives/DatePickerPrimitive.js

@@ -1,6 +1,7 @@
 import react from "react";
 import { makeDecoratable } from "../../utils.js";
 import { DateOnlyPicker } from "./DateOnlyPicker.js";
+import { BirthdayPicker } from "./BirthdayPicker.js";
 import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
 import { DateTimePicker } from "./DateTimePicker.js";
 import { MonthPicker } from "./MonthPicker.js";
@@ -14,6 +15,8 @@ const DecoratableDatePickerPrimitive = (props)=>{
     switch(props.type){
         case "date":
             return /*#__PURE__*/ react.createElement(DateOnlyPicker, props);
+        case "birthday":
+            return /*#__PURE__*/ react.createElement(BirthdayPicker, props);
         case "time":
             return /*#__PURE__*/ react.createElement(TimeOnlyPicker, props);
         case "dateTimeLocal":

package/DatePicker/primitives/DatePickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/DatePickerPrimitive.js","sources":["../../../src/DatePicker/primitives/DatePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"../utils/types.js\";\nimport { DateOnlyPicker } from \"./DateOnlyPicker.js\";\nimport { TimeOnlyPicker } from \"./TimeOnlyPicker.js\";\nimport { DateTimePicker } from \"./DateTimePicker.js\";\nimport { MonthPicker } from \"./MonthPicker.js\";\nimport { WeekPicker } from \"./WeekPicker.js\";\nimport { YearPicker } from \"./YearPicker.js\";\nimport { DateRangePicker } from \"./DateRangePicker.js\";\nimport { MultipleDatesPicker } from \"./MultipleDatesPicker.js\";\nimport { MultipleMonthsPicker } from \"./MultipleMonthsPicker.js\";\nimport { MultipleYearsPicker } from \"./MultipleYearsPicker.js\";\n\nconst DecoratableDatePickerPrimitive = (props: DatePickerPrimitiveProps) => {\n    switch (props.type) {\n        case \"date\":\n            return <DateOnlyPicker {...props} />;\n        case \"time\":\n            return <TimeOnlyPicker {...props} />;\n        case \"dateTimeLocal\":\n            return <DateTimePicker {...props} withTimezone={false} />;\n        case \"dateTimeTz\":\n            return <DateTimePicker {...props} withTimezone={true} />;\n        case \"month\":\n            return <MonthPicker {...props} />;\n        case \"week\":\n            return <WeekPicker {...props} />;\n        case \"year\":\n            return <YearPicker {...props} />;\n        case \"dateRange\":\n            return <DateRangePicker {...props} />;\n        case \"multipleDates\":\n            return <MultipleDatesPicker {...props} />;\n        case \"multipleMonths\":\n            return <MultipleMonthsPicker {...props} />;\n        case \"multipleYears\":\n            return <MultipleYearsPicker {...props} />;\n    }\n};\n\nconst DatePickerPrimitive = makeDecoratable(\"DatePickerPrimitive\", DecoratableDatePickerPrimitive);\n\nexport { DatePickerPrimitive, type DatePickerPrimitiveProps };\n"],"names":["DecoratableDatePickerPrimitive","props","DateOnlyPicker","TimeOnlyPicker","DateTimePicker","MonthPicker","WeekPicker","YearPicker","DateRangePicker","MultipleDatesPicker","MultipleMonthsPicker","MultipleYearsPicker","DatePickerPrimitive","makeDecoratable"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,iCAAiC,CAACC;IACpC,OAAQA,MAAM,IAAI;QACd,KAAK;YACD,OAAO,WAAP,GAAO,oBAACC,gBAAmBD;QAC/B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACE,gBAAmBF;QAC/B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACG,gBAAcA;gBAAE,GAAGH,KAAK;gBAAE,cAAc;;QACpD,KAAK;YACD,OAAO,WAAP,GAAO,oBAACG,gBAAcA;gBAAE,GAAGH,KAAK;gBAAE,cAAc;;QACpD,KAAK;YACD,OAAO,WAAP,GAAO,oBAACI,aAAgBJ;QAC5B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACK,YAAeL;QAC3B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACM,YAAeN;QAC3B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACO,iBAAoBP;QAChC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACQ,qBAAwBR;QACpC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACS,sBAAyBT;QACrC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACU,qBAAwBV;IACxC;AACJ;AAEA,MAAMW,sBAAsBC,gBAAgB,uBAAuBb"}
+{"version":3,"file":"DatePicker/primitives/DatePickerPrimitive.js","sources":["../../../src/DatePicker/primitives/DatePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"../utils/types.js\";\nimport { DateOnlyPicker } from \"./DateOnlyPicker.js\";\nimport { BirthdayPicker } from \"./BirthdayPicker.js\";\nimport { TimeOnlyPicker } from \"./TimeOnlyPicker.js\";\nimport { DateTimePicker } from \"./DateTimePicker.js\";\nimport { MonthPicker } from \"./MonthPicker.js\";\nimport { WeekPicker } from \"./WeekPicker.js\";\nimport { YearPicker } from \"./YearPicker.js\";\nimport { DateRangePicker } from \"./DateRangePicker.js\";\nimport { MultipleDatesPicker } from \"./MultipleDatesPicker.js\";\nimport { MultipleMonthsPicker } from \"./MultipleMonthsPicker.js\";\nimport { MultipleYearsPicker } from \"./MultipleYearsPicker.js\";\n\nconst DecoratableDatePickerPrimitive = (props: DatePickerPrimitiveProps) => {\n    switch (props.type) {\n        case \"date\":\n            return <DateOnlyPicker {...props} />;\n        case \"birthday\":\n            return <BirthdayPicker {...props} />;\n        case \"time\":\n            return <TimeOnlyPicker {...props} />;\n        case \"dateTimeLocal\":\n            return <DateTimePicker {...props} withTimezone={false} />;\n        case \"dateTimeTz\":\n            return <DateTimePicker {...props} withTimezone={true} />;\n        case \"month\":\n            return <MonthPicker {...props} />;\n        case \"week\":\n            return <WeekPicker {...props} />;\n        case \"year\":\n            return <YearPicker {...props} />;\n        case \"dateRange\":\n            return <DateRangePicker {...props} />;\n        case \"multipleDates\":\n            return <MultipleDatesPicker {...props} />;\n        case \"multipleMonths\":\n            return <MultipleMonthsPicker {...props} />;\n        case \"multipleYears\":\n            return <MultipleYearsPicker {...props} />;\n    }\n};\n\nconst DatePickerPrimitive = makeDecoratable(\"DatePickerPrimitive\", DecoratableDatePickerPrimitive);\n\nexport { DatePickerPrimitive, type DatePickerPrimitiveProps };\n"],"names":["DecoratableDatePickerPrimitive","props","DateOnlyPicker","BirthdayPicker","TimeOnlyPicker","DateTimePicker","MonthPicker","WeekPicker","YearPicker","DateRangePicker","MultipleDatesPicker","MultipleMonthsPicker","MultipleYearsPicker","DatePickerPrimitive","makeDecoratable"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,iCAAiC,CAACC;IACpC,OAAQA,MAAM,IAAI;QACd,KAAK;YACD,OAAO,WAAP,GAAO,oBAACC,gBAAmBD;QAC/B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACE,gBAAmBF;QAC/B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACG,gBAAmBH;QAC/B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACI,gBAAcA;gBAAE,GAAGJ,KAAK;gBAAE,cAAc;;QACpD,KAAK;YACD,OAAO,WAAP,GAAO,oBAACI,gBAAcA;gBAAE,GAAGJ,KAAK;gBAAE,cAAc;;QACpD,KAAK;YACD,OAAO,WAAP,GAAO,oBAACK,aAAgBL;QAC5B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACM,YAAeN;QAC3B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACO,YAAeP;QAC3B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACQ,iBAAoBR;QAChC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACS,qBAAwBT;QACpC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACU,sBAAyBV;QACrC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACW,qBAAwBX;IACxC;AACJ;AAEA,MAAMY,sBAAsBC,gBAAgB,uBAAuBd"}

package/DatePicker/primitives/DateRangePicker.js

@@ -2,7 +2,7 @@ import react, { useState } from "react";
 import { format } from "date-fns";
 import { Calendar } from "../../Calendar/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
-import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { formatDateForDisplay, parseDateValue } from "../utils/dateHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 const toDateStr = (d)=>format(d, "yyyy-MM-dd");
 const DateRangePicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, displayFormat })=>{
@@ -19,8 +19,8 @@ const DateRangePicker = ({ value, onChange, placeholder, disabled, size, variant
         }) : onChange(void 0);
     };
     const selected = value?.from ? {
-        from: new Date(value.from),
-        to: value.to ? new Date(value.to) : void 0
+        from: parseDateValue(value.from),
+        to: value.to ? parseDateValue(value.to) : void 0
     } : void 0;
     return /*#__PURE__*/ react.createElement("div", {
         className: className

package/DatePicker/primitives/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/DateRangePicker.js","sources":["../../../src/DatePicker/primitives/DateRangePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateRangePickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst DateRangePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    displayFormat\n}: DateRangePickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"dateRange\", displayFormat);\n\n    const handleRangeSelect = (range: DateRange | undefined) => {\n        if (onChange) {\n            if (range?.from) {\n                onChange({\n                    from: toDateStr(range.from),\n                    to: range.to ? toDateStr(range.to) : undefined\n                });\n            } else {\n                onChange(undefined);\n            }\n        }\n    };\n\n    const selected: DateRange | undefined = value?.from\n        ? { from: new Date(value.from), to: value.to ? new Date(value.to) : undefined }\n        : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date range\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"range\"\n                        selected={selected}\n                        onSelect={handleRangeSelect}\n                        numberOfMonths={2}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateRangePicker };\n"],"names":["toDateStr","d","format","DateRangePicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleRangeSelect","range","undefined","selected","Date","PopoverPrimitive","DatePickerTrigger","Calendar"],"mappings":";;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,kBAAkB,CAAC,EACrBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,aAAa,EACM;IACnB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBjB,OAAO,aAAaU;IAE9D,MAAMQ,oBAAoB,CAACC;QACvB,IAAIlB,UACIkB,OAAO,OACPlB,SAAS;YACL,MAAML,UAAUuB,MAAM,IAAI;YAC1B,IAAIA,MAAM,EAAE,GAAGvB,UAAUuB,MAAM,EAAE,IAAIC;QACzC,KAEAnB,SAASmB;IAGrB;IAEA,MAAMC,WAAkCrB,OAAO,OACzC;QAAE,MAAM,IAAIsB,KAAKtB,MAAM,IAAI;QAAG,IAAIA,MAAM,EAAE,GAAG,IAAIsB,KAAKtB,MAAM,EAAE,IAAIoB;IAAU,IAC5EA;IAEN,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWX;qBACZ,oBAACc,kBAAgBA;QAAC,MAAMZ;QAAM,cAAcG;qBACxC,oBAACU,mBAAiBA;QACd,cAAcR;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACiB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUJ;QACV,UAAUH;QACV,gBAAgB;QAChB,cAAcX;;AAMtC"}
+{"version":3,"file":"DatePicker/primitives/DateRangePicker.js","sources":["../../../src/DatePicker/primitives/DateRangePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateRangePickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, parseDateValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst DateRangePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    displayFormat\n}: DateRangePickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"dateRange\", displayFormat);\n\n    const handleRangeSelect = (range: DateRange | undefined) => {\n        if (onChange) {\n            if (range?.from) {\n                onChange({\n                    from: toDateStr(range.from),\n                    to: range.to ? toDateStr(range.to) : undefined\n                });\n            } else {\n                onChange(undefined);\n            }\n        }\n    };\n\n    const selected: DateRange | undefined = value?.from\n        ? { from: parseDateValue(value.from), to: value.to ? parseDateValue(value.to) : undefined }\n        : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date range\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"range\"\n                        selected={selected}\n                        onSelect={handleRangeSelect}\n                        numberOfMonths={2}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateRangePicker };\n"],"names":["toDateStr","d","format","DateRangePicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleRangeSelect","range","undefined","selected","parseDateValue","PopoverPrimitive","DatePickerTrigger","Calendar"],"mappings":";;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,kBAAkB,CAAC,EACrBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,aAAa,EACM;IACnB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBjB,OAAO,aAAaU;IAE9D,MAAMQ,oBAAoB,CAACC;QACvB,IAAIlB,UACIkB,OAAO,OACPlB,SAAS;YACL,MAAML,UAAUuB,MAAM,IAAI;YAC1B,IAAIA,MAAM,EAAE,GAAGvB,UAAUuB,MAAM,EAAE,IAAIC;QACzC,KAEAnB,SAASmB;IAGrB;IAEA,MAAMC,WAAkCrB,OAAO,OACzC;QAAE,MAAMsB,eAAetB,MAAM,IAAI;QAAG,IAAIA,MAAM,EAAE,GAAGsB,eAAetB,MAAM,EAAE,IAAIoB;IAAU,IACxFA;IAEN,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWX;qBACZ,oBAACc,kBAAgBA;QAAC,MAAMZ;QAAM,cAAcG;qBACxC,oBAACU,mBAAiBA;QACd,cAAcR;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACiB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUJ;QACV,UAAUH;QACV,gBAAgB;QAChB,cAAcX;;AAMtC"}

package/DatePicker/primitives/DateTimePicker.d.ts

@@ -3,5 +3,5 @@ import type { DateTimeLocalPickerProps, DateTimeTzPickerProps } from "../utils/t
 type DateTimePickerInternalProps = (DateTimeLocalPickerProps | DateTimeTzPickerProps) & {
     withTimezone: boolean;
 };
-declare const DateTimePicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat }: DateTimePickerInternalProps) => React.JSX.Element;
+declare const DateTimePicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat, minDate, maxDate }: DateTimePickerInternalProps) => React.JSX.Element;
 export { DateTimePicker };

package/DatePicker/primitives/DateTimePicker.js

@@ -1,53 +1,49 @@
 import react, { useState } from "react";
-import { format } from "date-fns";
 import { UTC_TIMEZONES } from "@webiny/utils";
 import { Calendar } from "../../Calendar/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
 import { SelectPrimitive } from "../../Select/index.js";
 import { extractTimezone, formatDateForDisplay, formatTimeValue, getLocalTimezone, parseTimeValue, toIsoWithTz } from "../utils/dateHelpers.js";
+import { parseToDate, utcToTimezoneDate } from "../utils/timezoneHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 import { TimePicker } from "./components/TimePicker.js";
 const timezoneOptions = UTC_TIMEZONES.map((tz)=>({
         value: tz.value,
         label: tz.label
     }));
-function parseToDate(value) {
-    if (!value) return;
-    const d = new Date(value);
-    if (Number.isNaN(d.getTime())) return;
-    return d;
-}
-const DateTimePicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat })=>{
+const DateTimePicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat, minDate, maxDate })=>{
     const [open, setOpen] = useState(false);
     const existingTz = withTimezone && value ? extractTimezone(value) : void 0;
-    const [timezone, setTimezone] = useState(existingTz || getLocalTimezone());
+    const [selectedTimezone, setSelectedTimezone] = useState(getLocalTimezone());
+    const timezone = existingTz || selectedTimezone;
     const handleOpenChange = (isOpen)=>{
         setOpen(isOpen);
         if (onOpenChange) onOpenChange(isOpen);
     };
     const currentDate = parseToDate(value);
-    const displayValue = withTimezone ? formatDateForDisplay(value, "dateTimeTz", displayFormat) : formatDateForDisplay(value, "dateTimeLocal", displayFormat);
-    const timeValue = currentDate ? formatTimeValue(currentDate) : "";
+    const displayDate = withTimezone && currentDate ? utcToTimezoneDate(currentDate, timezone) : currentDate;
+    const displayValue = withTimezone ? displayDate ? formatDateForDisplay(toIsoWithTz(displayDate, timezone), "dateTimeTz", displayFormat) : void 0 : formatDateForDisplay(value, "dateTimeLocal", displayFormat);
+    const timeValue = displayDate ? formatTimeValue(displayDate) : "";
     const emitChange = (date, tz)=>{
         if (!onChange) return;
-        withTimezone ? onChange(toIsoWithTz(date, tz || timezone)) : onChange(format(date, "yyyy-MM-dd'T'HH:mm:ss"));
+        withTimezone ? onChange(toIsoWithTz(date, tz || timezone)) : onChange(date.toISOString());
     };
     const handleDateSelect = (date)=>{
         if (!date) return;
-        if (currentDate) date.setHours(currentDate.getHours(), currentDate.getMinutes());
+        if (displayDate) date.setHours(displayDate.getHours(), displayDate.getMinutes());
         emitChange(date);
     };
     const handleTimeChange = (time)=>{
         if (!time) return;
         const parsed = parseTimeValue(time);
         if (!parsed) return;
-        const base = currentDate ? new Date(currentDate) : new Date();
+        const base = displayDate ? new Date(displayDate) : new Date();
         base.setHours(parsed.hours, parsed.minutes, 0, 0);
         emitChange(base);
     };
     const handleTimezoneChange = (tz)=>{
-        setTimezone(tz);
-        if (currentDate) emitChange(currentDate, tz);
+        setSelectedTimezone(tz);
+        if (displayDate) emitChange(displayDate, tz);
     };
     return /*#__PURE__*/ react.createElement("div", {
         className: className
@@ -67,9 +63,21 @@ const DateTimePicker = ({ value, onChange, placeholder, disabled, size, variant,
         className: "flex flex-col gap-sm"
     }, /*#__PURE__*/ react.createElement(Calendar, {
         mode: "single",
-        selected: currentDate,
+        selected: displayDate,
         onSelect: handleDateSelect,
-        weekStartsOn: weekStartsOn
+        weekStartsOn: weekStartsOn,
+        disabled: [
+            ...minDate ? [
+                {
+                    before: minDate
+                }
+            ] : [],
+            ...maxDate ? [
+                {
+                    after: maxDate
+                }
+            ] : []
+        ]
     }), /*#__PURE__*/ react.createElement("div", {
         className: "flex gap-sm px-md pb-md"
     }, /*#__PURE__*/ react.createElement("div", {

package/DatePicker/primitives/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/DateTimePicker.js","sources":["../../../src/DatePicker/primitives/DateTimePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { UTC_TIMEZONES } from \"@webiny/utils\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { SelectPrimitive } from \"~/Select/index.js\";\nimport type { DateTimeLocalPickerProps, DateTimeTzPickerProps } from \"../utils/types.js\";\nimport {\n    extractTimezone,\n    formatDateForDisplay,\n    formatTimeValue,\n    getLocalTimezone,\n    parseTimeValue,\n    toIsoWithTz\n} from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { TimePicker } from \"./components/TimePicker.js\";\n\ntype DateTimePickerInternalProps = (DateTimeLocalPickerProps | DateTimeTzPickerProps) & {\n    withTimezone: boolean;\n};\n\nconst timezoneOptions = UTC_TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }));\n\nfunction parseToDate(value: string | undefined): Date | undefined {\n    if (!value) {\n        return undefined;\n    }\n    const d = new Date(value);\n    if (Number.isNaN(d.getTime())) {\n        return undefined;\n    }\n    return d;\n}\n\nconst DateTimePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    withTimezone,\n    displayFormat\n}: DateTimePickerInternalProps) => {\n    const [open, setOpen] = useState(false);\n\n    const existingTz = withTimezone && value ? extractTimezone(value as string) : undefined;\n    const [timezone, setTimezone] = useState(existingTz || getLocalTimezone());\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const currentDate = parseToDate(value);\n\n    const displayValue = withTimezone\n        ? formatDateForDisplay(value, \"dateTimeTz\", displayFormat)\n        : formatDateForDisplay(value, \"dateTimeLocal\", displayFormat);\n\n    const timeValue = currentDate ? formatTimeValue(currentDate) : \"\";\n\n    const emitChange = (date: Date, tz?: string) => {\n        if (!onChange) {\n            return;\n        }\n        if (withTimezone) {\n            onChange(toIsoWithTz(date, tz || timezone));\n        } else {\n            onChange(format(date, \"yyyy-MM-dd'T'HH:mm:ss\"));\n        }\n    };\n\n    const handleDateSelect = (date: Date | undefined) => {\n        if (!date) {\n            return;\n        }\n        if (currentDate) {\n            date.setHours(currentDate.getHours(), currentDate.getMinutes());\n        }\n        emitChange(date);\n    };\n\n    const handleTimeChange = (time: string | undefined) => {\n        if (!time) {\n            return;\n        }\n        const parsed = parseTimeValue(time);\n        if (!parsed) {\n            return;\n        }\n        const base = currentDate ? new Date(currentDate) : new Date();\n        base.setHours(parsed.hours, parsed.minutes, 0, 0);\n        emitChange(base);\n    };\n\n    const handleTimezoneChange = (tz: string) => {\n        setTimezone(tz);\n        if (currentDate) {\n            emitChange(currentDate, tz);\n        }\n    };\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick date & time\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className=\"flex flex-col gap-sm\">\n                        <Calendar\n                            mode=\"single\"\n                            selected={currentDate}\n                            onSelect={handleDateSelect}\n                            weekStartsOn={weekStartsOn}\n                        />\n                        <div className=\"flex gap-sm px-md pb-md\">\n                            <div className=\"flex-1\">\n                                <TimePicker\n                                    value={timeValue}\n                                    onChange={handleTimeChange}\n                                    disabled={disabled}\n                                    size=\"md\"\n                                />\n                            </div>\n                            {withTimezone && (\n                                <div className=\"flex-1\">\n                                    <SelectPrimitive\n                                        value={timezone}\n                                        onChange={handleTimezoneChange}\n                                        options={timezoneOptions}\n                                        disabled={disabled}\n                                        size=\"md\"\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateTimePicker };\n"],"names":["timezoneOptions","UTC_TIMEZONES","tz","parseToDate","value","d","Date","Number","DateTimePicker","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","withTimezone","displayFormat","open","setOpen","useState","existingTz","extractTimezone","undefined","timezone","setTimezone","getLocalTimezone","handleOpenChange","isOpen","currentDate","displayValue","formatDateForDisplay","timeValue","formatTimeValue","emitChange","date","toIsoWithTz","format","handleDateSelect","handleTimeChange","time","parsed","parseTimeValue","base","handleTimezoneChange","PopoverPrimitive","DatePickerTrigger","Calendar","TimePicker","SelectPrimitive"],"mappings":";;;;;;;;;AAsBA,MAAMA,kBAAkBC,cAAc,GAAG,CAACC,CAAAA,KAAO;QAAE,OAAOA,GAAG,KAAK;QAAE,OAAOA,GAAG,KAAK;IAAC;AAEpF,SAASC,YAAYC,KAAyB;IAC1C,IAAI,CAACA,OACD;IAEJ,MAAMC,IAAI,IAAIC,KAAKF;IACnB,IAAIG,OAAO,KAAK,CAACF,EAAE,OAAO,KACtB;IAEJ,OAAOA;AACX;AAEA,MAAMG,iBAAiB,CAAC,EACpBJ,KAAK,EACLK,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,YAAY,EACZC,aAAa,EACa;IAC1B,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,aAAaL,gBAAgBd,QAAQoB,gBAAgBpB,SAAmBqB;IAC9E,MAAM,CAACC,UAAUC,YAAY,GAAGL,SAASC,cAAcK;IAEvD,MAAMC,mBAAmB,CAACC;QACtBT,QAAQS;QACR,IAAId,cACAA,aAAac;IAErB;IAEA,MAAMC,cAAc5B,YAAYC;IAEhC,MAAM4B,eAAed,eACfe,qBAAqB7B,OAAO,cAAce,iBAC1Cc,qBAAqB7B,OAAO,iBAAiBe;IAEnD,MAAMe,YAAYH,cAAcI,gBAAgBJ,eAAe;IAE/D,MAAMK,aAAa,CAACC,MAAYnC;QAC5B,IAAI,CAACO,UACD;QAEAS,eACAT,SAAS6B,YAAYD,MAAMnC,MAAMwB,aAEjCjB,SAAS8B,OAAOF,MAAM;IAE9B;IAEA,MAAMG,mBAAmB,CAACH;QACtB,IAAI,CAACA,MACD;QAEJ,IAAIN,aACAM,KAAK,QAAQ,CAACN,YAAY,QAAQ,IAAIA,YAAY,UAAU;QAEhEK,WAAWC;IACf;IAEA,MAAMI,mBAAmB,CAACC;QACtB,IAAI,CAACA,MACD;QAEJ,MAAMC,SAASC,eAAeF;QAC9B,IAAI,CAACC,QACD;QAEJ,MAAME,OAAOd,cAAc,IAAIzB,KAAKyB,eAAe,IAAIzB;QACvDuC,KAAK,QAAQ,CAACF,OAAO,KAAK,EAAEA,OAAO,OAAO,EAAE,GAAG;QAC/CP,WAAWS;IACf;IAEA,MAAMC,uBAAuB,CAAC5C;QAC1ByB,YAAYzB;QACZ,IAAI6B,aACAK,WAAWL,aAAa7B;IAEhC;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWe;qBACZ,oBAAC8B,kBAAgBA;QAAC,MAAM3B;QAAM,cAAcS;qBACxC,oBAACmB,mBAAiBA;QACd,cAAchB;QACd,aAAatB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACiC,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAU;qBACX,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUlB;QACV,UAAUS;QACV,cAAczB;sBAElB,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACmC,YAAUA;QACP,OAAOhB;QACP,UAAUO;QACV,UAAU9B;QACV,MAAK;SAGZO,gBAAgB,WAAhBA,GACG,oBAAC;QAAI,WAAU;qBACX,oBAACiC,iBAAeA;QACZ,OAAOzB;QACP,UAAUoB;QACV,SAAS9C;QACT,UAAUW;QACV,MAAK;;AAU7C"}
+{"version":3,"file":"DatePicker/primitives/DateTimePicker.js","sources":["../../../src/DatePicker/primitives/DateTimePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { UTC_TIMEZONES } from \"@webiny/utils\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { SelectPrimitive } from \"~/Select/index.js\";\nimport type { DateTimeLocalPickerProps, DateTimeTzPickerProps } from \"../utils/types.js\";\nimport {\n    extractTimezone,\n    formatDateForDisplay,\n    formatTimeValue,\n    getLocalTimezone,\n    parseTimeValue,\n    toIsoWithTz\n} from \"../utils/dateHelpers.js\";\nimport { parseToDate, utcToTimezoneDate } from \"../utils/timezoneHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { TimePicker } from \"./components/TimePicker.js\";\n\ntype DateTimePickerInternalProps = (DateTimeLocalPickerProps | DateTimeTzPickerProps) & {\n    withTimezone: boolean;\n};\n\nconst timezoneOptions = UTC_TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }));\n\nconst DateTimePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    withTimezone,\n    displayFormat,\n    minDate,\n    maxDate\n}: DateTimePickerInternalProps) => {\n    const [open, setOpen] = useState(false);\n\n    const existingTz = withTimezone && value ? extractTimezone(value) : undefined;\n    const [selectedTimezone, setSelectedTimezone] = useState(getLocalTimezone());\n    // The value carries its own offset; the selected one applies only until a value exists.\n    const timezone = existingTz || selectedTimezone;\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const currentDate = parseToDate(value);\n\n    const displayDate =\n        withTimezone && currentDate ? utcToTimezoneDate(currentDate, timezone) : currentDate;\n\n    const displayValue = withTimezone\n        ? displayDate\n            ? formatDateForDisplay(toIsoWithTz(displayDate, timezone), \"dateTimeTz\", displayFormat)\n            : undefined\n        : formatDateForDisplay(value, \"dateTimeLocal\", displayFormat);\n\n    const timeValue = displayDate ? formatTimeValue(displayDate) : \"\";\n\n    const emitChange = (date: Date, tz?: string) => {\n        if (!onChange) {\n            return;\n        }\n        if (withTimezone) {\n            // Wall time of `date` is the time in the selected timezone: \"2026-05-01T14:30:00+02:00\".\n            onChange(toIsoWithTz(date, tz || timezone));\n        } else {\n            // Absolute instant: \"2026-05-01T12:30:00.000Z\".\n            onChange(date.toISOString());\n        }\n    };\n\n    const handleDateSelect = (date: Date | undefined) => {\n        if (!date) {\n            return;\n        }\n        if (displayDate) {\n            date.setHours(displayDate.getHours(), displayDate.getMinutes());\n        }\n        emitChange(date);\n    };\n\n    const handleTimeChange = (time: string | undefined) => {\n        if (!time) {\n            return;\n        }\n        const parsed = parseTimeValue(time);\n        if (!parsed) {\n            return;\n        }\n        const base = displayDate ? new Date(displayDate) : new Date();\n        base.setHours(parsed.hours, parsed.minutes, 0, 0);\n        emitChange(base);\n    };\n\n    const handleTimezoneChange = (tz: string) => {\n        setSelectedTimezone(tz);\n        // Keep the picked wall time, re-label it with the new offset.\n        if (displayDate) {\n            emitChange(displayDate, tz);\n        }\n    };\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick date & time\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className=\"flex flex-col gap-sm\">\n                        <Calendar\n                            mode=\"single\"\n                            selected={displayDate}\n                            onSelect={handleDateSelect}\n                            weekStartsOn={weekStartsOn}\n                            disabled={[\n                                ...(minDate ? [{ before: minDate }] : []),\n                                ...(maxDate ? [{ after: maxDate }] : [])\n                            ]}\n                        />\n                        <div className=\"flex gap-sm px-md pb-md\">\n                            <div className=\"flex-1\">\n                                <TimePicker\n                                    value={timeValue}\n                                    onChange={handleTimeChange}\n                                    disabled={disabled}\n                                    size=\"md\"\n                                />\n                            </div>\n                            {withTimezone && (\n                                <div className=\"flex-1\">\n                                    <SelectPrimitive\n                                        value={timezone}\n                                        onChange={handleTimezoneChange}\n                                        options={timezoneOptions}\n                                        disabled={disabled}\n                                        size=\"md\"\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateTimePicker };\n"],"names":["timezoneOptions","UTC_TIMEZONES","tz","DateTimePicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","withTimezone","displayFormat","minDate","maxDate","open","setOpen","useState","existingTz","extractTimezone","undefined","selectedTimezone","setSelectedTimezone","getLocalTimezone","timezone","handleOpenChange","isOpen","currentDate","parseToDate","displayDate","utcToTimezoneDate","displayValue","formatDateForDisplay","toIsoWithTz","timeValue","formatTimeValue","emitChange","date","handleDateSelect","handleTimeChange","time","parsed","parseTimeValue","base","Date","handleTimezoneChange","PopoverPrimitive","DatePickerTrigger","Calendar","TimePicker","SelectPrimitive"],"mappings":";;;;;;;;;AAsBA,MAAMA,kBAAkBC,cAAc,GAAG,CAACC,CAAAA,KAAO;QAAE,OAAOA,GAAG,KAAK;QAAE,OAAOA,GAAG,KAAK;IAAC;AAEpF,MAAMC,iBAAiB,CAAC,EACpBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,YAAY,EACZC,aAAa,EACbC,OAAO,EACPC,OAAO,EACmB;IAC1B,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,aAAaP,gBAAgBV,QAAQkB,gBAAgBlB,SAASmB;IACpE,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGL,SAASM;IAEzD,MAAMC,WAAWN,cAAcG;IAE/B,MAAMI,mBAAmB,CAACC;QACtBV,QAAQU;QACR,IAAIjB,cACAA,aAAaiB;IAErB;IAEA,MAAMC,cAAcC,YAAY3B;IAEhC,MAAM4B,cACFlB,gBAAgBgB,cAAcG,kBAAkBH,aAAaH,YAAYG;IAE7E,MAAMI,eAAepB,eACfkB,cACIG,qBAAqBC,YAAYJ,aAAaL,WAAW,cAAcZ,iBACvEQ,SACJY,qBAAqB/B,OAAO,iBAAiBW;IAEnD,MAAMsB,YAAYL,cAAcM,gBAAgBN,eAAe;IAE/D,MAAMO,aAAa,CAACC,MAAYtC;QAC5B,IAAI,CAACG,UACD;QAEAS,eAEAT,SAAS+B,YAAYI,MAAMtC,MAAMyB,aAGjCtB,SAASmC,KAAK,WAAW;IAEjC;IAEA,MAAMC,mBAAmB,CAACD;QACtB,IAAI,CAACA,MACD;QAEJ,IAAIR,aACAQ,KAAK,QAAQ,CAACR,YAAY,QAAQ,IAAIA,YAAY,UAAU;QAEhEO,WAAWC;IACf;IAEA,MAAME,mBAAmB,CAACC;QACtB,IAAI,CAACA,MACD;QAEJ,MAAMC,SAASC,eAAeF;QAC9B,IAAI,CAACC,QACD;QAEJ,MAAME,OAAOd,cAAc,IAAIe,KAAKf,eAAe,IAAIe;QACvDD,KAAK,QAAQ,CAACF,OAAO,KAAK,EAAEA,OAAO,OAAO,EAAE,GAAG;QAC/CL,WAAWO;IACf;IAEA,MAAME,uBAAuB,CAAC9C;QAC1BuB,oBAAoBvB;QAEpB,IAAI8B,aACAO,WAAWP,aAAa9B;IAEhC;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWW;qBACZ,oBAACoC,kBAAgBA;QAAC,MAAM/B;QAAM,cAAcU;qBACxC,oBAACsB,mBAAiBA;QACd,cAAchB;QACd,aAAa5B,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACuC,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAU;qBACX,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUnB;QACV,UAAUS;QACV,cAAc9B;QACd,UAAU;eACFK,UAAU;gBAAC;oBAAE,QAAQA;gBAAQ;aAAE,GAAG,EAAE;eACpCC,UAAU;gBAAC;oBAAE,OAAOA;gBAAQ;aAAE,GAAG,EAAE;SAC1C;sBAEL,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACmC,YAAUA;QACP,OAAOf;QACP,UAAUK;QACV,UAAUnC;QACV,MAAK;SAGZO,gBAAgB,WAAhBA,GACG,oBAAC;QAAI,WAAU;qBACX,oBAACuC,iBAAeA;QACZ,OAAO1B;QACP,UAAUqB;QACV,SAAShD;QACT,UAAUO;QACV,MAAK;;AAU7C"}

package/DatePicker/primitives/MultipleDatesPicker.js

@@ -2,7 +2,7 @@ import react, { useState } from "react";
 import { format } from "date-fns";
 import { Calendar } from "../../Calendar/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
-import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { formatDateForDisplay, parseDateValue } from "../utils/dateHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 import { SelectedTagsList } from "./components/SelectedTagsList.js";
 const toDateStr = (d)=>format(d, "yyyy-MM-dd");
@@ -14,7 +14,7 @@ const MultipleDatesPicker = ({ value: valueProp, onChange, placeholder, disabled
         if (onOpenChange) onOpenChange(isOpen);
     };
     const displayValue = formatDateForDisplay(value, "multipleDates");
-    const selectedDates = value.map((s)=>new Date(s));
+    const selectedDates = value.map((s)=>parseDateValue(s));
     const handleSelect = (dates)=>{
         if (onChange) {
             const sorted = [
@@ -28,7 +28,7 @@ const MultipleDatesPicker = ({ value: valueProp, onChange, placeholder, disabled
     };
     const tagItems = value.map((d)=>({
             key: d,
-            label: format(new Date(d), "MMM d, yyyy")
+            label: format(parseDateValue(d), "MMM d, yyyy")
         }));
     return /*#__PURE__*/ react.createElement("div", {
         className: className

package/DatePicker/primitives/MultipleDatesPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/MultipleDatesPicker.js","sources":["../../../src/DatePicker/primitives/MultipleDatesPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MultipleDatesPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { SelectedTagsList } from \"./components/SelectedTagsList.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst MultipleDatesPicker = ({\n    value: valueProp,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className\n}: MultipleDatesPickerProps) => {\n    const value = valueProp ?? [];\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"multipleDates\");\n\n    const selectedDates = value.map(s => new Date(s));\n\n    const handleSelect = (dates: Date[] | undefined) => {\n        if (onChange) {\n            const sorted = [...(dates ?? [])].sort((a, b) => a.getTime() - b.getTime());\n            onChange(sorted.map(toDateStr));\n        }\n    };\n\n    const handleRemove = (key: string) => {\n        if (onChange) {\n            onChange(value.filter(d => d !== key));\n        }\n    };\n\n    const tagItems = value.map(d => ({\n        key: d,\n        label: format(new Date(d), \"MMM d, yyyy\")\n    }));\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick dates\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"multiple\"\n                        selected={selectedDates}\n                        onSelect={handleSelect}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n            <SelectedTagsList items={tagItems} onRemove={handleRemove} disabled={disabled} />\n        </div>\n    );\n};\n\nexport { MultipleDatesPicker };\n"],"names":["toDateStr","d","format","MultipleDatesPicker","valueProp","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","value","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","selectedDates","s","Date","handleSelect","dates","sorted","a","b","handleRemove","key","tagItems","PopoverPrimitive","DatePickerTrigger","Calendar","SelectedTagsList"],"mappings":";;;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,sBAAsB,CAAC,EACzB,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACc;IACvB,MAAMC,QAAQV,aAAa,EAAE;IAC7B,MAAM,CAACW,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBP,OAAO;IAEjD,MAAMQ,gBAAgBR,MAAM,GAAG,CAACS,CAAAA,IAAK,IAAIC,KAAKD;IAE9C,MAAME,eAAe,CAACC;QAClB,IAAIrB,UAAU;YACV,MAAMsB,SAAS;mBAAKD,SAAS,EAAE;aAAE,CAAC,IAAI,CAAC,CAACE,GAAGC,IAAMD,EAAE,OAAO,KAAKC,EAAE,OAAO;YACxExB,SAASsB,OAAO,GAAG,CAAC3B;QACxB;IACJ;IAEA,MAAM8B,eAAe,CAACC;QAClB,IAAI1B,UACAA,SAASS,MAAM,MAAM,CAACb,CAAAA,IAAKA,MAAM8B;IAEzC;IAEA,MAAMC,WAAWlB,MAAM,GAAG,CAACb,CAAAA,IAAM;YAC7B,KAAKA;YACL,OAAOC,OAAO,IAAIsB,KAAKvB,IAAI;QAC/B;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWY;qBACZ,oBAACoB,kBAAgBA;QAAC,MAAMlB;QAAM,cAAcG;qBACxC,oBAACgB,mBAAiBA;QACd,cAAcd;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACuB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUb;QACV,UAAUG;QACV,cAAcd;wBAI1B,oBAACyB,kBAAgBA;QAAC,OAAOJ;QAAU,UAAUF;QAAc,UAAUvB;;AAGjF"}
+{"version":3,"file":"DatePicker/primitives/MultipleDatesPicker.js","sources":["../../../src/DatePicker/primitives/MultipleDatesPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MultipleDatesPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, parseDateValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { SelectedTagsList } from \"./components/SelectedTagsList.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst MultipleDatesPicker = ({\n    value: valueProp,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className\n}: MultipleDatesPickerProps) => {\n    const value = valueProp ?? [];\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"multipleDates\");\n\n    const selectedDates = value.map(s => parseDateValue(s));\n\n    const handleSelect = (dates: Date[] | undefined) => {\n        if (onChange) {\n            const sorted = [...(dates ?? [])].sort((a, b) => a.getTime() - b.getTime());\n            onChange(sorted.map(toDateStr));\n        }\n    };\n\n    const handleRemove = (key: string) => {\n        if (onChange) {\n            onChange(value.filter(d => d !== key));\n        }\n    };\n\n    const tagItems = value.map(d => ({\n        key: d,\n        label: format(parseDateValue(d), \"MMM d, yyyy\")\n    }));\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick dates\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"multiple\"\n                        selected={selectedDates}\n                        onSelect={handleSelect}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n            <SelectedTagsList items={tagItems} onRemove={handleRemove} disabled={disabled} />\n        </div>\n    );\n};\n\nexport { MultipleDatesPicker };\n"],"names":["toDateStr","d","format","MultipleDatesPicker","valueProp","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","value","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","selectedDates","s","parseDateValue","handleSelect","dates","sorted","a","b","handleRemove","key","tagItems","PopoverPrimitive","DatePickerTrigger","Calendar","SelectedTagsList"],"mappings":";;;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,sBAAsB,CAAC,EACzB,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACc;IACvB,MAAMC,QAAQV,aAAa,EAAE;IAC7B,MAAM,CAACW,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBP,OAAO;IAEjD,MAAMQ,gBAAgBR,MAAM,GAAG,CAACS,CAAAA,IAAKC,eAAeD;IAEpD,MAAME,eAAe,CAACC;QAClB,IAAIrB,UAAU;YACV,MAAMsB,SAAS;mBAAKD,SAAS,EAAE;aAAE,CAAC,IAAI,CAAC,CAACE,GAAGC,IAAMD,EAAE,OAAO,KAAKC,EAAE,OAAO;YACxExB,SAASsB,OAAO,GAAG,CAAC3B;QACxB;IACJ;IAEA,MAAM8B,eAAe,CAACC;QAClB,IAAI1B,UACAA,SAASS,MAAM,MAAM,CAACb,CAAAA,IAAKA,MAAM8B;IAEzC;IAEA,MAAMC,WAAWlB,MAAM,GAAG,CAACb,CAAAA,IAAM;YAC7B,KAAKA;YACL,OAAOC,OAAOsB,eAAevB,IAAI;QACrC;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWY;qBACZ,oBAACoB,kBAAgBA;QAAC,MAAMlB;QAAM,cAAcG;qBACxC,oBAACgB,mBAAiBA;QACd,cAAcd;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACuB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUb;QACV,UAAUG;QACV,cAAcd;wBAI1B,oBAACyB,kBAAgBA;QAAC,OAAOJ;QAAU,UAAUF;QAAc,UAAUvB;;AAGjF"}

package/DatePicker/primitives/components/DatePickerTrigger.js

@@ -19,10 +19,10 @@ const DatePickerTriggerInner = /*#__PURE__*/ forwardRef(({ displayValue, placeho
             size,
             variant,
             invalid
-        }), "cursor-pointer justify-between select-none", disabled && "pointer-events-none opacity-50", className),
+        }), "cursor-pointer justify-between select-none min-w-0 overflow-hidden", disabled && "pointer-events-none opacity-50", className),
         ...props
     }, /*#__PURE__*/ react.createElement("span", {
-        className: cn(!displayValue && "text-neutral-dimmed")
+        className: cn("truncate", !displayValue && "text-neutral-dimmed")
     }, displayValue || placeholder || "Select..."), /*#__PURE__*/ react.createElement(Icon, {
         icon: /*#__PURE__*/ react.createElement(IconComponent, null),
         label: iconLabel,

package/DatePicker/primitives/components/DatePickerTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/components/DatePickerTrigger.js","sources":["../../../../src/DatePicker/primitives/components/DatePickerTrigger.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { ReactComponent as CalendarMonthIcon } from \"@webiny/icons/calendar_month.svg\";\nimport { ReactComponent as ScheduleIcon } from \"@webiny/icons/schedule.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { inputVariants, type InputPrimitiveProps } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface DatePickerTriggerProps {\n    displayValue?: string;\n    placeholder?: string;\n    disabled?: boolean;\n    size?: InputPrimitiveProps[\"size\"];\n    variant?: InputPrimitiveProps[\"variant\"];\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    iconType?: \"calendar\" | \"time\";\n}\n\nconst DatePickerTriggerInner = forwardRef<\n    HTMLDivElement,\n    DatePickerTriggerProps & React.HTMLAttributes<HTMLDivElement>\n>(\n    (\n        {\n            displayValue,\n            placeholder,\n            disabled,\n            size,\n            variant,\n            invalid,\n            iconType = \"calendar\",\n            className,\n            ...props\n        },\n        ref\n    ) => {\n        const IconComponent = iconType === \"time\" ? ScheduleIcon : CalendarMonthIcon;\n        const iconLabel = iconType === \"time\" ? \"Time\" : \"Calendar\";\n\n        return (\n            <PopoverPrimitive.Trigger asChild>\n                <div\n                    ref={ref}\n                    role=\"button\"\n                    tabIndex={0}\n                    data-disabled={disabled}\n                    className={cn(\n                        inputVariants({ size, variant, invalid }),\n                        \"cursor-pointer justify-between select-none\",\n                        disabled && \"pointer-events-none opacity-50\",\n                        className\n                    )}\n                    {...props}\n                >\n                    <span className={cn(!displayValue && \"text-neutral-dimmed\")}>\n                        {displayValue || placeholder || \"Select...\"}\n                    </span>\n                    <Icon icon={<IconComponent />} label={iconLabel} size=\"sm\" color=\"inherit\" />\n                </div>\n            </PopoverPrimitive.Trigger>\n        );\n    }\n);\n\nDatePickerTriggerInner.displayName = \"DatePickerTrigger\";\n\nexport { DatePickerTriggerInner as DatePickerTrigger, type DatePickerTriggerProps };\n"],"names":["DatePickerTriggerInner","forwardRef","displayValue","placeholder","disabled","size","variant","invalid","iconType","className","props","ref","IconComponent","ScheduleIcon","CalendarMonthIcon","iconLabel","PopoverPrimitive","cn","inputVariants","Icon"],"mappings":";;;;;;;AAkBA,MAAMA,yBAAyB,WAAHA,GAAGC,WAI3B,CACI,EACIC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,WAAW,UAAU,EACrBC,SAAS,EACT,GAAGC,OACN,EACDC;IAEA,MAAMC,gBAAgBJ,AAAa,WAAbA,WAAsBK,8BAAeC;IAC3D,MAAMC,YAAYP,AAAa,WAAbA,WAAsB,SAAS;IAEjD,OAAO,WAAP,GACI,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,KAAKL;QACL,MAAK;QACL,UAAU;QACV,iBAAeP;QACf,WAAWa,GACPC,cAAc;YAAEb;YAAMC;YAASC;QAAQ,IACvC,8CACAH,YAAY,kCACZK;QAEH,GAAGC,KAAK;qBAET,oBAAC;QAAK,WAAWO,GAAG,CAACf,gBAAgB;OAChCA,gBAAgBC,eAAe,4BAEpC,oBAACgB,MAAIA;QAAC,oBAAM,oBAACP,eAAAA;QAAkB,OAAOG;QAAW,MAAK;QAAK,OAAM;;AAIjF;AAGJf,uBAAuB,WAAW,GAAG"}
+{"version":3,"file":"DatePicker/primitives/components/DatePickerTrigger.js","sources":["../../../../src/DatePicker/primitives/components/DatePickerTrigger.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { ReactComponent as CalendarMonthIcon } from \"@webiny/icons/calendar_month.svg\";\nimport { ReactComponent as ScheduleIcon } from \"@webiny/icons/schedule.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { inputVariants, type InputPrimitiveProps } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface DatePickerTriggerProps {\n    displayValue?: string;\n    placeholder?: string;\n    disabled?: boolean;\n    size?: InputPrimitiveProps[\"size\"];\n    variant?: InputPrimitiveProps[\"variant\"];\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    iconType?: \"calendar\" | \"time\";\n}\n\nconst DatePickerTriggerInner = forwardRef<\n    HTMLDivElement,\n    DatePickerTriggerProps & React.HTMLAttributes<HTMLDivElement>\n>(\n    (\n        {\n            displayValue,\n            placeholder,\n            disabled,\n            size,\n            variant,\n            invalid,\n            iconType = \"calendar\",\n            className,\n            ...props\n        },\n        ref\n    ) => {\n        const IconComponent = iconType === \"time\" ? ScheduleIcon : CalendarMonthIcon;\n        const iconLabel = iconType === \"time\" ? \"Time\" : \"Calendar\";\n\n        return (\n            <PopoverPrimitive.Trigger asChild>\n                <div\n                    ref={ref}\n                    role=\"button\"\n                    tabIndex={0}\n                    data-disabled={disabled}\n                    className={cn(\n                        inputVariants({ size, variant, invalid }),\n                        \"cursor-pointer justify-between select-none min-w-0 overflow-hidden\",\n                        disabled && \"pointer-events-none opacity-50\",\n                        className\n                    )}\n                    {...props}\n                >\n                    <span className={cn(\"truncate\", !displayValue && \"text-neutral-dimmed\")}>\n                        {displayValue || placeholder || \"Select...\"}\n                    </span>\n                    <Icon icon={<IconComponent />} label={iconLabel} size=\"sm\" color=\"inherit\" />\n                </div>\n            </PopoverPrimitive.Trigger>\n        );\n    }\n);\n\nDatePickerTriggerInner.displayName = \"DatePickerTrigger\";\n\nexport { DatePickerTriggerInner as DatePickerTrigger, type DatePickerTriggerProps };\n"],"names":["DatePickerTriggerInner","forwardRef","displayValue","placeholder","disabled","size","variant","invalid","iconType","className","props","ref","IconComponent","ScheduleIcon","CalendarMonthIcon","iconLabel","PopoverPrimitive","cn","inputVariants","Icon"],"mappings":";;;;;;;AAkBA,MAAMA,yBAAyB,WAAHA,GAAGC,WAI3B,CACI,EACIC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,WAAW,UAAU,EACrBC,SAAS,EACT,GAAGC,OACN,EACDC;IAEA,MAAMC,gBAAgBJ,AAAa,WAAbA,WAAsBK,8BAAeC;IAC3D,MAAMC,YAAYP,AAAa,WAAbA,WAAsB,SAAS;IAEjD,OAAO,WAAP,GACI,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,KAAKL;QACL,MAAK;QACL,UAAU;QACV,iBAAeP;QACf,WAAWa,GACPC,cAAc;YAAEb;YAAMC;YAASC;QAAQ,IACvC,sEACAH,YAAY,kCACZK;QAEH,GAAGC,KAAK;qBAET,oBAAC;QAAK,WAAWO,GAAG,YAAY,CAACf,gBAAgB;OAC5CA,gBAAgBC,eAAe,4BAEpC,oBAACgB,MAAIA;QAAC,oBAAM,oBAACP,eAAAA;QAAkB,OAAOG;QAAW,MAAK;QAAK,OAAM;;AAIjF;AAGJf,uBAAuB,WAAW,GAAG"}

package/DatePicker/utils/birthdayHelpers.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Logic for the step-by-step birthday picker: the date is picked as day, then month, then year.
+ * Months are 1-based throughout (1 = January).
+ */
+export interface BirthdayParts {
+    day?: number;
+    month?: number;
+    year?: number;
+}
+export type BirthdayStep = "day" | "month" | "year";
+export declare const DEFAULT_BIRTHDAY_YEARS_BACK = 120;
+/** The first and last date the picker may produce. Either may be left open. */
+export interface BirthdayLimits {
+    minDate?: Date;
+    maxDate?: Date;
+}
+/** The dates the picker may produce: one of the offered years, within the limits. */
+export interface BirthdayRange extends BirthdayLimits {
+    years: number[];
+}
+/**
+ * Reads the day, month and year from a `YYYY-MM-DD` value. A value that carries a time
+ * (`2026-05-01T00:00:00.000Z`) still yields its date part. Anything else yields no parts.
+ */
+export declare function parseBirthdayValue(value: string | undefined | null): BirthdayParts;
+/**
+ * Returns the `YYYY-MM-DD` value, or `undefined` while any part is still missing.
+ */
+export declare function formatBirthdayValue(parts: BirthdayParts): string | undefined;
+export declare function pad(value: number): string;
+export declare function isLeapYear(year: number): boolean;
+/**
+ * Days in a month. Without a year, February counts 29 days, because the year is picked
+ * after the month and a leap year may still be chosen.
+ */
+export declare function daysInMonth(month: number, year?: number): number;
+/**
+ * Whether the range holds a date with every part set in `parts`. An unset year is looked
+ * for among the offered years; an unset month or day can be any.
+ */
+export declare function isInBirthdayRange(parts: BirthdayParts, range: BirthdayRange): boolean;
+/** A day is unavailable when no date in the range falls on it. */
+export declare function isDayDisabled(day: number, range?: BirthdayRange): boolean;
+/**
+ * A month is unavailable when it can't hold the chosen day (31 rules out the 30-day months
+ * and February), or when no date in the range has the chosen day in that month.
+ */
+export declare function isMonthDisabled(month: number, parts: BirthdayParts, range?: BirthdayRange): boolean;
+/**
+ * A year is unavailable when it can't hold the chosen day and month (29 February in a
+ * non-leap year), or when the date it makes falls outside the range.
+ */
+export declare function isYearDisabled(year: number, parts: BirthdayParts, range?: BirthdayRange): boolean;
+/**
+ * Picking a day clears whatever comes after it that can no longer hold it: the month when
+ * the month is too short or the range has no such date, otherwise the year when only the
+ * year is the problem (29 February, or a date past a limit).
+ */
+export declare function pickDay(parts: BirthdayParts, day: number, range?: BirthdayRange): BirthdayParts;
+/**
+ * Picking a month keeps the day (only months that hold it can be picked) and clears the
+ * year when that year can't hold the date.
+ */
+export declare function pickMonth(parts: BirthdayParts, month: number, range?: BirthdayRange): BirthdayParts;
+export declare function pickYear(parts: BirthdayParts, year: number): BirthdayParts;
+/**
+ * The step to show after a pick, or `undefined` when the picker should close. A missing part
+ * comes first. Once the date is complete, the picker walks on to the steps after `current`
+ * that weren't picked while it was open, so editing a saved date still goes day, month, year.
+ */
+export declare function nextBirthdayStep(parts: BirthdayParts, current: BirthdayStep, picked: ReadonlySet<BirthdayStep>): BirthdayStep | undefined;
+/**
+ * The years to offer, newest first. The default runs from this year back
+ * `DEFAULT_BIRTHDAY_YEARS_BACK` years, moved and cut to fit the limits. A year already set
+ * outside the range is added, so an existing value is never hidden.
+ */
+export declare function birthdayYears(yearRange?: [number, number], includeYear?: number, limits?: BirthdayLimits): number[];