@superleapai/flow-ui 2.4.5 → 2.4.7

package/components/record-select.js

@@ -10,9 +10,20 @@
 (function (global) {
   "use strict";
 
-  var Popover = global.Popover;
-  var InputComponent = global.InputComponent;
-  var Spinner = global.Spinner;
+  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];
+  }
+
+  var Popover = getDep("Popover");
+  var InputComponent = getDep("InputComponent");
+  var Spinner = getDep("Spinner");
 
   /** When objectSlug === USERS, show Vivid Avatar (name-based color) instead of static icon */
   var STANDARD_OBJECT_SLUGS_USERS = "user";
@@ -34,7 +45,7 @@
     '<svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
   var X_SVG =
     '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></svg>';
-  
+
   var SEARCH_ICON =
     '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>';
 
@@ -49,7 +60,8 @@
         "border-error-border hover:border-error-border-hover focus:border-1/2 focus:border-error-border-hover",
       warning:
         "border-warning-border hover:border-warning-border-hover focus:border-1/2 focus:border-warning-border-hover",
-      borderless: "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+      borderless:
+        "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
       inline:
         "focus:border-transparent border border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray hover:border-transparent",
     };
@@ -58,7 +70,9 @@
       large: "px-12 py-8",
       small: "px-8 py-4",
     };
-    var placeholderClass = placeholder ? " text-typography-quaternary-text" : "";
+    var placeholderClass = placeholder
+      ? " text-typography-quaternary-text"
+      : "";
     var disabledClass = disabled
       ? " pointer-events-none cursor-not-allowed bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
       : "";
