@primer/behaviors 0.0.0-2022020145740 → 0.0.0-202202813730

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

@@ -0,0 +1,8 @@
+export declare class ModalDialogElement extends HTMLElement {
+    private abortController;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    close(): void;
+}

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalDialogElement = void 0;
+const focus_trap_js_1 = require("../focus-trap.js");
+class ModalDialogElement extends HTMLElement {
+    constructor() {
+        var _a, _b;
+        super();
+        (_a = this.querySelector('.close-button')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.close());
+        (_b = document.body.querySelector(`.js-dialog-show-${this.id}`)) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => this.show());
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        const subscriptions = [
+            fromEvent(this, 'compositionstart', e => trackComposition(this, e)),
+            fromEvent(this, 'compositionend', e => trackComposition(this, e)),
+            fromEvent(this, 'keydown', e => keydown(this, e))
+        ];
+        states.set(this, { subscriptions, loaded: false, isComposing: false });
+    }
+    disconnectedCallback() {
+        const state = states.get(this);
+        if (!state)
+            return;
+        states.delete(this);
+        for (const sub of state.subscriptions) {
+            sub.unsubscribe();
+        }
+    }
+    show() {
+        var _a;
+        const isClosed = this.classList.contains('hidden');
+        if (!isClosed)
+            return;
+        this.classList.remove('hidden');
+        this.setAttribute('open', '');
+        if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('modal-dialog-backdrop')) {
+            this.parentElement.classList.add('active');
+        }
+        document.body.style.overflow = 'hidden';
+        this.abortController = (0, focus_trap_js_1.focusTrap)(this);
+    }
+    close() {
+        var _a, _b;
+        const isClosed = this.classList.contains('hidden');
+        if (isClosed)
+            return;
+        this.classList.add('hidden');
+        this.removeAttribute('open');
+        if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('modal-dialog-backdrop')) {
+            this.parentElement.classList.remove('active');
+        }
+        document.body.style.overflow = 'initial';
+        (_b = this.abortController) === null || _b === void 0 ? void 0 : _b.abort();
+    }
+}
+exports.ModalDialogElement = ModalDialogElement;
+const states = new WeakMap();
+function fromEvent(target, eventName, onNext, options = false) {
+    target.addEventListener(eventName, onNext, options);
+    return {
+        unsubscribe: () => {
+            target.removeEventListener(eventName, onNext, options);
+        }
+    };
+}
+function keydown(dialog, event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    const state = states.get(dialog);
+    if (!state || state.isComposing)
+        return;
+    switch (event.key) {
+        case 'Escape':
+            if (dialog.hasAttribute('open')) {
+                dialog.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+}
+function trackComposition(dialog, event) {
+    const state = states.get(dialog);
+    if (!state)
+        return;
+    state.isComposing = event.type === 'compositionstart';
+}

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

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

package/dist/cjs/focus-trap.js

@@ -1,8 +1,8 @@
 "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");
+const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
 (0, event_listener_signal_js_1.polyfill)();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
@@ -19,60 +19,36 @@ function followSignal(signal) {
     });
     return controller;
 }
