@trackunit/react-form-components 2.6.59 → 2.6.61

package/index.cjs.js

@@ -1653,7 +1653,10 @@ const cvaSelectMenu = cssClassVarianceUtilities.cva({
         placement: "bottom",
     },
 });
-const cvaSelectMenuList = cssClassVarianceUtilities.cva({ base: [reactComponents.cvaMenuList(), "relative", "w-full"] });
+// `overscroll-contain`: react-select's `captureMenuScroll` defaults to off on touch devices, so
+// without this a scroll at the list's top/bottom chains to the container behind the menu, moving
+// the control and dragging the anchored menu with it.
+const cvaSelectMenuList = cssClassVarianceUtilities.cva({ base: [reactComponents.cvaMenuList(), "relative", "w-full", "overscroll-contain"] });
 const cvaSelectPlaceholder = cssClassVarianceUtilities.cva({ base: ["absolute", "text-neutral-400"] });
 const cvaSelectIndicatorsContainer = cssClassVarianceUtilities.cva({ base: ["flex", "items-center", "gap-x-1"] });
 const cvaSelectMultiValue = cssClassVarianceUtilities.cva({
@@ -2387,6 +2390,20 @@ const getVisibleCountFromGeometries = ({ geometries, availableWidth, containerX,
     return visibleCount;
 };
 
+// Chrome can report a fractional `scrollTop` at the physical bottom, so an exact
+// `>= scrollHeight` check never matches there.
+const BOTTOM_SCROLL_TOLERANCE_PX = 1;
+const MENU_VERTICAL_BORDER_CHROME_PX = 2;
+const DEFAULT_REACT_SELECT_MIN_MENU_HEIGHT_PX = 140;
+/**
+ * `useSelect` deliberately leaves `minMenuHeight` unset so react-select keeps owning the menu's
+ * placement policy, which means the effective value comes from the library's own
+ * `defaultProps.minMenuHeight`. react-select's types declare the prop as required for that
+ * reason, but nothing guarantees it at runtime -- and interpolating an absent value into CSS
+ * emits `undefinedpx`, which makes browsers discard the whole `max-height` declaration. The
+ * optional parameter is what lets the fallback be expressed despite the required type.
+ */
+const resolveMinMenuHeight = (minMenuHeight) => minMenuHeight ?? DEFAULT_REACT_SELECT_MIN_MENU_HEIGHT_PX;
 /**
  * A hook to retrieve components override object.
  * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
@@ -2399,7 +2416,7 @@ const getVisibleCountFromGeometries = ({ geometries, availableWidth, containerX,
  */
 const useCustomComponents = ({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize = "medium", getOptionLabelDescription, getOptionPrefix, className, isMulti, //prefer using the component prop (ala. selectValueContainer.isMulti) inside of customComponents instead of this one.
 autoComplete, // see https://github.com/JedWatson/react-select/issues/758
-formatOptionLabel, getMenuGeometry, }) => {
+formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) => {
     const [t] = useTranslation();
     const { setValueContainerRef, setCounterRef, setFakeCounterRef, setGeometryRef, setMenuRef, getVisibleCount, getTotalCount, getCounterWidth, getIsComplete, } = useMultiValueOverflow({ skip: !isMulti });
     const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
@@ -2413,6 +2430,16 @@ formatOptionLabel, getMenuGeometry, }) => {
     getOptionLabelDescriptionRef.current = getOptionLabelDescription;
     const getOptionPrefixRef = react.useRef(getOptionPrefix);
     getOptionPrefixRef.current = getOptionPrefix;
+    const onMenuScrollToBottomRef = react.useRef(onMenuScrollToBottom);
+    onMenuScrollToBottomRef.current = onMenuScrollToBottom;
+    // Keep react-select's control ref intact while retaining the live DOM node for viewport-relative
+    // vertical measurements that can change without changing an absolute portal's document offset.
+    const controlRef = react.useRef(null);
+    // The list keeps firing `scroll` while resting at the bottom, so only an arrival there may
+    // notify. `scrollHeight` is part of the latched identity because appending a page grows the list
+    // without emitting a scroll event, and a latch measured against the old height must not suppress
+    // the arrival at the new bottom.
+    const atBottomRef = react.useRef(null);
     const resolveOptionPrefixRef = react.useRef(undefined);
     if (resolveOptionPrefixRef.current === undefined) {
         resolveOptionPrefixRef.current = (data) => getOptionPrefixRef.current?.(data);
@@ -2443,7 +2470,7 @@ formatOptionLabel, getMenuGeometry, }) => {
                                 esToolkit.omit(selectControl.innerProps, ["onMouseDown", "onTouchEnd"])
                             : selectControl.innerProps),
                         ...(dataTestId ? { "data-testid": `${dataTestId}-control` } : {}),
-                    }, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, selectControl.children, typeof disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-disabled-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...disabled }) })) : null, typeof readOnly === "object" && !Boolean(disabled) ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-readonly-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...readOnly }) })) : null] }));
+                    }, innerRef: reactComponents.useMergeRefs([controlRef, selectControl.innerRef]), children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, selectControl.children, typeof disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-disabled-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...disabled }) })) : null, typeof readOnly === "object" && !Boolean(disabled) ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-readonly-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...readOnly }) })) : null] }));
             },
             Placeholder: selectPlaceholder => {
                 return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...selectPlaceholder, className: cvaSelectPlaceholder({ className: selectPlaceholder.className }), getStyles: getNoStyles, children: selectPlaceholder.children }));
@@ -2513,10 +2540,12 @@ formatOptionLabel, getMenuGeometry, }) => {
                         }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefixRef.current ? resolveOptionPrefixRef.current : undefined, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
             },
             Menu: selectMenu => {
+                const geometry = getMenuGeometry();
+                const controlRect = controlRef.current?.getBoundingClientRect();
                 return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
                         ...selectMenu.innerProps,
                         ...(dataTestId ? { "data-testid": `${dataTestId}-menu` } : {}),
-                        style: getMenuGeometryStyle(getMenuGeometry()),
+                        style: getMenuGeometryStyle(geometry, controlRect, selectMenu.placement),
                     }, 
                     // `innerRef` (not `innerProps.ref`) is the actual DOM ref react-select's `MenuPlacer` reads
                     // to measure available space and decide whether to flip the menu open upward -- merging our
