@primer/behaviors 0.0.0-20251211200451 → 0.0.0-20251214172224

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

@@ -47,23 +47,25 @@ function focusTrap(container, initialFocus, abortSignal) {
     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.className = 'sentinel';
+    sentinelStart.tabIndex = 0;
     sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.style.cssText = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
     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.className = 'sentinel';
+    sentinelEnd.tabIndex = 0;
     sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.style.cssText = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
     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 hasExistingSentinels = container.querySelector(':scope > span.sentinel') !== null;
+    if (!hasExistingSentinels) {
         container.prepend(sentinelStart);
         container.append(sentinelEnd);
     }

package/dist/cjs/focus-zone.js

@@ -64,12 +64,19 @@ const KEY_TO_DIRECTION = {
     PageDown: 'end',
     Backspace: 'previous',
 };
+let cachedIsMac;
+function getIsMac() {
+    if (cachedIsMac === undefined) {
+        cachedIsMac = userAgent.isMacOS();
+    }
+    return cachedIsMac;
+}
 function getDirection(keyboardEvent) {
     const direction = KEY_TO_DIRECTION[keyboardEvent.key];
     if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
         return 'previous';
     }
-    const isMac = userAgent.isMacOS();
+    const isMac = getIsMac();
     if ((isMac && keyboardEvent.metaKey) || (!isMac && keyboardEvent.ctrlKey)) {
         if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
             return 'start';
@@ -187,8 +194,9 @@ 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);
     }
@@ -261,30 +269,50 @@ function focusZone(container, settings) {
     if (!preventInitialFocus)
         updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
+        const elementsToRemove = [];
+        const elementsToAdd = [];
+        const attributeRemovals = [];
+        const attributeAdditions = [];
         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.push(removedNode);
+                    }
+                }
+                for (const addedNode of mutation.addedNodes) {
+                    if (addedNode instanceof HTMLElement) {
+                        elementsToAdd.push(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) {
+                if (mutation.oldValue === null) {
+                    attributeRemovals.push(mutation.target);
+                }
+                else {
+                    attributeAdditions.push(mutation.target);
                 }
             }
         }
-        for (const mutation of mutations) {
-            for (const addedNode of mutation.addedNodes) {
-                if (addedNode instanceof HTMLElement) {
-                    beginFocusManagement(...iterateFocusableElements.iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
-                }
+        if (elementsToRemove.length > 0) {
+            const toRemove = elementsToRemove.flatMap(node => [...iterateFocusableElements.iterateFocusableElements(node)]);
+            if (toRemove.length > 0) {
+                endFocusManagement(...toRemove);
             }
-            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
-                if (mutation.target instanceof HTMLElement) {
-                    beginFocusManagement(mutation.target);
-                }
+        }
+        if (attributeRemovals.length > 0) {
+            endFocusManagement(...attributeRemovals);
+        }
+        if (elementsToAdd.length > 0) {
+            const toAdd = elementsToAdd.flatMap(node => [...iterateFocusableElements.iterateFocusableElements(node, iterateFocusableElementsOptions)]);
+            if (toAdd.length > 0) {
+                beginFocusManagement(...toAdd);
             }
         }
+        if (attributeAdditions.length > 0) {
+            beginFocusManagement(...attributeAdditions);
+        }
     });
     observer.observe(container, {
         subtree: true,
@@ -319,7 +347,7 @@ function focusZone(container, settings) {
                 if (focusableElement) {
                     updateFocusedElement(focusableElement);
                 }
-            }, { signal, capture: true });
+            }, { signal, capture: true, passive: true });
         }
         activeDescendantControl.addEventListener('focusin', () => {
             if (!currentFocusedElement) {

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

@@ -33,24 +33,31 @@ 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;
+        if (!offsetParent)
+            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;
+        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

@@ -45,23 +45,25 @@ function focusTrap(container, initialFocus, abortSignal) {
     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.className = 'sentinel';
+    sentinelStart.tabIndex = 0;
     sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.style.cssText = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
     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.className = 'sentinel';
+    sentinelEnd.tabIndex = 0;
     sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.style.cssText = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
     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 hasExistingSentinels = container.querySelector(':scope > span.sentinel') !== null;
+    if (!hasExistingSentinels) {
         container.prepend(sentinelStart);
         container.append(sentinelEnd);
     }

package/dist/esm/focus-zone.mjs

@@ -62,12 +62,19 @@ const KEY_TO_DIRECTION = {
     PageDown: 'end',
     Backspace: 'previous',
 };
+let cachedIsMac;
+function getIsMac() {
+    if (cachedIsMac === undefined) {
+        cachedIsMac = isMacOS();
+    }
+    return cachedIsMac;
+}
 function getDirection(keyboardEvent) {
     const direction = KEY_TO_DIRECTION[keyboardEvent.key];
     if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
         return 'previous';
     }
-    const isMac = isMacOS();
+    const isMac = getIsMac();
     if ((isMac && keyboardEvent.metaKey) || (!isMac && keyboardEvent.ctrlKey)) {
         if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
             return 'start';
@@ -185,8 +192,9 @@ 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);
     }
@@ -259,30 +267,50 @@ function focusZone(container, settings) {
     if (!preventInitialFocus)
         updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
+        const elementsToRemove = [];
+        const elementsToAdd = [];
+        const attributeRemovals = [];
+        const attributeAdditions = [];
         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.push(removedNode);
+                    }
+                }
+                for (const addedNode of mutation.addedNodes) {
+                    if (addedNode instanceof HTMLElement) {
+                        elementsToAdd.push(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) {
+                if (mutation.oldValue === null) {
+                    attributeRemovals.push(mutation.target);
+                }
+                else {
+                    attributeAdditions.push(mutation.target);
                 }
             }
         }
-        for (const mutation of mutations) {
-            for (const addedNode of mutation.addedNodes) {
-                if (addedNode instanceof HTMLElement) {
-                    beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
-                }
+        if (elementsToRemove.length > 0) {
+            const toRemove = elementsToRemove.flatMap(node => [...iterateFocusableElements(node)]);
+            if (toRemove.length > 0) {
+                endFocusManagement(...toRemove);
             }
-            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
-                if (mutation.target instanceof HTMLElement) {
-                    beginFocusManagement(mutation.target);
-                }
+        }
+        if (attributeRemovals.length > 0) {
+            endFocusManagement(...attributeRemovals);
+        }
+        if (elementsToAdd.length > 0) {
+            const toAdd = elementsToAdd.flatMap(node => [...iterateFocusableElements(node, iterateFocusableElementsOptions)]);
+            if (toAdd.length > 0) {
+                beginFocusManagement(...toAdd);
             }
         }
+        if (attributeAdditions.length > 0) {
+            beginFocusManagement(...attributeAdditions);
+        }
     });
     observer.observe(container, {
         subtree: true,
@@ -317,7 +345,7 @@ function focusZone(container, settings) {
                 if (focusableElement) {
                     updateFocusedElement(focusableElement);
                 }
-            }, { signal, capture: true });
+            }, { signal, capture: true, passive: true });
         }
         activeDescendantControl.addEventListener('focusin', () => {
             if (!currentFocusedElement) {

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

@@ -31,24 +31,31 @@ 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;
+        if (!offsetParent)
+            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;
+        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": "0.0.0-20251211200451",
+  "version": "0.0.0-20251214172224",
   "description": "Shared behaviors for JavaScript components",
   "type": "commonjs",
   "main": "dist/cjs/index.js",