@superleapai/flow-ui 2.6.21 → 2.6.23

package/components/record-select.js

@@ -187,18 +187,18 @@
    * @param {string} config.value - Current value (record id)
    * @param {Function} config.onChange - Change handler (value, record?) => 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 {boolean} [config.canClear] - Show clear button when value is set
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
    * @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_singular_name/display_plural_name/slug used for placeholder/search text; properties.icon_data { icon?, color? } for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record select container element
    */
   function createRecordSelect(config) {
     var fieldId = config.fieldId;
     var objectSlug = config.objectSlug;
-    var objectSchema = config.objectSchema || null;
+    var objectSchema = null;
     var displaySingular = getObjectDisplayName(objectSchema, objectSlug, "singular");
     var displayPlural = getObjectDisplayName(objectSchema, objectSlug, "plural");
     var placeholder =
@@ -208,6 +208,7 @@
       config.searchPlaceholder ||
       "Search " + (displayPlural || objectSlug || "") + "...";
     var onChange = config.onChange;
+    var showDisplayFields = config.showDisplayFields === true;
     var variant = config.variant || "default";
     var size = config.size || "default";
     var canClear = !!config.canClear;
@@ -247,6 +248,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 (same structure as Select)
     var triggerWrapper = document.createElement("span");
@@ -408,6 +424,7 @@
           popover.panel.style.minWidth = triggerWidthPx;
           popover.panel.style.width = triggerWidthPx;
         }
+        if (showDisplayFields) loadObjectSchema();
         loadInitialAndRender();
         setTimeout(function () {
           if (searchInputEl) searchInputEl.focus();
@@ -443,6 +460,31 @@
     if (clearBtn)
       clearBtn.style.display = canClear && value && !disabled ? "" : "none";
 
+    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;
+          if (filteredRecords.length > 0) renderOptions();
+          else updateTriggerDisplay();
+        })
+        .catch(function () {})
+        .finally(function () {
+          schemaLoading = false;
+        });
+    }
+
     function setValue(newVal) {
       value = newVal !== undefined && newVal !== null ? newVal : "";
       selectedRecord = null;
@@ -552,7 +594,8 @@
       var sdk = client.getSdk();
       if (!sdk) return Promise.resolve({ records: [], hasMore: false });
       var model = sdk.model(objectSlug);
-      var fields = ["id", "name"];
+      var schemaDisplayFields = getSchemaDisplayFields();
+      var fields = ["id", "name"].concat(schemaDisplayFields);
       var actualLimit = limit || initialLimit;
       var offset = page ? (page - 1) * actualLimit : 0;
 
@@ -602,6 +645,9 @@
                   value: d.id,
                   name: d.name || d.id,
                   label: d.name || d.id,
+                  displayLabels: schemaDisplayFields.map(function (field) {
+                    return d[field] || "";
+                  }),
                 };
               });
               // If we got fewer records than the limit, there are no more
@@ -631,8 +677,9 @@
         return;
       }
       var model = sdk.model(objectSlug);
+      var schemaDisplayFields = getSchemaDisplayFields();
       model
-        .select("id", "name")
+        .select.apply(model, ["id", "name"].concat(schemaDisplayFields))
         .where({ id: value })
         .limit(1)
         .first()
@@ -644,6 +691,9 @@
               value: d.id,
               name: d.name || d.id,
               label: d.name || d.id,
+              displayLabels: schemaDisplayFields.map(function (field) {
+                return d[field] || "";
+              }),
             };
           }
           updateTriggerDisplay();
@@ -654,6 +704,7 @@
             value: value,
             name: value,
             label: value,
+            displayLabels: [],
           };
           updateTriggerDisplay();
         });
@@ -747,7 +798,9 @@
         );
 
         var optContent = document.createElement("span");
-        optContent.className = "flex items-center gap-8 flex-1 truncate";
+        optContent.className = "flex flex-col flex-1 truncate min-w-0";
+        var primaryRow = document.createElement("div");
+        primaryRow.className = "flex items-center gap-8 truncate";
         if (objectSlug === STANDARD_OBJECT_SLUGS_USERS) {
           var Avatar = getAvatar();
           if (Avatar && typeof Avatar.createVivid === "function") {
@@ -756,13 +809,13 @@
               size: "small",
               shape: "circle",
             });