-function getFocusableChild(container, lastChild = false) {
-    return (0, iterate_focusable_elements_js_1.iterateFocusableElements)(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
-}
 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');
-    let lastFocusedChild = undefined;
-    function ensureTrapZoneHasFocus(focusedElement) {
-        if (focusedElement instanceof HTMLElement && document.contains(container)) {
-            if (container.contains(focusedElement)) {
-                lastFocusedChild = focusedElement;
-                return;
-            }
-            else {
-                if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
-                    lastFocusedChild.focus();
-                    return;
-                }
-                else if (initialFocus && container.contains(initialFocus)) {
-                    initialFocus.focus();
-                    return;
-                }
-                else {
-                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.setAttribute('tabindex', '-1');
-                    }
-                    container.focus();
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
-                    }
-                    return;
-                }
-            }
-        }
+    const sentinelStart = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container, true);
+        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    };
+    const sentinelEnd = document.createElement('span');
+    sentinelEnd.setAttribute('class', 'sentinel');
+    sentinelEnd.setAttribute('tabindex', '0');
+    sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.onfocus = () => {
+        const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    container.prepend(sentinelStart);
+    container.append(sentinelEnd);
+    if (initialFocus) {
+        initialFocus.focus();
+    }
+    else {
+        const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
     }
     const wrappingController = followSignal(signal);
-    container.addEventListener('keydown', event => {
-        if (event.key !== 'Tab' || event.defaultPrevented) {
-            return;
-        }
-        const { target } = event;
-        const firstFocusableChild = getFocusableChild(container);
-        const lastFocusableChild = getFocusableChild(container, true);
-        if (target === firstFocusableChild && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        }
-        else if (target === lastFocusableChild && !event.shiftKey) {
-            event.preventDefault();
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        }
-    }, { signal: wrappingController.signal });
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -84,16 +60,15 @@ function focusTrap(container, initialFocus, abortSignal) {
     });
     signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
+        const sentinels = container.getElementsByClassName('sentinel');
+        while (sentinels.length > 0)
+            sentinels[0].remove();
         const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);
         }
         tryReactivate();
     });
