@radix-ng/primitives 0.41.0 → 0.42.0

package/fesm2022/radix-ng-primitives-focus-scope.mjs

@@ -0,0 +1,336 @@
+import * as i0 from '@angular/core';
+import { signal, inject, Injector, ElementRef, input, booleanAttribute, output, afterNextRender, effect, Directive } from '@angular/core';
+import { getActiveElement, createContext } from '@radix-ng/primitives/core';
+
+function createGlobalState(factory) {
+    const state = factory();
+    return () => state;
+}
+const useFocusStackState = createGlobalState(() => signal([]));
+function createFocusScopesStack() {
+    /** A stack of focus scopes, with the active one at the top */
+    const stack = useFocusStackState();
+    return {
+        add(focusScope) {
+            const current = stack();
+            const active = current[0];
+            if (focusScope !== active) {
+                active?.pause();
+            }
+            const updated = arrayRemove(current, focusScope);
+            updated.unshift(focusScope);
+            stack.set(updated);
+        },
+        remove(focusScope) {
+            const current = stack();
+            const updated = arrayRemove(current, focusScope);
+            stack.set(updated);
+            // после удаления «возобновляем» новый верхний
+            stack()[0]?.resume();
+        }
+    };
+}
+function arrayRemove(array, item) {
+    const copy = [...array];
+    const idx = copy.indexOf(item);
+    if (idx !== -1) {
+        copy.splice(idx, 1);
+    }
+    return copy;
+}
+function removeLinks(items) {
+    return items.filter((el) => el.tagName !== 'A');
+}
+
+const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
+const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+/**
+ * Attempts focusing the first element in a list of candidates.
+ * Stops when focus has actually moved.
+ */
+function focusFirst(candidates, { select = false } = {}) {
+    const previouslyFocusedElement = getActiveElement();
+    for (const candidate of candidates) {
+        focus(candidate, { select });
+        if (getActiveElement() !== previouslyFocusedElement)
+            return true;
+    }
+    return;
+}
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+function getTabbableCandidates(container) {
+    const nodes = [];
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput)
+                return NodeFilter.FILTER_SKIP;
+            // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+    });
+    while (walker.nextNode())
+        nodes.push(walker.currentNode);
+    // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+function isHidden(node, { upTo }) {
+    if (getComputedStyle(node).visibility === 'hidden')
+        return true;
+    while (node) {
+        // we stop at `upTo` (excluding it)
+        if (upTo !== undefined && node === upTo)
+            return false;
+        if (getComputedStyle(node).display === 'none')
+            return true;
+        node = node.parentElement;
+    }
+    return false;
+}
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+function findVisible(elements, container) {
+    for (const element of elements) {
+        // we stop checking if it's hidden at the `container` level (excluding)
+        if (!isHidden(element, { upTo: container }))
+            return element;
+    }
+    return undefined;
+}
+/**
+ * Returns the first and last tabbable elements inside a container.
+ */
+function getTabbableEdges(container) {
+    const candidates = getTabbableCandidates(container);
+    const first = findVisible(candidates, container);
+    const last = findVisible(candidates.reverse(), container);
+    return [first, last];
+}
+function isSelectableInput(element) {
+    return element instanceof HTMLInputElement && 'select' in element;
+}
+function focus(element, { select = false } = {}) {
+    // only focus if that element is focusable
+    if (element && element.focus) {
+        const previouslyFocusedElement = getActiveElement();
+        // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
+        element.focus({ preventScroll: true });
+        // only select if its not the same element, it supports selection and we need to select
+        if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {
+            element.select();
+        }
+    }
+}
+
+const [injectFocusScopeContext, provideFocusScopeContext] = createContext('FocusScope Context');
+const rootContext = () => {
+    const context = inject(RdxFocusScope);
+    return {
+        loop: context.loop,
+        trapped: context.trapped
+    };
+};
+/**
+ * @group Components
+ */
+class RdxFocusScope {
+    constructor() {
+        this.injector = inject(Injector);
+        this.elementRef = inject(ElementRef);
+        /**
+         * When `true`, tabbing from last item will focus first tabbable
+         * and shift+tab from first item will focus last tababble.
+         *
+         * @group Props
+         * @defaultValue false
+         */
+        this.loop = input(false, { transform: booleanAttribute });
+        /**
+         * When `true`, focus cannot escape the focus scope via keyboard,
+         * pointer, or a programmatic focus.
+         *
+         * @group Props
+         * @defaultValue false
+         */
+        this.trapped = input(false, { transform: booleanAttribute });
+        /**
+         * Event handler called when auto-focusing on mount.
+         * Can be prevented.
+         *
+         * @group Emits
+         */
+        this.mountAutoFocus = output();
+        /**
+         * Event handler called when auto-focusing on unmount.
+         * Can be prevented.
+         *
+         * @group Emits
+         */
+        this.unmountAutoFocus = output();
+        this.lastFocusedElement = signal(null);
+        this.focusScopesStack = createFocusScopesStack();
+        this.focusScope = {
+            paused: signal(false),
+            pause: () => this.focusScope.paused.set(true),
+            resume: () => this.focusScope.paused.set(false)
+        };
+        afterNextRender(() => {
+            effect((onCleanup) => {
+                const container = this.elementRef.nativeElement;
+                if (this.trapped()) {
+                    const handleFocusIn = (event) => {
+                        if (this.focusScope.paused() || !container) {
+                            return;
+                        }
+                        const target = event.target;
+                        if (this.elementRef.nativeElement.contains(target)) {
+                            this.lastFocusedElement.set(target);
+                        }
+                        else {
+                            focus(this.lastFocusedElement(), { select: true });
+                        }
+                    };
+                    const handleFocusOut = (event) => {
+                        if (this.focusScope.paused() || !container) {
+                            return;
+                        }
+                        const relatedTarget = event.relatedTarget;
+                        // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
+                        //
+                        // 1. When the user switches app/tabs/windows/the browser itself loses focus.
+                        // 2. In Google Chrome, when the focused element is removed from the DOM.
+                        //
+                        // We let the browser do its thing here because:
+                        //
+                        // 1. The browser already keeps a memory of what's focused for when the page gets refocused.
+                        // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
+                        //    throws the CPU to 100%, so we avoid doing anything for this reason here too.
+                        if (relatedTarget === null)
+                            return;
+                        // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
+                        // that is outside the container, we move focus to the last valid focused element inside.
+                        if (!container.contains(relatedTarget)) {
+                            focus(this.lastFocusedElement(), { select: true });
+                        }
+                    };
+                    const handleMutations = () => {
+                        const isLastFocusedElementExist = container.contains(this.lastFocusedElement());
+                        if (!isLastFocusedElementExist) {
+                            focus(container);
+                        }
+                    };
+                    const mutationObserver = new MutationObserver(handleMutations);
+                    if (container) {
+                        mutationObserver.observe(container, { childList: true, subtree: true });
+                    }
+                    document.addEventListener('focusin', handleFocusIn);
+                    document.addEventListener('focusout', handleFocusOut);
+                    onCleanup(() => {
+                        document.removeEventListener('focusin', handleFocusIn);
+                        document.removeEventListener('focusout', handleFocusOut);
+                        mutationObserver.disconnect();
+                    });
+                }
+            }, { injector: this.injector });
+            effect(async (onCleanup) => {
+                const container = this.elementRef.nativeElement;
+                await Promise.resolve();
+                if (!container) {
+                    return;
+                }
+                this.focusScopesStack.add(this.focusScope);
+                const previouslyFocusedElement = getActiveElement();
+                const hasFocusedCandidate = container.contains(previouslyFocusedElement);
+                if (!hasFocusedCandidate) {
+                    const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+                    container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev) => this.mountAutoFocus.emit(ev));
+                    container.dispatchEvent(mountEvent);
+                    if (!mountEvent.defaultPrevented) {
+                        focusFirst(removeLinks(getTabbableCandidates(container)), {
+                            select: true
+                        });
+                        if (getActiveElement() === previouslyFocusedElement)
+                            focus(container);
+                    }
+                }
+                onCleanup(() => {
+                    container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev) => this.mountAutoFocus.emit(ev));
+                    const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+                    const unmountEventHandler = (ev) => this.unmountAutoFocus.emit(ev);
+                    container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+                    container.dispatchEvent(unmountEvent);
+                    setTimeout(() => {
+                        if (!unmountEvent.defaultPrevented)
+                            focus(previouslyFocusedElement ?? document.body, { select: true });
+                        // we need to remove the listener after we `dispatchEvent`
+                        container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+                        this.focusScopesStack.remove(this.focusScope);
+                    }, 0);
+                });
+            }, { injector: this.injector });
+        });
+    }
+    handleKeyDown(event) {
+        const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
+        const focusedElement = getActiveElement();
+        if (isTabKey && focusedElement) {
+            const container = event.currentTarget;
+            const [first, last] = getTabbableEdges(container);
+            const hasTabbableElementsInside = first && last;
+            // we can only wrap focus if we have tabbable edges
+            if (!hasTabbableElementsInside) {
+                if (focusedElement === container)
+                    event.preventDefault();
+            }
+            else {
+                if (!event.shiftKey && focusedElement === last) {
+                    event.preventDefault();
+                    if (this.loop()) {
+                        focus(first, { select: true });
+                    }
+                }
+                else if (event.shiftKey && focusedElement === first) {
+                    event.preventDefault();
+                    if (this.loop()) {
+                        focus(last, { select: true });
+                    }
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxFocusScope, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxFocusScope, isStandalone: true, selector: "[rdxFocusScope]", inputs: { loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, trapped: { classPropertyName: "trapped", publicName: "trapped", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mountAutoFocus: "mountAutoFocus", unmountAutoFocus: "unmountAutoFocus" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "handleKeyDown($event)" } }, providers: [provideFocusScopeContext(rootContext)], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxFocusScope, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxFocusScope]',
+                    providers: [provideFocusScopeContext(rootContext)],
+                    host: {
+                        tabindex: '-1',
+                        '(keydown)': 'handleKeyDown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxFocusScope, injectFocusScopeContext, provideFocusScopeContext };
+//# sourceMappingURL=radix-ng-primitives-focus-scope.mjs.map

package/fesm2022/radix-ng-primitives-focus-scope.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-focus-scope.mjs","sources":["../../../packages/primitives/focus-scope/src/stack.ts","../../../packages/primitives/focus-scope/src/utils.ts","../../../packages/primitives/focus-scope/src/focus-scope.ts","../../../packages/primitives/focus-scope/radix-ng-primitives-focus-scope.ts"],"sourcesContent":["import { signal, WritableSignal } from '@angular/core';\n\nexport function createGlobalState<T>(factory: () => T): () => T {\n    const state = factory();\n    return () => state;\n}\n\nexport interface FocusScopeAPI {\n    paused: WritableSignal<boolean>;\n    pause(): void;\n    resume(): void;\n}\n\nconst useFocusStackState = createGlobalState(() => signal<FocusScopeAPI[]>([]));\n\nexport function createFocusScopesStack() {\n    /** A stack of focus scopes, with the active one at the top */\n    const stack = useFocusStackState();\n\n    return {\n        add(focusScope: FocusScopeAPI) {\n            const current = stack();\n            const active = current[0];\n            if (focusScope !== active) {\n                active?.pause();\n            }\n            const updated = arrayRemove(current, focusScope);\n            updated.unshift(focusScope);\n            stack.set(updated);\n        },\n\n        remove(focusScope: FocusScopeAPI) {\n            const current = stack();\n            const updated = arrayRemove(current, focusScope);\n            stack.set(updated);\n            // после удаления «возобновляем» новый верхний\n            stack()[0]?.resume();\n        }\n    };\n}\n\nexport function arrayRemove<T>(array: T[], item: T): T[] {\n    const copy = [...array];\n    const idx = copy.indexOf(item);\n    if (idx !== -1) {\n        copy.splice(idx, 1);\n    }\n    return copy;\n}\n\nexport function removeLinks(items: HTMLElement[]): HTMLElement[] {\n    return items.filter((el) => el.tagName !== 'A');\n}\n","import { getActiveElement } from '@radix-ng/primitives/core';\n\nexport const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';\nexport const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';\nexport const EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\ntype FocusableTarget = HTMLElement | { focus: () => void };\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nexport function focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n    const previouslyFocusedElement = getActiveElement();\n    for (const candidate of candidates) {\n        focus(candidate, { select });\n        if (getActiveElement() !== previouslyFocusedElement) return true;\n    }\n\n    return;\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nexport function getTabbableCandidates(container: HTMLElement) {\n    const nodes: HTMLElement[] = [];\n    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n        acceptNode: (node: any) => {\n            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n            // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n            // runtime's understanding of tabbability, so this automatically accounts\n            // for any kind of element that could be tabbed to.\n            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n        }\n    });\n    while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n    // we do not take into account the order of nodes with positive `tabIndex` as it\n    // hinders accessibility to have tab order different from visual order.\n    return nodes;\n}\n\nexport function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n    if (getComputedStyle(node).visibility === 'hidden') return true;\n    while (node) {\n        // we stop at `upTo` (excluding it)\n        if (upTo !== undefined && node === upTo) return false;\n        if (getComputedStyle(node).display === 'none') return true;\n        node = node.parentElement as HTMLElement;\n    }\n    return false;\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nexport function findVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined {\n    for (const element of elements) {\n        // we stop checking if it's hidden at the `container` level (excluding)\n        if (!isHidden(element, { upTo: container })) return element;\n    }\n    return undefined;\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nexport function getTabbableEdges(container: HTMLElement) {\n    const candidates = getTabbableCandidates(container);\n    const first = findVisible(candidates, container);\n    const last = findVisible(candidates.reverse(), container);\n    return [first, last] as const;\n}\n\nexport function isSelectableInput(element: any): element is FocusableTarget & { select: () => void } {\n    return element instanceof HTMLInputElement && 'select' in element;\n}\n\nexport function focus(element?: FocusableTarget | null, { select = false } = {}) {\n    // only focus if that element is focusable\n    if (element && element.focus) {\n        const previouslyFocusedElement = getActiveElement();\n        // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n        element.focus({ preventScroll: true });\n        // only select if its not the same element, it supports selection and we need to select\n        if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {\n            element.select();\n        }\n    }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Directive,\n    effect,\n    ElementRef,\n    inject,\n    Injector,\n    input,\n    output,\n    Signal,\n    signal\n} from '@angular/core';\nimport { createContext, getActiveElement } from '@radix-ng/primitives/core';\nimport { createFocusScopesStack, FocusScopeAPI, removeLinks } from './stack';\nimport {\n    AUTOFOCUS_ON_MOUNT,\n    AUTOFOCUS_ON_UNMOUNT,\n    EVENT_OPTIONS,\n    focus,\n    focusFirst,\n    getTabbableCandidates,\n    getTabbableEdges\n} from './utils';\n\nexport interface FocusScopeContext {\n    loop?: Signal<boolean>;\n\n    trapped?: Signal<boolean>;\n}\n\nexport const [injectFocusScopeContext, provideFocusScopeContext] =\n    createContext<FocusScopeContext>('FocusScope Context');\n\nconst rootContext = (): FocusScopeContext => {\n    const context = inject(RdxFocusScope);\n\n    return {\n        loop: context.loop,\n        trapped: context.trapped\n    };\n};\n\n/**\n * @group Components\n */\n@Directive({\n    selector: '[rdxFocusScope]',\n    providers: [provideFocusScopeContext(rootContext)],\n    host: {\n        tabindex: '-1',\n        '(keydown)': 'handleKeyDown($event)'\n    }\n})\nexport class RdxFocusScope {\n    private readonly injector = inject(Injector);\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * When `true`, tabbing from last item will focus first tabbable\n     * and shift+tab from first item will focus last tababble.\n     *\n     * @group Props\n     * @defaultValue false\n     */\n    readonly loop = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * When `true`, focus cannot escape the focus scope via keyboard,\n     * pointer, or a programmatic focus.\n     *\n     * @group Props\n     * @defaultValue false\n     */\n    readonly trapped = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * Event handler called when auto-focusing on mount.\n     * Can be prevented.\n     *\n     * @group Emits\n     */\n    readonly mountAutoFocus = output<Event>();\n\n    /**\n     * Event handler called when auto-focusing on unmount.\n     * Can be prevented.\n     *\n     * @group Emits\n     */\n    readonly unmountAutoFocus = output<Event>();\n\n    readonly lastFocusedElement = signal<HTMLElement | null>(null);\n\n    private readonly focusScopesStack = createFocusScopesStack();\n\n    readonly focusScope: FocusScopeAPI = {\n        paused: signal(false),\n        pause: () => this.focusScope.paused.set(true),\n        resume: () => this.focusScope.paused.set(false)\n    };\n\n    constructor() {\n        afterNextRender(() => {\n            effect(\n                (onCleanup) => {\n                    const container = this.elementRef.nativeElement;\n\n                    if (this.trapped()) {\n                        const handleFocusIn = (event: FocusEvent) => {\n                            if (this.focusScope.paused() || !container) {\n                                return;\n                            }\n\n                            const target = event.target as HTMLElement | null;\n                            if (this.elementRef.nativeElement.contains(target)) {\n                                this.lastFocusedElement.set(target);\n                            } else {\n                                focus(this.lastFocusedElement(), { select: true });\n                            }\n                        };\n\n                        const handleFocusOut = (event: FocusEvent) => {\n                            if (this.focusScope.paused() || !container) {\n                                return;\n                            }\n                            const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n                            // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:\n                            //\n                            // 1. When the user switches app/tabs/windows/the browser itself loses focus.\n                            // 2. In Google Chrome, when the focused element is removed from the DOM.\n                            //\n                            // We let the browser do its thing here because:\n                            //\n                            // 1. The browser already keeps a memory of what's focused for when the page gets refocused.\n                            // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it\n                            //    throws the CPU to 100%, so we avoid doing anything for this reason here too.\n                            if (relatedTarget === null) return;\n\n                            // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)\n                            // that is outside the container, we move focus to the last valid focused element inside.\n                            if (!container.contains(relatedTarget)) {\n                                focus(this.lastFocusedElement(), { select: true });\n                            }\n                        };\n\n                        const handleMutations = () => {\n                            const isLastFocusedElementExist = container.contains(this.lastFocusedElement());\n\n                            if (!isLastFocusedElementExist) {\n                                focus(container);\n                            }\n                        };\n\n                        const mutationObserver = new MutationObserver(handleMutations);\n                        if (container) {\n                            mutationObserver.observe(container, { childList: true, subtree: true });\n                        }\n\n                        document.addEventListener('focusin', handleFocusIn);\n                        document.addEventListener('focusout', handleFocusOut);\n\n                        onCleanup(() => {\n                            document.removeEventListener('focusin', handleFocusIn);\n                            document.removeEventListener('focusout', handleFocusOut);\n                            mutationObserver.disconnect();\n                        });\n                    }\n                },\n                { injector: this.injector }\n            );\n\n            effect(\n                async (onCleanup) => {\n                    const container = this.elementRef.nativeElement;\n\n                    await Promise.resolve();\n                    if (!container) {\n                        return;\n                    }\n\n                    this.focusScopesStack.add(this.focusScope);\n\n                    const previouslyFocusedElement = getActiveElement() as HTMLElement | null;\n                    const hasFocusedCandidate = container.contains(previouslyFocusedElement);\n\n                    if (!hasFocusedCandidate) {\n                        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);\n                        container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) => this.mountAutoFocus.emit(ev));\n                        container.dispatchEvent(mountEvent);\n\n                        if (!mountEvent.defaultPrevented) {\n                            focusFirst(removeLinks(getTabbableCandidates(container)), {\n                                select: true\n                            });\n                            if (getActiveElement() === previouslyFocusedElement) focus(container);\n                        }\n                    }\n\n                    onCleanup(() => {\n                        container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) => this.mountAutoFocus.emit(ev));\n\n                        const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);\n                        const unmountEventHandler = (ev: Event) => this.unmountAutoFocus.emit(ev);\n                        container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);\n                        container.dispatchEvent(unmountEvent);\n\n                        setTimeout(() => {\n                            if (!unmountEvent.defaultPrevented)\n                                focus(previouslyFocusedElement ?? document.body, { select: true });\n\n                            // we need to remove the listener after we `dispatchEvent`\n                            container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);\n\n                            this.focusScopesStack.remove(this.focusScope);\n                        }, 0);\n                    });\n                },\n                { injector: this.injector }\n            );\n        });\n    }\n\n    handleKeyDown(event: KeyboardEvent) {\n        const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;\n\n        const focusedElement = getActiveElement() as HTMLElement | null;\n\n        if (isTabKey && focusedElement) {\n            const container = event.currentTarget as HTMLElement;\n\n            const [first, last] = getTabbableEdges(container);\n            const hasTabbableElementsInside = first && last;\n\n            // we can only wrap focus if we have tabbable edges\n            if (!hasTabbableElementsInside) {\n                if (focusedElement === container) event.preventDefault();\n            } else {\n                if (!event.shiftKey && focusedElement === last) {\n                    event.preventDefault();\n                    if (this.loop()) {\n                        focus(first, { select: true });\n                    }\n                } else if (event.shiftKey && focusedElement === first) {\n                    event.preventDefault();\n                    if (this.loop()) {\n                        focus(last, { select: true });\n                    }\n                }\n            }\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/focus-scope/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/focus-scope

package/focus-scope/index.d.ts

@@ -0,0 +1 @@
+export * from './src/focus-scope';

package/focus-scope/src/focus-scope.d.ts

@@ -0,0 +1,53 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { Signal } from '@angular/core';
+import { FocusScopeAPI } from './stack';
+import * as i0 from "@angular/core";
+export interface FocusScopeContext {
+    loop?: Signal<boolean>;
+    trapped?: Signal<boolean>;
+}
+export declare const injectFocusScopeContext: (optional?: boolean) => FocusScopeContext | null, provideFocusScopeContext: (useFactory: () => FocusScopeContext) => import("@angular/core").Provider;
+/**
+ * @group Components
+ */
+export declare class RdxFocusScope {
+    private readonly injector;
+    private readonly elementRef;
+    /**
+     * When `true`, tabbing from last item will focus first tabbable
+     * and shift+tab from first item will focus last tababble.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly loop: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, focus cannot escape the focus scope via keyboard,
+     * pointer, or a programmatic focus.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly trapped: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Event handler called when auto-focusing on mount.
+     * Can be prevented.
+     *
+     * @group Emits
+     */
+    readonly mountAutoFocus: import("@angular/core").OutputEmitterRef<Event>;
+    /**
+     * Event handler called when auto-focusing on unmount.
+     * Can be prevented.
+     *
+     * @group Emits
+     */
+    readonly unmountAutoFocus: import("@angular/core").OutputEmitterRef<Event>;
+    readonly lastFocusedElement: import("@angular/core").WritableSignal<HTMLElement | null>;
+    private readonly focusScopesStack;
+    readonly focusScope: FocusScopeAPI;
+    constructor();
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxFocusScope, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxFocusScope, "[rdxFocusScope]", never, { "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "trapped": { "alias": "trapped"; "required": false; "isSignal": true; }; }, { "mountAutoFocus": "mountAutoFocus"; "unmountAutoFocus": "unmountAutoFocus"; }, never, never, true, never>;
+}

package/focus-scope/src/stack.d.ts

@@ -0,0 +1,13 @@
+import { WritableSignal } from '@angular/core';
+export declare function createGlobalState<T>(factory: () => T): () => T;
+export interface FocusScopeAPI {
+    paused: WritableSignal<boolean>;
+    pause(): void;
+    resume(): void;
+}
+export declare function createFocusScopesStack(): {
+    add(focusScope: FocusScopeAPI): void;
+    remove(focusScope: FocusScopeAPI): void;
+};
+export declare function arrayRemove<T>(array: T[], item: T): T[];
+export declare function removeLinks(items: HTMLElement[]): HTMLElement[];

package/focus-scope/src/utils.d.ts

@@ -0,0 +1,46 @@
+export declare const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+export declare const AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+export declare const EVENT_OPTIONS: {
+    bubbles: boolean;
+    cancelable: boolean;
+};
+type FocusableTarget = HTMLElement | {
+    focus: () => void;
+};
+/**
+ * Attempts focusing the first element in a list of candidates.
+ * Stops when focus has actually moved.
+ */
+export declare function focusFirst(candidates: HTMLElement[], { select }?: {
+    select?: boolean | undefined;
+}): true | undefined;
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export declare function getTabbableCandidates(container: HTMLElement): HTMLElement[];
+export declare function isHidden(node: HTMLElement, { upTo }: {
+    upTo?: HTMLElement;
+}): boolean;
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+export declare function findVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined;
+/**
+ * Returns the first and last tabbable elements inside a container.
+ */
+export declare function getTabbableEdges(container: HTMLElement): readonly [HTMLElement | undefined, HTMLElement | undefined];
+export declare function isSelectableInput(element: any): element is FocusableTarget & {
+    select: () => void;
+};
+export declare function focus(element?: FocusableTarget | null, { select }?: {
+    select?: boolean | undefined;
+}): void;
+export {};

package/hover-card/src/hover-card-root.directive.d.ts

@@ -93,7 +93,7 @@ export declare class RdxHoverCardRootDirective {
         window: Window & typeof globalThis;
         primitiveConfigs?: import("./utils/types").PrimitiveConfigs;
         onDestroyCallbacks: Set<() => void>;
-        "__#14558@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
+        "__#14839@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
         registerPrimitive<T extends object>(primitiveInstance: T): void;
         deregisterPrimitive<T extends object>(primitiveInstance: T): void;
         preventPrimitiveFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): void;
@@ -104,9 +104,9 @@ export declare class RdxHoverCardRootDirective {
         primitivePreventedFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): boolean | undefined;
         addClickDomRootEventCallback(callback: (event: MouseEvent) => void): void;
         removeClickDomRootEventCallback(callback: (event: MouseEvent) => void): boolean;
-        "__#14558@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
-        "__#14558@#registerOnDestroyCallbacks"(): void;
-        "__#14558@#listenToClickDomRootEvent"(): void;
+        "__#14839@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
+        "__#14839@#registerOnDestroyCallbacks"(): void;
+        "__#14839@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -100,6 +100,10 @@
       "types": "./editable/index.d.ts",
       "default": "./fesm2022/radix-ng-primitives-editable.mjs"
     },
+    "./focus-scope": {
+      "types": "./focus-scope/index.d.ts",
+      "default": "./fesm2022/radix-ng-primitives-focus-scope.mjs"
+    },
     "./hover-card": {
       "types": "./hover-card/index.d.ts",
       "default": "./fesm2022/radix-ng-primitives-hover-card.mjs"

package/popover/src/popover-root.directive.d.ts

@@ -70,7 +70,7 @@ export declare class RdxPopoverRootDirective {
         window: Window & typeof globalThis;
         primitiveConfigs?: import("./utils/types").PrimitiveConfigs;
         onDestroyCallbacks: Set<() => void>;
-        "__#18898@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
+        "__#19150@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
         registerPrimitive<T extends object>(primitiveInstance: T): void;
         deregisterPrimitive<T extends object>(primitiveInstance: T): void;
         preventPrimitiveFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): void;
@@ -81,9 +81,9 @@ export declare class RdxPopoverRootDirective {
         primitivePreventedFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): boolean | undefined;
         addClickDomRootEventCallback(callback: (event: MouseEvent) => void): void;
         removeClickDomRootEventCallback(callback: (event: MouseEvent) => void): boolean;
-        "__#18898@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
-        "__#18898@#registerOnDestroyCallbacks"(): void;
-        "__#18898@#listenToClickDomRootEvent"(): void;
+        "__#19150@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
+        "__#19150@#registerOnDestroyCallbacks"(): void;
+        "__#19150@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;

package/tooltip/src/tooltip-root.directive.d.ts

@@ -79,7 +79,7 @@ export declare class RdxTooltipRootDirective {
         window: Window & typeof globalThis;
         primitiveConfigs?: import("./utils/types").PrimitiveConfigs;
         onDestroyCallbacks: Set<() => void>;
-        "__#22743@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
+        "__#22995@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
         registerPrimitive<T extends object>(primitiveInstance: T): void;
         deregisterPrimitive<T extends object>(primitiveInstance: T): void;
         preventPrimitiveFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): void;
@@ -90,9 +90,9 @@ export declare class RdxTooltipRootDirective {
         primitivePreventedFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): boolean | undefined;
         addClickDomRootEventCallback(callback: (event: MouseEvent) => void): void;
         removeClickDomRootEventCallback(callback: (event: MouseEvent) => void): boolean;
-        "__#22743@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
-        "__#22743@#registerOnDestroyCallbacks"(): void;
-        "__#22743@#listenToClickDomRootEvent"(): void;
+        "__#22995@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
+        "__#22995@#registerOnDestroyCallbacks"(): void;
+        "__#22995@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;