@seed-design/react-dismissible-layer 0.0.0-alpha-20260414104312

package/lib/DismissibleLayer-12s-Cz1jvGI2.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { u as useDismissibleLayer } from './useDismissibleLayer-12s-C34wvjXv.js';
+import { D as DismissibleParentContext } from './layer-stack-12s-DjRVp1_u.js';
+
+const DismissibleLayer = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, ...options } = props;
+    const { dismissibleRef, dismissibleProps, layerNode } = useDismissibleLayer(options);
+    return /*#__PURE__*/ jsx(DismissibleParentContext.Provider, {
+        value: layerNode,
+        children: /*#__PURE__*/ jsx(Slot, {
+            ref: composeRefs(ref, dismissibleRef),
+            ...dismissibleProps,
+            children: children
+        })
+    });
+});
+DismissibleLayer.displayName = "DismissibleLayer";
+
+export { DismissibleLayer as D };

package/lib/DismissibleLayer-12s-ZXi0vrlt.cjs

@@ -0,0 +1,23 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var useDismissibleLayer12s = require('./useDismissibleLayer-12s-D4qWttkW.cjs');
+var layerStack12s = require('./layer-stack-12s-Ctg3ipjW.cjs');
+
+const DismissibleLayer = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { children, ...options } = props;
+    const { dismissibleRef, dismissibleProps, layerNode } = useDismissibleLayer12s.useDismissibleLayer(options);
+    return /*#__PURE__*/ jsxRuntime.jsx(layerStack12s.DismissibleParentContext.Provider, {
+        value: layerNode,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactSlot.Slot, {
+            ref: reactComposeRefs.composeRefs(ref, dismissibleRef),
+            ...dismissibleProps,
+            children: children
+        })
+    });
+});
+DismissibleLayer.displayName = "DismissibleLayer";
+
+exports.DismissibleLayer = DismissibleLayer;

package/lib/index.cjs

@@ -0,0 +1,13 @@
+var useDismissibleLayer12s = require('./useDismissibleLayer-12s-D4qWttkW.cjs');
+var DismissibleLayer12s = require('./DismissibleLayer-12s-ZXi0vrlt.cjs');
+var layerStack12s = require('./layer-stack-12s-Ctg3ipjW.cjs');
+
+
+
+exports.useDismissibleLayer = useDismissibleLayer12s.useDismissibleLayer;
+exports.DismissibleLayer = DismissibleLayer12s.DismissibleLayer;
+exports.LayerStackContext = layerStack12s.LayerStackContext;
+exports.addBranch = layerStack12s.addBranch;
+exports.isTopMost = layerStack12s.isTopMost;
+exports.removeBranch = layerStack12s.removeBranch;
+exports.useLayerStackContext = layerStack12s.useLayerStackContext;

package/lib/index.d.ts

