@superleapai/flow-ui 2.6.22 → 2.6.23

package/components/record-multiselect.js

@@ -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;
   }

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

@@ -887,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
@@ -904,6 +905,7 @@
       variant,
       size,
       canClear,
+      showDisplayFields = false,
       initialLimit,
       initialFilter,
       helpText = null,
@@ -924,6 +926,7 @@
         variant: variant || "default",
         size: size || "default",
         canClear: !!canClear,
+        showDisplayFields: !!showDisplayFields,
         initialLimit,
         initialFilter,
         onChange: (value, record) => {
@@ -958,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
    */
@@ -975,9 +978,9 @@
       disabled = false,
       variant,
       size,
+      showDisplayFields = false,
       initialLimit,
       initialFilter,
-      displayFields,
       helpText = null,
     } = config;
 
@@ -997,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);