@primer/behaviors 0.0.0-2022349143 → 0.0.0-2022726202949

package/dist/cjs/anchored-position.d.ts

@@ -11,5 +11,6 @@ export interface AnchorPosition {
     top: number;
     left: number;
     anchorSide: AnchorSide;
+    anchorAlign: AnchorAlignment;
 }
 export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;

package/dist/cjs/anchored-position.js

@@ -7,6 +7,11 @@ const alternateOrders = {
     'outside-left': ['outside-right', 'outside-bottom', 'outside-top', 'outside-bottom'],
     'outside-right': ['outside-left', 'outside-bottom', 'outside-top', 'outside-bottom']
 };
+const alternateAlignments = {
+    start: ['end', 'center'],
+    end: ['start', 'center'],
+    center: ['end', 'start']
+};
 function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
     const parentElement = getPositionedParent(floatingElement);
     const clippingRect = getClippingRect(parentElement);
@@ -86,6 +91,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
     };
     let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset);
     let anchorSide = side;
+    let anchorAlign = align;
     pos.top -= relativePosition.top;
     pos.left -= relativePosition.left;
     if (!allowOutOfBounds) {
@@ -103,6 +109,20 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
                 anchorSide = nextSide;
             }
         }
+        const alternateAlignment = alternateAlignments[align];
+        let alignmentAttempt = 0;
+        if (alternateAlignment) {
+            let prevAlign = align;
+            while (alignmentAttempt < alternateAlignment.length &&
+                shouldRecalculateAlignment(prevAlign, pos, relativeViewportRect, floatingRect)) {
+                const nextAlign = alternateAlignment[alignmentAttempt++];
+                prevAlign = nextAlign;
+                pos = calculatePosition(floatingRect, anchorRect, anchorSide, nextAlign, anchorOffset, alignmentOffset);
+                pos.top -= relativePosition.top;
+                pos.left -= relativePosition.left;
+                anchorAlign = nextAlign;
+            }
+        }
         if (pos.top < relativeViewportRect.top) {
             pos.top = relativeViewportRect.top;
         }
@@ -118,7 +138,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
             }
         }
     }
-    return Object.assign(Object.assign({}, pos), { anchorSide });
+    return Object.assign(Object.assign({}, pos), { anchorSide, anchorAlign });
 }
 function calculatePosition(elementDimensions, anchorPosition, side, align, anchorOffset, alignmentOffset) {
     const anchorRight = anchorPosition.left + anchorPosition.width;
@@ -208,3 +228,12 @@ function shouldRecalculatePosition(side, currentPos, containerDimensions, elemen
             currentPos.left + elementDimensions.width > containerDimensions.width + containerDimensions.left);
     }
 }
+function shouldRecalculateAlignment(align, currentPos, containerDimensions, elementDimensions) {
+    if (align === 'end') {
+        return currentPos.left < containerDimensions.left;
+    }
+    else if (align === 'start' || align === 'center') {
+        return (currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width ||
+            currentPos.left < containerDimensions.left);
+    }
+}

package/dist/cjs/dimensions.d.ts

@@ -0,0 +1,19 @@
+declare type Dimensions = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    height?: number;
+    width?: number;
+};
+declare type Offset = {
+    top: number;
+    left: number;
+};
+export declare function offset(element: HTMLElement): Offset;
+export declare function overflowParent(targetElement: HTMLElement): HTMLElement | null | undefined;
+export declare function overflowOffset(element: HTMLElement, targetContainer: Document | HTMLElement | null): Dimensions | undefined;
+export declare function positionedOffset(targetElement: HTMLElement, container: HTMLElement | Document | Window | null): (Dimensions & {
+    _container: HTMLElement;
+}) | undefined;
+export {};