@@ -2533,23 +2562,36 @@ formatOptionLabel, getMenuGeometry, }) => {
                     }, children: selectMenuPortal.children }));
             },
             MenuList: selectMenuList => {
+                const minMenuHeight = resolveMinMenuHeight(selectMenuList.selectProps.minMenuHeight);
                 return (jsxRuntime.jsx(ReactSelect.components.MenuList, { className: cvaSelectMenuList({
                         className: selectMenuList.className,
                     }), ...selectMenuList, getStyles: getNoStyles, innerProps: {
                         ...selectMenuList.innerProps,
+                        style: {
+                            ...selectMenuList.innerProps.style,
+                            // MenuPlacer may loosen its result when a later pass measures an already-constrained
+                            // menu. The inherited available-space bound is independent of that measured height;
+                            // react-select still owns which side opens and its effective minimum. Flooring only
+                            // the available-space term preserves that minimum as the last resort (allowing slight
+                            // viewport overflow) without changing normally constrained MenuPlacer heights.
+                            maxHeight: `min(${selectMenuList.maxHeight}px, max(var(--select-menu-available-height, 100dvh), ${minMenuHeight}px), max(40dvh, var(--spacing-64)))`,
+                        },
                         onScroll: e => {
                             const listEl = e.currentTarget;
-                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight &&
-                                selectMenuList.selectProps.onMenuScrollToBottom) {
-                                if (/Firefox/.test(navigator.userAgent)) {
-                                    selectMenuList.selectProps.onMenuScrollToBottom(new WheelEvent("scroll"));
-                                }
-                                else {
-                                    selectMenuList.selectProps.onMenuScrollToBottom(new TouchEvent(""));
-                                }
+                            const scrollHeight = listEl.scrollHeight;
+                            const atBottom = listEl.scrollTop + listEl.clientHeight >= scrollHeight - BOTTOM_SCROLL_TOLERANCE_PX;
+                            const previous = atBottomRef.current;
+                            const wasAtBottom = previous?.listEl === listEl && previous.atBottom && previous.scrollHeight === scrollHeight;
+                            atBottomRef.current = { listEl, atBottom, scrollHeight };
+                            if (atBottom && !wasAtBottom) {
+                                // Desktop Safari never defines `TouchEvent`, so constructing one there throws.
+                                onMenuScrollToBottomRef.current?.(new WheelEvent("scroll"));
                             }
                         },
-                    }, children: selectMenuList.children }));
+                    }, 
+                    // Same trap as `Menu` above: `innerProps` is applied after `innerRef`, so passing a ref
+                    // through it would replace react-select's own list ref.
+                    innerRef: reactComponents.useMergeRefs([setMenuListRef, selectMenuList.innerRef]), children: selectMenuList.children }));
             },
             Option: selectOption => {
                 const componentProps = {
@@ -2591,6 +2633,7 @@ formatOptionLabel, getMenuGeometry, }) => {
         setGeometryRef,
         setMenuRef,
         getMenuGeometry,
+        setMenuListRef,
     ]);
     return customComponents;
 };
@@ -2598,21 +2641,30 @@ const getNoStyles = () => {
     // To prevent the default styles from being applied from react-select.
     return {};
 };
