eidos-ui 4.2.0 → 4.4.0

package/dist/{chunk-J2GJGXGH.cjs → chunk-Z5B7OTPL.cjs}

@@ -868,11 +868,30 @@ var TimeInput = ({
 
 import_dayjs2.default.extend(import_utc.default);
 import_dayjs2.default.extend(import_timezone.default);
+function presetDateEquals(presetDate, currentDate, mode, toKey) {
+  const key = (iso) => typeof iso === "string" ? toKey(iso) : null;
+  switch (mode) {
+    case "range": {
+      const a = presetDate;
+      const b = currentDate;
+      return key(_optionalChain([a, 'optionalAccess', _10 => _10.start])) === key(_optionalChain([b, 'optionalAccess', _11 => _11.start])) && key(_optionalChain([a, 'optionalAccess', _12 => _12.end])) === key(_optionalChain([b, 'optionalAccess', _13 => _13.end]));
+    }
+    case "multiple": {
+      const a = (Array.isArray(presetDate) ? presetDate : []).map(key).sort();
+      const b = (Array.isArray(currentDate) ? currentDate : []).map(key).sort();
+      return a.length === b.length && a.every((k, i) => k === b[i]);
+    }
+    default:
+      return key(presetDate) === key(currentDate);
+  }
+}
 var DatePicker = ({
   mode,
   value,
   onChange,
   granularity = "day",
+  showActions = false,
+  presets,
   time = { enabled: false },
   calendar = { numberOfCalendars: 2 },
   format = {
@@ -908,7 +927,7 @@ var DatePicker = ({
   _react.useEffect.call(void 0, () => {
     const element = fieldRef.current;
     if (!element) return;
-    const named = (_nullishCoalesce(_optionalChain([element, 'access', _10 => _10.labels, 'optionalAccess', _11 => _11.length]), () => ( 0))) > 0 || element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
+    const named = (_nullishCoalesce(_optionalChain([element, 'access', _14 => _14.labels, 'optionalAccess', _15 => _15.length]), () => ( 0))) > 0 || element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
     if (!named) {
       _chunkR5WI5IGRcjs.devWarn.call(void 0, 
         "date-picker-missing-label",
@@ -978,13 +997,30 @@ var DatePicker = ({
     },
     [time.enabled, pickerTimezone]
   );
+  const [draft, setDraft] = _react.useState.call(void 0, void 0);
+  const wasOpen = _react.useRef.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    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 ? _nullishCoalesce(draft, () => ( value)) : value;
+  const commit = _react.useCallback.call(void 0, 
+    (newValue) => {
+      if (showActions) setDraft(newValue);
+      else _optionalChain([onChange, 'optionalCall', _16 => _16(newValue)]);
+    },
+    [showActions, onChange]
+  );
   const { selectedDates, rangeStart, rangeEnd } = _react.useMemo.call(void 0, () => {
-    if (!_optionalChain([value, 'optionalAccess', _12 => _12.date])) {
+    if (!_optionalChain([effectiveValue, 'optionalAccess', _17 => _17.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)] : [],
@@ -993,7 +1029,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)),
@@ -1002,7 +1038,7 @@ var DatePicker = ({
         };
       }
       case "range": {
-        const range = value.date;
+        const range = effectiveValue.date;
         const startStr = toLocalDateString(range.start);
         const endStr = toLocalDateString(range.end);
         return {
@@ -1014,15 +1050,16 @@ var DatePicker = ({
       default:
         return { selectedDates: [], rangeStart: null, rangeEnd: null };
     }
-  }, [value, mode, toLocalDateString]);
+  }, [effectiveValue, mode, toLocalDateString]);
   const handleDateSelect = _react.useCallback.call(void 0, 
     (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 = _nullishCoalesce(_optionalChain([value, 'optionalAccess', _13 => _13.time]), () => ( defaultStartTime));
+          const activeTime = _nullishCoalesce(_optionalChain([effectiveValue, 'optionalAccess', _18 => _18.time]), () => ( defaultStartTime));
           if (time.enabled) {
             dateWithTime = composeLocalDateTime(effectiveDate, activeTime);
           } else {
@@ -1032,45 +1069,45 @@ var DatePicker = ({
             date: dateWithTime.toISOString(),
             time: time.enabled ? activeTime : void 0
           };
-          _optionalChain([onChange, 'optionalCall', _14 => _14(newValue)]);
-          setIsOpen(false);
+          commit(newValue);
+          if (!showActions) setIsOpen(false);
           break;
         }
         case "multiple": {
-          const currentDates = _optionalChain([value, 'optionalAccess', _15 => _15.date]) || [];
+          const currentDates = _optionalChain([effectiveValue, 'optionalAccess', _19 => _19.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 = _nullishCoalesce(_optionalChain([value, 'optionalAccess', _16 => _16.time]), () => ( defaultStartTime));
+            const activeTime = _nullishCoalesce(_optionalChain([effectiveValue, 'optionalAccess', _20 => _20.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 ? _nullishCoalesce(_optionalChain([value, 'optionalAccess', _17 => _17.time]), () => ( defaultStartTime)) : void 0
+            time: time.enabled ? _nullishCoalesce(_optionalChain([effectiveValue, 'optionalAccess', _21 => _21.time]), () => ( defaultStartTime)) : void 0
           };
-          _optionalChain([onChange, 'optionalCall', _18 => _18(newValue)]);
+          commit(newValue);
           break;
         }
         case "range": {
-          const currentRange = _optionalChain([value, 'optionalAccess', _19 => _19.date]) || {
+          const currentRange = _optionalChain([effectiveValue, 'optionalAccess', _22 => _22.date]) || {
             start: null,
             end: null
           };
-          const currentRangeTime = _optionalChain([value, 'optionalAccess', _20 => _20.time]) || {
+          const currentRangeTime = _optionalChain([effectiveValue, 'optionalAccess', _23 => _23.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
             };
-            _optionalChain([onChange, 'optionalCall', _21 => _21(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;
@@ -1085,8 +1122,8 @@ var DatePicker = ({
               },
               time: time.enabled ? currentRangeTime : void 0
             };
-            _optionalChain([onChange, 'optionalCall', _22 => _22(newValue)]);
-            setIsOpen(false);
+            commit(newValue);
+            if (!showActions) setIsOpen(false);
           }
           break;
         }
@@ -1095,8 +1132,9 @@ var DatePicker = ({
     [
       mode,
       time,
-      value,
-      onChange,
+      effectiveValue,
+      commit,
+      showActions,
       defaultStartTime,
       defaultEndTime,
       composeDateOnly,
@@ -1106,7 +1144,7 @@ var DatePicker = ({
     ]
   );
   const displayValue = _react.useMemo.call(void 0, () => {
-    if (!_optionalChain([value, 'optionalAccess', _23 => _23.date])) return "";
+    if (!_optionalChain([value, 'optionalAccess', _24 => _24.date])) return "";
     const displayFmt = format.displayFormat || (granularity === "month" ? "MMM YYYY" : "MMM DD, YYYY");
     const parseDateOnlyAware = (iso) => time.enabled ? (0, import_dayjs2.default)(iso) : (0, import_dayjs2.default)(iso).tz(pickerTimezone);
     switch (mode) {
@@ -1187,11 +1225,42 @@ var DatePicker = ({
           };
         }
       })();
-      _optionalChain([onChange, 'optionalCall', _24 => _24(clearedValue)]);
-      setIsOpen(false);
+      if (showActions && isOpen) {
+        setDraft(clearedValue);
+      } else {
+        _optionalChain([onChange, 'optionalCall', _25 => _25(clearedValue)]);
+        setIsOpen(false);
+      }
+    },
+    [mode, time, onChange, showActions, isOpen, defaultStartTime, defaultEndTime]
+  );
+  const applyDraft = _react.useCallback.call(void 0, () => {
+    const next = _nullishCoalesce(draft, () => ( value));
+    if (next !== void 0) _optionalChain([onChange, 'optionalCall', _26 => _26(next)]);
+    setIsOpen(false);
+  }, [onChange, draft, value]);
+  const cancelDraft = _react.useCallback.call(void 0, () => {
+    setIsOpen(false);
+  }, []);
+  const presetCompareKey = _react.useCallback.call(void 0, 
+    (iso) => {
+      const day = toLocalDateString(iso);
+      return day ? granularity === "month" ? day.slice(0, 7) : day : "";
     },
-    [mode, time, onChange, defaultStartTime, defaultEndTime]
+    [toLocalDateString, granularity]
   );
+  const handlePresetSelect = _react.useCallback.call(void 0, 
+    (preset) => {
+      const newValue = {
+        date: preset.getValue(),
+        time: time.enabled ? _optionalChain([effectiveValue, 'optionalAccess', _27 => _27.time]) : void 0
+      };
+      commit(newValue);
+      if (!showActions) setIsOpen(false);
+    },
+    [time.enabled, effectiveValue, commit, showActions]
+  );
+  const applyDisabled = mode === "range" && !!draft && !!draft.date.start && !draft.date.end;
   const triggerElement = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
@@ -1236,43 +1305,65 @@ var DatePicker = ({
     }
   );
   const dropdownContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: panelRef, id: panelId, className: "eidos-date-picker-content", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-date-picker-calendars-wrapper", children: Array.from({ length: numberOfCalendars }, (_, index) => {
-      const calendarDate = _nullishCoalesce(calendarDates[index], () => ( (0, import_dayjs2.default)().add(index, "month")));
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Calendar,
-        {
-          currentDate: calendarDate,
-          selectedDates,
-          rangeStart,
-          rangeEnd,
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-date-picker-calendars-wrapper", children: [
+      presets && presets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-date-picker-presets", role: "group", "aria-label": "Quick ranges", children: presets.map((preset) => {
+        const active = presetDateEquals(
+          preset.getValue(),
+          _optionalChain([effectiveValue, 'optionalAccess', _28 => _28.date]),
           mode,
-          granularity,
-          onDateSelect: handleDateSelect,
-          onMonthChange: (newDate) => handleCalendarMonthChange(index, newDate),
-          minDate: minDateObj,
-          maxDate: maxDateObj,
-          disabledDates: disabledDatesObj,
-          disabledDaysOfWeek,
-          showWeekNumbers: calendar.showWeekNumbers,
-          firstDayOfWeek: calendar.firstDayOfWeek,
-          showNavigation: independentCalendars || index === 0
-        },
-        index
-      );
-    }) }),
+          presetCompareKey
+        );
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkNSA7ASZ7cjs.Button,
+          {
+            size: "sm",
+            variant: active ? "filled" : "outlined",
+            color: "primary",
+            "aria-pressed": active,
+            onClick: () => handlePresetSelect(preset),
+            children: preset.label
+          },
+          preset.id
+        );
+      }) }),
+      Array.from({ length: numberOfCalendars }, (_, index) => {
+        const calendarDate = _nullishCoalesce(calendarDates[index], () => ( (0, import_dayjs2.default)().add(index, "month")));
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Calendar,
+          {
+            currentDate: calendarDate,
+            selectedDates,
+            rangeStart,
+            rangeEnd,
+            mode,
+            granularity,
+            onDateSelect: handleDateSelect,
+            onMonthChange: (newDate) => handleCalendarMonthChange(index, newDate),
+            minDate: minDateObj,
+            maxDate: maxDateObj,
+            disabledDates: disabledDatesObj,
+            disabledDaysOfWeek,
+            showWeekNumbers: calendar.showWeekNumbers,
+            firstDayOfWeek: calendar.firstDayOfWeek,
+            showNavigation: independentCalendars || index === 0
+          },
+          index
+        );
+      })
+    ] }),
     time.enabled && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-date-picker-time-container", children: [
       mode === "single" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         TimeInput,
         {
-          value: _optionalChain([value, 'optionalAccess', _25 => _25.time]) || defaultStartTime,
+          value: _optionalChain([effectiveValue, 'optionalAccess', _29 => _29.time]) || defaultStartTime,
           onChange: (newTime) => {
-            const currentIso = _optionalChain([value, 'optionalAccess', _26 => _26.date]);
+            const currentIso = _optionalChain([effectiveValue, 'optionalAccess', _30 => _30.date]);
             const newValue = {
-              ...value,
+              ...effectiveValue,
               date: currentIso ? recomposeIsoWithTime(currentIso, newTime) : currentIso,
               time: newTime
             };
-            _optionalChain([onChange, 'optionalCall', _27 => _27(newValue)]);
+            commit(newValue);
           },
           includeSeconds: time.includeSeconds,
           disabled,
@@ -1282,17 +1373,17 @@ var DatePicker = ({
       mode === "multiple" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         TimeInput,
         {
-          value: _optionalChain([value, 'optionalAccess', _28 => _28.time]) || defaultStartTime,
+          value: _optionalChain([effectiveValue, 'optionalAccess', _31 => _31.time]) || defaultStartTime,
           onChange: (newTime) => {
-            const currentDates = _optionalChain([value, 'optionalAccess', _29 => _29.date]) || [];
+            const currentDates = _optionalChain([effectiveValue, 'optionalAccess', _32 => _32.date]) || [];
             const newValue = {
-              ...value,
+              ...effectiveValue,
               date: currentDates.map(
                 (d) => recomposeIsoWithTime(d, newTime)
               ),
               time: newTime
             };
-            _optionalChain([onChange, 'optionalCall', _30 => _30(newValue)]);
+            commit(newValue);
           },
           includeSeconds: time.includeSeconds,
           disabled,
@@ -1303,18 +1394,18 @@ var DatePicker = ({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TimeInput,
           {
-            value: _optionalChain([value, 'optionalAccess', _31 => _31.time, 'optionalAccess', _32 => _32.start]) || defaultStartTime,
+            value: _optionalChain([effectiveValue, 'optionalAccess', _33 => _33.time, 'optionalAccess', _34 => _34.start]) || defaultStartTime,
             onChange: (newTime) => {
-              const currentRangeTime = _optionalChain([value, 'optionalAccess', _33 => _33.time]) || {
+              const currentRangeTime = _optionalChain([effectiveValue, 'optionalAccess', _35 => _35.time]) || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = _optionalChain([value, 'optionalAccess', _34 => _34.date]) || {
+              const currentRange = _optionalChain([effectiveValue, 'optionalAccess', _36 => _36.date]) || {
                 start: null,
                 end: null
               };
               const newValue = {
-                ...value,
+                ...effectiveValue,
                 date: {
                   ...currentRange,
                   start: currentRange.start ? recomposeIsoWithTime(currentRange.start, newTime) : currentRange.start
@@ -1324,7 +1415,7 @@ var DatePicker = ({
                   start: newTime
                 }
               };
-              _optionalChain([onChange, 'optionalCall', _35 => _35(newValue)]);
+              commit(newValue);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1334,18 +1425,18 @@ var DatePicker = ({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TimeInput,
           {
-            value: _optionalChain([value, 'optionalAccess', _36 => _36.time, 'optionalAccess', _37 => _37.end]) || defaultEndTime,
+            value: _optionalChain([effectiveValue, 'optionalAccess', _37 => _37.time, 'optionalAccess', _38 => _38.end]) || defaultEndTime,
             onChange: (newTime) => {
-              const currentRangeTime = _optionalChain([value, 'optionalAccess', _38 => _38.time]) || {
+              const currentRangeTime = _optionalChain([effectiveValue, 'optionalAccess', _39 => _39.time]) || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = _optionalChain([value, 'optionalAccess', _39 => _39.date]) || {
+              const currentRange = _optionalChain([effectiveValue, 'optionalAccess', _40 => _40.date]) || {
                 start: null,
                 end: null
               };
               const newValue = {
-                ...value,
+                ...effectiveValue,
                 date: {
                   ...currentRange,
                   end: currentRange.end ? recomposeIsoWithTime(currentRange.end, newTime) : currentRange.end
@@ -1355,7 +1446,7 @@ var DatePicker = ({
                   end: newTime
                 }
               };
-              _optionalChain([onChange, 'optionalCall', _40 => _40(newValue)]);
+              commit(newValue);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1363,6 +1454,10 @@ var DatePicker = ({
           }
         )
       ] })
+    ] }),
+    showActions && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-date-picker-actions", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNSA7ASZ7cjs.Button, { variant: "text", color: "secondary", onClick: cancelDraft, children: "Cancel" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNSA7ASZ7cjs.Button, { variant: "filled", color: "primary", disabled: applyDisabled, onClick: applyDraft, children: "Apply" })
     ] })
   ] });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1396,4 +1491,4 @@ DatePicker.displayName = "DatePicker";
 
 
 exports.Calendar = Calendar; exports.TimeInput = TimeInput; exports.DatePicker = DatePicker;
-//# sourceMappingURL=chunk-J2GJGXGH.cjs.map
+//# sourceMappingURL=chunk-Z5B7OTPL.cjs.map