@@ -114,15 +128,27 @@
   function getObjectIconInfo(slug, objectSchema) {
     var color = "neutral";
     var iconStr = "IconDatabase";
-    if (objectSchema && objectSchema.properties && objectSchema.properties.icon_data) {
+    if (
+      objectSchema &&
+      objectSchema.properties &&
+      objectSchema.properties.icon_data
+    ) {
       var iconData = objectSchema.properties.icon_data;
-      if (typeof iconData.color === "string" && iconData.color) color = iconData.color;
-      if (typeof iconData.icon === "string" && iconData.icon) iconStr = iconData.icon;
+      if (typeof iconData.color === "string" && iconData.color)
+        color = iconData.color;
+      if (typeof iconData.icon === "string" && iconData.icon)
+        iconStr = iconData.icon;
     }
-    if (!objectSchema || !objectSchema.properties || !objectSchema.properties.icon_data || !objectSchema.properties.icon_data.icon) {
+    if (
+      !objectSchema ||
+      !objectSchema.properties ||
+      !objectSchema.properties.icon_data ||
+      !objectSchema.properties.icon_data.icon
+    ) {
       if (OBJECT_SLUG_TO_ICON[slug]) {
         iconStr = OBJECT_SLUG_TO_ICON[slug].iconStr;
-        if (OBJECT_SLUG_TO_ICON[slug].color) color = OBJECT_SLUG_TO_ICON[slug].color;
+        if (OBJECT_SLUG_TO_ICON[slug].color)
+          color = OBJECT_SLUG_TO_ICON[slug].color;
       } else {
         iconStr = "IconDatabase";
         color = "neutral";
@@ -145,6 +171,7 @@
    * @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
    */
@@ -153,12 +180,14 @@
     var objectSlug = config.objectSlug;
     var objectSchema = config.objectSchema || null;
     var placeholder = config.placeholder || "Select a record";
-    var searchPlaceholder = config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
+    var searchPlaceholder =
+      config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
     var onChange = config.onChange;
     var variant = config.variant || "default";
     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 =
@@ -206,7 +235,7 @@
       size,
       disabled,
       !value,
-      canClear && !!value && !disabled
+      canClear && !!value && !disabled,
     );
     trigger.disabled = disabled;
     trigger.setAttribute("aria-haspopup", "listbox");
@@ -215,7 +244,8 @@
     trigger.classList.add("record-select-trigger");
 
     var triggerContent = document.createElement("div");
-    triggerContent.className = "record-select-trigger-content flex items-center gap-8 flex-1 min-w-0";
+    triggerContent.className =
+      "record-select-trigger-content flex items-center gap-8 flex-1 min-w-0";
 
     var triggerIcon = document.createElement("span");
     triggerIcon.className = "record-select-trigger-icon shrink-0 hidden";
@@ -258,7 +288,9 @@
     // 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-[45vh] overflow-hidden flex flex-col";
+    content.setAttribute("data-field-id", fieldId);
+    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";
@@ -289,12 +321,12 @@
     } else {
       var fallbackWrapper = document.createElement("div");
       fallbackWrapper.className = "flex items-center gap-8 px-12";
-      
+
       var searchIconSpan = document.createElement("span");
       searchIconSpan.className = "shrink-0 text-typography-tertiary-text";
       searchIconSpan.innerHTML = SEARCH_ICON;
       fallbackWrapper.appendChild(searchIconSpan);
-      
+
       var searchInput = document.createElement("input");
       searchInput.type = "text";
       searchInput.className =
@@ -308,21 +340,22 @@
     content.appendChild(searchWrap);
 
     var optionsList = document.createElement("div");
-    optionsList.className = "overflow-y-auto max-h-[45vh] 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 () {
       if (isFetchingMore || !hasMoreRecords) return;
       var scrollHeight = optionsList.scrollHeight;
       var scrollTop = optionsList.scrollTop;
       var clientHeight = optionsList.clientHeight;
-      
+
       // Trigger load more when scrolled to bottom (with 50px threshold)
       if (scrollTop + clientHeight >= scrollHeight - 50) {
         loadMoreRecords();
       }
     });
-    
+
     content.appendChild(optionsList);
 
     popover = Popover.create({
@@ -354,6 +387,19 @@
         setTimeout(function () {
           if (searchInputEl) searchInputEl.focus();
         }, 0);
+        // Let consumers (e.g. BANT Questions "Add Contact") inject content into the dropdown
+        try {
+          var doc =
+            global.document ||
+            (typeof document !== "undefined" ? document : null);
+          if (doc && typeof global.CustomEvent !== "undefined") {
+            doc.dispatchEvent(
+              new global.CustomEvent("record-select:opened", {
+                detail: { fieldId: fieldId, content: content },
+              }),
+            );
+          }
+        } catch (e) {}
       },
       onClose: function () {
         isOpen = false;
@@ -369,7 +415,8 @@
       },
     });
 
-    if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+    if (clearBtn)
+      clearBtn.style.display = canClear && value && !disabled ? "" : "none";
 
     function setValue(newVal) {
       value = newVal !== undefined && newVal !== null ? newVal : "";
@@ -383,16 +430,18 @@
 
     function updateTriggerDisplay() {
       if (selectedRecord) {
-        triggerText.textContent = selectedRecord.name || selectedRecord.label || value;
+        triggerText.textContent =
+          selectedRecord.name || selectedRecord.label || value;
         trigger.classList.remove("placeholder");
         trigger.className = triggerClasses(
           variant,
           size,
           disabled,
           false,
-          canClear && !!value && !disabled
+          canClear && !!value && !disabled,
         );
-        triggerIcon.className = "record-select-trigger-icon shrink-0 flex items-center justify-center size-20 rounded-4 overflow-hidden";
+        triggerIcon.className =
+          "record-select-trigger-icon shrink-0 flex items-center justify-center size-20 rounded-4 overflow-hidden";
         triggerIcon.innerHTML = "";
         if (objectSlug === STANDARD_OBJECT_SLUGS_USERS) {
           var Avatar = getAvatar();
@@ -404,7 +453,9 @@
             });
             triggerIcon.appendChild(vividEl);
           } else {
-            renderStaticIconPlaceholder(selectedRecord.name || selectedRecord.label);
+            renderStaticIconPlaceholder(
+              selectedRecord.name || selectedRecord.label,
+            );
           }
         } else {
           renderStaticObjectIcon();
@@ -417,12 +468,13 @@
           size,
           disabled,
           true,
-          canClear && !!value && !disabled
+          canClear && !!value && !disabled,
         );
         triggerIcon.className = "record-select-trigger-icon shrink-0 hidden";
         triggerIcon.innerHTML = "";
       }
-      if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+      if (clearBtn)
+        clearBtn.style.display = canClear && value && !disabled ? "" : "none";
     }
 
     function renderStaticObjectIcon() {
@@ -478,18 +530,39 @@
       var fields = ["id", "name"];
       var actualLimit = limit || initialLimit;
       var offset = page ? (page - 1) * actualLimit : 0;
-      
+
       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()) {
-            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
@@ -552,7 +625,12 @@
           updateTriggerDisplay();
         })
         .catch(function () {
-          selectedRecord = { id: value, value: value, name: value, label: value };
+          selectedRecord = {
+            id: value,
+            value: value,
+            name: value,
+            label: value,
+          };
           updateTriggerDisplay();
         });
     }
