@trackunit/react-form-components 2.2.0 → 2.2.1

package/index.cjs.js

@@ -1638,7 +1638,11 @@ const cvaSelectSingleValue = cssClassVarianceUtilities.cvaMerge([
     "text-ellipsis",
     "whitespace-nowrap",
 ]);
-const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge([reactComponents.cvaMenu({ limitWidth: false }), "absolute", "w-full"], {
+// No `w-full`: useCustomComponents.tsx's custom `Menu` applies edge-aware min/max-width and
+// left/right alignment as an inline style (see utils/computeMenuGeometry.ts), so a
+// static Tailwind width class here would just compete with that. The menu sizes intrinsically
+// (shrink-to-fit, bounded by that inline min/max-width) as a result.
+const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge([reactComponents.cvaMenu({ limitWidth: false }), "absolute"], {
     variants: {
         placement: {
             bottom: "top-[calc(100%+var(--spacing-1))]",
@@ -2394,7 +2398,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, }) => {
+formatOptionLabel, getMenuGeometry, }) => {
     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]);
@@ -2432,10 +2436,13 @@ formatOptionLabel, }) => {
             Control: selectControl => {
                 return (jsxRuntime.jsxs(ReactSelect.components.Control, { ...selectControl, className: cvaSelectControl({
                         className: selectControl.className,
-                    }), getStyles: getNoStyles, innerProps: Boolean(readOnly)
-                        ? // We omit the onMouseDown and onTouchEnd events to allow text selection
-                            esToolkit.omit(selectControl.innerProps, ["onMouseDown", "onTouchEnd"])
-                        : selectControl.innerProps, 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] }));
+                    }), getStyles: getNoStyles, innerProps: {
+                        ...(Boolean(readOnly)
+                            ? // We omit the onMouseDown and onTouchEnd events to allow text selection
+                                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] }));
             },
             Placeholder: selectPlaceholder => {
                 return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...selectPlaceholder, className: cvaSelectPlaceholder({ className: selectPlaceholder.className }), getStyles: getNoStyles, children: selectPlaceholder.children }));
