@multiplatform.one/forms 7.71.0 → 7.72.0

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

@@ -47,16 +47,16 @@ var import_theme2 = require("@multiplatform.one/theme");
 var ReactNative = __toESM(require("react-native"));
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
-var import_Chip = require("../../Chip");
+var import_Chip = require("../../Chip/index.native.js");
 var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.native.js");
-var import_Skeleton = require("../../Skeleton");
+var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
-var import_InputParts = require("../../InputParts");
+var import_InputParts = require("../../InputParts/index.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_devWarn = require("../../shared/devWarn.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_floatingList = require("../../shared/floatingList.native.js");
-var import_FloatingPanel = require("../../FloatingPanel");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
 var import_compactFace = require("../../FloatingPanel/compactFace.native.js");
 var import_PanelPortal = require("../../FloatingPanel/PanelPortal.native.js");
 var import_containingBlock = require("../../FloatingPanel/containingBlock.native.js");
@@ -479,10 +479,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 = (0, import_overlayStack.useOverlayZIndex)("dropdown");
   var {
     style: elevatedSurfaceStyle,
@@ -595,6 +596,8 @@ 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 repositionRef = (0, import_react.useRef)(null);
   var panel = (0, import_FloatingPanel.useFloatingPanel)({
     open,
@@ -612,7 +615,9 @@ function FloatingSelectCore(param) {
       growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
-    }
+      dropUpRef.current = false;
+    },
+    panelWidth
   });
   var {
     scrollRef: dragScrollRef,
@@ -679,33 +684,33 @@ function FloatingSelectCore(param) {
     }
     var triggerBounds = trigger.getBoundingClientRect();
     var viewportHeight = window.innerHeight;
+    var originTop = (0, import_containingBlock.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 - import_FloatingPanel.panelViewportPadding - triggerBounds.top;
+    var roomAbove = triggerBounds.bottom - import_FloatingPanel.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(import_FloatingPanel.panelViewportPadding, idealTop);
     var pinnedBottom = Math.min(viewportHeight - import_FloatingPanel.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 - import_FloatingPanel.panelViewportPadding - (top1 + height));
+      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;
@@ -716,7 +721,7 @@ function FloatingSelectCore(param) {
       top1 -= canGrowUp1;
       height += canGrowUp1;
     }
-    if (growDownOnlyRef.current) {
+    if (growDownOnlyRef.current && !dropUpRef.current) {
       var canGrowDown1 = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top1 + height));
       height += canGrowDown1;
     }
@@ -732,40 +737,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(import_FloatingPanel.panelViewportPadding, top1);
-          var remainingContentHeight = totalContentHeight - clampedScrollTop;
-          var adjustedMaxHeight = Math.min(remainingContentHeight, viewportHeight - top1 - import_FloatingPanel.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));
       }
     }
+    (0, import_FloatingPanel.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;
@@ -782,7 +788,7 @@ function FloatingSelectCore(param) {
   (0, import_react.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 = (0, import_react.useCallback)(function (index) {
     if (open) {
       setActiveIndex(index);
@@ -1103,7 +1109,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,
@@ -1146,11 +1152,21 @@ function FloatingSelectCore(param) {
           borderRadius: panel.dropdownRadius,
           "data-testid": "select-dropdown",
           paddingVertical: 0,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+          paddingBottom: panel.coverCornerInset || 0,
+          children: [!beside && /* @__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, {
             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__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
             paddingHorizontal: knobProps.panelPadding.padding,
@@ -1187,7 +1203,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
           })]
         })
       })
@@ -1210,7 +1227,8 @@ function NativeSelectCore(param) {
     multiple,
     selectedOrder,
     dismissible,
-    native
+    native,
+    panelWidth
   } = param;
   var _ref, _ref1, _ref2;
   var insideOverlay = (0, import_overlayStack.useInsideOverlay)();
@@ -1533,6 +1551,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 && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length) ? {
       anchorMode: "attach",
       triggerEcho: false
@@ -1671,6 +1690,7 @@ function Select(param) {
     dismissible,
     skeleton,
     native,
+    panelWidth,
     "aria-label": ariaLabel,
     ...rest
   } = param;
@@ -1708,7 +1728,8 @@ function Select(param) {
   var pushed = !inline && !inTableCell && Boolean(rowLabel) && (0, import_shouldInlineChoices.shouldPushChoices)({
     inSheet: Boolean(sheetNavigation),
     multiple,
-    options
+    options,
+    panelWidth
   });
   if (!inline) {
     var _ref1;
@@ -1836,7 +1857,8 @@ function Select(param) {
       multiple,
       selectedOrder,
       dismissible,
-      native
+      native,
+      panelWidth
     });
   };
   if (!resolvedForm || !name) {