@radix-ng/primitives 1.0.0-beta.3 → 1.0.0-beta.5

package/fesm2022/radix-ng-primitives-dismissable-layer.mjs

@@ -1,26 +1,527 @@
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, input, booleanAttribute, linkedSignal, output, inject, ElementRef, effect, Directive, DestroyRef, afterNextRender, Injector, untracked } from '@angular/core';
+import { inject, DestroyRef, PLATFORM_ID, ElementRef, Directive, input, booleanAttribute, linkedSignal, output, signal, effect, afterNextRender } from '@angular/core';
+import { RDX_FLOATING_MARKER } from '@radix-ng/primitives/floating-focus-manager';
+import { RDX_FLOATING_ROOT_CONTEXT } from '@radix-ng/primitives/core';
 
-const RdxDismissableLayersContextToken = new InjectionToken('RdxDismissableLayersContextToken', {
-    factory() {
-        const layersRoot = signal([], ...(ngDevMode ? [{ debugName: "layersRoot" }] : /* istanbul ignore next */ []));
-        return {
-            layersRoot,
-            layersWithOutsidePointerEventsDisabled: computed(() => layersRoot().filter((i) => i.isOutsidePointerEventsDisabled())),
-            branches: signal([])
-        };
+const alwaysTrue = () => true;
+const alwaysFalse = () => false;
+const sloppy = () => 'sloppy';
+/** Duck-types an `EventTarget` to `Node` (cross-realm-safe; `Node.contains` throws on a non-Node). */
+function isNode(target) {
+    return target !== null && typeof target.nodeType === 'number';
+}
+/**
+ * Owner-document-safe `HTMLElement` check. A raw `target instanceof HTMLElement` is realm-sensitive — it
+ * returns `false` for an element from another document (iframe / popup window) because that realm has its
+ * own `HTMLElement` constructor. Resolve the constructor from the node's own `defaultView` (Base UI
+ * `isHTMLElement`).
+ */
+function isHTMLElement(target) {
+    if (!isNode(target)) {
+        return false;
+    }
+    const view = target.ownerDocument?.defaultView;
+    return view ? target instanceof view.HTMLElement : target instanceof HTMLElement;
+}
+/** Owner-document-safe `Element` check for SVG/custom-element outside targets. */
+function isElement(target) {
+    if (!isNode(target)) {
+        return false;
+    }
+    const view = target.ownerDocument?.defaultView;
+    return view ? target instanceof view.Element : target instanceof Element;
+}
+/**
+ * Whether `window` is a WebKit (Safari / any iOS browser) engine — its IME `compositionend`/`keydown`
+ * ordering needs a longer guard. Requires the `Safari` token and excludes desktop Blink (Chrome /
+ * Edge / Android), so jsdom (`AppleWebKit/537.36 … jsdom`, no `Safari`) is correctly **not** WebKit and
+ * the unit timing stays 0ms.
+ */
+function isWebKit(window) {
+    const ua = window.navigator.userAgent;
+    return /AppleWebKit/i.test(ua) && /Safari/i.test(ua) && !/Chrome|Chromium|Edg|Android/i.test(ua);
+}
+/** Only a primary (left / default) press dismisses — a non-primary mouse button is ignored. */
+function isPrimaryButton(event) {
+    return !('button' in event) || event.button === 0;
+}
+function isRootElement(element) {
+    const document = element.ownerDocument;
+    return element === document.documentElement || element === document.body;
+}
+function isShadowRoot(value) {
+    return value !== null && value.nodeType === 11 && 'host' in value;
+}
+function getParentNode(element) {
+    const parent = element.parentNode;
+    if (parent) {
+        return parent;
+    }
+    const root = element.getRootNode();
+    return isShadowRoot(root) ? root.host : null;
+}
+function isLastTraversableNode(node) {
+    return (node === null ||
+        node.nodeType === Node.DOCUMENT_NODE ||
+        isShadowRoot(node) ||
+        (isElement(node) && isRootElement(node)));
+}
+function getTargetRootAncestor(target) {
+    let ancestor = target;
+    while (!isLastTraversableNode(ancestor)) {
+        const parent = getParentNode(ancestor);
+        if (isLastTraversableNode(parent) || !isElement(parent)) {
+            break;
+        }
+        ancestor = parent;
+    }
+    return ancestor;
+}
+/**
+ * Base UI third-party guard: ignore elements injected after `markOthers` ran. A normal outside target sits
+ * in a root subtree that contains at least one marker; an injected root does not.
+ */
+function isInjectedAfterMark(target, context) {
+    if (!isElement(target) || isRootElement(target)) {
+        return false;
     }
-});
-const RdxDismissableLayerConfigToken = new InjectionToken('RdxDismissableLayerConfig', {
-    factory: () => {
-        return {
-            disableOutsidePointerEvents: signal(false)
+    if (target.closest('[data-rdx-internal-backdrop], [data-rdx-menu-internal-backdrop], [data-rdx-dialog-internal-backdrop]')) {
+        return false;
+    }
+    const targetRoot = target.getRootNode();
+    const queryRoot = isShadowRoot(targetRoot) ? targetRoot : context.ownerDocument;
+    const markers = Array.from(queryRoot.querySelectorAll(`[${RDX_FLOATING_MARKER}]`));
+    if (markers.length === 0) {
+        return false;
+    }
+    const floating = context.floatingElement;
+    if (floating && target.contains(floating)) {
+        return false;
+    }
+    const targetRootAncestor = getTargetRootAncestor(target);
+    return markers.every((marker) => !targetRootAncestor.contains(marker));
+}
+/**
+ * Whether the press landed on `target`'s scrollbar (a scrollbar drag must not dismiss). Mirrors Base
+ * UI's geometry check (`useDismiss.ts`): skipped for touch (scrollbars get no touch events) and resolved
+ * from the element's scroll metrics + the press offset.
+ *
+ * @remarks Layout-dependent — verified by Playwright, not jsdom (which reports zero box metrics, so this
+ * correctly returns `false` there). See `apps/visual-regression`.
+ */
+function isScrollbarPress(event) {
+    const target = event.target;
+    if (!isHTMLElement(target) || 'touches' in event || typeof event.offsetX !== 'number') {
+        return false;
+    }
+    const view = target.ownerDocument.defaultView;
+    if (!view) {
+        return false;
+    }
+    const press = event;
+    const style = view.getComputedStyle(target);
+    const scrollable = /auto|scroll/;
+    const lastTraversableNode = isLastTraversableNode(target);
+    const isScrollableX = lastTraversableNode || scrollable.test(style.overflowX);
+    const isScrollableY = lastTraversableNode || scrollable.test(style.overflowY);
+    const canScrollX = isScrollableX && target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
+    const canScrollY = isScrollableY && target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
+    const isRtl = style.direction === 'rtl';
+    const onVerticalScrollbar = canScrollY &&
+        (isRtl ? press.offsetX <= target.offsetWidth - target.clientWidth : press.offsetX > target.clientWidth);
+    const onHorizontalScrollbar = canScrollX && press.offsetY > target.clientHeight;
+    return onVerticalScrollbar || onHorizontalScrollbar;
+}
+/**
+ * Each capability publishes its bubbles policy here, keyed by its root context, so an **ancestor**'s
+ * `hasBlockingChild` can read a child's flags — the Angular counterpart of Base UI storing
+ * `__escapeKeyBubbles` / `__outsidePressBubbles` on the context's `dataRef` (`useDismiss.ts`). Kept in a
+ * dismissal-private `WeakMap` (not on the neutral context) so the context stays capability-agnostic.
+ */
+const dismissBubblesByContext = new WeakMap();
+/**
+ * Whether a child `context` lets the given event bubble past it to its ancestors. Defaults match Base
+ * UI for a child that has no dismissal policy (e.g. focus-only): Escape does **not** bubble (so it
+ * blocks), an outside press **does** (so it does not block).
+ */
+function childBubbles(context, reason) {
+    const bubbles = dismissBubblesByContext.get(context);
+    if (reason === 'escape-key') {
+        return bubbles ? bubbles.escapeKey() : false;
+    }
+    return bubbles ? bubbles.outsidePress() : true;
+}
+/**
+ * The **dismiss** mechanism (ADR 0015) — the Angular counterpart of Base UI's `useDismiss`. It
+ * **references** a {@link RdxFloatingRootContext} (mandatory: `open` / `triggers` / elements live there)
+ * and a {@link RdxFloatingNode} (**optional**: a node-optional / Navigation-Menu state has `node ===
+ * null`); it never creates them. It listens for Escape / outside-press / focus-out and **requests** a
+ * dismissal via `onDismiss` when an interaction lands outside the logical layer and this layer owns the
+ * event.
+ *
+ * **Logical, not DOM-order, containment.** "Inside" is resolved through the shared tree — this popup's
+ * floating element + its registered triggers, **plus** the same for every open descendant node, **plus**
+ * this layer's own {@link branches}. So a portal-relocated child still counts as inside its parent — which
+ * a DOM-order containment check cannot do.
+ *
+ * **Ownership & propagation (`hasBlockingChild`).** Each layer publishes per-event `bubbles` flags
+ * (`escapeKeyBubbles` default `false`, `outsidePressBubbles` default `true`); an ancestor reads its open
+ * children's flags via {@link childBubbles}. A non-bubbling layer **yields** to a non-bubbling open child,
+ * so by default Escape closes only the **deepest** layer while an outside press closes the **whole stack**.
+ * A layer with `escapeKeyBubbles = true` re-emits to its parent (Menu's `closeParentOnEsc`). The owning
+ * non-bubbling Escape layer also `stopPropagation()`s so the key does not reach app handlers.
+ *
+ * **Press / IME hardening.** Outside-press honors `outsidePressEvent` (`'sloppy'` → `pointerdown`,
+ * `'intentional'` → `click` with press-start-inside drag-out suppression), ignores non-primary mouse
+ * buttons and scrollbar presses, resets on `pointercancel`, and ignores Escape while an IME composition is
+ * active. **Touch** sloppy-mode gesture hardening (long-press / drag-distance thresholds) is ported here
+ * but only unit-exercisable via synthetic events — real on-device behavior is covered by
+ * `apps/visual-regression` (Playwright).
+ *
+ * **Scope.** Must be constructed in an injection context (`DestroyRef` / `PLATFORM_ID`). No-op on the
+ * server.
+ */
+class RdxDismiss {
+    constructor(context, node, config = {}) {
+        this.context = context;
+        this.node = node;
+        /** This layer's own inside-content set (branches that live outside the popup DOM). */
+        this.branches = new Set();
+        const enabled = config.enabled ?? alwaysTrue;
+        const escapeKey = config.escapeKey ?? alwaysTrue;
+        const escapeKeyBubbles = config.escapeKeyBubbles ?? alwaysFalse;
+        const outsidePress = config.outsidePress ?? alwaysTrue;
+        const outsidePressBubbles = config.outsidePressBubbles ?? alwaysTrue;
+        const outsidePressEvent = config.outsidePressEvent ?? sloppy;
+        const focusOutside = config.focusOutside ?? alwaysTrue;
+        // Plain function (not `computed`) so it re-reads `open()` per event even when `open` is not a
+        // signal — while still tracking signals when read inside a reactive context.
+        this.active = () => this.context.open() && enabled();
+        // Publish this layer's bubbles policy so an ANCESTOR's hasBlockingChild can read it. Registered
+        // (and cleaned up) regardless of platform so SSR leaves no stale entry.
+        dismissBubblesByContext.set(this.context, { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles });
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => dismissBubblesByContext.delete(this.context));
+        if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+            return; // SSR: no listeners, no DOM access.
+        }
+        const ownerDocument = this.context.ownerDocument;
+        const ownerWindow = ownerDocument.defaultView ?? globalThis;
+        const dismiss = (reason, event) => {
+            config.onDismiss?.(reason, event);
+        };
+        // IME: a press of Escape while composing should close the compose menu, not the popup.
+        let isComposing = false;
+        // Press-start-inside tracking (drag-out suppression for `intentional` mode).
+        let pressStartedInside = false;
+        // Pointer type of the active press, used to resolve a per-pointer-type `outsidePressEvent` map.
+        let currentPointerType = '';
+        // Touch outside-press hardening (Base UI `useDismiss`). For touch, a `sloppy` outside-press is
+        // NOT decided on the initial `pointerdown` (that would dismiss the moment a finger lands, even on
+        // the start of a scroll): a small drag (>5px) arms a close on `touchend`, a larger one (>10px)
+        // closes immediately (the user is scrolling away), and a plain tap closes via the synthetic
+        // `mousedown` that follows — unless the finger is held past a 1s grace window (a long-press).
+        let touchState = null;
+        let touchGraceTimer;
+        let touchClearTimer;
+        const clearTouchTimers = () => {
+            ownerWindow.clearTimeout(touchGraceTimer);
+            ownerWindow.clearTimeout(touchClearTimer);
         };
+        // Resolve `outsidePressEvent` to a concrete mode for the active pointer type (pen / unknown → mouse).
+        const resolveOutsidePressEvent = () => {
+            const value = outsidePressEvent();
+            if (typeof value === 'string') {
+                return value;
+            }
+            const type = currentPointerType === 'pen' || currentPointerType === '' ? 'mouse' : currentPointerType;
+            return value[type] ?? 'sloppy';
+        };
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Escape' || !this.active() || !escapeKey() || isComposing) {
+                return;
+            }
+            // A non-bubbling layer yields to a deeper non-bubbling open layer (Base UI:
+            // `!escapeKeyBubbles && hasBlockingChild`). A bubbling layer never yields.
+            if (!escapeKeyBubbles() && this.hasBlockingChild('escape-key')) {
+                return;
+            }
+            config.onEscapeKeyDown?.(event);
+            if (!event.defaultPrevented) {
+                dismiss('escape-key', event);
+            }
+            // Propagation control: the owning non-bubbling layer consumes the Escape so it does not
+            // reach ancestor layers / app-level handlers (Base UI `event.stopPropagation()`).
+            if (!escapeKeyBubbles()) {
+                event.stopPropagation();
+            }
+        };
+        const handleCompositionStart = () => {
+            isComposing = true;
+        };
+        const handleCompositionEnd = () => {
+            // Safari fires `compositionend` before `keydown`, so clear on a later tick. 0ms/1ms are
+            // unreliable in Safari — WebKit needs ~5ms; other engines stay at 0ms (Base UI `useDismiss`).
+            ownerWindow.setTimeout(() => {
+                isComposing = false;
+            }, isWebKit(ownerWindow) ? 5 : 0);
+        };
+        const tryOutsidePress = (event) => {
+            if (!this.active() || !isPrimaryButton(event) || this.isInside(event.target) || !outsidePress(event)) {
+                return;
+            }
+            if (isInjectedAfterMark(event.target, this.context)) {
+                return;
+            }
+            if (isScrollbarPress(event)) {
+                return; // a scrollbar drag is not an outside press
+            }
+            // By default outside-press bubbles (closes the whole stack); only a non-bubbling layer with
+            // a non-bubbling open child yields to it.
+            if (!outsidePressBubbles() && this.hasBlockingChild('outside-press')) {
+                return;
+            }
+            config.onPointerDownOutside?.(event);
+            if (!event.defaultPrevented) {
+                dismiss('outside-press', event);
+            }
+        };
+        // Capture-phase, so it records where the press began (and its pointer type) before any dismiss
+        // handler runs.
+        const handlePressStart = (event) => {
+            pressStartedInside = this.isInside(event.target);
+            currentPointerType = event.pointerType || '';
+        };
+        const handlePointerCancel = () => {
+            pressStartedInside = false;
+        };
+        const handlePointerDown = (event) => {
+            if (resolveOutsidePressEvent() !== 'sloppy') {
+                return; // `intentional` dismisses on click, not pointerdown
+            }
+            if (event.pointerType === 'touch') {
+                return; // touch is decided by the touchstart/move/end + synthetic-mousedown machine below
+            }
+            tryOutsidePress(event);
+        };
+        const handleClick = (event) => {
+            if (resolveOutsidePressEvent() !== 'intentional') {
+                return;
+            }
+            // A press that started inside (text selection dragged out) consumes its one outside click.
+            if (pressStartedInside) {
+                pressStartedInside = false;
+                return;
+            }
+            tryOutsidePress(event);
+        };
+        // ─── Touch sloppy-mode hardening (Base UI `useDismiss`) ───────────────────
+        const handleTouchStart = (event) => {
+            currentPointerType = 'touch'; // a touch's pointer type, independent of pointerdown ordering
+            if (resolveOutsidePressEvent() !== 'sloppy' || !this.active() || this.isInside(event.target)) {
+                return;
+            }
+            const touch = event.touches?.[0];
+            if (!touch) {
+                return;
+            }
+            clearTouchTimers();
+            touchState = {
+                startX: touch.clientX,
+                startY: touch.clientY,
+                dismissOnTouchEnd: false,
+                dismissOnMouseDown: true
+            };
+            // After 1s the press is a long-press, not a dismissal — disarm both the touchend and the
+            // synthetic-mousedown close.
+            touchGraceTimer = ownerWindow.setTimeout(() => {
+                if (touchState) {
+                    touchState.dismissOnTouchEnd = false;
+                    touchState.dismissOnMouseDown = false;
+                }
+            }, 1000);
+        };
+        const handleTouchMove = (event) => {
+            if (!touchState || resolveOutsidePressEvent() !== 'sloppy' || this.isInside(event.target)) {
+                return;
+            }
+            const touch = event.touches?.[0];
+            if (!touch) {
+                return;
+            }
+            const dx = touch.clientX - touchState.startX;
+            const dy = touch.clientY - touchState.startY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance > 5) {
+                touchState.dismissOnTouchEnd = true; // a deliberate drag — close when the finger lifts
+            }
+            if (distance > 10) {
+                tryOutsidePress(event); // scrolling away — close now
+                clearTouchTimers();
+                touchState = null;
+            }
+        };
+        const handleTouchEnd = (event) => {
+            if (!touchState || resolveOutsidePressEvent() !== 'sloppy' || this.isInside(event.target)) {
+                return;
+            }
+            if (touchState.dismissOnTouchEnd) {
+                tryOutsidePress(event);
+                clearTouchTimers();
+                touchState = null;
+                return;
+            }
+            // A plain tap: defer to the synthetic `mousedown` (which also lets us absorb the click-through),
+            // but drop the state shortly after in case no mouse event follows on this platform.
+            ownerWindow.clearTimeout(touchClearTimer);
+            touchClearTimer = ownerWindow.setTimeout(() => {
+                touchState = null;
+            }, 400);
+        };
+        const handleMouseDown = (event) => {
+            // Only the synthetic `mousedown` that follows a touch is handled here — a real mouse leaves
+            // `touchState` null and is dismissed by `handlePointerDown` instead (no double-close).
+            if (!touchState || resolveOutsidePressEvent() !== 'sloppy') {
+                return;
+            }
+            if (!touchState.dismissOnMouseDown) {
+                touchState = null; // grace expired (long-press) — do not dismiss
+                clearTouchTimers();
+                return;
+            }
+            tryOutsidePress(event);
+            clearTouchTimers();
+            touchState = null;
+        };
+        const handleFocusIn = (event) => {
+            // Defer two microtasks so focus settles before reading containment (matches the standalone
+            // RdxFocusOutside; the `on*` hook still runs synchronously, so `preventDefault` is honored).
+            void Promise.resolve()
+                .then(() => Promise.resolve())
+                .then(() => {
+                if (!this.active() || !focusOutside() || this.isInside(event.target)) {
+                    return;
+                }
+                config.onFocusOutside?.(event);
+                if (!event.defaultPrevented) {
+                    dismiss('focus-outside', event);
+                }
+            });
+        };
+        ownerDocument.addEventListener('keydown', handleKeyDown, { capture: true });
+        ownerDocument.addEventListener('compositionstart', handleCompositionStart, { capture: true });
+        ownerDocument.addEventListener('compositionend', handleCompositionEnd, { capture: true });
+        ownerDocument.addEventListener('focusin', handleFocusIn);
+        ownerDocument.addEventListener('pointerdown', handlePressStart, { capture: true });
+        ownerDocument.addEventListener('pointercancel', handlePointerCancel, { capture: true });
+        // Defer attaching the dismiss listeners past the current event loop so the very interaction that
+        // opened this layer doesn't immediately dismiss it (the opening press is still propagating).
+        const pointerTimer = ownerWindow.setTimeout(() => {
+            ownerDocument.addEventListener('pointerdown', handlePointerDown);
+            ownerDocument.addEventListener('click', handleClick);
+            ownerDocument.addEventListener('touchstart', handleTouchStart, { capture: true, passive: true });
+            ownerDocument.addEventListener('touchmove', handleTouchMove, { capture: true, passive: true });
+            ownerDocument.addEventListener('touchend', handleTouchEnd, { capture: true, passive: true });
+            ownerDocument.addEventListener('mousedown', handleMouseDown, { capture: true });
+        }, 0);
+        destroyRef.onDestroy(() => {
+            ownerWindow.clearTimeout(pointerTimer);
+            ownerDocument.removeEventListener('keydown', handleKeyDown, { capture: true });
+            ownerDocument.removeEventListener('compositionstart', handleCompositionStart, { capture: true });
+            ownerDocument.removeEventListener('compositionend', handleCompositionEnd, { capture: true });
+            ownerDocument.removeEventListener('focusin', handleFocusIn);
+            ownerDocument.removeEventListener('pointerdown', handlePressStart, { capture: true });
+            ownerDocument.removeEventListener('pointercancel', handlePointerCancel, { capture: true });
+            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
+            ownerDocument.removeEventListener('click', handleClick);
+            ownerDocument.removeEventListener('touchstart', handleTouchStart, { capture: true });
+            ownerDocument.removeEventListener('touchmove', handleTouchMove, { capture: true });
+            ownerDocument.removeEventListener('touchend', handleTouchEnd, { capture: true });
+            ownerDocument.removeEventListener('mousedown', handleMouseDown, { capture: true });
+            clearTouchTimers();
+        });
     }
-});
-function provideRdxDismissableLayerConfig(factory) {
-    return { provide: RdxDismissableLayerConfigToken, useFactory: factory };
+    /**
+     * Whether `target` is logically inside this layer: within this popup's floating element or one of its
+     * registered triggers, within any **open descendant** node's floating element / triggers, or within a
+     * registered branch.
+     */
+    isInside(target) {
+        if (this.contextContains(this.context, target)) {
+            return true;
+        }
+        const node = this.node();
+        if (node) {
+            for (const child of node.tree.children(node, { onlyOpen: true })) {
+                if (child.context && this.contextContains(child.context, target)) {
+                    return true;
+                }
+            }
+        }
+        if (isNode(target)) {
+            for (const branch of this.branches) {
+                if (branch.contains(target)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /** `target` is inside a context's floating element or one of its registered triggers. */
+    contextContains(context, target) {
+        const floating = context.floatingElement;
+        if (floating && isNode(target) && floating.contains(target)) {
+            return true;
+        }
+        return context.triggers.contains(target);
+    }
+    /**
+     * Whether an open descendant blocks this layer for `reason` (so it should yield). A child blocks when
+     * it does **not** let the event bubble past it ({@link childBubbles} is `false`). Base UI's
+     * `hasBlockingChild` (`useDismiss.ts:170`) is a capability-local function — **not** a tree method — so
+     * the tree stays neutral.
+     */
+    hasBlockingChild(reason) {
+        const node = this.node();
+        if (!node) {
+            return false;
+        }
+        return node.tree
+            .children(node, { onlyOpen: true })
+            .some((child) => child.context !== null && !childBubbles(child.context, reason));
+    }
+}
+
+/**
+ * Marks its host as **inside** the enclosing floating layer (ADR 0015): a pointer / focus interaction on
+ * it does not count as "outside", so it never dismisses the popup. It registers the host into the
+ * floating root context's trigger registry — {@link RdxDismiss}'s `isInside` check reads it.
+ *
+ * Use it for an element that lives **outside** the popup DOM but logically belongs to the layer — e.g. a
+ * Combobox input / trigger / chips / clear button that keeps focus (or is clicked) while the listbox is
+ * open.
+ */
+class RdxFloatingInsideElement {
+    constructor() {
+        const context = inject(RDX_FLOATING_ROOT_CONTEXT, { optional: true });
+        if (!context) {
+            return;
+        }
+        const host = inject(ElementRef).nativeElement;
+        context.triggers.add(host);
+        inject(DestroyRef).onDestroy(() => context.triggers.delete(host));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxFloatingInsideElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxFloatingInsideElement, isStandalone: true, selector: "[rdxFloatingInside]", exportAs: ["rdxFloatingInside"], ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxFloatingInsideElement, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxFloatingInside]',
+                    exportAs: 'rdxFloatingInside'
+                }]
+        }], ctorParameters: () => [] });
 
 function isLayerExist(layerElement, targetElement) {
     const targetLayer = targetElement.closest('[data-dismissable-layer]');
@@ -266,175 +767,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }] } });
 
