@superleapai/flow-ui 2.5.15 → 2.5.16

package/components/date-time-picker/date-time-picker.js

@@ -2,6 +2,7 @@
  * Date-time-picker Component (vanilla JS)
  * Combines calendar grid, optional time picker, and quick actions (Today, Tomorrow, No date).
  * Uses Popover, Button, Select, TimePicker; depends on date-time-picker-utils.js.
+ * Value API: Unix epoch milliseconds (number) or undefined — not Date instances.
  */
 
 (function (global) {
@@ -35,6 +36,13 @@
     return Array.prototype.filter.call(arguments, Boolean).join(" ");
   }
 
+  /** @param {unknown} v @returns {number|undefined} epoch ms, or undefined if missing/invalid */
+  function normalizeEpoch(v) {
+    if (v == null || v === "") return undefined;
+    if (typeof v === "number" && !Number.isNaN(v)) return v;
+    return undefined;
+  }
+
   // Mirror input wrapper variant + size behaviour for visual consistency
   var TRIGGER_WRAPPER_CLASS = {
     base:
@@ -280,8 +288,8 @@
   /**
    * Create date-time-picker component
    * @param {Object} config
-   * @param {Date} [config.value] - Current value
-   * @param {Function} [config.onChange] - (date: Date | undefined) => void
+   * @param {number} [config.value] - Current instant as Unix epoch milliseconds
+   * @param {Function} [config.onChange] - (epochMs: number | undefined) => void
    * @param {boolean} [config.disabled]
    * @param {12|24} [config.hourCycle=12]
    * @param {number} [config.yearRange=50]
@@ -305,7 +313,7 @@
       throw new Error("Popover and Button required");
     }
 
-    var value = config.value;
+    var value = normalizeEpoch(config.value);
     var onChange = config.onChange;
     var disabled = !!config.disabled;
     var hourCycle = config.hourCycle === 24 ? 24 : 12;
@@ -318,7 +326,13 @@
     var toDate = config.toDate;
     var align = config.align || "start";
 
-    var validDate = Utils.getValidDate(value, fromDate, toDate);
+    var validDate =
+      value != null ? Utils.getValidDate(new Date(value), fromDate, toDate) : undefined;
+    if (value != null && validDate) {
+      value = validDate.getTime();
+    } else if (value != null && !validDate) {
+      value = undefined;
+    }
     var displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
 
     var triggerWrapper = document.createElement("div");
@@ -362,7 +376,12 @@
     container.appendChild(triggerWrapper);
 
     function updateTriggerText() {
-      validDate = Utils.getValidDate(value, fromDate, toDate);
+      if (value == null) {
+        validDate = undefined;
+      } else {
+        validDate = Utils.getValidDate(new Date(value), fromDate, toDate);
+        if (validDate) value = validDate.getTime();
+      }
       formatted = Utils.formatDateTime(validDate, hourCycle, granularity);
       triggerText.textContent = formatted || placeholder;
       triggerText.classList.toggle("text-typography-quaternary-text", !formatted);
@@ -393,14 +412,15 @@
           out.setHours(validDate.getHours(), validDate.getMinutes(), validDate.getSeconds(), 0);
         }
       }
-      value = Utils.getValidDate(out, fromDate, toDate);
-      validDate = value;
+      var picked = Utils.getValidDate(out, fromDate, toDate);
+      validDate = picked;
+      value = picked != null ? picked.getTime() : undefined;
       updateTriggerText();
       if (onChange) onChange(value);
       setMonth(out);
       if (captionEl && captionEl.setMonth) captionEl.setMonth(displayMonth);
       if (timePickerEl && timePickerEl.updateValue) {
-        timePickerEl.updateValue(Utils.getTimeString(value));
+        timePickerEl.updateValue(Utils.getTimeString(validDate));
       }
       refreshCalendar();
     }
@@ -494,10 +514,11 @@
             isTimeDropdownOpen = false;
           },
           onChange: function (timeStr) {
-            var base = value ? new Date(value.getTime()) : new Date();
+            var base = value != null ? new Date(value) : new Date();
             Utils.setTimeFromString(base, timeStr);
-            value = Utils.getValidDate(base, fromDate, toDate);
-            validDate = value;
+            var next = Utils.getValidDate(base, fromDate, toDate);
+            validDate = next;
+            value = next != null ? next.getTime() : undefined;
             updateTriggerText();
             if (onChange) onChange(value);
           },
@@ -532,14 +553,15 @@
               return;
             }
             var t = granularity === "day" ? Utils.startOfDay(new Date()) : new Date();
-            value = Utils.getValidDate(t, fromDate, toDate);
-            validDate = value;
-            setMonth(value || new Date());
+            var todayValid = Utils.getValidDate(t, fromDate, toDate);
+            validDate = todayValid;
+            value = todayValid != null ? todayValid.getTime() : undefined;
+            setMonth(value != null ? new Date(value) : new Date());
             updateTriggerText();
             if (onChange) onChange(value);
             refreshCalendar();
-            if (timePickerEl && timePickerEl.updateValue && value) {
-              timePickerEl.updateValue(Utils.getTimeString(value));
+            if (timePickerEl && timePickerEl.updateValue && validDate) {
+              timePickerEl.updateValue(Utils.getTimeString(validDate));
             }
           },
         });
@@ -558,14 +580,15 @@
             }
             var t = Utils.addDays(new Date(), 1);
             t = granularity === "day" ? Utils.startOfDay(t) : t;
-            value = Utils.getValidDate(t, fromDate, toDate);
-            validDate = value;
-            setMonth(value || new Date());
+            var tomorrowValid = Utils.getValidDate(t, fromDate, toDate);
+            validDate = tomorrowValid;
+            value = tomorrowValid != null ? tomorrowValid.getTime() : undefined;
+            setMonth(value != null ? new Date(value) : new Date());
             updateTriggerText();
             if (onChange) onChange(value);
             refreshCalendar();
-            if (timePickerEl && timePickerEl.updateValue && value) {
-              timePickerEl.updateValue(Utils.getTimeString(value));
+            if (timePickerEl && timePickerEl.updateValue && validDate) {
+              timePickerEl.updateValue(Utils.getTimeString(validDate));
             }
           },
         });
@@ -644,8 +667,14 @@
       return value;
     };
     container.setValue = function (v) {
-      value = v;
-      validDate = Utils.getValidDate(value, fromDate, toDate);
+      value = normalizeEpoch(v);
+      validDate =
+        value != null ? Utils.getValidDate(new Date(value), fromDate, toDate) : undefined;
+      if (value != null && validDate) {
+        value = validDate.getTime();
+      } else if (value != null && !validDate) {
+        value = undefined;
+      }
       displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
       updateTriggerText();
     };

package/core/flow.js

@@ -417,7 +417,7 @@
    * @param {Object} config - Configuration object
    * @param {string} config.label - Field label
    * @param {string} config.fieldId - State key for this field
-   * @param {Date|string|null} config.value - Initial value (Date or ISO string)
+   * @param {Date|string|number|null} config.value - Initial value (Date, ISO string, or epoch ms)
    * @param {string} config.placeholder - Placeholder text
    * @param {boolean} config.required - Whether field is required
    * @param {Function} config.onChange - Optional change handler
@@ -453,22 +453,34 @@
 
     if (getComponent("DateTimePicker") && getComponent("DateTimePicker").create) {
       const raw = get(fieldId);
-      let currentValue;
-      if (initialValue instanceof Date) {
-        currentValue = initialValue;
+      let currentValueMs;
+      if (typeof initialValue === "number" && !Number.isNaN(initialValue)) {
+        currentValueMs = initialValue;
+      } else if (initialValue instanceof Date) {
+        currentValueMs = initialValue.getTime();
+      } else if (typeof initialValue === "string" && initialValue.trim() !== "") {
+        try {
+          const d = new Date(initialValue);
+          currentValueMs = Number.isNaN(d.getTime()) ? undefined : d.getTime();
+        } catch (e) {
+          currentValueMs = undefined;
+        }
       } else if (raw === null || raw === undefined || raw === "") {
-        currentValue = undefined;
+        currentValueMs = undefined;
       } else {
         try {
-          currentValue = typeof raw === "string" ? new Date(raw) : raw;
-          if (Number.isNaN(currentValue.getTime())) currentValue = undefined;
+          const parsed = typeof raw === "string" ? new Date(raw) : raw;
+          currentValueMs =
+            parsed && typeof parsed.getTime === "function" && !Number.isNaN(parsed.getTime())
+              ? parsed.getTime()
+              : undefined;
         } catch (e) {
-          currentValue = undefined;
+          currentValueMs = undefined;
         }
       }
 
       const picker = getComponent("DateTimePicker").create({
-        value: currentValue,
+        value: currentValueMs,
         placeholder: placeholder || `Pick ${label.toLowerCase()}`,
         disabled,
         hourCycle,
@@ -477,9 +489,9 @@
         variant,
         fromDate,
         toDate,
-        onChange: (date) => {
-          set(fieldId, date ? date.toISOString() : null);
-          if (onChange) onChange(date);
+        onChange: (epochMs) => {
+          set(fieldId, epochMs != null ? new Date(epochMs).toISOString() : null);
+          if (onChange) onChange(epochMs != null ? new Date(epochMs) : undefined);
         },
       });