@superleapai/flow-ui 2.4.6 → 2.5.0

package/components/record-select.js

@@ -11,7 +11,10 @@
   "use strict";
 
   function getDep(name) {
-    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+    if (
+      typeof global.FlowUI !== "undefined" &&
+      typeof global.FlowUI._getComponent === "function"
+    ) {
       var c = global.FlowUI._getComponent(name);
       if (c) return c;
     }
@@ -42,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>';
 
@@ -57,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",
     };
@@ -66,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"
       : "";
@@ -122,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";
@@ -153,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
    */
@@ -161,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 =
@@ -214,7 +235,7 @@
       size,
       disabled,
       !value,
-      canClear && !!value && !disabled
+      canClear && !!value && !disabled,
     );
     trigger.disabled = disabled;
     trigger.setAttribute("aria-haspopup", "listbox");
@@ -223,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";
@@ -267,7 +289,8 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("data-field-id", fieldId);
-    content.className = "record-select-content  max-h-[45vh] 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";
@@ -298,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 =
@@ -317,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({
@@ -365,11 +389,15 @@
         }, 0);
         // Let consumers (e.g. BANT Questions "Add Contact") inject content into the dropdown
         try {
-          var doc = global.document || (typeof document !== "undefined" ? document : null);
+          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 },
-            }));
+            doc.dispatchEvent(
+              new global.CustomEvent("record-select:opened", {
+                detail: { fieldId: fieldId, content: content },
+              }),
+            );
           }
         } catch (e) {}
       },
@@ -387,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 : "";
@@ -401,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();
@@ -422,7 +453,9 @@
             });
             triggerIcon.appendChild(vividEl);
           } else {
-            renderStaticIconPlaceholder(selectedRecord.name || selectedRecord.label);
+            renderStaticIconPlaceholder(
+              selectedRecord.name || selectedRecord.label,
+            );
           }
         } else {
           renderStaticObjectIcon();
@@ -435,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() {
@@ -496,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
@@ -570,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();
         });
     }
@@ -581,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...";
@@ -589,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";
@@ -607,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();
     }
 
@@ -628,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;
@@ -649,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");
@@ -707,7 +773,7 @@
 
         optionsList.appendChild(option);
       });
-      
+
       // Add loading more indicator at the bottom if fetching
       if (isFetchingMore) {
         showLoadingMore();
@@ -729,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() {
@@ -793,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);
     }
 
@@ -860,7 +939,7 @@
         size,
         disabled,
         !value,
-        canClear && !!value && !disabled
+        canClear && !!value && !disabled,
       );
       if (disabled && isOpen) closeDropdown();
     };

package/core/flow.js

@@ -591,6 +591,81 @@
     return field;
   }
 
+  /**
+   * Create a card select field (uses CardSelect component when available, else radio fallback)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {Array} config.options - Array of { value, label, description?, icon?, disabled? }
+   * @param {boolean} [config.required] - Whether field is required
+   * @param {Function} [config.onChange] - Optional change handler (receives selected value)
+   * @param {string} [config.helpText] - Optional help text for tooltip
+   * @param {boolean} [config.disabled] - Whether all cards are disabled
+   * @param {string} [config.className] - Extra CSS class on card container
+   * @returns {HTMLElement} Field wrapper element
+   */
+  function createCardSelect(config) {
+    const { label, fieldId, options = [], required = false, onChange, helpText = null, disabled = false, className } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("CardSelect") && getComponent("CardSelect").create) {
+      const currentValue = get(fieldId);
+      const cardSelectEl = getComponent("CardSelect").create({
+        name: fieldId,
+        options: options.map((opt) => ({
+          value: opt.value,
+          label: opt.label || opt.value,
+          description: opt.description,
+          icon: opt.icon,
+          disabled: opt.disabled,
+        })),
+        value: currentValue,
+        disabled,
+        className,
+        onChange: (value) => {
+          set(fieldId, value);
+          if (onChange) onChange(value);
+        },
+      });
+      cardSelectEl._fieldId = fieldId;
+      field.appendChild(cardSelectEl);
+      return field;
+    }
+
+    // Fallback: native radio buttons
+    const radioGroup = document.createElement("div");
+    radioGroup.className = "card-select-fallback";
+
+    options.forEach((opt) => {
+      const wrapper = document.createElement("div");
+      wrapper.className = "card-option";
+
+      const radio = document.createElement("input");
+      radio.type = "radio";
+      radio.name = fieldId;
+      radio.value = opt.value;
+      radio.id = `${fieldId}-${opt.value}`;
+      radio.checked = get(fieldId) === opt.value;
+      radio.disabled = disabled || !!opt.disabled;
+      radio.addEventListener("change", () => {
+        set(fieldId, opt.value);
+        if (onChange) { onChange(opt.value); }
+      });
+
+      const radioLabel = document.createElement("label");
+      radioLabel.htmlFor = `${fieldId}-${opt.value}`;
+      radioLabel.textContent = opt.label || opt.value;
+
+      wrapper.appendChild(radio);
+      wrapper.appendChild(radioLabel);
+      radioGroup.appendChild(wrapper);
+    });
+
+    field.appendChild(radioGroup);
+    return field;
+  }
+
   /**
    * Create a multi-select field (uses MultiSelect component when available, else checkbox group)
    * @param {Object} config - Configuration object
@@ -700,6 +775,7 @@
       size,
       canClear,
       initialLimit,
+      initialFilter,
       helpText = null,
     } = config;
 
@@ -719,6 +795,7 @@
         size: size || "default",
         canClear: !!canClear,
         initialLimit,
+        initialFilter,
         onChange: (value, record) => {
           set(fieldId, value);
           if (onChange) onChange(value, record);
@@ -768,6 +845,7 @@
       variant,
       size,
       initialLimit,
+      initialFilter,
       displayFields,
       helpText = null,
     } = config;
@@ -786,6 +864,7 @@
         variant: variant || "default",
         size: size || "default",
         initialLimit,
+        initialFilter,
         displayFields: displayFields || [],
         onValuesChange: (values, records) => {
           set(fieldId, values);
@@ -1737,6 +1816,7 @@
     createTimePicker,
     createDateTimePicker,
     createRadioGroup,
+    createCardSelect,
     createMultiSelect,
     createRecordSelect,
     createRecordMultiSelect,