@cdx-ui/primitives 0.1.6 → 0.2.0

package/src/utils/createPortal.web.ts

@@ -1,7 +1,8 @@
-import type React from 'react';
+import { createElement, type ReactNode, type ReactPortal } from 'react';
 import { createPortal } from 'react-dom';
+import { TextAncestorContext } from './textAncestor';
 
-type CreatePortalFn = (children: React.ReactNode, container: Element) => React.ReactPortal;
+type CreatePortalFn = (children: ReactNode, container: Element) => ReactPortal;
 
 /**
  * Web implementation — statically imports `ReactDOM.createPortal`.
@@ -14,5 +15,10 @@ type CreatePortalFn = (children: React.ReactNode, container: Element) => React.R
  * layout-animation path, leaving web overlays (Select, DatePicker) stuck at
  * opacity 0. A static ESM import guarantees `createPortalFn` resolves on web
  * regardless of the bundler's CommonJS interop.
+ *
+ * Portaled content leaves the DOM subtree of any `Text` it was rendered from,
+ * so the text-ancestor context is reset; otherwise a `Text` inside an overlay
+ * opened from a `Text` would skip its own typography and inherit nothing.
  */
-export const createPortalFn: CreatePortalFn = createPortal;
+export const createPortalFn: CreatePortalFn = (children, container) =>
+  createPortal(createElement(TextAncestorContext.Provider, { value: false }, children), container);

package/src/utils/textAncestor.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext, type Context } from 'react';
+import * as ReactNative from 'react-native';
+
+/**
+ * React Native's own text-ancestor context: `Text` provides `true`, and `View`
+ * (including the one inside `Modal`) resets it to `false`.
+ *
+ * It is exported as `unstable_`, so a React Native release that drops it falls
+ * back to a context nothing provides — every `Text` then styles itself as
+ * top-level instead of the module failing to load.
+ */
+export const TextAncestorContext: Context<boolean> =
+  (ReactNative as { unstable_TextAncestorContext?: Context<boolean> })
+    .unstable_TextAncestorContext ?? createContext(false);
+
+/** `true` when the calling component renders inside a host `Text`. */
+export function useHasTextAncestor(): boolean {
+  return useContext(TextAncestorContext);
+}

package/src/utils/textAncestor.web.ts

@@ -0,0 +1,19 @@
+import { useContext, type Context } from 'react';
+import RNWTextAncestorContext from 'react-native-web/dist/exports/Text/TextAncestorContext';
+
+/**
+ * React Native Web's text-ancestor context, which its `Text` provides. RNW does
+ * not export it, so this is a deep import. RNW's ESM and CommonJS builds each
+ * create their own context, so this must stay on the ESM path: it is the build
+ * bundlers resolve `react-native-web` to, and the path `babel-preset-expo`
+ * rewrites `react-native` imports to under Jest.
+ *
+ * Unlike native, RNW's `View` does not reset the context — CSS inherits through
+ * an inline `View` inside `Text`. DOM portals reset it in `createPortal.web.ts`.
+ */
+export const TextAncestorContext: Context<boolean> = RNWTextAncestorContext;
+
+/** `true` when the calling component renders inside a host `Text`. */
+export function useHasTextAncestor(): boolean {
+  return useContext(TextAncestorContext);
+}