@primer/behaviors 0.0.0-20240412132627 → 0.0.0-20240814142107

package/dist/cjs/anchored-position.js

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAnchoredPosition = void 0;
+'use strict';
+
 const alternateOrders = {
     'outside-top': ['outside-bottom', 'outside-right', 'outside-left', 'outside-bottom'],
     'outside-bottom': ['outside-top', 'outside-right', 'outside-left', 'outside-bottom'],
@@ -24,7 +23,6 @@ function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
     };
     return pureCalculateAnchoredPosition(clippingRect, relativeRect, floatingElement.getBoundingClientRect(), anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement, getDefaultSettings(settings));
 }
-exports.getAnchoredPosition = getAnchoredPosition;
 function getPositionedParent(element) {
     if (isOnTopLayer(element))
         return document.body;
@@ -254,3 +252,5 @@ function shouldRecalculateAlignment(align, currentPos, containerDimensions, elem
             currentPos.left < containerDimensions.left);
     }
 }
+
+exports.getAnchoredPosition = getAnchoredPosition;

package/dist/cjs/dimensions.js

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.positionedOffset = exports.overflowOffset = exports.overflowParent = exports.offset = void 0;
+'use strict';
+
 function offset(element) {
     const rect = element.getBoundingClientRect();
     return {
@@ -8,7 +7,6 @@ function offset(element) {
         left: rect.left + window.pageXOffset,
     };
 }
-exports.offset = offset;
 function overflowParent(targetElement) {
     let element = targetElement;
     const document = element.ownerDocument;
@@ -40,7 +38,6 @@ function overflowParent(targetElement) {
     }
     return element instanceof Document ? null : element;
 }
-exports.overflowParent = overflowParent;
 function overflowOffset(element, targetContainer) {
     let container = targetContainer;
     const document = element.ownerDocument;
@@ -76,7 +73,6 @@ function overflowOffset(element, targetContainer) {
     const right = width - (left + element.offsetWidth);
     return { top, left, bottom, right, height, width };
 }
-exports.overflowOffset = overflowOffset;
 function positionedOffset(targetElement, container) {
     let element = targetElement;
     const document = element.ownerDocument;
@@ -126,10 +122,14 @@ function positionedOffset(targetElement, container) {
     const right = scrollWidth - (left + width);
     return { top, left, bottom, right, _container: measuredContainer };
 }
-exports.positionedOffset = positionedOffset;
 function getDocumentHeight(documentBody, documentElement) {
     return Math.max(documentBody.scrollHeight, documentElement.scrollHeight, documentBody.offsetHeight, documentElement.offsetHeight, documentElement.clientHeight);
 }
 function getDocumentWidth(documentBody, documentElement) {
     return Math.max(documentBody.scrollWidth, documentElement.scrollWidth, documentBody.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth);
 }
+
+exports.offset = offset;
+exports.overflowOffset = overflowOffset;
+exports.overflowParent = overflowParent;
+exports.positionedOffset = positionedOffset;

package/dist/cjs/focus-trap.js

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusTrap = void 0;
-const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
-const event_listener_signal_js_1 = require("./polyfills/event-listener-signal.js");
-(0, event_listener_signal_js_1.polyfill)();
+'use strict';
+
+var iterateFocusableElements = require('./utils/iterate-focusable-elements.js');
+var eventListenerSignal = require('./polyfills/event-listener-signal.js');
+
+eventListenerSignal.polyfill();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
 function tryReactivate() {
@@ -19,6 +19,23 @@ function followSignal(signal) {
     });
     return controller;
 }
+function observeFocusTrap(container, sentinels) {
+    const observer = new MutationObserver(mutations => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                const firstChild = container.firstElementChild;
+                const lastChild = container.lastElementChild;
+                const [sentinelStart, sentinelEnd] = sentinels;
+                if (!(firstChild === null || firstChild === void 0 ? void 0 : firstChild.classList.contains('sentinel')))
+                    container.insertAdjacentElement('afterbegin', sentinelStart);
+                if (!(lastChild === null || lastChild === void 0 ? void 0 : lastChild.classList.contains('sentinel')))
+                    container.insertAdjacentElement('beforeend', sentinelEnd);
+            }
+        }
+    });
+    observer.observe(container, { childList: true });
+    return observer;
+}
 function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