@@ -2507,11 +2514,22 @@ formatOptionLabel, }) => {
             Menu: selectMenu => {
                 return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
                         ...selectMenu.innerProps,
-                        ref: reactComponents.useMergeRefs([setMenuRef, selectMenu.innerProps.ref]),
-                    } }));
+                        ...(dataTestId ? { "data-testid": `${dataTestId}-menu` } : {}),
+                        style: getMenuGeometryStyle(getMenuGeometry()),
+                    }, 
+                    // `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
+                    // own ref into `innerProps.ref` instead used to silently overwrite that ref (since
+                    // `components.Menu` applies `innerProps` after `innerRef` when building the element's props),
+                    // leaving `MenuPlacer`'s measurement permanently null and its placement decision stuck at
+                    // the "bottom" default regardless of available space.
+                    innerRef: reactComponents.useMergeRefs([setMenuRef, selectMenu.innerRef]) }));
             },
             MenuPortal: selectMenuPortal => {
-                return (jsxRuntime.jsx(ReactSelect.components.MenuPortal, { ...selectMenuPortal, className: "!z-overlay", children: selectMenuPortal.children }));
+                return (jsxRuntime.jsx(ReactSelect.components.MenuPortal, { ...selectMenuPortal, className: "!z-popover", innerProps: {
+                        ...selectMenuPortal.innerProps,
+                        ...(dataTestId ? { "data-testid": `${dataTestId}-menu-portal` } : {}),
+                    }, children: selectMenuPortal.children }));
             },
             MenuList: selectMenuList => {
                 return (jsxRuntime.jsx(ReactSelect.components.MenuList, { className: cvaSelectMenuList({
@@ -2571,6 +2589,7 @@ formatOptionLabel, }) => {
         t,
         setGeometryRef,
         setMenuRef,
+        getMenuGeometry,
     ]);
     return customComponents;
 };
@@ -2578,6 +2597,22 @@ 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) {
+        return undefined;
+    }
+    return {
+        left: geometry.alignRight ? undefined : 0,
+        right: geometry.alignRight ? 0 : undefined,
+        minWidth: geometry.minWidth,
+        maxWidth: geometry.maxWidth,
+    };
+};
 const getInputComponent = (children) => {
     return Array.isArray(children)
         ? children.find(child => child !== null && child !== undefined && /react-select-\d+-input/.test(child?.props?.id))
@@ -2596,6 +2631,104 @@ const getPlaceholderElement = (children) => {
         : null;
 };
 
+// Mirrors Popover's PADDING (libs/react/components/src/components/Popover/PopoverSizing.ts) so the
+// 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:
+ * - 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)
+ *
+ * It's a bare function rather than a hook because it's a pure, synchronous transform with no
+ * React state of its own, called from inside `useSelect.ts`'s `styles.menuPortal` (react-select's
+ * own extension point, not ours) -- there's nowhere in that call chain to invoke a hook.
+ *
+ * Its result is applied as an inline style on the actual menu box by useCustomComponents.tsx's
+ * custom `Menu` component (via a `getMenuGeometry` getter), not on the portal itself: `MenuPortal`
+ * is a zero-size, out-of-flow wrapper, and an absolutely-positioned child (the menu) doesn't
+ * contribute to its shrink-to-fit sizing, so styling the portal can't drive the visible menu's
+ * width or position.
+ */
+const computeMenuGeometry = (rect) => {
+    const controlRight = rect.left + rect.width;
+    const spaceRight = window.innerWidth - rect.left - EDGE_PADDING;
+    const spaceLeft = controlRight - EDGE_PADDING;
+    const alignRight = spaceRight < rect.width && spaceLeft > spaceRight;
+    return {
+        alignRight,
+        minWidth: rect.width,
+        maxWidth: alignRight ? spaceLeft : spaceRight,
+    };
+};
+
+// Exported purely so tests can advance a real timer by an exact, non-guessed amount -- see this
+// hook's own comment for why a trailing debounce (not a per-frame rAF throttle) is what's needed.
+const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
+/**
+ * react-select's own `MenuPlacer` (internal to the library) decides the escaped dropdown's
+ * up/down flip exactly once per open, inside a `useLayoutEffect` gated on `[maxMenuHeight,
+ * menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, controlHeight]` --
+ * none of which change on their own when the control's position shifts relative to the viewport
+ * (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.
+ *
+ * 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
+ * happens to sit right at the fits-below/doesn't-fit-below threshold would otherwise have its
+ * 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.
+ */
+const useMenuPlacementRecompute = () => {
+    const [tick, setTick] = react.useState(0);
+    const cleanupRef = react.useRef(null);
+    const onMenuOpen = react.useCallback(() => {
+        if (cleanupRef.current) {
+            return; // already watching
+        }
+        let timeoutId = null;
+        const handleReposition = () => {
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                timeoutId = null;
+                setTick(previousTick => previousTick + 1);
+            }, MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS);
+        };
+        // `capture: true` is required to observe scroll events from nested scrollable ancestors (e.g.
+        // a Modal/Drawer body) -- "scroll" doesn't bubble, but it's still dispatched through the
+        // capture phase on every ancestor, including window.
+        window.addEventListener("scroll", handleReposition, { capture: true, passive: true });
+        window.addEventListener("resize", handleReposition, { passive: true });
+        cleanupRef.current = () => {
+            window.removeEventListener("scroll", handleReposition, { capture: true });
+            window.removeEventListener("resize", handleReposition);
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, []);
+    const onMenuClose = react.useCallback(() => {
+        cleanupRef.current?.();
+        cleanupRef.current = null;
+    }, []);
+    // 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]);
+};
+
 /**
  * A hook used by selects to share the common code
  *
@@ -2629,6 +2762,19 @@ const useSelect = (props) => {
             });
         }
     }, [restProps, stableRestProps]);
+    // `styles.menuPortal` is the only place react-select exposes the control's rect. The custom
+    // `Menu` component (useCustomComponents.tsx) is what actually renders the visible box, but it
+    // disables react-select's own `styles.menu` callback (`getStyles={getNoStyles}`) in favor of
+    // Tailwind classes, so the geometry can't be delivered through `styles` -- this ref hands it to
+    // `getMenuGeometry` below instead, read directly as inline styles by that custom component.
+    const menuGeometryRef = react.useRef(null);
+    const menuPortalStyles = react.useMemo(() => ({
+        menuPortal: (base, { rect }) => {
+            menuGeometryRef.current = computeMenuGeometry(rect);
+            return base;
+        },
+    }), []);
+    const getMenuGeometry = react.useCallback(() => menuGeometryRef.current, []);
     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!
@@ -2642,6 +2788,7 @@ const useSelect = (props) => {
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,
         formatOptionLabel,
+        getMenuGeometry,
     });
     const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu
@@ -2649,6 +2796,12 @@ 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
@@ -2666,13 +2819,15 @@ const useSelect = (props) => {
     // See comment next to menuShouldBlockScroll below for more
     const handleMenuOpen = react.useCallback(() => {
         blockScroll();
+        startMenuRepositionWatcher();
         onMenuOpenRef.current?.();
-    }, [blockScroll]);
+    }, [blockScroll, startMenuRepositionWatcher]);
     // Wrap user's onMenuClose callback to restore scrolling
     const handleMenuClose = react.useCallback(() => {
         restoreScroll();
+        stopMenuRepositionWatcher();
         onMenuCloseRef.current?.();
-    }, [restoreScroll]);
+    }, [restoreScroll, stopMenuRepositionWatcher]);
     // Final memoized props object for react-select
     // Stability strategy:
     // 1. stableRestProps - deep-equality memoized to prevent reference changes
@@ -2751,11 +2906,14 @@ const useSelect = (props) => {
             onMenuOpen: handleMenuOpen,
             onMenuClose: handleMenuClose,
             // 👇 putting these here to avoid them _accidentally_ being overwritten in the future👇
-            maxMenuHeight: undefined, // controlled custom components styling
+            // 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
             theme: undefined,
             classNames: undefined,
-            styles: undefined,
+            styles: menuPortalStyles,
         };
     }, [
         stableRestProps,
@@ -2807,6 +2965,8 @@ const useSelect = (props) => {
         onMenuScrollToBottom,
         handleMenuOpen,
         handleMenuClose,
+        menuPortalStyles,
+        menuPlacementRecomputeTick,
     ]);
 };
 
@@ -5704,7 +5864,6 @@ exports.toISODateStringUTC = toISODateStringUTC;
 exports.useCreatableSelect = useCreatableSelect;
 exports.useCreateInputBlurEvent = useCreateInputBlurEvent;
 exports.useCreateInputChangeEvent = useCreateInputChangeEvent;
-exports.useCustomComponents = useCustomComponents;
 exports.useGetPhoneValidationRules = useGetPhoneValidationRules;
 exports.usePhoneInput = usePhoneInput;
 exports.useRadioItemChecked = useRadioItemChecked;

package/index.esm.js

@@ -1637,7 +1637,11 @@ const cvaSelectSingleValue = cvaMerge([
     "text-ellipsis",
     "whitespace-nowrap",
 ]);
-const cvaSelectMenu = cvaMerge([cvaMenu({ limitWidth: false }), "absolute", "w-full"], {
+// No `w-full`: useCustomComponents.tsx's custom `Menu` applies edge-aware min/max-width and
+// left/right alignment as an inline style (see utils/computeMenuGeometry.ts), so a
+// static Tailwind width class here would just compete with that. The menu sizes intrinsically
+// (shrink-to-fit, bounded by that inline min/max-width) as a result.
+const cvaSelectMenu = cvaMerge([cvaMenu({ limitWidth: false }), "absolute"], {
     variants: {
         placement: {
             bottom: "top-[calc(100%+var(--spacing-1))]",
@@ -2393,7 +2397,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, }) => {
+formatOptionLabel, getMenuGeometry, }) => {
     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]);
@@ -2431,10 +2435,13 @@ formatOptionLabel, }) => {
             Control: selectControl => {
                 return (jsxs(components.Control, { ...selectControl, className: cvaSelectControl({
                         className: selectControl.className,
-                    }), getStyles: getNoStyles, innerProps: Boolean(readOnly)
-                        ? // We omit the onMouseDown and onTouchEnd events to allow text selection
-                            omit(selectControl.innerProps, ["onMouseDown", "onTouchEnd"])
-                        : selectControl.innerProps, 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] }));
+                    }), getStyles: getNoStyles, innerProps: {
+                        ...(Boolean(readOnly)
+                            ? // We omit the onMouseDown and onTouchEnd events to allow text selection
+                                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] }));
             },
             Placeholder: selectPlaceholder => {
                 return (jsx(components.Placeholder, { ...selectPlaceholder, className: cvaSelectPlaceholder({ className: selectPlaceholder.className }), getStyles: getNoStyles, children: selectPlaceholder.children }));
@@ -2506,11 +2513,22 @@ formatOptionLabel, }) => {
             Menu: selectMenu => {
                 return (jsx(components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
                         ...selectMenu.innerProps,
-                        ref: useMergeRefs([setMenuRef, selectMenu.innerProps.ref]),
-                    } }));
+                        ...(dataTestId ? { "data-testid": `${dataTestId}-menu` } : {}),
+                        style: getMenuGeometryStyle(getMenuGeometry()),
+                    }, 
+                    // `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
+                    // own ref into `innerProps.ref` instead used to silently overwrite that ref (since
+                    // `components.Menu` applies `innerProps` after `innerRef` when building the element's props),
+                    // leaving `MenuPlacer`'s measurement permanently null and its placement decision stuck at
+                    // the "bottom" default regardless of available space.
+                    innerRef: useMergeRefs([setMenuRef, selectMenu.innerRef]) }));
             },
             MenuPortal: selectMenuPortal => {
-                return (jsx(components.MenuPortal, { ...selectMenuPortal, className: "!z-overlay", children: selectMenuPortal.children }));
+                return (jsx(components.MenuPortal, { ...selectMenuPortal, className: "!z-popover", innerProps: {
+                        ...selectMenuPortal.innerProps,
+                        ...(dataTestId ? { "data-testid": `${dataTestId}-menu-portal` } : {}),
+                    }, children: selectMenuPortal.children }));
             },
             MenuList: selectMenuList => {
                 return (jsx(components.MenuList, { className: cvaSelectMenuList({
@@ -2570,6 +2588,7 @@ formatOptionLabel, }) => {
         t,
         setGeometryRef,
         setMenuRef,
+        getMenuGeometry,
     ]);
     return customComponents;
 };
@@ -2577,6 +2596,22 @@ 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) {
+        return undefined;
+    }
+    return {
+        left: geometry.alignRight ? undefined : 0,
+        right: geometry.alignRight ? 0 : undefined,
+        minWidth: geometry.minWidth,
+        maxWidth: geometry.maxWidth,
+    };
+};
 const getInputComponent = (children) => {
     return Array.isArray(children)
         ? children.find(child => child !== null && child !== undefined && /react-select-\d+-input/.test(child?.props?.id))
@@ -2595,6 +2630,104 @@ const getPlaceholderElement = (children) => {
         : null;
 };
 
+// Mirrors Popover's PADDING (libs/react/components/src/components/Popover/PopoverSizing.ts) so the
+// 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:
+ * - 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)
+ *
+ * It's a bare function rather than a hook because it's a pure, synchronous transform with no
+ * React state of its own, called from inside `useSelect.ts`'s `styles.menuPortal` (react-select's
+ * own extension point, not ours) -- there's nowhere in that call chain to invoke a hook.
+ *
+ * Its result is applied as an inline style on the actual menu box by useCustomComponents.tsx's
+ * custom `Menu` component (via a `getMenuGeometry` getter), not on the portal itself: `MenuPortal`
+ * is a zero-size, out-of-flow wrapper, and an absolutely-positioned child (the menu) doesn't
+ * contribute to its shrink-to-fit sizing, so styling the portal can't drive the visible menu's
+ * width or position.
+ */
+const computeMenuGeometry = (rect) => {
+    const controlRight = rect.left + rect.width;
+    const spaceRight = window.innerWidth - rect.left - EDGE_PADDING;
+    const spaceLeft = controlRight - EDGE_PADDING;
+    const alignRight = spaceRight < rect.width && spaceLeft > spaceRight;
+    return {
+        alignRight,
+        minWidth: rect.width,
+        maxWidth: alignRight ? spaceLeft : spaceRight,
+    };
+};
+
+// Exported purely so tests can advance a real timer by an exact, non-guessed amount -- see this
+// hook's own comment for why a trailing debounce (not a per-frame rAF throttle) is what's needed.
+const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
+/**
+ * react-select's own `MenuPlacer` (internal to the library) decides the escaped dropdown's
+ * up/down flip exactly once per open, inside a `useLayoutEffect` gated on `[maxMenuHeight,
+ * menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, controlHeight]` --
+ * none of which change on their own when the control's position shifts relative to the viewport
+ * (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.
+ *
+ * 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
+ * happens to sit right at the fits-below/doesn't-fit-below threshold would otherwise have its
+ * 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.
+ */
+const useMenuPlacementRecompute = () => {
+    const [tick, setTick] = useState(0);
+    const cleanupRef = useRef(null);
+    const onMenuOpen = useCallback(() => {
+        if (cleanupRef.current) {
+            return; // already watching
+        }
+        let timeoutId = null;
+        const handleReposition = () => {
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                timeoutId = null;
+                setTick(previousTick => previousTick + 1);
+            }, MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS);
+        };
+        // `capture: true` is required to observe scroll events from nested scrollable ancestors (e.g.
+        // a Modal/Drawer body) -- "scroll" doesn't bubble, but it's still dispatched through the
+        // capture phase on every ancestor, including window.
+        window.addEventListener("scroll", handleReposition, { capture: true, passive: true });
+        window.addEventListener("resize", handleReposition, { passive: true });
+        cleanupRef.current = () => {
+            window.removeEventListener("scroll", handleReposition, { capture: true });
+            window.removeEventListener("resize", handleReposition);
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, []);
+    const onMenuClose = useCallback(() => {
+        cleanupRef.current?.();
+        cleanupRef.current = null;
+    }, []);
+    // Stop watching if the component unmounts while the menu is still open.
+    useEffect(() => onMenuClose, [onMenuClose]);
+    return useMemo(() => ({ tick, onMenuOpen, onMenuClose }), [tick, onMenuOpen, onMenuClose]);
+};
+
 /**
  * A hook used by selects to share the common code
  *
@@ -2628,6 +2761,19 @@ const useSelect = (props) => {
             });
         }
     }, [restProps, stableRestProps]);
+    // `styles.menuPortal` is the only place react-select exposes the control's rect. The custom
+    // `Menu` component (useCustomComponents.tsx) is what actually renders the visible box, but it
+    // disables react-select's own `styles.menu` callback (`getStyles={getNoStyles}`) in favor of
+    // Tailwind classes, so the geometry can't be delivered through `styles` -- this ref hands it to
+    // `getMenuGeometry` below instead, read directly as inline styles by that custom component.
+    const menuGeometryRef = useRef(null);
+    const menuPortalStyles = useMemo(() => ({
+        menuPortal: (base, { rect }) => {
+            menuGeometryRef.current = computeMenuGeometry(rect);
+            return base;
+        },
+    }), []);
+    const getMenuGeometry = useCallback(() => menuGeometryRef.current, []);
     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!
@@ -2641,6 +2787,7 @@ const useSelect = (props) => {
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,
         formatOptionLabel,
+        getMenuGeometry,
     });
     const interactable = useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu
@@ -2648,6 +2795,12 @@ 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
@@ -2665,13 +2818,15 @@ const useSelect = (props) => {
     // See comment next to menuShouldBlockScroll below for more
     const handleMenuOpen = useCallback(() => {
         blockScroll();
+        startMenuRepositionWatcher();
         onMenuOpenRef.current?.();
-    }, [blockScroll]);
+    }, [blockScroll, startMenuRepositionWatcher]);
     // Wrap user's onMenuClose callback to restore scrolling
     const handleMenuClose = useCallback(() => {
         restoreScroll();
+        stopMenuRepositionWatcher();
         onMenuCloseRef.current?.();
-    }, [restoreScroll]);
+    }, [restoreScroll, stopMenuRepositionWatcher]);
     // Final memoized props object for react-select
     // Stability strategy:
     // 1. stableRestProps - deep-equality memoized to prevent reference changes
@@ -2750,11 +2905,14 @@ const useSelect = (props) => {
             onMenuOpen: handleMenuOpen,
             onMenuClose: handleMenuClose,
             // 👇 putting these here to avoid them _accidentally_ being overwritten in the future👇
-            maxMenuHeight: undefined, // controlled custom components styling
+            // 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
             theme: undefined,
             classNames: undefined,
-            styles: undefined,
+            styles: menuPortalStyles,
         };
     }, [
         stableRestProps,
@@ -2806,6 +2964,8 @@ const useSelect = (props) => {
         onMenuScrollToBottom,
         handleMenuOpen,
         handleMenuClose,
+        menuPortalStyles,
+        menuPlacementRecomputeTick,
     ]);
 };
 
@@ -5610,4 +5770,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioGroupContext, RadioItem, Schedule, ScheduleVariant, Search, SelectField, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputBaseReadOnly, cvaInputBaseSize, cvaInputElement, cvaInputGroup, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaRadioItem, cvaSelectClearIndicator, cvaSelectContainer, cvaSelectControl, cvaSelectDropdownIconContainer, cvaSelectDropdownIndicator, cvaSelectIndicatorsContainer, cvaSelectLoadingMessage, cvaSelectMenu, cvaSelectMenuList, cvaSelectMultiValue, cvaSelectNoOptionsMessage, cvaSelectPlaceholder, cvaSelectPrefixSuffix, cvaSelectSingleValue, cvaSelectValueContainer, dateToISODateUTC, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseDateFieldValue, parseSchedule, phoneErrorMessage, serializeSchedule, toISODateStringUTC, useCreatableSelect, useCreateInputBlurEvent, useCreateInputChangeEvent, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useRadioItemChecked, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioGroupContext, RadioItem, Schedule, ScheduleVariant, Search, SelectField, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputBaseReadOnly, cvaInputBaseSize, cvaInputElement, cvaInputGroup, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaRadioItem, cvaSelectClearIndicator, cvaSelectContainer, cvaSelectControl, cvaSelectDropdownIconContainer, cvaSelectDropdownIndicator, cvaSelectIndicatorsContainer, cvaSelectLoadingMessage, cvaSelectMenu, cvaSelectMenuList, cvaSelectMultiValue, cvaSelectNoOptionsMessage, cvaSelectPlaceholder, cvaSelectPrefixSuffix, cvaSelectSingleValue, cvaSelectValueContainer, dateToISODateUTC, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseDateFieldValue, parseSchedule, phoneErrorMessage, serializeSchedule, toISODateStringUTC, useCreatableSelect, useCreateInputBlurEvent, useCreateInputChangeEvent, useGetPhoneValidationRules, usePhoneInput, useRadioItemChecked, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/form-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["// Migration entry point for @nx/js:tsc build target.\n// Migrations are registered in ../migrations.json and resolved by NX at runtime.\nexport {};\n"]}

package/migrations/utils/jsx-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-utils.js","sourceRoot":"","sources":["../../../../../../libs/react/form-components/migrations/utils/jsx-utils.ts"],"names":[],"mappings":";;;;AAAA,uCAAqE;AACrE,uDAAoD;AA8L3C,wFA9LA,iBAAO,OA8LA;AA7LhB,uDAAiC;AAEjC,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU,CAAC;AACjD,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAU,CAAC;AAEvD,MAAM,SAAS,GAAG,CAAC,QAAgB,EAAW,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AACpG,MAAM,QAAQ,GAAG,CAAC,QAAgB,EAAW,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAElG,MAAM,kBAAkB,GAAG,CAAC,QAAgB,EAAW,EAAE,CACvD,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE9E,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAW,EAAE,CAChD,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAE5F;;;;;GAKG;AACI,MAAM,aAAa,GAAG,CAC3B,IAAU,EACV,MAAc,EACd,QAA0E,EAClE,EAAE;IACV,IAAI,OAAO,GAAG,CAAC,CAAC;IAChB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE;QACzC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;YAAE,OAAO;QACjC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC;YAAE,OAAO;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC7C,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;YAAE,OAAO;QACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC5C,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;YACrE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC9B,OAAO,IAAI,CAAC,CAAC;QACf,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAnBW,QAAA,aAAa,iBAmBxB;AAEF;;;GAGG;AACI,MAAM,YAAY,GAAG,CAC1B,IAAU,EACV,MAAc,EACd,QAA0E,EAClE,EAAE;IACV,IAAI,OAAO,GAAG,CAAC,CAAC;IAChB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE;QACzC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,OAAO;QAChC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC;YAAE,OAAO;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC7C,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;YAAE,OAAO;QACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC5C,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;YACrE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC9B,OAAO,IAAI,CAAC,CAAC;QACf,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB;AAEF;;;;;;;GAOG;AACI,MAAM,kBAAkB,GAAG,CAAC,UAAyB,EAAE,WAAmB,EAAiC,EAAE;IAClH,MAAM,MAAM,GAA2B,EAAE,CAAC;IAC1C,IAAI,KAAK,GAAG,KAAK,CAAC;IAElB,KAAK,MAAM,IAAI,IAAI,UAAU,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC;YAAE,SAAS;QAC5C,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAC7C,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC;YAAE,SAAS;QACnD,IAAI,eAAe,CAAC,IAAI,KAAK,WAAW;YAAE,SAAS;QAEnD,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC;QACvD,IAAI,aAAa,KAAK,SAAS,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,aAAa,CAAC;YAAE,SAAS;QAE/E,KAAK,MAAM,OAAO,IAAI,aAAa,CAAC,QAAQ,EAAE,CAAC;YAC7C,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACpC,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,IAAI,IAAI,SAAS,CAAC;YAC7D,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC;YACjC,KAAK,GAAG,IAAI,CAAC;QACf,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;AAC/B,CAAC,CAAC;AAtBW,QAAA,kBAAkB,sBAsB7B;AAEF;;;GAGG;AACI,MAAM,gBAAgB,GAAG,CAC9B,UAAyB,EACzB,WAAmB,EACnB,YAAoB,EACL,EAAE;IACjB,MAAM,OAAO,GAAG,IAAA,0BAAkB,EAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAC5D,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAClC,KAAK,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QACxD,IAAI,QAAQ,KAAK,YAAY;YAAE,OAAO,KAAK,CAAC;IAC9C,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAXW,QAAA,gBAAgB,oBAW3B;AASF;;;;;;;GAOG;AACI,MAAM,eAAe,GAAG,CAC7B,UAAyB,EACzB,QAA+B,EACC,EAAE;IAClC,MAAM,OAAO,GAA2B,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;IAEjC,MAAM,KAAK,GAAG,CAAC,IAAa,EAAQ,EAAE;QACpC,IAAI,EAAE,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC;YACrC,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;gBACnE,OAAO,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;aAAM,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;YACpC,IAAI,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;gBACzE,OAAO,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;QACD,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,KAAK,CAAC,UAAU,CAAC,CAAC;IAClB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAvBW,QAAA,eAAe,mBAuB1B;AAEF;;;;GAIG;AACI,MAAM,gBAAgB,GAAG,CAC9B,cAA+D,EAC/D,aAAqB,EACG,EAAE;IAC1B,KAAK,MAAM,IAAI,IAAI,cAAc,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;QACxD,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC;YAAE,SAAS;QACvC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;YAAE,SAAS;QAC1C,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,aAAa;YAAE,OAAO,IAAI,CAAC;IACpD,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAVW,QAAA,gBAAgB,oBAU3B;AAEF;;;GAGG;AACI,MAAM,kBAAkB,GAAG,CAAC,cAA+D,EAAW,EAAE;IAC7G,OAAO,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAFW,QAAA,kBAAkB,sBAE7B;AAEF;;;;GAIG;AACI,MAAM,QAAQ,GAAG,CAAC,OAAe,EAAE,QAAQ,GAAG,UAAU,EAAiB,EAAE,CAChF,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;AAD7E,QAAA,QAAQ,YACqE;AAK1F;;;GAGG;AACI,MAAM,UAAU,GAAG,CAAC,aAAqB,EAAE,OAAe,EAAE,kBAA2B,EAAQ,EAAE;IACtG,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC;QAClB,eAAM,CAAC,IAAI,CAAC,KAAK,aAAa,oBAAoB,CAAC,CAAC;QACpD,OAAO;IACT,CAAC;IACD,MAAM,YAAY,GAChB,kBAAkB,KAAK,SAAS,IAAI,kBAAkB,GAAG,CAAC;QACxD,CAAC,CAAC,KAAK,kBAAkB,kCAAkC;QAC3D,CAAC,CAAC,EAAE,CAAC;IACT,eAAM,CAAC,IAAI,CAAC,KAAK,aAAa,aAAa,OAAO,WAAW,YAAY,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB;AAEF;;;;;;GAMG;AACI,MAAM,6BAA6B,GAAG,CAC3C,OAAe,EACf,cAA+D,EAC/D,aAAqB,EACb,EAAE;IACV,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;IACvC,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IACnC,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,IAAI,aAAa,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AACtF,CAAC,CAAC;AARW,QAAA,6BAA6B,iCAQxC","sourcesContent":["import { logger, type Tree, visitNotIgnoredFiles } from \"@nx/devkit\";\nimport { tsquery } from \"@phenomnomnominal/tsquery\";\nimport * as ts from \"typescript\";\n\nconst TSX_EXTENSIONS = [\".tsx\", \".jsx\"] as const;\nconst TS_EXTENSIONS = [\".ts\", \".tsx\", \".jsx\"] as const;\n\nconst isTsxFile = (filePath: string): boolean => TSX_EXTENSIONS.some(ext => filePath.endsWith(ext));\nconst isTsFile = (filePath: string): boolean => TS_EXTENSIONS.some(ext => filePath.endsWith(ext));\n\nconst isUnderNodeModules = (filePath: string): boolean =>\n  filePath.includes(\"/node_modules/\") || filePath.startsWith(\"node_modules/\");\n\nconst isUnderDist = (filePath: string): boolean =>\n  filePath.includes(\"/dist/\") || filePath.startsWith(\"dist/\") || filePath.includes(\"/.nx/\");\n\n/**\n * Visits every `.tsx`/`.jsx` file under the workspace root and invokes the\n * callback with the file path and its current contents. Files that don't\n * include the marker substring are skipped, which makes large workspaces\n * cheap to scan.\n */\nexport const visitTsxFiles = (\n  tree: Tree,\n  marker: string,\n  callback: (filePath: string, content: string) => string | null | undefined\n): number => {\n  let touched = 0;\n  visitNotIgnoredFiles(tree, \"/\", filePath => {\n    if (!isTsxFile(filePath)) return;\n    if (isUnderNodeModules(filePath) || isUnderDist(filePath)) return;\n    const content = tree.read(filePath, \"utf-8\");\n    if (content === null) return;\n    if (!content.includes(marker)) return;\n    const updated = callback(filePath, content);\n    if (updated !== null && updated !== undefined && updated !== content) {\n      tree.write(filePath, updated);\n      touched += 1;\n    }\n  });\n  return touched;\n};\n\n/**\n * Same as {@link visitTsxFiles} but also includes plain `.ts` files. Use this\n * when the codemod also rewrites non-JSX files such as helpers or hooks.\n */\nexport const visitTsFiles = (\n  tree: Tree,\n  marker: string,\n  callback: (filePath: string, content: string) => string | null | undefined\n): number => {\n  let touched = 0;\n  visitNotIgnoredFiles(tree, \"/\", filePath => {\n    if (!isTsFile(filePath)) return;\n    if (isUnderNodeModules(filePath) || isUnderDist(filePath)) return;\n    const content = tree.read(filePath, \"utf-8\");\n    if (content === null) return;\n    if (!content.includes(marker)) return;\n    const updated = callback(filePath, content);\n    if (updated !== null && updated !== undefined && updated !== content) {\n      tree.write(filePath, updated);\n      touched += 1;\n    }\n  });\n  return touched;\n};\n\n/**\n * Mapping of imported component aliases to their original names for a given\n * package. For `import { IconButton as Btn } from \"@trackunit/react-components\"`\n * this returns `{ Btn: \"IconButton\" }`.\n *\n * Returns `null` when the file imports nothing from the package, which lets\n * callers short-circuit before parsing JSX.\n */\nexport const getImportedAliases = (sourceFile: ts.SourceFile, packageName: string): Record<string, string> | null => {\n  const result: Record<string, string> = {};\n  let found = false;\n\n  for (const stmt of sourceFile.statements) {\n    if (!ts.isImportDeclaration(stmt)) continue;\n    const moduleSpecifier = stmt.moduleSpecifier;\n    if (!ts.isStringLiteral(moduleSpecifier)) continue;\n    if (moduleSpecifier.text !== packageName) continue;\n\n    const namedBindings = stmt.importClause?.namedBindings;\n    if (namedBindings === undefined || !ts.isNamedImports(namedBindings)) continue;\n\n    for (const element of namedBindings.elements) {\n      const localName = element.name.text;\n      const importedName = element.propertyName?.text ?? localName;\n      result[localName] = importedName;\n      found = true;\n    }\n  }\n\n  return found ? result : null;\n};\n\n/**\n * Returns the local alias used in this file for `originalName` when imported\n * from `packageName`, or `null` if the component is not imported.\n */\nexport const getLocalAliasFor = (\n  sourceFile: ts.SourceFile,\n  packageName: string,\n  originalName: string\n): string | null => {\n  const aliases = getImportedAliases(sourceFile, packageName);\n  if (aliases === null) return null;\n  for (const [local, original] of Object.entries(aliases)) {\n    if (original === originalName) return local;\n  }\n  return null;\n};\n\nexport type JsxElementMatch = {\n  /** The opening JSX element (the one carrying the attributes). */\n  openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement;\n  /** The full element including children, or the self-closing element. */\n  element: ts.JsxElement | ts.JsxSelfClosingElement;\n};\n\n/**\n * Finds every JSX element whose tag name resolves to one of `tagNames`\n * (typically the local aliases returned by {@link getImportedAliases}).\n *\n * The result intentionally includes both opening and full elements so callers\n * can manipulate attributes (via `openingElement`) or wrap/replace the whole\n * element (via `element`).\n */\nexport const findJsxElements = (\n  sourceFile: ts.SourceFile,\n  tagNames: ReadonlyArray<string>\n): ReadonlyArray<JsxElementMatch> => {\n  const matches: Array<JsxElementMatch> = [];\n  const tagSet = new Set(tagNames);\n\n  const visit = (node: ts.Node): void => {\n    if (ts.isJsxSelfClosingElement(node)) {\n      if (ts.isIdentifier(node.tagName) && tagSet.has(node.tagName.text)) {\n        matches.push({ openingElement: node, element: node });\n      }\n    } else if (ts.isJsxElement(node)) {\n      const opening = node.openingElement;\n      if (ts.isIdentifier(opening.tagName) && tagSet.has(opening.tagName.text)) {\n        matches.push({ openingElement: opening, element: node });\n      }\n    }\n    ts.forEachChild(node, visit);\n  };\n\n  visit(sourceFile);\n  return matches;\n};\n\n/**\n * Looks up a named JSX attribute on the opening element. Returns `null` when\n * the attribute is missing or part of a spread attribute (which we cannot\n * statically inspect).\n */\nexport const findJsxAttribute = (\n  openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement,\n  attributeName: string\n): ts.JsxAttribute | null => {\n  for (const attr of openingElement.attributes.properties) {\n    if (!ts.isJsxAttribute(attr)) continue;\n    if (!ts.isIdentifier(attr.name)) continue;\n    if (attr.name.text === attributeName) return attr;\n  }\n  return null;\n};\n\n/**\n * `true` when the element forwards a spread expression such as `{...rest}`,\n * which means we can't be sure which attributes are actually set.\n */\nexport const hasSpreadAttribute = (openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement): boolean => {\n  return openingElement.attributes.properties.some(prop => ts.isJsxSpreadAttribute(prop));\n};\n\n/**\n * Parses the file as TSX so JSX is recognised. We do not need a full program\n * here; tsquery's `ast` helper produces a script-kind source file which loses\n * JSX context, so we go through `createSourceFile` directly.\n */\nexport const parseTsx = (content: string, fileName = \"file.tsx\"): ts.SourceFile =>\n  ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);\n\n/** Re-exported for codemods that need direct AST queries. */\nexport { tsquery };\n\n/**\n * Helper for codemods to log a one-line summary at the end of a run. Migration\n * runners aggregate logs per migration, so this keeps output focused.\n */\nexport const logSummary = (migrationName: string, touched: number, manualReviewNeeded?: number): void => {\n  if (touched === 0) {\n    logger.info(`  ${migrationName}: no files changed`);\n    return;\n  }\n  const reviewSuffix =\n    manualReviewNeeded !== undefined && manualReviewNeeded > 0\n      ? ` (${manualReviewNeeded} location(s) need manual review)`\n      : \"\";\n  logger.info(`  ${migrationName}: updated ${touched} file(s)${reviewSuffix}`);\n};\n\n/**\n * Inserts an attribute string immediately after the tag name (so the new\n * attribute appears first). Returns the resulting source content.\n *\n * The added attribute is rendered verbatim, so callers are responsible for\n * including the leading space (e.g. ` title=\"Close\"`).\n */\nexport const insertAttributeIntoOpeningTag = (\n  content: string,\n  openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement,\n  attributeText: string\n): string => {\n  const tagName = openingElement.tagName;\n  const insertPos = tagName.getEnd();\n  return content.slice(0, insertPos) + ` ${attributeText}` + content.slice(insertPos);\n};\n"]}