package/dist/cjs/dimensions.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positionedOffset = exports.overflowOffset = exports.overflowParent = exports.offset = void 0;
+function offset(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        top: rect.top + window.pageYOffset,
+        left: rect.left + window.pageXOffset
+    };
+}
+exports.offset = offset;
+function overflowParent(targetElement) {
+    let element = targetElement;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    if (!element.offsetParent) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    if (element === document.body) {
+        return;
+    }
+    while (element !== document.body) {
+        if (element.parentElement instanceof HTMLElement) {
+            element = element.parentElement;
+        }
+        else {
+            return;
+        }
+        const { position, overflowY, overflowX } = getComputedStyle(element);
+        if (position === 'fixed' ||
+            overflowY === 'auto' ||
+            overflowX === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowX === 'scroll') {
+            break;
+        }
+    }
+    return element instanceof Document ? null : element;
+}
+exports.overflowParent = overflowParent;
+function overflowOffset(element, targetContainer) {
+    let container = targetContainer;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    if (element === documentElement) {
+        return;
+    }
+    const elementOffset = positionedOffset(element, container);
+    if (!elementOffset) {
+        return;
+    }
+    container = elementOffset._container;
+    const scroll = container === document.documentElement && document.defaultView
+        ? {
+            top: document.defaultView.pageYOffset,
+            left: document.defaultView.pageXOffset
+        }
+        : {
+            top: container.scrollTop,
+            left: container.scrollLeft
+        };
+    const top = elementOffset.top - scroll.top;
+    const left = elementOffset.left - scroll.left;
+    const height = container.clientHeight;
+    const width = container.clientWidth;
+    const bottom = height - (top + element.offsetHeight);
+    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;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    let top = 0;
+    let left = 0;
+    const height = element.offsetHeight;
+    const width = element.offsetWidth;
+    while (!(element === document.body || element === container)) {
+        top += element.offsetTop || 0;
+        left += element.offsetLeft || 0;
+        if (element.offsetParent instanceof HTMLElement) {
+            element = element.offsetParent;
+        }
+        else {
+            return;
+        }
+    }
+    let scrollHeight;
+    let scrollWidth;
+    let measuredContainer;
+    if (!container ||
+        container === document ||
+        container === document.defaultView ||
+        container === document.documentElement ||
+        container === document.body) {
+        measuredContainer = documentElement;
+        scrollHeight = getDocumentHeight(document.body, documentElement);
+        scrollWidth = getDocumentWidth(document.body, documentElement);
+    }
+    else if (container instanceof HTMLElement) {
+        measuredContainer = container;
+        scrollHeight = container.scrollHeight;
+        scrollWidth = container.scrollWidth;
+    }
+    else {
+        return;
+    }
+    const bottom = scrollHeight - (top + height);
+    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);
+}

package/dist/cjs/focus-trap.d.ts

@@ -1 +1 @@
-export declare function focusTrap(container: HTMLElement, abortSignal: AbortSignal, initialFocus?: HTMLElement): void;
+export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;

package/dist/cjs/focus-trap.js

@@ -9,7 +9,7 @@ let activeTrap = undefined;
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
-        focusTrap(trapToReactivate.container, trapToReactivate.originalSignal, trapToReactivate.initialFocus);
+        focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
     }
 }
 function followSignal(signal) {
@@ -19,7 +19,9 @@ function followSignal(signal) {
     });
     return controller;
 }
-function focusTrap(container, abortSignal, initialFocus) {
+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');
@@ -48,22 +50,22 @@ function focusTrap(container, abortSignal, initialFocus) {
             }
             else {
                 if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
-                    (0, iterate_focusable_elements_js_1.focusIfNeeded)(lastFocusedChild);
+                    lastFocusedChild.focus();
                     return;
                 }
                 else if (initialFocus && container.contains(initialFocus)) {
-                    (0, iterate_focusable_elements_js_1.focusIfNeeded)(initialFocus);
+                    initialFocus.focus();
                     return;
                 }
                 else {
                     const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
-                    (0, iterate_focusable_elements_js_1.focusIfNeeded)(firstFocusableChild);
+                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
                     return;
                 }
             }
         }
     }
