eidos-ui 4.1.1 → 4.3.0

package/dist/{chunk-FSX7DDLO.js → chunk-BMRZHFDP.js}

@@ -1,12 +1,12 @@
 import {
   Select
-} from "./chunk-2WDL2ZVP.js";
+} from "./chunk-5TRO6CYR.js";
 import {
   Input
 } from "./chunk-GE3QCXT7.js";
 import {
   Dropdown
-} from "./chunk-OERK3T7E.js";
+} from "./chunk-ECP5J27K.js";
 import {
   Button
 } from "./chunk-GHUEVNNU.js";
@@ -530,19 +530,23 @@ var Calendar = ({
   }, []);
   const handleMonthSelect = useCallback(
     (value) => {
-      if (typeof value === "string") {
-        const newDate = currentDate.month(parseInt(value));
-        onMonthChange(newDate);
-      }
+      if (typeof value !== "string") return;
+      const month = Number.parseInt(value, 10);
+      if (!Number.isFinite(month)) return;
+      const newDate = currentDate.month(month);
+      if (!newDate.isValid()) return;
+      onMonthChange(newDate);
     },
     [currentDate, onMonthChange]
   );
   const handleYearSelect = useCallback(
     (value) => {
-      if (typeof value === "string") {
-        const newDate = currentDate.year(parseInt(value));
-        onMonthChange(newDate);
-      }
+      if (typeof value !== "string") return;
+      const year = Number.parseInt(value, 10);
+      if (!Number.isFinite(year)) return;
+      const newDate = currentDate.year(year);
+      if (!newDate.isValid()) return;
+      onMonthChange(newDate);
     },
     [currentDate, onMonthChange]
   );
