@superleapai/flow-ui 2.5.9 → 2.5.11

package/components/record-multiselect.js

@@ -346,20 +346,20 @@
 
     var optionsList = document.createElement("div");
     optionsList.className = "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
-    
-    // Add scroll listener for infinite scroll
-    optionsList.addEventListener("scroll", function () {
-      if (isFetchingMore || !hasMoreRecords) return;
-      var scrollHeight = optionsList.scrollHeight;
-      var scrollTop = optionsList.scrollTop;
-      var clientHeight = optionsList.clientHeight;
-      
-      // Trigger load more when scrolled to bottom (with 50px threshold)
-      if (scrollTop + clientHeight >= scrollHeight - 50) {
-        loadMoreRecords();
-      }
-    });
-    
+
+    var loadMoreSentinel = null;
+    var loadMoreObserver =
+      typeof IntersectionObserver !== "undefined"
+        ? new IntersectionObserver(
+            function (entries) {
+              if (!entries.length || !entries[0].isIntersecting) return;
+              if (isFetchingMore || !hasMoreRecords) return;
+              loadMoreRecords();
+            },
+            { root: optionsList, rootMargin: "50px", threshold: 0 },
+          )
+        : null;
+
     content.appendChild(optionsList);
 
     var Popover = getDep("Popover");
@@ -619,11 +619,17 @@
         opt.remove();
       });
       
-      var oldStates = optionsList.querySelectorAll(".record-multiselect-loading, .record-multiselect-empty");
+      if (loadMoreSentinel && loadMoreObserver) {
+        loadMoreObserver.unobserve(loadMoreSentinel);
+        loadMoreSentinel = null;
+      }
+      var oldStates = optionsList.querySelectorAll(
+        ".record-multiselect-loading, .record-multiselect-empty, .record-multiselect-sentinel",
+      );
       oldStates.forEach(function (el) {
         el.remove();
       });
-      
+
       filteredRecords.forEach(function (rec) {
         var recordId = rec.id || rec.value;
         var recordLabel = rec.name || rec.label || rec.value;
@@ -738,6 +744,15 @@
       
       if (isFetchingMore) {
         showLoadingMore();
+      } else if (hasMoreRecords && filteredRecords.length > 0 && loadMoreObserver) {
+        // Sentinel: when visible (short list or user scrolled to bottom), load more automatically
+        var sentinel = document.createElement("div");
+        sentinel.className = "record-multiselect-sentinel";
+        sentinel.setAttribute("aria-hidden", "true");
+        sentinel.style.cssText = "height:1px;visibility:hidden;pointer-events:none;";
+        optionsList.appendChild(sentinel);
+        loadMoreSentinel = sentinel;
+        loadMoreObserver.observe(sentinel);
       }
     }
 

package/components/record-select.js

@@ -345,18 +345,18 @@
     optionsList.className =
       "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
 
-    // Add scroll listener for infinite scroll
-    optionsList.addEventListener("scroll", function () {
-      if (isFetchingMore || !hasMoreRecords) return;
-      var scrollHeight = optionsList.scrollHeight;
-      var scrollTop = optionsList.scrollTop;
-      var clientHeight = optionsList.clientHeight;
-
-      // Trigger load more when scrolled to bottom (with 50px threshold)
-      if (scrollTop + clientHeight >= scrollHeight - 50) {
-        loadMoreRecords();
-      }
-    });
+    var loadMoreSentinel = null;
+    var loadMoreObserver =
+      typeof IntersectionObserver !== "undefined"
+        ? new IntersectionObserver(
+            function (entries) {
+              if (!entries.length || !entries[0].isIntersecting) return;
+              if (isFetchingMore || !hasMoreRecords) return;
+              loadMoreRecords();
+            },
+            { root: optionsList, rootMargin: "50px", threshold: 0 },
+          )
+        : null;
 
     content.appendChild(optionsList);
 
@@ -694,9 +694,13 @@
         opt.remove();
       });
 
-      // Remove old loading/empty states
+      // Remove old loading/empty states and sentinel (unobserve first)
+      if (loadMoreSentinel && loadMoreObserver) {
+        loadMoreObserver.unobserve(loadMoreSentinel);
+        loadMoreSentinel = null;
+      }
       var oldStates = optionsList.querySelectorAll(
-        ".record-select-loading, .record-select-empty",
+        ".record-select-loading, .record-select-empty, .record-select-sentinel",
       );
       oldStates.forEach(function (el) {
         el.remove();
@@ -778,6 +782,15 @@
       // Add loading more indicator at the bottom if fetching
       if (isFetchingMore) {
         showLoadingMore();
+      } else if (hasMoreRecords && filteredRecords.length > 0 && loadMoreObserver) {
+        // Sentinel: when visible (short list or user scrolled to bottom), load more automatically
+        var sentinel = document.createElement("div");
+        sentinel.className = "record-select-sentinel";
+        sentinel.setAttribute("aria-hidden", "true");
+        sentinel.style.cssText = "height:1px;visibility:hidden;pointer-events:none;";
+        optionsList.appendChild(sentinel);
+        loadMoreSentinel = sentinel;
+        loadMoreObserver.observe(sentinel);
       }
     }
 

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) {