@multiplatform.one/forms 7.77.0 → 7.77.2

package/dist/cjs/fields/Select/index.native.js

@@ -495,8 +495,8 @@ function FloatingSelectCore(param) {
     dismissible,
     panelWidth
   } = param;
-  var _ref, _ref1, _ref2, _panel_x, _ref3, _ref4, _ref5;
-  var _overlayStyle_current, _panel_triggerRef_current, _panel_triggerRef_current1;
+  var _ref, _ref1, _ref2, _panel_x, _ref3, _ref4;
+  var _overlayStyle_current, _panel_triggerRef_current;
   var overlayZIndex = (0, import_overlayStack.useOverlayZIndex)("dropdown");
   var {
     style: elevatedSurfaceStyle,
@@ -610,8 +610,11 @@ function FloatingSelectCore(param) {
   var growUpOnlyRef = (0, import_react.useRef)(false);
   var growDownOnlyRef = (0, import_react.useRef)(false);
   var lastScrollTopRef = (0, import_react.useRef)(0);
-  var dropUpRef = (0, import_react.useRef)(false);
-  var [dropUp, setDropUp] = (0, import_react.useState)(false);
+  var coverScrollRef = (0, import_react.useRef)(false);
+  var [coverScroll, setCoverScroll] = (0, import_react.useState)(false);
+  var growsUpRef = (0, import_react.useRef)(false);
+  var coverTrimRef = (0, import_react.useRef)(0);
+  var echoed = !beside && !coverScroll;
   var repositionRef = (0, import_react.useRef)(null);
   var panel = (0, import_FloatingPanel.useFloatingPanel)({
     open,
@@ -629,7 +632,10 @@ function FloatingSelectCore(param) {
       growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
-      dropUpRef.current = false;
+      coverScrollRef.current = false;
+      growsUpRef.current = false;
+      coverTrimRef.current = 0;
+      setCoverScroll(false);
     },
     panelWidth
   });
@@ -706,14 +712,86 @@ function FloatingSelectCore(param) {
     var scrollContentHeight = dropdownElement.scrollHeight;
     var totalContentHeight = scrollContentHeight + totalBorderWidth;
     var firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
-    var roomBelow = viewportHeight - import_FloatingPanel.panelViewportPadding - triggerBounds.top;
-    var roomAbove = triggerBounds.bottom - import_FloatingPanel.panelViewportPadding;
-    if (firstPlacement) {
-      dropUpRef.current = totalContentHeight > roomBelow && roomAbove > roomBelow;
-      setDropUp(dropUpRef.current);
+    var boundsTop = import_FloatingPanel.panelViewportPadding;
+    var boundsBottom = viewportHeight - import_FloatingPanel.panelViewportPadding;
+    var echoRow = dropdownElement.querySelector("[data-fp-trigger-row]");
+    var echoHeight = echoRow ? triggerBounds.height : 0;
+    var listHeight = totalContentHeight - echoHeight;
+    var roomBelow = boundsBottom - triggerBounds.top;
+    var roomAbove = triggerBounds.bottom - boundsTop;
+    if (firstPlacement && totalContentHeight > roomBelow) {
+      coverScrollRef.current = true;
+      growsUpRef.current = roomAbove > roomBelow;
+      setCoverScroll(true);
+    }
+    if (coverScrollRef.current) {
+      var grown = grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current;
+      var room = grown ? boundsBottom - boundsTop : growsUpRef.current ? roomAbove : roomBelow;
+      var trim = grown ? 0 : coverTrimRef.current;
+      var height = Math.max(0, Math.min(listHeight, room - trim));
+      var anchor = growsUpRef.current ? triggerBounds.bottom - height : triggerBounds.top;
+      var top1 = Math.min(Math.max(anchor, boundsTop), boundsBottom - height);
+      var previousTop = pinnedTopRef.current;
+      if (!overlayStyle.current || overlayStyle.current.top !== top1 - originTop || overlayStyle.current.maxHeight !== height) {
+        dropdownElement.style.top = `${top1 - originTop}px`;
+        dropdownElement.style.maxHeight = `${height}px`;
+        dropdownElement.style.height = "";
+        overlayStyle.current = {
+          top: top1 - originTop,
+          maxHeight: height
+        };
+        void dropdownElement.offsetHeight;
+      }
+      pinnedTopRef.current = top1;
+      pinnedHeightRef.current = height;
+      if (grown && previousTop > top1 && dropdownElement.scrollTop > 0) {
+        programmaticScrollRef.current++;
+        dropdownElement.scrollTop = Math.max(0, dropdownElement.scrollTop - (previousTop - top1));
+      }
+      if (echoRow) return;
+      var rowHeight = selectedItem.offsetHeight || 1;
+      if (isInitial1 && selectedIndex >= 0) {
+        var maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+        var scrollTop;
+        if (growsUpRef.current) {
+          scrollTop = selectedItem.offsetTop + rowHeight - (triggerBounds.bottom - top1);
+        } else {
+          var short = Math.max(0, selectedItem.offsetTop - maxScrollTop - 2);
+          scrollTop = selectedItem.offsetTop - Math.ceil(short / rowHeight) * rowHeight;
+        }
+        programmaticScrollRef.current++;
+        dropdownElement.scrollTop = Math.min(maxScrollTop, Math.max(0, scrollTop));
+      }
+      if (isInitial1 && !grown) {
+        var firstRow = listItemsRef.current[0];
+        var visibleBottom = dropdownElement.scrollTop + dropdownElement.clientHeight;
+        if (firstRow && visibleBottom < dropdownElement.scrollHeight - 2) {
+          var cut = (visibleBottom - firstRow.offsetTop) % rowHeight;
+          if (cut > 3 && cut < rowHeight - 3) {
+            coverTrimRef.current = cut;
+            var trimmedHeight = height - cut;
+            var trimmedTop = growsUpRef.current ? top1 + cut : top1;
+            dropdownElement.style.top = `${trimmedTop - originTop}px`;
+            dropdownElement.style.maxHeight = `${trimmedHeight}px`;
+            overlayStyle.current = {
+              top: trimmedTop - originTop,
+              maxHeight: trimmedHeight
+            };
+            pinnedTopRef.current = trimmedTop;
+            pinnedHeightRef.current = trimmedHeight;
+          }
+        }
+      }
+      panel.initializingRef.current = false;
+      void dropdownElement.offsetHeight;
+      if (isInitial1) dropdownElement.style.transition = panel.panelTransition;
+      requestAnimationFrame(function () {
+        if (dropdownElement) panel.updateArrows(dropdownElement);
+      });
+      return;
     }
-    var idealTop = dropUpRef.current ? triggerBounds.bottom - totalContentHeight : triggerBounds.top;
-    var idealBottom = dropUpRef.current ? triggerBounds.bottom : idealTop + totalContentHeight;
+    var idealTop = triggerBounds.top;
+    var idealBottom = idealTop + totalContentHeight;
     var pinnedTop = Math.max(import_FloatingPanel.panelViewportPadding, idealTop);
     var pinnedBottom = Math.min(viewportHeight - import_FloatingPanel.panelViewportPadding, idealBottom);
     var pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
@@ -721,57 +799,49 @@ function FloatingSelectCore(param) {
       pinnedTopRef.current = pinnedTop;
       pinnedHeightRef.current = pinnedHeight;
     }
-    var top1 = pinnedTopRef.current;
-    var height = pinnedHeightRef.current;
+    var top2 = pinnedTopRef.current;
+    var height1 = pinnedHeightRef.current;
     if (grownRef.current) {
-      var canGrowDown = dropUpRef.current ? 0 : Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top1 + height));
-      height += canGrowDown;
-      var canGrowUp = Math.max(0, top1 - import_FloatingPanel.panelViewportPadding);
-      top1 -= canGrowUp;
-      height += canGrowUp;
+      var canGrowDown = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top2 + height1));
+      height1 += canGrowDown;
+      var canGrowUp = Math.max(0, top2 - import_FloatingPanel.panelViewportPadding);
+      top2 -= canGrowUp;
+      height1 += canGrowUp;
     }
     if (growUpOnlyRef.current) {
-      var canGrowUp1 = Math.max(0, top1 - import_FloatingPanel.panelViewportPadding);
-      top1 -= canGrowUp1;
-      height += canGrowUp1;
+      var canGrowUp1 = Math.max(0, top2 - import_FloatingPanel.panelViewportPadding);
+      top2 -= canGrowUp1;
+      height1 += canGrowUp1;
     }
