@superleapai/flow-ui 2.2.8 → 2.2.10

package/components/enum-multiselect.js

@@ -76,6 +76,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];
+  }
+
   /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient */
   function getClient() {
     if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
@@ -145,8 +153,10 @@
     var error = null;
     var searchQuery = "";
     var popover = null;
-    var usePopover = !!(global.Popover && typeof global.Popover.create === "function");
-    var isOpen = false;
+    var Popover = getDep("Popover");
+    if (!Popover || typeof Popover.create !== "function") {
+      throw new Error("EnumMultiSelect requires Popover");
+    }
 
     var container = document.createElement("div");
     container.className = "enum-multiselect relative w-full group";
@@ -248,13 +258,7 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    var contentBase = "w-full min-w-[200px]";
-    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 border-1/2 border-border-primary opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible top-full mt-1 -translate-y-1 group-[.open]:translate-y-0 flex flex-col";
-    } else {
-      contentBase += " max-h-[30vh] overflow-hidden flex flex-col";
-    }
-    content.className = contentBase;
+    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");
@@ -320,10 +324,6 @@
     content.appendChild(searchContainer);
     content.appendChild(optionsList);
 
-    if (!usePopover) {
-      container.appendChild(content);
-    }
-
     var highlightedIndex = -1;
 
     function showLoading() {
@@ -496,34 +496,14 @@
 
     function openDropdown() {
       if (disabled) return;
-      if (popover) {
-        document
-          .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
-          .forEach(function (other) {
-            if (other !== container && other.popoverInstance) {
-              other.popoverInstance.hide();
-            }
-          });
-        popover.show();
-        trigger.setAttribute("aria-expanded", "true");
-        if (searchInput) {
-          setTimeout(function () {
-            searchInput.focus();
-          }, 50);
-        }
-        return;
-      }
       document
-        .querySelectorAll(".enum-multiselect.open, .enum-select.open")
+        .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
         .forEach(function (other) {
-          if (other !== container) {
-            other.classList.remove("open");
-            var t = other.querySelector("button");
-            if (t) t.setAttribute("aria-expanded", "false");
+          if (other !== container && other.popoverInstance) {
+            other.popoverInstance.hide();
           }
         });
-      isOpen = true;
-      container.classList.add("open");
+      popover.show();
       trigger.setAttribute("aria-expanded", "true");
       if (searchInput) {
         setTimeout(function () {
@@ -533,12 +513,7 @@
     }
 
     function closeDropdown() {
-      if (popover) {
-        popover.hide();
-      } else {
-        isOpen = false;
-        container.classList.remove("open");
-      }
+      popover.hide();
       trigger.setAttribute("aria-expanded", "false");
       highlightedIndex = -1;
       clearSearch();
@@ -546,9 +521,7 @@
     }
 
     function toggleDropdown() {
-      var isVisible = popover
-        ? popover.element && popover.element.classList.contains("visible")
-        : isOpen;
+      var isVisible = popover.element && popover.element.classList.contains("visible");
       if (isVisible) {
         closeDropdown();
       } else {
@@ -628,10 +601,7 @@
 
     // Initialize Popover
     function initializePopover() {
-      if (!usePopover) {
-        return;
-      }
-      popover = global.Popover.create({
+      popover = Popover.create({
         trigger: trigger,
         content: content,
         placement: "bottom",
@@ -647,6 +617,12 @@
         onOpen: function () {
           trigger.setAttribute("aria-expanded", "true");
           chevron.style.transform = "rotate(180deg)";
+          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;
+          }
         },
         bodyClassName: "p-0 overflow-hidden",
         panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
@@ -654,13 +630,6 @@
 
       // Store popover instance for cleanup
       container.popoverInstance = popover;
-      
-      // Set CSS variable for trigger width
-      var triggerWidth = trigger.offsetWidth;
-      if (popover.panel) {
-        popover.panel.style.setProperty("--trigger-width", triggerWidth + "px");
-        popover.panel.style.minWidth = triggerWidth + "px";
-      }
     }
 
     // Load options from SDK
@@ -779,21 +748,6 @@
     initializePopover();
     loadOptions();
 
-    if (!usePopover) {
-      trigger.addEventListener("click", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (disabled) return;
-        toggleDropdown();
-      });
-      document.addEventListener("click", function (e) {
-        if (isOpen && !container.contains(e.target)) closeDropdown();
-      });
-      document.addEventListener("keydown", function (e) {
-        if (e.key === "Escape" && isOpen) closeDropdown();
-      });
-    }
-
     // Public API
     container.updateValues = function (newValues) {
       values = Array.isArray(newValues) ? newValues.slice() : [];
@@ -835,7 +789,7 @@
       );
       updateClearButton();
       var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-      if (disabled && (isVisible || isOpen)) closeDropdown();
+      if (disabled && isVisible) closeDropdown();
     };
 
     container.reload = function () {

package/components/enum-select.js

@@ -72,6 +72,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];
+  }
+
   /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient */
   function getClient() {
     if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
@@ -136,8 +144,10 @@
     var error = null;
     var searchQuery = "";
     var popover = null;
-    var usePopover = !!(global.Popover && typeof global.Popover.create === "function");
-    var isOpen = false;
+    var Popover = getDep("Popover");
+    if (!Popover || typeof Popover.create !== "function") {
+      throw new Error("EnumSelect requires Popover");
+    }
 
     var container = document.createElement("div");
     container.className = "enum-select relative w-full group";
@@ -221,13 +231,7 @@
     // Create dropdown content
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    var contentBase = "w-full min-w-[200px]";
-    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 border-1/2 border-border-primary opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible top-full mt-1 -translate-y-1 group-[.open]:translate-y-0 flex flex-col";
-    } else {
-      contentBase += " max-h-[30vh] overflow-hidden flex flex-col";
-    }
-    content.className = contentBase;
+    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");
@@ -293,10 +297,6 @@
     content.appendChild(searchContainer);
     content.appendChild(optionsList);
 
-    if (!usePopover) {
-      container.appendChild(content);
-    }
-
     var highlightedIndex = -1;
 
     function showLoading() {
@@ -419,37 +419,14 @@
 
     function openDropdown() {
       if (disabled) return;
-      if (popover) {
-        // Close other open selects
-        document
-          .querySelectorAll(".enum-select, .custom-select, .record-select")
-          .forEach(function (other) {
-            if (other !== container && other.popoverInstance) {
-              other.popoverInstance.hide();
-            }
-          });
-        popover.show();
-        trigger.setAttribute("aria-expanded", "true");
-        highlightOptionByValue(value);
-        if (searchInput) {
-          setTimeout(function () {
-            searchInput.focus();
-          }, 50);
-        }
-        return;
-      }
-      // Fallback when Popover not available
       document
-        .querySelectorAll(".enum-select.open")
+        .querySelectorAll(".enum-select, .custom-select, .record-select")
         .forEach(function (other) {
-          if (other !== container) {
-            other.classList.remove("open");
-            var t = other.querySelector("button");
-            if (t) t.setAttribute("aria-expanded", "false");
+          if (other !== container && other.popoverInstance) {
+            other.popoverInstance.hide();
           }
         });
-      isOpen = true;
-      container.classList.add("open");
+      popover.show();
       trigger.setAttribute("aria-expanded", "true");
       highlightOptionByValue(value);
       if (searchInput) {
@@ -460,12 +437,7 @@
     }
 
     function closeDropdown() {
-      if (popover) {
-        popover.hide();
-      } else {
-        isOpen = false;
-        container.classList.remove("open");
-      }
+      popover.hide();
       trigger.setAttribute("aria-expanded", "false");
       highlightedIndex = -1;
       clearSearch();
@@ -473,9 +445,7 @@
     }
 
     function toggleDropdown() {
-      var isVisible = popover
-        ? popover.element && popover.element.classList.contains("visible")
-        : isOpen;
+      var isVisible = popover.element && popover.element.classList.contains("visible");
       if (isVisible) {
         closeDropdown();
       } else {
@@ -586,10 +556,7 @@
 
     // Initialize Popover
     function initializePopover() {
-      if (!usePopover) {
-        return;
-      }
-      popover = global.Popover.create({
+      popover = Popover.create({
         trigger: trigger,
         content: content,
         placement: "bottom",
@@ -605,6 +572,12 @@
         onOpen: function () {
           trigger.setAttribute("aria-expanded", "true");
           chevron.style.transform = "rotate(180deg)";
+          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;
+          }
         },
         bodyClassName: "p-0 overflow-hidden",
         panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
@@ -612,13 +585,6 @@
 
       // Store popover instance for cleanup
       container.popoverInstance = popover;
-      
-      // Set CSS variable for trigger width
-      var triggerWidth = trigger.offsetWidth;
-      if (popover.panel) {
-        popover.panel.style.setProperty("--trigger-width", triggerWidth + "px");
-        popover.panel.style.minWidth = triggerWidth + "px";
-      }
     }
 
     // Load options from SDK
@@ -742,21 +708,6 @@
     initializePopover();
     loadOptions();
 
-    if (!usePopover) {
-      trigger.addEventListener("click", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (disabled) return;
-        toggleDropdown();
-      });
-      document.addEventListener("click", function (e) {
-        if (isOpen && !container.contains(e.target)) closeDropdown();
-      });
-      document.addEventListener("keydown", function (e) {
-        if (e.key === "Escape" && isOpen) closeDropdown();
-      });
-    }
-
     // Public API
     container.updateValue = function (newValue) {
       value = newValue !== undefined && newValue !== null ? newValue : "";
@@ -801,7 +752,7 @@
       );
       updateClearButton();
       var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-      if (disabled && (isVisible || isOpen)) closeDropdown();
+      if (disabled && isVisible) closeDropdown();
     };
 
     container.reload = function () {

package/components/icon.js

@@ -44,12 +44,12 @@
       ' stroke-width="1.5">' +
       TI_PATH_NONE +
       '<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>',
-    IconCurrencyDollar:
+    IconStar:
       "<svg" +
       TI +
       ' stroke-width="1.5">' +
       TI_PATH_NONE +
-      '<path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg>',
+      '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg>',
     IconPhone:
       "<svg" +
       TI +

package/components/multiselect.js

@@ -60,6 +60,14 @@
     return opt.label || opt.name || opt.display_name || opt.value;
   }
 
+  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 multiselect dropdown component
    * @param {Object} config
@@ -90,6 +98,11 @@
         ? config.values.slice()
         : [];
 
+    var Popover = getDep("Popover");
+    if (!Popover || typeof Popover.create !== "function") {
+      throw new Error("MultiSelect requires Popover");
+    }
+
     var container = document.createElement("div");
     container.className = "custom-multiselect relative w-full group";
     if (fieldId) container.setAttribute("data-field-id", fieldId);
@@ -138,14 +151,10 @@
     triggerWrapper.appendChild(trigger);
     container.appendChild(triggerWrapper);
 
-    var contentBase =
-      "custom-multiselect-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 ";
-
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+    content.className = "custom-multiselect-content w-full  max-h-[200px] overflow-hidden flex flex-col";
 
     var optionsList = document.createElement("div");
     optionsList.className =
@@ -246,47 +255,68 @@
     buildOptionsList();
 
     content.appendChild(optionsList);
-    container.appendChild(content);
 
-    var isOpen = false;
+    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, .custom-multiselect, .enum-select, .enum-multiselect, .record-multiselect")
+          .forEach(function (other) {
+            if (other !== container && other.popoverInstance) {
+              other.popoverInstance.hide();
+            }
+          });
+        trigger.setAttribute("aria-expanded", "true");
+        chevron.style.transform = "rotate(180deg)";
+        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 = "";
+      },
+    });
+    container.popoverInstance = popover;
 
     function openDropdown() {
       if (disabled) return;
-      document
-        .querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open")
-        .forEach(function (other) {
-          if (other !== container) {
-            other.classList.remove("open");
-            var t = other.querySelector(
-              "button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button"
-            );
-            if (t) t.setAttribute("aria-expanded", "false");
-          }
-        });
-      isOpen = true;
-      container.classList.add("open");
-      trigger.setAttribute("aria-expanded", "true");
+      popover.show();
     }
 
     function closeDropdown() {
-      isOpen = false;
-      container.classList.remove("open");
-      trigger.setAttribute("aria-expanded", "false");
+      popover.hide();
     }
 
     function toggleDropdown() {
-      if (isOpen) closeDropdown();
+      var isVisible = popover.element && popover.element.classList.contains("visible");
+      if (isVisible) closeDropdown();
       else openDropdown();
     }
 
     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 " ":
@@ -295,14 +325,14 @@
           break;
         case "ArrowDown":
           e.preventDefault();
-          if (!isOpen) openDropdown();
+          if (!isVisible) openDropdown();
           break;
         case "ArrowUp":
           e.preventDefault();
-          if (!isOpen) openDropdown();
+          if (!isVisible) openDropdown();
           break;
         case "Escape":
-          if (isOpen) {
+          if (isVisible) {
             e.preventDefault();
             closeDropdown();
           }
@@ -310,13 +340,6 @@
       }
     });
 
-    document.addEventListener("click", function (e) {
-      if (isOpen && !container.contains(e.target)) closeDropdown();
-    });
-    document.addEventListener("keydown", function (e) {
-      if (e.key === "Escape" && isOpen) closeDropdown();
-    });
-
     container.updateValues = function (newValues) {
       values = Array.isArray(newValues) ? newValues.slice() : [];
       renderTriggerContent();
@@ -335,7 +358,8 @@
       disabled = !!isDisabled;
       trigger.disabled = disabled;
       trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
-      if (disabled && isOpen) closeDropdown();
+      var isVisible = popover.element && popover.element.classList.contains("visible");
+      if (disabled && isVisible) closeDropdown();
     };
 
     container.getValues = function () {