@superleapai/flow-ui 2.4.3 → 2.4.5

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-[30vh] overflow-hidden flex flex-col";
+    content.className = "w-full min-w-[200px] max-h-[45vh] 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-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+      "overflow-y-auto max-h-[45vh] 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-[30vh] overflow-hidden flex flex-col";
+    content.className = "w-full min-w-[200px] max-h-[45vh] 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-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+      "overflow-y-auto max-h-[45vh] 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-[200px] overflow-hidden flex flex-col";
+    content.className = "custom-multiselect-content w-full  max-h-[45vh] overflow-hidden flex flex-col";
 
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+      "overflow-y-auto max-h-[45vh] 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-[200px] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
       onOpen: function () {
         if (disabled) {
           popover.hide();

package/components/popover.js

@@ -44,7 +44,7 @@
       return { show: noop, hide: noop, destroy: noop, element: null };
     }
 
-    // Wrap trigger in a relative container so popover can be absolute relative to it (full width so parent controls it)
+    // Wrap trigger in a relative container for layout (full width); popover is portaled to body
     const container = document.createElement("div");
     container.className = "relative w-full";
     const triggerParent = triggerEl.parentNode;
@@ -55,7 +55,7 @@
 
     const wrapper = document.createElement("div");
     wrapper.className =
-      "absolute z-50 pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
+      "fixed z-50 pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
     wrapper.setAttribute("aria-hidden", "true");
 
     const panel = document.createElement("div");
@@ -79,7 +79,11 @@
     const body = document.createElement("div");
     body.className =
       bodyClassName ||
-      "text-reg-14 text-typography-secondary-text leading-5 [&_p]:mb-2 [&_p:last-child]:mb-0";
+      "text-reg-14 text-typography-secondary-text leading-5 [&_p]:mb-2 [&_p:last-child]:mb-0 max-h-[90vh] overflow-y-auto overflow-x-hidden min-h-0";
+    body.style.maxHeight = "90vh";
+    body.style.overflowY = "auto";
+    body.style.overflowX = "hidden";
+    body.style.minHeight = "0";
     if (panelClassName) {
       panel.className = panel.className + " " + panelClassName;
     }
@@ -91,7 +95,7 @@
     panel.appendChild(body);
 
     wrapper.appendChild(panel);
-    container.appendChild(wrapper);
+    document.body.appendChild(wrapper);
 
     var backdropEl = null;
 
@@ -103,7 +107,7 @@
       if (!modal) return;
       if (!backdropEl) {
         backdropEl = document.createElement("div");
-        backdropEl.className = "fixed inset-0 z-[9998] bg-transparent pointer-events-auto";
+        backdropEl.className = "fixed inset-0 z-40 bg-transparent pointer-events-auto";
         backdropEl.setAttribute("aria-hidden", "true");
         backdropEl.addEventListener("click", function () {
           hide();
@@ -111,7 +115,7 @@
         backdropEl.addEventListener("wheel", onBackdropWheel, { passive: false });
       }
       document.body.appendChild(backdropEl);
-      container.style.zIndex = "9999";
+      wrapper.style.zIndex = "";
     }
 
     function applyModalClose() {
@@ -119,7 +123,7 @@
       if (backdropEl && backdropEl.parentNode) {
         backdropEl.parentNode.removeChild(backdropEl);
       }
-      container.style.zIndex = "";
+      wrapper.style.zIndex = "";
     }
 
     function noop() {}
@@ -156,24 +160,24 @@
 
       switch (effectivePlacement) {
         case "bottom":
-          top = triggerRect.height + gap;
-          left = alignLeft;
+          top = triggerRect.bottom + gap;
+          left = triggerRect.left + alignLeft;
           break;
         case "top":
-          top = -panelRect.height - gap;
-          left = alignLeft;
+          top = triggerRect.top - panelRect.height - gap;
+          left = triggerRect.left + alignLeft;
           break;
         case "right":
-          top = alignTop;
-          left = triggerRect.width + gap;
+          top = triggerRect.top + alignTop;
+          left = triggerRect.right + gap;
           break;
         case "left":
-          top = alignTop;
-          left = -panelRect.width - gap;
+          top = triggerRect.top + alignTop;
+          left = triggerRect.left - panelRect.width - gap;
           break;
         default:
-          top = triggerRect.height + gap;
-          left = alignLeft;
+          top = triggerRect.bottom + gap;
+          left = triggerRect.left + alignLeft;
       }
 
       wrapper.style.transform = "";
@@ -187,10 +191,16 @@
       wrapper.classList.add("invisible", "opacity-0", "pointer-events-none");
       wrapper.classList.remove("visible", "opacity-100", "pointer-events-auto");
       wrapper.setAttribute("aria-hidden", "true");
+      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onScrollOrResize);
       applyModalClose();
       if (onClose) onClose();
     }
 
