@multiplatform.one/forms 7.80.0 → 7.81.1

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

@@ -40,6 +40,7 @@ __export(Select_exports, {
 module.exports = __toCommonJS(Select_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
+var import_CheckGlyph = require("../../shared/CheckGlyph.native.js");
 var import_react = require("react");
 var import_react2 = require("@phosphor-icons/react");
 var import_react3 = require("@floating-ui/react");
@@ -470,11 +471,7 @@ var SelectItem = /* @__PURE__ */(0, import_react.memo)(function SelectItem2(para
       numberOfLines: 1,
       flex: 1,
       children: option.label
-    }), isSelected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-      size: 14,
-      weight: "bold",
-      color: ctx.markColor
-    })]
+    }), isSelected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckGlyph.CheckGlyph, {})]
   });
 });
 function FloatingSelectCore(param) {
@@ -495,8 +492,8 @@ function FloatingSelectCore(param) {
     dismissible,
     panelWidth
   } = param;
-  var _ref, _ref1, _ref2, _panel_x, _ref3, _ref4;
-  var _overlayStyle_current, _panel_triggerRef_current;
+  var _ref, _ref1, _ref2, _panel_x;
+  var _overlayStyle_current;
   var overlayZIndex = (0, import_overlayStack.useOverlayZIndex)("dropdown");
   var {
     style: elevatedSurfaceStyle,
@@ -604,38 +601,23 @@ function FloatingSelectCore(param) {
     sortedOptionsRef.current = (0, import_selectedOrder.orderOptionsBySelected)(options, selected, selectedOrder);
   }, [options, value, multiple, selectedOrder]);
   var programmaticScrollRef = (0, import_react.useRef)(0);
-  var pinnedTopRef = (0, import_react.useRef)(0);
-  var pinnedHeightRef = (0, import_react.useRef)(0);
-  var grownRef = (0, import_react.useRef)(false);
-  var growUpOnlyRef = (0, import_react.useRef)(false);
-  var growDownOnlyRef = (0, import_react.useRef)(false);
   var lastScrollTopRef = (0, import_react.useRef)(0);
-  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 onFieldRef = (0, import_react.useRef)(null);
+  var opensUpRef = (0, import_react.useRef)(false);
+  var arrowBand = (0, import_floatingList.scrollArrowBand)(knobProps.menuRow.minHeight);
   var repositionRef = (0, import_react.useRef)(null);
   var panel = (0, import_FloatingPanel.useFloatingPanel)({
     open,
     onOpenChange: setOpen,
     disabled,
     repositionRef,
-    wheelGrowRef: selectedIndex >= 0 ? grownRef : void 0,
     onBeforeOpen: function onBeforeOpen() {
       computeSortedOptions();
       overlayStyle.current = null;
-      pinnedTopRef.current = 0;
-      pinnedHeightRef.current = 0;
-      grownRef.current = false;
-      growUpOnlyRef.current = false;
-      growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
-      coverScrollRef.current = false;
-      growsUpRef.current = false;
-      coverTrimRef.current = 0;
-      setCoverScroll(false);
+      onFieldRef.current = null;
+      opensUpRef.current = false;
     },
     panelWidth
   });
@@ -698,10 +680,6 @@ function FloatingSelectCore(param) {
     if (!selectedItem) return;
     var isInitial1 = panel.initializingRef.current;
     if (isInitial1) dropdownElement.style.transition = "none";
-    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
-      programmaticScrollRef.current++;
-      dropdownElement.scrollTop = 0;
-    }
     var triggerBounds = trigger.getBoundingClientRect();
     var viewportHeight = window.innerHeight;
     var originTop = (0, import_containingBlock.fixedContainingBlockOrigin)(dropdownElement).top;
@@ -710,164 +688,54 @@ function FloatingSelectCore(param) {
     var borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
     var totalBorderWidth = borderTopWidth + borderBottomWidth;
     var scrollContentHeight = dropdownElement.scrollHeight;
-    var totalContentHeight = scrollContentHeight + totalBorderWidth;
-    var firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
-    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);
+    var boundsTop = import_FloatingPanel.panelViewportPadding + borderTopWidth;
+    var boundsBottom = viewportHeight - import_FloatingPanel.panelViewportPadding - borderBottomWidth;
+    if (!onFieldRef.current) {
+      var fit = (0, import_floatingList.placeCheckedOnField)({
+        fieldTop: triggerBounds.top,
+        fieldBottom: triggerBounds.bottom,
+        rowTop: selectedItem.offsetTop,
+        rowHeight: selectedItem.offsetHeight || 1,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom,
+        band: arrowBand
+      });
+      onFieldRef.current = fit;
+      opensUpRef.current = fit.top + fit.height / 2 < (triggerBounds.top + triggerBounds.bottom) / 2;
+    } else if (!isInitial1) {
+      onFieldRef.current = (0, import_floatingList.growOnScroll)({
+        ...onFieldRef.current,
+        scrollTop: dropdownElement.scrollTop,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom
       });
-      return;
-    }
-    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);
-    if (firstPlacement) {
-      pinnedTopRef.current = pinnedTop;
-      pinnedHeightRef.current = pinnedHeight;
-    }
-    var top2 = pinnedTopRef.current;
-    var height1 = pinnedHeightRef.current;
-    if (grownRef.current) {
-      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, top2 - import_FloatingPanel.panelViewportPadding);
-      top2 -= canGrowUp1;
-      height1 += canGrowUp1;
-    }
-    if (growDownOnlyRef.current) {
-      var canGrowDown1 = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top2 + height1));
-      height1 += canGrowDown1;
-    }
-    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) && height1 < availableViewport) {
-      if (panel.placement.startsWith("top")) {
-        top2 = import_FloatingPanel.panelViewportPadding;
-      } else {
-        top2 = viewportHeight - import_FloatingPanel.panelViewportPadding - height1;
-      }
     }
