@superleapai/flow-ui 2.5.18 → 2.5.20

package/core/flow.js

@@ -68,7 +68,10 @@
    * Falls back to global[name] when flow.js is used without the single-file entry.
    */
   function getComponent(name) {
-    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+    if (
+      typeof global.FlowUI !== "undefined" &&
+      typeof global.FlowUI._getComponent === "function"
+    ) {
       const c = global.FlowUI._getComponent(name);
       if (c) return c;
     }
@@ -159,11 +162,25 @@
    * @returns {HTMLElement} Field element
    */
   function createInput(config) {
-    const { label, fieldId, placeholder, required = false, type = "text", helpText = null, variant, inputSize, disabled = false, showReadOnlyIcon } = config;
+    const {
+      label,
+      fieldId,
+      placeholder,
+      required = false,
+      type = "text",
+      helpText = null,
+      variant,
+      inputSize,
+      disabled = false,
+      showReadOnlyIcon,
+    } = config;
 
     const field = createFieldWrapper(label, required, helpText);
 
-    if (getComponent("InputComponent") && getComponent("InputComponent").create) {
+    if (
+      getComponent("InputComponent") &&
+      getComponent("InputComponent").create
+    ) {
       const currentValue = get(fieldId) || "";
       const inputEl = getComponent("InputComponent").create({
         variant: variant || "default",
@@ -196,12 +213,24 @@
    * @returns {HTMLElement} Field element
    */
   function createTextarea(config) {
-    const { label, fieldId, placeholder, required = false, helpText = null, variant, rows, disabled = false } = config;
+    const {
+      label,
+      fieldId,
+      placeholder,
+      required = false,
+      helpText = null,
+      variant,
+      rows,
+      disabled = false,
+    } = config;
 
     const field = createFieldWrapper(label, required, helpText);
     field.setAttribute("data-field-id", fieldId);
 
-    if (getComponent("TextareaComponent") && getComponent("TextareaComponent").create) {
+    if (
+      getComponent("TextareaComponent") &&
+      getComponent("TextareaComponent").create
+    ) {
       const currentValue = get(fieldId) || "";
       const textareaEl = getComponent("TextareaComponent").create({
         variant: variant || "default",
@@ -241,12 +270,22 @@
    * @returns {HTMLElement} Field element
    */
   function createRichTextEditor(config) {
-    const { label, fieldId, placeholder, required = false, helpText = null, disabled = false } = config;
+    const {
+      label,
+      fieldId,
+      placeholder,
+      required = false,
+      helpText = null,
+      disabled = false,
+    } = config;
 
     const field = createFieldWrapper(label, required, helpText);
     field.setAttribute("data-field-id", fieldId);
 
-    if (getComponent("RichTextEditorComponent") && getComponent("RichTextEditorComponent").create) {
+    if (
+      getComponent("RichTextEditorComponent") &&
+      getComponent("RichTextEditorComponent").create
+    ) {
       const currentValue = get(fieldId) || "";
       const editorEl = getComponent("RichTextEditorComponent").create({
         value: currentValue,
@@ -277,11 +316,12 @@
    * @param {Array} config.options - Array of { value, label } objects
    * @param {boolean} config.required - Whether field is required
    * @param {Function} config.onChange - Optional change handler
+   * @param {boolean} [config.showSearch] - Show local search input in dropdown
    * @param {boolean} config.disabled - Whether select is disabled
    * @returns {HTMLElement} Field element
    */
   function createSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, 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);
 
@@ -295,10 +335,13 @@
         options,
         placeholder,
         value: currentValue,
+        showSearch,
         disabled,
         onChange: (value) => {
           set(fieldId, value);
-          if (onChange) {onChange(value);}
+          if (onChange) {
+            onChange(value);
+          }
         },
       });
 
@@ -330,7 +373,7 @@
     });
 
     select.value = get(fieldId) || "";
-    
+
     // Set placeholder attribute for styling
     if (!select.value) {
       select.setAttribute("data-placeholder", "true");
@@ -339,15 +382,17 @@
     select.addEventListener("change", (e) => {
       const value = e.target.value;
       set(fieldId, value);
-      
+
       // Update placeholder attribute for styling
       if (value === "") {
         select.setAttribute("data-placeholder", "true");
       } else {
         select.removeAttribute("data-placeholder");
       }
-      
-      if (onChange) {onChange(value);}
+
+      if (onChange) {
+        onChange(value);
+      }
     });
 
     field.appendChild(select);
@@ -371,7 +416,19 @@
    * @returns {HTMLElement} Field element
    */
   function createTimePicker(config) {
-    const { label, fieldId, value: initialValue, placeholder, required = false, onChange, disabled = false, use24Hour = false, size, variant, helpText = null } = config;
+    const {
+      label,
+      fieldId,
+      value: initialValue,
+      placeholder,
+      required = false,
+      onChange,
+      disabled = false,
+      use24Hour = false,
+      size,
+      variant,
+      helpText = null,
+    } = config;
 
     const field = createFieldWrapper(label, required, helpText);
 
@@ -388,7 +445,9 @@
         variant,
         onChange: (value) => {
           set(fieldId, value);
-          if (onChange) { onChange(value); }
+          if (onChange) {
+            onChange(value);
+          }
         },
       });
 
@@ -405,7 +464,9 @@
     input.disabled = disabled;
     input.addEventListener("change", (e) => {
       set(fieldId, e.target.value);
-      if (onChange) { onChange(e.target.value); }
+      if (onChange) {
+        onChange(e.target.value);
+      }
     });
     field.appendChild(input);
     return field;
@@ -451,14 +512,20 @@
 
     const field = createFieldWrapper(label, required, helpText);
 
-    if (getComponent("DateTimePicker") && getComponent("DateTimePicker").create) {
+    if (
+      getComponent("DateTimePicker") &&
+      getComponent("DateTimePicker").create
+    ) {
       const raw = get(fieldId);
       let currentValueMs;
       if (typeof initialValue === "number" && !Number.isNaN(initialValue)) {
         currentValueMs = initialValue;
       } else if (initialValue instanceof Date) {
         currentValueMs = initialValue.getTime();
-      } else if (typeof initialValue === "string" && initialValue.trim() !== "") {
+      } else if (
+        typeof initialValue === "string" &&
+        initialValue.trim() !== ""
+      ) {
         try {
           const d = new Date(initialValue);
           currentValueMs = Number.isNaN(d.getTime()) ? undefined : d.getTime();
@@ -471,7 +538,9 @@
         try {
           const parsed = typeof raw === "string" ? new Date(raw) : raw;
           currentValueMs =
-            parsed && typeof parsed.getTime === "function" && !Number.isNaN(parsed.getTime())
+            parsed &&
+            typeof parsed.getTime === "function" &&
+            !Number.isNaN(parsed.getTime())
               ? parsed.getTime()
               : undefined;
         } catch (e) {
@@ -490,8 +559,12 @@
         fromDate,
         toDate,
         onChange: (epochMs) => {
-          set(fieldId, epochMs != null ? new Date(epochMs).toISOString() : null);
-          if (onChange) onChange(epochMs != null ? new Date(epochMs) : undefined);
+          set(
+            fieldId,
+            epochMs != null ? new Date(epochMs).toISOString() : null,
+          );
+          if (onChange)
+            onChange(epochMs != null ? new Date(epochMs) : undefined);
         },
       });
 
@@ -515,7 +588,9 @@
     }
     dateInput.disabled = disabled;
     dateInput.addEventListener("change", (e) => {
-      const val = e.target.value ? new Date(e.target.value + "T12:00:00Z").toISOString() : null;
+      const val = e.target.value
+        ? new Date(e.target.value + "T12:00:00Z").toISOString()
+        : null;
       set(fieldId, val);
       if (onChange) onChange(val ? new Date(val) : undefined);
     });
@@ -536,7 +611,16 @@
    * @returns {HTMLElement} Field element
    */
   function createRadioGroup(config) {
-    const { label, fieldId, options = [], required = false, onChange, helpText = null, orientation = "horizontal", disabled = false } = config;
+    const {
+      label,
+      fieldId,
+      options = [],
+      required = false,
+      onChange,
+      helpText = null,
+      orientation = "horizontal",
+      disabled = false,
+    } = config;
 
     const field = createFieldWrapper(label, required, helpText);
 
@@ -544,7 +628,11 @@
       const currentValue = get(fieldId);
       const radioGroupEl = getComponent("RadioGroup").create({
         name: fieldId,
-        options: options.map((opt) => ({ value: opt.value, label: opt.label || opt.value, disabled: opt.disabled })),
+        options: options.map((opt) => ({
+          value: opt.value,
+          label: opt.label || opt.value,
+          disabled: opt.disabled,
+        })),
         value: currentValue,
         disabled,
         orientation,
@@ -574,7 +662,9 @@
       radio.disabled = disabled || !!opt.disabled;
       radio.addEventListener("change", () => {
         set(fieldId, opt.value);
-        if (onChange) {onChange(opt.value);}
+        if (onChange) {
+          onChange(opt.value);
+        }
       });
 
       const radioLabel = document.createElement("label");
@@ -604,7 +694,16 @@
    * @returns {HTMLElement} Field wrapper element
    */
   function createCardSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, helpText = null, disabled = false, className } = config;
+    const {
+      label,
+      fieldId,
+      options = [],
+      required = false,
+      onChange,
+      helpText = null,
+      disabled = false,
+      className,
+    } = config;
 
     const field = createFieldWrapper(label, required, helpText);
 
@@ -649,7 +748,9 @@
       radio.disabled = disabled || !!opt.disabled;
       radio.addEventListener("change", () => {
         set(fieldId, opt.value);
-        if (onChange) { onChange(opt.value); }
+        if (onChange) {
+          onChange(opt.value);
+        }
       });
 
       const radioLabel = document.createElement("label");
@@ -678,11 +779,12 @@
    * @param {string} config.variant - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
    * @param {string} config.size - 'default' | 'large' | 'small'
    * @param {string} config.type - 'default' (count) | 'tags' (show tags in trigger)
+   * @param {boolean} [config.showSearch] - Show local search input in dropdown
    * @param {boolean} config.disabled - Whether multiselect is disabled
    * @returns {HTMLElement} Field element
    */
   function createMultiSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, placeholder, helpText = null, variant, size, type, 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);
 
@@ -697,6 +799,7 @@
         variant: variant || "default",
         size: size || "default",
         type: type || "default",
+        showSearch,
         disabled,
         onValuesChange: (values) => {
           set(fieldId, values);
@@ -729,11 +832,17 @@
           ? [...current, optValue]
           : current.filter((v) => v !== optValue);
         set(fieldId, updated);
-        if (onChange) {onChange(updated);}
+        if (onChange) {
+          onChange(updated);
+        }
       });
 
       checkboxWrapper.appendChild(checkbox);
-      checkboxWrapper.appendChild(document.createTextNode(" " + (opt.label || opt.name || opt.display_name || opt.value)));
+      checkboxWrapper.appendChild(
+        document.createTextNode(
+          " " + (opt.label || opt.name || opt.display_name || opt.value),
+        ),
+      );
       checkboxContainer.appendChild(checkboxWrapper);
     });
 
@@ -808,7 +917,8 @@
 
     const fallback = document.createElement("div");
     fallback.className = "text-reg-13 text-typography-quaternary-text";
-    fallback.textContent = "Record select requires RecordSelect component and SuperLeap client.";
+    fallback.textContent =
+      "Record select requires RecordSelect component and Superleap client.";
     field.appendChild(fallback);
     return field;
   }
@@ -851,7 +961,10 @@
 
     const field = createFieldWrapper(label, required, helpText);
 
-    if (getComponent("RecordMultiSelect") && getComponent("RecordMultiSelect").create) {
+    if (
+      getComponent("RecordMultiSelect") &&
+      getComponent("RecordMultiSelect").create
+    ) {
       const currentValues = get(fieldId) || [];
       const recordMultiEl = getComponent("RecordMultiSelect").create({
         fieldId,
@@ -877,13 +990,14 @@
 
     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.";
+    fallback.textContent =
+      "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
@@ -944,13 +1058,14 @@
 
     const fallback = document.createElement("div");
     fallback.className = "text-reg-13 text-typography-quaternary-text";
-    fallback.textContent = "Enum select requires EnumSelect component and SuperLeap client.";
+    fallback.textContent =
+      "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)
@@ -986,7 +1101,10 @@
 
     const field = createFieldWrapper(label, required, helpText);
 
-    if (getComponent("EnumMultiSelect") && getComponent("EnumMultiSelect").create) {
+    if (
+      getComponent("EnumMultiSelect") &&
+      getComponent("EnumMultiSelect").create
+    ) {
       const currentValues = get(fieldId) || [];
       const enumMultiEl = getComponent("EnumMultiSelect").create({
         fieldId,
@@ -1011,7 +1129,8 @@
 
     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.";
+    fallback.textContent =
+      "Enum multi-select requires EnumMultiSelect component and Superleap client.";
     field.appendChild(fallback);
     return field;
   }
@@ -1052,7 +1171,10 @@
 
     if (getComponent("Duration") && getComponent("Duration").create) {
       const currentValue = get(fieldId);
-      const valueToUse = currentValue !== undefined && currentValue !== null ? currentValue : initialValue;
+      const valueToUse =
+        currentValue !== undefined && currentValue !== null
+          ? currentValue
+          : initialValue;
       const durationEl = getComponent("Duration").create({
         value: valueToUse,
         formatType,
@@ -1117,7 +1239,10 @@
 
     if (getComponent("Enumeration") && getComponent("Enumeration").create) {
       const currentValue = get(fieldId);
-      const valueToUse = currentValue !== undefined && currentValue !== null ? currentValue : defaultValue;
+      const valueToUse =
+        currentValue !== undefined && currentValue !== null
+          ? currentValue
+          : defaultValue;
       const enumEl = getComponent("Enumeration").create({
         totalElements,
         enabledIcon,
@@ -1161,7 +1286,17 @@
    * @returns {HTMLElement} Field element
    */
   function createFileUpload(config) {
-    const { label, fieldId, multiple = true, accept, required = false, helpText = null, isPrivate, maxFiles, maxFileSize } = config;
+    const {
+      label,
+      fieldId,
+      multiple = true,
+      accept,
+      required = false,
+      helpText = null,
+      isPrivate,
+      maxFiles,
+      maxFileSize,
+    } = config;
 
     if (getComponent("FileInput") && getComponent("FileInput").create) {
       return getComponent("FileInput").create({
@@ -1189,22 +1324,26 @@
     const currentFiles = get(fieldId) || [];
     const statusText = document.createElement("div");
     statusText.className = "file-upload-text";
-    statusText.textContent = currentFiles.length > 0
-      ? `${currentFiles.length} file(s) selected`
-      : "No files chosen";
+    statusText.textContent =
+      currentFiles.length > 0
+        ? `${currentFiles.length} file(s) selected`
+        : "No files chosen";
 
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = multiple;
     input.className = "file-upload-input";
-    if (accept) {input.accept = accept;}
+    if (accept) {
+      input.accept = accept;
+    }
 
     input.addEventListener("change", function () {
       const files = Array.from(this.files || []);
       set(fieldId, files);
-      statusText.textContent = files.length > 0
-        ? `${files.length} file(s) selected`
-        : "No files chosen";
+      statusText.textContent =
+        files.length > 0
+          ? `${files.length} file(s) selected`
+          : "No files chosen";
     });
 
     uploadWrapper.appendChild(btn);
@@ -1214,7 +1353,9 @@
 
     const hint = document.createElement("div");
     hint.className = "field-hint";
-    hint.textContent = multiple ? "Multiple files allowed." : "Single file only.";
+    hint.textContent = multiple
+      ? "Multiple files allowed."
+      : "Single file only.";
     field.appendChild(hint);
 
     return field;
@@ -1253,7 +1394,10 @@
     const field = createFieldWrapper(label, required, helpText);
     field.setAttribute("data-field-id", fieldId);
 
-    if (getComponent("CurrencyComponent") && getComponent("CurrencyComponent").create) {
+    if (
+      getComponent("CurrencyComponent") &&
+      getComponent("CurrencyComponent").create
+    ) {
       const currentValue = get(fieldId);
       const currencyEl = getComponent("CurrencyComponent").create({
         variant,
@@ -1427,7 +1571,18 @@
    * @returns {HTMLElement} Field wrapper containing checkbox group
    */
   function createCheckboxGroup(config) {
-    const { label, fieldId, options = [], required = false, helpText = null, variant, size, layout = "vertical", disabled = false, onChange } = config;
+    const {
+      label,
+      fieldId,
+      options = [],
+      required = false,
+      helpText = null,
+      variant,
+      size,
+      layout = "vertical",
+      disabled = false,
+      onChange,
+    } = config;
 
     const field = createFieldWrapper(label, required, helpText);
     field.setAttribute("data-field-id", fieldId);
@@ -1515,12 +1670,15 @@
    * @param {string} currentStepId - Currently active step ID
    */
   function renderStepper(container, steps, currentStepId) {
-    if (!container) {return;}
+    if (!container) {
+      return;
+    }
     container.innerHTML = "";
 
     steps.forEach((step, idx) => {
       const pill = document.createElement("div");
-      pill.className = "step-pill" + (step.id === currentStepId ? " step-pill--active" : "");
+      pill.className =
+        "step-pill" + (step.id === currentStepId ? " step-pill--active" : "");
 
       const indexSpan = document.createElement("span");
       indexSpan.className = "step-pill-index";
@@ -1625,7 +1783,9 @@
         radio.checked = get(fieldId) === row[idKey];
         radio.addEventListener("change", () => {
           set(fieldId, row[idKey]);
-          if (onSelect) {onSelect(row);}
+          if (onSelect) {
+            onSelect(row);
+          }
         });
         tdRadio.appendChild(radio);
         tr.appendChild(tdRadio);
@@ -1696,7 +1856,9 @@
     const searchInput = searchContainer.querySelector(".search-input");
     searchInput.addEventListener("input", (e) => {
       set(fieldId, e.target.value.toLowerCase());
-      if (onSearch) {onSearch(e.target.value.toLowerCase());}
+      if (onSearch) {
+        onSearch(e.target.value.toLowerCase());
+      }
     });
 
     return searchContainer;
@@ -1750,7 +1912,11 @@
     } else {
       messages.forEach((msg) => {
         const div = document.createElement("div");
-        div.className = "rounded border p-2 text-sm " + (variant === "error" ? "bg-red-50 border-red-200 text-red-800" : "bg-gray-50 border-gray-200");
+        div.className =
+          "rounded border p-2 text-sm " +
+          (variant === "error"
+            ? "bg-red-50 border-red-200 text-red-800"
+            : "bg-gray-50 border-gray-200");
         div.textContent = msg;
         container.appendChild(div);
       });
@@ -1788,7 +1954,8 @@
       return Avatar.create(config);
     }
     const div = document.createElement("div");
-    div.className = "flex shrink-0 size-32 items-center justify-center rounded-full bg-primary-base";
+    div.className =
+      "flex shrink-0 size-32 items-center justify-center rounded-full bg-primary-base";
     div.textContent = (config && config.name && config.name.charAt(0)) || "?";
     return div;
   }
@@ -1819,7 +1986,8 @@
     const span = document.createElement("span");
     span.className = "text-typography-tertiary-text";
     span.title = config && config.content ? config.content : "";
-    span.textContent = (config && config.label) || (config && config.content) || "Hover me";
+    span.textContent =
+      (config && config.label) || (config && config.content) || "Hover me";
     return span;
   }
 
@@ -1886,8 +2054,13 @@
     }
 
     // Fallback: log to console if Toast component not loaded
-    console.warn("[FlowUI] Toast component not loaded. Message:", message, "Type:", type);
-    return { close: function() {}, element: null };
+    console.warn(
+      "[FlowUI] Toast component not loaded. Message:",
+      message,
+      "Type:",
+      type,
+    );
+    return { close: function () {}, element: null };
   }
 
   // ============================================================================
@@ -1938,7 +2111,9 @@
       }
       const btn = document.createElement("button");
       btn.type = (config && config.type) || "button";
-      btn.className = "btn " + (config && config.variant === "primary" ? "btn-primary" : "btn-ghost");
+      btn.className =
+        "btn " +
+        (config && config.variant === "primary" ? "btn-primary" : "btn-ghost");
       btn.textContent = (config && (config.text || config.label)) || "Button";
       if (config && config.disabled) btn.disabled = true;
       if (config && typeof config.onClick === "function") {

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).
+ * 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;
     }