-    const wrappingController = followSignal(abortSignal);
+    const wrappingController = followSignal(signal);
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -73,7 +75,7 @@ function focusTrap(container, abortSignal, initialFocus) {
     wrappingController.signal.addEventListener('abort', () => {
         activeTrap = undefined;
     });
-    abortSignal.addEventListener('abort', () => {
+    signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
         const sentinels = container.getElementsByClassName('sentinel');
         while (sentinels.length > 0)
@@ -92,11 +94,14 @@ function focusTrap(container, abortSignal, initialFocus) {
         container,
         controller: wrappingController,
         initialFocus,
-        originalSignal: abortSignal
+        originalSignal: signal
     };
     const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
     if (suspendedTrapIndex >= 0) {
         suspendedTrapStack.splice(suspendedTrapIndex, 1);
     }
+    if (!abortSignal) {
+        return controller;
+    }
 }
 exports.focusTrap = focusTrap;

package/dist/cjs/index.d.ts

@@ -2,3 +2,4 @@ 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/cjs/index.js

@@ -14,3 +14,4 @@ __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);

package/dist/cjs/utils/iterate-focusable-elements.d.ts

@@ -4,7 +4,6 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
-export declare function focusIfNeeded(elem?: HTMLElement): void;
 export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
 export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
 export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.focusIfNeeded = exports.iterateFocusableElements = void 0;
+exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
 function* iterateFocusableElements(container, options = {}) {
     var _a, _b;
     const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
@@ -32,12 +32,6 @@ function* iterateFocusableElements(container, options = {}) {
     return undefined;
 }
 exports.iterateFocusableElements = iterateFocusableElements;
-function focusIfNeeded(elem) {
-    if (document.activeElement !== elem) {
-        elem === null || elem === void 0 ? void 0 : elem.focus();
-    }
-}
-exports.focusIfNeeded = focusIfNeeded;
 function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }

package/dist/esm/anchored-position.d.ts

@@ -11,5 +11,6 @@ export interface AnchorPosition {
     top: number;
     left: number;
     anchorSide: AnchorSide;
+    anchorAlign: AnchorAlignment;
 }
 export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;

package/dist/esm/anchored-position.js

@@ -4,6 +4,11 @@ const alternateOrders = {
     'outside-left': ['outside-right', 'outside-bottom', 'outside-top', 'outside-bottom'],
     'outside-right': ['outside-left', 'outside-bottom', 'outside-top', 'outside-bottom']
 };
+const alternateAlignments = {
+    start: ['end', 'center'],
+    end: ['start', 'center'],
+    center: ['end', 'start']
+};
 export function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
     const parentElement = getPositionedParent(floatingElement);
     const clippingRect = getClippingRect(parentElement);
@@ -82,6 +87,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
     };
     let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset);
     let anchorSide = side;
+    let anchorAlign = align;
     pos.top -= relativePosition.top;
     pos.left -= relativePosition.left;
     if (!allowOutOfBounds) {
@@ -99,6 +105,20 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
                 anchorSide = nextSide;
             }
         }
+        const alternateAlignment = alternateAlignments[align];
+        let alignmentAttempt = 0;
+        if (alternateAlignment) {
+            let prevAlign = align;
+            while (alignmentAttempt < alternateAlignment.length &&
+                shouldRecalculateAlignment(prevAlign, pos, relativeViewportRect, floatingRect)) {
+                const nextAlign = alternateAlignment[alignmentAttempt++];
+                prevAlign = nextAlign;
+                pos = calculatePosition(floatingRect, anchorRect, anchorSide, nextAlign, anchorOffset, alignmentOffset);
+                pos.top -= relativePosition.top;
+                pos.left -= relativePosition.left;
+                anchorAlign = nextAlign;
+            }
+        }
         if (pos.top < relativeViewportRect.top) {
             pos.top = relativeViewportRect.top;
         }
@@ -114,7 +134,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
             }
         }
     }
