@radix-ng/primitives 1.0.9 → 1.0.10

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

@@ -2,19 +2,31 @@ import * as i0 from '@angular/core';
 import { effect, InjectionToken, signal, inject, Injector, DestroyRef, ElementRef, input, booleanAttribute, computed, output, afterNextRender, Directive } from '@angular/core';
 import { getActiveElement, createContext } from '@radix-ng/primitives/core';
 
-const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
-const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
-const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+const CANDIDATE_SELECTOR = 'a[href],button,input,select,textarea,summary,details,iframe,object,embed,[tabindex],[contenteditable]:not([contenteditable="false"]),audio[controls],video[controls]';
+const getNodeName = (node) => node.nodeName.toLowerCase();
+const isNode = (value) => value != null && typeof value.nodeType === 'number';
 /**
- * The real target of a (possibly retargeted) event, piercing shadow boundaries via `composedPath()`.
- * Falls back to `event.target` when `composedPath` is unavailable.
+ * Owner-window-safe `HTMLElement` check. A raw `value instanceof HTMLElement` is realm-sensitive — it
+ * returns `false` for an element from another document (iframe / popup window), whose realm has its own
+ * `HTMLElement` constructor. Resolve the constructor from the node's own `defaultView` (the same pattern
+ * as `dismissable-layer`'s `dismiss.ts`; Base UI `isHTMLElement`).
  */
-function getEventTarget(event) {
-    return event.composedPath?.()[0] ?? event.target;
-}
+const isHTMLElement = (value) => {
+    if (!isNode(value)) {
+        return false;
+    }
+    const view = value.ownerDocument?.defaultView;
+    return view ? value instanceof view.HTMLElement : value instanceof HTMLElement;
+};
+/** A shadow root, detected structurally (`DOCUMENT_FRAGMENT_NODE` with a `host`) so it is realm- and SSR-safe. */
+const isShadowRoot = (node) => node !== null && node.nodeType === 11 && 'host' in node;
+const getComputedStyleOf = (element) => {
+    const view = element.ownerDocument.defaultView;
+    return view ? view.getComputedStyle(element) : null;
+};
 /**
  * Shadow-DOM-aware containment: whether `node` is `container` or lives inside it, crossing shadow roots
- * via their `host` (unlike `Node.contains`, which stops at a shadow boundary).
+ * via their `host` (unlike `Node.contains`, which stops at a shadow boundary). Base UI `contains`.
  */
 function composedContains(container, node) {
     let current = node;
@@ -22,97 +34,190 @@ function composedContains(container, node) {
         if (current === container) {
             return true;
         }
-        current = current instanceof ShadowRoot ? current.host : current.parentNode;
+        current = isShadowRoot(current) ? current.host : current.parentNode;
     }
     return false;
 }
