@superleapai/flow-ui 2.2.9 → 2.2.11

package/components/popover.js

@@ -42,9 +42,18 @@
       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)
+    const container = document.createElement("div");
+    container.className = "relative w-full";
+    const triggerParent = triggerEl.parentNode;
+    if (triggerParent) {
+      triggerParent.insertBefore(container, triggerEl);
+      container.appendChild(triggerEl);
+    }
+
     const wrapper = document.createElement("div");
     wrapper.className =
-      "fixed z-50  pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
+      "absolute z-50 pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
     wrapper.setAttribute("aria-hidden", "true");
 
     const panel = document.createElement("div");
@@ -80,57 +89,46 @@
     panel.appendChild(body);
 
     wrapper.appendChild(panel);
+    container.appendChild(wrapper);
 
     function noop() {}
 
     function position() {
-      const rect = triggerEl.getBoundingClientRect();
+      const triggerRect = triggerEl.getBoundingClientRect();
       const panelRect = panel.getBoundingClientRect();
       const gap = 8;
       let top = 0;
       let left = 0;
 
       // Alignment offset: start = 0, center = half diff, end = full diff
-      const alignLeft = (align === "center" ? (rect.width - panelRect.width) / 2 : align === "end" ? rect.width - panelRect.width : 0);
-      const alignTop = (align === "center" ? (rect.height - panelRect.height) / 2 : align === "end" ? rect.height - panelRect.height : 0);
+      const alignLeft = (align === "center" ? (triggerRect.width - panelRect.width) / 2 : align === "end" ? triggerRect.width - panelRect.width : 0);
+      const alignTop = (align === "center" ? (triggerRect.height - panelRect.height) / 2 : align === "end" ? triggerRect.height - panelRect.height : 0);
 
       switch (placement) {
         case "bottom":
-          top = rect.bottom + gap;
-          left = rect.left + alignLeft;
+          top = triggerRect.height + gap;
+          left = alignLeft;
           break;
         case "top":
-          top = rect.top - panelRect.height - gap;
-          left = rect.left + alignLeft;
+          top = -panelRect.height - gap;
+          left = alignLeft;
           break;
         case "right":
-          top = rect.top + alignTop;
-          left = rect.right + gap;
+          top = alignTop;
+          left = triggerRect.width + gap;
           break;
         case "left":
-          top = rect.top + alignTop;
-          left = rect.left - panelRect.width - gap;
+          top = alignTop;
+          left = -panelRect.width - gap;
           break;
         default:
-          top = rect.bottom + gap;
-          left = rect.left + alignLeft;
+          top = triggerRect.height + gap;
+          left = alignLeft;
       }
 
-      // Keep within viewport
-      const padding = 8;
-      if (left < padding) left = padding;
-      if (left + panelRect.width > window.innerWidth - padding) {
-        left = window.innerWidth - panelRect.width - padding;
-      }
-      if (top < padding) top = padding;
-      if (top + panelRect.height > window.innerHeight - padding) {
-        top = window.innerHeight - panelRect.height - padding;
-      }
-
-      wrapper.style.left = "0";
-      wrapper.style.top = "0";
-      wrapper.style.transform = "translate(" + left + "px, " + top + "px)";
-      // Force reflow so transform is applied before we show (avoids flash from left/top-left)
+      wrapper.style.transform = "";
+      wrapper.style.top = top + "px";
+      wrapper.style.left = left + "px";
       wrapper.offsetHeight;
     }
 
@@ -144,24 +142,7 @@
 
     function show() {
       if (onOpen) onOpen();
-      var justAppended = !wrapper.parentNode;
-      if (justAppended) {
-        document.body.appendChild(wrapper);
-      }
-      // On first open, wait for layout so getBoundingClientRect() is correct (avoids wrong position / "from left" look)
-      if (justAppended) {
-        requestAnimationFrame(function () {
-          position();
-          wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
-          wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
-          wrapper.setAttribute("aria-hidden", "false");
-          requestAnimationFrame(function () {
-            requestAnimationFrame(function () {
-              panel.setAttribute("data-state", "open");
-            });
-          });
-        });
-      } else {
+      requestAnimationFrame(function () {
         position();
         wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
         wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
@@ -171,7 +152,7 @@
             panel.setAttribute("data-state", "open");
           });
         });
-      }
+      });
     }
 
     function destroy() {
@@ -179,6 +160,10 @@
       if (wrapper.parentNode) {
         wrapper.parentNode.removeChild(wrapper);
       }
+      if (container.parentNode && triggerEl.parentNode === container) {
+        container.parentNode.insertBefore(triggerEl, container);
+        container.parentNode.removeChild(container);
+      }
       if (closeOnClickOutside) {
         document.removeEventListener("click", outsideClick);
       }

package/components/record-multiselect.js

@@ -10,7 +10,14 @@
 (function (global) {
   "use strict";
 
-  var Popover = global.Popover;
+  function getDep(name) {
+    if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
   var InputComponent = global.InputComponent;
   var Spinner = global.Spinner;
 
@@ -23,7 +30,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" },
@@ -183,19 +190,13 @@
     var selectedRecords = [];
     var allRecords = [];
     var filteredRecords = [];
-    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-multiselect-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
     var triggerWrapper = document.createElement("span");
@@ -290,7 +291,7 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    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-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 ";
@@ -357,57 +358,58 @@
     
     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, .custom-multiselect.open, .record-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, .record-multiselect-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;
+    var Popover = getDep("Popover");
+    if (!Popover || typeof Popover.create !== "function") {
+      throw new Error("RecordMultiSelect requires Popover");
+    }
+    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, .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;
+          popover.panel.style.minWidth = triggerWidthPx;
+        }
+        loadInitialAndRender();
+        setTimeout(function () {
+          if (searchInputEl) searchInputEl.focus();
+        }, 0);
+      },
+      onClose: function () {
+        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;
+        }
+      },
+    });
+    container.popoverInstance = popover;
 
     function isSelected(recordId) {
       return values.some(function (v) {
@@ -814,42 +816,11 @@
 
     function openDropdown() {
       if (disabled) return;
-      if (usePopover && popover) {
-        popover.show();
-        return;
-      }
-      document
-        .querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-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, .record-multiselect-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");
+      popover.hide();
       searchTerm = "";
       if (searchInputWrapper) searchInputWrapper.setValue("");
       else if (searchInputEl) searchInputEl.value = "";
@@ -859,19 +830,6 @@
       }
     }
 
-    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";
-      }
-    }
-
     if (!searchInputWrapper && searchInputEl) {
       searchInputEl.addEventListener("input", function () {
         searchTerm = this.value.trim();
@@ -888,41 +846,19 @@
       });
     }
 
-    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;
+      var isVisible = popover.element && popover.element.classList.contains("visible");
+      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 (isVisible) popover.hide();
+        else popover.show();
+      }
+      if (e.key === "Escape" && isVisible) {
+        e.preventDefault();
+        popover.hide();
+      }
+    });
 
     container.updateValues = function (newValues) {
       values = Array.isArray(newValues) ? newValues.slice() : [];
@@ -933,7 +869,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) popover.hide();
     };
 
     container.getValues = function () {