@superleapai/flow-ui 2.5.18 → 2.5.19

package/components/multiselect.js

@@ -12,6 +12,9 @@
   var CHECK_SVG =
     '<svg width="14" height="14" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.41574 12.2442 3.41574 12.5331 3.72684C12.822 4.03795 12.822 4.53753 12.5331 4.84863L6.81767 10.6736C6.52329 10.9901 6.05308 10.9901 5.7587 10.6736L2.46685 7.3463C2.17795 7.03519 2.17795 6.53561 2.46685 6.2245C2.75575 5.9134 3.24395 5.9134 3.53285 6.2245L6.28822 9.05351L11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
 
+  var SEARCH_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>';
+
   function triggerClasses(variant, size, disabled, isEmpty) {
     var v = variant || "default";
     var base =
@@ -80,6 +83,7 @@
    * @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.showSearch] - Show search input (default: false)
    * @returns {HTMLElement} MultiSelect container element
    */
   function createMultiSelect(config) {
@@ -90,7 +94,9 @@
     var onValuesChange = config.onValuesChange;
     var variant = config.variant || "default";
     var size = config.size || "default";
+    var showSearch = !!config.showSearch;
     var disabled = config.disabled === true;
+    var searchQuery = "";
 
     var values = Array.isArray(config.value)
       ? config.value.slice()
@@ -156,6 +162,35 @@
     content.setAttribute("aria-multiselectable", "true");
     content.className = "custom-multiselect-content w-full  max-h-[30vh] overflow-hidden flex flex-col";
 
+    var searchContainer = document.createElement("div");
+    searchContainer.className = showSearch ? "p-8 border-b-1/2 border-border-primary" : "p-8 hidden";
+    var searchInputWrapper = document.createElement("div");
+    searchInputWrapper.className = "flex items-center gap-8";
+    var searchIconSpan = document.createElement("span");
+    searchIconSpan.className = "shrink-0 text-typography-tertiary-text";
+    searchIconSpan.innerHTML = SEARCH_ICON;
+    searchInputWrapper.appendChild(searchIconSpan);
+    var searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.placeholder = "Search...";
+    searchInput.className =
+      "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
+    searchInput.setAttribute("aria-label", "Search options");
+    searchInput.addEventListener("input", function (e) {
+      searchQuery = e.target.value.trim();
+      buildOptionsList();
+      syncOptionStates();
+    });
+    searchInput.addEventListener("click", function (e) {
+      e.stopPropagation();
+    });
+    searchInput.addEventListener("keydown", function (e) {
+      e.stopPropagation();
+    });
+    searchInputWrapper.appendChild(searchInput);
+    searchContainer.appendChild(searchInputWrapper);
+    content.appendChild(searchContainer);
+
     var optionsList = document.createElement("div");
     optionsList.className =
       "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
@@ -196,17 +231,36 @@
       });
     }
 
+    function getFilteredOptions() {
+      if (!showSearch || !searchQuery) return options.slice();
+      var normalizedQuery = searchQuery.toLowerCase();
+      return options.filter(function (opt) {
+        var optionValue = getOptionValue(opt);
+        var optionLabel = getOptionLabel(opt);
+        return (
+          String(optionLabel || "").toLowerCase().includes(normalizedQuery) ||
+          String(optionValue || "").toLowerCase().includes(normalizedQuery)
+        );
+      });
+    }
+
     function buildOptionsList() {
       optionsList.innerHTML = "";
-      if (options.length === 0) {
+      var filteredOptions = getFilteredOptions();
+      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 = "No options available";
+        noOpt.textContent =
+          options.length === 0
+            ? "No options available"
+            : searchQuery
+              ? "No options found"
+              : "No options available";
         optionsList.appendChild(noOpt);
         return;
       }
-      options.forEach(function (opt) {
+      filteredOptions.forEach(function (opt) {
         var optionValue = getOptionValue(opt);
         var optionLabel = getOptionLabel(opt);
         var selected = isSelected(optionValue);
@@ -278,16 +332,29 @@
           });
         trigger.setAttribute("aria-expanded", "true");
         chevron.style.transform = "rotate(180deg)";
+        buildOptionsList();
+        syncOptionStates();
         if (popover.panel) {
           var triggerWidthPx = trigger.offsetWidth + "px";
           popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
           popover.panel.style.minWidth = triggerWidthPx;
           popover.panel.style.width = triggerWidthPx;
         }
+        if (showSearch) {
+          setTimeout(function () {
+            searchInput.focus();
+          }, 50);
+        }
       },
       onClose: function () {
         trigger.setAttribute("aria-expanded", "false");
         chevron.style.transform = "";
+        if (showSearch) {
+          searchQuery = "";
+          searchInput.value = "";
+          buildOptionsList();
+          syncOptionStates();
+        }
       },
     });
     container.popoverInstance = popover;