-    var cachedOverlayStyle = overlayStyle.current;
-    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top2 - originTop || cachedOverlayStyle.maxHeight !== height1) {
-      dropdownElement.style.top = `${top2 - originTop}px`;
-      dropdownElement.style.maxHeight = `${height1}px`;
+    var placed = onFieldRef.current;
+    var top1 = placed.top - borderTopWidth;
+    var height = placed.height + totalBorderWidth;
+    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: top2 - originTop,
-        maxHeight: height1
+        top: top1 - originTop,
+        maxHeight: height
       };
       void dropdownElement.offsetHeight;
     }
-    if (isInitial1 && selectedIndex >= 0 && !grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
-      var rowBottom = selectedItem.offsetTop + selectedItem.offsetHeight;
-      if (rowBottom > dropdownElement.clientHeight) {
-        var maxScrollTop1 = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.max(0, Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop1));
-      }
+    if (Math.abs(dropdownElement.scrollTop - placed.scrollTop) >= 0.5) {
+      programmaticScrollRef.current++;
+      dropdownElement.scrollTop = placed.scrollTop;
     }
-    (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;
     requestAnimationFrame(function () {
-      if (dropdownElement) {
-        panel.updateArrows(dropdownElement);
-        requestAnimationFrame(function () {
-          if (dropdownElement) panel.updateArrows(dropdownElement);
-        });
-      }
+      if (dropdownElement) panel.updateArrows(dropdownElement);
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length, beside, coverScroll, panelWidth]);
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.panelTransition, options.length, beside, arrowBand]);
   repositionRef.current = repositionOverlay;
   (0, import_react.useLayoutEffect)(function () {
     if (!open || !panel.mounted) return;
@@ -1061,23 +929,10 @@ function FloatingSelectCore(param) {
       return;
     }
     var arrowDir = panel.arrowScrollDirRef.current;
-    if (arrowDir) {
-      panel.arrowScrollDirRef.current = null;
-      lastScrollTopRef.current = el.scrollTop;
-      if (arrowDir === "down") {
-        growUpOnlyRef.current = true;
-      } else {
-        growDownOnlyRef.current = true;
-      }
-      repositionOverlay();
-      return;
-    }
+    if (arrowDir) panel.arrowScrollDirRef.current = null;
     var delta = el.scrollTop - lastScrollTopRef.current;
     lastScrollTopRef.current = el.scrollTop;
-    if (delta !== 0) {
-      grownRef.current = true;
-      repositionOverlay();
-    }
+    if (delta !== 0) repositionOverlay();
   }, [panel.updateArrows, repositionOverlay]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
@@ -1194,7 +1049,7 @@ function FloatingSelectCore(param) {
               opacity: panel.visible ? 1 : 0,
               transform: panel.visible ? "scale(1)" : "scale(0.96)",
               transition: panel.panelTransition,
-              transformOrigin: coverScroll && growsUpRef.current || panel.placement.startsWith("top") ? "bottom left" : "top left",
+              transformOrigin: opensUpRef.current ? "bottom left" : "top left",
               ...dragProps.style
             },
             onPointerDown: dragProps.onPointerDown,
@@ -1238,19 +1093,12 @@ function FloatingSelectCore(param) {
           "data-testid": "select-dropdown",
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          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
-          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
             direction: "up",
             scrollRef: panel.refs.floating,
             visible: panel.arrowUp,
             arrowScrollDirRef: panel.arrowScrollDirRef,
-            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
+            band: arrowBand
           }), groupLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
             paddingHorizontal: knobProps.panelPadding.padding,