@@ -651,6 +655,7 @@ var Calendar = ({
           value: currentDate.year().toString(),
           onChange: handleYearSelect,
           clearable: false,
+          fullWidth: true,
           inputProps: { "aria-label": "Year" },
           dropdownProps: {
             dropdownGroup: "calendar-navigation"
@@ -684,6 +689,7 @@ var Calendar = ({
             value: currentDate.month().toString(),
             onChange: handleMonthSelect,
             clearable: false,
+            fullWidth: true,
             inputProps: { "aria-label": "Month" },
             dropdownProps: {
               dropdownGroup: "calendar-navigation"
@@ -697,6 +703,7 @@ var Calendar = ({
             value: currentDate.year().toString(),
             onChange: handleYearSelect,
             clearable: false,
+            fullWidth: true,
             inputProps: { "aria-label": "Year" },
             dropdownProps: {
               dropdownGroup: "calendar-navigation"
@@ -866,6 +873,7 @@ var DatePicker = ({
   value,
   onChange,
   granularity = "day",
+  showActions = false,
   time = { enabled: false },
   calendar = { numberOfCalendars: 2 },
   format = {
@@ -932,6 +940,7 @@ var DatePicker = ({
   );
   const handleCalendarMonthChange = useCallback3(
     (index, newDate) => {
+      if (!newDate.isValid()) return;
       if (!independentCalendars) {
         const anchor = newDate.subtract(index, "month");
         setCalendarDates(
@@ -970,13 +979,30 @@ var DatePicker = ({
     },
     [time.enabled, pickerTimezone]
   );
+  const [draft, setDraft] = useState2(void 0);
+  const wasOpen = useRef(false);
+  useEffect2(() => {
+    if (!showActions) return;
+    if (isOpen && !wasOpen.current)
+      setDraft(value);
+    else if (!isOpen && wasOpen.current) setDraft(void 0);
+    wasOpen.current = isOpen;
+  }, [isOpen, showActions, value]);
+  const effectiveValue = showActions ? draft ?? value : value;
+  const commit = useCallback3(
+    (newValue) => {
+      if (showActions) setDraft(newValue);
+      else onChange?.(newValue);
+    },
+    [showActions, onChange]
+  );
   const { selectedDates, rangeStart, rangeEnd } = useMemo2(() => {
-    if (!value?.date) {
+    if (!effectiveValue?.date) {
       return { selectedDates: [], rangeStart: null, rangeEnd: null };
     }
     switch (mode) {
       case "single": {
-        const isoString = value.date;
+        const isoString = effectiveValue.date;
         const localDateStr = toLocalDateString(isoString);
         return {
           selectedDates: localDateStr ? [(0, import_dayjs2.default)(localDateStr)] : [],
@@ -985,7 +1011,7 @@ var DatePicker = ({
         };
       }
       case "multiple": {
-        const isoStrings = value.date;
+        const isoStrings = effectiveValue.date;
         const localDateStrings = isoStrings.map((d) => toLocalDateString(d)).filter(Boolean);
         return {
           selectedDates: localDateStrings.map((d) => (0, import_dayjs2.default)(d)),
@@ -994,7 +1020,7 @@ var DatePicker = ({
         };
       }
       case "range": {
-        const range = value.date;
+        const range = effectiveValue.date;
         const startStr = toLocalDateString(range.start);
         const endStr = toLocalDateString(range.end);
         return {
@@ -1006,15 +1032,16 @@ var DatePicker = ({
       default:
         return { selectedDates: [], rangeStart: null, rangeEnd: null };
     }
-  }, [value, mode, toLocalDateString]);
+  }, [effectiveValue, mode, toLocalDateString]);
   const handleDateSelect = useCallback3(
     (selectedDate) => {
       const effectiveDate = granularity === "month" ? selectedDate.endOf("month") : selectedDate;
+      const effectiveRangeStart = granularity === "month" ? selectedDate.startOf("month") : selectedDate;
       const compareUnit = granularity === "month" ? "month" : "day";
       switch (mode) {
         case "single": {
           let dateWithTime;
-          const activeTime = value?.time ?? defaultStartTime;
+          const activeTime = effectiveValue?.time ?? defaultStartTime;
           if (time.enabled) {
             dateWithTime = composeLocalDateTime(effectiveDate, activeTime);
           } else {
@@ -1024,45 +1051,45 @@ var DatePicker = ({
             date: dateWithTime.toISOString(),
             time: time.enabled ? activeTime : void 0
           };
-          onChange?.(newValue);
-          setIsOpen(false);
+          commit(newValue);
+          if (!showActions) setIsOpen(false);
           break;
         }
         case "multiple": {
-          const currentDates = value?.date || [];
+          const currentDates = effectiveValue?.date || [];
           const currentDayjs = currentDates.map((d) => (0, import_dayjs2.default)(d));
           const existingIndex = currentDayjs.findIndex((d) => d.isSame(effectiveDate, compareUnit));
           let newDates;
           if (existingIndex >= 0) {
             newDates = currentDayjs.filter((_, index) => index !== existingIndex);
           } else {
-            const activeTime = value?.time ?? defaultStartTime;
+            const activeTime = effectiveValue?.time ?? defaultStartTime;
             const dateWithTime = time.enabled ? composeLocalDateTime(effectiveDate, activeTime) : composeDateOnly(effectiveDate, "start");
             newDates = [...currentDayjs, dateWithTime];
           }
           const newValue = {
             date: newDates.map((d) => d.toISOString()),
-            time: time.enabled ? value?.time ?? defaultStartTime : void 0
+            time: time.enabled ? effectiveValue?.time ?? defaultStartTime : void 0
           };
-          onChange?.(newValue);
+          commit(newValue);
           break;
         }
         case "range": {
-          const currentRange = value?.date || {
+          const currentRange = effectiveValue?.date || {
             start: null,
             end: null
           };
-          const currentRangeTime = value?.time || {
+          const currentRangeTime = effectiveValue?.time || {
             start: defaultStartTime,
             end: defaultEndTime
           };
           if (!currentRange.start || currentRange.start && currentRange.end) {
-            const startWithTime = time.enabled ? composeLocalDateTime(effectiveDate, currentRangeTime.start) : composeDateOnly(effectiveDate, "start");
+            const startWithTime = time.enabled ? composeLocalDateTime(effectiveRangeStart, currentRangeTime.start) : composeDateOnly(effectiveRangeStart, "start");
             const newValue = {
               date: { start: startWithTime.toISOString(), end: null },
               time: time.enabled ? currentRangeTime : void 0
             };
-            onChange?.(newValue);
+            commit(newValue);
           } else {
             const start = time.enabled ? (0, import_dayjs2.default)(currentRange.start) : (0, import_dayjs2.default)(currentRange.start).tz(pickerTimezone);
             let end = effectiveDate;
@@ -1077,8 +1104,8 @@ var DatePicker = ({
               },
               time: time.enabled ? currentRangeTime : void 0
             };
-            onChange?.(newValue);
-            setIsOpen(false);
+            commit(newValue);
+            if (!showActions) setIsOpen(false);
           }
           break;
         }
@@ -1087,8 +1114,9 @@ var DatePicker = ({
     [
       mode,
       time,
-      value,
-      onChange,
+      effectiveValue,
+      commit,
+      showActions,
       defaultStartTime,
       defaultEndTime,
       composeDateOnly,
@@ -1179,11 +1207,24 @@ var DatePicker = ({
           };
         }
       })();
-      onChange?.(clearedValue);
-      setIsOpen(false);
+      if (showActions && isOpen) {
+        setDraft(clearedValue);
+      } else {
+        onChange?.(clearedValue);
+        setIsOpen(false);
+      }
     },
-    [mode, time, onChange, defaultStartTime, defaultEndTime]
+    [mode, time, onChange, showActions, isOpen, defaultStartTime, defaultEndTime]
   );
+  const applyDraft = useCallback3(() => {
+    const next = draft ?? value;
+    if (next !== void 0) onChange?.(next);
+    setIsOpen(false);
+  }, [onChange, draft, value]);
+  const cancelDraft = useCallback3(() => {
+    setIsOpen(false);
+  }, []);
+  const applyDisabled = mode === "range" && !!draft && !!draft.date.start && !draft.date.end;
   const triggerElement = /* @__PURE__ */ jsx3(
     "div",
     {
@@ -1256,15 +1297,15 @@ var DatePicker = ({
       mode === "single" && /* @__PURE__ */ jsx3(
         TimeInput,
         {
-          value: value?.time || defaultStartTime,
+          value: effectiveValue?.time || defaultStartTime,
           onChange: (newTime) => {
-            const currentIso = value?.date;
+            const currentIso = effectiveValue?.date;
             const newValue = {
-              ...value,
+              ...effectiveValue,
               date: currentIso ? recomposeIsoWithTime(currentIso, newTime) : currentIso,
               time: newTime
             };
-            onChange?.(newValue);
+            commit(newValue);
           },
           includeSeconds: time.includeSeconds,
           disabled,
@@ -1274,17 +1315,17 @@ var DatePicker = ({
       mode === "multiple" && /* @__PURE__ */ jsx3(
         TimeInput,
         {
-          value: value?.time || defaultStartTime,
+          value: effectiveValue?.time || defaultStartTime,
           onChange: (newTime) => {
-            const currentDates = value?.date || [];
+            const currentDates = effectiveValue?.date || [];
             const newValue = {
-              ...value,
+              ...effectiveValue,
               date: currentDates.map(
                 (d) => recomposeIsoWithTime(d, newTime)
               ),
               time: newTime
             };
-            onChange?.(newValue);
+            commit(newValue);
           },
           includeSeconds: time.includeSeconds,
           disabled,
@@ -1295,18 +1336,18 @@ var DatePicker = ({
         /* @__PURE__ */ jsx3(
           TimeInput,
           {
-            value: value?.time?.start || defaultStartTime,
+            value: effectiveValue?.time?.start || defaultStartTime,
             onChange: (newTime) => {
-              const currentRangeTime = value?.time || {
+              const currentRangeTime = effectiveValue?.time || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = value?.date || {
+              const currentRange = effectiveValue?.date || {
                 start: null,
                 end: null
               };
               const newValue = {
-                ...value,
+                ...effectiveValue,
                 date: {
                   ...currentRange,
                   start: currentRange.start ? recomposeIsoWithTime(currentRange.start, newTime) : currentRange.start
@@ -1316,7 +1357,7 @@ var DatePicker = ({
                   start: newTime
                 }
               };
-              onChange?.(newValue);
+              commit(newValue);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1326,18 +1367,18 @@ var DatePicker = ({
         /* @__PURE__ */ jsx3(
           TimeInput,
           {
-            value: value?.time?.end || defaultEndTime,
+            value: effectiveValue?.time?.end || defaultEndTime,
             onChange: (newTime) => {
-              const currentRangeTime = value?.time || {
+              const currentRangeTime = effectiveValue?.time || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = value?.date || {
+              const currentRange = effectiveValue?.date || {
                 start: null,
                 end: null
               };
               const newValue = {
-                ...value,
+                ...effectiveValue,
                 date: {
                   ...currentRange,
                   end: currentRange.end ? recomposeIsoWithTime(currentRange.end, newTime) : currentRange.end
@@ -1347,7 +1388,7 @@ var DatePicker = ({
                   end: newTime
                 }
               };
-              onChange?.(newValue);
+              commit(newValue);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1355,6 +1396,10 @@ var DatePicker = ({
           }
         )
       ] })
+    ] }),
+    showActions && /* @__PURE__ */ jsxs3("div", { className: "eidos-date-picker-actions", children: [
+      /* @__PURE__ */ jsx3(Button, { variant: "text", color: "secondary", onClick: cancelDraft, children: "Cancel" }),
+      /* @__PURE__ */ jsx3(Button, { variant: "filled", color: "primary", disabled: applyDisabled, onClick: applyDraft, children: "Apply" })
     ] })
   ] });
   return /* @__PURE__ */ jsx3(
@@ -1388,4 +1433,4 @@ export {
   TimeInput,
   DatePicker
 };
-//# sourceMappingURL=chunk-FSX7DDLO.js.map
+//# sourceMappingURL=chunk-BMRZHFDP.js.map