@@ -563,7 +641,9 @@
       loadWrap.className =
         "flex flex-row items-center justify-center gap-8 py-12 px-12 w-full text-reg-12 text-typography-quaternary-text record-select-loading";
       if (Spinner && typeof Spinner.create === "function") {
-        loadWrap.appendChild(Spinner.create({ size: "small", text: "Loading..." }));
+        loadWrap.appendChild(
+          Spinner.create({ size: "small", text: "Loading..." }),
+        );
       } else {
         var loadText = document.createElement("span");
         loadText.textContent = "Loading...";
@@ -571,12 +651,12 @@
       }
       optionsList.appendChild(loadWrap);
     }
-    
+
     function showLoadingMore() {
       // Remove existing loading more indicator
       var existing = optionsList.querySelector(".record-select-loading-more");
       if (existing) existing.remove();
-      
+
       var loadWrap = document.createElement("div");
       loadWrap.className =
         "flex flex-row items-center justify-center gap-8 py-8 px-12 w-full text-reg-12 text-typography-quaternary-text record-select-loading-more";
@@ -589,9 +669,11 @@
       }
       optionsList.appendChild(loadWrap);
     }
-    
+
     function removeLoadingMore() {
-      var loadingMore = optionsList.querySelector(".record-select-loading-more");
+      var loadingMore = optionsList.querySelector(
+        ".record-select-loading-more",
+      );
       if (loadingMore) loadingMore.remove();
     }
 
@@ -610,13 +692,15 @@
       existingOptions.forEach(function (opt) {
         opt.remove();
       });
-      
+
       // Remove old loading/empty states
-      var oldStates = optionsList.querySelectorAll(".record-select-loading, .record-select-empty");
+      var oldStates = optionsList.querySelectorAll(
+        ".record-select-loading, .record-select-empty",
+      );
       oldStates.forEach(function (el) {
         el.remove();
       });
-      
+
       filteredRecords.forEach(function (rec) {
         var optionValue = rec.id || rec.value;
         var optionLabel = rec.name || rec.label || rec.value;
@@ -631,7 +715,7 @@
           "hover:bg-fill-tertiary-fill-light-gray focus:bg-fill-tertiary-fill-light-gray",
           isSelected
             ? "bg-primary-surface hover:!bg-primary-surface-hover"
-            : ""
+            : "",
         );
 
         var optContent = document.createElement("span");
@@ -689,7 +773,7 @@
 
         optionsList.appendChild(option);
       });
-      
+
       // Add loading more indicator at the bottom if fetching
       if (isFetchingMore) {
         showLoadingMore();
@@ -711,60 +795,71 @@
       currentPage = 1;
       hasMoreRecords = true;
       totalFetched = 0;
-      
-      fetchRecords(searchTerm, initialLimit, 1).then(function (result) {
-        allRecords = result.records;
-        filteredRecords = result.records;
-        hasMoreRecords = result.hasMore;
-        totalFetched = result.records.length;
-        currentPage = 1;
-        
-        if (value && !result.records.some(function (r) { return (r.id || r.value) === value; })) {
-          loadSelectedRecord();
-        } else if (value && result.records.length) {
-          var sel = result.records.find(function (r) { return (r.id || r.value) === value; });
-          if (sel) selectedRecord = sel;
-          updateTriggerDisplay();
-        }
-        if (filteredRecords.length === 0) {
-          showEmpty(searchTerm ? "No results found" : "No records available");
-        } else {
-          renderOptions();
-        }
-        scheduleUpdatePosition();
-      }).catch(function () {
-        showEmpty("Failed to load records");
-        hasMoreRecords = false;
-        scheduleUpdatePosition();
-      });
+
+      fetchRecords(searchTerm, initialLimit, 1)
+        .then(function (result) {
+          allRecords = result.records;
+          filteredRecords = result.records;
+          hasMoreRecords = result.hasMore;
+          totalFetched = result.records.length;
+          currentPage = 1;
+
+          if (
+            value &&
+            !result.records.some(function (r) {
+              return (r.id || r.value) === value;
+            })
+          ) {
+            loadSelectedRecord();
+          } else if (value && result.records.length) {
+            var sel = result.records.find(function (r) {
+              return (r.id || r.value) === value;
+            });
+            if (sel) selectedRecord = sel;
+            updateTriggerDisplay();
+          }
+          if (filteredRecords.length === 0) {
+            showEmpty(searchTerm ? "No results found" : "No records available");
+          } else {
+            renderOptions();
+          }
+          scheduleUpdatePosition();
+        })
+        .catch(function () {
+          showEmpty("Failed to load records");
+          hasMoreRecords = false;
+          scheduleUpdatePosition();
+        });
     }