-    return Object.assign(Object.assign({}, pos), { anchorSide });
+    return Object.assign(Object.assign({}, pos), { anchorSide, anchorAlign });
 }
 function calculatePosition(elementDimensions, anchorPosition, side, align, anchorOffset, alignmentOffset) {
     const anchorRight = anchorPosition.left + anchorPosition.width;
@@ -204,3 +224,12 @@ function shouldRecalculatePosition(side, currentPos, containerDimensions, elemen
             currentPos.left + elementDimensions.width > containerDimensions.width + containerDimensions.left);
     }
 }
+function shouldRecalculateAlignment(align, currentPos, containerDimensions, elementDimensions) {
+    if (align === 'end') {
+        return currentPos.left < containerDimensions.left;
+    }
+    else if (align === 'start' || align === 'center') {
+        return (currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width ||
+            currentPos.left < containerDimensions.left);
+    }
+}

package/dist/esm/dimensions.d.ts

@@ -0,0 +1,19 @@
+declare type Dimensions = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    height?: number;
+    width?: number;
+};
+declare type Offset = {
+    top: number;
+    left: number;
+};
+export declare function offset(element: HTMLElement): Offset;
+export declare function overflowParent(targetElement: HTMLElement): HTMLElement | null | undefined;
+export declare function overflowOffset(element: HTMLElement, targetContainer: Document | HTMLElement | null): Dimensions | undefined;
+export declare function positionedOffset(targetElement: HTMLElement, container: HTMLElement | Document | Window | null): (Dimensions & {
+    _container: HTMLElement;
+}) | undefined;
+export {};

package/dist/esm/dimensions.js

@@ -0,0 +1,128 @@
+export function offset(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        top: rect.top + window.pageYOffset,
+        left: rect.left + window.pageXOffset
+    };
+}
+export function overflowParent(targetElement) {
+    let element = targetElement;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    if (!element.offsetParent) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    if (element === document.body) {
+        return;
+    }
+    while (element !== document.body) {
+        if (element.parentElement instanceof HTMLElement) {
+            element = element.parentElement;
+        }
+        else {
+            return;
+        }
+        const { position, overflowY, overflowX } = getComputedStyle(element);
+        if (position === 'fixed' ||
+            overflowY === 'auto' ||
+            overflowX === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowX === 'scroll') {
+            break;
+        }
+    }
+    return element instanceof Document ? null : element;
+}
+export function overflowOffset(element, targetContainer) {
+    let container = targetContainer;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    if (element === documentElement) {
+        return;
+    }
+    const elementOffset = positionedOffset(element, container);
+    if (!elementOffset) {
+        return;
+    }
+    container = elementOffset._container;
+    const scroll = container === document.documentElement && document.defaultView
+        ? {
+            top: document.defaultView.pageYOffset,
+            left: document.defaultView.pageXOffset
+        }
+        : {
+            top: container.scrollTop,
+            left: container.scrollLeft
+        };
+    const top = elementOffset.top - scroll.top;
+    const left = elementOffset.left - scroll.left;
+    const height = container.clientHeight;
+    const width = container.clientWidth;
+    const bottom = height - (top + element.offsetHeight);
+    const right = width - (left + element.offsetWidth);
+    return { top, left, bottom, right, height, width };
+}
+export function positionedOffset(targetElement, container) {
+    let element = targetElement;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    let top = 0;
+    let left = 0;
+    const height = element.offsetHeight;
+    const width = element.offsetWidth;
+    while (!(element === document.body || element === container)) {
+        top += element.offsetTop || 0;
+        left += element.offsetLeft || 0;
+        if (element.offsetParent instanceof HTMLElement) {
+            element = element.offsetParent;
+        }
+        else {
+            return;
+        }
+    }
+    let scrollHeight;
+    let scrollWidth;
+    let measuredContainer;
+    if (!container ||
+        container === document ||
+        container === document.defaultView ||
+        container === document.documentElement ||
+        container === document.body) {
+        measuredContainer = documentElement;
+        scrollHeight = getDocumentHeight(document.body, documentElement);
+        scrollWidth = getDocumentWidth(document.body, documentElement);
+    }
+    else if (container instanceof HTMLElement) {
+        measuredContainer = container;
+        scrollHeight = container.scrollHeight;
+        scrollWidth = container.scrollWidth;
+    }
+    else {
+        return;
+    }
+    const bottom = scrollHeight - (top + height);
+    const right = scrollWidth - (left + width);
+    return { top, left, bottom, right, _container: measuredContainer };
+}
+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);
+}

