@superleapai/flow-ui 2.5.8 → 2.5.10

package/components/tooltip.js

@@ -17,12 +17,18 @@
     return Array.prototype.filter.call(arguments, Boolean).join(" ");
   }
 
+  var VIEWPORT_PADDING = 8;
+
   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;
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+    var pad = VIEWPORT_PADDING;
+
     if (placement === "top") {
       style.left = cx + "px";
       style.top = triggerRect.top + "px";
@@ -40,6 +46,42 @@
       style.top = cy + "px";
       style.transform = "translate(" + gap + "px, -50%)";
     }
+
+    // Force layout so we can read tooltip dimensions
+    void tooltipEl.offsetHeight;
+    var tr = tooltipEl.getBoundingClientRect();
+    var adjustX = 0;
+    var adjustY = 0;
+
+    if (placement === "top" || placement === "bottom") {
+      if (tr.left < pad) adjustX = pad - tr.left;
+      else if (tr.right > vw - pad) adjustX = (vw - pad) - tr.right;
+      if (adjustX !== 0) {
+        var base = placement === "top"
+          ? "translate(-50%, -100%) translateY(-" + gap + "px)"
+          : "translate(-50%, " + gap + "px)";
+        style.transform = base + " translateX(" + adjustX + "px)";
+      }
+    } else {
+      if (tr.top < pad) adjustY = pad - tr.top;
+      else if (tr.bottom > vh - pad) adjustY = (vh - pad) - tr.bottom;
+      if (adjustY !== 0) {
+        var base = placement === "left"
+          ? "translate(-100%, -50%) translateX(-" + gap + "px)"
+          : "translate(" + gap + "px, -50%)";
+        style.transform = base + " translateY(" + adjustY + "px)";
+      }
+    }
+
+    // Keep arrow pointing at trigger when tooltip was shifted for viewport
+    var arrowEl = tooltipEl.querySelector("[data-tooltip-arrow]");
+    if (arrowEl) {
+      if (placement === "top" || placement === "bottom") {
+        arrowEl.style.transform = adjustX !== 0 ? "translateX(" + -adjustX + "px)" : "";
+      } else {
+        arrowEl.style.transform = adjustY !== 0 ? "translateY(" + -adjustY + "px)" : "";
+      }
+    }
   }
 
   /**

package/core/flow.js

@@ -123,42 +123,24 @@
     const field = document.createElement("div");
     field.className = "field";
 
-    let labelEl;
-    const LabelComponent = getComponent("Label");
-    if (LabelComponent && typeof LabelComponent.create === "function") {
-      labelEl = LabelComponent.create({
-        label: label,
-        required: required,
-        requiredPosition: "right",
-        optional: false,
-        size: "default",
-        helpText: helpText || undefined,
-      });
-    } else {
-      // Fallback: inline label (no Label component)
-      labelEl = document.createElement("label");
-      labelEl.className = "field-label";
-      const labelContentWrapper = document.createElement("span");
-      labelContentWrapper.style.display = "inline-flex";
-      labelContentWrapper.style.alignItems = "center";
-      labelContentWrapper.style.gap = "0.25rem";
-      if (required) {
-        labelContentWrapper.appendChild(document.createTextNode(label + " "));
-        const asterisk = document.createElement("span");
-        asterisk.className = "required-asterisk";
-        asterisk.textContent = "*";
-        labelContentWrapper.appendChild(asterisk);
-      } else {
-        labelContentWrapper.appendChild(document.createTextNode(label));
-      }
-      if (helpText && getComponent("Tooltip")) {
-        const tooltip = getComponent("Tooltip").create({ content: helpText, label: "?" });
-        if (tooltip) labelContentWrapper.appendChild(tooltip);
+    const hasLabel = label != null && String(label).trim() !== "";
+    let labelEl = null;
+
+    if (hasLabel) {
+      const LabelComponent = getComponent("Label");
+      if (LabelComponent && typeof LabelComponent.create === "function") {
+        labelEl = LabelComponent.create({
+          label: label,
+          required: required,
+          requiredPosition: "right",
+          optional: false,
+          size: "default",
+          helpText: helpText || undefined,
+        });
       }
-      labelEl.appendChild(labelContentWrapper);
     }
 
-    field.appendChild(labelEl);
+    if (labelEl) field.appendChild(labelEl);
     return field;
   }
 
@@ -1256,7 +1238,7 @@
       onChange,
     } = config;
 
-    const field = createFieldWrapper(label || "Amount", required, helpText);
+    const field = createFieldWrapper(label, required, helpText);
     field.setAttribute("data-field-id", fieldId);
 
     if (getComponent("CurrencyComponent") && getComponent("CurrencyComponent").create) {