-/**
- * Shared across all layers. Holds the body's original `pointer-events` value while at least one
- * layer disables outside pointer events. `null` means the body is not currently overridden — it
- * doubles as the "ownership" flag so stacked layers don't overwrite the saved original with
- * `none`.
- */
-let originalBodyPointerEvents = null;
-class RdxDismissableLayer {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.injector = inject(Injector);
-        this.destroyRef = inject(DestroyRef);
-        this.context = inject(RdxDismissableLayersContextToken);
-        this.config = inject(RdxDismissableLayerConfigToken);
-        this.rdxPointerDownOutside = inject(RdxPointerDownOutside);
-        this.rdxFocusOutside = inject(RdxFocusOutside);
-        this.rdxEscapeKeyDown = inject(RdxEscapeKeyDown);
-        /**
-         * Event handler called when the escape key is down.
-         * Can be prevented.
-         */
-        this.escapeKeyDown = output();
-        /**
-         * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
-         * Can be prevented.
-         */
-        this.pointerDownOutside = output();
-        /**
-         * Event handler called when the focus moves outside of the `DismissableLayer`.
-         * Can be prevented.
-         */
-        this.focusOutside = output();
-        /**
-         * Event handler called when an interaction happens outside the `DismissableLayer`.
-         * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
-         * Can be prevented.
-         */
-        this.interactOutside = output();
-        /**
-         * Handler called when the `DismissableLayer` should be dismissed
-         */
-        this.dismiss = output();
-        /**
-         * When `true`, hover/focus/click interactions will be disabled on elements outside
-         * the `DismissableLayer`. Users will need to click twice on outside elements to
-         * interact with them: once to close the `DismissableLayer`, and again to trigger the element.
-         */
-        this.disableOutsidePointerEvents = input(undefined, { ...(ngDevMode ? { debugName: "disableOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
-        this.isOutsidePointerEventsDisabled = computed(() => this.disableOutsidePointerEvents() ?? this.config.disableOutsidePointerEvents(), ...(ngDevMode ? [{ debugName: "isOutsidePointerEventsDisabled" }] : /* istanbul ignore next */ []));
-        this.isBodyPointerEventsDisabled = computed(() => this.context.layersWithOutsidePointerEventsDisabled().length > 0, ...(ngDevMode ? [{ debugName: "isBodyPointerEventsDisabled" }] : /* istanbul ignore next */ []));
-        this.isPointerEventsEnabled = computed(() => {
-            const layers = this.context.layersRoot();
-            const disabledLayers = this.context.layersWithOutsidePointerEventsDisabled();
-            const highestDisabledLayer = disabledLayers[disabledLayers.length - 1];
-            return this.index() >= layers.indexOf(highestDisabledLayer);
-        }, ...(ngDevMode ? [{ debugName: "isPointerEventsEnabled" }] : /* istanbul ignore next */ []));
-        this.index = computed(() => this.context.layersRoot().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-        /** The topmost layer in the stack — the only one that should react to the Escape key. */
-        this.isHighestLayer = computed(() => {
-            const layers = this.context.layersRoot();
-            return layers.indexOf(this) === layers.length - 1;
-        }, ...(ngDevMode ? [{ debugName: "isHighestLayer" }] : /* istanbul ignore next */ []));
-        this.context.layersRoot.update((v) => [...v, this]);
-        this.destroyRef.onDestroy(() => {
-            this.context.layersRoot.update((v) => v.filter((i) => i !== this));
-        });
-        this.setupBodyPointerEvents();
-        this.rdxPointerDownOutside.pointerDownOutside.subscribe((event) => {
-            const isPointerDownOnBranch = this.context
-                .branches()
-                .some((branch) => branch.contains(event.target));
-            if (!this.isPointerEventsEnabled() || isPointerDownOnBranch) {
-                return;
-            }
-            this.pointerDownOutside.emit(event);
-            this.interactOutside.emit(event);
-            if (!event.defaultPrevented) {
-                this.dismiss.emit();
-            }
-        });
-        this.rdxFocusOutside.focusOutside.subscribe((event) => {
-            const isFocusInBranch = this.context
-                .branches()
-                .some((branch) => branch.contains(event.target));
-            if (isFocusInBranch) {
-                return;
-            }
-            this.focusOutside.emit(event);
-            this.interactOutside.emit(event);
-            if (!event.defaultPrevented) {
-                this.dismiss.emit();
-            }
-        });
-        this.rdxEscapeKeyDown.escapeKeyDown.subscribe((event) => {
-            // Only the topmost layer is dismissed by Escape; stacked layers close one at a time.
-            if (!this.isHighestLayer()) {
-                return;
-            }
-            this.escapeKeyDown.emit(event);
-            if (!event.defaultPrevented) {
-                event.preventDefault();
-                this.dismiss.emit();
-            }
-        });
-    }
-    /**
-     * Toggles `pointer-events: none` on the document body while any layer has
-     * `disableOutsidePointerEvents`. Ownership is shared across all layers via
-     * {@link originalBodyPointerEvents}: the original value is saved only on the global
-     * `0 -> >0` transition and restored only when the count returns to `0`.
-     */
-    setupBodyPointerEvents() {
-        afterNextRender(() => {
-            const ownerDocument = this.elementRef.nativeElement.ownerDocument ?? globalThis.document;
-            effect((onCleanup) => {
-                const disabledCount = this.context.layersWithOutsidePointerEventsDisabled().length;
-                if (disabledCount > 0 && originalBodyPointerEvents === null) {
-                    originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-                    ownerDocument.body.style.pointerEvents = 'none';
-                }
-                onCleanup(() => {
-                    const remaining = untracked(() => this.context.layersWithOutsidePointerEventsDisabled().length);
-                    if (remaining === 0 && originalBodyPointerEvents !== null) {
-                        ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
-                        originalBodyPointerEvents = null;
-                    }
-                });
-            }, { injector: this.injector });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDismissableLayer, isStandalone: true, selector: "[rdxDismissableLayer]", inputs: { disableOutsidePointerEvents: { classPropertyName: "disableOutsidePointerEvents", publicName: "disableOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", dismiss: "dismiss" }, host: { attributes: { "data-dismissable-layer": "" }, properties: { "style": "{\n            pointerEvents: isBodyPointerEventsDisabled() ? (isPointerEventsEnabled() ? 'auto' : 'none') : undefined\n        }" } }, exportAs: ["rdxDismissableLayer"], hostDirectives: [{ directive: RdxPointerDownOutside }, { directive: RdxFocusOutside }, { directive: RdxEscapeKeyDown }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayer, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxDismissableLayer]',
-                    exportAs: 'rdxDismissableLayer',
-                    hostDirectives: [RdxPointerDownOutside, RdxFocusOutside, RdxEscapeKeyDown],
-                    host: {
-                        'data-dismissable-layer': '',
-                        '[style]': `{
-            pointerEvents: isBodyPointerEventsDisabled() ? (isPointerEventsEnabled() ? 'auto' : 'none') : undefined
-        }`
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], disableOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOutsidePointerEvents", required: false }] }] } });
-
-class RdxDismissableLayerBranch {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.destroyRef = inject(DestroyRef);
-        this.dismissableLayersContext = inject(RdxDismissableLayersContextToken);
-        this.dismissableLayersContext.branches.update((elements) => [...elements, this.elementRef.nativeElement]);
-        this.destroyRef.onDestroy(() => this.dismissableLayersContext.branches.update((elements) => elements.filter((el) => el !== this.elementRef.nativeElement)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayerBranch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDismissableLayerBranch, isStandalone: true, selector: "[rdxDismissableLayerBranch]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayerBranch, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxDismissableLayerBranch]'
-                }]
-        }], ctorParameters: () => [] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RdxDismissableLayer, RdxDismissableLayerBranch, RdxDismissableLayerConfigToken, RdxDismissableLayersContextToken, RdxEscapeKeyDown, RdxFocusOutside, RdxPointerDownOutside, provideRdxDismissableLayerConfig };
+export { RdxDismiss, RdxEscapeKeyDown, RdxFloatingInsideElement, RdxFocusOutside, RdxPointerDownOutside };
 //# sourceMappingURL=radix-ng-primitives-dismissable-layer.mjs.map