@superleapai/flow-ui 2.5.19 → 2.5.21

package/components/enum-select.js

@@ -1,8 +1,8 @@
 /**
  * EnumSelect Component (vanilla JS, Tailwind)
- * A select component that fetches options from SuperLeap SDK based on object column metadata.
+ * 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',
@@ -43,7 +43,8 @@
         "border-error-border hover:border-error-border-hover focus:border-1/2 focus:border-error-border-hover",
       warning:
         "border-warning-border hover:border-warning-border-hover focus:border-1/2 focus:border-warning-border-hover",
-      borderless: "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+      borderless:
+        "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
       inline:
         "focus:border-transparent border border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray hover:border-transparent",
     };
@@ -52,7 +53,9 @@
       large: "px-12 py-8",
       small: "px-8 py-4",
     };
-    var placeholderClass = placeholder ? " text-typography-quaternary-text" : "";
+    var placeholderClass = placeholder
+      ? " text-typography-quaternary-text"
+      : "";
     var disabledClass = disabled
       ? " pointer-events-none cursor-not-allowed bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
       : "";
@@ -73,7 +76,10 @@
   }
 
   function getDep(name) {
-    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+    if (
+      typeof global.FlowUI !== "undefined" &&
+      typeof global.FlowUI._getComponent === "function"
+    ) {
       var c = global.FlowUI._getComponent(name);
       if (c) return c;
     }
@@ -159,7 +165,13 @@
 
     var trigger = document.createElement("button");
     trigger.type = "button";
-    trigger.className = triggerClasses(variant, size, disabled, !value, canClear && !!value && !disabled);
+    trigger.className = triggerClasses(
+      variant,
+      size,
+      disabled,
+      !value,
+      canClear && !!value && !disabled,
+    );
     trigger.disabled = disabled;
     trigger.setAttribute("aria-haspopup", "listbox");
     trigger.setAttribute("aria-expanded", "false");
@@ -175,7 +187,7 @@
       "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);
@@ -195,14 +207,8 @@
       e.stopPropagation();
       value = "";
       triggerText.textContent = placeholder;
-      trigger.className = triggerClasses(
-        variant,
-        size,
-        disabled,
-        true,
-        false
-      );
-      
+      trigger.className = triggerClasses(variant, size, disabled, true, false);
+
       // Update chevron visibility for inline variant
       var shouldShowChevron = variant !== "inline" || !value;
       if (shouldShowChevron && !chevron.parentNode) {
@@ -210,17 +216,17 @@
       } 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) {
@@ -231,15 +237,20 @@
     // Create dropdown content
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
+    content.className =
+      "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
 
     // Search input (using InputComponent like phone-input)
     var searchContainer = document.createElement("div");
-    searchContainer.className = "py-2 border-b-1/2 border-border-primary hidden";
-    
+    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") {
+    if (
+      global.InputComponent &&
+      typeof global.InputComponent.create === "function"
+    ) {
       searchInputWrapper = global.InputComponent.create({
         variant: "borderless",
         inputSize: "small",
@@ -266,12 +277,12 @@
       // 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...";
@@ -337,7 +348,8 @@
       var filteredOptions = getFilteredOptions();
 
       // Update search visibility
-      var shouldShowSearch = showSearch !== undefined ? showSearch : options.length > 10;
+      var shouldShowSearch =
+        showSearch !== undefined ? showSearch : options.length > 10;
       searchContainer.className = shouldShowSearch
         ? "p-8 border-b-1/2 border-border-primary "
         : "p-8 hidden";
@@ -368,7 +380,7 @@
           "hover:bg-fill-tertiary-fill-light-gray focus:bg-fill-tertiary-fill-light-gray",
           isSelected
             ? "bg-primary-surface hover:!bg-primary-surface-hover"
-            : ""
+            : "",
         );
 
         var optionContent = document.createElement("span");
@@ -380,7 +392,10 @@
         var badgeConfig = opt.badge_config;
         if (badgeConfig && (badgeConfig.icon_color || badgeConfig.start_icon)) {
           var IconComponent = getIcon();
-          if (IconComponent && typeof IconComponent.createIconOrColor === "function") {
+          if (
+            IconComponent &&
+            typeof IconComponent.createIconOrColor === "function"
+          ) {
             var iconEl = IconComponent.createIconOrColor({
               start_icon: badgeConfig.start_icon,
               icon_color: badgeConfig.icon_color,
@@ -416,7 +431,6 @@
       });
     }
 
-
     function openDropdown() {
       if (disabled) return;
       document
@@ -445,7 +459,8 @@
     }
 
     function toggleDropdown() {
-      var isVisible = popover.element && popover.element.classList.contains("visible");
+      var isVisible =
+        popover.element && popover.element.classList.contains("visible");
       if (isVisible) {
         closeDropdown();
       } else {
@@ -461,7 +476,7 @@
         size,
         disabled,
         false,
-        canClear && !!value && !disabled
+        canClear && !!value && !disabled,
       );
 
       // Update chevron visibility for inline variant
@@ -515,7 +530,10 @@
 
     trigger.addEventListener("keydown", function (e) {
       if (disabled) return;
-      var isVisible = popover && popover.element && popover.element.classList.contains("visible");
+      var isVisible =
+        popover &&
+        popover.element &&
+        popover.element.classList.contains("visible");
       switch (e.key) {
         case "Enter":
         case " ":
@@ -590,8 +608,11 @@
     // Load options from SDK
     function loadOptions() {
       var client = getClient();
-      if (!client || (typeof client.isAvailable === "function" && !client.isAvailable())) {
-        error = "SuperLeap SDK not initialized";
+      if (
+        !client ||
+        (typeof client.isAvailable === "function" && !client.isAvailable())
+      ) {
+        error = "Superleap SDK not initialized";
         showError(error);
         if (onError) onError(error);
         return;
@@ -608,26 +629,38 @@
       }
 
       var model = sdk.model(objectSlug);
-      
+
       model
         .getField(columnSlug)
         .then(function (field) {
           if (!field) {
-            throw new Error("Field '" + columnSlug + "' not found in object '" + objectSlug + "'");
+            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");
+            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) {
+          if (
+            columnData.is_dependent_field &&
+            enumGroup.properties &&
+            enumGroup.properties.parent_column_slug
+          ) {
             var parentSlug = enumGroup.properties.parent_column_slug;
             var parentValue = currentRecordData[parentSlug];
 
@@ -652,14 +685,20 @@
           } 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;
+              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;
+            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;
           });
 
@@ -678,9 +717,9 @@
                 size,
                 disabled,
                 false,
-                canClear && !!value && !disabled
+                canClear && !!value && !disabled,
               );
-              
+
               // Update chevron visibility for inline variant
               var shouldShowChevron = variant !== "inline" || !value;
               if (shouldShowChevron && !chevron.parentNode) {
@@ -688,7 +727,7 @@
               } else if (!shouldShowChevron && chevron.parentNode) {
                 chevron.parentNode.removeChild(chevron);
               }
-              
+
               updateClearButton();
             }
           }
@@ -720,9 +759,9 @@
         size,
         disabled,
         !value,
-        canClear && !!value && !disabled
+        canClear && !!value && !disabled,
       );
-      
+
       // Update chevron visibility for inline variant
       var shouldShowChevron = variant !== "inline" || !value;
       if (shouldShowChevron && !chevron.parentNode) {
@@ -730,7 +769,7 @@
       } else if (!shouldShowChevron && chevron.parentNode) {
         chevron.parentNode.removeChild(chevron);
       }
-      
+
       updateClearButton();
       renderOptions();
     };
@@ -748,10 +787,13 @@
         size,
         disabled,
         !value,
-        canClear && !!value && !disabled
+        canClear && !!value && !disabled,
       );
       updateClearButton();
-      var isVisible = popover && popover.element && popover.element.classList.contains("visible");
+      var isVisible =
+        popover &&
+        popover.element &&
+        popover.element.classList.contains("visible");
       if (disabled && isVisible) closeDropdown();
     };