@superleapai/flow-ui 1.0.0

package/components/record-select.js

@@ -0,0 +1,930 @@
+/**
+ * Record Select Component (superleap-flow)
+ * Single-record select with search; same trigger/content styling as Select.
+ * Uses: Popover (dropdown), InputComponent (search), Spinner (loading), Avatar (vivid for user).
+ * 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 === USERS, 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 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>';
+
+  function triggerClasses(variant, size, disabled, placeholder, hasClear) {
+    var v = variant || "default";
+    var base =
+      "w-full items-center justify-between rounded-4 border-1/2 bg-fill-quarternary-fill-white text-typography-primary-text !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 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"
+      : "";
+    var clearPadding = hasClear ? " pr-24" : "";
+    return (
+      base +
+      (variantClasses[v] || variantClasses.default) +
+      " " +
+      (sizeClasses[size] || sizeClasses.default) +
+      placeholderClass +
+      disabledClass +
+      clearPadding
+    );
+  }
+
+  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 select 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.value - Current value (record id)
+   * @param {Function} config.onChange - Change handler (value, record?) => 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 {boolean} [config.canClear] - Show clear button when value is set
+   * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
+   * @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
+   */
+  function createRecordSelect(config) {
+    var fieldId = config.fieldId;
+    var objectSlug = config.objectSlug;
+    var objectSchema = config.objectSchema || null;
+    var placeholder = config.placeholder || "Select a record";
+    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 disabled = config.disabled === true;
+    var value =
+      config.value !== undefined && config.value !== null ? config.value : "";
+
+    if (!objectSlug) {
+      var errEl = document.createElement("div");
+      errEl.className = "text-reg-13 text-typography-quaternary-text";
+      errEl.textContent = "Record select: objectSlug is required.";
+      return errEl;
+    }
+
+    var container = document.createElement("div");
+    container.className = "record-select relative w-full group";
+    container.setAttribute("data-field-id", fieldId);
+    container.setAttribute("data-object-slug", objectSlug);
+
+    var selectedRecord = null;
+    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-select-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 (same structure as Select)
+    var triggerWrapper = document.createElement("span");
+    triggerWrapper.className =
+      "select-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,
+      !value,
+      canClear && !!value && !disabled
+    );
+    trigger.disabled = disabled;
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-label", placeholder);
+    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";
+
+    var triggerIcon = document.createElement("span");
+    triggerIcon.className = "record-select-trigger-icon shrink-0 hidden";
+    triggerContent.appendChild(triggerIcon);
+
+    var triggerText = document.createElement("div");
+    triggerText.className = "truncate text-inherit record-select-value";
+    triggerText.textContent = placeholder;
+    triggerContent.appendChild(triggerText);
+
+    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);
+
+    var clearBtn = null;
+    if (canClear) {
+      clearBtn = document.createElement("button");
+      clearBtn.type = "button";
+      clearBtn.className =
+        "rounded-full absolute right-12 top-1/2 -translate-y-1/2 bg-transparent p-0 text-typography-tertiary-text hover:text-typography-secondary-text focus:outline-none record-select-clear";
+      clearBtn.innerHTML = X_SVG;
+      clearBtn.setAttribute("aria-label", "Clear selection");
+      clearBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        setValue("");
+        if (onChange) onChange("");
+      });
+      triggerWrapper.appendChild(clearBtn);
+    }
+
+    container.appendChild(triggerWrapper);
+
+    // Dropdown content: search + list (same content pattern as Select)
+    var content = document.createElement("div");
+    content.setAttribute("role", "listbox");
+    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 = "py-8 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 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 =
+        "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-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);
+
+    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").forEach(function (other) {
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector("button, .custom-select-trigger, .record-select-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;
+          }
+        },
+      });
+    }
+
+    if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+
+    function setValue(newVal) {
+      value = newVal !== undefined && newVal !== null ? newVal : "";
+      selectedRecord = null;
+      if (value) {
+        loadSelectedRecord();
+      } else {
+        updateTriggerDisplay();
+      }
+    }
+
+    function updateTriggerDisplay() {
+      if (selectedRecord) {
+        triggerText.textContent = selectedRecord.name || selectedRecord.label || value;
+        trigger.classList.remove("placeholder");
+        trigger.className = triggerClasses(
+          variant,
+          size,
+          disabled,
+          false,
+          canClear && !!value && !disabled
+        );
+        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();
+          if (Avatar && typeof Avatar.createVivid === "function") {
+            var vividEl = Avatar.createVivid({
+              name: selectedRecord.name || selectedRecord.label || "",
+              size: "small",
+              shape: "circle",
+            });
+            triggerIcon.appendChild(vividEl);
+          } else {
+            renderStaticIconPlaceholder(selectedRecord.name || selectedRecord.label);
+          }
+        } else {
+          renderStaticObjectIcon();
+        }
+      } else {
+        triggerText.textContent = placeholder;
+        trigger.classList.add("placeholder");
+        trigger.className = triggerClasses(
+          variant,
+          size,
+          disabled,
+          true,
+          canClear && !!value && !disabled
+        );
+        triggerIcon.className = "record-select-trigger-icon shrink-0 hidden";
+        triggerIcon.innerHTML = "";
+      }
+      if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+    }
+
+    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 showTriggerPlaceholder(record) {
+      if (objectSlug === STANDARD_OBJECT_SLUGS_USERS) {
+        var Avatar = getAvatar();
+        if (Avatar && typeof Avatar.createVivid === "function") {
+          var label = record && (record.name || record.label);
+          var vividEl = Avatar.createVivid({
+            name: label || "?",
+            size: "small",
+            shape: "circle",
+          });
+          triggerIcon.appendChild(vividEl);
+        } else {
+          renderStaticIconPlaceholder(record && (record.name || record.label));
+        }
+      } else {
+        renderStaticObjectIcon();
+      }
+    }
+
+    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"];
+      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;
+                return {
+                  id: d.id,
+                  value: d.id,
+                  name: d.name || d.id,
+                  label: d.name || d.id,
+                };
+              });
+              // If we got fewer records than the limit, there are no more
+              var hasMore = mappedRecords.length >= actualLimit;
+              return { records: mappedRecords, hasMore: hasMore };
+            });
+        }
+      } catch (e) {
+        console.error("[RecordSelect] fetchRecords error:", e);
+      }
+      return Promise.resolve({ records: [], hasMore: false });
+    }
+
+    function loadSelectedRecord() {
+      if (!value) {
+        updateTriggerDisplay();
+        return;
+      }
+      var client = getClient();
+      if (!client || typeof client.getSdk !== "function") {
+        updateTriggerDisplay();
+        return;
+      }
+      var sdk = client.getSdk();
+      if (!sdk) {
+        updateTriggerDisplay();
+        return;
+      }
+      var model = sdk.model(objectSlug);
+      model
+        .select("id", "name")
+        .where({ id: value })
+        .limit(1)
+        .first()
+        .then(function (record) {
+          if (record) {
+            var d = record.toJSON ? record.toJSON() : record;
+            selectedRecord = {
+              id: d.id,
+              value: d.id,
+              name: d.name || d.id,
+              label: d.name || d.id,
+            };
+          }
+          updateTriggerDisplay();
+        })
+        .catch(function () {
+          selectedRecord = { id: value, value: value, name: value, label: value };
+          updateTriggerDisplay();
+        });
+    }
+
+    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-select-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() {
+      // 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";
+      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-select-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-select-empty";
+      empty.textContent = message || "No records found";
+      optionsList.appendChild(empty);
+    }
+
+    function renderOptions() {
+      // Clear only the option items, keep loading indicator if present
+      var existingOptions = optionsList.querySelectorAll("[role=option]");
+      existingOptions.forEach(function (opt) {
+        opt.remove();
+      });
+      
+      // Remove old loading/empty states
+      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;
+        var isSelected = optionValue === value;
+
+        var option = document.createElement("div");
+        option.setAttribute("role", "option");
+        option.setAttribute("data-value", optionValue);
+        option.setAttribute("aria-selected", isSelected);
+        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",
+          isSelected
+            ? "bg-primary-surface hover:!bg-primary-surface-hover"
+            : ""
+        );
+
+        var optContent = document.createElement("span");
+        optContent.className = "flex items-center gap-8 flex-1 truncate";
+        if (objectSlug === STANDARD_OBJECT_SLUGS_USERS) {
+          var Avatar = getAvatar();
+          if (Avatar && typeof Avatar.createVivid === "function") {
+            var avatarEl = Avatar.createVivid({
+              name: optionLabel || "",
+              size: "small",
+              shape: "circle",
+            });
+            optContent.appendChild(avatarEl);
+          } else {
+            var pl = document.createElement("span");
+            pl.className =
+              "size-20 rounded-full bg-primary-surface text-primary-text flex items-center justify-center text-reg-12 font-semibold shrink-0";
+            pl.textContent = (optionLabel || "?").charAt(0).toUpperCase();
+            optContent.appendChild(pl);
+          }
+        } 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) optContent.appendChild(iconEl);
+          } else {
+            var pl = document.createElement("span");
+            pl.className =
+              "size-20 rounded-4 flex items-center justify-center shrink-0 bg-neutral-surface-hover text-neutral-text-base";
+            pl.textContent = "?";
+            optContent.appendChild(pl);
+          }
+        }
+        var labelSpan = document.createElement("span");
+        labelSpan.textContent = optionLabel;
+        optContent.appendChild(labelSpan);
+        option.appendChild(optContent);
+
+        option.addEventListener("click", function (e) {
+          e.stopPropagation();
+          if (disabled) return;
+          value = optionValue;
+          selectedRecord = rec;
+          updateTriggerDisplay();
+          closeDropdown();
+          if (onChange) onChange(value, rec);
+        });
+
+        optionsList.appendChild(option);
+      });
+      
+      // Add loading more indicator at the bottom if fetching
+      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 (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();
+        }
+      }).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("[RecordSelect] 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")
+        .forEach(function (other) {
+          if (other !== container) {
+            other.classList.remove("open");
+            var t = other.querySelector(
+              "button, .custom-select-trigger, .record-select-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.updateValue = function (newVal) {
+      setValue(newVal);
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      trigger.disabled = disabled;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        !value,
+        canClear && !!value && !disabled
+      );
+      if (disabled && isOpen) closeDropdown();
+    };
+
+    if (value) loadSelectedRecord();
+    else updateTriggerDisplay();
+
+    return container;
+  }
+
+  global.RecordSelect = {
+    create: createRecordSelect,
+  };
+})(typeof window !== "undefined" ? window : this);