@@ -1287,7 +1135,8 @@ function FloatingSelectCore(param) {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
-            arrowScrollDirRef: panel.arrowScrollDirRef
+            arrowScrollDirRef: panel.arrowScrollDirRef,
+            band: arrowBand
           })]
         })
       })
@@ -1317,6 +1166,7 @@ function NativeSelectCore(param) {
   var insideOverlay = (0, import_overlayStack.useInsideOverlay)();
   var compactFace = (0, import_compactFace.pickerCompactFace)(options.length);
   var asMenu = (0, import_compactFace.resolveCompactFace)(compactFace, insideOverlay) === "menu";
+  var beside = asMenu && insideOverlay && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length);
   var hydrationTouch = (0, import_theme.useTouchSurface)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
@@ -1408,6 +1258,10 @@ function NativeSelectCore(param) {
       });
     }
   }, [open, selectedIndex]);
+  var [onFieldRow, setOnFieldRow] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(function () {
+    if (!open) setOnFieldRow(null);
+  }, [open]);
   var handleSelect = (0, import_react.useCallback)(function (optionValue) {
     if (multiple) {
       var current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1532,11 +1386,7 @@ function NativeSelectCore(param) {
           numberOfLines: 1,
           flex: 1,
           children: option.label
-        }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-          size: 14,
-          weight: "bold",
-          color: markColor
-        })]
+        }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckGlyph.CheckGlyph, {})]
       }, import_tamagui.isWeb ? option.value : void 0);
       if (import_tamagui.isWeb) return row;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
@@ -1548,6 +1398,17 @@ function NativeSelectCore(param) {
         accessibilityState: {
           selected
         },
+        onLayout: i === Math.max(selectedIndex, 0) ? function (param2) {
+          var {
+            nativeEvent: {
+              layout
+            }
+          } = param2;
+          return setOnFieldRow({
+            top: layout.y,
+            height: layout.height
+          });
+        } : void 0,
         children: row
       }, option.value);
     })]
@@ -1636,10 +1497,14 @@ function NativeSelectCore(param) {
     // sheet at page level and opens as a menu inside another overlay (FZ-7830).
     compactFace,
     panelWidth,
-    ...(asMenu && insideOverlay && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length) ? {
+    ...(beside ? {
       anchorMode: "attach",
       triggerEcho: false
-    } : null),
+    } : import_tamagui.isWeb || displayOptions.length === 0 ? null : {
+      popUp: {
+        row: onFieldRow
+      }
+    }),
     triggerA11y: {
       label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label,
       value: triggerValueText,