eidos-ui 4.2.0 → 4.3.0

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

@@ -873,6 +873,7 @@ var DatePicker = ({
   value,
   onChange,
   granularity = "day",
+  showActions = false,
   time = { enabled: false },
   calendar = { numberOfCalendars: 2 },
   format = {
@@ -978,13 +979,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', _12 => _12(newValue)]);
+    },
+    [showActions, onChange]
+  );
   const { selectedDates, rangeStart, rangeEnd } = _react.useMemo.call(void 0, () => {
-    if (!_optionalChain([value, 'optionalAccess', _12 => _12.date])) {
+    if (!_optionalChain([effectiveValue, 'optionalAccess', _13 => _13.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 +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)),
@@ -1002,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 {
@@ -1014,15 +1032,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', _14 => _14.time]), () => ( defaultStartTime));
           if (time.enabled) {
             dateWithTime = composeLocalDateTime(effectiveDate, activeTime);
           } else {
@@ -1032,45 +1051,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', _15 => _15.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', _16 => _16.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', _17 => _17.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', _18 => _18.date]) || {
             start: null,
             end: null
           };
-          const currentRangeTime = _optionalChain([value, 'optionalAccess', _20 => _20.time]) || {
+          const currentRangeTime = _optionalChain([effectiveValue, 'optionalAccess', _19 => _19.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 +1104,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 +1114,9 @@ var DatePicker = ({
     [
       mode,
       time,
-      value,
-      onChange,
+      effectiveValue,
+      commit,
+      showActions,
       defaultStartTime,
       defaultEndTime,
       composeDateOnly,
@@ -1106,7 +1126,7 @@ var DatePicker = ({
     ]
   );
   const displayValue = _react.useMemo.call(void 0, () => {
-    if (!_optionalChain([value, 'optionalAccess', _23 => _23.date])) return "";
+    if (!_optionalChain([value, 'optionalAccess', _20 => _20.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 +1207,24 @@ var DatePicker = ({
           };
         }
       })();
-      _optionalChain([onChange, 'optionalCall', _24 => _24(clearedValue)]);
-      setIsOpen(false);
+      if (showActions && isOpen) {
+        setDraft(clearedValue);
+      } else {
+        _optionalChain([onChange, 'optionalCall', _21 => _21(clearedValue)]);
+        setIsOpen(false);
+      }
     },
-    [mode, time, onChange, defaultStartTime, defaultEndTime]
+    [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', _22 => _22(next)]);
+    setIsOpen(false);
+  }, [onChange, draft, value]);
+  const cancelDraft = _react.useCallback.call(void 0, () => {
+    setIsOpen(false);
+  }, []);
+  const applyDisabled = mode === "range" && !!draft && !!draft.date.start && !draft.date.end;
   const triggerElement = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
@@ -1264,15 +1297,15 @@ var DatePicker = ({
       mode === "single" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         TimeInput,
         {
-          value: _optionalChain([value, 'optionalAccess', _25 => _25.time]) || defaultStartTime,
+          value: _optionalChain([effectiveValue, 'optionalAccess', _23 => _23.time]) || defaultStartTime,
           onChange: (newTime) => {
-            const currentIso = _optionalChain([value, 'optionalAccess', _26 => _26.date]);
+            const currentIso = _optionalChain([effectiveValue, 'optionalAccess', _24 => _24.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 +1315,17 @@ var DatePicker = ({
       mode === "multiple" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         TimeInput,
         {
-          value: _optionalChain([value, 'optionalAccess', _28 => _28.time]) || defaultStartTime,
+          value: _optionalChain([effectiveValue, 'optionalAccess', _25 => _25.time]) || defaultStartTime,
           onChange: (newTime) => {
-            const currentDates = _optionalChain([value, 'optionalAccess', _29 => _29.date]) || [];
+            const currentDates = _optionalChain([effectiveValue, 'optionalAccess', _26 => _26.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 +1336,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', _27 => _27.time, 'optionalAccess', _28 => _28.start]) || defaultStartTime,
             onChange: (newTime) => {
-              const currentRangeTime = _optionalChain([value, 'optionalAccess', _33 => _33.time]) || {
+              const currentRangeTime = _optionalChain([effectiveValue, 'optionalAccess', _29 => _29.time]) || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = _optionalChain([value, 'optionalAccess', _34 => _34.date]) || {
+              const currentRange = _optionalChain([effectiveValue, 'optionalAccess', _30 => _30.date]) || {
                 start: null,
                 end: null
               };
               const newValue = {
-                ...value,
+                ...effectiveValue,
                 date: {
                   ...currentRange,
                   start: currentRange.start ? recomposeIsoWithTime(currentRange.start, newTime) : currentRange.start
@@ -1324,7 +1357,7 @@ var DatePicker = ({
                   start: newTime
                 }
               };
-              _optionalChain([onChange, 'optionalCall', _35 => _35(newValue)]);
+              commit(newValue);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1334,18 +1367,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', _31 => _31.time, 'optionalAccess', _32 => _32.end]) || defaultEndTime,
             onChange: (newTime) => {
-              const currentRangeTime = _optionalChain([value, 'optionalAccess', _38 => _38.time]) || {
+              const currentRangeTime = _optionalChain([effectiveValue, 'optionalAccess', _33 => _33.time]) || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = _optionalChain([value, 'optionalAccess', _39 => _39.date]) || {
+              const currentRange = _optionalChain([effectiveValue, 'optionalAccess', _34 => _34.date]) || {
                 start: null,
                 end: null
               };
               const newValue = {
-                ...value,
+                ...effectiveValue,
                 date: {
                   ...currentRange,
                   end: currentRange.end ? recomposeIsoWithTime(currentRange.end, newTime) : currentRange.end
@@ -1355,7 +1388,7 @@ var DatePicker = ({
                   end: newTime
                 }
               };
-              _optionalChain([onChange, 'optionalCall', _40 => _40(newValue)]);
+              commit(newValue);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1363,6 +1396,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 +1433,4 @@ DatePicker.displayName = "DatePicker";
 
 
 exports.Calendar = Calendar; exports.TimeInput = TimeInput; exports.DatePicker = DatePicker;
-//# sourceMappingURL=chunk-J2GJGXGH.cjs.map
+//# sourceMappingURL=chunk-QKCYXFET.cjs.map