@@ -28,7 +45,7 @@ function focusTrap(container, initialFocus, abortSignal) {
     sentinelStart.setAttribute('tabindex', '0');
     sentinelStart.setAttribute('aria-hidden', 'true');
     sentinelStart.onfocus = () => {
-        const lastFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container, true);
+        const lastFocusableChild = iterateFocusableElements.getFocusableChild(container, true);
         lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
     };
     const sentinelEnd = document.createElement('span');
@@ -36,11 +53,12 @@ function focusTrap(container, initialFocus, abortSignal) {
     sentinelEnd.setAttribute('tabindex', '0');
     sentinelEnd.setAttribute('aria-hidden', 'true');
     sentinelEnd.onfocus = () => {
-        const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+        const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
         firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
     };
     container.prepend(sentinelStart);
     container.append(sentinelEnd);
+    const observer = observeFocusTrap(container, [sentinelStart, sentinelEnd]);
     let lastFocusedChild = undefined;
     function ensureTrapZoneHasFocus(focusedElement) {
         if (focusedElement instanceof HTMLElement && document.contains(container)) {
@@ -49,7 +67,7 @@ function focusTrap(container, initialFocus, abortSignal) {
                 return;
             }
             else {
-                if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
+                if (lastFocusedChild && iterateFocusableElements.isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
                     lastFocusedChild.focus();
                     return;
                 }
@@ -58,7 +76,7 @@ function focusTrap(container, initialFocus, abortSignal) {
                     return;
                 }
                 else {
-                    const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+                    const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
                     firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
                     return;
                 }
@@ -84,6 +102,7 @@ function focusTrap(container, initialFocus, abortSignal) {
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);
         }
+        observer.disconnect();
         tryReactivate();
     });
     document.addEventListener('focus', event => {
@@ -104,4 +123,5 @@ function focusTrap(container, initialFocus, abortSignal) {
         return controller;
     }
 }
+
 exports.focusTrap = focusTrap;

package/dist/cjs/focus-zone.js

@@ -1,12 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusZone = exports.hasActiveDescendantAttribute = exports.activeDescendantActivatedIndirectly = exports.activeDescendantActivatedDirectly = exports.isActiveDescendantAttribute = exports.FocusKeys = void 0;
-const event_listener_signal_js_1 = require("./polyfills/event-listener-signal.js");
-const user_agent_js_1 = require("./utils/user-agent.js");
-const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
-const unique_id_js_1 = require("./utils/unique-id.js");
-(0, event_listener_signal_js_1.polyfill)();
-var FocusKeys;
+'use strict';
+
+var eventListenerSignal = require('./polyfills/event-listener-signal.js');
+var userAgent = require('./utils/user-agent.js');
+var iterateFocusableElements = require('./utils/iterate-focusable-elements.js');
+var uniqueId = require('./utils/unique-id.js');
+
+eventListenerSignal.polyfill();
+exports.FocusKeys = void 0;
 (function (FocusKeys) {
     FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
     FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
@@ -22,26 +22,26 @@ var FocusKeys;
     FocusKeys[FocusKeys["HJKL"] = 12] = "HJKL";
     FocusKeys[FocusKeys["WASD"] = 96] = "WASD";
     FocusKeys[FocusKeys["All"] = 511] = "All";
-})(FocusKeys || (exports.FocusKeys = FocusKeys = {}));
+})(exports.FocusKeys || (exports.FocusKeys = {}));
 const KEY_TO_BIT = {
-    ArrowLeft: FocusKeys.ArrowHorizontal,
-    ArrowDown: FocusKeys.ArrowVertical,
-    ArrowUp: FocusKeys.ArrowVertical,
-    ArrowRight: FocusKeys.ArrowHorizontal,
-    h: FocusKeys.HL,
-    j: FocusKeys.JK,
-    k: FocusKeys.JK,
-    l: FocusKeys.HL,
-    a: FocusKeys.AD,
-    s: FocusKeys.WS,
-    w: FocusKeys.WS,
-    d: FocusKeys.AD,
-    Tab: FocusKeys.Tab,
-    Home: FocusKeys.HomeAndEnd,
-    End: FocusKeys.HomeAndEnd,
-    PageUp: FocusKeys.PageUpDown,
-    PageDown: FocusKeys.PageUpDown,
-    Backspace: FocusKeys.Backspace,
+    ArrowLeft: exports.FocusKeys.ArrowHorizontal,
+    ArrowDown: exports.FocusKeys.ArrowVertical,
+    ArrowUp: exports.FocusKeys.ArrowVertical,
+    ArrowRight: exports.FocusKeys.ArrowHorizontal,
+    h: exports.FocusKeys.HL,
+    j: exports.FocusKeys.JK,
+    k: exports.FocusKeys.JK,
+    l: exports.FocusKeys.HL,
+    a: exports.FocusKeys.AD,
+    s: exports.FocusKeys.WS,
+    w: exports.FocusKeys.WS,
+    d: exports.FocusKeys.AD,
+    Tab: exports.FocusKeys.Tab,
+    Home: exports.FocusKeys.HomeAndEnd,
+    End: exports.FocusKeys.HomeAndEnd,
+    PageUp: exports.FocusKeys.PageUpDown,
+    PageDown: exports.FocusKeys.PageUpDown,
+    Backspace: exports.FocusKeys.Backspace,
 };
 const KEY_TO_DIRECTION = {
     ArrowLeft: 'previous',
@@ -68,7 +68,7 @@ function getDirection(keyboardEvent) {
     if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
         return 'previous';
     }
-    const isMac = (0, user_agent_js_1.isMacOS)();
+    const isMac = userAgent.isMacOS();
     if ((isMac && keyboardEvent.metaKey) || (!isMac && keyboardEvent.ctrlKey)) {
         if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
             return 'start';
@@ -91,10 +91,10 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
         if (keyLength === 1) {
             return true;
         }
-        if (key === 'ArrowDown' && (0, user_agent_js_1.isMacOS)() && !keyboardEvent.metaKey) {
+        if (key === 'ArrowDown' && userAgent.isMacOS() && !keyboardEvent.metaKey) {
             return true;
         }
-        if (key === 'ArrowDown' && !(0, user_agent_js_1.isMacOS)() && keyboardEvent.altKey) {
+        if (key === 'ArrowDown' && !userAgent.isMacOS() && keyboardEvent.altKey) {
             return true;
         }
     }
@@ -122,15 +122,15 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
     }
     return false;
 }
-exports.isActiveDescendantAttribute = 'data-is-active-descendant';
-exports.activeDescendantActivatedDirectly = 'activated-directly';
-exports.activeDescendantActivatedIndirectly = 'activated-indirectly';
-exports.hasActiveDescendantAttribute = 'data-has-active-descendant';
+const isActiveDescendantAttribute = 'data-is-active-descendant';
+const activeDescendantActivatedDirectly = 'activated-directly';
+const activeDescendantActivatedIndirectly = 'activated-indirectly';
+const hasActiveDescendantAttribute = 'data-has-active-descendant';
 function focusZone(container, settings) {
     var _a, _b, _c, _d, _e;
     const focusableElements = [];
     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 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';
     const focusInStrategy = (_c = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _c !== void 0 ? _c : 'previous';
     const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
@@ -162,18 +162,18 @@ function focusZone(container, settings) {
     }
     function setActiveDescendant(from, to, directlyActivated = false) {
         if (!to.id) {
-            to.setAttribute('id', (0, unique_id_js_1.uniqueId)());
+            to.setAttribute('id', uniqueId.uniqueId());
         }
         if (from && from !== to) {
-            from.removeAttribute(exports.isActiveDescendantAttribute);
+            from.removeAttribute(isActiveDescendantAttribute);
         }
         if (!activeDescendantControl ||
             (!directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id)) {
             return;
         }
         activeDescendantControl.setAttribute('aria-activedescendant', to.id);
-        container.setAttribute(exports.hasActiveDescendantAttribute, to.id);
-        to.setAttribute(exports.isActiveDescendantAttribute, directlyActivated ? exports.activeDescendantActivatedDirectly : exports.activeDescendantActivatedIndirectly);
+        container.setAttribute(hasActiveDescendantAttribute, to.id);
+        to.setAttribute(isActiveDescendantAttribute, directlyActivated ? activeDescendantActivatedDirectly : activeDescendantActivatedIndirectly);
         activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from, directlyActivated);
     }
     function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
@@ -181,8 +181,8 @@ function focusZone(container, settings) {
             currentFocusedElement = undefined;
         }
         activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
-        container.removeAttribute(exports.hasActiveDescendantAttribute);
-        previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(exports.isActiveDescendantAttribute);
+        container.removeAttribute(hasActiveDescendantAttribute);
+        previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
         activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
     }
     function beginFocusManagement(...elements) {
@@ -249,21 +249,31 @@ function focusZone(container, settings) {
         strict: settings === null || settings === void 0 ? void 0 : settings.strict,
         onlyTabbable: settings === null || settings === void 0 ? void 0 : settings.onlyTabbable,
     };
-    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(container, iterateFocusableElementsOptions));
+    beginFocusManagement(...iterateFocusableElements.iterateFocusableElements(container, iterateFocusableElementsOptions));
     const initialElement = typeof focusInStrategy === 'function' ? focusInStrategy(document.body) : getFirstFocusableElement();
     updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
         for (const mutation of mutations) {
             for (const removedNode of mutation.removedNodes) {
                 if (removedNode instanceof HTMLElement) {
-                    endFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(removedNode, iterateFocusableElementsOptions));
+                    endFocusManagement(...iterateFocusableElements.iterateFocusableElements(removedNode));
+                }
+            }
+            if (mutation.type === 'attributes' && mutation.oldValue === null) {
+                if (mutation.target instanceof HTMLElement) {
+                    endFocusManagement(mutation.target);
                 }
             }
         }
         for (const mutation of mutations) {
             for (const addedNode of mutation.addedNodes) {
                 if (addedNode instanceof HTMLElement) {
-                    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(addedNode, iterateFocusableElementsOptions));
+                    beginFocusManagement(...iterateFocusableElements.iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
+                }
+            }
+            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
+                if (mutation.target instanceof HTMLElement) {
+                    beginFocusManagement(mutation.target);
                 }
             }
         }