-    if (growDownOnlyRef.current && !dropUpRef.current) {
-      var canGrowDown1 = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top1 + height));
-      height += canGrowDown1;
+    if (growDownOnlyRef.current) {
+      var canGrowDown1 = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top2 + height1));
+      height1 += canGrowDown1;
     }
-    height = Math.min(height, viewportHeight - top1 - import_FloatingPanel.panelViewportPadding);
-    height = Math.min(height, totalContentHeight);
-    height = Math.max(120, height);
+    height1 = Math.min(height1, viewportHeight - top2 - import_FloatingPanel.panelViewportPadding);
+    height1 = Math.min(height1, totalContentHeight);
+    height1 = Math.max(120, height1);
     var availableViewport = viewportHeight - 2 * import_FloatingPanel.panelViewportPadding;
-    if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height < availableViewport) {
+    if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height1 < availableViewport) {
       if (panel.placement.startsWith("top")) {
-        top1 = import_FloatingPanel.panelViewportPadding;
+        top2 = import_FloatingPanel.panelViewportPadding;
       } else {
-        top1 = viewportHeight - import_FloatingPanel.panelViewportPadding - height;
+        top2 = viewportHeight - import_FloatingPanel.panelViewportPadding - height1;
       }
     }
     var cachedOverlayStyle = overlayStyle.current;
