@superleapai/flow-ui 2.5.6 → 2.5.8

package/components/label.js

@@ -30,8 +30,11 @@
     return parts.join(" ");
   }
 
+  var INFO_ICON_SVG =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>';
+
   /**
-   * Create a label element matching the Radix Label API (size, requiredPosition, optional, icon).
+   * Create a label element matching the Radix Label API (size, requiredPosition, optional, icon, helpText).
    * @param {Object} config
    * @param {string} config.label - Label text
    * @param {boolean} [config.required=false] - Show required asterisk
@@ -39,6 +42,7 @@
    * @param {boolean} [config.optional=false] - Show "(optional)" after label
    * @param {string} [config.size='default'] - 'default' | 'small' | 'large'
    * @param {HTMLElement} [config.icon] - Optional icon node
+   * @param {string} [config.helpText] - Optional help text; when set, shows info icon after required with Tooltip
    * @param {string} [config.className] - Extra classes
    * @param {string} [config.htmlFor] - For attribute
    * @param {HTMLElement} [config.suffix] - Optional node appended after content (e.g. tooltip)
@@ -51,6 +55,7 @@
     var optional = !!config.optional;
     var size = config.size || "default";
     var icon = config.icon;
+    var helpText = config.helpText != null ? String(config.helpText) : "";
     var className = config.className || "";
     var htmlFor = config.htmlFor;
     var suffix = config.suffix;
@@ -95,6 +100,23 @@
       labelEl.appendChild(rightAsterisk);
     }
 
+    if (helpText) {
+      var infoWrap = document.createElement("span");
+      infoWrap.className = "box-content flex ml-4 size-16 items-center justify-center shrink-0 text-typography-tertiary-text cursor-pointer";
+      infoWrap.innerHTML = INFO_ICON_SVG;
+      var Tooltip =
+        (global.FlowUI && typeof global.FlowUI._getComponent === "function" && global.FlowUI._getComponent("Tooltip")) ||
+        global.Tooltip ||
+        (typeof window !== "undefined" && window.Tooltip);
+      if (Tooltip && typeof Tooltip.create === "function") {
+        var tooltipEl = Tooltip.create({ content: helpText, trigger: infoWrap, placement: "top" });
+        labelEl.appendChild(tooltipEl);
+      } else {
+        infoWrap.setAttribute("title", helpText);
+        labelEl.appendChild(infoWrap);
+      }
+    }
+
     if (optional) {
       var optionalSpan = document.createElement("span");
       optionalSpan.className = "optional-label text-typography-tertiary-text";

package/components/record-multiselect.js

@@ -43,6 +43,8 @@
   var CHECK_SVG =
     '<svg width="14" height="14" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.41574 12.2442 3.41574 12.5331 3.72684C12.822 4.03795 12.822 4.53753 12.5331 4.84863L6.81767 10.6736C6.52329 10.9901 6.05308 10.9901 5.7587 10.6736L2.46685 7.3463C2.17795 7.03519 2.17795 6.53561 2.46685 6.2245C2.75575 5.9134 3.24395 5.9134 3.53285 6.2245L6.28822 9.05351L11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
 
+  var SEARCH_FIELD = "search_field";
+
   var SEARCH_ICON =
     '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>';
 
@@ -473,10 +475,9 @@
           }
           if (search && search.trim()) {
             filters.push({
-              or: [
-                { field: "name", operator: "contains", value: search.trim() },
-                { field: "id", operator: "eq", value: search.trim() },
-              ],
+              field: SEARCH_FIELD,
+              operator: "contains",
+              value: search.trim(),
             });
           }
           if (filters.length > 0) {

package/components/record-select.js

@@ -46,6 +46,8 @@
   var X_SVG =
     '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></svg>';
 
+  var SEARCH_FIELD = "search_field";
+
   var SEARCH_ICON =
     '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>';
 
@@ -552,10 +554,9 @@
           }
           if (search && search.trim()) {
             filters.push({
-              or: [
-                { field: "name", operator: "contains", value: search.trim() },
-                { field: "id", operator: "eq", value: search.trim() },
-              ],
+              field: SEARCH_FIELD,
+              operator: "contains",
+              value: search.trim(),
             });
           }
           if (filters.length > 0) {

package/components/richtext-editor.js

@@ -76,7 +76,6 @@
    * @param {Object} config
    * @param {string} [config.value] - Initial HTML content
    * @param {string} [config.placeholder] - Placeholder when empty
-   * @param {number} [config.minHeightPx] - Min height of editor area (default 400)
    * @param {boolean} [config.disabled]
    * @param {Function} [config.onChange] - (html: string) => void
    * @returns {HTMLElement} Wrapper element with getValue/setValue/setDisabled/getInput
@@ -84,7 +83,6 @@
   function create(config) {
     var value = config.value != null ? String(config.value) : "";
     var placeholder = config.placeholder != null ? config.placeholder : "";
-    var minHeightPx = config.minHeightPx != null ? config.minHeightPx : 400;
     var disabled = !!config.disabled;
     var onChange = config.onChange;
 
@@ -103,9 +101,10 @@
     var editorEl = document.createElement("div");
     editorEl.contentEditable = !disabled;
     editorEl.className = join(
-      "rich-text-editor-content max-w-none rounded-b-12 border-t border-borderColor-border-primary p-8 text-reg-14 text-typography-primary-text"
+      "rich-text-editor-content max-w-none rounded-b-12 border-t border-borderColor-border-primary p-8 text-reg-14 text-typography-primary-text overflow-y-auto"
     );
-    editorEl.style.minHeight = minHeightPx + "px";
+    editorEl.style.minHeight = "15vh";
+    editorEl.style.maxHeight = "20vh";
     if (value) editorEl.innerHTML = value;
     editorEl.setAttribute("data-placeholder", placeholder);
 

package/components/tooltip.js

@@ -0,0 +1,186 @@
+/**
+ * Tooltip Component (vanilla JS)
+ * Shows a short label on hover/focus of a trigger element.
+ * Uses same styling conventions as Badge/Label (border-border-primary, typography, etc.).
+ */
+
+(function (global) {
+  "use strict";
+
+  var TOOLTIP_BASE =
+    "absolute z-50 rounded-4 border-1/2 border-black text-typography-invert-text  shadow-default-medium px-8 py-6 text-reg-10 leading-5 max-w-[80vw] whitespace-normal break-words pointer-events-none";
+
+  var ARROW_SIZE = 6;
+  var TOOLTIP_BG = "var(--color-neutral-900)";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function positionTooltip(triggerRect, tooltipEl, placement) {
+    var style = tooltipEl.style;
+    style.position = "fixed";
+    var cx = triggerRect.left + triggerRect.width / 2;
+    var cy = triggerRect.top + triggerRect.height / 2;
+    var gap = 4;
+    if (placement === "top") {
+      style.left = cx + "px";
+      style.top = triggerRect.top + "px";
+      style.transform = "translate(-50%, -100%) translateY(-" + gap + "px)";
+    } else if (placement === "bottom") {
+      style.left = cx + "px";
+      style.top = triggerRect.bottom + "px";
+      style.transform = "translate(-50%, " + gap + "px)";
+    } else if (placement === "left") {
+      style.left = triggerRect.left + "px";
+      style.top = cy + "px";
+      style.transform = "translate(-100%, -50%) translateX(-" + gap + "px)";
+    } else {
+      style.left = triggerRect.right + "px";
+      style.top = cy + "px";
+      style.transform = "translate(" + gap + "px, -50%)";
+    }
+  }
+
+  /**
+   * Create a tooltip wrapper: trigger element + tooltip that shows on hover/focus.
+   * @param {Object} config
+   * @param {string} config.content - Tooltip text
+   * @param {HTMLElement} [config.trigger] - Trigger element (if omitted, a span with label is created)
+   * @param {string} [config.label='Hover me'] - Label for default trigger when config.trigger is not provided
+   * @param {'top'|'bottom'|'left'|'right'} [config.placement='top'] - Where tooltip appears
+   * @param {string} [config.className] - Extra class for wrapper
+   * @param {string} [config.triggerClassName] - Extra class for default trigger span
+   * @returns {HTMLElement} Wrapper element (contains trigger; tooltip is portaled to body)
+   */
+  function create(config) {
+    var content = config && (config.content != null ? String(config.content) : "");
+    var placement = (config && config.placement) || "top";
+    var className = (config && config.className) || "";
+    var triggerClassName = (config && config.triggerClassName) || "";
+
+    var triggerEl = config && config.trigger;
+    if (!triggerEl || !triggerEl.nodeType) {
+      var span = document.createElement("span");
+      span.className = join(
+        "inline-flex items-center cursor-pointer text-typography-secondary-text underline decoration-dotted underline-offset-2",
+        triggerClassName
+      );
+      span.setAttribute("tabindex", "0");
+      span.setAttribute("role", "button");
+      span.textContent = (config && config.label) || "Hover me";
+      triggerEl = span;
+    }
+
+    var wrapper = document.createElement("div");
+    wrapper.className = join("relative inline-flex", className);
+    wrapper.appendChild(triggerEl);
+
+    var tooltipEl = document.createElement("div");
+    tooltipEl.className = join(TOOLTIP_BASE, "opacity-0 invisible transition-opacity duration-150");
+    tooltipEl.style.backgroundColor = TOOLTIP_BG;
+    tooltipEl.setAttribute("role", "tooltip");
+    tooltipEl.setAttribute("data-placement", placement);
+
+    var contentWrap = document.createElement("div");
+    contentWrap.textContent = content;
+    tooltipEl.appendChild(contentWrap);
+
+    var arrow = document.createElement("div");
+    arrow.setAttribute("data-tooltip-arrow", placement);
+    arrow.style.position = "absolute";
+    arrow.style.width = "0";
+    arrow.style.height = "0";
+    arrow.style.borderStyle = "solid";
+    arrow.style.pointerEvents = "none";
+    var s = ARROW_SIZE;
+    if (placement === "top") {
+      arrow.style.left = "50%";
+      arrow.style.bottom = "-" + s + "px";
+      arrow.style.marginLeft = "-" + s + "px";
+      arrow.style.borderWidth = s + "px " + s + "px 0 " + s + "px";
+      arrow.style.borderColor = TOOLTIP_BG + " transparent transparent transparent";
+    } else if (placement === "bottom") {
+      arrow.style.left = "50%";
+      arrow.style.top = "-" + s + "px";
+      arrow.style.marginLeft = "-" + s + "px";
+      arrow.style.borderWidth = "0 " + s + "px " + s + "px " + s + "px";
+      arrow.style.borderColor = "transparent transparent " + TOOLTIP_BG + " transparent";
+    } else if (placement === "left") {
+      arrow.style.top = "50%";
+      arrow.style.right = "-" + s + "px";
+      arrow.style.marginTop = "-" + s + "px";
+      arrow.style.borderWidth = s + "px 0 " + s + "px " + s + "px";
+      arrow.style.borderColor = "transparent transparent transparent " + TOOLTIP_BG;
+    } else {
+      arrow.style.top = "50%";
+      arrow.style.left = "-" + s + "px";
+      arrow.style.marginTop = "-" + s + "px";
+      arrow.style.borderWidth = s + "px " + s + "px " + s + "px 0";
+      arrow.style.borderColor = "transparent " + TOOLTIP_BG + " transparent transparent";
+    }
+    tooltipEl.appendChild(arrow);
+
+    document.body.appendChild(tooltipEl);
+
+    var showTimer;
+    var hideTimer;
+    var delay = 120;
+
+    function show() {
+      if (hideTimer) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
+      }
+      showTimer = setTimeout(function () {
+        showTimer = null;
+        var rect = triggerEl.getBoundingClientRect();
+        positionTooltip(rect, tooltipEl, placement);
+        tooltipEl.style.opacity = "1";
+        tooltipEl.classList.remove("invisible");
+      }, delay);
+    }
+
+    function hide() {
+      if (showTimer) {
+        clearTimeout(showTimer);
+        showTimer = null;
+      }
+      hideTimer = setTimeout(function () {
+        hideTimer = null;
+        tooltipEl.style.opacity = "0";
+        tooltipEl.classList.add("invisible");
+      }, 80);
+    }
+
+    function handleShow() {
+      show();
+    }
+    function handleHide() {
+      hide();
+    }
+
+    triggerEl.addEventListener("mouseenter", handleShow);
+    triggerEl.addEventListener("mouseleave", handleHide);
+    triggerEl.addEventListener("focus", handleShow);
+    triggerEl.addEventListener("blur", handleHide);
+
+    wrapper._tooltipDestroy = function () {
+      triggerEl.removeEventListener("mouseenter", handleShow);
+      triggerEl.removeEventListener("mouseleave", handleHide);
+      triggerEl.removeEventListener("focus", handleShow);
+      triggerEl.removeEventListener("blur", handleHide);
+      if (showTimer) clearTimeout(showTimer);
+      if (hideTimer) clearTimeout(hideTimer);
+      if (tooltipEl.parentNode) tooltipEl.parentNode.removeChild(tooltipEl);
+    };
+
+    return wrapper;
+  }
+
+  global.Tooltip = {
+    create: create,
+  };
+
+  console.log("[Tooltip] Module loaded successfully");
+})(typeof window !== "undefined" ? window : this);