@@ -271,6 +281,8 @@ function focusZone(container, settings) {
     observer.observe(container, {
         subtree: true,
         childList: true,
+        attributeFilter: ['hidden', 'disabled'],
+        attributeOldValue: true,
     });
     const controller = new AbortController();
     const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
@@ -437,4 +449,9 @@ function focusZone(container, settings) {
     }, { signal });
     return controller;
 }
+
+exports.activeDescendantActivatedDirectly = activeDescendantActivatedDirectly;
+exports.activeDescendantActivatedIndirectly = activeDescendantActivatedIndirectly;
 exports.focusZone = focusZone;
+exports.hasActiveDescendantAttribute = hasActiveDescendantAttribute;
+exports.isActiveDescendantAttribute = isActiveDescendantAttribute;

package/dist/cjs/index.js

@@ -1,21 +1,26 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./anchored-position.js"), exports);
-__exportStar(require("./focus-trap.js"), exports);
-__exportStar(require("./focus-zone.js"), exports);
-__exportStar(require("./scroll-into-view.js"), exports);
-__exportStar(require("./dimensions.js"), exports);
+'use strict';
+
+var anchoredPosition = require('./anchored-position.js');
+var focusTrap = require('./focus-trap.js');
+var focusZone = require('./focus-zone.js');
+var scrollIntoView = require('./scroll-into-view.js');
+var dimensions = require('./dimensions.js');
+
+
+
+exports.getAnchoredPosition = anchoredPosition.getAnchoredPosition;
+exports.focusTrap = focusTrap.focusTrap;
+Object.defineProperty(exports, "FocusKeys", {
+	enumerable: true,
+	get: function () { return focusZone.FocusKeys; }
+});
+exports.activeDescendantActivatedDirectly = focusZone.activeDescendantActivatedDirectly;
+exports.activeDescendantActivatedIndirectly = focusZone.activeDescendantActivatedIndirectly;
+exports.focusZone = focusZone.focusZone;
+exports.hasActiveDescendantAttribute = focusZone.hasActiveDescendantAttribute;
+exports.isActiveDescendantAttribute = focusZone.isActiveDescendantAttribute;
+exports.scrollIntoView = scrollIntoView.scrollIntoView;
+exports.offset = dimensions.offset;
+exports.overflowOffset = dimensions.overflowOffset;
+exports.overflowParent = dimensions.overflowParent;
+exports.positionedOffset = dimensions.positionedOffset;

