@superleapai/flow-ui 2.5.15 → 2.5.17

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/components/enum-multiselect.js

@@ -258,7 +258,7 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = "w-full min-w-[200px] max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
 
     // Search input (using InputComponent like enum-select)
     var searchContainer = document.createElement("div");
@@ -319,7 +319,7 @@
     // Options list
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
 
     content.appendChild(searchContainer);
     content.appendChild(optionsList);

package/components/enum-select.js

@@ -231,7 +231,7 @@
     // Create dropdown content
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    content.className = "w-full min-w-[200px] max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
 
     // Search input (using InputComponent like phone-input)
     var searchContainer = document.createElement("div");
@@ -292,7 +292,7 @@
     // Options list
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
 
     content.appendChild(searchContainer);
     content.appendChild(optionsList);

package/components/multiselect.js

@@ -154,11 +154,11 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = "custom-multiselect-content w-full  max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "custom-multiselect-content w-full  max-h-[30vh] overflow-hidden flex flex-col";
 
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
 
     function isSelected(optionValue) {
       return values.some(function (v) {
@@ -263,7 +263,7 @@
       align: "start",
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
-      panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] max-h-[30vh] overflow-hidden",
       onOpen: function () {
         if (disabled) {
           popover.hide();

package/components/popover.js

@@ -143,6 +143,8 @@
       const triggerRect = triggerEl.getBoundingClientRect();
       const panelRect = panel.getBoundingClientRect();
       const gap = 8;
+      const topGap = 24;
+      const viewportPadding = 8;
       const viewportHeight =
         window.innerHeight || document.documentElement.clientHeight;
       const viewportWidth =
@@ -152,32 +154,52 @@
       const spaceRight = viewportWidth - triggerRect.right;
       const spaceLeft = triggerRect.left;
 
-      // Flip placement when there is not enough space (prefer requested side, flip only when needed)
-      let effectivePlacement = placement;
-      if (
-        placement === "bottom" &&
-        spaceBelow < panelRect.height + gap &&
-        spaceAbove >= panelRect.height + gap
-      ) {
-        effectivePlacement = "top";
-      } else if (
-        placement === "top" &&
-        spaceAbove < panelRect.height + gap &&
-        spaceBelow >= panelRect.height + gap
-      ) {
-        effectivePlacement = "bottom";
-      } else if (
-        placement === "right" &&
-        spaceRight < panelRect.width + gap &&
-        spaceLeft >= panelRect.width + gap
-      ) {
-        effectivePlacement = "left";
-      } else if (
-        placement === "left" &&
-        spaceLeft < panelRect.width + gap &&
-        spaceRight >= panelRect.width + gap
-      ) {
-        effectivePlacement = "right";
+      // Normalize placement and resolve to the best side when space is constrained.
+      const normalizedPlacement =
+        placement === "top" ||
+        placement === "bottom" ||
+        placement === "left" ||
+        placement === "right"
+          ? placement
+          : "bottom";
+      const oppositeBySide = {
+        bottom: "top",
+        top: "bottom",
+        right: "left",
+        left: "right",
+      };
+      const requiredSpaceBySide = {
+        bottom: panelRect.height + gap,
+        top: panelRect.height + topGap,
+        right: panelRect.width + gap,
+        left: panelRect.width + gap,
+      };
+      const availableSpaceBySide = {
+        bottom: spaceBelow,
+        top: spaceAbove,
+        right: spaceRight,
+        left: spaceLeft,
+      };
+      const oppositePlacement = oppositeBySide[normalizedPlacement];
+      const preferredFits =
+        availableSpaceBySide[normalizedPlacement] >=
+        requiredSpaceBySide[normalizedPlacement];
+      const oppositeFits =
+        availableSpaceBySide[oppositePlacement] >=
+        requiredSpaceBySide[oppositePlacement];
+
+      let effectivePlacement = normalizedPlacement;
+      if (!preferredFits) {
+        if (oppositeFits) {
+          effectivePlacement = oppositePlacement;
+        } else {
+          // Neither side fully fits: use the side with more available room.
+          effectivePlacement =
+            availableSpaceBySide[normalizedPlacement] >=
+            availableSpaceBySide[oppositePlacement]
+              ? normalizedPlacement
+              : oppositePlacement;
+        }
       }
 
       panel.setAttribute("data-side", effectivePlacement);
@@ -209,7 +231,6 @@
           break;
         case "top": {
           // Larger gap when above the trigger so the popover doesn't overlap it.
-          const topGap = 24;
           top = triggerRect.top - panelRect.height - topGap;
           left = triggerRect.left + alignLeft;
           // Cap panel height so when content loads/tall it doesn't grow downward into the trigger.
@@ -232,6 +253,18 @@
           left = triggerRect.left + alignLeft;
       }
 
+      // Keep popover within viewport on the non-placement axis.
+      const minTop = viewportPadding;
+      const maxTop = viewportHeight - panelRect.height - viewportPadding;
+      if (maxTop >= minTop) {
+        top = Math.min(Math.max(top, minTop), maxTop);
+      }
+      const minLeft = viewportPadding;
+      const maxLeft = viewportWidth - panelRect.width - viewportPadding;
+      if (maxLeft >= minLeft) {
+        left = Math.min(Math.max(left, minLeft), maxLeft);
+      }
+
       wrapper.style.transform = "";
       wrapper.style.top = top + "px";
       wrapper.style.left = left + "px";

package/components/record-multiselect.js

@@ -318,7 +318,7 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = "record-multiselect-content  max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "record-multiselect-content  max-h-[30vh] overflow-hidden flex flex-col";
 
     var searchWrap = document.createElement("div");
     searchWrap.className = "p-8 pb-4 border-b-1/2 border-border-primary ";
@@ -368,7 +368,7 @@
     content.appendChild(searchWrap);
 
     var optionsList = document.createElement("div");
-    optionsList.className = "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
+    optionsList.className = "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
 
     var loadMoreSentinel = null;
     var loadMoreObserver =

package/components/record-select.js

@@ -315,7 +315,7 @@
     content.setAttribute("role", "listbox");
     content.setAttribute("data-field-id", fieldId);
     content.className =
-      "record-select-content  max-h-[45vh] overflow-hidden flex flex-col";
+      "record-select-content  max-h-[30vh] overflow-hidden flex flex-col";
 
     var searchWrap = document.createElement("div");
     searchWrap.className = "py-8 border-b-1/2 border-border-primary";
@@ -366,7 +366,7 @@
 
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
 
     var loadMoreSentinel = null;
     var loadMoreObserver =

package/components/select.js

@@ -86,7 +86,7 @@
     var onClear = config.onClear;
     var popoverWrapperClassName = config.popoverWrapperClassName || "";
     var onOpenCallback = config.onOpenCallback || null;
-    var dropdownMaxHeightVh = config.dropdownMaxHeightVh != null ? config.dropdownMaxHeightVh : 45;
+    var dropdownMaxHeightVh = config.dropdownMaxHeightVh != null ? config.dropdownMaxHeightVh : 30;
 
     var disabled = config.disabled === true;
     var value =
@@ -261,7 +261,7 @@
       align: "start",
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
-      panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] max-h-[30vh] overflow-hidden",
       wrapperClassName: popoverWrapperClassName,
       onOpen: function () {
         if (disabled) {

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);
         },
       });