npm - @superleapai/flow-ui - Versions diffs - 2.6.21 → 2.6.23 - Mend

@superleapai/flow-ui 2.6.21 → 2.6.23

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 (18) hide show

package/CHANGELOG.md +2 -2
package/LICENSE +1 -1
package/README.md +38 -38
package/components/enum-multiselect.js +2 -2
package/components/enum-select.js +2 -2
package/components/file-input.js +1 -1
package/components/record-multiselect.js +82 -10
package/components/record-select.js +85 -10
package/core/bridge.js +4 -4
package/core/crm.js +9 -9
package/core/flow.js +36 -11
package/core/superleapClient.js +3 -3
package/dist/superleap-flow.js +19921 -0
package/dist/superleap-flow.js.map +1 -0
package/dist/superleap-flow.min.js +2 -2
package/index.d.ts +10 -9
package/index.js +32 -32
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,6 +1,6 @@
 /**
  * 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:
@@ -678,7 +678,7 @@
         !client ||
         (typeof client.isAvailable === "function" && !client.isAvailable())
       ) {
-        error = "Superleap SDK not initialized";
+        error = "SuperLeap SDK not initialized";
         showError(error);
         if (onError) onError(error);
         return;

package/components/enum-select.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * 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:
@@ -612,7 +612,7 @@
         !client ||
         (typeof client.isAvailable === "function" && !client.isAvailable())
       ) {
-        error = "Superleap SDK not initialized";
+        error = "SuperLeap SDK not initialized";
         showError(error);
         if (onError) onError(error);
         return;

package/components/file-input.js CHANGED Viewed

@@ -88,7 +88,7 @@
     if (!baseUrl) {
       throw new Error(
-        "Superleap client not initialized. Call superleapClient.init({ baseUrl, apiKey }) first.",
+        "SuperLeap client not initialized. Call superleapClient.init({ baseUrl, apiKey }) first.",
       );
     }

package/components/record-multiselect.js CHANGED Viewed

@@ -168,19 +168,21 @@
    * @param {Array} config.value - Current selected values (array of record ids)
    * @param {Function} config.onValuesChange - Change handler (values: string[], records?: Array) => void
    * @param {boolean} [config.disabled] - Whether select is disabled
+   * @param {boolean} [config.showDisplayFields] - If true, fetch schema and show secondary fields from objectSchema.properties.display_fields
    * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
    * @param {string} [config.size] - 'default' | 'large' | 'small'
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
-   * @param {Array<string>} [config.displayFields] - Fields to display as secondary info (e.g. ["email", "phone"])
    * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
-   * @param {Object} [config.objectSchema] - Optional ObjectType; display_plural_name/display_singular_name/slug used for placeholder/search/summary label; properties.icon_data { icon?, color? } for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record multiselect container element
    */
   function createRecordMultiSelect(config) {
     var fieldId = config.fieldId;
     var objectSlug = config.objectSlug;
-    var objectSchema = config.objectSchema || null;
+    var objectSchema = null;
     var displayPlural = getObjectDisplayName(objectSchema, objectSlug, "plural");
+    var hasCustomPlaceholder = typeof config.placeholder === "string" && config.placeholder.length > 0;
+    var hasCustomSearchPlaceholder = typeof config.searchPlaceholder === "string" && config.searchPlaceholder.length > 0;
+    var hasCustomSummaryLabel = typeof config.label === "string" && config.label.length > 0;
     var placeholder =
       config.placeholder ||
       (displayPlural ? "Select " + displayPlural : "Select records");
@@ -189,11 +191,11 @@
       "Search " + (displayPlural || objectSlug || "") + "...";
     var summaryLabel = config.label || (displayPlural || "selected");
     var onValuesChange = config.onValuesChange;
+    var showDisplayFields = config.showDisplayFields === true;
     var variant = config.variant || "default";
     var size = config.size || "default";
     var initialLimit = config.initialLimit != null ? config.initialLimit : 50;
     var initialFilter = config.initialFilter || null; // Can be array, object, or function returning either
-    var displayFields = config.displayFields || [];
     var disabled = config.disabled === true;
     var values = Array.isArray(config.value)
@@ -224,6 +226,21 @@
     var currentPage = 1;
     var isFetchingMore = false;
     var totalFetched = 0;
+    var schemaLoaded = false;
+    var schemaLoading = false;
+    function getSchemaDisplayFields() {
+      if (!showDisplayFields) return [];
+      var fields =
+        objectSchema &&
+        objectSchema.properties &&
+        Array.isArray(objectSchema.properties.display_fields)
+          ? objectSchema.properties.display_fields
+          : [];
+      return fields.filter(function (field) {
+        return typeof field === "string" && field.length > 0;
+      });
+    }
     // Trigger wrapper + button
     var triggerWrapper = document.createElement("span");
@@ -413,6 +430,7 @@
           popover.panel.style.minWidth = triggerWidthPx;
           popover.panel.style.width = triggerWidthPx;
         }
