@primer/behaviors 1.9.0-rc.8649bfb → 1.9.1-rc.5011fc8

package/dist/cjs/anchored-position.js

@@ -27,9 +27,11 @@ function getPositionedParent(element) {
     if (isOnTopLayer(element))
         return document.body;
     let parentNode = element.parentNode;
-    while (parentNode !== null) {
-        if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
-            return parentNode;
+    while (parentNode !== null && parentNode !== document.body) {
+        if (parentNode instanceof HTMLElement) {
+            if (getComputedStyle(parentNode).position !== 'static') {
+                return parentNode;
+            }
         }
         parentNode = parentNode.parentNode;
     }
@@ -51,26 +53,24 @@ function isOnTopLayer(element) {
     return false;
 }
 function getClippingRect(element) {
+    let clippingNode = document.body;
     let parentNode = element;
-    while (parentNode !== null) {
-        if (!(parentNode instanceof Element)) {
-            break;
-        }
-        const parentNodeStyle = getComputedStyle(parentNode);
-        if (parentNodeStyle.overflow !== 'visible') {
-            break;
+    while (parentNode !== null && parentNode !== document.body) {
+        if (parentNode instanceof HTMLElement) {
+            const overflow = getComputedStyle(parentNode).overflow;
+            if (overflow !== 'visible') {
+                clippingNode = parentNode;
+                break;
+            }
         }
         parentNode = parentNode.parentNode;
     }
-    const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
     const elemRect = clippingNode.getBoundingClientRect();
     const elemStyle = getComputedStyle(clippingNode);
-    const [borderTop, borderLeft, borderRight, borderBottom] = [
-        elemStyle.borderTopWidth,
-        elemStyle.borderLeftWidth,
-        elemStyle.borderRightWidth,
-        elemStyle.borderBottomWidth,
-    ].map(v => parseInt(v, 10) || 0);
+    const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
+    const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
+    const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
+    const borderBottom = parseInt(elemStyle.borderBottomWidth, 10) || 0;
     return {
         top: elemRect.top + borderTop,
         left: elemRect.left + borderLeft,

package/dist/cjs/focus-trap.js

@@ -6,6 +6,16 @@ var eventListenerSignal = require('./polyfills/event-listener-signal.js');
 eventListenerSignal.polyfill();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
+const SR_ONLY_STYLES = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
+function createSentinel({ onFocus }) {
+    const sentinel = document.createElement('span');
+    sentinel.setAttribute('class', 'sentinel');
+    sentinel.setAttribute('tabindex', '0');
+    sentinel.setAttribute('aria-hidden', 'true');
+    sentinel.style.cssText = SR_ONLY_STYLES;
+    sentinel.onfocus = onFocus;
+    return sentinel;
+}
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
@@ -23,9 +33,10 @@ function observeFocusTrap(container, sentinels) {
     const observer = new MutationObserver(mutations => {
         for (const mutation of mutations) {
             if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                const sentinelChildren = Array.from(mutation.addedNodes).filter(e => e instanceof HTMLElement && e.classList.contains('sentinel') && e.tagName === 'SPAN');
-                if (sentinelChildren.length) {
-                    return;
+                for (const node of mutation.addedNodes) {
+                    if (node instanceof HTMLElement && node.tagName === 'SPAN' && node.classList.contains('sentinel')) {
+                        return;
+                    }
                 }
                 const firstChild = container.firstElementChild;
                 const lastChild = container.lastElementChild;
@@ -46,24 +57,20 @@ function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
     container.setAttribute('data-focus-trap', 'active');
-    const sentinelStart = document.createElement('span');
-    sentinelStart.setAttribute('class', 'sentinel');
-    sentinelStart.setAttribute('tabindex', '0');
-    sentinelStart.setAttribute('aria-hidden', 'true');
-    sentinelStart.onfocus = () => {
-        const lastFocusableChild = iterateFocusableElements.getFocusableChild(container, true);
-        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-    };
-    const sentinelEnd = document.createElement('span');
-    sentinelEnd.setAttribute('class', 'sentinel');
-    sentinelEnd.setAttribute('tabindex', '0');
-    sentinelEnd.setAttribute('aria-hidden', 'true');
-    sentinelEnd.onfocus = () => {
-        const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
-        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-    };
-    const existingSentinels = Array.from(container.children).filter(e => e.classList.contains('sentinel') && e.tagName === 'SPAN');
-    if (!existingSentinels.length) {
+    const sentinelStart = createSentinel({
+        onFocus: () => {
+            const lastFocusableChild = iterateFocusableElements.getFocusableChild(container, true);
+            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+        },
+    });
+    const sentinelEnd = createSentinel({
+        onFocus: () => {
+            const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
+            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+        },
+    });
+    const hasExistingSentinels = container.querySelector(':scope > span.sentinel') !== null;
+    if (!hasExistingSentinels) {
         container.prepend(sentinelStart);
         container.append(sentinelEnd);
     }

package/dist/cjs/focus-zone.js

@@ -5,6 +5,7 @@ var userAgent = require('./utils/user-agent.js');
 var iterateFocusableElements = require('./utils/iterate-focusable-elements.js');
 var uniqueId = require('./utils/unique-id.js');
 var isEditableElement = require('./utils/is-editable-element.js');
+var indexedSet = require('./utils/indexed-set.js');
 
 eventListenerSignal.polyfill();
 exports.FocusKeys = void 0;
@@ -82,17 +83,18 @@ function getDirection(keyboardEvent) {
 }
 function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
     const key = keyboardEvent.key;
-    const keyLength = [...key].length;
+    const isSingleChar = key.length === 1 || (key.length === 2 && key.charCodeAt(0) >= 0xd800 && key.charCodeAt(0) <= 0xdbff);
     const isEditable = isEditableElement.isEditableElement(activeElement);
     const isSelect = activeElement instanceof HTMLSelectElement;
-    if (isEditable && (keyLength === 1 || key === 'Home' || key === 'End')) {
+    if (isEditable && (isSingleChar || key === 'Home' || key === 'End')) {
         return true;
     }
     if (isSelect) {
-        if (key === 'ArrowDown' && userAgent.isMacOS() && !keyboardEvent.metaKey) {
+        const isMac = userAgent.isMacOS();
+        if (key === 'ArrowDown' && isMac && !keyboardEvent.metaKey) {
             return true;
         }
-        if (key === 'ArrowDown' && !userAgent.isMacOS() && keyboardEvent.altKey) {
+        if (key === 'ArrowDown' && !isMac && keyboardEvent.altKey) {
             return true;
         }
         return false;
@@ -130,7 +132,7 @@ const activeDescendantActivatedIndirectly = 'activated-indirectly';
 const hasActiveDescendantAttribute = 'data-has-active-descendant';
 function focusZone(container, settings) {
     var _a, _b, _c, _d, _e, _f;
-    const focusableElements = [];
+    const focusableElements = new indexedSet.IndexedSet();
     const savedTabIndex = new WeakMap();
     const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? exports.FocusKeys.ArrowAll : exports.FocusKeys.ArrowVertical) | exports.FocusKeys.HomeAndEnd;
     const focusOutBehavior = (_b = settings === null || settings === void 0 ? void 0 : settings.focusOutBehavior) !== null && _b !== void 0 ? _b : 'stop';
@@ -142,7 +144,7 @@ function focusZone(container, settings) {
     const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
     const preventInitialFocus = focusInStrategy === 'initial' && (settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl);
     function getFirstFocusableElement() {
-        return focusableElements[0];
+        return focusableElements.get(0);
     }
     function isActiveDescendantInputFocused() {
         return document.activeElement === activeDescendantControl;
@@ -187,17 +189,20 @@ function focusZone(container, settings) {
         activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
         container.removeAttribute(hasActiveDescendantAttribute);
         previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
-        for (const item of container.querySelectorAll(`[${isActiveDescendantAttribute}]`)) {
-            item === null || item === void 0 ? void 0 : item.removeAttribute(isActiveDescendantAttribute);
+        const items = container.querySelectorAll(`[${isActiveDescendantAttribute}]`);
+        for (let i = 0; i < items.length; i++) {
+            items[i].removeAttribute(isActiveDescendantAttribute);
         }
         activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
     }
     function beginFocusManagement(...elements) {
-        const filteredElements = elements.filter(e => { var _a, _b; return (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter) === null || _a === void 0 ? void 0 : _a.call(settings, e)) !== null && _b !== void 0 ? _b : true; });
+        const filteredElements = (settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter)
+            ? elements.filter(e => settings.focusableElementFilter(e))
+            : elements;
         if (filteredElements.length === 0) {
             return;
         }
-        focusableElements.splice(findInsertionIndex(filteredElements), 0, ...filteredElements);
+        focusableElements.insertAt(findInsertionIndex(filteredElements), ...filteredElements);
         for (const element of filteredElements) {
             if (!savedTabIndex.has(element)) {
                 savedTabIndex.set(element, element.getAttribute('tabindex'));
@@ -210,13 +215,13 @@ function focusZone(container, settings) {
     }
     function findInsertionIndex(elementsToInsert) {
         const firstElementToInsert = elementsToInsert[0];
-        if (focusableElements.length === 0)
+        if (focusableElements.size === 0)
             return 0;
         let iMin = 0;
-        let iMax = focusableElements.length - 1;
+        let iMax = focusableElements.size - 1;
         while (iMin <= iMax) {
             const i = Math.floor((iMin + iMax) / 2);
-            const element = focusableElements[i];
+            const element = focusableElements.get(i);
             if (followsInDocument(firstElementToInsert, element)) {
                 iMax = i - 1;
             }
@@ -231,10 +236,7 @@ function focusZone(container, settings) {
     }
     function endFocusManagement(...elements) {
         for (const element of elements) {
-            const focusableElementIndex = focusableElements.indexOf(element);
-            if (focusableElementIndex >= 0) {
-                focusableElements.splice(focusableElementIndex, 1);
-            }
+            focusableElements.delete(element);
             const savedIndex = savedTabIndex.get(element);
             if (savedIndex !== undefined) {
                 if (savedIndex === null) {
@@ -261,29 +263,61 @@ function focusZone(container, settings) {
     if (!preventInitialFocus)
         updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
+        const elementsToRemove = new Set();
+        const elementsToAdd = new Set();
+        const attributeRemovals = new Set();
+        const attributeAdditions = new Set();
         for (const mutation of mutations) {
-            for (const removedNode of mutation.removedNodes) {
-                if (removedNode instanceof HTMLElement) {
-                    endFocusManagement(...iterateFocusableElements.iterateFocusableElements(removedNode));
+            if (mutation.type === 'childList') {
+                for (const removedNode of mutation.removedNodes) {
+                    if (removedNode instanceof HTMLElement) {
+                        elementsToRemove.add(removedNode);
+                    }
+                }
+                for (const addedNode of mutation.addedNodes) {
+                    if (addedNode instanceof HTMLElement) {
+                        elementsToAdd.add(addedNode);
+                    }
                 }
             }
-            if (mutation.type === 'attributes' && mutation.oldValue === null) {
-                if (mutation.target instanceof HTMLElement) {
-                    endFocusManagement(mutation.target);
+            else if (mutation.type === 'attributes' && mutation.target instanceof HTMLElement) {
+                const attributeName = mutation.attributeName;
+                const hasAttribute = attributeName ? mutation.target.hasAttribute(attributeName) : false;
+                if (hasAttribute) {
+                    attributeRemovals.add(mutation.target);
+                }
+                else {
+                    attributeAdditions.add(mutation.target);
                 }
             }
         }
-        for (const mutation of mutations) {
-            for (const addedNode of mutation.addedNodes) {
-                if (addedNode instanceof HTMLElement) {
-                    beginFocusManagement(...iterateFocusableElements.iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
+        if (elementsToRemove.size > 0) {
+            const toRemove = [];
+            for (const node of elementsToRemove) {
+                for (const el of iterateFocusableElements.iterateFocusableElements(node)) {
+                    toRemove.push(el);
                 }
             }
-            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
-                if (mutation.target instanceof HTMLElement) {
-                    beginFocusManagement(mutation.target);
+            if (toRemove.length > 0) {
+                endFocusManagement(...toRemove);
+            }
+        }
+        if (attributeRemovals.size > 0) {
+            endFocusManagement(...attributeRemovals);
+        }
+        if (elementsToAdd.size > 0) {
+            const toAdd = [];
+            for (const node of elementsToAdd) {
+                for (const el of iterateFocusableElements.iterateFocusableElements(node, iterateFocusableElementsOptions)) {
+                    toAdd.push(el);
                 }
             }
+            if (toAdd.length > 0) {
+                beginFocusManagement(...toAdd);
+            }
+        }
+        if (attributeAdditions.size > 0) {
+            beginFocusManagement(...attributeAdditions);
         }
     });
     observer.observe(container, {
@@ -295,7 +329,9 @@ function focusZone(container, settings) {
     const controller = new AbortController();
     const signal = (_f = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _f !== void 0 ? _f : controller.signal;
     signal.addEventListener('abort', () => {
+        observer.disconnect();
         endFocusManagement(...focusableElements);
+        focusableElements.clear();
     });
     let elementIndexFocusedByClick = undefined;
     container.addEventListener('mousedown', event => {
@@ -305,7 +341,7 @@ function focusZone(container, settings) {
     }, { signal });
     if (activeDescendantControl) {
         container.addEventListener('focusin', event => {
-            if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
+            if (event.target instanceof HTMLElement && focusableElements.has(event.target)) {
                 activeDescendantControl.focus({ preventScroll });
                 updateFocusedElement(event.target);
             }
@@ -315,6 +351,10 @@ function focusZone(container, settings) {
                 if (!(target instanceof Node)) {
                     return;
                 }
+                if (target instanceof HTMLElement && focusableElements.has(target)) {
+                    updateFocusedElement(target);
+                    return;
+                }
                 const focusableElement = focusableElements.find(element => element.contains(target));
                 if (focusableElement) {
                     updateFocusedElement(focusableElement);
@@ -339,8 +379,9 @@ function focusZone(container, settings) {
             if (event.target instanceof HTMLElement) {
                 if (elementIndexFocusedByClick !== undefined) {
                     if (elementIndexFocusedByClick >= 0) {
-                        if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
-                            updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
+                        const clickedElement = focusableElements.get(elementIndexFocusedByClick);
+                        if (clickedElement && clickedElement !== currentFocusedElement) {
+                            updateFocusedElement(clickedElement);
                         }
                     }
                     elementIndexFocusedByClick = undefined;
@@ -351,8 +392,8 @@ function focusZone(container, settings) {
                     }
                     else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
-                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
-                            const targetElement = focusableElements[targetElementIndex];
+                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.size - 1 : 0;
+                            const targetElement = focusableElements.get(targetElementIndex);
                             targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus({ preventScroll });
                             return;
                         }
@@ -363,8 +404,7 @@ function focusZone(container, settings) {
                     else if (typeof focusInStrategy === 'function') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
                             const elementToFocus = focusInStrategy(event.relatedTarget);
-                            const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
-                            if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
+                            if (elementToFocus && focusableElements.has(elementToFocus)) {
                                 elementToFocus.focus({ preventScroll });
                                 return;
                             }
@@ -423,26 +463,26 @@ function focusZone(container, settings) {
                         nextFocusedIndex += 1;
                     }
                     else {
-                        nextFocusedIndex = focusableElements.length - 1;
+                        nextFocusedIndex = focusableElements.size - 1;
                     }
                     if (nextFocusedIndex < 0) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-                            nextFocusedIndex = focusableElements.length - 1;
+                            nextFocusedIndex = focusableElements.size - 1;
                         }
                         else {
                             nextFocusedIndex = 0;
                         }
                     }
-                    if (nextFocusedIndex >= focusableElements.length) {
+                    if (nextFocusedIndex >= focusableElements.size) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
                             nextFocusedIndex = 0;
                         }
                         else {
-                            nextFocusedIndex = focusableElements.length - 1;
+                            nextFocusedIndex = focusableElements.size - 1;
                         }
                     }
                     if (lastFocusedIndex !== nextFocusedIndex) {
-                        nextElementToFocus = focusableElements[nextFocusedIndex];
+                        nextElementToFocus = focusableElements.get(nextFocusedIndex);
                     }
                 }
                 if (activeDescendantControl) {

package/dist/cjs/utils/indexed-set.d.ts

@@ -0,0 +1,13 @@
+export declare class IndexedSet<T> {
+    private _items;
+    private _itemSet;
+    insertAt(index: number, ...elements: T[]): void;
+    delete(element: T): boolean;
+    has(element: T): boolean;
+    indexOf(element: T): number;
+    get(index: number): T | undefined;
+    get size(): number;
+    [Symbol.iterator](): Iterator<T>;
+    clear(): void;
+    find(predicate: (element: T) => boolean): T | undefined;
+}

package/dist/cjs/utils/indexed-set.js

@@ -0,0 +1,53 @@
+'use strict';
+
+class IndexedSet {
+    constructor() {
+        this._items = [];
+        this._itemSet = new Set();
+    }
+    insertAt(index, ...elements) {
+        const newElements = elements.filter(e => !this._itemSet.has(e));
+        if (newElements.length === 0)
+            return;
+        this._items.splice(index, 0, ...newElements);
+        for (const element of newElements) {
+            this._itemSet.add(element);
+        }
+    }
+    delete(element) {
+        if (!this._itemSet.has(element))
+            return false;
+        const index = this._items.indexOf(element);
+        if (index >= 0) {
+            this._items.splice(index, 1);
+        }
+        this._itemSet.delete(element);
+        return true;
+    }
+    has(element) {
+        return this._itemSet.has(element);
+    }
+    indexOf(element) {
+        if (!this._itemSet.has(element))
+            return -1;
+        return this._items.indexOf(element);
+    }
+    get(index) {
+        return this._items[index];
+    }
+    get size() {
+        return this._items.length;
+    }
+    [Symbol.iterator]() {
+        return this._items[Symbol.iterator]();
+    }
+    clear() {
+        this._items = [];
+        this._itemSet.clear();
+    }
+    find(predicate) {
+        return this._items.find(predicate);
+    }
+}
+
+exports.IndexedSet = IndexedSet;

package/dist/cjs/utils/iterate-focusable-elements.js

@@ -33,24 +33,32 @@ function* iterateFocusableElements(container, options = {}) {
 function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }
+const DISABLEABLE_TAGS = new Set(['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET']);
 function isFocusable(elem, strict = false) {
-    const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
-        elem.disabled;
-    const hiddenInert = elem.hidden;
-    const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-    const sentinelInert = elem.classList.contains('sentinel');
-    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
+    if (elem.hidden)
+        return false;
+    if (elem.classList.contains('sentinel'))
+        return false;
+    if (elem instanceof HTMLInputElement && elem.type === 'hidden')
+        return false;
+    if (DISABLEABLE_TAGS.has(elem.tagName) && elem.disabled)
         return false;
-    }
     if (strict) {
+        const offsetWidth = elem.offsetWidth;
+        const offsetHeight = elem.offsetHeight;
+        const offsetParent = elem.offsetParent;
+        if (offsetWidth === 0 || offsetHeight === 0)
+            return false;
         const style = getComputedStyle(elem);
-        const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
-        const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
-        const displayInert = style.display === 'none' || !elem.offsetParent;
-        const clientRectsInert = elem.getClientRects().length === 0;
-        if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
+        if (style.display === 'none')
+            return false;
+        if (style.visibility === 'hidden' || style.visibility === 'collapse')
+            return false;
+        const position = style.position;
+        if (!offsetParent && position !== 'fixed' && position !== 'sticky')
+            return false;
+        if (elem.getClientRects().length === 0)
             return false;
-        }
     }
     if (elem.getAttribute('tabindex') != null) {
         return true;

package/dist/esm/anchored-position.mjs

@@ -25,9 +25,11 @@ function getPositionedParent(element) {
     if (isOnTopLayer(element))
         return document.body;
     let parentNode = element.parentNode;
-    while (parentNode !== null) {
-        if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
-            return parentNode;
+    while (parentNode !== null && parentNode !== document.body) {
+        if (parentNode instanceof HTMLElement) {
+            if (getComputedStyle(parentNode).position !== 'static') {
+                return parentNode;
+            }
         }
         parentNode = parentNode.parentNode;
     }
@@ -49,26 +51,24 @@ function isOnTopLayer(element) {
     return false;
 }
 function getClippingRect(element) {
+    let clippingNode = document.body;
     let parentNode = element;
-    while (parentNode !== null) {
-        if (!(parentNode instanceof Element)) {
-            break;
-        }
-        const parentNodeStyle = getComputedStyle(parentNode);
-        if (parentNodeStyle.overflow !== 'visible') {
-            break;
+    while (parentNode !== null && parentNode !== document.body) {
+        if (parentNode instanceof HTMLElement) {
+            const overflow = getComputedStyle(parentNode).overflow;
+            if (overflow !== 'visible') {
+                clippingNode = parentNode;
+                break;
+            }
         }
         parentNode = parentNode.parentNode;
     }
-    const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
     const elemRect = clippingNode.getBoundingClientRect();
     const elemStyle = getComputedStyle(clippingNode);
-    const [borderTop, borderLeft, borderRight, borderBottom] = [
-        elemStyle.borderTopWidth,
-        elemStyle.borderLeftWidth,
-        elemStyle.borderRightWidth,
-        elemStyle.borderBottomWidth,
-    ].map(v => parseInt(v, 10) || 0);
+    const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
+    const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
+    const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
+    const borderBottom = parseInt(elemStyle.borderBottomWidth, 10) || 0;
     return {
         top: elemRect.top + borderTop,
         left: elemRect.left + borderLeft,

package/dist/esm/focus-trap.mjs

@@ -4,6 +4,16 @@ import { polyfill } from './polyfills/event-listener-signal.mjs';
 polyfill();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
+const SR_ONLY_STYLES = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
+function createSentinel({ onFocus }) {
+    const sentinel = document.createElement('span');
+    sentinel.setAttribute('class', 'sentinel');
+    sentinel.setAttribute('tabindex', '0');
+    sentinel.setAttribute('aria-hidden', 'true');
+    sentinel.style.cssText = SR_ONLY_STYLES;
+    sentinel.onfocus = onFocus;
+    return sentinel;
+}
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
@@ -21,9 +31,10 @@ function observeFocusTrap(container, sentinels) {
     const observer = new MutationObserver(mutations => {
         for (const mutation of mutations) {
             if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                const sentinelChildren = Array.from(mutation.addedNodes).filter(e => e instanceof HTMLElement && e.classList.contains('sentinel') && e.tagName === 'SPAN');
-                if (sentinelChildren.length) {
-                    return;
+                for (const node of mutation.addedNodes) {
+                    if (node instanceof HTMLElement && node.tagName === 'SPAN' && node.classList.contains('sentinel')) {
+                        return;
+                    }
                 }
                 const firstChild = container.firstElementChild;
                 const lastChild = container.lastElementChild;
@@ -44,24 +55,20 @@ function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
     container.setAttribute('data-focus-trap', 'active');
-    const sentinelStart = document.createElement('span');
-    sentinelStart.setAttribute('class', 'sentinel');
-    sentinelStart.setAttribute('tabindex', '0');
-    sentinelStart.setAttribute('aria-hidden', 'true');
-    sentinelStart.onfocus = () => {
-        const lastFocusableChild = getFocusableChild(container, true);
-        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-    };
-    const sentinelEnd = document.createElement('span');
-    sentinelEnd.setAttribute('class', 'sentinel');
-    sentinelEnd.setAttribute('tabindex', '0');
-    sentinelEnd.setAttribute('aria-hidden', 'true');
-    sentinelEnd.onfocus = () => {
-        const firstFocusableChild = getFocusableChild(container);
-        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-    };
-    const existingSentinels = Array.from(container.children).filter(e => e.classList.contains('sentinel') && e.tagName === 'SPAN');
-    if (!existingSentinels.length) {
+    const sentinelStart = createSentinel({
+        onFocus: () => {
+            const lastFocusableChild = getFocusableChild(container, true);
+            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+        },
+    });
+    const sentinelEnd = createSentinel({
+        onFocus: () => {
+            const firstFocusableChild = getFocusableChild(container);
+            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+        },
+    });
+    const hasExistingSentinels = container.querySelector(':scope > span.sentinel') !== null;
+    if (!hasExistingSentinels) {
         container.prepend(sentinelStart);
         container.append(sentinelEnd);
     }

package/dist/esm/focus-zone.mjs

@@ -3,6 +3,7 @@ import { isMacOS } from './utils/user-agent.mjs';
 import { iterateFocusableElements } from './utils/iterate-focusable-elements.mjs';
 import { uniqueId } from './utils/unique-id.mjs';
 import { isEditableElement } from './utils/is-editable-element.mjs';
+import { IndexedSet } from './utils/indexed-set.mjs';
 
 polyfill();
 var FocusKeys;
@@ -80,17 +81,18 @@ function getDirection(keyboardEvent) {
 }
 function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
     const key = keyboardEvent.key;
-    const keyLength = [...key].length;
+    const isSingleChar = key.length === 1 || (key.length === 2 && key.charCodeAt(0) >= 0xd800 && key.charCodeAt(0) <= 0xdbff);
     const isEditable = isEditableElement(activeElement);
     const isSelect = activeElement instanceof HTMLSelectElement;
-    if (isEditable && (keyLength === 1 || key === 'Home' || key === 'End')) {
+    if (isEditable && (isSingleChar || key === 'Home' || key === 'End')) {
         return true;
     }
     if (isSelect) {
-        if (key === 'ArrowDown' && isMacOS() && !keyboardEvent.metaKey) {
+        const isMac = isMacOS();
+        if (key === 'ArrowDown' && isMac && !keyboardEvent.metaKey) {
             return true;
         }
-        if (key === 'ArrowDown' && !isMacOS() && keyboardEvent.altKey) {
+        if (key === 'ArrowDown' && !isMac && keyboardEvent.altKey) {
             return true;
         }
         return false;
@@ -128,7 +130,7 @@ const activeDescendantActivatedIndirectly = 'activated-indirectly';
 const hasActiveDescendantAttribute = 'data-has-active-descendant';
 function focusZone(container, settings) {
     var _a, _b, _c, _d, _e, _f;
-    const focusableElements = [];
+    const focusableElements = new IndexedSet();
     const savedTabIndex = new WeakMap();
     const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
     const focusOutBehavior = (_b = settings === null || settings === void 0 ? void 0 : settings.focusOutBehavior) !== null && _b !== void 0 ? _b : 'stop';
@@ -140,7 +142,7 @@ function focusZone(container, settings) {
     const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
     const preventInitialFocus = focusInStrategy === 'initial' && (settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl);
     function getFirstFocusableElement() {
-        return focusableElements[0];
+        return focusableElements.get(0);
     }
     function isActiveDescendantInputFocused() {
         return document.activeElement === activeDescendantControl;
@@ -185,17 +187,20 @@ function focusZone(container, settings) {
         activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
         container.removeAttribute(hasActiveDescendantAttribute);
         previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
-        for (const item of container.querySelectorAll(`[${isActiveDescendantAttribute}]`)) {
-            item === null || item === void 0 ? void 0 : item.removeAttribute(isActiveDescendantAttribute);
+        const items = container.querySelectorAll(`[${isActiveDescendantAttribute}]`);
+        for (let i = 0; i < items.length; i++) {
+            items[i].removeAttribute(isActiveDescendantAttribute);
         }
         activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
     }
     function beginFocusManagement(...elements) {
-        const filteredElements = elements.filter(e => { var _a, _b; return (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter) === null || _a === void 0 ? void 0 : _a.call(settings, e)) !== null && _b !== void 0 ? _b : true; });
+        const filteredElements = (settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter)
+            ? elements.filter(e => settings.focusableElementFilter(e))
+            : elements;
         if (filteredElements.length === 0) {
             return;
         }
-        focusableElements.splice(findInsertionIndex(filteredElements), 0, ...filteredElements);
+        focusableElements.insertAt(findInsertionIndex(filteredElements), ...filteredElements);
         for (const element of filteredElements) {
             if (!savedTabIndex.has(element)) {
                 savedTabIndex.set(element, element.getAttribute('tabindex'));
@@ -208,13 +213,13 @@ function focusZone(container, settings) {
     }
     function findInsertionIndex(elementsToInsert) {
         const firstElementToInsert = elementsToInsert[0];
-        if (focusableElements.length === 0)
+        if (focusableElements.size === 0)
             return 0;
         let iMin = 0;
-        let iMax = focusableElements.length - 1;
+        let iMax = focusableElements.size - 1;
         while (iMin <= iMax) {
             const i = Math.floor((iMin + iMax) / 2);
-            const element = focusableElements[i];
+            const element = focusableElements.get(i);
             if (followsInDocument(firstElementToInsert, element)) {
                 iMax = i - 1;
             }
@@ -229,10 +234,7 @@ function focusZone(container, settings) {
     }
     function endFocusManagement(...elements) {
         for (const element of elements) {
-            const focusableElementIndex = focusableElements.indexOf(element);
-            if (focusableElementIndex >= 0) {
-                focusableElements.splice(focusableElementIndex, 1);
-            }
+            focusableElements.delete(element);
             const savedIndex = savedTabIndex.get(element);
             if (savedIndex !== undefined) {
                 if (savedIndex === null) {
@@ -259,29 +261,61 @@ function focusZone(container, settings) {
     if (!preventInitialFocus)
         updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
+        const elementsToRemove = new Set();
+        const elementsToAdd = new Set();
+        const attributeRemovals = new Set();
+        const attributeAdditions = new Set();
         for (const mutation of mutations) {
-            for (const removedNode of mutation.removedNodes) {
-                if (removedNode instanceof HTMLElement) {
-                    endFocusManagement(...iterateFocusableElements(removedNode));
+            if (mutation.type === 'childList') {
+                for (const removedNode of mutation.removedNodes) {
+                    if (removedNode instanceof HTMLElement) {
+                        elementsToRemove.add(removedNode);
+                    }
+                }
+                for (const addedNode of mutation.addedNodes) {
+                    if (addedNode instanceof HTMLElement) {
+                        elementsToAdd.add(addedNode);
+                    }
                 }
             }
-            if (mutation.type === 'attributes' && mutation.oldValue === null) {
-                if (mutation.target instanceof HTMLElement) {
-                    endFocusManagement(mutation.target);
+            else if (mutation.type === 'attributes' && mutation.target instanceof HTMLElement) {
+                const attributeName = mutation.attributeName;
+                const hasAttribute = attributeName ? mutation.target.hasAttribute(attributeName) : false;
+                if (hasAttribute) {
+                    attributeRemovals.add(mutation.target);
+                }
+                else {
+                    attributeAdditions.add(mutation.target);
                 }
             }
         }
-        for (const mutation of mutations) {
-            for (const addedNode of mutation.addedNodes) {
-                if (addedNode instanceof HTMLElement) {
-                    beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
+        if (elementsToRemove.size > 0) {
+            const toRemove = [];
+            for (const node of elementsToRemove) {
+                for (const el of iterateFocusableElements(node)) {
+                    toRemove.push(el);
                 }
             }
-            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
-                if (mutation.target instanceof HTMLElement) {
-                    beginFocusManagement(mutation.target);
+            if (toRemove.length > 0) {
+                endFocusManagement(...toRemove);
+            }
+        }
+        if (attributeRemovals.size > 0) {
+            endFocusManagement(...attributeRemovals);
+        }
+        if (elementsToAdd.size > 0) {
+            const toAdd = [];
+            for (const node of elementsToAdd) {
+                for (const el of iterateFocusableElements(node, iterateFocusableElementsOptions)) {
+                    toAdd.push(el);
                 }
             }
+            if (toAdd.length > 0) {
+                beginFocusManagement(...toAdd);
+            }
+        }
+        if (attributeAdditions.size > 0) {
+            beginFocusManagement(...attributeAdditions);
         }
     });
     observer.observe(container, {
@@ -293,7 +327,9 @@ function focusZone(container, settings) {
     const controller = new AbortController();
     const signal = (_f = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _f !== void 0 ? _f : controller.signal;
     signal.addEventListener('abort', () => {
+        observer.disconnect();
         endFocusManagement(...focusableElements);
+        focusableElements.clear();
     });
     let elementIndexFocusedByClick = undefined;
     container.addEventListener('mousedown', event => {
@@ -303,7 +339,7 @@ function focusZone(container, settings) {
     }, { signal });
     if (activeDescendantControl) {
         container.addEventListener('focusin', event => {
-            if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
+            if (event.target instanceof HTMLElement && focusableElements.has(event.target)) {
                 activeDescendantControl.focus({ preventScroll });
                 updateFocusedElement(event.target);
             }
@@ -313,6 +349,10 @@ function focusZone(container, settings) {
                 if (!(target instanceof Node)) {
                     return;
                 }
+                if (target instanceof HTMLElement && focusableElements.has(target)) {
+                    updateFocusedElement(target);
+                    return;
+                }
                 const focusableElement = focusableElements.find(element => element.contains(target));
                 if (focusableElement) {
                     updateFocusedElement(focusableElement);
@@ -337,8 +377,9 @@ function focusZone(container, settings) {
             if (event.target instanceof HTMLElement) {
                 if (elementIndexFocusedByClick !== undefined) {
                     if (elementIndexFocusedByClick >= 0) {
-                        if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
-                            updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
+                        const clickedElement = focusableElements.get(elementIndexFocusedByClick);
+                        if (clickedElement && clickedElement !== currentFocusedElement) {
+                            updateFocusedElement(clickedElement);
                         }
                     }
                     elementIndexFocusedByClick = undefined;
@@ -349,8 +390,8 @@ function focusZone(container, settings) {
                     }
                     else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
-                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
-                            const targetElement = focusableElements[targetElementIndex];
+                            const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.size - 1 : 0;
+                            const targetElement = focusableElements.get(targetElementIndex);
                             targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus({ preventScroll });
                             return;
                         }
@@ -361,8 +402,7 @@ function focusZone(container, settings) {
                     else if (typeof focusInStrategy === 'function') {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
                             const elementToFocus = focusInStrategy(event.relatedTarget);
-                            const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
-                            if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
+                            if (elementToFocus && focusableElements.has(elementToFocus)) {
                                 elementToFocus.focus({ preventScroll });
                                 return;
                             }
@@ -421,26 +461,26 @@ function focusZone(container, settings) {
                         nextFocusedIndex += 1;
                     }
                     else {
-                        nextFocusedIndex = focusableElements.length - 1;
+                        nextFocusedIndex = focusableElements.size - 1;
                     }
                     if (nextFocusedIndex < 0) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-                            nextFocusedIndex = focusableElements.length - 1;
+                            nextFocusedIndex = focusableElements.size - 1;
                         }
                         else {
                             nextFocusedIndex = 0;
                         }
                     }
-                    if (nextFocusedIndex >= focusableElements.length) {
+                    if (nextFocusedIndex >= focusableElements.size) {
                         if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
                             nextFocusedIndex = 0;
                         }
                         else {
-                            nextFocusedIndex = focusableElements.length - 1;
+                            nextFocusedIndex = focusableElements.size - 1;
                         }
                     }
                     if (lastFocusedIndex !== nextFocusedIndex) {
-                        nextElementToFocus = focusableElements[nextFocusedIndex];
+                        nextElementToFocus = focusableElements.get(nextFocusedIndex);
                     }
                 }
                 if (activeDescendantControl) {

package/dist/esm/utils/indexed-set.d.ts

@@ -0,0 +1,13 @@
+export declare class IndexedSet<T> {
+    private _items;
+    private _itemSet;
+    insertAt(index: number, ...elements: T[]): void;
+    delete(element: T): boolean;
+    has(element: T): boolean;
+    indexOf(element: T): number;
+    get(index: number): T | undefined;
+    get size(): number;
+    [Symbol.iterator](): Iterator<T>;
+    clear(): void;
+    find(predicate: (element: T) => boolean): T | undefined;
+}

package/dist/esm/utils/indexed-set.mjs

@@ -0,0 +1,51 @@
+class IndexedSet {
+    constructor() {
+        this._items = [];
+        this._itemSet = new Set();
+    }
+    insertAt(index, ...elements) {
+        const newElements = elements.filter(e => !this._itemSet.has(e));
+        if (newElements.length === 0)
+            return;
+        this._items.splice(index, 0, ...newElements);
+        for (const element of newElements) {
+            this._itemSet.add(element);
+        }
+    }
+    delete(element) {
+        if (!this._itemSet.has(element))
+            return false;
+        const index = this._items.indexOf(element);
+        if (index >= 0) {
+            this._items.splice(index, 1);
+        }
+        this._itemSet.delete(element);
+        return true;
+    }
+    has(element) {
+        return this._itemSet.has(element);
+    }
+    indexOf(element) {
+        if (!this._itemSet.has(element))
+            return -1;
+        return this._items.indexOf(element);
+    }
+    get(index) {
+        return this._items[index];
+    }
+    get size() {
+        return this._items.length;
+    }
+    [Symbol.iterator]() {
+        return this._items[Symbol.iterator]();
+    }
+    clear() {
+        this._items = [];
+        this._itemSet.clear();
+    }
+    find(predicate) {
+        return this._items.find(predicate);
+    }
+}
+
+export { IndexedSet };

package/dist/esm/utils/iterate-focusable-elements.mjs

@@ -31,24 +31,32 @@ function* iterateFocusableElements(container, options = {}) {
 function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }
+const DISABLEABLE_TAGS = new Set(['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET']);
 function isFocusable(elem, strict = false) {
-    const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
-        elem.disabled;
-    const hiddenInert = elem.hidden;
-    const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-    const sentinelInert = elem.classList.contains('sentinel');
-    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
+    if (elem.hidden)
+        return false;
+    if (elem.classList.contains('sentinel'))
+        return false;
+    if (elem instanceof HTMLInputElement && elem.type === 'hidden')
+        return false;
+    if (DISABLEABLE_TAGS.has(elem.tagName) && elem.disabled)
         return false;
-    }
     if (strict) {
+        const offsetWidth = elem.offsetWidth;
+        const offsetHeight = elem.offsetHeight;
+        const offsetParent = elem.offsetParent;
+        if (offsetWidth === 0 || offsetHeight === 0)
+            return false;
         const style = getComputedStyle(elem);
-        const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
-        const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
-        const displayInert = style.display === 'none' || !elem.offsetParent;
-        const clientRectsInert = elem.getClientRects().length === 0;
-        if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
+        if (style.display === 'none')
+            return false;
+        if (style.visibility === 'hidden' || style.visibility === 'collapse')
+            return false;
+        const position = style.position;
+        if (!offsetParent && position !== 'fixed' && position !== 'sticky')
+            return false;
+        if (elem.getClientRects().length === 0)
             return false;
-        }
     }
     if (elem.getAttribute('tabindex') != null) {
         return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.9.0-rc.8649bfb",
+  "version": "1.9.1-rc.5011fc8",
   "description": "Shared behaviors for JavaScript components",
   "type": "commonjs",
   "main": "dist/cjs/index.js",
@@ -82,7 +82,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.0.10",
+    "@types/node": "^25.0.0",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.2.3",
     "clsx": "^2.1.1",