-    document.addEventListener('focus', event => {
-        ensureTrapZoneHasFocus(event.target);
-    }, { signal: wrappingController.signal, capture: true });
-    ensureTrapZoneHasFocus(document.activeElement);
     activeTrap = {
         container,
         controller: wrappingController,

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

@@ -4,5 +4,6 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+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.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,17 @@ 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;
     const hiddenInert = elem.hidden;
     const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
     }
     if (strict) {

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

@@ -0,0 +1,8 @@
+export declare class ModalDialogElement extends HTMLElement {
+    private abortController;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    close(): void;
+}

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

@@ -0,0 +1,85 @@
+import { focusTrap } from '../focus-trap.js';
+export class ModalDialogElement extends HTMLElement {
+    constructor() {
+        var _a, _b;
+        super();
+        (_a = this.querySelector('.close-button')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.close());
+        (_b = document.body.querySelector(`.js-dialog-show-${this.id}`)) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => this.show());
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        const subscriptions = [
+            fromEvent(this, 'compositionstart', e => trackComposition(this, e)),
+            fromEvent(this, 'compositionend', e => trackComposition(this, e)),
+            fromEvent(this, 'keydown', e => keydown(this, e))
+        ];
+        states.set(this, { subscriptions, loaded: false, isComposing: false });
+    }
+    disconnectedCallback() {
+        const state = states.get(this);
+        if (!state)
+            return;
+        states.delete(this);
+        for (const sub of state.subscriptions) {
+            sub.unsubscribe();
+        }
+    }
+    show() {
+        var _a;
+        const isClosed = this.classList.contains('hidden');
+        if (!isClosed)
+            return;
+        this.classList.remove('hidden');
+        this.setAttribute('open', '');
+        if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('modal-dialog-backdrop')) {
+            this.parentElement.classList.add('active');
+        }
+        document.body.style.overflow = 'hidden';
+        this.abortController = focusTrap(this);
+    }
+    close() {
+        var _a, _b;
+        const isClosed = this.classList.contains('hidden');
+        if (isClosed)
+            return;
+        this.classList.add('hidden');
+        this.removeAttribute('open');
+        if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('modal-dialog-backdrop')) {
+            this.parentElement.classList.remove('active');
+        }
+        document.body.style.overflow = 'initial';
+        (_b = this.abortController) === null || _b === void 0 ? void 0 : _b.abort();
+    }
+}
+const states = new WeakMap();
+function fromEvent(target, eventName, onNext, options = false) {
+    target.addEventListener(eventName, onNext, options);
+    return {
+        unsubscribe: () => {
+            target.removeEventListener(eventName, onNext, options);
+        }
+    };
+}
+function keydown(dialog, event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    const state = states.get(dialog);
+    if (!state || state.isComposing)
+        return;
+    switch (event.key) {
+        case 'Escape':
+            if (dialog.hasAttribute('open')) {
+                dialog.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+}
+function trackComposition(dialog, event) {
+    const state = states.get(dialog);
+    if (!state)
+        return;
+    state.isComposing = event.type === 'compositionstart';
+}

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

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

package/dist/esm/focus-trap.js

@@ -1,5 +1,5 @@
-import { isTabbable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
 import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
+import { getFocusableChild } from './utils/iterate-focusable-elements.js';
 eventListenerSignalPolyfill();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
@@ -16,60 +16,36 @@ function followSignal(signal) {
     });
     return controller;
 }
-function getFocusableChild(container, lastChild = false) {
-    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
-}
 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');
-    let lastFocusedChild = undefined;
-    function ensureTrapZoneHasFocus(focusedElement) {
-        if (focusedElement instanceof HTMLElement && document.contains(container)) {
-            if (container.contains(focusedElement)) {
-                lastFocusedChild = focusedElement;
-                return;
-            }
-            else {
-                if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
-                    lastFocusedChild.focus();
-                    return;
-                }
-                else if (initialFocus && container.contains(initialFocus)) {
-                    initialFocus.focus();
-                    return;
-                }
-                else {
-                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.setAttribute('tabindex', '-1');
-                    }
-                    container.focus();
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
-                    }
-                    return;
-                }
-            }
-        }
+    const sentinelStart = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = getFocusableChild(container, true);
+        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    };
+    const sentinelEnd = document.createElement('span');
+    sentinelEnd.setAttribute('class', 'sentinel');
+    sentinelEnd.setAttribute('tabindex', '0');
+    sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.onfocus = () => {
+        const firstFocusableChild = getFocusableChild(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    container.prepend(sentinelStart);
+    container.append(sentinelEnd);
+    if (initialFocus) {
+        initialFocus.focus();
     }
-    const wrappingController = followSignal(signal);
-    container.addEventListener('keydown', event => {
-        if (event.key !== 'Tab' || event.defaultPrevented) {
-            return;
-        }
-        const { target } = event;
+    else {
         const firstFocusableChild = getFocusableChild(container);
-        const lastFocusableChild = getFocusableChild(container, true);
-        if (target === firstFocusableChild && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        }
-        else if (target === lastFocusableChild && !event.shiftKey) {
-            event.preventDefault();
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        }
-    }, { signal: wrappingController.signal });
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    }
+    const wrappingController = followSignal(signal);
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -81,16 +57,15 @@ export function focusTrap(container, initialFocus, abortSignal) {
     });
     signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
+        const sentinels = container.getElementsByClassName('sentinel');
+        while (sentinels.length > 0)
+            sentinels[0].remove();
         const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);
         }
         tryReactivate();
     });
-    document.addEventListener('focus', event => {
-        ensureTrapZoneHasFocus(event.target);
-    }, { signal: wrappingController.signal, capture: true });
-    ensureTrapZoneHasFocus(document.activeElement);
     activeTrap = {
         container,
         controller: wrappingController,

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

@@ -4,5 +4,6 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+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,12 +28,16 @@ export function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
+export function getFocusableChild(container, lastChild = false) {
+    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+}
 export 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';
-    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
     }
     if (strict) {

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-2022020145740",
+  "version": "0.0.0-202202813730",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/cjs/index.d.ts",
       "require": "./dist/cjs/index.js",
       "module": "./dist/esm/index.js"
     },
     "./utils": {
-      "types": "./dist/utils/index.d.ts",
+      "types": "./dist/cjs/utils/index.d.ts",
       "require": "./dist/cjs/utils/index.js",
       "module": "./dist/esm/utils/index.js"
+    },
+    "./modal-dialog": {
+      "types": "./dist/cjs/components/modal-dialog.d.ts",
+      "require": "./dist/cjs/components/modal-dialog.js",
+      "module": "./dist/esm/components/modal-dialog.js"
     }
   },
   "types": "dist/cjs/index.d.ts",