@multiplatform.one/forms 7.80.0 → 7.81.1

package/dist/esm/fields/Select/index.mjs

@@ -1,6 +1,7 @@
 import { IconSlot, useTouchSurface } from "@multiplatform.one/theme";
+import { CheckGlyph } from "../../shared/CheckGlyph.mjs";
 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-web";
@@ -15,8 +16,8 @@ import { Input as InputParts, FocusContext } from "../../InputParts/index.mjs";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
 import { warnSelectTooFewOptions } from "../../shared/devWarn.mjs";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
-import { ScrollArrow } from "../../shared/floatingList.mjs";
-import { FloatingPanel, TriggerEchoRow, placeEchoOverTrigger, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
+import { growOnScroll, placeCheckedOnField, ScrollArrow, scrollArrowBand } from "../../shared/floatingList.mjs";
+import { FloatingPanel, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
 import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace.mjs";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal.mjs";
 import { fixedContainingBlockOrigin } from "../../FloatingPanel/containingBlock.mjs";
@@ -326,11 +327,7 @@ const SelectItem = memo(function SelectItem2({
       numberOfLines: 1,
       flex: 1,
       children: option.label
-    }), isSelected && /* @__PURE__ */jsx(CheckIcon, {
-      size: 14,
-      weight: "bold",
-      color: ctx.markColor
-    })]
+    }), isSelected && /* @__PURE__ */jsx(CheckGlyph, {})]
   });
 });
 function FloatingSelectCore({
@@ -417,38 +414,23 @@ function FloatingSelectCore({
     sortedOptionsRef.current = orderOptionsBySelected(options, selected, selectedOrder);
   }, [options, value, multiple, selectedOrder]);
   const programmaticScrollRef = useRef(0);
-  const pinnedTopRef = useRef(0);
-  const pinnedHeightRef = useRef(0);
-  const grownRef = useRef(false);
-  const growUpOnlyRef = useRef(false);
-  const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
-  const coverScrollRef = useRef(false);
-  const [coverScroll, setCoverScroll] = useState(false);
-  const growsUpRef = useRef(false);
-  const coverTrimRef = useRef(0);
-  const echoed = !beside && !coverScroll;
+  const onFieldRef = useRef(null);
+  const opensUpRef = useRef(false);
+  const arrowBand = scrollArrowBand(knobProps.menuRow.minHeight);
   const repositionRef = useRef(null);
   const panel = 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
   });
@@ -511,10 +493,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 = fixedContainingBlockOrigin(dropdownElement).top;
@@ -523,126 +501,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 = panelViewportPadding;
-    const boundsBottom = viewportHeight - 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 = panelViewportPadding + borderTopWidth;
+    const boundsBottom = viewportHeight - panelViewportPadding - borderBottomWidth;
+    if (!onFieldRef.current) {
+      const 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 (!isInitial) {
+      onFieldRef.current = growOnScroll({
+        ...onFieldRef.current,
+        scrollTop: dropdownElement.scrollTop,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom
       });
-      return;
-    }
-    const idealTop = triggerBounds.top;
-    const idealBottom = idealTop + totalContentHeight;
-    const pinnedTop = Math.max(panelViewportPadding, idealTop);
-    const pinnedBottom = Math.min(viewportHeight - 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 - panelViewportPadding - (top + height));
-      height += canGrowDown;
-      const canGrowUp = Math.max(0, top - panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-    if (growUpOnlyRef.current) {
-      const canGrowUp = Math.max(0, top - panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-    if (growDownOnlyRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
-      height += canGrowDown;
-    }
-    height = Math.min(height, viewportHeight - top - panelViewportPadding);
-    height = Math.min(height, totalContentHeight);
-    height = Math.max(120, height);
-    const availableViewport = viewportHeight - 2 * panelViewportPadding;
-    if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height < availableViewport) {
-      if (panel.placement.startsWith("top")) {
-        top = panelViewportPadding;
-      } else {
-        top = viewportHeight - 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 = "";
@@ -652,35 +538,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;
     }
-    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;
   useLayoutEffect(() => {
     if (!open || !panel.mounted) return;
@@ -848,23 +716,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__ */jsxs(Fragment, {
     children: [/* @__PURE__ */jsxs(InputParts.Box, {
@@ -967,7 +822,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,
@@ -1007,17 +862,12 @@ function FloatingSelectCore({
           "data-testid": "select-dropdown",
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          children: [echoed ? /* @__PURE__ */jsx(TriggerEchoRow, {
-            sourceRef: panel.triggerRef,
-            source: selectedOption?.label ?? placeholder,
-            onPress: () => 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 ? panel.triggerRef.current?.getBoundingClientRect().height ?? 0 : 0
+            band: arrowBand
           }), groupLabel && /* @__PURE__ */jsx(GroupHeader, {
             color: textColor,
             paddingHorizontal: knobProps.panelPadding.padding,
@@ -1050,7 +900,8 @@ function FloatingSelectCore({
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
-            arrowScrollDirRef: panel.arrowScrollDirRef
+            arrowScrollDirRef: panel.arrowScrollDirRef,
+            band: arrowBand
           })]
         })
       })
@@ -1078,6 +929,7 @@ function NativeSelectCore({
   const insideOverlay = useInsideOverlay();
   const compactFace = pickerCompactFace(options.length);
   const asMenu = resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const beside = asMenu && insideOverlay && opensBesideTrigger(options.length);
   const hydrationTouch = useTouchSurface();
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -1128,6 +980,10 @@ function NativeSelectCore({
       requestAnimationFrame(() => listRef.current?.focus());
     }
   }, [open, selectedIndex]);
+  const [onFieldRow, setOnFieldRow] = useState(null);
+  useEffect(() => {
+    if (!open) setOnFieldRow(null);
+  }, [open]);
   const handleSelect = useCallback(optionValue => {
     if (multiple) {
       const current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1238,11 +1094,7 @@ function NativeSelectCore({
           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, {
@@ -1252,6 +1104,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);
     })]
@@ -1336,10 +1196,14 @@ function NativeSelectCore({
     sheet: true,
     compactFace,
     panelWidth,
-    ...(asMenu && insideOverlay && opensBesideTrigger(options.length) ? {
+    ...(beside ? {
       anchorMode: "attach",
       triggerEcho: false
-    } : null),
+    } : isWeb || displayOptions.length === 0 ? null : {
+      popUp: {
+        row: onFieldRow
+      }
+    }),
     triggerA11y: {
       label: ariaLabel ?? fieldA11y?.label,
       value: triggerValueText,