-/**
- * Translates the computed geometry into the menu's positioning/sizing inline style: grows/shrinks
- * to fit content between `minWidth` (the control's own width) and `maxWidth` (the available space
- * on the anchored side), flipping to right-aligned ("poking out" left of the control) when needed.
- */
-const getMenuGeometryStyle = (geometry) => {
-    if (!geometry) {
+const getMenuGeometryStyle = (geometry, controlRect, placement) => {
+    const controlEdge = placement === "bottom"
+        ? (controlRect?.bottom ?? geometry?.controlBottom)
+        : (controlRect?.top ?? geometry?.controlTop);
+    if (!geometry && controlEdge === undefined) {
         return undefined;
     }
-    return {
-        left: geometry.alignRight ? undefined : 0,
-        right: geometry.alignRight ? 0 : undefined,
-        minWidth: geometry.minWidth,
-        maxWidth: geometry.maxWidth,
+    const style = {
+        left: geometry?.alignRight === false ? 0 : undefined,
+        right: geometry?.alignRight === true ? 0 : undefined,
+        minWidth: geometry?.minWidth,
+        maxWidth: geometry?.maxWidth,
     };
+    // The gap the chosen side leaves between the control and the viewport edge, measured from the
+    // control's own viewport coordinates (never react-select's portal `offset`, which carries the
+    // document scroll for non-fixed menus). `dvh` keeps the bound live as mobile browser chrome
+    // shows/hides, without duplicating the design ceiling or the flip policy in JS.
+    if (controlEdge !== undefined) {
+        style["--select-menu-available-height"] =
+            placement === "bottom"
+                ? `calc(100dvh - ${controlEdge}px - var(--spacing-1) - ${MENU_VERTICAL_BORDER_CHROME_PX}px)`
+                : `calc(${controlEdge}px - var(--spacing-1) - ${MENU_VERTICAL_BORDER_CHROME_PX}px)`;
+    }
+    return style;
 };
 const getInputComponent = (children) => {
     return Array.isArray(children)
@@ -2636,7 +2688,8 @@ const getPlaceholderElement = (children) => {
 // dropdown keeps the same edge gap as other floating design-system elements.
 const EDGE_PADDING = 12;
 /**
- * Derives the dropdown's alignment/sizing from the control's rect and the viewport:
+ * Derives the dropdown's horizontal alignment/sizing from the control's rect and carries the
+ * control's vertical edges for the separate viewport-height bound:
  * - flips to right-aligned ("poking out" left of the control) only when the control no
  *   longer fits to the right AND flipping actually buys more room
  * - the width ceiling on the anchored side (bounded by the viewport edge, minus padding)
@@ -2660,6 +2713,8 @@ const computeMenuGeometry = (rect) => {
         alignRight,
         minWidth: rect.width,
         maxWidth: alignRight ? spaceLeft : spaceRight,
+        ...(rect.top === undefined ? {} : { controlTop: rect.top }),
+        ...(rect.bottom === undefined ? {} : { controlBottom: rect.bottom }),
     };
 };
 
@@ -2674,15 +2729,13 @@ const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
  * (e.g. scrolling the modal/drawer/page the select sits in without closing the menu). A menu that
  * correctly opened "up" (or "down") can end up clipped once the layout around it moves.
  *
- * `useSelect.ts` feeds the returned `tick` into `maxMenuHeight` -- the one prop in that dependency
- * list safe to toggle purely to force a fresh measurement, with no other side effect: the
- * resulting `maxHeight` react-select computes is never consumed on our end (the custom
- * `Menu`/`MenuList` in useCustomComponents.tsx disable react-select's per-slot styling via
- * `getStyles={getNoStyles}` and constrain height with Tailwind's `cvaMenuList` instead) -- only
- * the *change* in value, not the value itself, matters. `minMenuHeight` must stay untouched:
- * passing any finite number there (instead of `undefined`) would make react-select treat "the
- * menu barely fits, if constrained" as true almost everywhere, short-circuiting past the actual
- * flip check.
+ * `useSelect.ts` uses the returned `tick` to alternate `maxMenuHeight` by one pixel around the
+ * viewport height -- the one prop in that dependency list safe to toggle purely to force a fresh
+ * measurement. The custom `MenuList` consumes react-select's computed result and combines it with
+ * the design-system ceiling in CSS, so `maxMenuHeight` must stay a real viewport-scale height.
+ * `minMenuHeight` must stay unset: leaving the wrapper prop `undefined` lets react-select apply
+ * its own `defaultProps.minMenuHeight` (140px at runtime today), so the library stays the owner
+ * of the flip policy and that effective value -- not this wrapper -- defines the boundary.
  *
  * Deliberately a trailing *debounce*, not a per-frame (rAF) throttle: `resize` (and, to a lesser
  * extent, `scroll`) fires continuously while the user is actively dragging, so a control that
@@ -2690,16 +2743,34 @@ const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
  * flip decision -- and therefore the whole menu -- recomputed and visibly toggle top/bottom on
  * practically every frame of the drag. Waiting until the gesture actually settles means the menu
  * still only flips (at most) once, to whatever's correct for the final size/position.
+ *
+ * `setMenuListRef` must be wired to the rendered MenuList's DOM node so scrolling the dropdown's
+ * own option list can be told apart from the surrounding layout moving.
  */
 const useMenuPlacementRecompute = () => {
     const [tick, setTick] = react.useState(0);
     const cleanupRef = react.useRef(null);
+    const menuListRef = react.useRef(null);
+    const setMenuListRef = react.useCallback(element => {
+        menuListRef.current = element;
+    }, []);
     const onMenuOpen = react.useCallback(() => {
         if (cleanupRef.current) {
             return; // already watching
         }
+        // Refresh maxMenuHeight immediately on each arrival. Resize events are intentionally ignored
+        // while closed, so without this bump a menu opened after such a resize could reuse a viewport
+        // height memoized before the resize.
+        setTick(previousTick => previousTick + 1);
         let timeoutId = null;
-        const handleReposition = () => {
+        const handleReposition = (event) => {
+            // Scrolling the dropdown's own option list doesn't move the control, and recomputing on it
+            // is harmful: `MenuPlacer` measures the space below the menu *where it currently sits*, so a
+            // menu already flipped up has room "below", flips down, and toggles on the next scroll.
+            const target = event?.target;
+            if (target instanceof Node && menuListRef.current?.contains(target) === true) {
+                return;
+            }
             if (timeoutId !== null) {
                 clearTimeout(timeoutId);
             }
@@ -2727,7 +2798,7 @@ const useMenuPlacementRecompute = () => {
     }, []);
     // Stop watching if the component unmounts while the menu is still open.
     react.useEffect(() => onMenuClose, [onMenuClose]);
-    return react.useMemo(() => ({ tick, onMenuOpen, onMenuClose }), [tick, onMenuOpen, onMenuClose]);
+    return react.useMemo(() => ({ tick, onMenuOpen, onMenuClose, setMenuListRef }), [tick, onMenuOpen, onMenuClose, setMenuListRef]);
 };
 
 /**
@@ -2776,6 +2847,17 @@ const useSelect = (props) => {
         },
     }), []);
     const getMenuGeometry = react.useCallback(() => menuGeometryRef.current, []);
+    // Forces react-select to redo its up/down flip decision on scroll/resize while the menu stays
+    // open -- see useMenuPlacementRecompute's own comment for why this is otherwise stuck at the
+    // decision made when the menu was first opened. `onMenuOpen`/`onMenuClose`/`setMenuListRef` are
+    // stable (useCallback with no deps), so destructuring them here doesn't affect handleMenuOpen/
+    // handleMenuClose's own stability below -- only `tick` (a primitive) is expected to change.
+    const { tick: menuPlacementRecomputeTick, onMenuOpen: startMenuRepositionWatcher, onMenuClose: stopMenuRepositionWatcher, setMenuListRef, } = useMenuPlacementRecompute();
+    // Read on every useSelect render rather than inside the final useMemo: opening bumps the tick,
+    // so a viewport resize that happened while the menu was closed cannot leave this value stale.
+    // The alternating pixel only re-triggers MenuPlacer; the rendered MenuList retains the exact
+    // design-system ceiling in CSS and combines it with MenuPlacer's computed result.
+    const maxMenuHeight = window.innerHeight + (menuPlacementRecomputeTick % 2);
     const customComponents = useCustomComponents({
         disabled, // intentionally not evaluated as boolean, since it can be object too!
         readOnly: readOnly ?? false, // intentionally not evaluated as boolean, since it can be object too!
@@ -2789,7 +2871,9 @@ const useSelect = (props) => {
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,
         formatOptionLabel,
+        onMenuScrollToBottom,
         getMenuGeometry,
+        setMenuListRef,
     });
     const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu
@@ -2797,12 +2881,6 @@ const useSelect = (props) => {
     // Use custom scroll blocking hook to prevent layout shifts
     // Pass the portal target so we only block scroll when menu is portaled to document.body
     const { blockScroll, restoreScroll } = reactComponents.useScrollBlock(portalTarget);
-    // Forces react-select to redo its up/down flip decision on scroll/resize while the menu stays
-    // open -- see useMenuPlacementRecompute's own comment for why this is otherwise stuck at the
-    // decision made when the menu was first opened. `onMenuOpen`/`onMenuClose` are stable
-    // (useCallback with no deps), so destructuring them here doesn't affect handleMenuOpen/
-    // handleMenuClose's own stability below -- only `tick` (a primitive) is expected to change.
-    const { tick: menuPlacementRecomputeTick, onMenuOpen: startMenuRepositionWatcher, onMenuClose: stopMenuRepositionWatcher, } = useMenuPlacementRecompute();
     // Store only the wrapped callbacks in refs to keep them stable
     // We only do this for onMenuOpen and onMenuClose because we wrap them with additional logic
     // Other callbacks are passed through directly and should trigger recalculation when they change
@@ -2902,16 +2980,15 @@ const useSelect = (props) => {
             isOptionSelected,
             onKeyDown,
             onMenuScrollToTop,
-            onMenuScrollToBottom,
             // Wire up our wrapped menu open/close handlers (with scroll blocking)
             onMenuOpen: handleMenuOpen,
             onMenuClose: handleMenuClose,
             // 👇 putting these here to avoid them _accidentally_ being overwritten in the future👇
-            // Not "controlled custom components styling" like `minMenuHeight` below -- this value is
-            // otherwise inert (see useMenuPlacementRecompute), it only exists to force react-select to
-            // redo its up/down flip decision whenever it changes.
-            maxMenuHeight: menuPlacementRecomputeTick,
-            minMenuHeight: undefined, // controlled custom components styling
+            // A real viewport-scale preferred height lets MenuPlacer calculate available space. The
+            // custom MenuList combines its result with the design ceiling in CSS.
+            maxMenuHeight,
+            // Leave unset so react-select owns its effective minimum and placement policy.
+            minMenuHeight: undefined,
             theme: undefined,
             classNames: undefined,
             styles: menuPortalStyles,
@@ -2963,11 +3040,10 @@ const useSelect = (props) => {
         isOptionSelected,
         onKeyDown,
         onMenuScrollToTop,
-        onMenuScrollToBottom,
         handleMenuOpen,
         handleMenuClose,
         menuPortalStyles,
-        menuPlacementRecomputeTick,
+        maxMenuHeight,
     ]);
 };
 

package/index.esm.js

@@ -1652,7 +1652,10 @@ const cvaSelectMenu = cva({
         placement: "bottom",
     },
 });
-const cvaSelectMenuList = cva({ base: [cvaMenuList(), "relative", "w-full"] });
+// `overscroll-contain`: react-select's `captureMenuScroll` defaults to off on touch devices, so
+// without this a scroll at the list's top/bottom chains to the container behind the menu, moving
+// the control and dragging the anchored menu with it.
+const cvaSelectMenuList = cva({ base: [cvaMenuList(), "relative", "w-full", "overscroll-contain"] });
 const cvaSelectPlaceholder = cva({ base: ["absolute", "text-neutral-400"] });
 const cvaSelectIndicatorsContainer = cva({ base: ["flex", "items-center", "gap-x-1"] });
 const cvaSelectMultiValue = cva({
@@ -2386,6 +2389,20 @@ const getVisibleCountFromGeometries = ({ geometries, availableWidth, containerX,
     return visibleCount;
 };
 
+// Chrome can report a fractional `scrollTop` at the physical bottom, so an exact
+// `>= scrollHeight` check never matches there.
+const BOTTOM_SCROLL_TOLERANCE_PX = 1;
+const MENU_VERTICAL_BORDER_CHROME_PX = 2;
+const DEFAULT_REACT_SELECT_MIN_MENU_HEIGHT_PX = 140;
+/**
+ * `useSelect` deliberately leaves `minMenuHeight` unset so react-select keeps owning the menu's
+ * placement policy, which means the effective value comes from the library's own
+ * `defaultProps.minMenuHeight`. react-select's types declare the prop as required for that
+ * reason, but nothing guarantees it at runtime -- and interpolating an absent value into CSS
+ * emits `undefinedpx`, which makes browsers discard the whole `max-height` declaration. The
+ * optional parameter is what lets the fallback be expressed despite the required type.
+ */
+const resolveMinMenuHeight = (minMenuHeight) => minMenuHeight ?? DEFAULT_REACT_SELECT_MIN_MENU_HEIGHT_PX;
 /**
  * A hook to retrieve components override object.
  * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
@@ -2398,7 +2415,7 @@ const getVisibleCountFromGeometries = ({ geometries, availableWidth, containerX,
  */
 const useCustomComponents = ({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize = "medium", getOptionLabelDescription, getOptionPrefix, className, isMulti, //prefer using the component prop (ala. selectValueContainer.isMulti) inside of customComponents instead of this one.
 autoComplete, // see https://github.com/JedWatson/react-select/issues/758
-formatOptionLabel, getMenuGeometry, }) => {
+formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) => {
     const [t] = useTranslation();
     const { setValueContainerRef, setCounterRef, setFakeCounterRef, setGeometryRef, setMenuRef, getVisibleCount, getTotalCount, getCounterWidth, getIsComplete, } = useMultiValueOverflow({ skip: !isMulti });
     const interactable = useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
@@ -2412,6 +2429,16 @@ formatOptionLabel, getMenuGeometry, }) => {
     getOptionLabelDescriptionRef.current = getOptionLabelDescription;
     const getOptionPrefixRef = useRef(getOptionPrefix);
     getOptionPrefixRef.current = getOptionPrefix;
+    const onMenuScrollToBottomRef = useRef(onMenuScrollToBottom);
+    onMenuScrollToBottomRef.current = onMenuScrollToBottom;
+    // Keep react-select's control ref intact while retaining the live DOM node for viewport-relative
+    // vertical measurements that can change without changing an absolute portal's document offset.
+    const controlRef = useRef(null);
+    // The list keeps firing `scroll` while resting at the bottom, so only an arrival there may
+    // notify. `scrollHeight` is part of the latched identity because appending a page grows the list
+    // without emitting a scroll event, and a latch measured against the old height must not suppress
+    // the arrival at the new bottom.
+    const atBottomRef = useRef(null);
     const resolveOptionPrefixRef = useRef(undefined);
     if (resolveOptionPrefixRef.current === undefined) {
         resolveOptionPrefixRef.current = (data) => getOptionPrefixRef.current?.(data);
@@ -2442,7 +2469,7 @@ formatOptionLabel, getMenuGeometry, }) => {
                                 omit(selectControl.innerProps, ["onMouseDown", "onTouchEnd"])
                             : selectControl.innerProps),
                         ...(dataTestId ? { "data-testid": `${dataTestId}-control` } : {}),
-                    }, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, selectControl.children, typeof disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-disabled-locked` : null, children: jsx(InputLockReasonTooltip, { ...disabled }) })) : null, typeof readOnly === "object" && !Boolean(disabled) ? (jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-readonly-locked` : null, children: jsx(InputLockReasonTooltip, { ...readOnly }) })) : null] }));
+                    }, innerRef: useMergeRefs([controlRef, selectControl.innerRef]), children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, selectControl.children, typeof disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-disabled-locked` : null, children: jsx(InputLockReasonTooltip, { ...disabled }) })) : null, typeof readOnly === "object" && !Boolean(disabled) ? (jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-readonly-locked` : null, children: jsx(InputLockReasonTooltip, { ...readOnly }) })) : null] }));
             },
             Placeholder: selectPlaceholder => {
                 return (jsx(components.Placeholder, { ...selectPlaceholder, className: cvaSelectPlaceholder({ className: selectPlaceholder.className }), getStyles: getNoStyles, children: selectPlaceholder.children }));
@@ -2512,10 +2539,12 @@ formatOptionLabel, getMenuGeometry, }) => {
                         }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefixRef.current ? resolveOptionPrefixRef.current : undefined, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
             },
             Menu: selectMenu => {
+                const geometry = getMenuGeometry();
+                const controlRect = controlRef.current?.getBoundingClientRect();
                 return (jsx(components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
                         ...selectMenu.innerProps,
                         ...(dataTestId ? { "data-testid": `${dataTestId}-menu` } : {}),
-                        style: getMenuGeometryStyle(getMenuGeometry()),
+                        style: getMenuGeometryStyle(geometry, controlRect, selectMenu.placement),
                     }, 
                     // `innerRef` (not `innerProps.ref`) is the actual DOM ref react-select's `MenuPlacer` reads
                     // to measure available space and decide whether to flip the menu open upward -- merging our
@@ -2532,23 +2561,36 @@ formatOptionLabel, getMenuGeometry, }) => {
                     }, children: selectMenuPortal.children }));
             },
             MenuList: selectMenuList => {
+                const minMenuHeight = resolveMinMenuHeight(selectMenuList.selectProps.minMenuHeight);
                 return (jsx(components.MenuList, { className: cvaSelectMenuList({
                         className: selectMenuList.className,
                     }), ...selectMenuList, getStyles: getNoStyles, innerProps: {
                         ...selectMenuList.innerProps,
+                        style: {
+                            ...selectMenuList.innerProps.style,
+                            // MenuPlacer may loosen its result when a later pass measures an already-constrained
+                            // menu. The inherited available-space bound is independent of that measured height;
+                            // react-select still owns which side opens and its effective minimum. Flooring only
+                            // the available-space term preserves that minimum as the last resort (allowing slight
+                            // viewport overflow) without changing normally constrained MenuPlacer heights.
+                            maxHeight: `min(${selectMenuList.maxHeight}px, max(var(--select-menu-available-height, 100dvh), ${minMenuHeight}px), max(40dvh, var(--spacing-64)))`,
+                        },
                         onScroll: e => {
                             const listEl = e.currentTarget;
-                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight &&
-                                selectMenuList.selectProps.onMenuScrollToBottom) {
-                                if (/Firefox/.test(navigator.userAgent)) {
-                                    selectMenuList.selectProps.onMenuScrollToBottom(new WheelEvent("scroll"));
-                                }
-                                else {
-                                    selectMenuList.selectProps.onMenuScrollToBottom(new TouchEvent(""));
-                                }
+                            const scrollHeight = listEl.scrollHeight;
+                            const atBottom = listEl.scrollTop + listEl.clientHeight >= scrollHeight - BOTTOM_SCROLL_TOLERANCE_PX;
+                            const previous = atBottomRef.current;
+                            const wasAtBottom = previous?.listEl === listEl && previous.atBottom && previous.scrollHeight === scrollHeight;
+                            atBottomRef.current = { listEl, atBottom, scrollHeight };
+                            if (atBottom && !wasAtBottom) {
+                                // Desktop Safari never defines `TouchEvent`, so constructing one there throws.
+                                onMenuScrollToBottomRef.current?.(new WheelEvent("scroll"));
                             }
                         },
-                    }, children: selectMenuList.children }));
+                    }, 
+                    // Same trap as `Menu` above: `innerProps` is applied after `innerRef`, so passing a ref
+                    // through it would replace react-select's own list ref.
+                    innerRef: useMergeRefs([setMenuListRef, selectMenuList.innerRef]), children: selectMenuList.children }));
             },
             Option: selectOption => {
                 const componentProps = {
@@ -2590,6 +2632,7 @@ formatOptionLabel, getMenuGeometry, }) => {
         setGeometryRef,
         setMenuRef,
         getMenuGeometry,
+        setMenuListRef,
     ]);
     return customComponents;
 };
