@dloizides/ui-forms 1.12.0 → 1.13.2

package/dist/index.mjs

@@ -1,9 +1,10 @@
-import React2, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { Platform, StyleSheet, TextInput, View, Text, Switch, Pressable, TouchableOpacity } from 'react-native';
+import React2, { useState, useCallback, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
+import { Platform, StyleSheet, TextInput, View, Text, Switch, Pressable, ScrollView, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@dloizides/ui-buttons';
 import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
+import { createPortal } from 'react-dom';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -1001,13 +1002,76 @@ var FormCheckbox = ({
     }
   );
 };
-var IS_WEB5 = typeof document !== "undefined";
+var IS_WEB5 = 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] = useState(null);
+  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) {
   useEffect(() => {
-    if (!IS_WEB5) return void 0;
+    if (!IS_WEB6) return void 0;
     const onMouseDown = (event) => {
       const anchorNode = anchorRef.current;
       const menuNode = menuRef.current;
@@ -1035,18 +1099,21 @@ function AnchoredMenu({
   colors,
   optionHint,
   testID,
-  anchorRef
+  anchorRef,
+  usePortal = false
 }) {
   const menuRef = React2.useRef(null);
   useDismiss(anchorRef, menuRef, onDismiss);
-  return /* @__PURE__ */ jsx(
+  const rect = useAnchorRect(anchorRef, usePortal);
+  const portalStyle = rect !== null ? buildPortalPopoverStyle(rect) : null;
+  const menu = /* @__PURE__ */ jsx(
     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__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, children: options.map((opt) => {
         const active = opt.value === selectedValue;
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -1063,9 +1130,11 @@ function AnchoredMenu({
           },
           opt.value
         );
-      })
+      }) })
     }
   );
+  if (usePortal && IS_WEB6) return createPortal(menu, document.body);
+  return menu;
 }
 var CHEVRON_DOWN = "\u25BE";
 var CHEVRON_UP = "\u25B4";
@@ -1249,7 +1318,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__ */ jsx(Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null