@multiplatform.one/forms 7.80.0 → 7.81.1

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconSlot, useTouchSurface } from "@multiplatform.one/theme";
+import { CheckGlyph } from "../../shared/CheckGlyph.native.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
-import { CaretDownIcon, CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead, FloatingFocusManager } from "@floating-ui/react";
 import { ensureKeyboardModalityTracking, keyboardFocusRingProps, useMenuRowCheckInk, menuRowChecked, menuRowFrame, sizeRecipeForToken, useGlyphColor, wasKeyboardFocus, transitionProps, Text as HouseText } from "@multiplatform.one/theme";
 import * as ReactNative from "react-native";
@@ -16,8 +17,8 @@ import { Input as InputParts, FocusContext } from "../../InputParts/index.native
 import { formCommonColors, formInputColors } from "../../shared/colorRamps.native.js";
 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, TriggerEchoRow, placeEchoOverTrigger, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
+import { growOnScroll, placeCheckedOnField, ScrollArrow, scrollArrowBand } from "../../shared/floatingList.native.js";
+import { FloatingPanel, 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";
@@ -430,11 +431,7 @@ var SelectItem = /* @__PURE__ */memo(function SelectItem2(param) {
       numberOfLines: 1,
       flex: 1,
       children: option.label
-    }), isSelected && /* @__PURE__ */_jsx(CheckIcon, {
-      size: 14,
-      weight: "bold",
-      color: ctx.markColor
-    })]
+    }), isSelected && /* @__PURE__ */_jsx(CheckGlyph, {})]
   });
 });
 function FloatingSelectCore(param) {
@@ -455,8 +452,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 = useOverlayZIndex("dropdown");
   var {
     style: elevatedSurfaceStyle,
@@ -564,38 +561,23 @@ function FloatingSelectCore(param) {
     sortedOptionsRef.current = orderOptionsBySelected(options, selected, selectedOrder);
   }, [options, value, multiple, selectedOrder]);
   var programmaticScrollRef = useRef(0);
-  var pinnedTopRef = useRef(0);
-  var pinnedHeightRef = useRef(0);
-  var grownRef = useRef(false);
-  var growUpOnlyRef = useRef(false);
-  var growDownOnlyRef = useRef(false);
   var lastScrollTopRef = useRef(0);
-  var coverScrollRef = useRef(false);
-  var [coverScroll, setCoverScroll] = useState(false);
-  var growsUpRef = useRef(false);
-  var coverTrimRef = useRef(0);
-  var echoed = !beside && !coverScroll;
+  var onFieldRef = useRef(null);
+  var opensUpRef = useRef(false);
+  var arrowBand = scrollArrowBand(knobProps.menuRow.minHeight);
   var repositionRef = useRef(null);
   var panel = 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
   });
@@ -658,10 +640,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 = fixedContainingBlockOrigin(dropdownElement).top;
@@ -670,164 +648,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 = panelViewportPadding;
-    var boundsBottom = viewportHeight - 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 = panelViewportPadding + borderTopWidth;
+    var boundsBottom = viewportHeight - panelViewportPadding - borderBottomWidth;
+    if (!onFieldRef.current) {
+      var fit = 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 = growOnScroll({
+        ...onFieldRef.current,
+        scrollTop: dropdownElement.scrollTop,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom
       });
-      return;
-    }
-    var idealTop = triggerBounds.top;
-    var idealBottom = idealTop + totalContentHeight;
-    var pinnedTop = Math.max(panelViewportPadding, idealTop);
-    var pinnedBottom = Math.min(viewportHeight - 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 - panelViewportPadding - (top2 + height1));
-      height1 += canGrowDown;
-      var canGrowUp = Math.max(0, top2 - panelViewportPadding);
-      top2 -= canGrowUp;
-      height1 += canGrowUp;
-    }
-    if (growUpOnlyRef.current) {
-      var canGrowUp1 = Math.max(0, top2 - panelViewportPadding);
-      top2 -= canGrowUp1;
-      height1 += canGrowUp1;
-    }
-    if (growDownOnlyRef.current) {
-      var canGrowDown1 = Math.max(0, viewportHeight - panelViewportPadding - (top2 + height1));
-      height1 += canGrowDown1;
-    }
-    height1 = Math.min(height1, viewportHeight - top2 - panelViewportPadding);
-    height1 = Math.min(height1, totalContentHeight);
-    height1 = Math.max(120, height1);
-    var availableViewport = viewportHeight - 2 * panelViewportPadding;
-    if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height1 < availableViewport) {
-      if (panel.placement.startsWith("top")) {
-        top2 = panelViewportPadding;
-      } else {
-        top2 = viewportHeight - 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;
     }
-    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;
   useLayoutEffect(function () {
     if (!open || !panel.mounted) return;
@@ -1021,23 +889,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__ */_jsxs(_Fragment, {
     children: [/* @__PURE__ */_jsxs(InputParts.Box, {
@@ -1154,7 +1009,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,
@@ -1198,19 +1053,12 @@ function FloatingSelectCore(param) {
           "data-testid": "select-dropdown",
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          children: [echoed ? /* @__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
-          }) : null, /* @__PURE__ */_jsx(ScrollArrow, {
+          children: [/* @__PURE__ */_jsx(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__ */_jsx(GroupHeader, {
             color: textColor,
             paddingHorizontal: knobProps.panelPadding.padding,
@@ -1247,7 +1095,8 @@ function FloatingSelectCore(param) {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
-            arrowScrollDirRef: panel.arrowScrollDirRef
+            arrowScrollDirRef: panel.arrowScrollDirRef,
+            band: arrowBand
           })]
         })
       })
@@ -1277,6 +1126,7 @@ function NativeSelectCore(param) {
   var insideOverlay = useInsideOverlay();
   var compactFace = pickerCompactFace(options.length);
   var asMenu = resolveCompactFace(compactFace, insideOverlay) === "menu";
+  var beside = asMenu && insideOverlay && opensBesideTrigger(options.length);
   var hydrationTouch = useTouchSurface();
   var describedBy = useFieldDescribedBy();
   var fieldA11y = useFieldA11y();
@@ -1368,6 +1218,10 @@ function NativeSelectCore(param) {
       });
     }
   }, [open, selectedIndex]);
+  var [onFieldRow, setOnFieldRow] = useState(null);
+  useEffect(function () {
+    if (!open) setOnFieldRow(null);
+  }, [open]);
   var handleSelect = useCallback(function (optionValue) {
     if (multiple) {
       var current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1492,11 +1346,7 @@ function NativeSelectCore(param) {
           numberOfLines: 1,
           flex: 1,
           children: option.label
-        }), selected && /* @__PURE__ */_jsx(CheckIcon, {
-          size: 14,
-          weight: "bold",
-          color: markColor
-        })]
+        }), selected && /* @__PURE__ */_jsx(CheckGlyph, {})]
       }, isWeb ? option.value : void 0);
       if (isWeb) return row;
       return /* @__PURE__ */_jsx(RNPressable, {
@@ -1508,6 +1358,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);
     })]
@@ -1596,10 +1457,14 @@ function NativeSelectCore(param) {
     // sheet at page level and opens as a menu inside another overlay (FZ-7830).
     compactFace,
     panelWidth,
-    ...(asMenu && insideOverlay && opensBesideTrigger(options.length) ? {
+    ...(beside ? {
       anchorMode: "attach",
       triggerEcho: false
-    } : null),
+    } : 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,