npm - @superleapai/flow-ui - Versions diffs - 2.5.18 → 2.5.20 - Mend

@superleapai/flow-ui 2.5.18 → 2.5.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md +2 -2
package/LICENSE +1 -1
package/README.md +38 -38
package/components/enum-multiselect.js +119 -56
package/components/enum-select.js +90 -48
package/components/file-input.js +111 -49
package/components/multiselect.js +70 -3
package/components/select.js +87 -55
package/core/bridge.js +4 -6
package/core/crm.js +17 -17
package/core/flow.js +236 -61
package/core/superleapClient.js +2 -2
package/dist/superleap-flow.min.js +2 -2
package/index.d.ts +33 -20
package/index.js +41 -30
package/package.json +2 -2

package/CHANGELOG.md CHANGED Viewed

@@ -24,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Phone input (international)
   - Currency input
   - File upload
-  - Record select (SuperLeap integration)
+  - Record select (Superleap integration)
   - Record multi-select
   - Enumeration select/multi-select
 - Advanced components:
@@ -53,7 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Accessibility features
 - Responsive design
 - Dark mode compatible
-- SuperLeap client integration
+- Superleap client integration
 ### Documentation
 - README.md with complete API reference

package/LICENSE CHANGED Viewed

@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2026 SuperLeap
+Copyright (c) 2026 Superleap
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 A comprehensive, reusable design system for building multi-step forms and UI components with vanilla JavaScript and Tailwind CSS.
-**✨ Clean Architecture:** Only `FlowUI` and `SuperLeap` are exposed to global scope. All components are internal.
+**✨ Clean Architecture:** Only `FlowUI` and `Superleap` are exposed to global scope. All components are internal.
 ## 📦 Installation
@@ -23,14 +23,14 @@ npm install @superleapai/flow-ui
 <body>
   <div id="app"></div>