package/core/flow.js

@@ -126,14 +126,13 @@
     let labelEl;
     const LabelComponent = getComponent("Label");
     if (LabelComponent && typeof LabelComponent.create === "function") {
-      const suffix = helpText && getComponent("Tooltip") ? getComponent("Tooltip").create(helpText) : null;
       labelEl = LabelComponent.create({
         label: label,
         required: required,
         requiredPosition: "right",
         optional: false,
         size: "default",
-        suffix: suffix || undefined,
+        helpText: helpText || undefined,
       });
     } else {
       // Fallback: inline label (no Label component)
@@ -153,7 +152,7 @@
         labelContentWrapper.appendChild(document.createTextNode(label));
       }
       if (helpText && getComponent("Tooltip")) {
-        const tooltip = getComponent("Tooltip").create(helpText);
+        const tooltip = getComponent("Tooltip").create({ content: helpText, label: "?" });
         if (tooltip) labelContentWrapper.appendChild(tooltip);
       }
       labelEl.appendChild(labelContentWrapper);
@@ -256,12 +255,11 @@
    * @param {string} [config.placeholder] - Placeholder when empty
    * @param {boolean} [config.required] - Whether field is required
    * @param {string} [config.helpText] - Optional help text for tooltip
-   * @param {number} [config.minHeightPx] - Min height of editor area in pixels (default 400)
    * @param {boolean} [config.disabled] - Whether editor is disabled
    * @returns {HTMLElement} Field element
    */
   function createRichTextEditor(config) {
-    const { label, fieldId, placeholder, required = false, helpText = null, minHeightPx = 400, 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);
@@ -271,7 +269,6 @@
       const editorEl = getComponent("RichTextEditorComponent").create({
         value: currentValue,
         placeholder: placeholder || "",
-        minHeightPx,
         disabled,
         onChange: (html) => set(fieldId, html),
       });
@@ -281,7 +278,7 @@
     }
 
     const fallback = document.createElement("textarea");
-    fallback.className = "textarea min-h-[400px]";
+    fallback.className = "textarea min-h-[15vh]";
     fallback.placeholder = placeholder || `Enter ${label.toLowerCase()}`;
     fallback.value = get(fieldId) || "";
     fallback.disabled = disabled;
@@ -1766,6 +1763,23 @@
     return createAvatar(config);
   }
 
+  /**
+   * Create a tooltip wrapper (trigger + tooltip on hover/focus)
+   * @param {Object} config - { content, trigger?, label?, placement?, className?, triggerClassName? }
+   * @returns {HTMLElement} Wrapper element containing trigger
+   */
+  function createTooltip(config) {
+    const Tooltip = getComponent("Tooltip");
+    if (Tooltip && typeof Tooltip.create === "function") {
+      return Tooltip.create(config);
+    }
+    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";
+    return span;
+  }
+
   /**
    * Create an avatar group (overlapping avatars, max 3 + remainder)
    * @param {Object} config - { users: [{ id, name, image? }], size?, className? }
@@ -1910,6 +1924,9 @@
     createBadge,
     createLoader,
 
+    // Tooltip
+    createTooltip,
+
     // Avatar
     createAvatar,
     createVividAvatar,