@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/DatePicker/primitives/DateTimePicker.js

@@ -1,128 +1,101 @@
-import React, { useState } from "react";
-import { format } from "date-fns";
+import react, { useState } from "react";
 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 undefined;
-  }
-  const d = new Date(value);
-  if (Number.isNaN(d.getTime())) {
-    return undefined;
-  }
-  return d;
-}
-const DateTimePicker = ({
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  size,
-  variant,
-  invalid,
-  weekStartsOn,
-  onOpenChange,
-  className,
-  withTimezone,
-  displayFormat
-}) => {
-  const [open, setOpen] = useState(false);
-  const existingTz = withTimezone && value ? extractTimezone(value) : undefined;
-  const [timezone, setTimezone] = useState(existingTz || getLocalTimezone());
-  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 emitChange = (date, tz) => {
-    if (!onChange) {
-      return;
-    }
-    if (withTimezone) {
-      onChange(toIsoWithTz(date, tz || timezone));
-    } else {
-      onChange(format(date, "yyyy-MM-dd'T'HH:mm:ss"));
-    }
-  };
-  const handleDateSelect = date => {
-    if (!date) {
-      return;
-    }
-    if (currentDate) {
-      date.setHours(currentDate.getHours(), currentDate.getMinutes());
-    }
-    emitChange(date);
-  };
-  const handleTimeChange = time => {
-    if (!time) {
-      return;
-    }
-    const parsed = parseTimeValue(time);
-    if (!parsed) {
-      return;
-    }
-    const base = currentDate ? new Date(currentDate) : new Date();
-    base.setHours(parsed.hours, parsed.minutes, 0, 0);
-    emitChange(base);
-  };
-  const handleTimezoneChange = tz => {
-    setTimezone(tz);
-    if (currentDate) {
-      emitChange(currentDate, tz);
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive, {
-    open: open,
-    onOpenChange: handleOpenChange
-  }, /*#__PURE__*/React.createElement(DatePickerTrigger, {
-    displayValue: displayValue,
-    placeholder: placeholder ?? "Pick date & time",
-    disabled: disabled,
-    size: size,
-    variant: variant,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
-    align: "start"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-sm"
-  }, /*#__PURE__*/React.createElement(Calendar, {
-    mode: "single",
-    selected: currentDate,
-    onSelect: handleDateSelect,
-    weekStartsOn: weekStartsOn
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-sm px-md pb-md"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-1"
-  }, /*#__PURE__*/React.createElement(TimePicker, {
-    value: timeValue,
-    onChange: handleTimeChange,
-    disabled: disabled,
-    size: "md"
-  })), withTimezone && /*#__PURE__*/React.createElement("div", {
-    className: "flex-1"
-  }, /*#__PURE__*/React.createElement(SelectPrimitive, {
-    value: timezone,
-    onChange: handleTimezoneChange,
-    options: timezoneOptions,
-    disabled: disabled,
-    size: "md"
-  })))))));
+const timezoneOptions = UTC_TIMEZONES.map((tz)=>({
+        value: tz.value,
+        label: tz.label
+    }));
+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 [selectedTimezone, setSelectedTimezone] = useState(getLocalTimezone());
+    const timezone = existingTz || selectedTimezone;
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const currentDate = parseToDate(value);
+    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(date.toISOString());
+    };
+    const handleDateSelect = (date)=>{
+        if (!date) return;
+        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 = displayDate ? new Date(displayDate) : new Date();
+        base.setHours(parsed.hours, parsed.minutes, 0, 0);
+        emitChange(base);
+    };
+    const handleTimezoneChange = (tz)=>{
+        setSelectedTimezone(tz);
+        if (displayDate) emitChange(displayDate, tz);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick date & time",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Calendar, {
+        mode: "single",
+        selected: displayDate,
+        onSelect: handleDateSelect,
+        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", {
+        className: "flex-1"
+    }, /*#__PURE__*/ react.createElement(TimePicker, {
+        value: timeValue,
+        onChange: handleTimeChange,
+        disabled: disabled,
+        size: "md"
+    })), withTimezone && /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1"
+    }, /*#__PURE__*/ react.createElement(SelectPrimitive, {
+        value: timezone,
+        onChange: handleTimezoneChange,
+        options: timezoneOptions,
+        disabled: disabled,
+        size: "md"
+    })))))));
 };
 export { DateTimePicker };
 

