@dloizides/ui-forms 1.12.0 → 1.13.2

package/dist/index.d.mts

@@ -733,17 +733,20 @@ declare function DateRangeControl({ value, onChange, onSubmit, fromLabel, toLabe
 /**
  * `AnchoredMenu` — the floating option list shared by `SelectControl` and `TypeaheadControl`.
  *
- * Renders an in-tree, absolutely-positioned popover under its anchor (the pattern aml-v2's
- * CountryPicker proved: `position:absolute; top:100%; zIndex; elevation`), so it floats over
- * sibling fields without a portal. On web it dismisses on outside-click / Escape; on native the
- * caller closes it on blur/select. Purely presentational + theme-flat, so it stays reusable.
+ * By default it renders an in-tree, absolutely-positioned popover under its anchor
+ * (`position:absolute; top:100%; zIndex; elevation`). Set {@link AnchoredMenuProps.usePortal} to
+ * render it — on web only — in a PORTAL to `document.body` with `position: fixed` at the trigger's
+ * measured rect instead: that escapes react-native-web's trapped `z-index: 0` stacking contexts and
+ * any ancestor `overflow: hidden`, so the menu is never painted under / clipped by later siblings
+ * (the fix for the Country typeahead menu that hid behind the content below it). See {@link menuPortal}.
+ * On web it dismisses on outside-click / Escape; on native the caller closes it on blur/select.
+ * Purely presentational + theme-flat, so it stays reusable.
  *
  * Promoted verbatim out of `@dloizides/ui-tables`' private `Filters/components/AnchoredMenu`.
  *
- * Deliberately in-tree (no `ui-layout` dependency). That was a considered choice in `ui-tables`
- * and it still holds here: `ui-forms` is a low-level primitive and must not take a runtime
- * dependency on the higher-level `ui-layout` `ModalDropdown` — that would invert the graph for
- * every consumer. Apps needing the responsive modal/bottom-sheet variant inject it instead.
+ * Deliberately no `ui-layout` dependency: `ui-forms` is a low-level primitive and must not take a
+ * runtime dependency on the higher-level `ui-layout` `ModalDropdown` — that would invert the graph
+ * for every consumer. The portal mechanism therefore lives locally in {@link menuPortal}.
  */
 
 /** The four theme colours the menu paints with — passed in, so the menu stays theme-flat. */
@@ -766,8 +769,16 @@ interface AnchoredMenuProps {
     testID: string;
     /** Node whose clicks count as "inside" (the anchor) so its own press doesn't self-dismiss. */
     anchorRef: React.RefObject<View | null>;
+    /**
+     * On web, render the popover in a portal to `document.body` with `position: fixed` at the anchor's
+     * measured rect, so it escapes react-native-web's trapped stacking contexts and any ancestor
+     * `overflow: hidden` (the fix for a menu that paints under / is clipped by the content below it).
+     * No effect on native. Default `false` — the existing in-tree behaviour, so `SelectControl`
+     * usages are unchanged; `TypeaheadControl` opts in.
+     */
+    usePortal?: boolean;
 }
-declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, }: AnchoredMenuProps): React.ReactElement;
+declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, usePortal, }: AnchoredMenuProps): React.ReactElement;
 
 declare const controlStyles: {
     /**

package/dist/index.d.ts

@@ -733,17 +733,20 @@ declare function DateRangeControl({ value, onChange, onSubmit, fromLabel, toLabe
 /**
  * `AnchoredMenu` — the floating option list shared by `SelectControl` and `TypeaheadControl`.
  *
- * Renders an in-tree, absolutely-positioned popover under its anchor (the pattern aml-v2's
- * CountryPicker proved: `position:absolute; top:100%; zIndex; elevation`), so it floats over
- * sibling fields without a portal. On web it dismisses on outside-click / Escape; on native the
- * caller closes it on blur/select. Purely presentational + theme-flat, so it stays reusable.
+ * By default it renders an in-tree, absolutely-positioned popover under its anchor
+ * (`position:absolute; top:100%; zIndex; elevation`). Set {@link AnchoredMenuProps.usePortal} to
+ * render it — on web only — in a PORTAL to `document.body` with `position: fixed` at the trigger's
+ * measured rect instead: that escapes react-native-web's trapped `z-index: 0` stacking contexts and
+ * any ancestor `overflow: hidden`, so the menu is never painted under / clipped by later siblings
+ * (the fix for the Country typeahead menu that hid behind the content below it). See {@link menuPortal}.
+ * On web it dismisses on outside-click / Escape; on native the caller closes it on blur/select.
+ * Purely presentational + theme-flat, so it stays reusable.
  *
  * Promoted verbatim out of `@dloizides/ui-tables`' private `Filters/components/AnchoredMenu`.
  *
- * Deliberately in-tree (no `ui-layout` dependency). That was a considered choice in `ui-tables`
- * and it still holds here: `ui-forms` is a low-level primitive and must not take a runtime
- * dependency on the higher-level `ui-layout` `ModalDropdown` — that would invert the graph for
- * every consumer. Apps needing the responsive modal/bottom-sheet variant inject it instead.
+ * Deliberately no `ui-layout` dependency: `ui-forms` is a low-level primitive and must not take a
+ * runtime dependency on the higher-level `ui-layout` `ModalDropdown` — that would invert the graph
+ * for every consumer. The portal mechanism therefore lives locally in {@link menuPortal}.
  */
 
 /** The four theme colours the menu paints with — passed in, so the menu stays theme-flat. */
@@ -766,8 +769,16 @@ interface AnchoredMenuProps {
     testID: string;
     /** Node whose clicks count as "inside" (the anchor) so its own press doesn't self-dismiss. */
     anchorRef: React.RefObject<View | null>;
+    /**
+     * On web, render the popover in a portal to `document.body` with `position: fixed` at the anchor's
+     * measured rect, so it escapes react-native-web's trapped stacking contexts and any ancestor
+     * `overflow: hidden` (the fix for a menu that paints under / is clipped by the content below it).
+     * No effect on native. Default `false` — the existing in-tree behaviour, so `SelectControl`
+     * usages are unchanged; `TypeaheadControl` opts in.
+     */
+    usePortal?: boolean;
 }
-declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, }: AnchoredMenuProps): React.ReactElement;
+declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, usePortal, }: AnchoredMenuProps): React.ReactElement;
 
 declare const controlStyles: {
     /**

package/dist/index.js

@@ -6,6 +6,7 @@ var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
 var uiButtons = require('@dloizides/ui-buttons');
 var a11y = require('@dloizides/a11y');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1007,13 +1008,76 @@ var FormCheckbox = ({
     }
   );
 };
-var IS_WEB5 = typeof document !== "undefined";
+var IS_WEB5 = reactNative.Platform.OS === "web";
+var MENU_PORTAL_Z_INDEX = 1e3;
+var MENU_TOP_GAP2 = 4;
+function toDomNode(ref) {
+  const node = ref.current;
+  if (node === null || typeof node.getBoundingClientRect !== "function") return null;
+  return node;
+}
+function readAnchorRect(ref) {
+  if (!IS_WEB5) return null;
+  const node = toDomNode(ref);
+  if (node === null) return null;
+  const r = node.getBoundingClientRect();
+  return { top: r.top, left: r.left, width: r.width, bottom: r.bottom };
+}
+function buildPortalPopoverStyle(rect) {
+  return {
+    // RN's ViewStyle union omits 'fixed', but react-native-web honours it at runtime.
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- web-only position value
+    position: "fixed",
+    top: rect.bottom + MENU_TOP_GAP2,
+    left: rect.left,
+    width: rect.width,
+    zIndex: MENU_PORTAL_Z_INDEX
+  };
+}
+function useAnchorRect(ref, enabled) {
+  const [rect, setRect] = React2.useState(null);
+  React2.useLayoutEffect(() => {
+    if (!IS_WEB5 || !enabled) {
+      setRect(null);
+      return void 0;
+    }
+    let frame = null;
+    let disposed = false;
+    const apply = () => {
+      frame = null;
+      if (disposed) return;
+      setRect(readAnchorRect(ref));
+    };
+    const schedule = () => {
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(apply);
+    };
+    apply();
+    document.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    const node = toDomNode(ref);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : null;
+    if (observer !== null) {
+      if (node !== null) observer.observe(node);
+      observer.observe(document.body);
+    }
+    return () => {
+      disposed = true;
+      if (frame !== null) window.cancelAnimationFrame(frame);
+      document.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      if (observer !== null) observer.disconnect();
+    };
+  }, [ref, enabled]);
+  return IS_WEB5 && enabled ? rect : null;
+}
+var IS_WEB6 = typeof document !== "undefined";
 var ESCAPE_KEY = "Escape";
 var ACTIVE_WEIGHT = "700";
 var IDLE_WEIGHT = "400";
 function useDismiss(anchorRef, menuRef, onDismiss) {
   React2.useEffect(() => {
-    if (!IS_WEB5) return void 0;
+    if (!IS_WEB6) return void 0;
     const onMouseDown = (event) => {
       const anchorNode = anchorRef.current;
       const menuNode = menuRef.current;
@@ -1041,18 +1105,21 @@ function AnchoredMenu({
   colors,
   optionHint,
   testID,
-  anchorRef
+  anchorRef,
+  usePortal = false
 }) {
   const menuRef = React2__default.default.useRef(null);
   useDismiss(anchorRef, menuRef, onDismiss);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const rect = useAnchorRect(anchorRef, usePortal);
+  const portalStyle = rect !== null ? buildPortalPopoverStyle(rect) : null;
+  const menu = /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
       ref: menuRef,
       accessibilityRole: "menu",
-      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }],
+      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }, portalStyle],
       testID: `${testID}-menu`,
-      children: options.map((opt) => {
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, children: options.map((opt) => {
         const active = opt.value === selectedValue;
         return /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
@@ -1069,9 +1136,11 @@ function AnchoredMenu({
           },
           opt.value
         );
-      })
+      }) })
     }
   );
+  if (usePortal && IS_WEB6) return reactDom.createPortal(menu, document.body);
+  return menu;
 }
 var CHEVRON_DOWN = "\u25BE";
 var CHEVRON_UP = "\u25B4";
@@ -1255,7 +1324,8 @@ function TypeaheadControl({
         colors: { text: colors.text, border: colors.border, surface: colors.surface, brand: palette.primary["500"] },
         optionHint,
         testID,
-        anchorRef
+        anchorRef,
+        usePortal: true
       }
     ) : null,
     hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null