+    function onScrollOrResize() {
+      if (wrapper.classList.contains("visible")) position();
+    }
+
     function show() {
       if (onOpen) onOpen();
       applyModalOpen();
@@ -199,6 +209,8 @@
         wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
         wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
         wrapper.setAttribute("aria-hidden", "false");
+        window.addEventListener("scroll", onScrollOrResize, true);
+        window.addEventListener("resize", onScrollOrResize);
         requestAnimationFrame(function () {
           requestAnimationFrame(function () {
             panel.setAttribute("data-state", "open");
@@ -213,6 +225,8 @@
       if (backdropEl && backdropEl.parentNode) {
         backdropEl.parentNode.removeChild(backdropEl);
       }
+      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onScrollOrResize);
       if (wrapper.parentNode) {
         wrapper.parentNode.removeChild(wrapper);
       }
@@ -262,6 +276,8 @@
       show,
       hide,
       destroy,
+      /** Re-run positioning (e.g. after async content load). Call when panel size changes. */
+      updatePosition: position,
       setContent(newContent) {
         body.innerHTML = "";
         if (typeof newContent === "string") {

package/components/record-multiselect.js

@@ -152,7 +152,6 @@
    * @param {string} [config.size] - 'default' | 'large' | 'small'
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
    * @param {Array<string>} [config.displayFields] - Fields to display as secondary info (e.g. ["email", "phone"])
-   * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
    * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { icon?, color? } used for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record multiselect container element
    */
@@ -167,7 +166,6 @@
     var variant = config.variant || "default";
     var size = config.size || "default";
     var initialLimit = config.initialLimit != null ? config.initialLimit : 50;
-    var initialFilter = config.initialFilter || null; // Can be array, object, or function returning either
     var displayFields = config.displayFields || [];
 
     var disabled = config.disabled === true;
@@ -293,7 +291,7 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = "record-multiselect-content  max-h-[30vh] overflow-hidden flex flex-col";
+    content.className = "record-multiselect-content  max-h-[45vh] overflow-hidden flex flex-col";
 
     var searchWrap = document.createElement("div");
     searchWrap.className = "p-8 pb-4 border-b-1/2 border-border-primary ";
@@ -343,7 +341,7 @@
     content.appendChild(searchWrap);
 
     var optionsList = document.createElement("div");
-    optionsList.className = "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
+    optionsList.className = "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
     
     // Add scroll listener for infinite scroll
     optionsList.addEventListener("scroll", function () {
@@ -371,28 +369,22 @@
       align: "start",
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
-      panelClassName: "max-h-[30vh] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
       onOpen: function () {
         if (disabled) {
           popover.hide();
           return;
         }
-        document.querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open, .enum-select, .enum-multiselect").forEach(function (other) {
-          if (other !== container && other.popoverInstance) {
-            other.popoverInstance.hide();
-          }
-        });
         container.classList.add("open");
         trigger.setAttribute("aria-expanded", "true");
         searchTerm = "";
         if (searchInputWrapper) searchInputWrapper.setValue("");
         else if (searchInputEl) searchInputEl.value = "";
-        var triggerWidthPx = trigger.offsetWidth + "px";
-        content.style.minWidth = triggerWidthPx;
-        content.style.width = triggerWidthPx;
         if (popover.panel) {
-          popover.panel.style.width = triggerWidthPx;
+          var triggerWidthPx = trigger.offsetWidth + "px";
+          popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
           popover.panel.style.minWidth = triggerWidthPx;
+          popover.panel.style.width = triggerWidthPx;
         }
         loadInitialAndRender();
         setTimeout(function () {
@@ -471,23 +463,14 @@
       try {
         if (model && typeof model.select === "function") {
           var q = model.select.apply(model, fields);
-          var filters = [];
-          var resolvedFilter = typeof initialFilter === 'function' ? initialFilter() : initialFilter;
-          console.log('[RecordMultiselect] initialFilter:', resolvedFilter, '| search:', search);
-          if (resolvedFilter) {
-            filters = filters.concat(Array.isArray(resolvedFilter) ? resolvedFilter : [resolvedFilter]);
-          }
           if (search && search.trim()) {
-            filters.push({
+            q = q.filterBy({
               or: [
                 { field: "name", operator: "contains", value: search.trim() },
                 { field: "id", operator: "eq", value: search.trim() },
               ],
             });
           }
-          if (filters.length > 0) {
-            q = q.filterBy(filters.length === 1 ? filters[0] : { and: filters });
-          }
           var orderBy = ["name"];
           if (objectSlug === "account") orderBy.push("-ParentId");
           return q
@@ -746,6 +729,16 @@
       }
     }
 
+    function scheduleUpdatePosition() {
+      if (popover && typeof popover.updatePosition === "function") {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            popover.updatePosition();
+          });
+        });
+      }
+    }
+
     function loadInitialAndRender() {
       showLoading();
       currentPage = 1;
@@ -764,9 +757,11 @@
         } else {
           renderOptions();
         }
+        scheduleUpdatePosition();
       }).catch(function () {
         showEmpty("Failed to load records");
         hasMoreRecords = false;
+        scheduleUpdatePosition();
       });
     }
     
@@ -818,9 +813,11 @@
           } else {
             renderOptions();
           }
+          scheduleUpdatePosition();
         }).catch(function () {
           showEmpty("Search failed");
           hasMoreRecords = false;
+          scheduleUpdatePosition();
         });
       }, 500);
     }