package/migrations/v2-0-0/actionbutton-add-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionbutton-add-title.js","sourceRoot":"","sources":["../../../../../../libs/react/form-components/migrations/v2-0-0/actionbutton-add-title.ts"],"names":[],"mappings":"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","sourcesContent":["import { type Tree, logger } from \"@nx/devkit\";\nimport * as ts from \"typescript\";\nimport {\n  findJsxAttribute,\n  findJsxElements,\n  getImportedAliases,\n  hasSpreadAttribute,\n  logSummary,\n  parseTsx,\n  visitTsxFiles,\n} from \"../utils/jsx-utils\";\n\nconst PACKAGE_NAME = \"@trackunit/react-form-components\";\nconst COMPONENT_NAME = \"ActionButton\";\n\nconst ACTION_TYPE_TO_TITLE: Record<string, string> = {\n  COPY: \"Copy value\",\n  EDIT: \"Edit value\",\n  EMAIL: \"Send email\",\n  PHONE_NUMBER: \"Call number\",\n  WEB_ADDRESS: \"Open link\",\n};\n\nconst DEFAULT_TITLE = \"Action\";\n\nconst resolveTitleForType = (typeAttr: ts.JsxAttribute | null): string => {\n  if (typeAttr === null) return DEFAULT_TITLE;\n  const initializer = typeAttr.initializer;\n  if (initializer === undefined) return DEFAULT_TITLE;\n  if (ts.isStringLiteral(initializer)) {\n    return ACTION_TYPE_TO_TITLE[initializer.text] ?? DEFAULT_TITLE;\n  }\n  return DEFAULT_TITLE;\n};\n\nconst transformActionButtonUsage = (filePath: string, content: string): string | null => {\n  const sourceFile = parseTsx(content, filePath);\n\n  const aliases = getImportedAliases(sourceFile, PACKAGE_NAME);\n  if (aliases === null) return null;\n\n  const localAlias = Object.entries(aliases).find(([, name]) => name === COMPONENT_NAME)?.[0];\n  if (localAlias === undefined) return null;\n\n  const matches = findJsxElements(sourceFile, [localAlias]);\n  if (matches.length === 0) return null;\n\n  type Edit = { offset: number; text: string };\n  const edits: Array<Edit> = [];\n\n  for (const { openingElement } of matches) {\n    if (hasSpreadAttribute(openingElement)) continue;\n    if (findJsxAttribute(openingElement, \"title\") !== null) continue;\n\n    const typeAttr = findJsxAttribute(openingElement, \"type\");\n    const title = resolveTitleForType(typeAttr);\n    edits.push({\n      offset: openingElement.tagName.getEnd(),\n      text: ` title=\"${title}\"`,\n    });\n  }\n\n  if (edits.length === 0) return null;\n\n  edits.sort((a, b) => (a.offset === b.offset ? 0 : b.offset - a.offset));\n\n  let updated = content;\n  for (const { offset, text } of edits) {\n    updated = updated.slice(0, offset) + text + updated.slice(offset);\n  }\n  return updated;\n};\n\n/**\n * Adds the now-required `title` prop to `<ActionButton>` usages that don't\n * already provide one. The default value is derived from the `type` prop when\n * possible (e.g. `COPY` → \"Copy value\"); consumers should replace the\n * placeholders with their own localized strings.\n */\nexport const actionButtonAddTitle = (tree: Tree): void => {\n  const touched = visitTsxFiles(tree, \"ActionButton\", transformActionButtonUsage);\n  logSummary(\"actionbutton-add-title\", touched);\n  if (touched > 0) {\n    logger.info(`  Replace placeholder ActionButton titles with your own localized strings.`);\n  }\n};\n\nexport default actionButtonAddTitle;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",

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