package/dist/cjs/polyfills/event-listener-signal.js

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.polyfill = void 0;
+'use strict';
+
 let signalSupported = false;
 function noop() { }
 try {
@@ -41,4 +40,5 @@ function polyfill() {
         signalSupported = true;
     }
 }
+
 exports.polyfill = polyfill;

package/dist/cjs/scroll-into-view.js

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollIntoView = void 0;
+'use strict';
+
 function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
     const startSide = direction === 'vertical' ? 'top' : 'left';
     const endSide = direction === 'vertical' ? 'bottom' : 'right';
@@ -18,4 +17,5 @@ function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargi
         viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + endMargin });
     }
 }
+
 exports.scrollIntoView = scrollIntoView;

package/dist/cjs/utils/index.js

@@ -1,19 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./iterate-focusable-elements.js"), exports);
-__exportStar(require("./unique-id.js"), exports);
-__exportStar(require("./user-agent.js"), exports);
+'use strict';
+
+var iterateFocusableElements = require('./iterate-focusable-elements.js');
+var uniqueId = require('./unique-id.js');
+var userAgent = require('./user-agent.js');
+
+
+
+exports.getFocusableChild = iterateFocusableElements.getFocusableChild;
+exports.isFocusable = iterateFocusableElements.isFocusable;
+exports.isTabbable = iterateFocusableElements.isTabbable;
+exports.iterateFocusableElements = iterateFocusableElements.iterateFocusableElements;
+exports.uniqueId = uniqueId.uniqueId;
+exports.isMacOS = userAgent.isMacOS;

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

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
+'use strict';
+
 function* iterateFocusableElements(container, options = {}) {
     var _a, _b;
     const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
@@ -31,11 +30,9 @@ function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
-exports.iterateFocusableElements = iterateFocusableElements;
 function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }
-exports.getFocusableChild = getFocusableChild;
 function isFocusable(elem, strict = false) {
     const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
         elem.disabled;
@@ -66,8 +63,11 @@ function isFocusable(elem, strict = false) {
     }
     return elem.tabIndex !== -1;
 }
-exports.isFocusable = isFocusable;
 function isTabbable(elem, strict = false) {
     return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
 }
+
+exports.getFocusableChild = getFocusableChild;
+exports.isFocusable = isFocusable;
 exports.isTabbable = isTabbable;
+exports.iterateFocusableElements = iterateFocusableElements;

package/dist/cjs/utils/unique-id.js

@@ -1,8 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.uniqueId = void 0;
+'use strict';
+
 let idSeed = 10000;
 function uniqueId() {
     return `__primer_id_${idSeed++}`;
 }
+
 exports.uniqueId = uniqueId;

package/dist/cjs/utils/user-agent.js

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMacOS = void 0;
+'use strict';
+
 let isMac = undefined;
 function isMacOS() {
     if (isMac === undefined) {
@@ -8,4 +7,5 @@ function isMacOS() {
     }
     return isMac;
 }
+
 exports.isMacOS = isMacOS;

package/dist/esm/{anchored-position.js → anchored-position.mjs}

@@ -9,7 +9,7 @@ const alternateAlignments = {
     end: ['start', 'center'],
     center: ['end', 'start'],
 };
-export function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
+function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
     const parentElement = getPositionedParent(floatingElement);
     const clippingRect = getClippingRect(parentElement);
     const parentElementStyle = getComputedStyle(parentElement);
@@ -250,3 +250,5 @@ function shouldRecalculateAlignment(align, currentPos, containerDimensions, elem
             currentPos.left < containerDimensions.left);
     }
 }
+
+export { getAnchoredPosition };

package/dist/esm/{dimensions.js → dimensions.mjs}