package/dist/esm/focus-trap.d.ts

@@ -1 +1 @@
-export declare function focusTrap(container: HTMLElement, abortSignal: AbortSignal, initialFocus?: HTMLElement): void;
+export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;

package/dist/esm/focus-trap.js

@@ -1,4 +1,4 @@
-import { focusIfNeeded, getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
+import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
 import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
 eventListenerSignalPolyfill();
 const suspendedTrapStack = [];
@@ -6,7 +6,7 @@ let activeTrap = undefined;
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
-        focusTrap(trapToReactivate.container, trapToReactivate.originalSignal, trapToReactivate.initialFocus);
+        focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
     }
 }
 function followSignal(signal) {
@@ -16,7 +16,9 @@ function followSignal(signal) {
     });
     return controller;
 }
-export function focusTrap(container, abortSignal, initialFocus) {
+export 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');
@@ -45,22 +47,22 @@ export function focusTrap(container, abortSignal, initialFocus) {
             }
             else {
                 if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
-                    focusIfNeeded(lastFocusedChild);
+                    lastFocusedChild.focus();
                     return;
                 }
                 else if (initialFocus && container.contains(initialFocus)) {
-                    focusIfNeeded(initialFocus);
+                    initialFocus.focus();
                     return;
                 }
                 else {
                     const firstFocusableChild = getFocusableChild(container);
-                    focusIfNeeded(firstFocusableChild);
+                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
                     return;
                 }
             }
         }
     }
-    const wrappingController = followSignal(abortSignal);
+    const wrappingController = followSignal(signal);
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -70,7 +72,7 @@ export function focusTrap(container, abortSignal, initialFocus) {
     wrappingController.signal.addEventListener('abort', () => {
         activeTrap = undefined;
     });
-    abortSignal.addEventListener('abort', () => {
+    signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
         const sentinels = container.getElementsByClassName('sentinel');
         while (sentinels.length > 0)
@@ -89,10 +91,13 @@ export function focusTrap(container, abortSignal, initialFocus) {
         container,
         controller: wrappingController,
         initialFocus,
-        originalSignal: abortSignal
+        originalSignal: signal
     };
     const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
     if (suspendedTrapIndex >= 0) {
         suspendedTrapStack.splice(suspendedTrapIndex, 1);
     }
+    if (!abortSignal) {
+        return controller;
+    }
 }

package/dist/esm/index.d.ts

@@ -2,3 +2,4 @@ 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/index.js

@@ -2,3 +2,4 @@ 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/iterate-focusable-elements.d.ts

@@ -4,7 +4,6 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
-export declare function focusIfNeeded(elem?: HTMLElement): void;
 export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
 export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
 export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

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

@@ -28,11 +28,6 @@ export function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
-export function focusIfNeeded(elem) {
-    if (document.activeElement !== elem) {
-        elem === null || elem === void 0 ? void 0 : elem.focus();
-    }
-}
 export function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }

package/package.json

@@ -1,39 +1,33 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-2022349143",
+  "version": "0.0.0-2022726202949",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "module": "./dist/esm/index.js",
+      "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
-      "module": "./dist/esm/index.js"
+      "types": "./dist/esm/index.d.ts"
     },
     "./utils": {
-      "types": "./dist/utils/index.d.ts",
+      "module": "./dist/esm/utils/index.js",
+      "import": "./dist/esm/utils/index.js",
       "require": "./dist/cjs/utils/index.js",
-      "module": "./dist/esm/utils/index.js"
-    },
-    "./components/modal-dialog": {
-      "types": "./dist/components/modal-dialog.d.ts",
-      "require": "./dist/cjs/components/modal-dialog.js",
-      "module": "./dist/esm/components/modal-dialog.js"
+      "types": "./dist/esm/utils/index.d.ts"
     }
   },