-  <!-- Single script tag - includes SuperLeap SDK and all components -->
+  <!-- Single script tag - includes Superleap SDK and all components -->
   <script src="https://cdn.jsdelivr.net/npm/@superleapai/flow-ui@latest/index.js"></script>
   <script>
     // Wait for library to be ready
     document.addEventListener('superleap-flow:ready', function() {
-      // Initialize SuperLeap SDK (optional, for Record Select)
-      SuperLeap.init({
+      // Initialize Superleap SDK (optional, for Record Select)
+      Superleap.init({
         // apiKey: 'YOUR_API_KEY'
       });
@@ -77,7 +77,7 @@ npm install @superleapai/flow-ui
 ## 🔌 CRM Embedded Usage (Inside iframes)
-When your flow is embedded in the SuperLeap CRM as an iframe, use `SuperLeap.connect()` to establish a secure connection. This automatically provides credentials and context without requiring hardcoded API keys.
+When your flow is embedded in the Superleap CRM as an iframe, use `Superleap.connect()` to establish a secure connection. This automatically provides credentials and context without requiring hardcoded API keys.
 ```html
 <!DOCTYPE html>
@@ -95,7 +95,7 @@ When your flow is embedded in the SuperLeap CRM as an iframe, use `SuperLeap.con
       try {
         // Connect to CRM - SDK is auto-initialized with credentials
         // flowId must match the custom_id of your iframe component in the CRM
-        const { context, config } = await SuperLeap.connect({
+        const { context, config } = await Superleap.connect({
           flowId: 'my-onboarding-flow' // Use the custom_id from your iframe component
         });
@@ -137,22 +137,22 @@ When your flow is embedded in the SuperLeap CRM as an iframe, use `SuperLeap.con
             const data = FlowUI.getState();
             // Show loading in CRM
-            SuperLeap.setLoading(true);
+            Superleap.setLoading(true);
             try {
               // Your business logic here
-              const sdk = SuperLeap.getSdk();
+              const sdk = Superleap.getSdk();
               await sdk.records.create('contacts', data);
               // Show success notification in CRM
-              SuperLeap.toast('Profile created successfully!', 'success');
+              Superleap.toast('Profile created successfully!', 'success');
               // Close the form/modal
-              SuperLeap.closeForm();
+              Superleap.closeForm();
             } catch (error) {
-              SuperLeap.toast('Failed to create profile', 'error');
+              Superleap.toast('Failed to create profile', 'error');
             } finally {
-              SuperLeap.setLoading(false);
+              Superleap.setLoading(false);
             }
           }
         });
@@ -174,7 +174,7 @@ When your flow is embedded in the SuperLeap CRM as an iframe, use `SuperLeap.con
 **Connect to CRM:**
 ```javascript
-const { context, config } = await SuperLeap.connect({
+const { context, config } = await Superleap.connect({
   flowId: 'my-flow',         // Required: the custom_id of your iframe component in CRM
   crmOrigin: 'https://...',  // Optional: validate CRM origin
   autoInit: true,            // Optional: auto-initialize SDK (default: true)
@@ -184,7 +184,7 @@ const { context, config } = await SuperLeap.connect({
 **Access CRM Context:**
 ```javascript
-const context = SuperLeap.getContext();
+const context = Superleap.getContext();
 // {
 //   orgId: string,
 //   userId: string,
@@ -198,35 +198,35 @@ const context = SuperLeap.getContext();
 **CRM Actions:**
 ```javascript
 // Show/hide loading overlay in CRM
-SuperLeap.setLoading(true);
-SuperLeap.setLoading(false);
+Superleap.setLoading(true);
+Superleap.setLoading(false);
 // Close the current form/modal in CRM
-SuperLeap.closeForm();
+Superleap.closeForm();
 // Show toast notification in CRM
-SuperLeap.toast('Success!', 'success', 3000);
-SuperLeap.toast('Error occurred', 'error');
-SuperLeap.toast('Warning message', 'warning');
-SuperLeap.toast('Info message', 'info');
+Superleap.toast('Success!', 'success', 3000);
+Superleap.toast('Error occurred', 'error');
+Superleap.toast('Warning message', 'warning');
+Superleap.toast('Info message', 'info');
 // Navigate to a path in CRM
-SuperLeap.navigate('/records/contacts/123');
+Superleap.navigate('/records/contacts/123');
 ```
 **Custom Events (CRM ↔ Iframe Communication):**
 ```javascript
 // Send custom event to CRM
-SuperLeap.send('form-submitted', { values: {...} });
-SuperLeap.send('validation-failed', { errors: [...] });
+Superleap.send('form-submitted', { values: {...} });
+Superleap.send('validation-failed', { errors: [...] });
 // Listen for custom events from CRM
-const unsubscribe = SuperLeap.on('prefill-data', (data) => {
+const unsubscribe = Superleap.on('prefill-data', (data) => {
   FlowUI.setState(data);
 });
 // Remove listener
-SuperLeap.off('prefill-data', callbackFunction);
+Superleap.off('prefill-data', callbackFunction);
 // Or use unsubscribe function
 unsubscribe();
@@ -234,14 +234,14 @@ unsubscribe();
 **Check Connection Status:**
 ```javascript
-if (SuperLeap.isConnected()) {
+if (Superleap.isConnected()) {
   // Connected to CRM
 }
 ```
 **Disconnect:**
 ```javascript
-SuperLeap.disconnect();
+Superleap.disconnect();
 ```
 #### React Native WebView Support
@@ -253,7 +253,7 @@ The bridge automatically detects and supports React Native WebView environments.
 ```javascript
 // Only 2 objects in global scope
 window.FlowUI    // ✅ UI Framework with all components
-window.SuperLeap // ✅ SDK Client for API integration
+window.Superleap // ✅ SDK Client for API integration
 // All components are internal (not global)
 window.Toast     // ❌ Not available
@@ -273,7 +273,7 @@ window.Alert     // ❌ Not available
 - 📊 **Data Tables** - Sortable, searchable tables
 - 🎨 **Customizable** - Tailwind CSS for easy styling
 - 📱 **Responsive** - Mobile-first design
-- ✨ **Clean Architecture** - Only FlowUI and SuperLeap exposed globally
+- ✨ **Clean Architecture** - Only FlowUI and Superleap exposed globally
 - 📦 **Single Script** - One file includes everything (SDK + components)
 - 🚀 **Zero Dependencies** - Pure vanilla JavaScript
@@ -421,7 +421,7 @@ FlowUI.createFileUpload({
   accept: '.pdf,.jpg,.png'
 })
-// Record select (requires SuperLeap SDK)
+// Record select (requires Superleap SDK)
 FlowUI.createRecordSelect({
   label: 'Account',
   fieldId: 'account',
@@ -519,25 +519,25 @@ Toast.success('Hello!')
 Button.create({ text: 'Click me' })
 ```
-### SuperLeap API
+### Superleap API
 ```javascript
 // Initialize SDK
-SuperLeap.init({
+Superleap.init({
   apiKey: 'YOUR_API_KEY',
   baseUrl: 'https://app.superleap.com/api/v1'
 })
 // Get SDK instance
-const sdk = SuperLeap.getSdk()
+const sdk = Superleap.getSdk()
 // Check availability
-if (SuperLeap.isAvailable()) {
+if (Superleap.isAvailable()) {
   // SDK is ready
 }
 // Get default config
-const config = SuperLeap.getDefaultConfig()
+const config = Superleap.getDefaultConfig()
 ```
 ## 🎨 Component Variants
@@ -573,13 +573,13 @@ See `example.html` for a comprehensive demonstration of all components.
 Full TypeScript definitions included:
 ```typescript
-import { FlowUI, SuperLeap, SuperLeapConfig } from '@superleapai/flow-ui';
+import { FlowUI, Superleap, SuperLeapConfig } from '@superleapai/flow-ui';
 const config: SuperLeapConfig = {
   apiKey: 'YOUR_KEY'
 };
-SuperLeap.init(config);
+Superleap.init(config);
 FlowUI.initState({ name: '' });
 ```

package/components/enum-multiselect.js CHANGED Viewed

@@ -1,8 +1,8 @@
 /**
  * EnumMultiSelect Component (vanilla JS, Tailwind)
- * A multiselect component that fetches options from SuperLeap SDK based on object column metadata.
+ * 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',
@@ -47,7 +47,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",
     };
@@ -56,7 +57,9 @@
       large: "px-12 py-8",
       small: "px-8 py-4",
     };
-    var textColorClass = isEmpty ? " text-typography-quaternary-text" : " text-typography-primary-text";
+    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"
       : "";
@@ -77,7 +80,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;
     }
@@ -168,7 +174,13 @@
     var trigger = document.createElement("button");
     trigger.type = "button";
-    trigger.className = triggerClasses(variant, size, disabled, values.length === 0, canClear && values.length > 0 && !disabled);
+    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");
@@ -176,7 +188,8 @@
     trigger.setAttribute("aria-label", placeholder);
     var triggerContent = document.createElement("div");
-    triggerContent.className = "flex flex-1 items-center gap-6 truncate text-left text-inherit";
+    triggerContent.className =
+      "flex flex-1 items-center gap-6 truncate text-left text-inherit";
     function renderTriggerContent() {
       triggerContent.innerHTML = "";
@@ -201,7 +214,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" || values.length === 0;
     if (showChevron) {
       trigger.appendChild(chevron);
@@ -216,19 +229,14 @@
       "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.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
-      );
+      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) {
@@ -236,21 +244,22 @@
       } 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";
+        clearBtn.style.display =
+          canClear && values.length > 0 && !disabled ? "" : "none";
       }
     }
@@ -258,15 +267,20 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    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 enum-select)
     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",
@@ -293,12 +307,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...";
@@ -375,8 +389,14 @@
         values.push(optionValue);
       }
       renderTriggerContent();
-      trigger.className = triggerClasses(variant, size, disabled, values.length === 0, canClear && values.length > 0 && !disabled);
+      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) {
@@ -384,7 +404,7 @@
       } else if (!shouldShowChevron && chevron.parentNode) {
         chevron.parentNode.removeChild(chevron);
       }
       updateClearButton();
       syncOptionStates();
       if (onChange) onChange(values.slice());
@@ -394,14 +414,22 @@
       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);
+          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);
+        optEl.classList.toggle(
+          "hover:bg-fill-tertiary-fill-light-gray",
+          !selected,
+        );
       });
     }
@@ -410,7 +438,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";
@@ -439,7 +468,7 @@
         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" : ""
+          selected ? "bg-primary-surface hover:!bg-primary-surface-hover" : "",
         );
         var optionContent = document.createElement("span");
@@ -448,7 +477,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,
@@ -475,7 +507,8 @@
         // Add checkmark
         var checkSpan = document.createElement("span");
-        checkSpan.className = "multiselect-option-check ml-auto flex size-14 shrink-0 items-center justify-center";
+        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);
@@ -497,7 +530,9 @@
     function openDropdown() {
       if (disabled) return;
       document
-        .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
+        .querySelectorAll(
+          ".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect",
+        )
         .forEach(function (other) {
           if (other !== container && other.popoverInstance) {
             other.popoverInstance.hide();
@@ -521,7 +556,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 {
@@ -560,7 +596,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 " ":
@@ -635,8 +674,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;
@@ -653,26 +695,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];
@@ -697,14 +751,20 @@
           } 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);
+              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;
+            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;
           });
@@ -719,9 +779,9 @@
               size,
               disabled,
               false,
-              canClear && values.length > 0 && !disabled
+              canClear && values.length > 0 && !disabled,
             );
             // Update chevron visibility for inline variant
             var shouldShowChevron = variant !== "inline" || values.length === 0;
             if (shouldShowChevron && !chevron.parentNode) {
@@ -729,7 +789,7 @@
             } else if (!shouldShowChevron && chevron.parentNode) {
               chevron.parentNode.removeChild(chevron);
             }
             updateClearButton();
           }
@@ -757,9 +817,9 @@
         size,
         disabled,
         values.length === 0,
-        canClear && values.length > 0 && !disabled
+        canClear && values.length > 0 && !disabled,
       );
       // Update chevron visibility for inline variant
       var shouldShowChevron = variant !== "inline" || values.length === 0;
       if (shouldShowChevron && !chevron.parentNode) {
@@ -767,7 +827,7 @@
       } else if (!shouldShowChevron && chevron.parentNode) {
         chevron.parentNode.removeChild(chevron);
       }
       updateClearButton();
       syncOptionStates();
     };
@@ -785,10 +845,13 @@
         size,
         disabled,
         values.length === 0,
-        canClear && values.length > 0 && !disabled
+        canClear && values.length > 0 && !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();
     };