@superleapai/flow-ui 2.5.18 → 2.5.20

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/bridge.js

@@ -6,7 +6,7 @@
  * Native WebView via window.ReactNativeWebView.
  *
  * This module is transport-only — it knows nothing about CRM concepts,
- * the SuperLeap SDK, or FlowUI state.  The higher-level core/crm.js
+ * the Superleap SDK, or FlowUI state.  The higher-level core/crm.js
  * builds on top of it.
  *
  * Exposed temporarily as window.SuperleapBridge, then captured into
@@ -327,7 +327,7 @@
       if (!_bridgeId) {
         reject(
           new Error(
-            "SuperleapBridge: No _bridgeId found in URL. Is this page embedded in the SuperLeap CRM?",
+            "SuperleapBridge: No _bridgeId found in URL. Is this page embedded in the Superleap CRM?",
           ),
         );
         return;
@@ -391,7 +391,7 @@
           var err = new Error(
             "SuperleapBridge: Handshake timed out after " +
               timeoutMs +
-              "ms. Is this page embedded in the SuperLeap CRM?",
+              "ms. Is this page embedded in the Superleap CRM?",
           );
           if (_pendingReject) _pendingReject(err);
           cleanup();
@@ -422,9 +422,7 @@
    */
   function send(action, payload) {
     if (!_connected) {
-      throw new Error(
-        "SuperleapBridge: Not connected. Call connect() first.",
-      );
+      throw new Error("SuperleapBridge: Not connected. Call connect() first.");
     }
     sendRaw(createEnvelope(action, payload));
   }

package/core/crm.js

@@ -1,7 +1,7 @@
 /**
  * Superleap-Flow CRM Bridge Extensions
  *
- * This module extends the existing SuperLeap object (from superleapClient.js)
+ * This module extends the existing Superleap object (from superleapClient.js)
  * with CRM bridge functionality. It wraps the low-level bridge transport
  * (core/bridge.js) and adds:
  *
@@ -14,7 +14,7 @@
  * read from the URL).  User code should listen for the 'superleap-flow:ready'
  * event — by the time it fires, the SDK is initialized and context is available.
  *
- * This extends the existing SuperLeap API from superleapClient.js which
+ * This extends the existing Superleap API from superleapClient.js which
  * already has: init(), getSdk(), isAvailable(), getDefaultConfig().
  */
 
@@ -73,7 +73,7 @@
       if (c) return c;
     }
     if (global.superleapClient) return global.superleapClient;
-    if (global.SuperLeap) return global.SuperLeap;
+    if (global.Superleap) return global.Superleap;
     return null;
   }
 
@@ -84,7 +84,7 @@
   /**
    * Connect to the CRM.  Performs the postMessage handshake, receives
    * credentials and context, and (by default) auto-initializes the
-   * SuperLeap SDK.
+   * Superleap SDK.
    *
    * If already connected, silently resolves with the existing context/config.
    * If a connection is in flight (e.g. auto-connect), returns the same promise.
@@ -92,7 +92,7 @@
    * @param {Object}  [options]
    * @param {string}  [options.bridgeId]   – explicit bridgeId override (auto-read from URL)
    * @param {string}  [options.crmOrigin]  – expected CRM origin for validation
-   * @param {boolean} [options.autoInit]   – auto-call SuperLeap.init() (default true)
+   * @param {boolean} [options.autoInit]   – auto-call Superleap.init() (default true)
    * @param {number}  [options.timeout]    – handshake timeout in ms (default 5000)
    * @returns {Promise<{ context: Object, config: Object }>}
    */
@@ -125,7 +125,7 @@
         _context = (payload && payload.context) || {};
         _config = (payload && payload.config) || {};
 
-        // Auto-initialize the SuperLeap SDK
+        // Auto-initialize the Superleap SDK
         var sdkConfig = payload && payload.sdkConfig;
         if (opts.autoInit !== false && sdkConfig) {
           var client = getSuperLeapClient();
@@ -248,18 +248,17 @@
   }
 
   /**
-   * Register a callback for when the CRM form is submitted successfully.
-   * The CRM sends a 'crm:formSubmitSuccess' message after the form saves.
+   * Notify the CRM that the form was submitted successfully.
+   * The CRM listens for 'crm:formSubmitSuccess' and can react
+   * (e.g. close the form, refresh data, show a toast).
    *
-   * @param {Function} callback – receives (payload)
-   * @returns {Function} unsubscribe function
+   * @param {Object} [payload] – optional data about the submission
    */
-  function onFormSubmitSuccess(callback) {
+  function formSubmittedSuccessfully(payload) {
     var bridge = getBridge();
-    if (!bridge) {
-      return function () {};
+    if (bridge && bridge.isConnected()) {
+      bridge.send("crm:formSubmitSuccess", payload || {});
     }
-    return bridge.onMessage("crm:onFormSubmitSuccess", callback);
   }
 
   // ---------------------------------------------------------------------------
@@ -325,7 +324,7 @@
   }
 
   // ---------------------------------------------------------------------------
-  // Extend the existing superleapClient (which becomes SuperLeap)
+  // Extend the existing superleapClient (which becomes Superleap)
   // ---------------------------------------------------------------------------
 
   // Wait for superleapClient to be defined, then extend it
@@ -336,7 +335,8 @@
     global.superleapClient.disconnect = disconnect;
     global.superleapClient.setLoading = setLoading;
     global.superleapClient.closeForm = closeForm;
-    global.superleapClient.onFormSubmitSuccess = onFormSubmitSuccess;
+    global.superleapClient.formSubmittedSuccessfully =
+      formSubmittedSuccessfully;
     global.superleapClient.toast = toast;
     global.superleapClient.navigate = navigate;
     global.superleapClient.getContext = getContext;
@@ -347,7 +347,7 @@
     // superleapClient not loaded yet — this shouldn't happen if scripts
     // load in order, but handle it gracefully
     console.warn(
-      "SuperLeap CRM Bridge: superleapClient not found. Make sure core/superleapClient.js loads before core/crm.js",
+      "Superleap CRM Bridge: superleapClient not found. Make sure core/superleapClient.js loads before core/crm.js",
     );
   }
 })(typeof window !== "undefined" ? window : this);