react-native-anchored-menu 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-anchored-menu",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Headless anchored context menu / popover for React Native (iOS/Android) with stable measurement (default view host).",
   "repository": {
     "type": "git",
@@ -10,8 +10,9 @@
     "url": "https://github.com/mahmoudelfekygithub/react-native-anchored-menu/issues"
   },
   "homepage": "https://github.com/mahmoudelfekygithub/react-native-anchored-menu#readme",
-  "main": "src/index.js",
-  "react-native": "src/index.js",
+  "main": "src/index.ts",
+  "react-native": "src/index.ts",
+  "types": "src/index.ts",
   "files": [
     "src",
     "assets",

package/src/components/AnchoredMenuLayer.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { View } from "react-native";
+import { AnchoredMenuProvider } from "../core/provider";
+import type { AnchoredMenuLayerProps } from "../types";
+
+/**
+ * AnchoredMenuLayer
+ *
+ * A convenience wrapper that ensures the "view" host has a stable layout box to fill.
+ * Use it at app root and inside RN <Modal> (wrap the full-screen modal container).
+ */
+export function AnchoredMenuLayer({
+  children,
+  style,
+  defaultHost = "view",
+  ...providerProps
+}: AnchoredMenuLayerProps) {
+  return (
+    <View style={[{ flex: 1, position: "relative" }, style]}>
+      <AnchoredMenuProvider defaultHost={defaultHost} {...providerProps}>
+        {children}
+      </AnchoredMenuProvider>
+    </View>
+  );
+}
+

package/src/components/MenuAnchor.tsx

@@ -0,0 +1,57 @@
+import React, { useContext, useEffect, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { AnchoredMenuActionsContext } from "../core/context";
+import type { AnchorMargins, AnchorRefObject, MenuAnchorProps } from "../types";
+
+function extractMarginsFromChild(children: React.ReactNode): AnchorMargins {
+  try {
+    const child = React.Children.only(children) as React.ReactElement;
+    const flat = StyleSheet.flatten(child?.props?.style) || {};
+    const mv =
+      typeof flat.marginVertical === "number" ? flat.marginVertical : undefined;
+    const mh =
+      typeof flat.marginHorizontal === "number"
+        ? flat.marginHorizontal
+        : undefined;
+    const m = typeof flat.margin === "number" ? flat.margin : 0;
+
+    const top = (typeof flat.marginTop === "number" ? flat.marginTop : mv) ?? m;
+    const bottom =
+      (typeof flat.marginBottom === "number" ? flat.marginBottom : mv) ?? m;
+    const left =
+      (typeof flat.marginLeft === "number" ? flat.marginLeft : mh) ?? m;
+    const right =
+      (typeof flat.marginRight === "number" ? flat.marginRight : mh) ?? m;
+
+    return { top, bottom, left, right };
+  } catch {
+    return { top: 0, bottom: 0, left: 0, right: 0 };
+  }
+}
+
+export function MenuAnchor({ id, children }: MenuAnchorProps) {
+  const actions = useContext(AnchoredMenuActionsContext);
+  if (!actions) throw new Error("AnchoredMenuProvider is missing");
+
+  const ref = useRef<View>(null) as AnchorRefObject;
+
+  useEffect(() => {
+    // Store child margins on the ref object so measurement can exclude margins.
+    // This avoids offset differences when the anchored child uses e.g. marginBottom.
+    ref.__anchoredMenuMargins = extractMarginsFromChild(children);
+
+    actions.registerAnchor(id, ref);
+
+    return () => {
+      actions.unregisterAnchor(id);
+    };
+  }, [actions, id, children]);
+
+  // collapsable={false} is important for Android measurement reliability
+  return (
+    <View ref={ref} collapsable={false}>
+      {children}
+    </View>
+  );
+}
+

package/src/core/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+import type { MenuActions, MenuStore } from "../types";
+
+/**
+ * Split contexts to avoid re-rendering all anchors when `request` changes.
+ *
+ * - Actions context: stable references (open/close/register/unregister/anchors map)
+ * - State context: request + derived values that change during open/close
+ */
+export const AnchoredMenuActionsContext = createContext<MenuActions | null>(null);
+export const AnchoredMenuStateContext = createContext<MenuStore | null>(null);
+

package/src/core/provider.tsx

@@ -0,0 +1,194 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { Platform } from "react-native";
+import {
+  AnchoredMenuActionsContext,
+  AnchoredMenuStateContext,
+} from "./context";
+import { ModalHost } from "../hosts/ModalHost";
+import { ViewHost } from "../hosts/ViewHost";
+import { isFabricEnabled } from "../utils/runtime";
+import {
+  findAllProvidersForAnchorId,
+  findProviderForAnchorId,
+  registerProvider,
+} from "./providerRegistry";
+import type {
+  AnchoredMenuProviderProps,
+  HostType,
+  MenuRequest,
+  MenuState,
+  MenuStore,
+  OpenMenuOptions,
+} from "../types";
+
+/**
+ * Provider config
+ * - defaultHost: which host to use when `open()` doesn't specify one (default: "view")
+ * - autoHost: automatically mounts the host implementation (default: true)
+ */
+export function AnchoredMenuProvider({
+  children,
+  // backwards compatible alias
+  host,
+  defaultHost = (host ?? "view") as HostType,
+  autoHost = true,
+}: AnchoredMenuProviderProps) {
+  const anchorsRef = useRef(new Map<string, any>()); // id -> ref
+  const pendingOpenRafRef = useRef<number | null>(null);
+  const defaultHostRef = useRef(defaultHost);
+  defaultHostRef.current = defaultHost;
+
+  // Tiny external store so open/close doesn't re-render the whole provider subtree.
+  const storeRef = useRef<MenuStore | null>(null);
+  if (!storeRef.current) {
+    const listeners = new Set<() => void>();
+    let snapshot: MenuState = {
+      request: null,
+      activeHost: defaultHost,
+      isOpen: false,
+    };
+    storeRef.current = {
+      getSnapshot: () => snapshot,
+      subscribe: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      _setSnapshot: (next) => {
+        snapshot = next;
+        listeners.forEach((l) => l());
+      },
+    };
+  }
+
+  const setRequest = useCallback((payload: MenuRequest | null) => {
+    const defaultH = defaultHostRef.current ?? "view";
+    let nextActiveHost: HostType = (payload?.host ?? defaultH) as HostType;
+
+    // Guard: unknown host -> view
+    if (nextActiveHost !== "view" && nextActiveHost !== "modal") {
+      if (__DEV__) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `[react-native-anchored-menu] Unknown host="${String(
+            nextActiveHost
+          )}". Falling back to host="view".`
+        );
+      }
+      nextActiveHost = "view";
+    }
+
+    // Defensive: ModalHost can trigger internal React/Fabric issues in some environments.
+    if (
+      nextActiveHost === "modal" &&
+      isFabricEnabled() &&
+      Platform.OS !== "web"
+    ) {
+      nextActiveHost = "view";
+      if (__DEV__) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[react-native-anchored-menu] host="modal" is disabled when Fabric is enabled; falling back to host="view".'
+        );
+      }
+    }
+
+    storeRef.current!._setSnapshot({
+      request: payload ?? null,
+      activeHost: payload ? nextActiveHost : defaultH,
+      isOpen: !!payload,
+    });
+  }, []);
+
+  const registerAnchor = useCallback((id: string, ref: any) => {
+    anchorsRef.current.set(id, ref);
+  }, []);
+
+  const unregisterAnchor = useCallback((id: string) => {
+    anchorsRef.current.delete(id);
+  }, []);
+
+  // Register this provider globally so parents can route `open({ id })` to the correct layer.
+  useEffect(() => {
+    const entry = { anchors: anchorsRef.current, setRequest };
+    return registerProvider(entry);
+  }, [setRequest]);
+
+  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.
+    if (pendingOpenRafRef.current) {
+      cancelAnimationFrame(pendingOpenRafRef.current);
+      pendingOpenRafRef.current = null;
+    }
+
+    const commit = () => {
+      if (!payload) return setRequest(null);
+
+      // If the anchor isn't registered in this provider, route to a nested provider that has it.
+      const anchorId = payload.id;
+      const hasLocalAnchor = anchorsRef.current?.has?.(anchorId);
+
+      if (!hasLocalAnchor) {
+        const matches = findAllProvidersForAnchorId(anchorId);
+        if (matches.length > 1) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[react-native-anchored-menu] Multiple MenuAnchors registered with id="${anchorId}". ` +
+              "Using the most recently mounted provider. Consider unique ids per screen/modal."
+          );
+        }
+        const target = findProviderForAnchorId(anchorId);
+        if (target && target.setRequest)
+          return target.setRequest(payload as MenuRequest);
+      }
+
+      setRequest(payload as MenuRequest);
+    };
+
+    if (payload?.immediate) commit();
+    else {
+      pendingOpenRafRef.current = requestAnimationFrame(() => {
+        pendingOpenRafRef.current = null;
+        commit();
+      });
+    }
+  }, []);
+
+  const close = useCallback(() => {
+    if (pendingOpenRafRef.current) {
+      cancelAnimationFrame(pendingOpenRafRef.current);
+      pendingOpenRafRef.current = null;
+    }
+    setRequest(null);
+  }, []);
+
+  const actionsValue = useMemo(
+    () => ({
+      anchors: anchorsRef.current,
+      registerAnchor,
+      unregisterAnchor,
+      open,
+      close,
+      // provider config
+      defaultHost,
+    }),
+    [registerAnchor, unregisterAnchor, open, close, defaultHost]
+  );
+
+  const stateStore = storeRef.current;
+
+  return (
+    <AnchoredMenuActionsContext.Provider value={actionsValue}>
+      <AnchoredMenuStateContext.Provider value={stateStore}>
+        {children}
+        {autoHost ? (
+          <>
+            <ModalHost />
+            <ViewHost />
+          </>
+        ) : null}
+      </AnchoredMenuStateContext.Provider>
+    </AnchoredMenuActionsContext.Provider>
+  );
+}
+

package/src/core/providerRegistry.ts

@@ -0,0 +1,45 @@
+import type { ProviderEntry } from "../types";
+
+const providers: ProviderEntry[] = []; // stack order by mount time
+
+export function registerProvider(entry: ProviderEntry): () => void {
+  providers.push(entry);
+  return () => unregisterProvider(entry);
+}
+
+export function unregisterProvider(entry: ProviderEntry): void {
+  const idx = providers.indexOf(entry);
+  if (idx >= 0) providers.splice(idx, 1);
+}
+
+export function findProviderForAnchorId(anchorId: string | null | undefined): ProviderEntry | null {
+  if (!anchorId) return null;
+
+  // Prefer most recently mounted provider that has the anchor id.
+  for (let i = providers.length - 1; i >= 0; i--) {
+    const p = providers[i];
+    try {
+      if (p?.anchors?.has(anchorId)) return p;
+    } catch {
+      // ignore
+    }
+  }
+  return null;
+}
+
+export function findAllProvidersForAnchorId(
+  anchorId: string | null | undefined
+): ProviderEntry[] {
+  const matches: ProviderEntry[] = [];
+  if (!anchorId) return matches;
+  for (let i = 0; i < providers.length; i++) {
+    const p = providers[i];
+    try {
+      if (p?.anchors?.has(anchorId)) matches.push(p);
+    } catch {
+      // ignore
+    }
+  }
+  return matches;
+}
+

package/src/hooks/useAnchoredMenu.ts

@@ -0,0 +1,21 @@
+import { useContext, useMemo } from "react";
+import {
+  AnchoredMenuActionsContext,
+  AnchoredMenuStateContext,
+} from "../core/context";
+
+export function useAnchoredMenu() {
+  const actions = useContext(AnchoredMenuActionsContext);
+  const state = useContext(AnchoredMenuStateContext);
+  if (!actions || !state) throw new Error("AnchoredMenuProvider is missing");
+
+  return useMemo(
+    () => ({
+      open: actions.open,
+      close: actions.close,
+      isOpen: state.getSnapshot().isOpen,
+    }),
+    [actions.open, actions.close, state]
+  );
+}
+

package/src/hooks/useAnchoredMenuActions.ts

@@ -0,0 +1,24 @@
+import { useContext, useMemo } from "react";
+import { AnchoredMenuActionsContext } from "../core/context";
+import type { OpenMenuOptions } from "../types";
+
+/**
+ * Stable actions-only hook.
+ * Components using this won't re-render when menu state changes.
+ */
+export function useAnchoredMenuActions(): {
+  open: (options: OpenMenuOptions) => void;
+  close: () => void;
+} {
+  const actions = useContext(AnchoredMenuActionsContext);
+  if (!actions) throw new Error("AnchoredMenuProvider is missing");
+
+  return useMemo(
+    () => ({
+      open: actions.open,
+      close: actions.close,
+    }),
+    [actions.open, actions.close]
+  );
+}
+

package/src/hooks/useAnchoredMenuState.ts

@@ -0,0 +1,24 @@
+import { useContext, useSyncExternalStore } from "react";
+import { AnchoredMenuStateContext } from "../core/context";
+import type { MenuState } from "../types";
+
+/**
+ * State selector hook.
+ *
+ * Usage:
+ *   const isOpen = useAnchoredMenuState(s => s.isOpen)
+ */
+export function useAnchoredMenuState<T = MenuState>(
+  selector: (state: MenuState) => T = ((s) => s) as any
+): T {
+  const store = useContext(AnchoredMenuStateContext);
+  if (!store) throw new Error("AnchoredMenuProvider is missing");
+
+  const getSelectedSnapshot = () => selector(store.getSnapshot());
+  return useSyncExternalStore(
+    store.subscribe,
+    getSelectedSnapshot,
+    getSelectedSnapshot
+  );
+}
+