package/DatePicker/primitives/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","format","UTC_TIMEZONES","Calendar","PopoverPrimitive","SelectPrimitive","extractTimezone","formatDateForDisplay","formatTimeValue","getLocalTimezone","parseTimeValue","toIsoWithTz","DatePickerTrigger","TimePicker","timezoneOptions","map","tz","value","label","parseToDate","undefined","d","Date","Number","isNaN","getTime","DateTimePicker","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","withTimezone","displayFormat","open","setOpen","existingTz","timezone","setTimezone","handleOpenChange","isOpen","currentDate","displayValue","timeValue","emitChange","date","handleDateSelect","setHours","getHours","getMinutes","handleTimeChange","time","parsed","base","hours","minutes","handleTimezoneChange","createElement","Content","align","mode","selected","onSelect","options"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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/MonthPicker.js

@@ -1,59 +1,46 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { PopoverPrimitive } from "../../Popover/index.js";
 import { formatDateForDisplay, formatMonthValue, parseMonthValue } from "../utils/dateHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 import { YearStepper } from "./components/YearStepper.js";
 import { MonthGrid } from "./components/MonthGrid.js";
-const MonthPicker = ({
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  size,
-  variant,
-  invalid,
-  onOpenChange,
-  className,
-  displayFormat
-}) => {
-  const parsed = value ? parseMonthValue(value) : undefined;
-  const [open, setOpen] = useState(false);
-  const [viewYear, setViewYear] = useState(parsed?.year ?? new Date().getFullYear());
-  const handleOpenChange = isOpen => {
-    setOpen(isOpen);
-    if (onOpenChange) {
-      onOpenChange(isOpen);
-    }
-  };
-  const displayValue = formatDateForDisplay(value, "month", displayFormat);
-  const handleMonthSelect = month => {
-    if (onChange) {
-      onChange(formatMonthValue(viewYear, month));
-    }
-    handleOpenChange(false);
-  };
-  const selectedMonths = parsed && parsed.year === viewYear ? [parsed.month] : [];
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive, {
-    open: open,
-    onOpenChange: handleOpenChange
-  }, /*#__PURE__*/React.createElement(DatePickerTrigger, {
-    displayValue: displayValue,
-    placeholder: placeholder ?? "Pick a month",
-    disabled: disabled,
-    size: size,
-    variant: variant,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
-    align: "start"
-  }, /*#__PURE__*/React.createElement(YearStepper, {
-    year: viewYear,
-    onYearChange: setViewYear
-  }), /*#__PURE__*/React.createElement(MonthGrid, {
-    selectedMonths: selectedMonths,
-    onSelectMonth: handleMonthSelect
-  }))));
+const MonthPicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, onOpenChange, className, displayFormat })=>{
+    const parsed = value ? parseMonthValue(value) : void 0;
+    const [open, setOpen] = useState(false);
+    const [viewYear, setViewYear] = useState(parsed?.year ?? new Date().getFullYear());
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "month", displayFormat);
+    const handleMonthSelect = (month)=>{
+        if (onChange) onChange(formatMonthValue(viewYear, month));
+        handleOpenChange(false);
+    };
+    const selectedMonths = parsed && parsed.year === viewYear ? [
+        parsed.month
+    ] : [];
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick a month",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(YearStepper, {
+        year: viewYear,
+        onYearChange: setViewYear
+    }), /*#__PURE__*/ react.createElement(MonthGrid, {
+        selectedMonths: selectedMonths,
+        onSelectMonth: handleMonthSelect
+    }))));
 };
 export { MonthPicker };
 