@@ -0,0 +1,112 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+interface CascadeDismissDetail {
+    /** The layer node that was removed, causing this cascade dismiss. */
+    dismissedParent: HTMLElement;
+}
+interface Layer {
+    node: HTMLElement;
+    dismiss: (detail: CascadeDismissDetail) => void;
+    blockPointerEvents?: boolean;
+    /**
+     * The parent layer's node. Used to determine cascade-dismiss scope.
+     * Only layers whose parentNode matches the removed layer's node will be
+     * cascade-dismissed. Layers without a parentNode are top-level and never
+     * cascade-dismissed by sibling layer removal.
+     */
+    parentNode?: HTMLElement | null;
+}
+interface LayerStackContextValue {
+    layers: Layer[];
+    branches: HTMLElement[];
+    recentlyRemoved: Set<HTMLElement>;
+}
+/**
+ * Shared layer stack context. No Provider needed — all consumers share the same
+ * default value (mutable arrays/sets). This mirrors Radix's DismissibleLayerContext
+ * pattern, with the option to scope via Provider if needed.
+ */
+declare const LayerStackContext: react.Context<LayerStackContextValue>;
+declare function useLayerStackContext(): LayerStackContextValue;
+declare function isTopMost(ctx: LayerStackContextValue, node: HTMLElement): boolean;
+declare function addBranch(ctx: LayerStackContextValue, node: HTMLElement): void;
+declare function removeBranch(ctx: LayerStackContextValue, node: HTMLElement): void;
+
+interface UseDismissibleLayerOptions {
+    /**
+     * Whether the dismissible layer is active. When false, the layer is not
+     * registered in the stack and no event listeners are attached.
+     */
+    enabled: boolean;
+    /**
+     * When true, disables pointer events on elements outside this layer.
+     * Used for modal overlays (Dialog, BottomSheet).
+     */
+    blockPointerEvents?: boolean;
+    /**
+     * Called when escape key is pressed while this layer is topmost.
+     * Call `event.preventDefault()` to prevent dismiss.
+     */
+    onEscapeKeyDown: (event: KeyboardEvent) => void;
+    /**
+     * Called when a press occurs outside the layer.
+     * Call `event.preventDefault()` to signal that the event is handled.
+     */
+    onPressOutside: (event: PointerEvent | TouchEvent) => void;
+    /**
+     * Called when focus moves outside the layer.
+     * Call `event.preventDefault()` to signal that the event is handled.
+     */
+    onFocusOutside: (event: FocusEvent) => void;
+    /**
+     * Called when a parent layer is removed and this layer should close as a consequence.
+     * Unlike escape/outside/focus callbacks, this is not preventable.
+     */
+    onCascadeDismiss: (detail: CascadeDismissDetail) => void;
+    /**
+     * Custom function to determine if a target should be treated as "inside".
+     * Useful for trigger elements that are outside the layer DOM but should
+     * not trigger dismiss (e.g., Menu trigger).
+     */
+    exclude?: (target: HTMLElement) => boolean;
+    /**
+     * Determines when an outside press triggers dismiss.
+     *
+     * - `"confirm"` (default): Both mouse and touch defer to click.
+     * - `"eager"`: Mouse on pointerdown, touch defers to click.
+     * - `"drag"`: Mouse on pointerdown, touch on drag (>10px immediate, >5px on touchend).
+     */
+    pressBehavior?: "eager" | "confirm" | "drag";
+}
+declare function useDismissibleLayer(options: UseDismissibleLayerOptions): {
+    dismissibleRef: (el: HTMLElement | null) => void;
+    dismissibleProps: {
+        onPointerDownCapture: () => void;
+        onFocusCapture: () => void;
+        onBlurCapture: () => void;
+        style?: undefined;
+    };
+    isTopLayer: boolean;
+    /** The current layer node, for providing DismissibleParentContext to children. */
+    layerNode: HTMLElement | null;
+} | {
+    dismissibleRef: (el: HTMLElement | null) => void;
+    dismissibleProps: {
+        onPointerDownCapture: () => void;
+        onFocusCapture: () => void;
+        onBlurCapture: () => void;
+        style: CSSProperties;
+    };
+    isTopLayer: boolean;
+    /** The current layer node, for providing DismissibleParentContext to children. */
+    layerNode: HTMLElement | null;
+};
+
+interface DismissibleLayerProps extends UseDismissibleLayerOptions {
+    children: React.ReactNode;
+}
+declare const DismissibleLayer: react.ForwardRefExoticComponent<DismissibleLayerProps & react.RefAttributes<HTMLElement>>;
+
+export { DismissibleLayer, LayerStackContext, addBranch, isTopMost, removeBranch, useDismissibleLayer, useLayerStackContext };
+export type { CascadeDismissDetail, DismissibleLayerProps, Layer, LayerStackContextValue, UseDismissibleLayerOptions };

package/lib/index.js

@@ -0,0 +1,3 @@
+export { u as useDismissibleLayer } from './useDismissibleLayer-12s-C34wvjXv.js';
+export { D as DismissibleLayer } from './DismissibleLayer-12s-Cz1jvGI2.js';
+export { f as LayerStackContext, h as addBranch, i as isTopMost, j as removeBranch, u as useLayerStackContext } from './layer-stack-12s-DjRVp1_u.js';

package/lib/layer-stack-12s-Ctg3ipjW.cjs