-    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top1 - originTop || cachedOverlayStyle.maxHeight !== height) {
-      dropdownElement.style.top = `${top1 - originTop}px`;
-      dropdownElement.style.maxHeight = `${height}px`;
+    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top2 - originTop || cachedOverlayStyle.maxHeight !== height1) {
+      dropdownElement.style.top = `${top2 - originTop}px`;
+      dropdownElement.style.maxHeight = `${height1}px`;
       dropdownElement.style.height = "";
       overlayStyle.current = {
-        top: top1 - originTop,
-        maxHeight: height
+        top: top2 - originTop,
+        maxHeight: height1
       };
       void dropdownElement.offsetHeight;
     }
     if (isInitial1 && selectedIndex >= 0 && !grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
-      var echoHeight = triggerBounds.height;
       var rowBottom = selectedItem.offsetTop + selectedItem.offsetHeight;
-      if (dropUpRef.current) {
-        var maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        var wanted = rowBottom - (dropdownElement.clientHeight - echoHeight);
-        if (wanted > 0) {
-          programmaticScrollRef.current++;
-          dropdownElement.scrollTop = Math.min(wanted, maxScrollTop);
-        }
-      } else if (rowBottom > dropdownElement.clientHeight) {
+      if (rowBottom > dropdownElement.clientHeight) {
         var maxScrollTop1 = dropdownElement.scrollHeight - dropdownElement.clientHeight;
         programmaticScrollRef.current++;
         dropdownElement.scrollTop = Math.max(0, Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop1));
@@ -797,7 +867,7 @@ function FloatingSelectCore(param) {
         });
       }
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length, beside]);
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length, beside, coverScroll, panelWidth]);
   repositionRef.current = repositionOverlay;
   (0, import_react.useLayoutEffect)(function () {
     if (!open || !panel.mounted) return;
@@ -1124,7 +1194,7 @@ function FloatingSelectCore(param) {
               opacity: panel.visible ? 1 : 0,
               transform: panel.visible ? "scale(1)" : "scale(0.96)",
               transition: panel.panelTransition,
-              transformOrigin: dropUp || panel.placement.startsWith("top") ? "bottom left" : "top left",
+              transformOrigin: coverScroll && growsUpRef.current || panel.placement.startsWith("top") ? "bottom left" : "top left",
               ...dragProps.style
             },
             onPointerDown: dragProps.onPointerDown,
@@ -1168,20 +1238,19 @@ function FloatingSelectCore(param) {
           "data-testid": "select-dropdown",
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          children: [!beside && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.TriggerEchoRow, {
+          children: [echoed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.TriggerEchoRow, {
             sourceRef: panel.triggerRef,
             source: (_ref3 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref3 !== void 0 ? _ref3 : placeholder,
             onPress: function onPress() {
               return setOpen(false);
             },
-            presentational: true,
-            edge: dropUp ? "bottom" : "top"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+            presentational: true
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
             direction: "up",
             scrollRef: panel.refs.floating,
             visible: panel.arrowUp,
             arrowScrollDirRef: panel.arrowScrollDirRef,
-            topOffset: dropUp || beside ? 0 : (_ref4 = (_panel_triggerRef_current = panel.triggerRef.current) === null || _panel_triggerRef_current === void 0 ? void 0 : _panel_triggerRef_current.getBoundingClientRect().height) !== null && _ref4 !== void 0 ? _ref4 : 0
+            topOffset: echoed ? (_ref4 = (_panel_triggerRef_current = panel.triggerRef.current) === null || _panel_triggerRef_current === void 0 ? void 0 : _panel_triggerRef_current.getBoundingClientRect().height) !== null && _ref4 !== void 0 ? _ref4 : 0 : 0
           }), groupLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
             paddingHorizontal: knobProps.panelPadding.padding,
@@ -1218,8 +1287,7 @@ function FloatingSelectCore(param) {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
-            arrowScrollDirRef: panel.arrowScrollDirRef,
-            bottomOffset: dropUp ? (_ref5 = (_panel_triggerRef_current1 = panel.triggerRef.current) === null || _panel_triggerRef_current1 === void 0 ? void 0 : _panel_triggerRef_current1.getBoundingClientRect().height) !== null && _ref5 !== void 0 ? _ref5 : 0 : 0
+            arrowScrollDirRef: panel.arrowScrollDirRef
           })]
         })
       })