package/DatePicker/primitives/MonthPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","PopoverPrimitive","formatDateForDisplay","formatMonthValue","parseMonthValue","DatePickerTrigger","YearStepper","MonthGrid","MonthPicker","value","onChange","placeholder","disabled","size","variant","invalid","onOpenChange","className","displayFormat","parsed","undefined","open","setOpen","viewYear","setViewYear","year","Date","getFullYear","handleOpenChange","isOpen","displayValue","handleMonthSelect","month","selectedMonths","createElement","Content","align","onYearChange","onSelectMonth"],"sources":["MonthPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MonthPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, formatMonthValue, parseMonthValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { YearStepper } from \"./components/YearStepper.js\";\nimport { MonthGrid } from \"./components/MonthGrid.js\";\n\nconst MonthPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    onOpenChange,\n    className,\n    displayFormat\n}: MonthPickerProps) => {\n    const parsed = value ? parseMonthValue(value) : undefined;\n    const [open, setOpen] = useState(false);\n    const [viewYear, setViewYear] = useState(parsed?.year ?? new Date().getFullYear());\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"month\", displayFormat);\n\n    const handleMonthSelect = (month: number) => {\n        if (onChange) {\n            onChange(formatMonthValue(viewYear, month));\n        }\n        handleOpenChange(false);\n    };\n\n    const selectedMonths = parsed && parsed.year === viewYear ? [parsed.month] : [];\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a month\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <YearStepper year={viewYear} onYearChange={setViewYear} />\n                    <MonthGrid selectedMonths={selectedMonths} onSelectMonth={handleMonthSelect} />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { MonthPicker };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,gBAAgB;AAEzB,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,eAAe;AAChE,SAASC,iBAAiB;AAC1B,SAASC,WAAW;AACpB,SAASC,SAAS;AAElB,MAAMC,WAAW,GAAGA,CAAC;EACjBC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,OAAO;EACPC,YAAY;EACZC,SAAS;EACTC;AACc,CAAC,KAAK;EACpB,MAAMC,MAAM,GAAGV,KAAK,GAAGL,eAAe,CAACK,KAAK,CAAC,GAAGW,SAAS;EACzD,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EACvC,MAAM,CAACuB,QAAQ,EAAEC,WAAW,CAAC,GAAGxB,QAAQ,CAACmB,MAAM,EAAEM,IAAI,IAAI,IAAIC,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAElF,MAAMC,gBAAgB,GAAIC,MAAe,IAAK;IAC1CP,OAAO,CAACO,MAAM,CAAC;IACf,IAAIb,YAAY,EAAE;MACdA,YAAY,CAACa,MAAM,CAAC;IACxB;EACJ,CAAC;EAED,MAAMC,YAAY,GAAG5B,oBAAoB,CAACO,KAAK,EAAE,OAAO,EAAES,aAAa,CAAC;EAExE,MAAMa,iBAAiB,GAAIC,KAAa,IAAK;IACzC,IAAItB,QAAQ,EAAE;MACVA,QAAQ,CAACP,gBAAgB,CAACoB,QAAQ,EAAES,KAAK,CAAC,CAAC;IAC/C;IACAJ,gBAAgB,CAAC,KAAK,CAAC;EAC3B,CAAC;EAED,MAAMK,cAAc,GAAGd,MAAM,IAAIA,MAAM,CAACM,IAAI,KAAKF,QAAQ,GAAG,CAACJ,MAAM,CAACa,KAAK,CAAC,GAAG,EAAE;EAE/E,oBACIjC,KAAA,CAAAmC,aAAA;IAAKjB,SAAS,EAAEA;EAAU,gBACtBlB,KAAA,CAAAmC,aAAA,CAACjC,gBAAgB;IAACoB,IAAI,EAAEA,IAAK;IAACL,YAAY,EAAEY;EAAiB,gBACzD7B,KAAA,CAAAmC,aAAA,CAAC7B,iBAAiB;IACdyB,YAAY,EAAEA,YAAa;IAC3BnB,WAAW,EAAEA,WAAW,IAAI,cAAe;IAC3CC,QAAQ,EAAEA,QAAS;IACnBC,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFhB,KAAA,CAAAmC,aAAA,CAACjC,gBAAgB,CAACkC,OAAO;IAACC,KAAK,EAAC;EAAO,gBACnCrC,KAAA,CAAAmC,aAAA,CAAC5B,WAAW;IAACmB,IAAI,EAAEF,QAAS;IAACc,YAAY,EAAEb;EAAY,CAAE,CAAC,eAC1DzB,KAAA,CAAAmC,aAAA,CAAC3B,SAAS;IAAC0B,cAAc,EAAEA,cAAe;IAACK,aAAa,EAAEP;EAAkB,CAAE,CACxD,CACZ,CACjB,CAAC;AAEd,CAAC;AAED,SAASvB,WAAW","ignoreList":[]}
+{"version":3,"file":"DatePicker/primitives/MonthPicker.js","sources":["../../../src/DatePicker/primitives/MonthPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MonthPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, formatMonthValue, parseMonthValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { YearStepper } from \"./components/YearStepper.js\";\nimport { MonthGrid } from \"./components/MonthGrid.js\";\n\nconst MonthPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    onOpenChange,\n    className,\n    displayFormat\n}: MonthPickerProps) => {\n    const parsed = value ? parseMonthValue(value) : undefined;\n    const [open, setOpen] = useState(false);\n    const [viewYear, setViewYear] = useState(parsed?.year ?? new Date().getFullYear());\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"month\", displayFormat);\n\n    const handleMonthSelect = (month: number) => {\n        if (onChange) {\n            onChange(formatMonthValue(viewYear, month));\n        }\n        handleOpenChange(false);\n    };\n\n    const selectedMonths = parsed && parsed.year === viewYear ? [parsed.month] : [];\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a month\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <YearStepper year={viewYear} onYearChange={setViewYear} />\n                    <MonthGrid selectedMonths={selectedMonths} onSelectMonth={handleMonthSelect} />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { MonthPicker };\n"],"names":["MonthPicker","value","onChange","placeholder","disabled","size","variant","invalid","onOpenChange","className","displayFormat","parsed","parseMonthValue","undefined","open","setOpen","useState","viewYear","setViewYear","Date","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleMonthSelect","month","formatMonthValue","selectedMonths","PopoverPrimitive","DatePickerTrigger","YearStepper","MonthGrid"],"mappings":";;;;;;AAQA,MAAMA,cAAc,CAAC,EACjBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,SAAS,EACTC,aAAa,EACE;IACf,MAAMC,SAASV,QAAQW,gBAAgBX,SAASY;IAChD,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAM,CAACC,UAAUC,YAAY,GAAGF,SAASL,QAAQ,QAAQ,IAAIQ,OAAO,WAAW;IAE/E,MAAMC,mBAAmB,CAACC;QACtBN,QAAQM;QACR,IAAIb,cACAA,aAAaa;IAErB;IAEA,MAAMC,eAAeC,qBAAqBtB,OAAO,SAASS;IAE1D,MAAMc,oBAAoB,CAACC;QACvB,IAAIvB,UACAA,SAASwB,iBAAiBT,UAAUQ;QAExCL,iBAAiB;IACrB;IAEA,MAAMO,iBAAiBhB,UAAUA,OAAO,IAAI,KAAKM,WAAW;QAACN,OAAO,KAAK;KAAC,GAAG,EAAE;IAE/E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWF;qBACZ,oBAACmB,kBAAgBA;QAAC,MAAMd;QAAM,cAAcM;qBACxC,oBAACS,mBAAiBA;QACd,cAAcP;QACd,aAAanB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACqB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,aAAWA;QAAC,MAAMb;QAAU,cAAcC;sBAC3C,oBAACa,WAASA;QAAC,gBAAgBJ;QAAgB,eAAeH;;AAK9E"}

