@superleapai/flow-ui 2.2.8 → 2.2.10

package/components/record-select.js

@@ -1,7 +1,7 @@
 /**
  * Record Select Component (superleap-flow)
  * Single-record select with search; same trigger/content styling as Select.
- * Uses: Popover (dropdown), InputComponent (search), Spinner (loading), Avatar (vivid for user).
+ * Uses Popover for dropdown (required), InputComponent (search), Spinner (loading), Avatar (vivid for user).
  * Fetches records via superleapClient.getSdk().model(objectSlug).
  * For objectSlug === 'user' shows Vivid Avatar; otherwise static icon from schema or object map (database fallback).
  * Does not use icon from backend payload.
@@ -23,7 +23,7 @@
     role: { iconStr: "IconShield", color: "info" },
     iframe: { iconStr: "IconLayout", color: "neutral" },
     lead: { iconStr: "IconUser", color: "primary" },
-    opportunity: { iconStr: "IconCurrencyDollar", color: "success" },
+    opportunity: { iconStr: "IconStar", color: "success" },
     call_log: { iconStr: "IconPhone", color: "info" },
     communication: { iconStr: "IconMessage", color: "primary" },
     history_field: { iconStr: "IconClock", color: "neutral" },
@@ -170,6 +170,12 @@
       errEl.textContent = "Record select: objectSlug is required.";
       return errEl;
     }
+    if (!Popover || typeof Popover.create !== "function") {
+      var popoverErr = document.createElement("div");
+      popoverErr.className = "text-reg-13 text-typography-quaternary-text";
+      popoverErr.textContent = "Record select: Popover is required.";
+      return popoverErr;
+    }
 
     var container = document.createElement("div");
     container.className = "record-select relative w-full group";
@@ -182,16 +188,11 @@
     var isOpen = false;
     var searchTerm = "";
     var searchDebounceTimer = null;
-    var usePopover = Popover && typeof Popover.create === "function";
     var popover = null;
     var hasMoreRecords = true;
     var currentPage = 1;
     var isFetchingMore = false;
     var totalFetched = 0;
-    var contentBase = "record-select-content min-w-[8rem] ";
-    if (!usePopover) {
-      contentBase += "absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible ";
-    }
 
     // Trigger wrapper + button (same structure as Select)
     var triggerWrapper = document.createElement("span");
@@ -257,7 +258,7 @@
     // Dropdown content: search + list (same content pattern as Select)
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    content.className = contentBase + (usePopover ? "max-h-[30vh] overflow-hidden flex flex-col" : "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0");
+    content.className = "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";
@@ -324,57 +325,51 @@
     
     content.appendChild(optionsList);
 
-    if (!usePopover) {
-      container.appendChild(content);
-    }
-
-    if (usePopover) {
-      popover = Popover.create({
-        trigger: trigger,
-        content: content,
-        placement: "bottom",
-        align: "start",
-        closeOnClickOutside: true,
-        bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "max-h-[30vh] overflow-hidden",
-        onOpen: function () {
-          if (disabled) {
-            popover.hide();
-            return;
-          }
-          document.querySelectorAll(".custom-select.open, .record-select.open").forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger");
-              if (t) t.setAttribute("aria-expanded", "false");
-            }
-          });
-          isOpen = true;
-          container.classList.add("open");
-          trigger.setAttribute("aria-expanded", "true");
-          searchTerm = "";
-          if (searchInputWrapper) searchInputWrapper.setValue("");
-          else if (searchInputEl) searchInputEl.value = "";
-          content.style.minWidth = trigger.offsetWidth + "px";
-          loadInitialAndRender();
-          setTimeout(function () {
-            if (searchInputEl) searchInputEl.focus();
-          }, 0);
-        },
-        onClose: function () {
-          isOpen = false;
-          container.classList.remove("open");
-          trigger.setAttribute("aria-expanded", "false");
-          searchTerm = "";
-          if (searchInputWrapper) searchInputWrapper.setValue("");
-          else if (searchInputEl) searchInputEl.value = "";
-          if (searchDebounceTimer) {
-            clearTimeout(searchDebounceTimer);
-            searchDebounceTimer = null;
+    popover = Popover.create({
+      trigger: trigger,
+      content: content,
+      placement: "bottom",
+      align: "start",
+      closeOnClickOutside: true,
+      bodyClassName: "p-0 overflow-hidden",
+      panelClassName: "max-h-[30vh] overflow-hidden",
+      onOpen: function () {
+        if (disabled) {
+          popover.hide();
+          return;
+        }
+        document.querySelectorAll(".custom-select.open, .record-select.open").forEach(function (other) {
+          if (other !== container) {
+            other.classList.remove("open");
+            var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger");
+            if (t) t.setAttribute("aria-expanded", "false");
           }
-        },
-      });
-    }
+        });
+        isOpen = true;
+        container.classList.add("open");
+        trigger.setAttribute("aria-expanded", "true");
+        searchTerm = "";
+        if (searchInputWrapper) searchInputWrapper.setValue("");
+        else if (searchInputEl) searchInputEl.value = "";
+        content.style.minWidth = trigger.offsetWidth + "px";
+        loadInitialAndRender();
+        setTimeout(function () {
+          if (searchInputEl) searchInputEl.focus();
+        }, 0);
+      },
+      onClose: function () {
+        isOpen = false;
+        container.classList.remove("open");
+        trigger.setAttribute("aria-expanded", "false");
+        searchTerm = "";
+        if (searchInputWrapper) searchInputWrapper.setValue("");
+        else if (searchInputEl) searchInputEl.value = "";
+        if (searchDebounceTimer) {
+          clearTimeout(searchDebounceTimer);
+          searchDebounceTimer = null;
+        }
+      },
+    });
 
     if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
 
@@ -791,62 +786,11 @@
 
     function openDropdown() {
       if (disabled) return;
-      if (usePopover && popover) {
-        popover.show();
-        return;
-      }
-      document
-        .querySelectorAll(".custom-select.open, .record-select.open")
-        .forEach(function (other) {
-          if (other !== container) {
-            other.classList.remove("open");
-            var t = other.querySelector(
-              "button, .custom-select-trigger, .record-select-trigger"
-            );
-            if (t) t.setAttribute("aria-expanded", "false");
-          }
-        });
-      isOpen = true;
-      container.classList.add("open");
-      trigger.setAttribute("aria-expanded", "true");
-      searchTerm = "";
-      if (searchInputWrapper) searchInputWrapper.setValue("");
-      else if (searchInputEl) searchInputEl.value = "";
-      loadInitialAndRender();
-      setTimeout(function () {
-        if (searchInputEl) searchInputEl.focus();
-      }, 0);
-      updatePosition();
+      popover.show();
     }
 
     function closeDropdown() {
-      if (usePopover && popover) {
-        popover.hide();
-        return;
-      }
-      isOpen = false;
-      container.classList.remove("open");
-      trigger.setAttribute("aria-expanded", "false");
-      searchTerm = "";
-      if (searchInputWrapper) searchInputWrapper.setValue("");
-      else if (searchInputEl) searchInputEl.value = "";
-      if (searchDebounceTimer) {
-        clearTimeout(searchDebounceTimer);
-        searchDebounceTimer = null;
-      }
-    }
-
-    function updatePosition() {
-      if (usePopover) return;
-      var rect = trigger.getBoundingClientRect();
-      var vh = window.innerHeight;
-      var below = vh - rect.bottom;
-      var above = rect.top;
-      if (below < 200 && above > below) {
-        content.className = contentBase + "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
-      } else {
-        content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
-      }
+      popover.hide();
     }
 
     if (!searchInputWrapper && searchInputEl) {
@@ -865,41 +809,14 @@
       });
     }
 
-    if (usePopover && popover) {
-      trigger.addEventListener("keydown", function (e) {
-        if (disabled) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          if (isOpen) popover.hide();
-          else popover.show();
-        }
-      });
-    } else {
-      trigger.addEventListener("click", function (e) {
+    trigger.addEventListener("keydown", function (e) {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        e.stopPropagation();
-        if (isOpen) closeDropdown();
-        else openDropdown();
-      });
-      trigger.addEventListener("keydown", function (e) {
-        if (disabled) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          if (isOpen) closeDropdown();
-          else openDropdown();
-        }
-        if (e.key === "Escape" && isOpen) {
-          e.preventDefault();
-          closeDropdown();
-        }
-      });
-      document.addEventListener("click", function (e) {
-        if (isOpen && !container.contains(e.target)) closeDropdown();
-      });
-      document.addEventListener("keydown", function (e) {
-        if (e.key === "Escape" && isOpen) closeDropdown();
-      });
-    }
+        if (isOpen) popover.hide();
+        else popover.show();
+      }
+    });
 
     container.updateValue = function (newVal) {
       setValue(newVal);

package/components/select.js

@@ -52,6 +52,14 @@
     return Array.prototype.filter.call(arguments, Boolean).join(" ");
   }
 
+  function getDep(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
   /**
    * Create a custom select component
    * @param {Object} config
@@ -81,6 +89,11 @@
     var value =
       config.value !== undefined && config.value !== null ? config.value : "";
 
+    var Popover = getDep("Popover");
+    if (!Popover || typeof Popover.create !== "function") {
+      throw new Error("Select requires Popover");
+    }
+
     var selectedOption = options.find(function (opt) {
       var optValue =
         opt.value !== undefined && opt.value !== null
@@ -180,11 +193,7 @@
 
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    var contentBase =
-      "custom-select-content absolute left-0 right-0 z-50 max-h-[200px] min-w-[8rem] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out " +
-      "group-[.open]:opacity-100 group-[.open]:visible ";
-    content.className =
-      contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+    content.className = "custom-select-content w-full max-h-[200px] overflow-hidden flex flex-col";
 
     var optionsList = document.createElement("div");
     optionsList.className =
@@ -238,47 +247,66 @@
     }
 
     content.appendChild(optionsList);
-    container.appendChild(content);
 
-    var isOpen = false;
     var highlightedIndex = -1;
+    var popover = Popover.create({
+      trigger: trigger,
+      content: content,
+      placement: "bottom",
+      align: "start",
+      closeOnClickOutside: true,
+      bodyClassName: "p-0 overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
+      onOpen: function () {
+        if (disabled) {
+          popover.hide();
+          return;
+        }
+        document
+          .querySelectorAll(".custom-select, .record-select, .enum-select, .enum-multiselect, .custom-multiselect, .record-multiselect")
+          .forEach(function (other) {
+            if (other !== container && other.popoverInstance) {
+              other.popoverInstance.hide();
+            }
+          });
+        trigger.setAttribute("aria-expanded", "true");
+        chevron.style.transform = "rotate(180deg)";
+        highlightOptionByValue(value);
+        if (popover.panel) {
+          var triggerWidthPx = trigger.offsetWidth + "px";
+          popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
+          popover.panel.style.minWidth = triggerWidthPx;
+          popover.panel.style.width = triggerWidthPx;
+        }
+      },
+      onClose: function () {
+        trigger.setAttribute("aria-expanded", "false");
+        chevron.style.transform = "";
+        highlightedIndex = -1;
+      },
+    });
+    container.popoverInstance = popover;
 
     function openDropdown() {
       if (disabled) return;
-      document
-        .querySelectorAll(".custom-select.open, .record-select.open")
-        .forEach(function (other) {
-          if (other !== container) {
-            other.classList.remove("open");
-            var t = other.querySelector(
-              "button, .custom-select-trigger, .record-select-trigger"
-            );
-            if (t) t.setAttribute("aria-expanded", "false");
-          }
-        });
-      isOpen = true;
-      container.classList.add("open");
-      trigger.setAttribute("aria-expanded", "true");
-      highlightOptionByValue(value);
-      updatePosition();
+      popover.show();
     }
 
     function closeDropdown() {
-      isOpen = false;
-      container.classList.remove("open");
-      trigger.setAttribute("aria-expanded", "false");
+      popover.hide();
       highlightedIndex = -1;
     }
 
     function toggleDropdown() {
+      var isVisible = popover.element && popover.element.classList.contains("visible");
       var others = document.querySelectorAll(
-        ".custom-select.open, .record-select.open"
+        ".custom-select, .record-select, .enum-select, .enum-multiselect, .custom-multiselect, .record-multiselect"
       );
       var hasOther = Array.from(others).some(function (s) {
-        return s !== container;
+        return s !== container && s.popoverInstance && s.popoverInstance.element && s.popoverInstance.element.classList.contains("visible");
       });
       if (hasOther) openDropdown();
-      else if (isOpen) closeDropdown();
+      else if (isVisible) closeDropdown();
       else openDropdown();
     }
 
@@ -357,40 +385,26 @@
 
     function scrollToOption(opt) {
       if (!opt) return;
-      var cr = content.getBoundingClientRect();
+      var cr = optionsList.getBoundingClientRect();
       var top = opt.offsetTop;
       var bottom = top + opt.offsetHeight;
-      var st = content.scrollTop;
+      var st = optionsList.scrollTop;
       var sb = st + cr.height;
-      if (top < st) content.scrollTop = top - 8;
+      if (top < st) optionsList.scrollTop = top - 8;
       else if (bottom > sb)
-        content.scrollTop = bottom - cr.height + 8;
-    }
-
-    function updatePosition() {
-      var rect = trigger.getBoundingClientRect();
-      var vh = window.innerHeight;
-      var below = vh - rect.bottom;
-      var above = rect.top;
-      if (below < 200 && above > below) {
-        content.className =
-          contentBase +
-          "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
-      } else {
-        content.className =
-          contentBase +
-          "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
-      }
+        optionsList.scrollTop = bottom - cr.height + 8;
     }
 
     trigger.addEventListener("click", function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      toggleDropdown();
-    });
+      if (disabled) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    }, true);
 
     trigger.addEventListener("keydown", function (e) {
       if (disabled) return;
+      var isVisible = popover.element && popover.element.classList.contains("visible");
       switch (e.key) {
         case "Enter":
         case " ":
@@ -399,16 +413,16 @@
           break;
         case "ArrowDown":
           e.preventDefault();
-          if (!isOpen) openDropdown();
+          if (!isVisible) openDropdown();
           else navigateOptions(1);
           break;
         case "ArrowUp":
           e.preventDefault();
-          if (!isOpen) openDropdown();
+          if (!isVisible) openDropdown();
           else navigateOptions(-1);
           break;
         case "Escape":
-          if (isOpen) {
+          if (isVisible) {
             e.preventDefault();
             closeDropdown();
           }
@@ -429,13 +443,6 @@
       scrollToOption(opt);
     }
 
-    document.addEventListener("click", function (e) {
-      if (isOpen && !container.contains(e.target)) closeDropdown();
-    });
-    document.addEventListener("keydown", function (e) {
-      if (e.key === "Escape" && isOpen) closeDropdown();
-    });
-
     container.updateValue = function (newValue) {
       value =
         newValue !== undefined && newValue !== null ? newValue : "";
@@ -532,7 +539,8 @@
         canClear && !!value && !disabled
       );
       updateClearButton();
-      if (disabled && isOpen) closeDropdown();
+      var isVisible = popover.element && popover.element.classList.contains("visible");
+      if (disabled && isVisible) closeDropdown();
     };
 
     return container;

package/components/time-picker.js

@@ -296,12 +296,12 @@
       if (periodColumn) periodColumn.scrollToSelected();
     }
 
+    // Trigger must be in DOM before Popover.create() so Popover can wrap it and insert its panel into the document.
+    container.appendChild(trigger);
+
     var Popover = getDep("Popover");
     if (!Popover || typeof Popover.create !== "function") {
-      container.appendChild(trigger);
-      container.updateValue = function (newVal) { value = typeof newVal === "string" ? newVal : ""; };
-      container.setDisabled = function (isDisabled) { trigger.disabled = !!isDisabled; };
-      return container;
+      throw new Error("TimePicker requires Popover");
     }
     var popover = Popover.create({
       trigger: trigger,
@@ -322,8 +322,6 @@
     });
     hidePopover = popover.hide;
 
-    container.appendChild(trigger);
-
     container.updateValue = function (newVal) {
       value = typeof newVal === "string" ? newVal : "";
       var p = parseValue(value);

package/core/superleapClient.js

@@ -96,8 +96,7 @@
 
     _config = mergeConfig(DEFAULT_CONFIG, config);
 
-    // Create SDK instance immediately during init
-    // Check for both global function and class constructor
+    // Create SDK instance using the SDK factory if available
     if (typeof global.createSuperLeapSDK === "function") {
       _sdkInstance = global.createSuperLeapSDK(_config);
     } else if (typeof global.SuperLeapSDK === "function") {
@@ -111,8 +110,8 @@
   }
 
   /**
-   * Get the SDK instance. Returns the instance created during init().
-   * Returns null if init() was not called or the SDK script is not loaded (components can show empty state).
+   * Get the SDK instance.
+   * Returns null if init() was not called or the SDK script is not loaded.
    *
    * @returns {SuperLeapSDK|null} SDK instance or null
    */