-            optContent.appendChild(avatarEl);
+            primaryRow.appendChild(avatarEl);
           } else {
             var pl = document.createElement("span");
             pl.className =
               "size-20 rounded-full bg-primary-surface text-primary-text flex items-center justify-center text-reg-12 font-semibold shrink-0";
             pl.textContent = (optionLabel || "?").charAt(0).toUpperCase();
-            optContent.appendChild(pl);
+            primaryRow.appendChild(pl);
           }
         } else {
           var IconComponent = getIcon();
@@ -775,18 +828,39 @@
               defaultIcon: true,
               className: "size-20 shrink-0",
             });
-            if (iconEl) optContent.appendChild(iconEl);
+            if (iconEl) primaryRow.appendChild(iconEl);
           } else {
             var pl = document.createElement("span");
             pl.className =
               "size-20 rounded-4 flex items-center justify-center shrink-0 bg-neutral-surface-hover text-neutral-text-base";
             pl.textContent = "?";
-            optContent.appendChild(pl);
+            primaryRow.appendChild(pl);
           }
         }
         var labelSpan = document.createElement("span");
+        labelSpan.className = "truncate";
         labelSpan.textContent = optionLabel;
-        optContent.appendChild(labelSpan);
+        primaryRow.appendChild(labelSpan);
+        optContent.appendChild(primaryRow);
+
+        if (showDisplayFields && rec.displayLabels && rec.displayLabels.length > 0 && rec.displayLabels.some(function (l) { return l; })) {
+          var secondaryRow = document.createElement("div");
+          secondaryRow.className = "flex items-center gap-4 truncate text-reg-10 text-typography-tertiary-text mt-2 ml-28";
+          rec.displayLabels.forEach(function (label, index) {
+            if (label) {
+              var secondaryLabel = document.createElement("span");
+              secondaryLabel.className = "truncate";
+              secondaryLabel.textContent = label;
+              secondaryRow.appendChild(secondaryLabel);
+              if (index < rec.displayLabels.length - 1 && rec.displayLabels[index + 1]) {
+                var separator = document.createElement("span");
+                separator.textContent = " • ";
+                secondaryRow.appendChild(separator);
+              }
+            }
+          });
+          optContent.appendChild(secondaryRow);
+        }
         option.appendChild(optContent);
 
         option.addEventListener("click", function (e) {
@@ -983,6 +1057,7 @@
 
     if (value) loadSelectedRecord();
     else updateTriggerDisplay();
+    if (showDisplayFields) loadObjectSchema();
 
     return container;
   }

package/core/bridge.js

@@ -1,12 +1,12 @@
 /**
- * Superleap-Flow Bridge Transport Layer
+ * SuperLeap-Flow Bridge Transport Layer
  *
  * Handles postMessage / MessageChannel communication between an iframe
  * (running this library) and the host CRM window.  Also supports React
  * 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();

package/core/crm.js

@@ -1,7 +1,7 @@
 /**
- * Superleap-Flow CRM Bridge Extensions
+ * 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();
@@ -324,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
@@ -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);

package/core/flow.js

@@ -321,7 +321,16 @@
    * @returns {HTMLElement} Field element
    */
   function createSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, showSearch = false, 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);
 
@@ -784,7 +793,20 @@
    * @returns {HTMLElement} Field element
    */
   function createMultiSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, placeholder, helpText = null, variant, size, type, showSearch = false, 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);
 
@@ -865,6 +887,7 @@
    * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
    * @param {string} [config.size] - 'default' | 'large' | 'small'
    * @param {boolean} [config.canClear] - Show clear button when value is set
+   * @param {boolean} [config.showDisplayFields=false] - Show secondary fields from object schema display_fields
    * @param {number} [config.initialLimit] - Initial fetch limit
    * @param {string} [config.helpText] - Optional help text for tooltip
    * @returns {HTMLElement} Field element
@@ -882,6 +905,7 @@
       variant,
       size,
       canClear,
+      showDisplayFields = false,
       initialLimit,
       initialFilter,
       helpText = null,