package/components/select.js

@@ -12,6 +12,9 @@
   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 =
@@ -73,6 +76,7 @@
    * @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 {boolean} [config.showSearch] - Show search input (default: false)
    * @returns {HTMLElement} Select container element
    */
   function createCustomSelect(config) {
@@ -84,9 +88,11 @@
     var size = config.size || "default";
     var canClear = !!config.canClear;
     var onClear = config.onClear;
+    var showSearch = !!config.showSearch;
     var popoverWrapperClassName = config.popoverWrapperClassName || "";
     var onOpenCallback = config.onOpenCallback || null;
     var dropdownMaxHeightVh = config.dropdownMaxHeightVh != null ? config.dropdownMaxHeightVh : 30;
+    var searchQuery = "";
 
     var disabled = config.disabled === true;
     var value =
@@ -199,19 +205,76 @@
     content.className = "custom-select-content w-full overflow-hidden flex flex-col";
     content.style.maxHeight = dropdownMaxHeightVh + "vh";
 
+    var searchContainer = document.createElement("div");
+    searchContainer.className = showSearch ? "p-8 border-b-1/2 border-border-primary" : "p-8 hidden";
+
+    var searchInputWrapper = document.createElement("div");
+    searchInputWrapper.className = "flex items-center gap-8";
+    var searchIconSpan = document.createElement("span");
+    searchIconSpan.className = "shrink-0 text-typography-tertiary-text";
+    searchIconSpan.innerHTML = SEARCH_ICON;
+    searchInputWrapper.appendChild(searchIconSpan);
+
+    var searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.placeholder = "Search...";
+    searchInput.className =
+      "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
+    searchInput.setAttribute("aria-label", "Search options");
+    searchInput.addEventListener("input", function (e) {
+      searchQuery = e.target.value.trim();
+      renderOptions();
+      updateOptionsSelection();
+    });
+    searchInput.addEventListener("click", function (e) {
+      e.stopPropagation();
+    });
+    searchInput.addEventListener("keydown", function (e) {
+      e.stopPropagation();
+    });
+    searchInputWrapper.appendChild(searchInput);
+    searchContainer.appendChild(searchInputWrapper);
+    content.appendChild(searchContainer);
+
     var optionsList = document.createElement("div");
     optionsList.className =
       "overflow-y-auto p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
     optionsList.style.maxHeight = dropdownMaxHeightVh + "vh";
 
-    if (options.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 = "No options available";
-      optionsList.appendChild(noOpt);
-    } else {
-      options.forEach(function (opt) {
+    function getFilteredOptions() {
+      if (!showSearch || !searchQuery) return options.slice();
+      var normalizedQuery = searchQuery.toLowerCase();
+      return options.filter(function (opt) {
+        var label =
+          opt.label || opt.name || opt.display_name || opt.value || "";
+        var optionValue =
+          opt.value !== undefined && opt.value !== null
+            ? opt.value
+            : opt.slug || opt.id || "";
+        return (
+          String(label).toLowerCase().includes(normalizedQuery) ||
+          String(optionValue).toLowerCase().includes(normalizedQuery)
+        );
+      });
+    }
+
+    function renderOptions() {
+      optionsList.innerHTML = "";
+      var filteredOptions = getFilteredOptions();
+      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 =
+          options.length === 0
+            ? "No options available"
+            : searchQuery
+              ? "No options found"
+              : "No options available";
+        optionsList.appendChild(noOpt);
+        return;
+      }
+      filteredOptions.forEach(function (opt) {
         var optionValue =
           opt.value !== undefined && opt.value !== null
             ? opt.value
@@ -250,6 +313,7 @@
         optionsList.appendChild(option);
       });
     }
+    renderOptions();
 
     content.appendChild(optionsList);
 
@@ -278,6 +342,8 @@
           });
         trigger.setAttribute("aria-expanded", "true");
         chevron.style.transform = "rotate(180deg)";
+        renderOptions();
+        updateOptionsSelection();
         highlightOptionByValue(value);
         if (popover.panel) {
           var triggerWidthPx = trigger.offsetWidth + "px";
@@ -285,11 +351,22 @@
           popover.panel.style.minWidth = triggerWidthPx;
           popover.panel.style.width = triggerWidthPx;
         }
+        if (showSearch) {
+          setTimeout(function () {
+            searchInput.focus();
+          }, 50);
+        }
       },
       onClose: function () {
         trigger.setAttribute("aria-expanded", "false");
         chevron.style.transform = "";
         highlightedIndex = -1;
+        if (showSearch) {
+          searchQuery = "";
+          searchInput.value = "";
+          renderOptions();
+          updateOptionsSelection();
+        }
       },
     });
     container.popoverInstance = popover;