@@ -0,0 +1,125 @@
+'use client';
+var react = require('react');
+
+const LAYER_UPDATE_EVENT = "seed:dismissible-update";
+/**
+ * Shared layer stack context. No Provider needed — all consumers share the same
+ * default value (mutable arrays/sets). This mirrors Radix's DismissibleLayerContext
+ * pattern, with the option to scope via Provider if needed.
+ */ const LayerStackContext = react.createContext({
+    layers: [],
+    branches: [],
+    recentlyRemoved: new Set()
+});
+function useLayerStackContext() {
+    return react.useContext(LayerStackContext);
+}
+function isTopMost(ctx, node) {
+    return ctx.layers.at(-1)?.node === node;
+}
+function contains(parent, child) {
+    if (!parent || !child) return false;
+    if (!(child instanceof Node)) return false;
+    return parent.contains(child);
+}
+function isInNestedLayer(ctx, node, target) {
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    if (index === -1) return false;
+    const nested = ctx.layers.slice(index + 1);
+    if (nested.some((layer)=>contains(layer.node, target))) return true;
+    // During layer removal, treat all focus events as "inside" to prevent
+    // cascading dismissals from focus transitions (Zag pattern).
+    if (ctx.recentlyRemoved.size > 0) return true;
+    return false;
+}
+function isInBranch(ctx, target) {
+    return ctx.branches.some((branch)=>contains(branch, target));
+}
+function isBelowPointerBlockingLayer(ctx, node) {
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    const blockingLayers = ctx.layers.filter((l)=>l.blockPointerEvents);
+    const highestBlocking = blockingLayers.at(-1);
+    if (!highestBlocking) return false;
+    const highestBlockingIndex = ctx.layers.indexOf(highestBlocking);
+    return index < highestBlockingIndex;
+}
+function getPointerEventsEnabled(ctx, node) {
+    const hasBlocking = ctx.layers.some((l)=>l.blockPointerEvents);
+    if (!hasBlocking) return true;
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    const blockingLayers = ctx.layers.filter((l)=>l.blockPointerEvents);
+    const highestBlocking = blockingLayers.at(-1);
+    if (!highestBlocking) return true;
+    const highestBlockingIndex = ctx.layers.indexOf(highestBlocking);
+    return index >= highestBlockingIndex;
+}
+function notifyLayerChange() {
+    document.dispatchEvent(new CustomEvent(LAYER_UPDATE_EVENT));
+}
+function addLayer(ctx, layer) {
+    // Guard against double-registration (e.g., React strict mode re-running effects).
+    const existing = ctx.layers.findIndex((l)=>l.node === layer.node);
+    if (existing >= 0) ctx.layers.splice(existing, 1);
+    ctx.layers.push(layer);
+    notifyLayerChange();
+}
+function removeLayer(ctx, node) {
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    if (index < 0) return;
+    // Track recently removed to handle focus race conditions during cleanup.
+    // This prevents parent layers from incorrectly dismissing when focus
+    // moves from a closing nested layer.
+    ctx.recentlyRemoved.add(node);
+    queueMicrotask(()=>ctx.recentlyRemoved.delete(node));
+    // Cascade-dismiss only layers that declare this node as their parent.
+    // This prevents sibling layers (independent menus, dialogs, etc.) from
+    // being incorrectly dismissed when an unrelated layer closes.
+    // Transitive children are handled by their own removeLayer calls.
+    const children = ctx.layers.filter((l)=>l.parentNode === node);
+    for (const child of children){
+        child.dismiss({
+            dismissedParent: node
+        });
+    }
+    // Re-compute index: cascade-dismiss may have recursively removed layers,
+    // shifting the target's position in the array. In React, parents mount
+    // before children so children are always at higher indices — but this is
+    // a pure data structure with no React dependency, so we defend against
+    // arbitrary insertion order.
+    const freshIndex = ctx.layers.findIndex((l)=>l.node === node);
+    if (freshIndex >= 0) ctx.layers.splice(freshIndex, 1);
+    notifyLayerChange();
+}
+/**
+ * React context that propagates a parent dismissible layer's node down the
+ * React tree (including through portals). Nested dismissible layers read this
+ * to register as children of the parent, enabling correct cascade-dismiss
+ * behavior without affecting unrelated sibling layers.
+ *
+ * Follows the same pattern as base-ui's FloatingNodeContext.
+ */ const DismissibleParentContext = react.createContext(null);
+function useDismissibleParentNode() {
+    return react.useContext(DismissibleParentContext);
+}
+function addBranch(ctx, node) {
+    ctx.branches.push(node);
+}
+function removeBranch(ctx, node) {
+    const index = ctx.branches.indexOf(node);
+    if (index >= 0) ctx.branches.splice(index, 1);
+}
+
+exports.DismissibleParentContext = DismissibleParentContext;
+exports.LAYER_UPDATE_EVENT = LAYER_UPDATE_EVENT;
+exports.LayerStackContext = LayerStackContext;
+exports.addBranch = addBranch;
+exports.addLayer = addLayer;
+exports.getPointerEventsEnabled = getPointerEventsEnabled;
+exports.isBelowPointerBlockingLayer = isBelowPointerBlockingLayer;
+exports.isInBranch = isInBranch;
+exports.isInNestedLayer = isInNestedLayer;
+exports.isTopMost = isTopMost;
+exports.removeBranch = removeBranch;
+exports.removeLayer = removeLayer;
+exports.useDismissibleParentNode = useDismissibleParentNode;
+exports.useLayerStackContext = useLayerStackContext;

