@superleapai/flow-ui 1.0.0

package/components/record-multiselect.js

@@ -0,0 +1,956 @@
+/**
+ * Record MultiSelect Component (superleap-flow)
+ * Multi-record select with search; same trigger/content styling as MultiSelect.
+ * Uses: Popover (dropdown), InputComponent (search), Spinner (loading), Avatar (vivid for user), Icon (object icons).
+ * Fetches records via superleapClient.getSdk().model(objectSlug).
+ * For objectSlug === 'user' shows Vivid Avatar; otherwise static icon from schema or object map (database fallback).
+ * Does not use icon from backend payload.
+ */
+
+(function (global) {
+  "use strict";
+
+  var Popover = global.Popover;
+  var InputComponent = global.InputComponent;
+  var Spinner = global.Spinner;
+
+  /** When objectSlug === user, show Vivid Avatar (name-based color) instead of static icon */
+  var STANDARD_OBJECT_SLUGS_USERS = "user";
+
+  /** Object slug -> Icon component iconStr + color (Tabler icon names). Used when objectSchema.properties.icon_data not provided. */
+  var OBJECT_SLUG_TO_ICON = {
+    team: { iconStr: "IconUsers", color: "primary" },
+    role: { iconStr: "IconShield", color: "info" },
+    iframe: { iconStr: "IconLayout", color: "neutral" },
+    lead: { iconStr: "IconUser", color: "primary" },
+    opportunity: { iconStr: "IconCurrencyDollar", color: "success" },
+    call_log: { iconStr: "IconPhone", color: "info" },
+    communication: { iconStr: "IconMessage", color: "primary" },
+    history_field: { iconStr: "IconClock", color: "neutral" },
+    email: { iconStr: "IconMail", color: "info" },
+  };
+
+  var CHEVRON_SVG =
+    '<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 CHECK_SVG =
+    '<svg width="14" height="14" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.41574 12.2442 3.41574 12.5331 3.72684C12.822 4.03795 12.822 4.53753 12.5331 4.84863L6.81767 10.6736C6.52329 10.9901 6.05308 10.9901 5.7587 10.6736L2.46685 7.3463C2.17795 7.03519 2.17795 6.53561 2.46685 6.2245C2.75575 5.9134 3.24395 5.9134 3.53285 6.2245L6.28822 9.05351L11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></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>';
+
+  function triggerClasses(variant, size, disabled, isEmpty) {
+    var v = variant || "default";
+    var base =
+      "w-full items-center justify-between rounded-4 border-1/2 bg-fill-quarternary-fill-white !text-reg-13 focus:outline-none flex h-full truncate hover:cursor-pointer ";
+    var variantClasses = {
+      default:
+        "border-border-primary hover:border-primary-border focus:border-1/2 focus:border-primary-border",
+      error:
+        "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",
+      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",
+    };
+    var sizeClasses = {
+      default: "px-12 py-6",
+      large: "px-12 py-8",
+      small: "px-8 py-4",
+    };
+    var textColorClass = isEmpty ? " text-typography-quaternary-text" : " text-typography-primary-text";
+    var disabledClass = disabled
+      ? " pointer-events-none cursor-not-allowed bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
+      : "";
+    return (
+      base +
+      (variantClasses[v] || variantClasses.default) +
+      " " +
+      (sizeClasses[size] || sizeClasses.default) +
+      textColorClass +
+      disabledClass
+    );
+  }
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient */
+  function getClient() {
+    if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent("superleapClient");
+      if (c) return c;
+    }
+    return global.superleapClient;
+  }
+
+  /** Resolve Avatar component for Vivid Avatar when objectSlug === user */
+  function getAvatar() {
+    if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent("Avatar");
+      if (c) return c;
+    }
+    return global.Avatar;
+  }
+
+  /** Resolve Icon component for object/record icons */
+  function getIcon() {
+    if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent("Icon");
+      if (c) return c;
+    }
+    return global.Icon;
+  }
+
+  /**
+   * Get iconStr and color for the object: from objectSchema.properties.icon_data first, else OBJECT_SLUG_TO_ICON, else IconDatabase fallback.
+   * @param {string} slug - objectSlug
+   * @param {{ properties?: { icon_data?: { icon?: string, color?: string } } } | null} objectSchema - optional schema (ObjectType)
+   * @returns {{ iconStr: string, color: string }}
+   */
+  function getObjectIconInfo(slug, objectSchema) {
+    var color = "neutral";
+    var iconStr = "IconDatabase";
+    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 (!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;
+      } else {
+        iconStr = "IconDatabase";
+        color = "neutral";
+      }
+    }
+    return { iconStr: iconStr, color: color || "neutral" };
+  }
+
+  /**
+   * Create a record multiselect component
+   * @param {Object} config
+   * @param {string} config.fieldId - Field ID for state management
+   * @param {string} config.objectSlug - Object slug (e.g. "account", "opportunity")
+   * @param {string} [config.placeholder] - Placeholder text
+   * @param {string} [config.searchPlaceholder] - Search input placeholder
+   * @param {string} [config.label] - Label for summary when items selected (e.g. "selected" -> "3 selected")
+   * @param {Array} config.value - Current selected values (array of record ids)
+   * @param {Function} config.onValuesChange - Change handler (values: string[], records?: Array) => void
+   * @param {boolean} [config.disabled] - Whether select is disabled
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @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.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
+   */
+  function createRecordMultiSelect(config) {
+    var fieldId = config.fieldId;
+    var objectSlug = config.objectSlug;
+    var objectSchema = config.objectSchema || null;
+    var placeholder = config.placeholder || "Select records";
+    var searchPlaceholder = config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
+    var summaryLabel = config.label || "selected";
+    var onValuesChange = config.onValuesChange;
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var initialLimit = config.initialLimit != null ? config.initialLimit : 50;
+    var displayFields = config.displayFields || [];
+
+    var disabled = config.disabled === true;
+    var values = Array.isArray(config.value)
+      ? config.value.slice()
+      : Array.isArray(config.values)
+        ? config.values.slice()
+        : [];
+
+    if (!objectSlug) {
+      var errEl = document.createElement("div");
+      errEl.className = "text-reg-13 text-typography-quaternary-text";
+      errEl.textContent = "Record multiselect: objectSlug is required.";
+      return errEl;
+    }
+
+    var container = document.createElement("div");
+    container.className = "record-multiselect relative w-full group";
+    container.setAttribute("data-field-id", fieldId);
+    container.setAttribute("data-object-slug", objectSlug);
+
+    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");
+    triggerWrapper.className =
+      "multiselect-trigger-wrapper relative flex w-full items-center justify-between gap-8";
+
+    var trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
+    trigger.disabled = disabled;
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-multiselectable", "true");
+    trigger.setAttribute("aria-label", placeholder);
+    trigger.classList.add("record-multiselect-trigger");
+
+    var triggerContent = document.createElement("div");
+    triggerContent.className = "record-multiselect-trigger-content flex items-center gap-8 flex-1 min-w-0";
+
+    var triggerIcon = document.createElement("span");
+    triggerIcon.className = "record-multiselect-trigger-icon shrink-0 hidden";
+    triggerContent.appendChild(triggerIcon);
+
+    var triggerText = document.createElement("div");
+    triggerText.className = "truncate text-inherit record-multiselect-value";
+    triggerContent.appendChild(triggerText);
+
+    function renderStaticObjectIcon() {
+      var IconComponent = getIcon();
+      if (!IconComponent || typeof IconComponent.create !== "function") return;
+      var info = getObjectIconInfo(objectSlug, objectSchema);
+      var el = IconComponent.create({
+        iconStr: info.iconStr,
+        color: info.color,
+        fallbackIconStr: "IconDatabase",
+        defaultIcon: true,
+        className: "size-20 shrink-0",
+      });
+      if (el) triggerIcon.appendChild(el);
+    }
+
+    function renderStaticIconPlaceholder(label) {
+      var initial = (label && String(label).charAt(0).toUpperCase()) || "?";
+      var div = document.createElement("div");
+      div.className =
+        "size-20 rounded-full bg-primary-surface text-primary-text flex items-center justify-center text-reg-12 font-semibold";
+      div.textContent = initial;
+      triggerIcon.appendChild(div);
+    }
+
+    function renderTriggerContent() {
+      triggerText.textContent = values.length === 0 ? placeholder : values.length + " " + summaryLabel;
+      triggerIcon.innerHTML = "";
+      if (values.length === 0) {
+        triggerIcon.className = "record-multiselect-trigger-icon shrink-0 hidden";
+      } else {
+        triggerIcon.className = "record-multiselect-trigger-icon shrink-0 flex items-center justify-center size-20 rounded-4 overflow-hidden";
+        if (objectSlug === STANDARD_OBJECT_SLUGS_USERS) {
+          var Avatar = getAvatar();
+          if (Avatar && typeof Avatar.createVivid === "function") {
+            var firstRecord = selectedRecords.length > 0 ? selectedRecords[0] : null;
+            var label = firstRecord && (firstRecord.name || firstRecord.label);
+            var vividEl = Avatar.createVivid({
+              name: label || "?",
+              size: "small",
+              shape: "circle",
+            });
+            triggerIcon.appendChild(vividEl);
+          } else {
+            renderStaticIconPlaceholder(selectedRecords.length > 0 && (selectedRecords[0].name || selectedRecords[0].label));
+          }
+        } else {
+          renderStaticObjectIcon();
+        }
+      }
+    }
+    renderTriggerContent();
+
+    trigger.appendChild(triggerContent);
+
+    var chevron = document.createElement("span");
+    chevron.className =
+      "ml-4 box-content flex size-16 items-center justify-center shrink-0 transition-transform duration-200 group-[.open]:rotate-180";
+    chevron.innerHTML = CHEVRON_SVG;
+    chevron.setAttribute("aria-hidden", "true");
+    trigger.appendChild(chevron);
+
+    triggerWrapper.appendChild(trigger);
+    container.appendChild(triggerWrapper);
+
+    // Dropdown content: search + list
+    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");
+
+    var searchWrap = document.createElement("div");
+    searchWrap.className = "p-8 pb-4 border-b-1/2 border-border-primary ";
+    var searchInputEl;
+    var searchInputWrapper = null;
+    if (InputComponent && typeof InputComponent.create === "function") {
+      searchInputWrapper = InputComponent.create({
+        variant: "borderless",
+        inputSize: "small",
+        type: "text",
+        placeholder: searchPlaceholder,
+        value: "",
+        startIcon: SEARCH_ICON,
+        className: "!border-0 !p-0",
+        onInput: function () {
+          searchTerm = searchInputWrapper.getValue().trim();
+          if (!searchTerm) {
+            loadInitialAndRender();
+            return;
+          }
+          debouncedSearch();
+        },
+      });
+      var inputEl = searchInputWrapper.getInput();
+      if (inputEl) inputEl.setAttribute("aria-label", "Search records");
+      searchInputEl = inputEl;
+      searchWrap.appendChild(searchInputWrapper);
+    } else {
+      var fallbackWrapper = document.createElement("div");
+      fallbackWrapper.className = "flex items-center gap-8";
+      
+      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 =
+        "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
+      searchInput.placeholder = searchPlaceholder;
+      searchInput.setAttribute("aria-label", "Search records");
+      searchInputEl = searchInput;
+      fallbackWrapper.appendChild(searchInput);
+      searchWrap.appendChild(fallbackWrapper);
+    }
+    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";
+    
+    // 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);
+
+    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;
+          }
+        },
+      });
+    }
+
+    function isSelected(recordId) {
+      return values.some(function (v) {
+        return v === recordId || String(v) === String(recordId);
+      });
+    }
+
+    function toggleValue(recordId) {
+      var idx = values.findIndex(function (v) {
+        return v === recordId || String(v) === String(recordId);
+      });
+      if (idx >= 0) {
+        values.splice(idx, 1);
+        selectedRecords = selectedRecords.filter(function (r) {
+          return (r.id || r.value) !== recordId;
+        });
+      } else {
+        values.push(recordId);
+        var rec = allRecords.find(function (r) {
+          return (r.id || r.value) === recordId;
+        });
+        if (rec) selectedRecords.push(rec);
+      }
+      renderTriggerContent();
+      trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
+      syncOptionStates();
+      if (onValuesChange) onValuesChange(values.slice(), selectedRecords.slice());
+    }
+
+    function syncOptionStates() {
+      optionsList.querySelectorAll("[role=option]").forEach(function (optEl) {
+        var dv = optEl.getAttribute("data-value");
+        var selected = values.some(function (v) {
+          return v === dv || String(v) === dv || (dv === "false" && v === false) || (dv === "true" && v === true);
+        });
+        optEl.setAttribute("aria-selected", selected);
+        var checkEl = optEl.querySelector(".multiselect-option-check");
+        if (checkEl) checkEl.style.visibility = selected ? "visible" : "hidden";
+        optEl.classList.toggle("bg-primary-surface", selected);
+        optEl.classList.toggle("hover:!bg-primary-surface-hover", selected);
+        optEl.classList.toggle("hover:bg-fill-tertiary-fill-light-gray", !selected);
+      });
+    }
+
+    function fetchRecords(search, limit, page) {
+      var client = getClient();
+      if (!client || typeof client.getSdk !== "function") {
+        return Promise.resolve({ records: [], hasMore: false });
+      }
+      var sdk = client.getSdk();
+      if (!sdk) return Promise.resolve({ records: [], hasMore: false });
+      var model = sdk.model(objectSlug);
+      var fields = ["id", "name"].concat(displayFields || []);
+      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);
+          if (search && search.trim()) {
+            q = q.filterBy({
+              or: [
+                { field: "name", operator: "contains", value: search.trim() },
+                { field: "id", operator: "eq", value: search.trim() },
+              ],
+            });
+          }
+          var orderBy = ["name"];
+          if (objectSlug === "account") orderBy.push("-ParentId");
+          return q
+            .limit(actualLimit)
+            .offset(offset)
+            .orderBy.apply(q, orderBy)
+            .cache({ ttl: 2 * 60 * 1000 })
+            .then(function (records) {
+              var mappedRecords = records.map(function (r) {
+                var d = r.toJSON ? r.toJSON() : r;
+                var iconUrl = d.icon || d.logo || d.icon_url || d.Icon__c || d.Logo__c || null;
+                var displayLabels = displayFields ? displayFields.map(function (field) {
+                  return d[field] || "";
+                }) : [];
+                return {
+                  id: d.id,
+                  value: d.id,
+                  name: d.name || d.id,
+                  label: d.name || d.id,
+                  icon: iconUrl,
+                  displayLabels: displayLabels,
+                };
+              });
+              var hasMore = mappedRecords.length >= actualLimit;
+              return { records: mappedRecords, hasMore: hasMore };
+            });
+        }
+      } catch (e) {
+        console.error("[RecordMultiSelect] fetchRecords error:", e);
+      }
+      return Promise.resolve({ records: [], hasMore: false });
+    }
+
+    function loadSelectedRecords() {
+      if (!values || values.length === 0) {
+        renderTriggerContent();
+        return;
+      }
+      var client = getClient();
+      if (!client || typeof client.getSdk !== "function") {
+        renderTriggerContent();
+        return;
+      }
+      var sdk = client.getSdk();
+      if (!sdk) {
+        renderTriggerContent();
+        return;
+      }
+      var model = sdk.model(objectSlug);
+      var fields = ["id", "name"].concat(displayFields || []);
+      model
+        .select.apply(model, fields)
+        .filterBy({
+          and: [
+            { field: "id", operator: "in", value: values },
+          ],
+        })
+        .limit(values.length)
+        .then(function (records) {
+          selectedRecords = records.map(function (r) {
+            var d = r.toJSON ? r.toJSON() : r;
+            var iconUrl = d.icon || d.logo || d.icon_url || d.Icon__c || d.Logo__c || null;
+            var displayLabels = displayFields ? displayFields.map(function (field) {
+              return d[field] || "";
+            }) : [];
+            return {
+              id: d.id,
+              value: d.id,
+              name: d.name || d.id,
+              label: d.name || d.id,
+              icon: iconUrl,
+              displayLabels: displayLabels,
+            };
+          });
+          renderTriggerContent();
+        })
+        .catch(function () {
+          selectedRecords = values.map(function (v) {
+            return { id: v, value: v, name: v, label: v, icon: null, displayLabels: [] };
+          });
+          renderTriggerContent();
+        });
+    }
+
+    function showLoading() {
+      optionsList.innerHTML = "";
+      var loadWrap = document.createElement("div");
+      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-multiselect-loading";
+      if (Spinner && typeof Spinner.create === "function") {
+        loadWrap.appendChild(Spinner.create({ size: "small", text: "Loading..." }));
+      } else {
+        var loadText = document.createElement("span");
+        loadText.textContent = "Loading...";
+        loadWrap.appendChild(loadText);
+      }
+      optionsList.appendChild(loadWrap);
+    }
+    
+    function showLoadingMore() {
+      var existing = optionsList.querySelector(".record-multiselect-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-multiselect-loading-more";
+      if (Spinner && typeof Spinner.create === "function") {
+        loadWrap.appendChild(Spinner.create({ size: "small" }));
+      } else {
+        var loadText = document.createElement("span");
+        loadText.textContent = "Loading more...";
+        loadWrap.appendChild(loadText);
+      }
+      optionsList.appendChild(loadWrap);
+    }
+    
+    function removeLoadingMore() {
+      var loadingMore = optionsList.querySelector(".record-multiselect-loading-more");
+      if (loadingMore) loadingMore.remove();
+    }
+
+    function showEmpty(message) {
+      optionsList.innerHTML = "";
+      var empty = document.createElement("div");
+      empty.className =
+        "w-full justify-center px-12 py-6 text-center text-reg-12 text-typography-quaternary-text record-multiselect-empty";
+      empty.textContent = message || "No records found";
+      optionsList.appendChild(empty);
+    }
+
+    function renderOptions() {
+      var existingOptions = optionsList.querySelectorAll("[role=option]");
+      existingOptions.forEach(function (opt) {
+        opt.remove();
+      });
+      
+      var oldStates = optionsList.querySelectorAll(".record-multiselect-loading, .record-multiselect-empty");
+      oldStates.forEach(function (el) {
+        el.remove();
+      });
+      
+      filteredRecords.forEach(function (rec) {
+        var recordId = rec.id || rec.value;
+        var recordLabel = rec.name || rec.label || rec.value;
+        var selected = isSelected(recordId);
+
+        var option = document.createElement("div");
+        option.setAttribute("role", "option");
+        option.setAttribute("data-value", recordId);
+        option.setAttribute("aria-selected", selected);
+        option.className = join(
+          "relative flex w-full cursor-pointer select-none items-center gap-8 rounded-2 px-12 py-6 text-reg-13 outline-none first:rounded-t-4 last:rounded-b-4",
+          "hover:bg-fill-tertiary-fill-light-gray focus:bg-fill-tertiary-fill-light-gray",
+          selected ? "bg-primary-surface hover:!bg-primary-surface-hover" : ""
+        );
+
+        var optContent = document.createElement("span");
+        optContent.className = "flex flex-col flex-1 truncate min-w-0";
+        
+        var primaryRow = document.createElement("div");
+        primaryRow.className = "flex items-center gap-8 truncate";
+        
+        if (objectSlug === STANDARD_OBJECT_SLUGS_USERS) {
+          var Avatar = getAvatar();
+          if (Avatar && typeof Avatar.createVivid === "function") {
+            var avatarEl = Avatar.createVivid({
+              name: recordLabel || "",
+              size: "small",
+              shape: "circle",
+            });
+            primaryRow.appendChild(avatarEl);
+          } else {
+            var plUser = document.createElement("span");
+            plUser.className =
+              "size-20 rounded-full bg-primary-surface text-primary-text flex items-center justify-center text-reg-12 font-semibold shrink-0";
+            plUser.textContent = (recordLabel || "?").charAt(0).toUpperCase();
+            primaryRow.appendChild(plUser);
+          }
+        } else {
+          var IconComponent = getIcon();
+          if (IconComponent && typeof IconComponent.create === "function") {
+            var iconInfo = getObjectIconInfo(objectSlug, objectSchema);
+            var iconEl = IconComponent.create({
+              iconStr: iconInfo.iconStr,
+              color: iconInfo.color,
+              fallbackIconStr: "IconDatabase",
+              defaultIcon: true,
+              className: "size-20 shrink-0",
+            });
+            if (iconEl) primaryRow.appendChild(iconEl);
+          } else {
+            var plOther = document.createElement("span");
+            plOther.className =
+              "size-20 rounded-4 flex items-center justify-center shrink-0 bg-neutral-surface-hover text-neutral-text-base";
+            plOther.textContent = "?";
+            primaryRow.appendChild(plOther);
+          }
+        }
+        
+        var labelSpan = document.createElement("span");
+        labelSpan.className = "truncate";
+        labelSpan.textContent = recordLabel;
+        primaryRow.appendChild(labelSpan);
+        optContent.appendChild(primaryRow);
+        
+        // Display secondary fields
+        if (rec.displayLabels && rec.displayLabels.length > 0 && rec.displayLabels.some(function (l) { return l; })) {
+          var secondaryRow = document.createElement("div");
+          secondaryRow.className = "flex items-center gap-4 truncate text-reg-10 text-typography-tertiary-text mt-2 ml-28";
+          rec.displayLabels.forEach(function (label, index) {
+            if (label) {
+              var secondaryLabel = document.createElement("span");
+              secondaryLabel.className = "truncate";
+              secondaryLabel.textContent = label;
+              secondaryRow.appendChild(secondaryLabel);
+              if (index < rec.displayLabels.length - 1 && rec.displayLabels[index + 1]) {
+                var separator = document.createElement("span");
+                separator.textContent = " • ";
+                secondaryRow.appendChild(separator);
+              }
+            }
+          });
+          optContent.appendChild(secondaryRow);
+        }
+        
+        option.appendChild(optContent);
+
+        var checkSpan = document.createElement("span");
+        checkSpan.className = "multiselect-option-check ml-auto flex size-14 shrink-0 items-center justify-center";
+        checkSpan.innerHTML = CHECK_SVG;
+        checkSpan.style.visibility = selected ? "visible" : "hidden";
+        option.appendChild(checkSpan);
+
+        option.addEventListener("click", function (e) {
+          e.stopPropagation();
+          if (disabled) return;
+          toggleValue(recordId);
+        });
+        option.addEventListener("mouseenter", function () {
+          if (disabled) return;
+          optionsList.querySelectorAll("[role=option]").forEach(function (o) {
+            if (o !== option && !isSelected(o.getAttribute("data-value"))) {
+              o.classList.remove("bg-fill-tertiary-fill-light-gray");
+            }
+          });
+          if (!option.classList.contains("bg-primary-surface")) {
+            option.classList.add("bg-fill-tertiary-fill-light-gray");
+          }
+        });
+
+        optionsList.appendChild(option);
+      });
+      
+      if (isFetchingMore) {
+        showLoadingMore();
+      }
+    }
+
+    function loadInitialAndRender() {
+      showLoading();
+      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 (filteredRecords.length === 0) {
+          showEmpty(searchTerm ? "No results found" : "No records available");
+        } else {
+          renderOptions();
+        }
+      }).catch(function () {
+        showEmpty("Failed to load records");
+        hasMoreRecords = false;
+      });
+    }
+    
+    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 {
+          hasMoreRecords = false;
+        }
+      }).catch(function (err) {
+        console.error("[RecordMultiSelect] loadMoreRecords error:", err);
+        isFetchingMore = false;
+        removeLoadingMore();
+        hasMoreRecords = false;
+      });
+    }
+
+    function debouncedSearch() {
+      if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+      searchDebounceTimer = setTimeout(function () {
+        searchDebounceTimer = null;
+        showLoading();
+        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();
+          }
+        }).catch(function () {
+          showEmpty("Search failed");
+          hasMoreRecords = false;
+        });
+      }, 500);
+    }
+
+    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();
+    }
+
+    function closeDropdown() {
+      if (usePopover && popover) {
+        popover.hide();
+        return;
+      }
+      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;
+      }
+    }
+
+    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();
+        if (!searchTerm) {
+          loadInitialAndRender();
+          return;
+        }
+        debouncedSearch();
+      });
+    }
+    if (searchInputEl) {
+      searchInputEl.addEventListener("keydown", function (e) {
+        e.stopPropagation();
+      });
+    }
+
+    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) {
+        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();
+      });
+    }
+
+    container.updateValues = function (newValues) {
+      values = Array.isArray(newValues) ? newValues.slice() : [];
+      loadSelectedRecords();
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      trigger.disabled = disabled;
+      trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
+      if (disabled && isOpen) closeDropdown();
+    };
+
+    container.getValues = function () {
+      return values.slice();
+    };
+
+    container.getSelectedRecords = function () {
+      return selectedRecords.slice();
+    };
+
+    if (values && values.length > 0) loadSelectedRecords();
+    else renderTriggerContent();
+
+    return container;
+  }
+
+  global.RecordMultiSelect = {
+    create: createRecordMultiSelect,
+  };
+})(typeof window !== "undefined" ? window : this);