@@ -486,53 +563,8 @@
     container.updateOptions = function (newOptions) {
       options.length = 0;
       options.push.apply(options, newOptions);
-      optionsList.innerHTML = "";
-
-      if (newOptions.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 = "No options available";
-        optionsList.appendChild(noOpt);
-        return;
-      }
-
-      newOptions.forEach(function (opt) {
-        var optionValue =
-          opt.value !== undefined && opt.value !== null
-            ? opt.value
-            : opt.slug || opt.id;
-        var optionLabel =
-          opt.label || opt.name || opt.display_name || opt.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 optionContent = document.createElement("span");
-        optionContent.className = "flex items-center gap-8 flex-1 truncate";
-        optionContent.textContent = optionLabel;
-        option.appendChild(optionContent);
-
-        option.addEventListener("click", function () {
-          if (disabled) return;
-          selectOption(optionValue);
-        });
-        option.addEventListener("mouseenter", function () {
-          if (disabled) return;
-          highlightOption(option);
-        });
-        optionsList.appendChild(option);
-      });
+      renderOptions();
+      updateOptionsSelection();
     };
 
     container.setDisabled = function (isDisabled) {

package/core/flow.js

@@ -277,11 +277,12 @@
    * @param {Array} config.options - Array of { value, label } objects
    * @param {boolean} config.required - Whether field is required
    * @param {Function} config.onChange - Optional change handler
+   * @param {boolean} [config.showSearch] - Show local search input in dropdown
    * @param {boolean} config.disabled - Whether select is disabled
    * @returns {HTMLElement} Field element
    */
   function createSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, disabled = false, helpText = null } = config;
+    const { label, fieldId, options = [], required = false, onChange, showSearch = false, disabled = false, helpText = null } = config;
 
     const field = createFieldWrapper(label, required, helpText);
 
@@ -295,6 +296,7 @@
         options,
         placeholder,
         value: currentValue,
+        showSearch,
         disabled,
         onChange: (value) => {
           set(fieldId, value);
@@ -678,11 +680,12 @@
    * @param {string} config.variant - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
    * @param {string} config.size - 'default' | 'large' | 'small'
    * @param {string} config.type - 'default' (count) | 'tags' (show tags in trigger)
+   * @param {boolean} [config.showSearch] - Show local search input in dropdown
    * @param {boolean} config.disabled - Whether multiselect is disabled
    * @returns {HTMLElement} Field element
    */
   function createMultiSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, placeholder, helpText = null, variant, size, type, disabled = false } = config;
+    const { label, fieldId, options = [], required = false, onChange, placeholder, helpText = null, variant, size, type, showSearch = false, disabled = false } = config;
 
     const field = createFieldWrapper(label, required, helpText);
 
@@ -697,6 +700,7 @@
         variant: variant || "default",
         size: size || "default",
         type: type || "default",
+        showSearch,
         disabled,
         onValuesChange: (values) => {
           set(fieldId, values);