react-native-anchored-menu 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-anchored-menu",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Headless anchored context menu / popover for React Native (iOS/Android) with stable measurement (default view host).",
   "repository": {
     "type": "git",

package/src/components/MenuAnchor.tsx

@@ -31,7 +31,12 @@ function extractMarginsFromChild(children: React.ReactNode): AnchorMargins {
 
 export function MenuAnchor({ id, children }: MenuAnchorProps) {
   const actions = useContext(AnchoredMenuActionsContext);
-  if (!actions) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions) {
+    throw new Error(
+      "[react-native-anchored-menu] MenuAnchor must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
 
   const ref = useRef<View>(null) as AnchorRefObject;
 

package/src/core/provider.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { Platform } from "react-native";
+import { AppState, Platform } from "react-native";
 import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
@@ -25,6 +25,7 @@ import type {
  * Provider config
  * - defaultHost: which host to use when `open()` doesn't specify one (default: "view")
  * - autoHost: automatically mounts the host implementation (default: true)
+ * - autoCloseOnBackground: automatically close menus when app goes to background (default: true)
  */
 export function AnchoredMenuProvider({
   children,
@@ -32,6 +33,7 @@ export function AnchoredMenuProvider({
   host,
   defaultHost = (host ?? "view") as HostType,
   autoHost = true,
+  autoCloseOnBackground = true,
 }: AnchoredMenuProviderProps) {
   const anchorsRef = useRef(new Map<string, any>()); // id -> ref
   const pendingOpenRafRef = useRef<number | null>(null);
@@ -110,9 +112,33 @@ export function AnchoredMenuProvider({
   // Register this provider globally so parents can route `open({ id })` to the correct layer.
   useEffect(() => {
     const entry = { anchors: anchorsRef.current, setRequest };
-    return registerProvider(entry);
+    const unregister = registerProvider(entry);
+    return () => {
+      // Close menu if open when provider unmounts
+      if (storeRef.current?.getSnapshot().isOpen) {
+        setRequest(null);
+      }
+      unregister();
+    };
   }, [setRequest]);
 
+  // Auto-close menu when app goes to background to avoid weird states
+  useEffect(() => {
+    if (!autoCloseOnBackground) return;
+
+    const subscription = AppState.addEventListener("change", (nextAppState: string) => {
+      if (nextAppState === "background" || nextAppState === "inactive") {
+        if (storeRef.current?.getSnapshot().isOpen) {
+          setRequest(null);
+        }
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [setRequest, autoCloseOnBackground]);
+
   const open = useCallback((payload: OpenMenuOptions) => {
     // Defer by default to avoid "open tap" being interpreted as an outside press
     // when a host mounts a Pressable backdrop during the active gesture.
@@ -138,8 +164,18 @@ export function AnchoredMenuProvider({
           );
         }
         const target = findProviderForAnchorId(anchorId);
-        if (target && target.setRequest)
+        if (target && target.setRequest) {
           return target.setRequest(payload as MenuRequest);
+        }
+        // Anchor not found in any provider
+        if (__DEV__) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[react-native-anchored-menu] Anchor with id="${anchorId}" not found in any provider. ` +
+              "Make sure the MenuAnchor is mounted and the id matches."
+          );
+        }
+        return; // Don't open menu if anchor doesn't exist
       }
 
       setRequest(payload as MenuRequest);
@@ -191,4 +227,3 @@ export function AnchoredMenuProvider({
     </AnchoredMenuActionsContext.Provider>
   );
 }
-

package/src/hooks/useAnchoredMenu.ts

@@ -3,19 +3,27 @@ import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
 } from "../core/context";
+import { useAnchoredMenuState } from "./useAnchoredMenuState";
 
 export function useAnchoredMenu() {
   const actions = useContext(AnchoredMenuActionsContext);
   const state = useContext(AnchoredMenuStateContext);
-  if (!actions || !state) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions || !state) {
+    throw new Error(
+      "[react-native-anchored-menu] useAnchoredMenu must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
+
+  // Use useAnchoredMenuState to properly subscribe to isOpen changes
+  const isOpen = useAnchoredMenuState((s) => s.isOpen);
 
   return useMemo(
     () => ({
       open: actions.open,
       close: actions.close,
-      isOpen: state.getSnapshot().isOpen,
+      isOpen,
     }),
-    [actions.open, actions.close, state]
+    [actions.open, actions.close, isOpen]
   );
 }
-

package/src/hooks/useAnchoredMenuActions.ts

@@ -11,7 +11,12 @@ export function useAnchoredMenuActions(): {
   close: () => void;
 } {
   const actions = useContext(AnchoredMenuActionsContext);
-  if (!actions) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions) {
+    throw new Error(
+      "[react-native-anchored-menu] useAnchoredMenuActions must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
 
   return useMemo(
     () => ({

package/src/hooks/useAnchoredMenuState.ts

@@ -1,7 +1,32 @@
-import { useContext, useSyncExternalStore } from "react";
+import { useContext, useEffect, useState } from "react";
 import { AnchoredMenuStateContext } from "../core/context";
 import type { MenuState } from "../types";
 
+// Polyfill for useSyncExternalStore for older React versions
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let useSyncExternalStore: any;
+try {
+  // Try to import from react (React 18+)
+  const react = require("react");
+  if (react.useSyncExternalStore) {
+    useSyncExternalStore = react.useSyncExternalStore;
+  } else {
+    throw new Error("Not available");
+  }
+} catch {
+  // Fallback for older React versions - use useState + useEffect
+  useSyncExternalStore = (subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => any) => {
+    const [state, setState] = useState(() => getSnapshot());
+    useEffect(() => {
+      const unsubscribe = subscribe(() => {
+        setState(getSnapshot());
+      });
+      return unsubscribe;
+    }, [subscribe, getSnapshot]);
+    return state;
+  };
+}
+
 /**
  * State selector hook.
  *
@@ -12,7 +37,12 @@ export function useAnchoredMenuState<T = MenuState>(
   selector: (state: MenuState) => T = ((s: MenuState) => s) as (state: MenuState) => T
 ): T {
   const store = useContext(AnchoredMenuStateContext);
-  if (!store) throw new Error("AnchoredMenuProvider is missing");
+  if (!store) {
+    throw new Error(
+      "[react-native-anchored-menu] useAnchoredMenuState must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
 
   const getSelectedSnapshot = () => selector(store.getSnapshot());
   return useSyncExternalStore(

package/src/hosts/ModalHost.tsx

@@ -11,6 +11,7 @@ import {
   measureInWindowStable,
 } from "../utils/measure";
 import { computeMenuPosition } from "../utils/position";
+import { isValidMeasurement, isValidMenuSize } from "../utils/validation";
 import { isFabricEnabled } from "../utils/runtime";
 import type {
   AnchorMeasurement,
@@ -27,7 +28,12 @@ interface MeasureCache {
 export function ModalHost() {
   const actions = useContext(AnchoredMenuActionsContext);
   const store = useContext(AnchoredMenuStateContext);
-  if (!actions || !store) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions || !store) {
+    throw new Error(
+      "[react-native-anchored-menu] ModalHost must be used within an AnchoredMenuProvider. " +
+        "This is usually handled automatically by AnchoredMenuProvider when autoHost=true."
+    );
+  }
 
   const activeHost = useAnchoredMenuState((s) => s.activeHost);
   if (activeHost !== "modal") return null;
@@ -71,7 +77,7 @@ export function ModalHost() {
     let cancelled = false;
 
     async function run() {
-      if (!req) return;
+      if (!req || !actions) return;
       await new Promise((r) => requestAnimationFrame(r));
       await new Promise((r) => requestAnimationFrame(r));
 
@@ -86,11 +92,33 @@ export function ModalHost() {
 
       const [a, h] = await Promise.all([
         measure(refObj, strategy === "stable" ? { tries } : undefined),
-        measure(hostRef, strategy === "stable" ? { tries } : undefined),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
       ]);
 
       if (cancelled) return;
+      
+      // Validate measurements before using them
+      if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid measurement for anchor "${req.id}". ` +
+              "Menu will not be positioned correctly. This can happen during layout transitions."
+          );
+        }
+        return;
+      }
+
       const nextAnchorWin = applyAnchorMargins(a, refObj);
+      if (!isValidMeasurement(nextAnchorWin)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid anchor measurement after applying margins for "${req.id}".`
+          );
+        }
+        return;
+      }
+
       setAnchorWin(nextAnchorWin);
       setHostWin(h);
       measureCacheRef.current.set(req.id, {
@@ -117,7 +145,7 @@ export function ModalHost() {
         clearTimeout(remeasureTimeoutRef.current);
       }
       remeasureTimeoutRef.current = setTimeout(async () => {
-        if (!req || !hostRef.current) return;
+        if (!req || !hostRef.current || !actions) return;
         const refObj = actions.anchors.get(req.id);
         if (!refObj) return;
 
@@ -129,10 +157,30 @@ export function ModalHost() {
 
         const [a, h] = await Promise.all([
           measure(refObj, strategy === "stable" ? { tries } : undefined),
-          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard show for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard show for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -150,7 +198,7 @@ export function ModalHost() {
         clearTimeout(remeasureTimeoutRef.current);
       }
       remeasureTimeoutRef.current = setTimeout(async () => {
-        if (!req || !hostRef.current) return;
+        if (!req || !hostRef.current || !actions) return;
         const refObj = actions.anchors.get(req.id);
         if (!refObj) return;
 
@@ -162,10 +210,30 @@ export function ModalHost() {
 
         const [a, h] = await Promise.all([
           measure(refObj, strategy === "stable" ? { tries } : undefined),
-          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard hide for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard hide for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -197,6 +265,17 @@ export function ModalHost() {
 
   const position = useMemo(() => {
     if (!req || !anchorInHost) return null;
+    
+    // Validate anchor measurement before computing position
+    if (!isValidMeasurement(anchorInHost)) {
+      if (__DEV__) {
+        console.warn(
+          `[react-native-anchored-menu] Cannot compute position for anchor "${req.id}": invalid measurement.`
+        );
+      }
+      return null;
+    }
+
     const viewport: Viewport | undefined =
       hostSize.width && hostSize.height
         ? {
@@ -206,7 +285,7 @@ export function ModalHost() {
         : undefined;
     return computeMenuPosition({
       anchor: anchorInHost,
-      menuSize,
+      menuSize: isValidMenuSize(menuSize) ? menuSize : null,
       viewport,
       placement: req.placement ?? "auto",
       offset: req.offset ?? 8,
@@ -216,7 +295,7 @@ export function ModalHost() {
     });
   }, [req, anchorInHost, menuSize, hostSize, keyboardHeight]);
 
-  const needsInitialMeasure = menuSize.width === 0 || menuSize.height === 0;
+  const needsInitialMeasure = !isValidMenuSize(menuSize);
 
   const statusBarTranslucent =
     req?.statusBarTranslucent ?? (Platform.OS === "android" ? false : true);

package/src/hosts/ViewHost.tsx

@@ -11,6 +11,7 @@ import {
   measureInWindowStable,
 } from "../utils/measure";
 import { computeMenuPosition } from "../utils/position";
+import { isValidMeasurement, isValidMenuSize } from "../utils/validation";
 import type {
   AnchorMeasurement,
   MenuSize,
@@ -35,7 +36,12 @@ interface MeasureCache {
 export function ViewHost() {
   const actions = useContext(AnchoredMenuActionsContext);
   const store = useContext(AnchoredMenuStateContext);
-  if (!actions || !store) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions || !store) {
+    throw new Error(
+      "[react-native-anchored-menu] ViewHost must be used within an AnchoredMenuProvider. " +
+        "This is usually handled automatically by AnchoredMenuProvider when autoHost=true."
+    );
+  }
 
   const activeHost = useAnchoredMenuState((s) => s.activeHost);
   if (activeHost !== "view") return null;
@@ -77,7 +83,7 @@ export function ViewHost() {
     let cancelled = false;
 
     async function run() {
-      if (!req || !hostRef.current) return;
+      if (!req || !hostRef.current || !actions) return;
       await new Promise((r) => requestAnimationFrame(r));
 
       const refObj = actions.anchors.get(req.id); // ref object
@@ -91,11 +97,33 @@ export function ViewHost() {
 
       const [a, h] = await Promise.all([
         measure(refObj, strategy === "stable" ? { tries } : undefined),
-        measure(hostRef, strategy === "stable" ? { tries } : undefined),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
       ]);
 
       if (cancelled) return;
+      
+      // Validate measurements before using them
+      if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid measurement for anchor "${req.id}". ` +
+              "Menu will not be positioned correctly. This can happen during layout transitions."
+          );
+        }
+        return;
+      }
+
       const nextAnchorWin = applyAnchorMargins(a, refObj);
+      if (!isValidMeasurement(nextAnchorWin)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid anchor measurement after applying margins for "${req.id}".`
+          );
+        }
+        return;
+      }
+
       setAnchorWin(nextAnchorWin);
       setHostWin(h);
       measureCacheRef.current.set(req.id, {
@@ -122,7 +150,7 @@ export function ViewHost() {
         clearTimeout(remeasureTimeoutRef.current);
       }
       remeasureTimeoutRef.current = setTimeout(async () => {
-        if (!req || !hostRef.current) return;
+        if (!req || !hostRef.current || !actions) return;
         const refObj = actions.anchors.get(req.id);
         if (!refObj) return;
 
@@ -134,10 +162,30 @@ export function ViewHost() {
 
         const [a, h] = await Promise.all([
           measure(refObj, strategy === "stable" ? { tries } : undefined),
-          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard show for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard show for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -155,7 +203,7 @@ export function ViewHost() {
         clearTimeout(remeasureTimeoutRef.current);
       }
       remeasureTimeoutRef.current = setTimeout(async () => {
-        if (!req || !hostRef.current) return;
+        if (!req || !hostRef.current || !actions) return;
         const refObj = actions.anchors.get(req.id);
         if (!refObj) return;
 
@@ -167,10 +215,30 @@ export function ViewHost() {
 
         const [a, h] = await Promise.all([
           measure(refObj, strategy === "stable" ? { tries } : undefined),
-          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard hide for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard hide for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -201,6 +269,17 @@ export function ViewHost() {
 
   const position = useMemo(() => {
     if (!req || !anchorInHost) return null;
+    
+    // Validate anchor measurement before computing position
+    if (!isValidMeasurement(anchorInHost)) {
+      if (__DEV__) {
+        console.warn(
+          `[react-native-anchored-menu] Cannot compute position for anchor "${req.id}": invalid measurement.`
+        );
+      }
+      return null;
+    }
+
     const viewport: Viewport | undefined =
       hostSize.width && hostSize.height
         ? {
@@ -211,7 +290,7 @@ export function ViewHost() {
 
     return computeMenuPosition({
       anchor: anchorInHost,
-      menuSize,
+      menuSize: isValidMenuSize(menuSize) ? menuSize : null,
       viewport,
       placement: req.placement ?? "auto",
       offset: req.offset ?? 8,
@@ -221,7 +300,7 @@ export function ViewHost() {
     });
   }, [req, anchorInHost, menuSize, hostSize, keyboardHeight]);
 
-  const needsInitialMeasure = menuSize.width === 0 || menuSize.height === 0;
+  const needsInitialMeasure = !isValidMenuSize(menuSize);
   if (!visible) return null;
 
   return (

package/src/types.ts

@@ -152,6 +152,8 @@ export interface AnchoredMenuProviderProps {
   children: ReactNode;
   defaultHost?: HostType;
   autoHost?: boolean;
+  /** Whether to automatically close menus when app goes to background/inactive (default: true) */
+  autoCloseOnBackground?: boolean;
   /** @deprecated Use defaultHost instead */
   host?: HostType;
 }

package/src/utils/measure.ts

@@ -4,11 +4,14 @@ import type { AnchorMeasurement, AnchorRefObject } from "../types";
 const raf = (): Promise<number> => new Promise((r) => requestAnimationFrame(r));
 
 async function measureInWindowOnce(
-  target: { current: number | null } | number | null
+  target: { current: number | null } | number | null | any
 ): Promise<AnchorMeasurement | null> {
-  const node = findNodeHandle(
-    (target as { current?: number | null })?.current ?? target
-  );
+  // Handle both ref objects and direct node handles
+  const nodeHandle = typeof target === "number" 
+    ? target 
+    : target?.current ?? target;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const node = findNodeHandle(nodeHandle as any);
   if (!node) return null;
   return await new Promise<AnchorMeasurement>((resolve) => {
     // UIManager.measureInWindow callback signature varies by RN version
@@ -24,7 +27,7 @@ async function measureInWindowOnce(
  * Useful for very simple layouts where Android/FlatList flakiness isn't a concern.
  */
 export async function measureInWindowFast(
-  target: { current: number | null } | number | null
+  target: { current: number | null } | number | null | any
 ): Promise<AnchorMeasurement | null> {
   await raf();
   return await measureInWindowOnce(target);
@@ -39,14 +42,21 @@ export interface MeasureOptions {
  * and retries until values stabilize.
  */
 export async function measureInWindowStable(
-  target: { current: number | null } | number | null,
+  target: { current: number | null } | number | null | any,
   { tries = 8 }: MeasureOptions = {}
 ): Promise<AnchorMeasurement | null> {
-  await new Promise((r) => InteractionManager.runAfterInteractions(r));
+  await new Promise<void>((r) => {
+    InteractionManager.runAfterInteractions(() => {
+      r();
+    });
+  });
 
-  const node = findNodeHandle(
-    (target as { current?: number | null })?.current ?? target
-  );
+  // Handle both ref objects and direct node handles
+  const nodeHandle = typeof target === "number" 
+    ? target 
+    : target?.current ?? target;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const node = findNodeHandle(nodeHandle as any);
   if (!node) return null;
 
   let last: AnchorMeasurement | null = null;
@@ -77,7 +87,7 @@ export async function measureInWindowStable(
  * Uses measureInWindow so coords match overlay/Modal window coordinates.
  */
 export async function measureAnchorInWindow(
-  ref: { current: number | null } | number | null
+  ref: { current: number | null } | number | null | any
 ): Promise<AnchorMeasurement | null> {
   return await measureInWindowStable(ref, { tries: 8 });
 }