package/lib/layer-stack-12s-DjRVp1_u.js

@@ -0,0 +1,112 @@
+'use client';
+import { createContext, useContext } from 'react';
+
+const LAYER_UPDATE_EVENT = "seed:dismissible-update";
+/**
+ * Shared layer stack context. No Provider needed — all consumers share the same
+ * default value (mutable arrays/sets). This mirrors Radix's DismissibleLayerContext
+ * pattern, with the option to scope via Provider if needed.
+ */ const LayerStackContext = createContext({
+    layers: [],
+    branches: [],
+    recentlyRemoved: new Set()
+});
+function useLayerStackContext() {
+    return useContext(LayerStackContext);
+}
+function isTopMost(ctx, node) {
+    return ctx.layers.at(-1)?.node === node;
+}
+function contains(parent, child) {
+    if (!parent || !child) return false;
+    if (!(child instanceof Node)) return false;
+    return parent.contains(child);
+}
+function isInNestedLayer(ctx, node, target) {
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    if (index === -1) return false;
+    const nested = ctx.layers.slice(index + 1);
+    if (nested.some((layer)=>contains(layer.node, target))) return true;
+    // During layer removal, treat all focus events as "inside" to prevent
+    // cascading dismissals from focus transitions (Zag pattern).
+    if (ctx.recentlyRemoved.size > 0) return true;
+    return false;
+}
+function isInBranch(ctx, target) {
+    return ctx.branches.some((branch)=>contains(branch, target));
+}
+function isBelowPointerBlockingLayer(ctx, node) {
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    const blockingLayers = ctx.layers.filter((l)=>l.blockPointerEvents);
+    const highestBlocking = blockingLayers.at(-1);
+    if (!highestBlocking) return false;
+    const highestBlockingIndex = ctx.layers.indexOf(highestBlocking);
+    return index < highestBlockingIndex;
+}
+function getPointerEventsEnabled(ctx, node) {
+    const hasBlocking = ctx.layers.some((l)=>l.blockPointerEvents);
+    if (!hasBlocking) return true;
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    const blockingLayers = ctx.layers.filter((l)=>l.blockPointerEvents);
+    const highestBlocking = blockingLayers.at(-1);
+    if (!highestBlocking) return true;
+    const highestBlockingIndex = ctx.layers.indexOf(highestBlocking);
+    return index >= highestBlockingIndex;
+}
+function notifyLayerChange() {
+    document.dispatchEvent(new CustomEvent(LAYER_UPDATE_EVENT));
+}
+function addLayer(ctx, layer) {
+    // Guard against double-registration (e.g., React strict mode re-running effects).
+    const existing = ctx.layers.findIndex((l)=>l.node === layer.node);
+    if (existing >= 0) ctx.layers.splice(existing, 1);
+    ctx.layers.push(layer);
+    notifyLayerChange();
+}
+function removeLayer(ctx, node) {
+    const index = ctx.layers.findIndex((l)=>l.node === node);
+    if (index < 0) return;
+    // Track recently removed to handle focus race conditions during cleanup.
+    // This prevents parent layers from incorrectly dismissing when focus
+    // moves from a closing nested layer.
+    ctx.recentlyRemoved.add(node);
+    queueMicrotask(()=>ctx.recentlyRemoved.delete(node));
+    // Cascade-dismiss only layers that declare this node as their parent.
+    // This prevents sibling layers (independent menus, dialogs, etc.) from
+    // being incorrectly dismissed when an unrelated layer closes.
+    // Transitive children are handled by their own removeLayer calls.
+    const children = ctx.layers.filter((l)=>l.parentNode === node);
+    for (const child of children){
+        child.dismiss({
+            dismissedParent: node
+        });
+    }
+    // Re-compute index: cascade-dismiss may have recursively removed layers,
+    // shifting the target's position in the array. In React, parents mount
+    // before children so children are always at higher indices — but this is
+    // a pure data structure with no React dependency, so we defend against
+    // arbitrary insertion order.
+    const freshIndex = ctx.layers.findIndex((l)=>l.node === node);
+    if (freshIndex >= 0) ctx.layers.splice(freshIndex, 1);
+    notifyLayerChange();
+}
+/**
+ * React context that propagates a parent dismissible layer's node down the
+ * React tree (including through portals). Nested dismissible layers read this
+ * to register as children of the parent, enabling correct cascade-dismiss
+ * behavior without affecting unrelated sibling layers.
+ *
+ * Follows the same pattern as base-ui's FloatingNodeContext.
+ */ const DismissibleParentContext = createContext(null);
+function useDismissibleParentNode() {
+    return useContext(DismissibleParentContext);
+}
+function addBranch(ctx, node) {
+    ctx.branches.push(node);
+}
+function removeBranch(ctx, node) {
+    const index = ctx.branches.indexOf(node);
+    if (index >= 0) ctx.branches.splice(index, 1);
+}
+
+export { DismissibleParentContext as D, LAYER_UPDATE_EVENT as L, isInBranch as a, isInNestedLayer as b, isBelowPointerBlockingLayer as c, useDismissibleParentNode as d, addLayer as e, LayerStackContext as f, getPointerEventsEnabled as g, addBranch as h, isTopMost as i, removeBranch as j, removeLayer as r, useLayerStackContext as u };