@@ -902,6 +926,7 @@
         variant: variant || "default",
         size: size || "default",
         canClear: !!canClear,
+        showDisplayFields: !!showDisplayFields,
         initialLimit,
         initialFilter,
         onChange: (value, record) => {
@@ -918,7 +943,7 @@
     const fallback = document.createElement("div");
     fallback.className = "text-reg-13 text-typography-quaternary-text";
     fallback.textContent =
-      "Record select requires RecordSelect component and Superleap client.";
+      "Record select requires RecordSelect component and SuperLeap client.";
     field.appendChild(fallback);
     return field;
   }
@@ -936,8 +961,8 @@
    * @param {boolean} [config.disabled=false]
    * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
    * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {boolean} [config.showDisplayFields=false] - Show secondary fields from object schema display_fields
    * @param {number} [config.initialLimit] - Initial fetch limit
-   * @param {Array<string>} [config.displayFields] - Fields to show as secondary info
    * @param {string} [config.helpText] - Optional help text for tooltip
    * @returns {HTMLElement} Field element
    */
@@ -953,9 +978,9 @@
       disabled = false,
       variant,
       size,
+      showDisplayFields = false,
       initialLimit,
       initialFilter,
-      displayFields,
       helpText = null,
     } = config;
 
@@ -975,9 +1000,9 @@
         disabled,
         variant: variant || "default",
         size: size || "default",
+        showDisplayFields: !!showDisplayFields,
         initialLimit,
         initialFilter,
-        displayFields: displayFields || [],
         onValuesChange: (values, records) => {
           set(fieldId, values);
           if (onChange) onChange(values, records);
@@ -991,13 +1016,13 @@
     const fallback = document.createElement("div");
     fallback.className = "text-reg-13 text-typography-quaternary-text";
     fallback.textContent =
-      "Record multi-select requires RecordMultiSelect component and Superleap client.";
+      "Record multi-select requires RecordMultiSelect component and SuperLeap client.";
     field.appendChild(fallback);
     return field;
   }
 
   /**
-   * Create an enum select field (options from Superleap object column)
+   * Create an enum select field (options from SuperLeap object column)
    * @param {Object} config - Configuration object
    * @param {string} config.label - Field label
    * @param {string} config.fieldId - State key for this field
@@ -1059,13 +1084,13 @@
     const fallback = document.createElement("div");
     fallback.className = "text-reg-13 text-typography-quaternary-text";
     fallback.textContent =
-      "Enum select requires EnumSelect component and Superleap client.";
+      "Enum select requires EnumSelect component and SuperLeap client.";
     field.appendChild(fallback);
     return field;
   }
 
   /**
-   * Create an enum multi-select field (options from Superleap object column)
+   * Create an enum multi-select field (options from SuperLeap object column)
    * @param {Object} config - Configuration object
    * @param {string} config.label - Field label
    * @param {string} config.fieldId - State key (stores array of values)
@@ -1130,7 +1155,7 @@
     const fallback = document.createElement("div");
     fallback.className = "text-reg-13 text-typography-quaternary-text";
     fallback.textContent =
-      "Enum multi-select requires EnumMultiSelect component and Superleap client.";
+      "Enum multi-select requires EnumMultiSelect component and SuperLeap client.";
     field.appendChild(fallback);
     return field;
   }

package/core/superleapClient.js

@@ -1,6 +1,6 @@
 /**
- * Superleap-Flow SDK client
- * Thin wrapper around the Superleap SDK (createSuperLeapSDK from sdk.js or superleap.js).
+ * SuperLeap-Flow SDK client
+ * Thin wrapper around the SuperLeap SDK (createSuperLeapSDK from sdk.js or superleap.js).
  * Exposes getSdk() for record-select, file-input, etc.
  * Load the SDK script before this script; then call superleapClient.init(config).
  *
@@ -39,7 +39,7 @@
       _sdkInstance = new global.SuperLeapSDK(_config);
     } else {
       console.warn(
-        "[superleapClient] Superleap SDK not found. Install with: npm install superleap-sdk",
+        "[superleapClient] SuperLeap SDK not found. Install with: npm install superleap-sdk",
       );
       _sdkInstance = null;
     }