-/**
- * 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;
+function isHiddenByStyles(styles) {
+    return styles.visibility === 'hidden' || styles.visibility === 'collapse';
+}
+function isElementVisible(element, styles) {
+    if (!element.isConnected || !styles || isHiddenByStyles(styles)) {
+        return false;
     }
-    return;
+    if (typeof element.checkVisibility === 'function') {
+        return element.checkVisibility();
+    }
+    return styles.display !== 'none' && styles.display !== 'contents';
 }
-/**
- * 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 = container.ownerDocument.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;
+/** The composed parent: an assigned `<slot>`, the element's parent, or the shadow host at a boundary. */
+function getParentElement(element) {
+    const assignedSlot = element.assignedSlot;
+    if (assignedSlot) {
+        return assignedSlot;
+    }
+    if (element.parentElement) {
+        return element.parentElement;
+    }
+    const rootNode = element.getRootNode();
+    return isShadowRoot(rootNode) ? rootNode.host : null;
+}
+function getDetailsSummary(details) {
+    for (const child of Array.from(details.children)) {
+        if (getNodeName(child) === 'summary') {
+            return child;
         }
-    });
-    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 }) {
-    const view = node.ownerDocument.defaultView;
-    if (!view) {
-        return false; // no view (detached / SSR) — cannot resolve computed styles, treat as visible
     }
-    if (view.getComputedStyle(node).visibility === 'hidden')
-        return true;
-    while (node) {
-        // we stop at `upTo` (excluding it)
-        if (upTo !== undefined && node === upTo)
+    return null;
+}
+function isWithinOpenDetailsSummary(element, details) {
+    const summary = getDetailsSummary(details);
+    return !!summary && (element === summary || composedContains(summary, element));
+}
+function isFocusableCandidate(element) {
+    const nodeName = element ? getNodeName(element) : '';
+    return (element != null &&
+        element.matches(CANDIDATE_SELECTOR) &&
+        // a `<summary>` is only focusable as the (first) summary of a `<details>`
+        (nodeName !== 'summary' ||
+            (element.parentElement != null &&
+                getNodeName(element.parentElement) === 'details' &&
+                getDetailsSummary(element.parentElement) === element)) &&
+        // a `<details>` with its own summary is not focusable (the summary is)
+        (nodeName !== 'details' || getDetailsSummary(element) == null) &&
+        (nodeName !== 'input' || element.type !== 'hidden'));
+}
+function isVisibleInTabbableTree(element, isAncestor) {
+    const styles = getComputedStyleOf(element);
+    if (!isAncestor) {
+        return isElementVisible(element, styles);
+    }
+    return !!styles && styles.display !== 'none';
+}
+function isFocusableElement(element) {
+    if (!isFocusableCandidate(element) || !element.isConnected || element.matches(':disabled')) {
+        return false;
+    }
+    for (let current = element; current; current = getParentElement(current)) {
+        const isAncestor = current !== element;
+        const isSlot = getNodeName(current) === 'slot';
+        if (current.hasAttribute('inert')) {
             return false;
-        if (view.getComputedStyle(node).display === 'none')
-            return true;
-        node = node.parentElement;
+        }
+        if ((isAncestor &&
+            getNodeName(current) === 'details' &&
+            !current.open &&
+            !isWithinOpenDetailsSummary(element, current)) ||
+            current.hasAttribute('hidden') ||
+            (!isSlot && !isVisibleInTabbableTree(current, isAncestor))) {
+            return false;
+        }
     }
-    return false;
+    return true;
 }
-/**
- * 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;
+/** The effective tab index, giving `<details>`/media/`contenteditable` their implicit `0`. */
+function getTabIndex(element) {
+    const tabIndex = element.tabIndex;
+    if (tabIndex < 0) {
+        const nodeName = getNodeName(element);
+        if (nodeName === 'details' ||
+            nodeName === 'audio' ||
+            nodeName === 'video' ||
+            (isHTMLElement(element) && element.isContentEditable)) {
+            return 0;
+        }
+    }
+    return tabIndex;
+}
+function getNamedRadioInput(element) {
+    if (getNodeName(element) !== 'input') {
+        return null;
     }
-    return undefined;
+    const input = element;
+    return input.type === 'radio' && input.name !== '' ? input : null;
+}
+/** Within a named radio group only the checked radio (or the first, if none is checked) is tabbable. */
+function isTabbableRadio(element, candidates) {
+    const input = getNamedRadioInput(element);
+    if (!input) {
+        return true;
+    }
+    const checkedRadio = candidates.find((candidate) => {
+        const radio = getNamedRadioInput(candidate);
+        return radio?.name === input.name && radio.form === input.form && radio.checked;
+    });
+    if (checkedRadio) {
+        return checkedRadio === input;
+    }
+    return (candidates.find((candidate) => {
+        const radio = getNamedRadioInput(candidate);
+        return radio?.name === input.name && radio.form === input.form;
+    }) === input);
+}
+/** The composed children of a node: `<slot>` assigned elements, then shadow-root children, else children. */
+function getComposedChildren(container) {
+    if (isHTMLElement(container) && getNodeName(container) === 'slot') {
+        const assignedElements = container.assignedElements({ flatten: true });
+        if (assignedElements.length > 0) {
+            return assignedElements;
+        }
+    }
+    if (isHTMLElement(container) && container.shadowRoot) {
+        return Array.from(container.shadowRoot.children);
+    }
+    return Array.from(container.children);
+}
+function appendCandidates(container, list) {
+    getComposedChildren(container).forEach((child) => {
+        if (isFocusableCandidate(child)) {
+            list.push(child);
+        }
+        appendCandidates(child, list);
+    });
+}
+/** Collects elements matching `selector` across the composed tree (shadow / slot aware). */
+function queryComposedAll(container, selector) {
+    const list = [];
+    const walk = (node) => {
+        getComposedChildren(node).forEach((child) => {
+            if (isHTMLElement(child) && child.matches(selector)) {
+                list.push(child);
+            }
+            walk(child);
+        });
+    };
+    walk(container);
+    return list;
+}
+/** Whether `element` is reachable by Tab right now (Base UI `isTabbable`). */
+function isTabbable(element) {
+    return isFocusableElement(element) && getTabIndex(element) >= 0;
+}
+/** All programmatically focusable elements inside `container`, in composed document order. */
+function focusable(container) {
+    const candidates = [];
+    appendCandidates(container, candidates);
+    return candidates.filter(isFocusableElement);
+}
+/** All keyboard-tabbable elements inside `container`, in composed document order (Base UI `tabbable`). */
+function tabbable(container) {
+    const candidates = focusable(container);
+    return candidates.filter((element) => getTabIndex(element) >= 0 && isTabbableRadio(element, candidates));
 }
 /**
- * Returns the first and last tabbable elements inside a container.
+ * Back-compat alias for {@link tabbable} — historically returned a looser `TreeWalker` approximation;
+ * now the full Base UI tabbable set. Kept so existing imports (`getTabbableCandidates`) keep working.
  */
-function getTabbableEdges(container) {
-    const candidates = getTabbableCandidates(container);
-    const first = findVisible(candidates, container);
-    const last = findVisible(candidates.reverse(), container);
-    return [first, last];
+function getTabbableCandidates(container) {
+    return tabbable(container);
 }
-/** Visible tabbable elements of `root` in document order (the basis for tab-order navigation). */
-function visibleTabbablesIn(root) {
-    return getTabbableCandidates(root).filter((el) => !isHidden(el, { upTo: root }));
+/** The first and last tabbable elements inside `container`. */
+function getTabbableEdges(container) {
+    const list = tabbable(container);
+    return [list[0], list[list.length - 1]];
 }
-/** The tabbable one step (`dir`) from the document's active element, within `container`. */
 function getTabbableIn(container, dir) {
-    const list = visibleTabbablesIn(container);
+    const list = tabbable(container);
     if (list.length === 0) {
         return undefined;
     }
@@ -134,12 +239,11 @@ function getPreviousTabbable(reference) {
     const body = (reference?.ownerDocument ?? document).body;
     return getTabbableIn(body, -1) ?? reference;
 }
-/** The tabbable `dir` steps from `reference` in the document, wrapping around. */
 function getTabbableNearElement(reference, dir) {
     if (!reference) {
         return null;
     }
-    const list = visibleTabbablesIn(reference.ownerDocument.body);
+    const list = tabbable(reference.ownerDocument.body);
     const index = list.indexOf(reference);
     if (list.length === 0 || index === -1) {
         return null;
@@ -154,13 +258,45 @@ function getTabbableAfterElement(reference) {
 function getTabbableBeforeElement(reference) {
     return getTabbableNearElement(reference, -1);
 }
+
+const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
+const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+/**
+ * The real target of a (possibly retargeted) event, piercing shadow boundaries via `composedPath()`.
+ * Falls back to `event.target` when `composedPath` is unavailable.
+ */
+function getEventTarget(event) {
+    return event.composedPath?.()[0] ?? event.target;
+}
+/**
+ * Attempts focusing the first element in a list of candidates.
+ * Stops when focus has actually moved.
+ *
+ * Reads the active element from `root` (a focus scope passes its host's `ownerDocument`); falling back to
+ * the global `document` would, in an iframe / multi-document scope, never detect that focus moved inside
+ * the inner document and so walk past every candidate, leaving focus on the last one instead of the first.
+ */
+function focusFirst(candidates, { select = false, root } = {}) {
+    const ownerRoot = root ?? candidates[0]?.ownerDocument ?? document;
+    const previouslyFocusedElement = getActiveElement(ownerRoot);
+    for (const candidate of candidates) {
+        focus(candidate, { select });
+        if (getActiveElement(ownerRoot) !== previouslyFocusedElement)
+            return true;
+    }
+    return;
+}
 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();
+        // Read the active element from the element's own document so the same-element select() check stays
+        // correct across iframes / multi-document scopes (consistent with this module's ownerDocument focus).
+        const root = 'ownerDocument' in element ? element.ownerDocument : undefined;
+        const previouslyFocusedElement = getActiveElement(root ?? document);
         // 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
@@ -218,14 +354,17 @@ function createAriaOwnsAnchor(ownerDocument, portalId) {
  * trigger steps onto the guard instead of jumping into the content.
  */
 function disableFocusInside(container) {
-    for (const element of getTabbableCandidates(container)) {
+    for (const element of tabbable(container)) {
         element.setAttribute(SAVED_TABINDEX_ATTR, element.getAttribute('tabindex') ?? '');
         element.setAttribute('tabindex', '-1');
     }
 }
-/** Restores the tabbability that {@link disableFocusInside} suspended. Base UI `enableFocusInside`. */
+/**
+ * Restores the tabbability that {@link disableFocusInside} suspended. Base UI `enableFocusInside`.
+ * Collects markers across the composed tree so guards inside shadow roots / slots are restored too.
+ */
 function enableFocusInside(container) {
-    container.querySelectorAll(`[${SAVED_TABINDEX_ATTR}]`).forEach((element) => {
+    queryComposedAll(container, `[${SAVED_TABINDEX_ATTR}]`).forEach((element) => {
         const original = element.getAttribute(SAVED_TABINDEX_ATTR);
         element.removeAttribute(SAVED_TABINDEX_ATTR);
         if (original) {
@@ -350,9 +489,6 @@ function arrayRemove(array, item) {
     }
     return copy;
 }
-function removeLinks(items) {
-    return items.filter((el) => el.tagName !== 'A');
-}
 
 const [injectFocusScopeContext, provideFocusScopeContext] = createContext('FocusScope Context', 'utils/focus-scope');
 const rootContext = () => {
@@ -493,8 +629,9 @@ class RdxFocusScope {
                     container.addEventListener(AUTOFOCUS_ON_MOUNT, mountEventHandler);
                     container.dispatchEvent(mountEvent);
                     if (!mountEvent.defaultPrevented) {
-                        focusFirst(removeLinks(getTabbableCandidates(container)), {
-                            select: true
+                        focusFirst(getTabbableCandidates(container), {
+                            select: true,
+                            root: this.ownerDocument
                         });
                         if (getActiveElement(this.ownerDocument) === previouslyFocusedElement)
                             focus(container);
@@ -546,6 +683,15 @@ class RdxFocusScope {
         return (!!active && active !== this.ownerDocument.body && !composedContains(this.elementRef.nativeElement, active));
     }
     handleKeyDown(event) {
+        // Only a looping or trapped scope polices Tab at its edges. A plain non-modal scope must let Tab
+        // through so the browser can reach whatever follows the host — e.g. the hidden outer focus guards
+        // `RdxFloatingFocusManager` places around it (calling `preventDefault()` here would fire first and
+        // strand focus at the boundary, defeating the guard). A paused scope (a nested scope took over)
+        // also stands down so it can't double-handle a bubbled Tab. Mirrors Base UI / Radix `FocusScope`:
+        // `if ((!loop && !trapped) || focusScope.paused) return`.
+        if ((!this.loop() && !this.isTrapped()) || this.focusScope.paused()) {
+            return;
+        }
         const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
         const focusedElement = getActiveElement(this.ownerDocument);
         if (isTabKey && focusedElement) {
@@ -592,5 +738,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOFOCUS_ON_MOUNT, AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS, FOCUS_GUARD_ATTR, FOCUS_GUARD_STYLE, RdxFocusScope, RdxFocusScopeConfigToken, composedContains, createAriaOwnsAnchor, createFocusGuard, disableFocusInside, enableFocusInside, findVisible, focus, focusFirst, getEventTarget, getNextTabbable, getPreviousTabbable, getTabbableAfterElement, getTabbableBeforeElement, getTabbableCandidates, getTabbableEdges, injectFocusScopeContext, isHidden, isOutsideEvent, isSelectableInput, provideFocusScopeContext, provideRdxFocusScopeConfig, useFocusGuardsTabbability };
+export { AUTOFOCUS_ON_MOUNT, AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS, FOCUS_GUARD_ATTR, FOCUS_GUARD_STYLE, RdxFocusScope, RdxFocusScopeConfigToken, composedContains, createAriaOwnsAnchor, createFocusGuard, disableFocusInside, enableFocusInside, focus, focusFirst, focusable, getEventTarget, getNextTabbable, getPreviousTabbable, getTabbableAfterElement, getTabbableBeforeElement, getTabbableCandidates, getTabbableEdges, injectFocusScopeContext, isOutsideEvent, isSelectableInput, isTabbable, provideFocusScopeContext, provideRdxFocusScopeConfig, queryComposedAll, tabbable, useFocusGuardsTabbability };
 //# sourceMappingURL=radix-ng-primitives-focus-scope.mjs.map