@multiplatform.one/forms 7.80.0 → 7.81.1

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

@@ -37,6 +37,7 @@ __export(Select_exports, {
 });
 module.exports = __toCommonJS(Select_exports);
 var import_theme = require("@multiplatform.one/theme");
+var import_CheckGlyph = require("../../shared/CheckGlyph.cjs");
 var import_react = require("react");
 var import_react2 = require("@phosphor-icons/react");
 var import_react3 = require("@floating-ui/react");
@@ -364,11 +365,7 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
       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({
@@ -455,38 +452,23 @@ function FloatingSelectCore({
     sortedOptionsRef.current = (0, import_selectedOrder.orderOptionsBySelected)(options, selected, selectedOrder);
   }, [options, value, multiple, selectedOrder]);
   const programmaticScrollRef = (0, import_react.useRef)(0);
-  const pinnedTopRef = (0, import_react.useRef)(0);
-  const pinnedHeightRef = (0, import_react.useRef)(0);
-  const grownRef = (0, import_react.useRef)(false);
-  const growUpOnlyRef = (0, import_react.useRef)(false);
-  const growDownOnlyRef = (0, import_react.useRef)(false);
   const lastScrollTopRef = (0, import_react.useRef)(0);
-  const coverScrollRef = (0, import_react.useRef)(false);
-  const [coverScroll, setCoverScroll] = (0, import_react.useState)(false);
-  const growsUpRef = (0, import_react.useRef)(false);
-  const coverTrimRef = (0, import_react.useRef)(0);
-  const echoed = !beside && !coverScroll;
+  const onFieldRef = (0, import_react.useRef)(null);
+  const opensUpRef = (0, import_react.useRef)(false);
+  const arrowBand = (0, import_floatingList.scrollArrowBand)(knobProps.menuRow.minHeight);
   const repositionRef = (0, import_react.useRef)(null);
   const panel = (0, import_FloatingPanel.useFloatingPanel)({
     open,
     onOpenChange: setOpen,
     disabled,
     repositionRef,
-    wheelGrowRef: selectedIndex >= 0 ? grownRef : void 0,
     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
   });
@@ -549,10 +531,6 @@ function FloatingSelectCore({
     if (!selectedItem) return;
     const isInitial = panel.initializingRef.current;
     if (isInitial) dropdownElement.style.transition = "none";
-    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
-      programmaticScrollRef.current++;
-      dropdownElement.scrollTop = 0;
-    }
     const triggerBounds = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const originTop = (0, import_containingBlock.fixedContainingBlockOrigin)(dropdownElement).top;
@@ -561,126 +539,34 @@ function FloatingSelectCore({
     const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
     const totalBorderWidth = borderTopWidth + borderBottomWidth;
     const scrollContentHeight = dropdownElement.scrollHeight;
-    const totalContentHeight = scrollContentHeight + totalBorderWidth;
-    const firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
-    const boundsTop = import_FloatingPanel.panelViewportPadding;
-    const boundsBottom = viewportHeight - import_FloatingPanel.panelViewportPadding;
-    const echoRow = dropdownElement.querySelector("[data-fp-trigger-row]");
-    const echoHeight = echoRow ? triggerBounds.height : 0;
-    const listHeight = totalContentHeight - echoHeight;
-    const roomBelow = boundsBottom - triggerBounds.top;
-    const roomAbove = triggerBounds.bottom - boundsTop;
-    if (firstPlacement && totalContentHeight > roomBelow) {
-      coverScrollRef.current = true;
-      growsUpRef.current = roomAbove > roomBelow;
-      setCoverScroll(true);
-    }
-    if (coverScrollRef.current) {
-      const grown = grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current;
-      const room = grown ? boundsBottom - boundsTop : growsUpRef.current ? roomAbove : roomBelow;
-      const trim = grown ? 0 : coverTrimRef.current;
-      const height2 = Math.max(0, Math.min(listHeight, room - trim));
-      const anchor = growsUpRef.current ? triggerBounds.bottom - height2 : triggerBounds.top;
-      const top2 = Math.min(Math.max(anchor, boundsTop), boundsBottom - height2);
-      const previousTop = pinnedTopRef.current;
-      if (!overlayStyle.current || overlayStyle.current.top !== top2 - originTop || overlayStyle.current.maxHeight !== height2) {
-        dropdownElement.style.top = `${top2 - originTop}px`;
-        dropdownElement.style.maxHeight = `${height2}px`;
-        dropdownElement.style.height = "";
-        overlayStyle.current = {
-          top: top2 - originTop,
-          maxHeight: height2
-        };
-        void dropdownElement.offsetHeight;
-      }
-      pinnedTopRef.current = top2;
-      pinnedHeightRef.current = height2;
-      if (grown && previousTop > top2 && dropdownElement.scrollTop > 0) {
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.max(0, dropdownElement.scrollTop - (previousTop - top2));
-      }
-      if (echoRow) return;
-      const rowHeight = selectedItem.offsetHeight || 1;
-      if (isInitial && selectedIndex >= 0) {
-        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        let scrollTop;
-        if (growsUpRef.current) {
-          scrollTop = selectedItem.offsetTop + rowHeight - (triggerBounds.bottom - top2);
-        } else {
-          const 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 (isInitial && !grown) {
-        const firstRow = listItemsRef.current[0];
-        const visibleBottom = dropdownElement.scrollTop + dropdownElement.clientHeight;
-        if (firstRow && visibleBottom < dropdownElement.scrollHeight - 2) {
-          const cut = (visibleBottom - firstRow.offsetTop) % rowHeight;
-          if (cut > 3 && cut < rowHeight - 3) {
-            coverTrimRef.current = cut;
-            const trimmedHeight = height2 - cut;
-            const trimmedTop = growsUpRef.current ? top2 + cut : top2;
-            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 (isInitial) dropdownElement.style.transition = panel.panelTransition;
-      requestAnimationFrame(() => {
-        if (dropdownElement) panel.updateArrows(dropdownElement);
+    const boundsTop = import_FloatingPanel.panelViewportPadding + borderTopWidth;
+    const boundsBottom = viewportHeight - import_FloatingPanel.panelViewportPadding - borderBottomWidth;
+    if (!onFieldRef.current) {
+      const 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 (!isInitial) {
+      onFieldRef.current = (0, import_floatingList.growOnScroll)({
+        ...onFieldRef.current,
+        scrollTop: dropdownElement.scrollTop,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom
       });
-      return;
-    }
-    const idealTop = triggerBounds.top;
-    const idealBottom = idealTop + totalContentHeight;
-    const pinnedTop = Math.max(import_FloatingPanel.panelViewportPadding, idealTop);
-    const pinnedBottom = Math.min(viewportHeight - import_FloatingPanel.panelViewportPadding, idealBottom);
-    const pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
-    if (firstPlacement) {
-      pinnedTopRef.current = pinnedTop;
-      pinnedHeightRef.current = pinnedHeight;
-    }
-    let top = pinnedTopRef.current;
-    let height = pinnedHeightRef.current;
-    if (grownRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top + height));
-      height += canGrowDown;
-      const canGrowUp = Math.max(0, top - import_FloatingPanel.panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-    if (growUpOnlyRef.current) {
-      const canGrowUp = Math.max(0, top - import_FloatingPanel.panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-    if (growDownOnlyRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top + height));
-      height += canGrowDown;
-    }
-    height = Math.min(height, viewportHeight - top - import_FloatingPanel.panelViewportPadding);
-    height = Math.min(height, totalContentHeight);
-    height = Math.max(120, height);
-    const availableViewport = viewportHeight - 2 * import_FloatingPanel.panelViewportPadding;
-    if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height < availableViewport) {
-      if (panel.placement.startsWith("top")) {
-        top = import_FloatingPanel.panelViewportPadding;
-      } else {
-        top = viewportHeight - import_FloatingPanel.panelViewportPadding - height;
-      }
     }
-    const cachedOverlayStyle = overlayStyle.current;
-    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top - originTop || cachedOverlayStyle.maxHeight !== height) {
+    const placed = onFieldRef.current;
+    const top = placed.top - borderTopWidth;
+    const height = placed.height + totalBorderWidth;
+    if (!overlayStyle.current || overlayStyle.current.top !== top - originTop || overlayStyle.current.maxHeight !== height) {
       dropdownElement.style.top = `${top - originTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
@@ -690,35 +576,17 @@ function FloatingSelectCore({
       };
       void dropdownElement.offsetHeight;
     }
-    if (isInitial && selectedIndex >= 0 && !grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
-      const rowBottom = selectedItem.offsetTop + selectedItem.offsetHeight;
-      if (rowBottom > dropdownElement.clientHeight) {
-        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.max(0, Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop));
-      }
+    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 (isInitial) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(() => {
-      if (dropdownElement) {
-        panel.updateArrows(dropdownElement);
-        requestAnimationFrame(() => {
-          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)(() => {
     if (!open || !panel.mounted) return;
@@ -886,23 +754,10 @@ function FloatingSelectCore({
       return;
     }
     const 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;
     const 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, {
@@ -1005,7 +860,7 @@ function FloatingSelectCore({
               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,
@@ -1045,17 +900,12 @@ function FloatingSelectCore({
           "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: selectedOption?.label ?? placeholder,
-            onPress: () => 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 ? panel.triggerRef.current?.getBoundingClientRect().height ?? 0 : 0
+            band: arrowBand
           }), groupLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
             paddingHorizontal: knobProps.panelPadding.padding,
@@ -1088,7 +938,8 @@ function FloatingSelectCore({
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
-            arrowScrollDirRef: panel.arrowScrollDirRef
+            arrowScrollDirRef: panel.arrowScrollDirRef,
+            band: arrowBand
           })]
         })
       })
@@ -1116,6 +967,7 @@ function NativeSelectCore({
   const insideOverlay = (0, import_overlayStack.useInsideOverlay)();
   const compactFace = (0, import_compactFace.pickerCompactFace)(options.length);
   const asMenu = (0, import_compactFace.resolveCompactFace)(compactFace, insideOverlay) === "menu";
+  const beside = asMenu && insideOverlay && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length);
   const hydrationTouch = (0, import_theme.useTouchSurface)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
@@ -1166,6 +1018,10 @@ function NativeSelectCore({
       requestAnimationFrame(() => listRef.current?.focus());
     }
   }, [open, selectedIndex]);
+  const [onFieldRow, setOnFieldRow] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!open) setOnFieldRow(null);
+  }, [open]);
   const handleSelect = (0, import_react.useCallback)(optionValue => {
     if (multiple) {
       const current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1276,11 +1132,7 @@ function NativeSelectCore({
           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, {
@@ -1290,6 +1142,14 @@ function NativeSelectCore({
         accessibilityState: {
           selected
         },
+        onLayout: i === Math.max(selectedIndex, 0) ? ({
+          nativeEvent: {
+            layout
+          }
+        }) => setOnFieldRow({
+          top: layout.y,
+          height: layout.height
+        }) : void 0,
         children: row
       }, option.value);
     })]
@@ -1374,10 +1234,14 @@ function NativeSelectCore({
     sheet: true,
     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 ?? fieldA11y?.label,
       value: triggerValueText,