@superleapai/flow-ui 1.0.0

package/components/enum-multiselect.js

@@ -0,0 +1,869 @@
+/**
+ * EnumMultiSelect Component (vanilla JS, Tailwind)
+ * A multiselect component that fetches options from SuperLeap SDK based on object column metadata.
+ * Supports dependent fields, URL-based enums, and search functionality.
+ * 
+ * Usage:
+ * var enumMultiSelect = EnumMultiSelect.create({
+ *   fieldId: 'tags',
+ *   objectSlug: 'accounts',
+ *   columnSlug: 'tags',
+ *   value: ['tag1', 'tag2'],
+ *   onChange: function(values) { console.log('Selected:', values); },
+ *   placeholder: 'Select tags',
+ *   label: 'selected',
+ *   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 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 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, isEmpty, hasClear) {
+    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"
+      : "";
+    var clearPadding = hasClear ? " pr-24" : "";
+    return (
+      base +
+      (variantClasses[v] || variantClasses.default) +
+      " " +
+      (sizeClasses[size] || sizeClasses.default) +
+      textColorClass +
+      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 multiselect 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., 'tags')
+   * @param {string} config.placeholder - Placeholder text
+   * @param {Array} config.value - Current selected values (array)
+   * @param {string} [config.label] - Label for summary when items selected (e.g. "selected" -> "3 selected")
+   * @param {Function} config.onChange - Change handler (values: string[])
+   * @param {boolean} config.disabled - Whether multiselect 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 values are 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} MultiSelect container element
+   */
+  function createEnumMultiSelect(config) {
+    var fieldId = config.fieldId;
+    var objectSlug = config.objectSlug;
+    var columnSlug = config.columnSlug;
+    var placeholder = config.placeholder || "Select options";
+    var summaryLabel = config.label || "selected";
+    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 values = Array.isArray(config.value)
+      ? config.value.slice()
+      : Array.isArray(config.values)
+        ? config.values.slice()
+        : [];
+
+    // 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-multiselect relative w-full group";
+    container.setAttribute("data-field-id", fieldId);
+
+    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, canClear && values.length > 0 && !disabled);
+    trigger.disabled = disabled;
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-multiselectable", "true");
+    trigger.setAttribute("aria-label", placeholder);
+
+    var triggerContent = document.createElement("div");
+    triggerContent.className = "flex flex-1 items-center gap-6 truncate text-left text-inherit";
+
+    function renderTriggerContent() {
+      triggerContent.innerHTML = "";
+      if (values.length === 0) {
+        var placeholderSpan = document.createElement("span");
+        placeholderSpan.className = "text-inherit";
+        placeholderSpan.textContent = placeholder;
+        triggerContent.appendChild(placeholderSpan);
+      } else {
+        var summary = document.createElement("span");
+        summary.className = "text-inherit";
+        summary.textContent = values.length + " " + summaryLabel;
+        triggerContent.appendChild(summary);
+      }
+    }
+    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");
+    
+    var showChevron = variant !== "inline" || values.length === 0;
+    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 && values.length > 0 && !disabled ? "" : "none";
+    clearBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      values = [];
+      renderTriggerContent();
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        true,
+        false
+      );
+      
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || values.length === 0;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+      
+      updateClearButton();
+      syncOptionStates();
+      
+      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 && values.length > 0 && !disabled ? "" : "none";
+      }
+    }
+
+    // Create dropdown content
+    var content = document.createElement("div");
+    content.setAttribute("role", "listbox");
+    content.setAttribute("aria-multiselectable", "true");
+    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 enum-select)
+    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 isSelected(optionValue) {
+      return values.some(function (v) {
+        return v === optionValue || String(v) === String(optionValue);
+      });
+    }
+
+    function toggleValue(optionValue) {
+      var idx = values.findIndex(function (v) {
+        return v === optionValue || String(v) === String(optionValue);
+      });
+      if (idx >= 0) {
+        values.splice(idx, 1);
+      } else {
+        values.push(optionValue);
+      }
+      renderTriggerContent();
+      trigger.className = triggerClasses(variant, size, disabled, values.length === 0, canClear && values.length > 0 && !disabled);
+      
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || values.length === 0;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+      
+      updateClearButton();
+      syncOptionStates();
+      if (onChange) onChange(values.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 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 selected = isSelected(optionValue);
+        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", 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 optionContent = document.createElement("span");
+        optionContent.className = "flex items-center gap-8 flex-1 truncate";
+
+        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);
+          }
+        }
+
+        var label = document.createElement("span");
+        label.textContent = optionLabel;
+        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);
+        }
+
+        // Add checkmark
+        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(optionValue);
+        });
+        option.addEventListener("mouseenter", function () {
+          if (disabled) return;
+          highlightOption(option);
+        });
+
+        optionsList.appendChild(option);
+      });
+    }
+
+    function openDropdown() {
+      if (disabled) return;
+      if (popover) {
+        document
+          .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
+          .forEach(function (other) {
+            if (other !== container && other.popoverInstance) {
+              other.popoverInstance.hide();
+            }
+          });
+        popover.show();
+        trigger.setAttribute("aria-expanded", "true");
+        if (searchInput) {
+          setTimeout(function () {
+            searchInput.focus();
+          }, 50);
+        }
+        return;
+      }
+      document
+        .querySelectorAll(".enum-multiselect.open, .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");
+      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 clearSearch() {
+      searchQuery = "";
+      if (searchInputWrapper) searchInputWrapper.setValue("");
+      else if (searchInput) searchInput.value = "";
+    }
+
+    function highlightOption(el) {
+      optionsList.querySelectorAll("[role=option]").forEach(function (o) {
+        if (!isSelected(o.getAttribute("data-value"))) {
+          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 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 in the selected values)
+            options = allOptions.filter(function (option) {
+              return option.is_active === 1 || option.is_active === true || values.includes(option.slug);
+            });
+          }
+
+          // 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 content if values are set
+          if (values.length > 0) {
+            renderTriggerContent();
+            trigger.className = triggerClasses(
+              variant,
+              size,
+              disabled,
+              false,
+              canClear && values.length > 0 && !disabled
+            );
+            
+            // Update chevron visibility for inline variant
+            var shouldShowChevron = variant !== "inline" || values.length === 0;
+            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("EnumMultiSelect 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.updateValues = function (newValues) {
+      values = Array.isArray(newValues) ? newValues.slice() : [];
+      renderTriggerContent();
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        values.length === 0,
+        canClear && values.length > 0 && !disabled
+      );
+      
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || values.length === 0;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+      
+      updateClearButton();
+      syncOptionStates();
+    };
+
+    container.updateRecordData = function (newRecordData) {
+      currentRecordData = newRecordData || {};
+      loadOptions();
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      trigger.disabled = disabled;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        values.length === 0,
+        canClear && values.length > 0 && !disabled
+      );
+      updateClearButton();
+      var isVisible = popover && popover.element && popover.element.classList.contains("visible");
+      if (disabled && (isVisible || isOpen)) closeDropdown();
+    };
+
+    container.reload = function () {
+      loadOptions();
+    };
+
+    container.getValues = function () {
+      return values.slice();
+    };
+
+    container.getOptions = function () {
+      return options;
+    };
+
+    container.getColumnData = function () {
+      return columnData;
+    };
+
+    container.destroy = function () {
+      if (popover) {
+        popover.destroy();
+      }
+    };
+
+    return container;
+  }
+
+  global.EnumMultiSelect = {
+    create: createEnumMultiSelect,
+  };
+})(typeof window !== "undefined" ? window : this);