@superleapai/flow-ui 2.4.5 → 2.4.7

package/components/popover.js

@@ -98,6 +98,7 @@
     document.body.appendChild(wrapper);
 
     var backdropEl = null;
+    var resizeObserver = null;
 
     function onBackdropWheel(e) {
       e.preventDefault();
@@ -107,15 +108,18 @@
       if (!modal) return;
       if (!backdropEl) {
         backdropEl = document.createElement("div");
-        backdropEl.className = "fixed inset-0 z-40 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();
         });
-        backdropEl.addEventListener("wheel", onBackdropWheel, { passive: false });
+        backdropEl.addEventListener("wheel", onBackdropWheel, {
+          passive: false,
+        });
       }
       document.body.appendChild(backdropEl);
-      wrapper.style.zIndex = "";
+      wrapper.style.zIndex = "999";
     }
 
     function applyModalClose() {
@@ -132,8 +136,10 @@
       const triggerRect = triggerEl.getBoundingClientRect();
       const panelRect = panel.getBoundingClientRect();
       const gap = 8;
-      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-      const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+      const viewportHeight =
+        window.innerHeight || document.documentElement.clientHeight;
+      const viewportWidth =
+        window.innerWidth || document.documentElement.clientWidth;
       const spaceBelow = viewportHeight - triggerRect.bottom;
       const spaceAbove = triggerRect.top;
       const spaceRight = viewportWidth - triggerRect.right;
@@ -141,13 +147,29 @@
 
       // 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) {
+      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) {
+      } 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) {
+      } 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) {
+      } else if (
+        placement === "left" &&
+        spaceLeft < panelRect.width + gap &&
+        spaceRight >= panelRect.width + gap
+      ) {
         effectivePlacement = "right";
       }
 
@@ -155,8 +177,18 @@
 
       let top = 0;
       let left = 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);
+      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 (effectivePlacement) {
         case "bottom":
@@ -193,6 +225,10 @@
       wrapper.setAttribute("aria-hidden", "true");
       window.removeEventListener("scroll", onScrollOrResize, true);
       window.removeEventListener("resize", onScrollOrResize);
+      if (resizeObserver && panel) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
       applyModalClose();
       if (onClose) onClose();
     }
@@ -206,11 +242,22 @@
       applyModalOpen();
       requestAnimationFrame(function () {
         position();
-        wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
+        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);
+        // Re-position when panel content size changes (e.g. async record list load in record-select)
+        if (typeof ResizeObserver !== "undefined" && !resizeObserver) {
+          resizeObserver = new ResizeObserver(function () {
+            if (wrapper.classList.contains("visible")) position();
+          });
+          resizeObserver.observe(panel);
+        }
         requestAnimationFrame(function () {
           requestAnimationFrame(function () {
             panel.setAttribute("data-state", "open");
@@ -222,6 +269,10 @@
     function destroy() {
       hide();
       applyModalClose();
+      if (resizeObserver && panel) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
       if (backdropEl && backdropEl.parentNode) {
         backdropEl.parentNode.removeChild(backdropEl);
       }

package/components/record-multiselect.js

@@ -152,6 +152,7 @@
    * @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
    */
@@ -166,6 +167,7 @@
     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;
@@ -463,14 +465,23 @@
       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()) {
-            q = q.filterBy({
+            filters.push({
               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