-  "types": "dist/cjs/index.d.ts",
+  "types": "dist/esm/index.d.ts",
   "files": [
     "dist",
-    "utils",
-    "modal-dialog"
+    "utils"
   ],
   "sideEffects": [
     "dist/esm/focus-zone.js",
     "dist/esm/focus-trap.js",
     "dist/cjs/focus-zone.js",
-    "dist/cjs/focus-trap.js",
-    "dist/esm/components/modal-dialog.js",
-    "dist/cjs/components/modal-dialog.js"
+    "dist/cjs/focus-trap.js"
   ],
   "scripts": {
     "lint": "eslint src/",

package/utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/behaviors/utils",
   "types": "../dist/esm/utils/index.d.ts",
-  "main": "../dist/esm/utils/index.js",
-  "type": "module",
+  "main": "../dist/cjs/utils/index.js",
+  "module": "../dist/esm/utils/index.js",
   "sideEffects": false
 }

package/dist/cjs/components/modal-dialog.d.ts

@@ -1,18 +0,0 @@
-declare class ModalDialogElement extends HTMLElement {
-    #private;
-    get open(): boolean;
-    set open(value: boolean);
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    show(): void;
-    close(): void;
-}
-declare global {
-    interface Window {
-        ModalDialogElement: typeof ModalDialogElement;
-    }
-    interface HTMLElementTagNameMap {
-        'modal-dialog': ModalDialogElement;
-    }
-}
-export default ModalDialogElement;

package/dist/cjs/components/modal-dialog.js

@@ -1,115 +0,0 @@
-"use strict";
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_openButton, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
-Object.defineProperty(exports, "__esModule", { value: true });
-const iterate_focusable_elements_js_1 = require("../utils/iterate-focusable-elements.js");
-const focus_trap_js_1 = require("../focus-trap.js");
-class ModalDialogElement extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        _ModalDialogElement_instances.add(this);
-        _ModalDialogElement_focusAbortController.set(this, new AbortController());
-        _ModalDialogElement_abortController.set(this, null);
-        _ModalDialogElement_openButton.set(this, void 0);
-    }
-    get open() {
-        return this.hasAttribute('open');
-    }
-    set open(value) {
-        var _a, _b;
-        if (value) {
-            if (this.open)
-                return;
-            this.setAttribute('open', '');
-            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay-hidden');
-            document.body.style.overflow = 'hidden';
-            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
-                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
-            }
-            (0, focus_trap_js_1.focusTrap)(this, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
-        }
-        else {
-            if (!this.open)
-                return;
-            this.removeAttribute('open');
-            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay-hidden');
-            document.body.style.overflow = 'initial';
-            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
-            (0, iterate_focusable_elements_js_1.focusIfNeeded)(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
-            __classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
-        }
-    }
-    connectedCallback() {
-        if (!this.hasAttribute('role'))
-            this.setAttribute('role', 'dialog');
-        const { signal } = (__classPrivateFieldSet(this, _ModalDialogElement_abortController, new AbortController(), "f"));
-        this.ownerDocument.addEventListener('click', event => {
-            const target = event.target;
-            const clickOutsideDialog = target.closest(this.tagName) !== this;
-            const button = target === null || target === void 0 ? void 0 : target.closest('button');
-            if (!button) {
-                if (clickOutsideDialog) {
-                    this.close();
-                }
-                return;
-            }
-            let dialogId = button.getAttribute('data-close-dialog-id');
-            if (dialogId === this.id) {
-                this.close();
-            }
-            dialogId = button.getAttribute('data-show-dialog-id');
-            if (dialogId === this.id) {
-                event.stopPropagation();
-                __classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
-                this.show();
-            }
-        }, { signal });
-        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
-    }
-    show() {
-        this.open = true;
-    }
-    close() {
-        this.open = false;
-    }
-}
-_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
-    var _a;
-    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('Overlay-backdrop')) {
-        return this.parentElement;
-    }
-    return null;
-}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
-    if (!(event instanceof KeyboardEvent))
-        return;
-    if (event.isComposing)
-        return;
-    switch (event.key) {
-        case 'Escape':
-            if (this.open) {
-                this.close();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            break;
-    }
-};
-exports.default = ModalDialogElement;
-if (!window.customElements.get('modal-dialog')) {
-    window.ModalDialogElement = ModalDialogElement;
-    window.customElements.define('modal-dialog', ModalDialogElement);
-}