package/DatePicker/primitives/MultipleDatesPicker.js

@@ -1,72 +1,59 @@
-import React, { useState } from "react";
+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");
-const MultipleDatesPicker = ({
-  value: valueProp,
-  onChange,
-  placeholder,
-  disabled,
-  size,
-  variant,
-  invalid,
-  weekStartsOn,
-  onOpenChange,
-  className
-}) => {
-  const value = valueProp ?? [];
-  const [open, setOpen] = useState(false);
-  const handleOpenChange = isOpen => {
-    setOpen(isOpen);
-    if (onOpenChange) {
-      onOpenChange(isOpen);
-    }
-  };
-  const displayValue = formatDateForDisplay(value, "multipleDates");
-  const selectedDates = value.map(s => new Date(s));
-  const handleSelect = dates => {
-    if (onChange) {
-      const sorted = [...(dates ?? [])].sort((a, b) => a.getTime() - b.getTime());
-      onChange(sorted.map(toDateStr));
-    }
-  };
-  const handleRemove = key => {
-    if (onChange) {
-      onChange(value.filter(d => d !== key));
-    }
-  };
-  const tagItems = value.map(d => ({
-    key: d,
-    label: format(new Date(d), "MMM d, yyyy")
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive, {
-    open: open,
-    onOpenChange: handleOpenChange
-  }, /*#__PURE__*/React.createElement(DatePickerTrigger, {
-    displayValue: displayValue,
-    placeholder: placeholder ?? "Pick dates",
-    disabled: disabled,
-    size: size,
-    variant: variant,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
-    align: "start"
-  }, /*#__PURE__*/React.createElement(Calendar, {
-    mode: "multiple",
-    selected: selectedDates,
-    onSelect: handleSelect,
-    weekStartsOn: weekStartsOn
-  }))), /*#__PURE__*/React.createElement(SelectedTagsList, {
-    items: tagItems,
-    onRemove: handleRemove,
-    disabled: disabled
-  }));
+const toDateStr = (d)=>format(d, "yyyy-MM-dd");
+const MultipleDatesPicker = ({ value: valueProp, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className })=>{
+    const value = valueProp ?? [];
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "multipleDates");
+    const selectedDates = value.map((s)=>parseDateValue(s));
+    const handleSelect = (dates)=>{
+        if (onChange) {
+            const sorted = [
+                ...dates ?? []
+            ].sort((a, b)=>a.getTime() - b.getTime());
+            onChange(sorted.map(toDateStr));
+        }
+    };
+    const handleRemove = (key)=>{
+        if (onChange) onChange(value.filter((d)=>d !== key));
+    };
+    const tagItems = value.map((d)=>({
+            key: d,
+            label: format(parseDateValue(d), "MMM d, yyyy")
+        }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick dates",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(Calendar, {
+        mode: "multiple",
+        selected: selectedDates,
+        onSelect: handleSelect,
+        weekStartsOn: weekStartsOn
+    }))), /*#__PURE__*/ react.createElement(SelectedTagsList, {
+        items: tagItems,
+        onRemove: handleRemove,
+        disabled: disabled
+    }));
 };
 export { MultipleDatesPicker };
 

package/DatePicker/primitives/MultipleDatesPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","format","Calendar","PopoverPrimitive","formatDateForDisplay","DatePickerTrigger","SelectedTagsList","toDateStr","d","MultipleDatesPicker","value","valueProp","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","open","setOpen","handleOpenChange","isOpen","displayValue","selectedDates","map","s","Date","handleSelect","dates","sorted","sort","a","b","getTime","handleRemove","key","filter","tagItems","label","createElement","Content","align","mode","selected","onSelect","items","onRemove"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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"}