+        loadObjectSchema();
         loadInitialAndRender();
         setTimeout(function () {
           if (searchInputEl) searchInputEl.focus();
@@ -432,6 +450,57 @@
     });
     container.popoverInstance = popover;
+    function refreshSchemaDerivedText() {
+      displayPlural = getObjectDisplayName(objectSchema, objectSlug, "plural");
+      if (!hasCustomPlaceholder) {
+        placeholder = displayPlural
+          ? "Select " + displayPlural
+          : "Select records";
+      }
+      if (!hasCustomSearchPlaceholder) {
+        searchPlaceholder = "Search " + (displayPlural || objectSlug || "") + "...";
+      }
+      if (!hasCustomSummaryLabel) {
+        summaryLabel = displayPlural || "selected";
+      }
+      trigger.setAttribute("aria-label", placeholder);
+      renderTriggerContent();
+      if (searchInputWrapper && typeof searchInputWrapper.setPlaceholder === "function") {
+        searchInputWrapper.setPlaceholder(searchPlaceholder);
+      } else if (searchInputEl) {
+        searchInputEl.placeholder = searchPlaceholder;
+      }
+      if (searchInputEl) {
+        searchInputEl.setAttribute("aria-label", "Search " + (displayPlural || "records"));
+      }
+    }
+    function loadObjectSchema() {
+      if (schemaLoaded || schemaLoading) return;
+      if (!showDisplayFields) return;
+      var client = getClient();
+      if (!client || typeof client.getSdk !== "function") return;
+      var sdk = client.getSdk();
+      if (!sdk) return;
+      var model = sdk.model(objectSlug);
+      if (!model || typeof model.getSchema !== "function") return;
+      schemaLoading = true;
+      model
+        .getSchema()
+        .then(function (schema) {
+          objectSchema = schema && schema.data ? schema.data : schema;
+          schemaLoaded = true;
+          refreshSchemaDerivedText();
+          if (filteredRecords.length > 0) renderOptions();
+        })
+        .catch(function () {})
+        .finally(function () {
+          schemaLoading = false;
+        });
+    }
     function isSelected(recordId) {
       return values.some(function (v) {
         return v === recordId || String(v) === String(recordId);
@@ -483,7 +552,8 @@
       var sdk = client.getSdk();
       if (!sdk) return Promise.resolve({ records: [], hasMore: false });
       var model = sdk.model(objectSlug);
-      var fields = ["id", "name"].concat(displayFields || []);
+      var schemaDisplayFields = getSchemaDisplayFields();
+      var fields = ["id", "name"].concat(schemaDisplayFields);
       var actualLimit = limit || initialLimit;
       var offset = page ? (page - 1) * actualLimit : 0;
@@ -517,9 +587,9 @@
               var mappedRecords = records.map(function (r) {
                 var d = r.toJSON ? r.toJSON() : r;
                 var iconUrl = d.icon || d.logo || d.icon_url || d.Icon__c || d.Logo__c || null;
-                var displayLabels = displayFields ? displayFields.map(function (field) {
+                var displayLabels = schemaDisplayFields.map(function (field) {
                   return d[field] || "";
-                }) : [];
+                });
                 return {
                   id: d.id,
                   value: d.id,
@@ -555,7 +625,8 @@
         return;
       }
       var model = sdk.model(objectSlug);
-      var fields = ["id", "name"].concat(displayFields || []);
+      var schemaDisplayFields = getSchemaDisplayFields();
+      var fields = ["id", "name"].concat(schemaDisplayFields);
       model
         .select.apply(model, fields)
         .filterBy({
@@ -568,9 +639,9 @@
           selectedRecords = records.map(function (r) {
             var d = r.toJSON ? r.toJSON() : r;
             var iconUrl = d.icon || d.logo || d.icon_url || d.Icon__c || d.Logo__c || null;
-            var displayLabels = displayFields ? displayFields.map(function (field) {
+            var displayLabels = schemaDisplayFields.map(function (field) {
               return d[field] || "";
-            }) : [];
+            });
             return {
               id: d.id,
               value: d.id,
@@ -941,6 +1012,7 @@
     if (values && values.length > 0) loadSelectedRecords();
     else renderTriggerContent();
+    if (showDisplayFields) loadObjectSchema();
     return container;
   }