package/lib/use-escape-keydown-12s-Bl_her-_.js

@@ -0,0 +1,31 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import { i as isTopMost } from './layer-stack-12s-DjRVp1_u.js';
+
+/**
+ * Tracks escape keydown on the document (capture phase).
+ * Only fires callback when the given node is the topmost layer.
+ */ function useEscapeKeydown(node, ctx, onEscapeKeyDown) {
+    const callbackRef = useRef(onEscapeKeyDown);
+    callbackRef.current = onEscapeKeyDown;
+    useEffect(()=>{
+        if (!node) return;
+        const handler = (event)=>{
+            if (event.key !== "Escape") return;
+            if (event.isComposing) return;
+            if (!isTopMost(ctx, node)) return;
+            callbackRef.current(event);
+        };
+        document.addEventListener("keydown", handler, {
+            capture: true
+        });
+        return ()=>document.removeEventListener("keydown", handler, {
+                capture: true
+            });
+    }, [
+        node,
+        ctx
+    ]);
+}
+
+export { useEscapeKeydown as u };

package/lib/use-escape-keydown-12s-CNZqs1dI.cjs

@@ -0,0 +1,31 @@
+'use client';
+var react = require('react');
+var layerStack12s = require('./layer-stack-12s-Ctg3ipjW.cjs');
+
+/**
+ * Tracks escape keydown on the document (capture phase).
+ * Only fires callback when the given node is the topmost layer.
+ */ function useEscapeKeydown(node, ctx, onEscapeKeyDown) {
+    const callbackRef = react.useRef(onEscapeKeyDown);
+    callbackRef.current = onEscapeKeyDown;
+    react.useEffect(()=>{
+        if (!node) return;
+        const handler = (event)=>{
+            if (event.key !== "Escape") return;
+            if (event.isComposing) return;
+            if (!layerStack12s.isTopMost(ctx, node)) return;
+            callbackRef.current(event);
+        };
+        document.addEventListener("keydown", handler, {
+            capture: true
+        });
+        return ()=>document.removeEventListener("keydown", handler, {
+                capture: true
+            });
+    }, [
+        node,
+        ctx
+    ]);
+}
+
+exports.useEscapeKeydown = useEscapeKeydown;