@@ -2597,21 +2640,30 @@ const getNoStyles = () => {
     // To prevent the default styles from being applied from react-select.
     return {};
 };
-/**
- * Translates the computed geometry into the menu's positioning/sizing inline style: grows/shrinks
- * to fit content between `minWidth` (the control's own width) and `maxWidth` (the available space
- * on the anchored side), flipping to right-aligned ("poking out" left of the control) when needed.
- */
-const getMenuGeometryStyle = (geometry) => {
-    if (!geometry) {
+const getMenuGeometryStyle = (geometry, controlRect, placement) => {
+    const controlEdge = placement === "bottom"
+        ? (controlRect?.bottom ?? geometry?.controlBottom)
+        : (controlRect?.top ?? geometry?.controlTop);
+    if (!geometry && controlEdge === undefined) {
         return undefined;
     }
-    return {
-        left: geometry.alignRight ? undefined : 0,
-        right: geometry.alignRight ? 0 : undefined,
-        minWidth: geometry.minWidth,
-        maxWidth: geometry.maxWidth,
+    const style = {
+        left: geometry?.alignRight === false ? 0 : undefined,
+        right: geometry?.alignRight === true ? 0 : undefined,
+        minWidth: geometry?.minWidth,
+        maxWidth: geometry?.maxWidth,
     };
+    // The gap the chosen side leaves between the control and the viewport edge, measured from the
+    // control's own viewport coordinates (never react-select's portal `offset`, which carries the
+    // document scroll for non-fixed menus). `dvh` keeps the bound live as mobile browser chrome
+    // shows/hides, without duplicating the design ceiling or the flip policy in JS.
+    if (controlEdge !== undefined) {
+        style["--select-menu-available-height"] =
+            placement === "bottom"
+                ? `calc(100dvh - ${controlEdge}px - var(--spacing-1) - ${MENU_VERTICAL_BORDER_CHROME_PX}px)`
+                : `calc(${controlEdge}px - var(--spacing-1) - ${MENU_VERTICAL_BORDER_CHROME_PX}px)`;
+    }
+    return style;
 };
 const getInputComponent = (children) => {
     return Array.isArray(children)
@@ -2635,7 +2687,8 @@ const getPlaceholderElement = (children) => {
 // dropdown keeps the same edge gap as other floating design-system elements.
 const EDGE_PADDING = 12;
 /**
- * Derives the dropdown's alignment/sizing from the control's rect and the viewport:
+ * Derives the dropdown's horizontal alignment/sizing from the control's rect and carries the
+ * control's vertical edges for the separate viewport-height bound:
  * - flips to right-aligned ("poking out" left of the control) only when the control no
  *   longer fits to the right AND flipping actually buys more room
  * - the width ceiling on the anchored side (bounded by the viewport edge, minus padding)
@@ -2659,6 +2712,8 @@ const computeMenuGeometry = (rect) => {
         alignRight,
         minWidth: rect.width,
         maxWidth: alignRight ? spaceLeft : spaceRight,
+        ...(rect.top === undefined ? {} : { controlTop: rect.top }),
+        ...(rect.bottom === undefined ? {} : { controlBottom: rect.bottom }),
     };
 };
 
@@ -2673,15 +2728,13 @@ const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
  * (e.g. scrolling the modal/drawer/page the select sits in without closing the menu). A menu that
  * correctly opened "up" (or "down") can end up clipped once the layout around it moves.
  *
- * `useSelect.ts` feeds the returned `tick` into `maxMenuHeight` -- the one prop in that dependency
- * list safe to toggle purely to force a fresh measurement, with no other side effect: the
- * resulting `maxHeight` react-select computes is never consumed on our end (the custom
- * `Menu`/`MenuList` in useCustomComponents.tsx disable react-select's per-slot styling via
- * `getStyles={getNoStyles}` and constrain height with Tailwind's `cvaMenuList` instead) -- only
- * the *change* in value, not the value itself, matters. `minMenuHeight` must stay untouched:
- * passing any finite number there (instead of `undefined`) would make react-select treat "the
- * menu barely fits, if constrained" as true almost everywhere, short-circuiting past the actual
- * flip check.
+ * `useSelect.ts` uses the returned `tick` to alternate `maxMenuHeight` by one pixel around the
+ * viewport height -- the one prop in that dependency list safe to toggle purely to force a fresh
+ * measurement. The custom `MenuList` consumes react-select's computed result and combines it with
+ * the design-system ceiling in CSS, so `maxMenuHeight` must stay a real viewport-scale height.
+ * `minMenuHeight` must stay unset: leaving the wrapper prop `undefined` lets react-select apply
+ * its own `defaultProps.minMenuHeight` (140px at runtime today), so the library stays the owner
+ * of the flip policy and that effective value -- not this wrapper -- defines the boundary.
  *
  * Deliberately a trailing *debounce*, not a per-frame (rAF) throttle: `resize` (and, to a lesser
  * extent, `scroll`) fires continuously while the user is actively dragging, so a control that
@@ -2689,16 +2742,34 @@ const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
  * flip decision -- and therefore the whole menu -- recomputed and visibly toggle top/bottom on
  * practically every frame of the drag. Waiting until the gesture actually settles means the menu
  * still only flips (at most) once, to whatever's correct for the final size/position.
+ *
+ * `setMenuListRef` must be wired to the rendered MenuList's DOM node so scrolling the dropdown's
+ * own option list can be told apart from the surrounding layout moving.
  */
 const useMenuPlacementRecompute = () => {
     const [tick, setTick] = useState(0);
     const cleanupRef = useRef(null);
+    const menuListRef = useRef(null);
+    const setMenuListRef = useCallback(element => {
+        menuListRef.current = element;
+    }, []);
     const onMenuOpen = useCallback(() => {
         if (cleanupRef.current) {
             return; // already watching
         }
+        // Refresh maxMenuHeight immediately on each arrival. Resize events are intentionally ignored
+        // while closed, so without this bump a menu opened after such a resize could reuse a viewport
+        // height memoized before the resize.
+        setTick(previousTick => previousTick + 1);
         let timeoutId = null;
-        const handleReposition = () => {
+        const handleReposition = (event) => {
+            // Scrolling the dropdown's own option list doesn't move the control, and recomputing on it
+            // is harmful: `MenuPlacer` measures the space below the menu *where it currently sits*, so a
+            // menu already flipped up has room "below", flips down, and toggles on the next scroll.
+            const target = event?.target;
+            if (target instanceof Node && menuListRef.current?.contains(target) === true) {
+                return;
+            }
             if (timeoutId !== null) {
                 clearTimeout(timeoutId);
             }
@@ -2726,7 +2797,7 @@ const useMenuPlacementRecompute = () => {
     }, []);
     // Stop watching if the component unmounts while the menu is still open.
     useEffect(() => onMenuClose, [onMenuClose]);
-    return useMemo(() => ({ tick, onMenuOpen, onMenuClose }), [tick, onMenuOpen, onMenuClose]);
+    return useMemo(() => ({ tick, onMenuOpen, onMenuClose, setMenuListRef }), [tick, onMenuOpen, onMenuClose, setMenuListRef]);
 };
 
 /**
@@ -2775,6 +2846,17 @@ const useSelect = (props) => {
         },
     }), []);
     const getMenuGeometry = useCallback(() => menuGeometryRef.current, []);
+    // Forces react-select to redo its up/down flip decision on scroll/resize while the menu stays
+    // open -- see useMenuPlacementRecompute's own comment for why this is otherwise stuck at the
+    // decision made when the menu was first opened. `onMenuOpen`/`onMenuClose`/`setMenuListRef` are
+    // stable (useCallback with no deps), so destructuring them here doesn't affect handleMenuOpen/
+    // handleMenuClose's own stability below -- only `tick` (a primitive) is expected to change.
+    const { tick: menuPlacementRecomputeTick, onMenuOpen: startMenuRepositionWatcher, onMenuClose: stopMenuRepositionWatcher, setMenuListRef, } = useMenuPlacementRecompute();
+    // Read on every useSelect render rather than inside the final useMemo: opening bumps the tick,
+    // so a viewport resize that happened while the menu was closed cannot leave this value stale.
+    // The alternating pixel only re-triggers MenuPlacer; the rendered MenuList retains the exact
+    // design-system ceiling in CSS and combines it with MenuPlacer's computed result.
+    const maxMenuHeight = window.innerHeight + (menuPlacementRecomputeTick % 2);
     const customComponents = useCustomComponents({
         disabled, // intentionally not evaluated as boolean, since it can be object too!
         readOnly: readOnly ?? false, // intentionally not evaluated as boolean, since it can be object too!
@@ -2788,7 +2870,9 @@ const useSelect = (props) => {
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,
         formatOptionLabel,
+        onMenuScrollToBottom,
         getMenuGeometry,
+        setMenuListRef,
     });
     const interactable = useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu
@@ -2796,12 +2880,6 @@ const useSelect = (props) => {
     // Use custom scroll blocking hook to prevent layout shifts
     // Pass the portal target so we only block scroll when menu is portaled to document.body
     const { blockScroll, restoreScroll } = useScrollBlock(portalTarget);
-    // Forces react-select to redo its up/down flip decision on scroll/resize while the menu stays
-    // open -- see useMenuPlacementRecompute's own comment for why this is otherwise stuck at the
-    // decision made when the menu was first opened. `onMenuOpen`/`onMenuClose` are stable
-    // (useCallback with no deps), so destructuring them here doesn't affect handleMenuOpen/
-    // handleMenuClose's own stability below -- only `tick` (a primitive) is expected to change.
-    const { tick: menuPlacementRecomputeTick, onMenuOpen: startMenuRepositionWatcher, onMenuClose: stopMenuRepositionWatcher, } = useMenuPlacementRecompute();
     // Store only the wrapped callbacks in refs to keep them stable
     // We only do this for onMenuOpen and onMenuClose because we wrap them with additional logic
     // Other callbacks are passed through directly and should trigger recalculation when they change
@@ -2901,16 +2979,15 @@ const useSelect = (props) => {
             isOptionSelected,
             onKeyDown,
             onMenuScrollToTop,
-            onMenuScrollToBottom,
             // Wire up our wrapped menu open/close handlers (with scroll blocking)
             onMenuOpen: handleMenuOpen,
             onMenuClose: handleMenuClose,
             // 👇 putting these here to avoid them _accidentally_ being overwritten in the future👇
-            // Not "controlled custom components styling" like `minMenuHeight` below -- this value is
-            // otherwise inert (see useMenuPlacementRecompute), it only exists to force react-select to
-            // redo its up/down flip decision whenever it changes.
-            maxMenuHeight: menuPlacementRecomputeTick,
-            minMenuHeight: undefined, // controlled custom components styling
+            // A real viewport-scale preferred height lets MenuPlacer calculate available space. The
+            // custom MenuList combines its result with the design ceiling in CSS.
+            maxMenuHeight,
+            // Leave unset so react-select owns its effective minimum and placement policy.
+            minMenuHeight: undefined,
             theme: undefined,
             classNames: undefined,
             styles: menuPortalStyles,
@@ -2962,11 +3039,10 @@ const useSelect = (props) => {
         isOptionSelected,
         onKeyDown,
         onMenuScrollToTop,
-        onMenuScrollToBottom,
         handleMenuOpen,
         handleMenuClose,
         menuPortalStyles,
-        menuPlacementRecomputeTick,
+        maxMenuHeight,
     ]);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.6.59",
+  "version": "2.6.61",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,17 +10,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.14.38",
+    "@trackunit/date-and-time-utils": "1.14.40",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.13.11",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "2.0.7",
-    "@trackunit/react-components": "2.13.11",
-    "@trackunit/ui-icons": "1.14.35",
-    "@trackunit/shared-utils": "1.16.42",
-    "@trackunit/ui-design-tokens": "1.15.26",
-    "@trackunit/i18n-library-translation": "2.4.51",
+    "@trackunit/css-class-variance-utilities": "2.0.9",
+    "@trackunit/react-components": "2.13.13",
+    "@trackunit/ui-icons": "1.14.37",
+    "@trackunit/shared-utils": "1.16.44",
+    "@trackunit/ui-design-tokens": "1.15.28",
+    "@trackunit/i18n-library-translation": "2.4.53",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/BaseSelect/useCustomComponents.d.ts

@@ -3,7 +3,7 @@
  * Maybe we can try to refactor this in the future?
  */
 import { CommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
+import { ReactNode, RefCallback } from "react";
 import { type FormatOptionLabelMeta, type SelectComponentsConfig, GroupBase } from "react-select";
 import { FormComponentSizes } from "../../types";
 import { LockedForReasons } from "../BaseInput/InputLockReasonTooltip";
@@ -21,6 +21,7 @@ interface CustomComponentsProps<TOption> extends CommonProps {
     isMulti: boolean;
     autoComplete?: "off" | "on" | "no";
     formatOptionLabel?: (data: TOption, meta: FormatOptionLabelMeta<TOption>) => ReactNode;
+    onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
     /**
      * Returns the latest edge-aware menu geometry (alignment + min/max-width), computed from the
      * control's rect via `styles.menuPortal` in useSelect.ts. Read directly here (not through
@@ -28,6 +29,8 @@ interface CustomComponentsProps<TOption> extends CommonProps {
      * in favor of Tailwind classes) and applied as inline styles on the actual menu element.
      */
     getMenuGeometry: () => MenuGeometry | null;
+    /** Registers the rendered MenuList's DOM node with `useMenuPlacementRecompute`. */
+    setMenuListRef?: RefCallback<HTMLDivElement>;
 }
 /**
  * A hook to retrieve components override object.
@@ -39,5 +42,5 @@ interface CustomComponentsProps<TOption> extends CommonProps {
  * @param {CustomComponentsProps<TOption>} props - The custom components props
  * @returns {SelectComponentsConfig<TOption, TIsMulti, TGroup>} components object to override react-select default components
  */
-export declare const useCustomComponents: <TOption, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, className, isMulti, autoComplete, formatOptionLabel, getMenuGeometry, }: CustomComponentsProps<TOption>) => SelectComponentsConfig<TOption, TIsMulti, TGroup>;
+export declare const useCustomComponents: <TOption, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, className, isMulti, autoComplete, formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }: CustomComponentsProps<TOption>) => SelectComponentsConfig<TOption, TIsMulti, TGroup>;
 export {};

package/src/components/BaseSelect/utils/computeMenuGeometry.d.ts

@@ -1,13 +1,26 @@
 import { GroupBase, StylesConfig } from "react-select";
 type MenuPortalStyleFn = NonNullable<StylesConfig<unknown, boolean, GroupBase<unknown>>["menuPortal"]>;
 type PortalStyleArgs = Parameters<MenuPortalStyleFn>[1];
+type ControlRect = PortalStyleArgs["rect"] & Partial<{
+    top: number;
+    bottom: number;
+}>;
 export interface MenuGeometry {
     alignRight: boolean;
     minWidth: number;
     maxWidth: number;
+    /**
+     * The control's own edges in viewport coordinates, used only to bound the menu's height once
+     * react-select has chosen a placement. Deliberately not react-select's sibling `offset`: that one
+     * adds `window.pageYOffset` for any non-fixed menu, which is a document coordinate and would
+     * bound the menu against the wrong origin as soon as the page is scrolled.
+     */
+    controlTop?: number;
+    controlBottom?: number;
 }
 /**
- * Derives the dropdown's alignment/sizing from the control's rect and the viewport:
+ * Derives the dropdown's horizontal alignment/sizing from the control's rect and carries the
+ * control's vertical edges for the separate viewport-height bound:
  * - flips to right-aligned ("poking out" left of the control) only when the control no
  *   longer fits to the right AND flipping actually buys more room
  * - the width ceiling on the anchored side (bounded by the viewport edge, minus padding)
@@ -22,5 +35,5 @@ export interface MenuGeometry {
  * contribute to its shrink-to-fit sizing, so styling the portal can't drive the visible menu's
  * width or position.
  */
-export declare const computeMenuGeometry: (rect: PortalStyleArgs["rect"]) => MenuGeometry;
+export declare const computeMenuGeometry: (rect: ControlRect) => MenuGeometry;
 export {};

package/src/components/BaseSelect/utils/useMenuPlacementRecompute.d.ts

@@ -1,3 +1,4 @@
+import { RefCallback } from "react";
 export declare const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
 /**
  * react-select's own `MenuPlacer` (internal to the library) decides the escaped dropdown's
@@ -7,15 +8,13 @@ export declare const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
  * (e.g. scrolling the modal/drawer/page the select sits in without closing the menu). A menu that
  * correctly opened "up" (or "down") can end up clipped once the layout around it moves.
  *
- * `useSelect.ts` feeds the returned `tick` into `maxMenuHeight` -- the one prop in that dependency
- * list safe to toggle purely to force a fresh measurement, with no other side effect: the
- * resulting `maxHeight` react-select computes is never consumed on our end (the custom
- * `Menu`/`MenuList` in useCustomComponents.tsx disable react-select's per-slot styling via
- * `getStyles={getNoStyles}` and constrain height with Tailwind's `cvaMenuList` instead) -- only
- * the *change* in value, not the value itself, matters. `minMenuHeight` must stay untouched:
- * passing any finite number there (instead of `undefined`) would make react-select treat "the
- * menu barely fits, if constrained" as true almost everywhere, short-circuiting past the actual
- * flip check.
+ * `useSelect.ts` uses the returned `tick` to alternate `maxMenuHeight` by one pixel around the
+ * viewport height -- the one prop in that dependency list safe to toggle purely to force a fresh
+ * measurement. The custom `MenuList` consumes react-select's computed result and combines it with
+ * the design-system ceiling in CSS, so `maxMenuHeight` must stay a real viewport-scale height.
+ * `minMenuHeight` must stay unset: leaving the wrapper prop `undefined` lets react-select apply
+ * its own `defaultProps.minMenuHeight` (140px at runtime today), so the library stays the owner
+ * of the flip policy and that effective value -- not this wrapper -- defines the boundary.
  *
  * Deliberately a trailing *debounce*, not a per-frame (rAF) throttle: `resize` (and, to a lesser
  * extent, `scroll`) fires continuously while the user is actively dragging, so a control that
@@ -23,9 +22,13 @@ export declare const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
  * flip decision -- and therefore the whole menu -- recomputed and visibly toggle top/bottom on
  * practically every frame of the drag. Waiting until the gesture actually settles means the menu
  * still only flips (at most) once, to whatever's correct for the final size/position.
+ *
+ * `setMenuListRef` must be wired to the rendered MenuList's DOM node so scrolling the dropdown's
+ * own option list can be told apart from the surrounding layout moving.
  */
 export declare const useMenuPlacementRecompute: () => {
     tick: number;
     onMenuOpen: () => void;
     onMenuClose: () => void;
+    setMenuListRef: RefCallback<HTMLElement>;
 };