@superleapai/flow-ui 1.0.0

package/components/enum-select.js

@@ -0,0 +1,831 @@
+/**
+ * EnumSelect Component (vanilla JS, Tailwind)
+ * A select component that fetches options from SuperLeap SDK based on object column metadata.
+ * Supports dependent fields, URL-based enums, and search functionality.
+ * 
+ * Usage:
+ * var enumSelect = EnumSelect.create({
+ *   fieldId: 'status',
+ *   objectSlug: 'accounts',
+ *   columnSlug: 'status',
+ *   value: 'active',
+ *   onChange: function(value) { console.log('Selected:', value); },
+ *   placeholder: 'Select status',
+ *   variant: 'default',
+ *   size: 'default',
+ *   disabled: false,
+ *   currentRecordData: { ... }, // Optional: for dependent fields
+ *   canClear: true,
+ *   onClear: function() { console.log('Cleared'); }
+ * });
+ */
+
+(function (global) {
+  "use strict";
+
+  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 Icon component for badge_config icon_color / start_icon */
+  function getIcon() {
+    if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent("Icon");
+      if (c) return c;
+    }
+    return global.Icon;
+  }
+
+  /**
+   * Create an enum-based select component
+   * @param {Object} config
+   * @param {string} config.fieldId - Field ID for state management
+   * @param {string} config.objectSlug - Object slug (e.g., 'accounts')
+   * @param {string} config.columnSlug - Column slug (e.g., 'status')
+   * @param {string} config.placeholder - Placeholder text
+   * @param {string} config.value - Current value
+   * @param {Function} config.onChange - Change handler
+   * @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 {Function} [config.onClear] - Called when clear is clicked
+   * @param {Object} [config.currentRecordData] - Current record data for dependent fields
+   * @param {boolean} [config.showSearch] - Show search input (default: true if more than 10 options)
+   * @param {Function} [config.onLoad] - Called when options are loaded
+   * @param {Function} [config.onError] - Called when error occurs
+   * @returns {HTMLElement} Select container element
+   */
+  function createEnumSelect(config) {
+    var fieldId = config.fieldId;
+    var objectSlug = config.objectSlug;
+    var columnSlug = config.columnSlug;
+    var placeholder = config.placeholder || "Select an option";
+    var onChange = config.onChange;
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var canClear = !!config.canClear;
+    var onClear = config.onClear;
+    var currentRecordData = config.currentRecordData || {};
+    var showSearch = config.showSearch;
+    var onLoad = config.onLoad;
+    var onError = config.onError;
+
+    var disabled = config.disabled === true;
+    var value =
+      config.value !== undefined && config.value !== null ? config.value : "";
+
+    // State
+    var options = [];
+    var columnData = null;
+    var isLoading = true;
+    var error = null;
+    var searchQuery = "";
+    var popover = null;
+    var usePopover = !!(global.Popover && typeof global.Popover.create === "function");
+    var isOpen = false;
+
+    var container = document.createElement("div");
+    container.className = "enum-select relative w-full group";
+    container.setAttribute("data-field-id", fieldId);
+
+    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);
+
+    var triggerText = document.createElement("div");
+    triggerText.className = "truncate text-inherit";
+    triggerText.textContent = placeholder;
+    trigger.appendChild(triggerText);
+
+    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");
+    
+    var showChevron = variant !== "inline" || !value;
+    if (showChevron) {
+      trigger.appendChild(chevron);
+    }
+
+    triggerWrapper.appendChild(trigger);
+
+    // Create clear button (will be shown/hidden dynamically)
+    var 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";
+    clearBtn.innerHTML = X_SVG;
+    clearBtn.setAttribute("aria-label", "Clear selection");
+    clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+    clearBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      value = "";
+      triggerText.textContent = placeholder;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        true,
+        false
+      );
+      
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || !value;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+      
+      updateClearButton();
+      renderOptions();
+      
+      if (onClear) onClear();
+      if (onChange) onChange("");
+    });
+    triggerWrapper.appendChild(clearBtn);
+
+    container.appendChild(triggerWrapper);
+    
+    // Helper to update clear button visibility
+    function updateClearButton() {
+      if (clearBtn) {
+        clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+      }
+    }
+
+    // Create dropdown content
+    var content = document.createElement("div");
+    content.setAttribute("role", "listbox");
+    var contentBase = "w-full min-w-[200px]";
+    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 border-1/2 border-border-primary opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible top-full mt-1 -translate-y-1 group-[.open]:translate-y-0 flex flex-col";
+    } else {
+      contentBase += " max-h-[30vh] overflow-hidden flex flex-col";
+    }
+    content.className = contentBase;
+
+    // Search input (using InputComponent like phone-input)
+    var searchContainer = document.createElement("div");
+    searchContainer.className = "py-2 border-b-1/2 border-border-primary hidden";
+    
+    var searchInputWrapper = null;
+    var searchInput = null;
+    if (global.InputComponent && typeof global.InputComponent.create === "function") {
+      searchInputWrapper = global.InputComponent.create({
+        variant: "borderless",
+        inputSize: "small",
+        type: "text",
+        placeholder: "Search...",
+        value: "",
+        startIcon: SEARCH_ICON,
+        className: "!border-0 !p-0",
+        onInput: function () {
+          searchQuery = searchInputWrapper.getValue().trim();
+          renderOptions();
+        },
+      });
+      var inputEl = searchInputWrapper.getInput();
+      if (inputEl) {
+        inputEl.setAttribute("aria-label", "Search options");
+        inputEl.addEventListener("click", function (e) {
+          e.stopPropagation();
+        });
+        searchInput = inputEl;
+      }
+      searchContainer.appendChild(searchInputWrapper);
+    } else {
+      // Fallback to native input with search icon
+      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 nativeSearchInput = document.createElement("input");
+      nativeSearchInput.type = "text";
+      nativeSearchInput.placeholder = "Search...";
+      nativeSearchInput.className =
+        "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
+      nativeSearchInput.addEventListener("input", function (e) {
+        searchQuery = e.target.value.trim();
+        renderOptions();
+      });
+      nativeSearchInput.addEventListener("click", function (e) {
+        e.stopPropagation();
+      });
+      searchInput = nativeSearchInput;
+      fallbackWrapper.appendChild(nativeSearchInput);
+      searchContainer.appendChild(fallbackWrapper);
+    }
+
+    // Options list
+    var optionsList = document.createElement("div");
+    optionsList.className =
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+
+    content.appendChild(searchContainer);
+    content.appendChild(optionsList);
+
+    if (!usePopover) {
+      container.appendChild(content);
+    }
+
+    var highlightedIndex = -1;
+
+    function showLoading() {
+      optionsList.innerHTML = "";
+      var loading = document.createElement("div");
+      loading.className =
+        "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-typography-quaternary-text";
+      loading.textContent = "Loading options...";
+      optionsList.appendChild(loading);
+    }
+
+    function showError(message) {
+      optionsList.innerHTML = "";
+      var errorDiv = document.createElement("div");
+      errorDiv.className =
+        "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-error-text";
+      errorDiv.textContent = message || "Error loading options";
+      optionsList.appendChild(errorDiv);
+    }
+
+    function getFilteredOptions() {
+      if (!searchQuery.trim()) return options;
+
+      var normalizedQuery = searchQuery.toLowerCase();
+      return options.filter(function (option) {
+        var matchesDisplayName = option.display_name
+          .toLowerCase()
+          .includes(normalizedQuery);
+        var matchesSlug = String(option.slug || "")
+          .toLowerCase()
+          .includes(normalizedQuery);
+        return matchesDisplayName || matchesSlug;
+      });
+    }
+
+    function renderOptions() {
+      optionsList.innerHTML = "";
+      var filteredOptions = getFilteredOptions();
+
+      // Update search visibility
+      var shouldShowSearch = showSearch !== undefined ? showSearch : options.length > 10;
+      searchContainer.className = shouldShowSearch
+        ? "p-8 border-b-1/2 border-border-primary "
+        : "p-8 hidden";
+
+      if (filteredOptions.length === 0) {
+        var noOpt = document.createElement("div");
+        noOpt.className =
+          "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-typography-quaternary-text";
+        noOpt.textContent = searchQuery.trim()
+          ? "No options found"
+          : "No options available";
+        optionsList.appendChild(noOpt);
+        return;
+      }
+
+      filteredOptions.forEach(function (opt) {
+        var optionValue = opt.slug || opt.display_name;
+        var optionLabel = opt.display_name;
+        var isSelected = optionValue === value;
+        var isArchived = opt.is_active === 0 || opt.is_active === false;
+
+        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 optionContent = document.createElement("span");
+        optionContent.className = "flex items-center gap-8 flex-1 truncate";
+
+        var label = document.createElement("span");
+        label.textContent = optionLabel;
+
+        var badgeConfig = opt.badge_config;
+        if (badgeConfig && (badgeConfig.icon_color || badgeConfig.start_icon)) {
+          var IconComponent = getIcon();
+          if (IconComponent && typeof IconComponent.createIconOrColor === "function") {
+            var iconEl = IconComponent.createIconOrColor({
+              start_icon: badgeConfig.start_icon,
+              icon_color: badgeConfig.icon_color,
+              className: (badgeConfig.class_name || "") + " shrink-0",
+            });
+            if (iconEl) optionContent.appendChild(iconEl);
+          }
+        }
+
+        optionContent.appendChild(label);
+        option.appendChild(optionContent);
+
+        // Add archived badge (inline, after label)
+        if (isArchived) {
+          var archivedBadge = document.createElement("span");
+          archivedBadge.className =
+            "ml-8 px-6 py-2 text-xs rounded-2 bg-info-surface-hover text-info-text-base border-1/2 border-info-border-base";
+          archivedBadge.textContent = "Archived";
+          option.appendChild(archivedBadge);
+        }
+
+        option.addEventListener("click", function (e) {
+          e.stopPropagation();
+          if (disabled) return;
+          selectOption(optionValue, optionLabel);
+        });
+        option.addEventListener("mouseenter", function () {
+          if (disabled) return;
+          highlightOption(option);
+        });
+
+        optionsList.appendChild(option);
+      });
+    }
+
+
+    function openDropdown() {
+      if (disabled) return;
+      if (popover) {
+        // Close other open selects
+        document
+          .querySelectorAll(".enum-select, .custom-select, .record-select")
+          .forEach(function (other) {
+            if (other !== container && other.popoverInstance) {
+              other.popoverInstance.hide();
+            }
+          });
+        popover.show();
+        trigger.setAttribute("aria-expanded", "true");
+        highlightOptionByValue(value);
+        if (searchInput) {
+          setTimeout(function () {
+            searchInput.focus();
+          }, 50);
+        }
+        return;
+      }
+      // Fallback when Popover not available
+      document
+        .querySelectorAll(".enum-select.open")
+        .forEach(function (other) {
+          if (other !== container) {
+            other.classList.remove("open");
+            var t = other.querySelector("button");
+            if (t) t.setAttribute("aria-expanded", "false");
+          }
+        });
+      isOpen = true;
+      container.classList.add("open");
+      trigger.setAttribute("aria-expanded", "true");
+      highlightOptionByValue(value);
+      if (searchInput) {
+        setTimeout(function () {
+          searchInput.focus();
+        }, 50);
+      }
+    }
+
+    function closeDropdown() {
+      if (popover) {
+        popover.hide();
+      } else {
+        isOpen = false;
+        container.classList.remove("open");
+      }
+      trigger.setAttribute("aria-expanded", "false");
+      highlightedIndex = -1;
+      clearSearch();
+      renderOptions();
+    }
+
+    function toggleDropdown() {
+      var isVisible = popover
+        ? popover.element && popover.element.classList.contains("visible")
+        : isOpen;
+      if (isVisible) {
+        closeDropdown();
+      } else {
+        openDropdown();
+      }
+    }
+
+    function selectOption(optionValue, optionLabel) {
+      value = optionValue;
+      triggerText.textContent = optionLabel;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        false,
+        canClear && !!value && !disabled
+      );
+
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || !value;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+
+      updateClearButton();
+      renderOptions();
+      closeDropdown();
+      if (onChange) onChange(optionValue);
+    }
+
+    function clearSearch() {
+      searchQuery = "";
+      if (searchInputWrapper) searchInputWrapper.setValue("");
+      else if (searchInput) searchInput.value = "";
+    }
+
+    function highlightOption(el) {
+      optionsList.querySelectorAll("[role=option]").forEach(function (o) {
+        o.classList.remove("bg-fill-tertiary-fill-light-gray");
+      });
+      if (!el.classList.contains("bg-primary-surface")) {
+        el.classList.add("bg-fill-tertiary-fill-light-gray");
+      }
+      highlightedIndex = Array.from(optionsList.children).indexOf(el);
+    }
+
+    function highlightOptionByValue(val) {
+      var opt = optionsList.querySelector('[data-value="' + val + '"]');
+      if (opt) {
+        highlightOption(opt);
+        scrollToOption(opt);
+      }
+    }
+
+    function scrollToOption(opt) {
+      if (!opt) return;
+      var cr = optionsList.getBoundingClientRect();
+      var top = opt.offsetTop;
+      var bottom = top + opt.offsetHeight;
+      var st = optionsList.scrollTop;
+      var sb = st + cr.height;
+      if (top < st) optionsList.scrollTop = top - 8;
+      else if (bottom > sb) optionsList.scrollTop = bottom - cr.height + 8;
+    }
+
+    trigger.addEventListener("keydown", function (e) {
+      if (disabled) return;
+      var isVisible = popover && popover.element && popover.element.classList.contains("visible");
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          toggleDropdown();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isVisible) openDropdown();
+          else navigateOptions(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!isVisible) openDropdown();
+          else navigateOptions(-1);
+          break;
+        case "Escape":
+          if (isVisible) {
+            e.preventDefault();
+            closeDropdown();
+          }
+          break;
+      }
+    });
+
+    function navigateOptions(dir) {
+      var list = Array.from(optionsList.children).filter(function (n) {
+        return n.getAttribute("role") === "option";
+      });
+      if (list.length === 0) return;
+      highlightedIndex += dir;
+      if (highlightedIndex < 0) highlightedIndex = list.length - 1;
+      else if (highlightedIndex >= list.length) highlightedIndex = 0;
+      var opt = list[highlightedIndex];
+      highlightOption(opt);
+      scrollToOption(opt);
+    }
+
+    // Initialize Popover
+    function initializePopover() {
+      if (!usePopover) {
+        return;
+      }
+      popover = global.Popover.create({
+        trigger: trigger,
+        content: content,
+        placement: "bottom",
+        align: "start",
+        closeOnClickOutside: true,
+        onClose: function () {
+          trigger.setAttribute("aria-expanded", "false");
+          chevron.style.transform = "";
+          highlightedIndex = -1;
+          clearSearch();
+          renderOptions();
+        },
+        onOpen: function () {
+          trigger.setAttribute("aria-expanded", "true");
+          chevron.style.transform = "rotate(180deg)";
+        },
+        bodyClassName: "p-0 overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
+      });
+
+      // Store popover instance for cleanup
+      container.popoverInstance = popover;
+      
+      // Set CSS variable for trigger width
+      var triggerWidth = trigger.offsetWidth;
+      if (popover.panel) {
+        popover.panel.style.setProperty("--trigger-width", triggerWidth + "px");
+        popover.panel.style.minWidth = triggerWidth + "px";
+      }
+    }
+
+    // Load options from SDK
+    function loadOptions() {
+      var client = getClient();
+      if (!client || (typeof client.isAvailable === "function" && !client.isAvailable())) {
+        error = "SuperLeap SDK not initialized";
+        showError(error);
+        if (onError) onError(error);
+        return;
+      }
+
+      showLoading();
+
+      var sdk = typeof client.getSdk === "function" ? client.getSdk() : null;
+      if (!sdk) {
+        error = "Failed to get SDK instance";
+        showError(error);
+        if (onError) onError(error);
+        return;
+      }
+
+      var model = sdk.model(objectSlug);
+      
+      model
+        .getField(columnSlug)
+        .then(function (field) {
+          if (!field) {
+            throw new Error("Field '" + columnSlug + "' not found in object '" + objectSlug + "'");
+          }
+
+          columnData = field;
+
+          // Check if it's a select/stage field with enum_group
+          if (!field.enumGroup || !field.enumGroup.values) {
+            throw new Error("Field '" + columnSlug + "' does not have enum options");
+          }
+
+          var enumGroup = field.enumGroup;
+          var allOptions = enumGroup.values || [];
+
+          // Handle dependent fields
+          if (columnData.is_dependent_field && enumGroup.properties && enumGroup.properties.parent_column_slug) {
+            var parentSlug = enumGroup.properties.parent_column_slug;
+            var parentValue = currentRecordData[parentSlug];
+
+            if (!parentValue) {
+              options = [];
+              placeholder = "Select " + parentSlug + " first";
+              renderOptions();
+              isLoading = false;
+              return;
+            }
+
+            // Filter options based on dependent_enum_slugs
+            options = allOptions.filter(function (option) {
+              if (!option.dependent_enum_slugs) return false;
+              if (Array.isArray(parentValue)) {
+                return parentValue.some(function (val) {
+                  return option.dependent_enum_slugs.includes(val);
+                });
+              }
+              return option.dependent_enum_slugs.includes(parentValue);
+            });
+          } else {
+            // Filter active options (or include archived if it's the selected value)
+            options = allOptions.filter(function (option) {
+              return option.is_active === 1 || option.is_active === true || option.slug === value;
+            });
+          }
+
+          // Sort by rank
+          options.sort(function (a, b) {
+            var rankA = a.rank !== undefined && a.rank !== null ? a.rank : 999999;
+            var rankB = b.rank !== undefined && b.rank !== null ? b.rank : 999999;
+            return rankA - rankB;
+          });
+
+          isLoading = false;
+          renderOptions();
+
+          // Update trigger text if value is set
+          if (value) {
+            var selectedOption = options.find(function (opt) {
+              return opt.slug === value;
+            });
+            if (selectedOption) {
+              triggerText.textContent = selectedOption.display_name;
+              trigger.className = triggerClasses(
+                variant,
+                size,
+                disabled,
+                false,
+                canClear && !!value && !disabled
+              );
+              
+              // Update chevron visibility for inline variant
+              var shouldShowChevron = variant !== "inline" || !value;
+              if (shouldShowChevron && !chevron.parentNode) {
+                trigger.appendChild(chevron);
+              } else if (!shouldShowChevron && chevron.parentNode) {
+                chevron.parentNode.removeChild(chevron);
+              }
+              
+              updateClearButton();
+            }
+          }
+
+          if (onLoad) onLoad(options);
+        })
+        .catch(function (err) {
+          error = err.message || "Failed to load options";
+          console.error("EnumSelect error:", error);
+          showError(error);
+          isLoading = false;
+          if (onError) onError(error);
+        });
+    }
+
+    // Initialize
+    initializePopover();
+    loadOptions();
+
+    if (!usePopover) {
+      trigger.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) return;
+        toggleDropdown();
+      });
+      document.addEventListener("click", function (e) {
+        if (isOpen && !container.contains(e.target)) closeDropdown();
+      });
+      document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && isOpen) closeDropdown();
+      });
+    }
+
+    // Public API
+    container.updateValue = function (newValue) {
+      value = newValue !== undefined && newValue !== null ? newValue : "";
+      var sel = options.find(function (opt) {
+        return opt.slug === value;
+      });
+      triggerText.textContent = sel ? sel.display_name : placeholder;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        !value,
+        canClear && !!value && !disabled
+      );
+      
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || !value;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+      
+      updateClearButton();
+      renderOptions();
+    };
+
+    container.updateRecordData = function (newRecordData) {
+      currentRecordData = newRecordData || {};
+      loadOptions();
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      trigger.disabled = disabled;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        !value,
+        canClear && !!value && !disabled
+      );
+      updateClearButton();
+      var isVisible = popover && popover.element && popover.element.classList.contains("visible");
+      if (disabled && (isVisible || isOpen)) closeDropdown();
+    };
+
+    container.reload = function () {
+      loadOptions();
+    };
+
+    container.getOptions = function () {
+      return options;
+    };
+
+    container.getColumnData = function () {
+      return columnData;
+    };
+
+    container.destroy = function () {
+      if (popover) {
+        popover.destroy();
+      }
+    };
+
+    return container;
+  }
+
+  global.EnumSelect = {
+    create: createEnumSelect,
+  };
+})(typeof window !== "undefined" ? window : this);