@multiplatform.one/forms 7.71.0 → 7.72.0

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

@@ -16,7 +16,7 @@ import { formCommonColors, formInputColors } from "../../shared/colorRamps.nativ
 import { warnSelectTooFewOptions } from "../../shared/devWarn.native.js";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { ScrollArrow } from "../../shared/floatingList.native.js";
-import { FloatingPanel, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
+import { FloatingPanel, TriggerEchoRow, placeEchoOverTrigger, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
 import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace.native.js";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal.native.js";
 import { fixedContainingBlockOrigin } from "../../FloatingPanel/containingBlock.native.js";
@@ -439,10 +439,11 @@ function FloatingSelectCore(param) {
     groupLabel,
     multiple,
     selectedOrder,
-    dismissible
+    dismissible,
+    panelWidth
   } = param;
-  var _ref, _ref1, _ref2, _panel_x;
-  var _overlayStyle_current;
+  var _ref, _ref1, _ref2, _panel_x, _ref3, _ref4, _ref5;
+  var _overlayStyle_current, _panel_triggerRef_current, _panel_triggerRef_current1;
   var overlayZIndex = useOverlayZIndex("dropdown");
   var {
     style: elevatedSurfaceStyle,
@@ -555,6 +556,8 @@ function FloatingSelectCore(param) {
   var growUpOnlyRef = useRef(false);
   var growDownOnlyRef = useRef(false);
   var lastScrollTopRef = useRef(0);
+  var dropUpRef = useRef(false);
+  var [dropUp, setDropUp] = useState(false);
   var repositionRef = useRef(null);
   var panel = useFloatingPanel({
     open,
@@ -572,7 +575,9 @@ function FloatingSelectCore(param) {
       growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
-    }
+      dropUpRef.current = false;
+    },
+    panelWidth
   });
   var {
     scrollRef: dragScrollRef,
@@ -639,33 +644,33 @@ function FloatingSelectCore(param) {
     }
     var triggerBounds = trigger.getBoundingClientRect();
     var viewportHeight = window.innerHeight;
+    var originTop = fixedContainingBlockOrigin(dropdownElement).top;
     var computedStyle = getComputedStyle(dropdownElement);
     var borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;
     var borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
     var totalBorderWidth = borderTopWidth + borderBottomWidth;
     var scrollContentHeight = dropdownElement.scrollHeight;
     var totalContentHeight = scrollContentHeight + totalBorderWidth;
-    var idealTop;
-    if (selectedIndex >= 0) {
-      idealTop = triggerBounds.top - selectedItem.offsetTop;
-    } else if (panel.placement.startsWith("top")) {
-      idealTop = triggerBounds.bottom - totalContentHeight;
-    } else {
-      var _selectedItem_offsetTop;
-      idealTop = triggerBounds.top - ((_selectedItem_offsetTop = selectedItem.offsetTop) !== null && _selectedItem_offsetTop !== void 0 ? _selectedItem_offsetTop : 0);
+    var firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
+    var roomBelow = viewportHeight - panelViewportPadding - triggerBounds.top;
+    var roomAbove = triggerBounds.bottom - panelViewportPadding;
+    if (firstPlacement) {
+      dropUpRef.current = totalContentHeight > roomBelow && roomAbove > roomBelow;
+      setDropUp(dropUpRef.current);
     }
-    var idealBottom = idealTop + totalContentHeight;
+    var idealTop = dropUpRef.current ? triggerBounds.bottom - totalContentHeight : triggerBounds.top;
+    var idealBottom = dropUpRef.current ? triggerBounds.bottom : idealTop + totalContentHeight;
     var pinnedTop = Math.max(panelViewportPadding, idealTop);
     var pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
     var pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
-    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
+    if (firstPlacement) {
       pinnedTopRef.current = pinnedTop;
       pinnedHeightRef.current = pinnedHeight;
     }
     var top1 = pinnedTopRef.current;
     var height = pinnedHeightRef.current;
     if (grownRef.current) {
-      var canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top1 + height));
+      var canGrowDown = dropUpRef.current ? 0 : Math.max(0, viewportHeight - panelViewportPadding - (top1 + height));
       height += canGrowDown;
       var canGrowUp = Math.max(0, top1 - panelViewportPadding);
       top1 -= canGrowUp;
@@ -676,7 +681,7 @@ function FloatingSelectCore(param) {
       top1 -= canGrowUp1;
       height += canGrowUp1;
     }
-    if (growDownOnlyRef.current) {
+    if (growDownOnlyRef.current && !dropUpRef.current) {
       var canGrowDown1 = Math.max(0, viewportHeight - panelViewportPadding - (top1 + height));
       height += canGrowDown1;
     }
@@ -692,40 +697,41 @@ function FloatingSelectCore(param) {
       }
     }
     var cachedOverlayStyle = overlayStyle.current;
-    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top1 || cachedOverlayStyle.maxHeight !== height) {
-      dropdownElement.style.top = `${top1}px`;
+    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top1 - originTop || cachedOverlayStyle.maxHeight !== height) {
+      dropdownElement.style.top = `${top1 - originTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
       overlayStyle.current = {
-        top: top1,
+        top: top1 - originTop,
         maxHeight: height
       };
       void dropdownElement.offsetHeight;
     }
-    if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
-      var maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-      if (selectedIndex >= 0) {
-        var neededScroll = top1 + selectedItem.offsetTop - triggerBounds.top;
-        var clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
-        if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
+    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 = clampedScrollTop;
-        }
-        if (Math.abs(neededScroll - clampedScrollTop) > 0.5) {
-          var scrollDeficit = neededScroll - clampedScrollTop;
-          top1 -= scrollDeficit;
-          top1 = Math.max(panelViewportPadding, top1);
-          var remainingContentHeight = totalContentHeight - clampedScrollTop;
-          var adjustedMaxHeight = Math.min(remainingContentHeight, viewportHeight - top1 - panelViewportPadding);
-          dropdownElement.style.top = `${top1}px`;
-          dropdownElement.style.maxHeight = `${adjustedMaxHeight}px`;
-          overlayStyle.current = {
-            top: top1,
-            maxHeight: adjustedMaxHeight
-          };
+          dropdownElement.scrollTop = Math.min(wanted, maxScrollTop);
         }
+      } else if (rowBottom > dropdownElement.clientHeight) {
+        var maxScrollTop1 = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+        programmaticScrollRef.current++;
+        dropdownElement.scrollTop = Math.max(0, Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop1));
       }
     }
+    placeEchoOverTrigger(dropdownElement, {
+      triggerLeft: triggerBounds.left,
+      triggerRight: triggerBounds.right,
+      panelLeft: dropdownElement.getBoundingClientRect().left,
+      panelWidth: dropdownElement.offsetWidth,
+      rtl: getComputedStyle(trigger).direction === "rtl"
+    }, {
+      stretch: panelWidth !== void 0
+    });
     panel.initializingRef.current = false;
     void dropdownElement.offsetHeight;
     if (isInitial1) dropdownElement.style.transition = panel.panelTransition;
@@ -742,7 +748,7 @@ function FloatingSelectCore(param) {
   useLayoutEffect(function () {
     if (!open || !panel.mounted) return;
     repositionOverlay();
-  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.y]);
+  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.x, panel.y]);
   var onMatch = useCallback(function (index) {
     if (open) {
       setActiveIndex(index);
@@ -1063,7 +1069,7 @@ function FloatingSelectCore(param) {
               opacity: panel.visible ? 1 : 0,
               transform: panel.visible ? "scale(1)" : "scale(0.96)",
               transition: panel.panelTransition,
-              transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+              transformOrigin: dropUp || panel.placement.startsWith("top") ? "bottom left" : "top left",
               ...dragProps.style
             },
             onPointerDown: dragProps.onPointerDown,
@@ -1106,11 +1112,21 @@ function FloatingSelectCore(param) {
           borderRadius: panel.dropdownRadius,
           "data-testid": "select-dropdown",
           paddingVertical: 0,
-          children: [/* @__PURE__ */_jsx(ScrollArrow, {
+          paddingBottom: panel.coverCornerInset || 0,
+          children: [!beside && /* @__PURE__ */_jsx(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__ */_jsx(ScrollArrow, {
             direction: "up",
             scrollRef: panel.refs.floating,
             visible: panel.arrowUp,
-            arrowScrollDirRef: panel.arrowScrollDirRef
+            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
           }), groupLabel && /* @__PURE__ */_jsx(GroupHeader, {
             color: textColor,
             paddingHorizontal: knobProps.panelPadding.padding,
@@ -1147,7 +1163,8 @@ function FloatingSelectCore(param) {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
-            arrowScrollDirRef: panel.arrowScrollDirRef
+            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
           })]
         })
       })
@@ -1170,7 +1187,8 @@ function NativeSelectCore(param) {
     multiple,
     selectedOrder,
     dismissible,
-    native
+    native,
+    panelWidth
   } = param;
   var _ref, _ref1, _ref2;
   var insideOverlay = useInsideOverlay();
@@ -1493,6 +1511,7 @@ function NativeSelectCore(param) {
     // A short list opens as a menu over its trigger; a long one keeps its
     // sheet at page level and opens as a menu inside another overlay (FZ-7830).
     compactFace,
+    panelWidth,
     ...(asMenu && insideOverlay && opensBesideTrigger(options.length) ? {
       anchorMode: "attach",
       triggerEcho: false
@@ -1631,6 +1650,7 @@ function Select(param) {
     dismissible,
     skeleton,
     native,
+    panelWidth,
     "aria-label": ariaLabel,
     ...rest
   } = param;
@@ -1668,7 +1688,8 @@ function Select(param) {
   var pushed = !inline && !inTableCell && Boolean(rowLabel) && shouldPushChoices({
     inSheet: Boolean(sheetNavigation),
     multiple,
-    options
+    options,
+    panelWidth
   });
   if (!inline) {
     var _ref1;
@@ -1796,7 +1817,8 @@ function Select(param) {
       multiple,
       selectedOrder,
       dismissible,
-      native
+      native,
+      panelWidth
     });
   };
   if (!resolvedForm || !name) {