package/components/record-select.js

@@ -145,7 +145,6 @@
    * @param {string} [config.size] - 'default' | 'large' | 'small'
    * @param {boolean} [config.canClear] - Show clear button when value is set
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
-   * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
    * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { svg?, color? } used for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record select container element
    */
@@ -160,7 +159,6 @@
     var size = config.size || "default";
     var canClear = !!config.canClear;
     var initialLimit = config.initialLimit != null ? config.initialLimit : 50;
-    var initialFilter = config.initialFilter || null; // Can be array, object, or function returning either
 
     var disabled = config.disabled === true;
     var value =
@@ -260,7 +258,7 @@
     // Dropdown content: search + list (same content pattern as Select)
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    content.className = "record-select-content  max-h-[30vh] overflow-hidden flex flex-col";
+    content.className = "record-select-content  max-h-[45vh] overflow-hidden flex flex-col";
 
     var searchWrap = document.createElement("div");
     searchWrap.className = "py-8 border-b-1/2 border-border-primary";
@@ -310,7 +308,7 @@
     content.appendChild(searchWrap);
 
     var optionsList = document.createElement("div");
-    optionsList.className = "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
+    optionsList.className = "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
     
     // Add scroll listener for infinite scroll
     optionsList.addEventListener("scroll", function () {
@@ -334,26 +332,24 @@
       align: "start",
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
-      panelClassName: "max-h-[30vh] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] 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";
+        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;
+        }
         loadInitialAndRender();
         setTimeout(function () {
           if (searchInputEl) searchInputEl.focus();
@@ -486,23 +482,14 @@
       try {
         if (model && typeof model.select === "function") {
           var q = model.select.apply(model, fields);
-          var filters = [];
-          var resolvedFilter = typeof initialFilter === 'function' ? initialFilter() : initialFilter;
-          console.log('[RecordSelect] initialFilter:', resolvedFilter, '| search:', search);
-          if (resolvedFilter) {
-            filters = filters.concat(Array.isArray(resolvedFilter) ? resolvedFilter : [resolvedFilter]);
-          }
           if (search && search.trim()) {
-            filters.push({
+            q = q.filterBy({
               or: [
                 { field: "name", operator: "contains", value: search.trim() },
                 { field: "id", operator: "eq", value: search.trim() },
               ],
             });
           }
-          if (filters.length > 0) {
-            q = q.filterBy(filters.length === 1 ? filters[0] : { and: filters });
-          }
           var orderBy = ["name"];
           if (objectSlug === "account") orderBy.push("-ParentId");
           return q
@@ -709,6 +696,16 @@
       }
     }
 
+    function scheduleUpdatePosition() {
+      if (popover && typeof popover.updatePosition === "function") {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            popover.updatePosition();
+          });
+        });
+      }
+    }
+
     function loadInitialAndRender() {
       showLoading();
       currentPage = 1;
@@ -734,9 +731,11 @@
         } else {
           renderOptions();
         }
+        scheduleUpdatePosition();
       }).catch(function () {
         showEmpty("Failed to load records");
         hasMoreRecords = false;
+        scheduleUpdatePosition();
       });
     }
     
@@ -788,9 +787,11 @@
           } else {
             renderOptions();
           }
+          scheduleUpdatePosition();
         }).catch(function () {
           showEmpty("Search failed");
           hasMoreRecords = false;
+          scheduleUpdatePosition();
         });
       }, 500);
     }

package/components/select.js

@@ -193,11 +193,11 @@
 
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    content.className = "custom-select-content w-full max-h-[200px] overflow-hidden flex flex-col";
+    content.className = "custom-select-content w-full max-h-[45vh] overflow-hidden flex flex-col";
 
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
 
     if (options.length === 0) {
       var noOpt = document.createElement("div");
@@ -256,7 +256,7 @@
       align: "start",
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
-      panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
       onOpen: function () {
         if (disabled) {
           popover.hide();