package/dist/esm/components/modal-dialog.d.ts

@@ -1,18 +0,0 @@
-declare class ModalDialogElement extends HTMLElement {
-    #private;
-    get open(): boolean;
-    set open(value: boolean);
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    show(): void;
-    close(): void;
-}
-declare global {
-    interface Window {
-        ModalDialogElement: typeof ModalDialogElement;
-    }
-    interface HTMLElementTagNameMap {
-        'modal-dialog': ModalDialogElement;
-    }
-}
-export default ModalDialogElement;

package/dist/esm/components/modal-dialog.js

@@ -1,113 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_openButton, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
-import { focusIfNeeded } from '../utils/iterate-focusable-elements.js';
-import { focusTrap } from '../focus-trap.js';
-class ModalDialogElement extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        _ModalDialogElement_instances.add(this);
-        _ModalDialogElement_focusAbortController.set(this, new AbortController());
-        _ModalDialogElement_abortController.set(this, null);
-        _ModalDialogElement_openButton.set(this, void 0);
-    }
-    get open() {
-        return this.hasAttribute('open');
-    }
-    set open(value) {
-        var _a, _b;
-        if (value) {
-            if (this.open)
-                return;
-            this.setAttribute('open', '');
-            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay-hidden');
-            document.body.style.overflow = 'hidden';
-            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
-                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
-            }
-            focusTrap(this, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
-        }
-        else {
-            if (!this.open)
-                return;
-            this.removeAttribute('open');
-            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay-hidden');
-            document.body.style.overflow = 'initial';
-            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
-            focusIfNeeded(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
-            __classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
-        }
-    }
-    connectedCallback() {
-        if (!this.hasAttribute('role'))
-            this.setAttribute('role', 'dialog');
-        const { signal } = (__classPrivateFieldSet(this, _ModalDialogElement_abortController, new AbortController(), "f"));
-        this.ownerDocument.addEventListener('click', event => {
-            const target = event.target;
-            const clickOutsideDialog = target.closest(this.tagName) !== this;
-            const button = target === null || target === void 0 ? void 0 : target.closest('button');
-            if (!button) {
-                if (clickOutsideDialog) {
-                    this.close();
-                }
-                return;
-            }
-            let dialogId = button.getAttribute('data-close-dialog-id');
-            if (dialogId === this.id) {
-                this.close();
-            }
-            dialogId = button.getAttribute('data-show-dialog-id');
-            if (dialogId === this.id) {
-                event.stopPropagation();
-                __classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
-                this.show();
-            }
-        }, { signal });
-        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
-    }
-    show() {
-        this.open = true;
-    }
-    close() {
-        this.open = false;
-    }
-}
-_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
-    var _a;
-    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('Overlay-backdrop')) {
-        return this.parentElement;
-    }
-    return null;
-}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
-    if (!(event instanceof KeyboardEvent))
-        return;
-    if (event.isComposing)
-        return;
-    switch (event.key) {
-        case 'Escape':
-            if (this.open) {
-                this.close();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            break;
-    }
-};
-export default ModalDialogElement;
-if (!window.customElements.get('modal-dialog')) {
-    window.ModalDialogElement = ModalDialogElement;
-    window.customElements.define('modal-dialog', ModalDialogElement);
-}