-    
+
     function loadMoreRecords() {
       if (isFetchingMore || !hasMoreRecords) return;
-      
+
       isFetchingMore = true;
       currentPage += 1;
       showLoadingMore();
-      
-      fetchRecords(searchTerm, initialLimit, currentPage).then(function (result) {
-        isFetchingMore = false;
-        removeLoadingMore();
-        
-        if (result.records.length > 0) {
-          allRecords = allRecords.concat(result.records);
-          filteredRecords = filteredRecords.concat(result.records);
-          totalFetched += result.records.length;
-          hasMoreRecords = result.hasMore;
-          renderOptions();
-        } else {
+
+      fetchRecords(searchTerm, initialLimit, currentPage)
+        .then(function (result) {
+          isFetchingMore = false;
+          removeLoadingMore();
+
+          if (result.records.length > 0) {
+            allRecords = allRecords.concat(result.records);
+            filteredRecords = filteredRecords.concat(result.records);
+            totalFetched += result.records.length;
+            hasMoreRecords = result.hasMore;
+            renderOptions();
+          } else {
+            hasMoreRecords = false;
+          }
+        })
+        .catch(function (err) {
+          console.error("[RecordSelect] loadMoreRecords error:", err);
+          isFetchingMore = false;
+          removeLoadingMore();
           hasMoreRecords = false;
-        }
-      }).catch(function (err) {
-        console.error("[RecordSelect] loadMoreRecords error:", err);
-        isFetchingMore = false;
-        removeLoadingMore();
-        hasMoreRecords = false;
-      });
+        });
     }
 
     function debouncedSearch() {
@@ -775,24 +870,26 @@
         currentPage = 1;
         hasMoreRecords = true;
         totalFetched = 0;
-        
-        fetchRecords(searchTerm, initialLimit, 1).then(function (result) {
-          allRecords = result.records;
-          filteredRecords = result.records;
-          hasMoreRecords = result.hasMore;
-          totalFetched = result.records.length;
-          
-          if (result.records.length === 0) {
-            showEmpty("No results found");
-          } else {
-            renderOptions();
-          }
-          scheduleUpdatePosition();
-        }).catch(function () {
-          showEmpty("Search failed");
-          hasMoreRecords = false;
-          scheduleUpdatePosition();
-        });
+
+        fetchRecords(searchTerm, initialLimit, 1)
+          .then(function (result) {
+            allRecords = result.records;
+            filteredRecords = result.records;
+            hasMoreRecords = result.hasMore;
+            totalFetched = result.records.length;
+
+            if (result.records.length === 0) {
+              showEmpty("No results found");
+            } else {
+              renderOptions();
+            }
+            scheduleUpdatePosition();
+          })
+          .catch(function () {
+            showEmpty("Search failed");
+            hasMoreRecords = false;
+            scheduleUpdatePosition();
+          });
       }, 500);
     }
 
@@ -842,7 +939,7 @@
         size,
         disabled,
         !value,
-        canClear && !!value && !disabled
+        canClear && !!value && !disabled,
       );
       if (disabled && isOpen) closeDropdown();
     };

package/core/flow.js

@@ -700,6 +700,7 @@
       size,
       canClear,
       initialLimit,
+      initialFilter,
       helpText = null,
     } = config;
 
@@ -719,6 +720,7 @@
         size: size || "default",
         canClear: !!canClear,
         initialLimit,
+        initialFilter,
         onChange: (value, record) => {
           set(fieldId, value);
           if (onChange) onChange(value, record);
@@ -768,6 +770,7 @@
       variant,
       size,
       initialLimit,
+      initialFilter,
       displayFields,
       helpText = null,
     } = config;
@@ -786,6 +789,7 @@
         variant: variant || "default",
         size: size || "default",
         initialLimit,
+        initialFilter,
         displayFields: displayFields || [],
         onValuesChange: (values, records) => {
           set(fieldId, values);