package/lib/use-focus-outside-12s-Ch-SoiiA.cjs

@@ -0,0 +1,48 @@
+'use client';
+var react = require('react');
+var layerStack12s = require('./layer-stack-12s-Ctg3ipjW.cjs');
+
+/**
+ * Detects focus events outside a React subtree.
+ * Uses `onFocusCapture`/`onBlurCapture` for React-tree-based detection.
+ *
+ * Ported from Radix's useFocusOutside with layer stack integration.
+ */ function useFocusOutside(node, ctx, options) {
+    const callbackRef = react.useRef(options.onFocusOutside);
+    callbackRef.current = options.onFocusOutside;
+    const excludeRef = react.useRef(options.exclude);
+    excludeRef.current = options.exclude;
+    const isFocusInsideReactTreeRef = react.useRef(false);
+    react.useEffect(()=>{
+        if (!node || !options.enabled) return;
+        const ownerDocument = node.ownerDocument ?? document;
+        const handleFocus = (event)=>{
+            const target = event.target;
+            if (target && !isFocusInsideReactTreeRef.current) {
+                if (layerStack12s.isInBranch(ctx, target)) return;
+                if (layerStack12s.isInNestedLayer(ctx, node, target)) return;
+                if (target instanceof HTMLElement && excludeRef.current?.(target)) return;
+                callbackRef.current(event);
+            }
+        };
+        ownerDocument.addEventListener("focusin", handleFocus);
+        return ()=>{
+            ownerDocument.removeEventListener("focusin", handleFocus);
+            isFocusInsideReactTreeRef.current = false;
+        };
+    }, [
+        node,
+        ctx,
+        options.enabled
+    ]);
+    return {
+        onFocusCapture: ()=>{
+            isFocusInsideReactTreeRef.current = true;
+        },
+        onBlurCapture: ()=>{
+            isFocusInsideReactTreeRef.current = false;
+        }
+    };
+}
+
+exports.useFocusOutside = useFocusOutside;

package/lib/use-focus-outside-12s-LpFt7UjO.js

@@ -0,0 +1,48 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import { a as isInBranch, b as isInNestedLayer } from './layer-stack-12s-DjRVp1_u.js';
+
+/**
+ * Detects focus events outside a React subtree.
+ * Uses `onFocusCapture`/`onBlurCapture` for React-tree-based detection.
+ *
+ * Ported from Radix's useFocusOutside with layer stack integration.
+ */ function useFocusOutside(node, ctx, options) {
+    const callbackRef = useRef(options.onFocusOutside);
+    callbackRef.current = options.onFocusOutside;
+    const excludeRef = useRef(options.exclude);
+    excludeRef.current = options.exclude;
+    const isFocusInsideReactTreeRef = useRef(false);
+    useEffect(()=>{
+        if (!node || !options.enabled) return;
+        const ownerDocument = node.ownerDocument ?? document;
+        const handleFocus = (event)=>{
+            const target = event.target;
+            if (target && !isFocusInsideReactTreeRef.current) {
+                if (isInBranch(ctx, target)) return;
+                if (isInNestedLayer(ctx, node, target)) return;
+                if (target instanceof HTMLElement && excludeRef.current?.(target)) return;
+                callbackRef.current(event);
+            }
+        };
+        ownerDocument.addEventListener("focusin", handleFocus);
+        return ()=>{
+            ownerDocument.removeEventListener("focusin", handleFocus);
+            isFocusInsideReactTreeRef.current = false;
+        };
+    }, [
+        node,
+        ctx,
+        options.enabled
+    ]);
+    return {
+        onFocusCapture: ()=>{
+            isFocusInsideReactTreeRef.current = true;
+        },
+        onBlurCapture: ()=>{
+            isFocusInsideReactTreeRef.current = false;
+        }
+    };
+}
+
+export { useFocusOutside as u };