react-native-anchored-menu 0.0.13 → 0.0.15

package/package.json

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

package/src/core/provider.tsx

@@ -49,11 +49,11 @@ export function AnchoredMenuProvider({
     };
     storeRef.current = {
       getSnapshot: () => snapshot,
-      subscribe: (listener) => {
+      subscribe: (listener: () => void) => {
         listeners.add(listener);
         return () => listeners.delete(listener);
       },
-      _setSnapshot: (next) => {
+      _setSnapshot: (next: MenuState) => {
         snapshot = next;
         listeners.forEach((l) => l());
       },

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.
  *
@@ -9,7 +34,7 @@ import type { MenuState } from "../types";
  *   const isOpen = useAnchoredMenuState(s => s.isOpen)
  */
 export function useAnchoredMenuState<T = MenuState>(
-  selector: (state: MenuState) => T = ((s) => s) as any
+  selector: (state: MenuState) => T = ((s: MenuState) => s) as (state: MenuState) => T
 ): T {
   const store = useContext(AnchoredMenuStateContext);
   if (!store) throw new Error("AnchoredMenuProvider is missing");

package/src/hosts/ModalHost.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Keyboard, Modal, Platform, Pressable, View } from "react-native";
+import { Keyboard, Modal, Platform, Pressable, View, LayoutChangeEvent } from "react-native";
 import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
@@ -44,7 +44,7 @@ export function ModalHost() {
   const [menuSize, setMenuSize] = useState<MenuSize>({ width: 0, height: 0 });
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const measureCacheRef = useRef(new Map<string, MeasureCache>());
-  const remeasureTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const remeasureTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     if (!req) {
@@ -71,7 +71,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,7 +86,8 @@ 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;
@@ -117,7 +118,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,7 +130,8 @@ 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),
         ]);
 
         const nextAnchorWin = applyAnchorMargins(a, refObj);
@@ -150,7 +152,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,7 +164,8 @@ 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),
         ]);
 
         const nextAnchorWin = applyAnchorMargins(a, refObj);
@@ -235,7 +238,7 @@ export function ModalHost() {
         ref={hostRef}
         collapsable={false}
         style={{ flex: 1 }}
-        onLayout={(e) => {
+        onLayout={(e: LayoutChangeEvent) => {
           const { width, height } = e.nativeEvent.layout;
           if (width !== hostSize.width || height !== hostSize.height) {
             setHostSize({ width, height });
@@ -255,7 +258,7 @@ export function ModalHost() {
               }}
               pointerEvents={needsInitialMeasure ? "none" : "auto"}
               onStartShouldSetResponder={() => true}
-              onLayout={(e) => {
+              onLayout={(e: LayoutChangeEvent) => {
                 const { width, height } = e.nativeEvent.layout;
                 if (width !== menuSize.width || height !== menuSize.height) {
                   setMenuSize({ width, height });

package/src/hosts/ViewHost.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Keyboard, Pressable, View } from "react-native";
+import { Keyboard, Pressable, View, LayoutChangeEvent } from "react-native";
 import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
@@ -51,7 +51,7 @@ export function ViewHost() {
   const [menuSize, setMenuSize] = useState<MenuSize>({ width: 0, height: 0 });
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const measureCacheRef = useRef(new Map<string, MeasureCache>());
-  const remeasureTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const remeasureTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     if (!req) {
@@ -77,7 +77,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,7 +91,8 @@ 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;
@@ -122,7 +123,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,7 +135,8 @@ 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),
         ]);
 
         const nextAnchorWin = applyAnchorMargins(a, refObj);
@@ -155,7 +157,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,7 +169,8 @@ 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),
         ]);
 
         const nextAnchorWin = applyAnchorMargins(a, refObj);
@@ -238,12 +241,12 @@ export function ViewHost() {
         elevation: 9999,
       }}
       pointerEvents="box-none"
-      onLayout={(e) => {
-        const { width, height } = e.nativeEvent.layout;
-        if (width !== hostSize.width || height !== hostSize.height) {
-          setHostSize({ width, height });
-        }
-      }}
+            onLayout={(e: LayoutChangeEvent) => {
+              const { width, height } = e.nativeEvent.layout;
+              if (width !== hostSize.width || height !== hostSize.height) {
+                setHostSize({ width, height });
+              }
+            }}
     >
       {/* Tap outside to dismiss */}
       <Pressable style={{ flex: 1 }} onPress={actions.close}>
@@ -260,7 +263,7 @@ export function ViewHost() {
             }}
             pointerEvents={needsInitialMeasure ? "none" : "auto"}
             onStartShouldSetResponder={() => true}
-            onLayout={(e) => {
+            onLayout={(e: LayoutChangeEvent) => {
               const { width, height } = e.nativeEvent.layout;
               if (width !== menuSize.width || height !== menuSize.height) {
                 setMenuSize({ width, height });

package/src/utils/measure.ts

@@ -1,17 +1,22 @@
 import { InteractionManager, UIManager, findNodeHandle } from "react-native";
-import type { AnchorMeasurement, AnchorMargins, AnchorRefObject } from "../types";
+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((resolve) => {
-    UIManager.measureInWindow(node, (x, y, width, height) => {
+  return await new Promise<AnchorMeasurement>((resolve) => {
+    // UIManager.measureInWindow callback signature varies by RN version
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (UIManager.measureInWindow as any)(node, (x: number, y: number, width: number, height: number) => {
       resolve({ pageX: x, pageY: y, width, height });
     });
   });
@@ -22,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);
@@ -37,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;
@@ -75,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 });
 }