@@ -7,6 +7,7 @@ import { ReactNode } from "react";
 import { type FormatOptionLabelMeta, type SelectComponentsConfig, GroupBase } from "react-select";
 import { FormComponentSizes } from "../../types";
 import { LockedForReasons } from "../BaseInput/InputLockReasonTooltip";
+import type { MenuGeometry } from "./utils/computeMenuGeometry";
 interface CustomComponentsProps<TOption> extends CommonProps {
     disabled: boolean | LockedForReasons;
     className?: string;
@@ -20,6 +21,13 @@ interface CustomComponentsProps<TOption> extends CommonProps {
     isMulti: boolean;
     autoComplete?: "off" | "on" | "no";
     formatOptionLabel?: (data: TOption, meta: FormatOptionLabelMeta<TOption>) => ReactNode;
+    /**
+     * 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
+     * react-select's own `styles.menu`, which this file disables via `getStyles={getNoStyles}`
+     * in favor of Tailwind classes) and applied as inline styles on the actual menu element.
+     */
+    getMenuGeometry: () => MenuGeometry | null;
 }
 /**
  * A hook to retrieve components override object.
@@ -31,5 +39,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, }: 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, getMenuGeometry, }: CustomComponentsProps<TOption>) => SelectComponentsConfig<TOption, TIsMulti, TGroup>;
 export {};

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

@@ -0,0 +1,26 @@
+import { GroupBase, StylesConfig } from "react-select";
+type MenuPortalStyleFn = NonNullable<StylesConfig<unknown, boolean, GroupBase<unknown>>["menuPortal"]>;
+type PortalStyleArgs = Parameters<MenuPortalStyleFn>[1];
+export interface MenuGeometry {
+    alignRight: boolean;
+    minWidth: number;
+    maxWidth: number;
+}
+/**
+ * Derives the dropdown's alignment/sizing from the control's rect and the viewport:
+ * - 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)
+ *
+ * It's a bare function rather than a hook because it's a pure, synchronous transform with no
+ * React state of its own, called from inside `useSelect.ts`'s `styles.menuPortal` (react-select's
+ * own extension point, not ours) -- there's nowhere in that call chain to invoke a hook.
+ *
+ * Its result is applied as an inline style on the actual menu box by useCustomComponents.tsx's
+ * custom `Menu` component (via a `getMenuGeometry` getter), not on the portal itself: `MenuPortal`
+ * is a zero-size, out-of-flow wrapper, and an absolutely-positioned child (the menu) doesn't
+ * 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 {};

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

@@ -0,0 +1,31 @@
+export declare const MENU_PLACEMENT_RECOMPUTE_DEBOUNCE_MS = 120;
+/**
+ * react-select's own `MenuPlacer` (internal to the library) decides the escaped dropdown's
+ * up/down flip exactly once per open, inside a `useLayoutEffect` gated on `[maxMenuHeight,
+ * menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, controlHeight]` --
+ * none of which change on their own when the control's position shifts relative to the viewport
+ * (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.
+ *
+ * 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
+ * happens to sit right at the fits-below/doesn't-fit-below threshold would otherwise have its
+ * 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.
+ */
+export declare const useMenuPlacementRecompute: () => {
+    tick: number;
+    onMenuOpen: () => void;
+    onMenuClose: () => void;
+};

package/src/index.d.ts

@@ -12,8 +12,7 @@ export * from "./components/BaseSelect/BaseSelect";
 export * from "./components/BaseSelect/BaseSelect.variants";
 export * from "./components/BaseSelect/CreatableSelect";
 export * from "./components/BaseSelect/useCreatableSelect";
-export * from "./components/BaseSelect/useCustomComponents";
-export * from "./components/BaseSelect/useSelect";
+export { type AsyncSelect, type SelectProps, useSelect } from "./components/BaseSelect/useSelect";
 export * from "./components/Checkbox/Checkbox";
 export * from "./components/CheckboxField/CheckboxField";
 export * from "./components/ColorField/ColorField";