@@ -1,11 +1,11 @@
-export function offset(element) {
+function offset(element) {
     const rect = element.getBoundingClientRect();
     return {
         top: rect.top + window.pageYOffset,
         left: rect.left + window.pageXOffset,
     };
 }
-export function overflowParent(targetElement) {
+function overflowParent(targetElement) {
     let element = targetElement;
     const document = element.ownerDocument;
     if (!document) {
@@ -36,7 +36,7 @@ export function overflowParent(targetElement) {
     }
     return element instanceof Document ? null : element;
 }
-export function overflowOffset(element, targetContainer) {
+function overflowOffset(element, targetContainer) {
     let container = targetContainer;
     const document = element.ownerDocument;
     if (!document) {
@@ -71,7 +71,7 @@ export function overflowOffset(element, targetContainer) {
     const right = width - (left + element.offsetWidth);
     return { top, left, bottom, right, height, width };
 }
-export function positionedOffset(targetElement, container) {
+function positionedOffset(targetElement, container) {
     let element = targetElement;
     const document = element.ownerDocument;
     if (!document) {
@@ -126,3 +126,5 @@ function getDocumentHeight(documentBody, documentElement) {
 function getDocumentWidth(documentBody, documentElement) {
     return Math.max(documentBody.scrollWidth, documentElement.scrollWidth, documentBody.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth);
 }
+
+export { offset, overflowOffset, overflowParent, positionedOffset };

package/dist/esm/{focus-trap.js → focus-trap.mjs}

@@ -1,6 +1,7 @@
-import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
-import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
-eventListenerSignalPolyfill();
+import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.mjs';
+import { polyfill } from './polyfills/event-listener-signal.mjs';
+
+polyfill();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
 function tryReactivate() {
@@ -16,7 +17,24 @@ function followSignal(signal) {
     });
     return controller;
 }
-export function focusTrap(container, initialFocus, abortSignal) {
+function observeFocusTrap(container, sentinels) {
+    const observer = new MutationObserver(mutations => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                const firstChild = container.firstElementChild;
+                const lastChild = container.lastElementChild;
+                const [sentinelStart, sentinelEnd] = sentinels;
+                if (!(firstChild === null || firstChild === void 0 ? void 0 : firstChild.classList.contains('sentinel')))
+                    container.insertAdjacentElement('afterbegin', sentinelStart);
+                if (!(lastChild === null || lastChild === void 0 ? void 0 : lastChild.classList.contains('sentinel')))
+                    container.insertAdjacentElement('beforeend', sentinelEnd);
+            }
+        }
+    });
+    observer.observe(container, { childList: true });
+    return observer;
+}
+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');
@@ -38,6 +56,7 @@ export function focusTrap(container, initialFocus, abortSignal) {
     };
     container.prepend(sentinelStart);
     container.append(sentinelEnd);
+    const observer = observeFocusTrap(container, [sentinelStart, sentinelEnd]);
     let lastFocusedChild = undefined;
     function ensureTrapZoneHasFocus(focusedElement) {
         if (focusedElement instanceof HTMLElement && document.contains(container)) {
@@ -81,6 +100,7 @@ export function focusTrap(container, initialFocus, abortSignal) {
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);
         }
+        observer.disconnect();
         tryReactivate();
     });
     document.addEventListener('focus', event => {
@@ -101,3 +121,5 @@ export function focusTrap(container, initialFocus, abortSignal) {
         return controller;
     }
 }
+
+export { focusTrap };

package/dist/esm/{focus-zone.js → focus-zone.mjs}

@@ -1,9 +1,10 @@
-import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
-import { isMacOS } from './utils/user-agent.js';
-import { iterateFocusableElements } from './utils/iterate-focusable-elements.js';
-import { uniqueId } from './utils/unique-id.js';
-eventListenerSignalPolyfill();
-export var FocusKeys;
+import { polyfill } from './polyfills/event-listener-signal.mjs';
+import { isMacOS } from './utils/user-agent.mjs';
+import { iterateFocusableElements } from './utils/iterate-focusable-elements.mjs';
+import { uniqueId } from './utils/unique-id.mjs';
+
+polyfill();
+var FocusKeys;
 (function (FocusKeys) {
     FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
     FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
@@ -119,11 +120,11 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
     }
     return false;
 }
-export const isActiveDescendantAttribute = 'data-is-active-descendant';
-export const activeDescendantActivatedDirectly = 'activated-directly';
-export const activeDescendantActivatedIndirectly = 'activated-indirectly';
-export const hasActiveDescendantAttribute = 'data-has-active-descendant';
-export function focusZone(container, settings) {
+const isActiveDescendantAttribute = 'data-is-active-descendant';
+const activeDescendantActivatedDirectly = 'activated-directly';
+const activeDescendantActivatedIndirectly = 'activated-indirectly';
+const hasActiveDescendantAttribute = 'data-has-active-descendant';
+function focusZone(container, settings) {
     var _a, _b, _c, _d, _e;
     const focusableElements = [];
     const savedTabIndex = new WeakMap();
@@ -253,7 +254,12 @@ export function focusZone(container, settings) {
         for (const mutation of mutations) {
             for (const removedNode of mutation.removedNodes) {
                 if (removedNode instanceof HTMLElement) {
-                    endFocusManagement(...iterateFocusableElements(removedNode, iterateFocusableElementsOptions));
+                    endFocusManagement(...iterateFocusableElements(removedNode));
+                }
+            }
+            if (mutation.type === 'attributes' && mutation.oldValue === null) {
+                if (mutation.target instanceof HTMLElement) {
+                    endFocusManagement(mutation.target);
                 }
             }
         }
@@ -263,11 +269,18 @@ export function focusZone(container, settings) {
                     beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
                 }
             }
+            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
+                if (mutation.target instanceof HTMLElement) {
+                    beginFocusManagement(mutation.target);
+                }
+            }
         }
     });
     observer.observe(container, {
         subtree: true,
         childList: true,
+        attributeFilter: ['hidden', 'disabled'],
+        attributeOldValue: true,
     });
     const controller = new AbortController();
     const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
@@ -434,3 +447,5 @@ export function focusZone(container, settings) {
     }, { signal });
     return controller;
 }
+
+export { FocusKeys, activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, focusZone, hasActiveDescendantAttribute, isActiveDescendantAttribute };

package/dist/esm/index.mjs

@@ -0,0 +1,5 @@
+export { getAnchoredPosition } from './anchored-position.mjs';
+export { focusTrap } from './focus-trap.mjs';
+export { FocusKeys, activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, focusZone, hasActiveDescendantAttribute, isActiveDescendantAttribute } from './focus-zone.mjs';
+export { scrollIntoView } from './scroll-into-view.mjs';
+export { offset, overflowOffset, overflowParent, positionedOffset } from './dimensions.mjs';

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/dist/esm/polyfills/{event-listener-signal.js → event-listener-signal.mjs}

@@ -32,9 +32,11 @@ function monkeyPatch() {
         return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
     };
 }
-export function polyfill() {
+function polyfill() {
     if (!featureSupported()) {
         monkeyPatch();
         signalSupported = true;
     }
 }
+
+export { polyfill };

package/dist/esm/{scroll-into-view.js → scroll-into-view.mjs}

@@ -1,4 +1,4 @@
-export function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
+function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
     const startSide = direction === 'vertical' ? 'top' : 'left';
     const endSide = direction === 'vertical' ? 'bottom' : 'right';
     const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
@@ -15,3 +15,5 @@ export function scrollIntoView(child, viewingArea, { direction = 'vertical', sta
         viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + endMargin });
     }
 }
+
+export { scrollIntoView };

package/dist/esm/utils/index.mjs

@@ -0,0 +1,3 @@
+export { getFocusableChild, isFocusable, isTabbable, iterateFocusableElements } from './iterate-focusable-elements.mjs';
+export { uniqueId } from './unique-id.mjs';
+export { isMacOS } from './user-agent.mjs';

package/dist/esm/utils/{iterate-focusable-elements.js → iterate-focusable-elements.mjs}

@@ -1,4 +1,4 @@
-export function* iterateFocusableElements(container, options = {}) {
+function* iterateFocusableElements(container, options = {}) {
     var _a, _b;
     const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
     const acceptFn = ((_b = options.onlyTabbable) !== null && _b !== void 0 ? _b : false) ? isTabbable : isFocusable;
@@ -28,10 +28,10 @@ export function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
-export function getFocusableChild(container, lastChild = false) {
+function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }
-export function isFocusable(elem, strict = false) {
+function isFocusable(elem, strict = false) {
     const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
         elem.disabled;
     const hiddenInert = elem.hidden;
@@ -61,6 +61,8 @@ export function isFocusable(elem, strict = false) {
     }
     return elem.tabIndex !== -1;
 }
-export function isTabbable(elem, strict = false) {
+function isTabbable(elem, strict = false) {
     return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
 }
+
+export { getFocusableChild, isFocusable, isTabbable, iterateFocusableElements };

package/dist/esm/utils/{unique-id.js → unique-id.mjs}

@@ -1,4 +1,6 @@
 let idSeed = 10000;
-export function uniqueId() {
+function uniqueId() {
     return `__primer_id_${idSeed++}`;
 }
+
+export { uniqueId };

package/dist/esm/utils/{user-agent.js → user-agent.mjs}

@@ -1,7 +1,9 @@
 let isMac = undefined;
-export function isMacOS() {
+function isMacOS() {
     if (isMac === undefined) {
         isMac = /^mac/i.test(window.navigator.platform);
     }
     return isMac;
 }
+
+export { isMacOS };

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-20240412132627",
+  "version": "0.0.0-20240814142107",
   "description": "Shared behaviors for JavaScript components",
+  "type": "commonjs",
   "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/index.mjs",
   "exports": {
     ".": {
-      "module": "./dist/esm/index.js",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/esm/index.d.ts"
+      "types": {
+        "import": "./dist/esm/index.d.ts",
+        "require": "./dist/cjs/index.d.ts"
+      },
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js"
     },
     "./utils": {
-      "module": "./dist/esm/utils/index.js",
-      "import": "./dist/esm/utils/index.js",
-      "require": "./dist/cjs/utils/index.js",
-      "types": "./dist/esm/utils/index.d.ts"
+      "types": {
+        "import": "./dist/esm/utils/index.d.ts",
+        "require": "./dist/cjs/utils/index.d.ts"
+      },
+      "import": "./dist/esm/utils/index.mjs",
+      "require": "./dist/cjs/utils/index.js"
     }
   },
   "types": "dist/esm/index.d.ts",
@@ -24,16 +29,14 @@
     "utils"
   ],
   "sideEffects": [
-    "dist/esm/focus-zone.js",
-    "dist/esm/focus-trap.js",
+    "dist/esm/focus-zone.mjs",
+    "dist/esm/focus-trap.mjs",
     "dist/cjs/focus-zone.js",
     "dist/cjs/focus-trap.js"
   ],
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run build:esm && npm run build:cjs",
-    "build:esm": "tsc",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "clean": "rimraf dist",
+    "build": "rollup -c",
     "lint": "eslint src/",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -62,30 +65,35 @@
   "size-limit": [
     {
       "limit": "10kb",
-      "path": "dist/esm/index.js"
+      "path": "dist/esm/index.mjs"
     }
   ],
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.15.3",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.18.1",
     "@github/prettier-config": "^0.0.6",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@testing-library/react": "^14.0.0",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/wasm-node": "^4.19.1",
+    "@size-limit/preset-small-lib": "^11.1.4",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.2.23",
-    "esbuild": "^0.20.0",
+    "esbuild": "^0.23.0",
     "esbuild-jest": "^0.5.0",
     "eslint": "^8.50.0",
-    "eslint-plugin-github": "^4.10.0",
+    "eslint-plugin-github": "^5.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "size-limit": "^8.2.4",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.18.0",
+    "size-limit": "^11.1.4",
     "typescript": "^5.2.2"
   }
 }

package/dist/esm/index.js

@@ -1,5 +0,0 @@
-export * from './anchored-position.js';
-export * from './focus-trap.js';
-export * from './focus-zone.js';
-export * from './scroll-into-view.js';
-export * from './dimensions.js';

package/dist/esm/utils/index.js

@@ -1,3 +0,0 @@
-export * from './iterate-focusable-elements.js';
-export * from './unique-id.js';
-export * from './user-agent.js';