@internetarchive/modal-manager 2.0.3 → 2.0.4-alpha-webdev7960.1

package/dist/src/shoelace/modal.js

@@ -1,132 +1,132 @@
-/* istanbul ignore file */
-import { activeElements, getDeepestActiveElement } from './active-elements.js';
-import { getTabbableElements } from './tabbable.js';
-let activeModals = [];
-export default class Modal {
-    constructor(element) {
-        this.isExternalActivated = false;
-        this.tabDirection = 'forward';
-        this.currentFocus = null;
-        this.previousFocus = null;
-        this.handleFocusIn = () => {
-            if (!this.isActive())
-                return;
-            this.checkFocus();
-        };
-        this.handleKeyDown = (event) => {
-            var _a;
-            if (event.key !== 'Tab' || this.isExternalActivated)
-                return;
-            if (!this.isActive())
-                return;
-            // Because sometimes focus can actually be taken over from outside sources,
-            // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and
-            // recurse through shadowRoots.
-            const currentActiveElement = getDeepestActiveElement();
-            this.previousFocus = currentActiveElement;
-            if (this.previousFocus &&
-                this.possiblyHasTabbableChildren(this.previousFocus)) {
-                return;
-            }
-            if (event.shiftKey) {
-                this.tabDirection = 'backward';
-            }
-            else {
-                this.tabDirection = 'forward';
-            }
-            const tabbableElements = getTabbableElements(this.element);
-            let currentFocusIndex = tabbableElements.findIndex(el => el === currentActiveElement);
-            this.previousFocus = this.currentFocus;
-            const addition = this.tabDirection === 'forward' ? 1 : -1;
-            // eslint-disable-next-line
-            while (true) {
-                if (currentFocusIndex + addition >= tabbableElements.length) {
-                    currentFocusIndex = 0;
-                }
-                else if (currentFocusIndex + addition < 0) {
-                    currentFocusIndex = tabbableElements.length - 1;
-                }
-                else {
-                    currentFocusIndex += addition;
-                }
-                this.previousFocus = this.currentFocus;
-                const nextFocus = 
-                /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];
-                // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element
-                // that possibly has "controls"
-                if (this.tabDirection === 'backward') {
-                    if (this.previousFocus &&
-                        this.possiblyHasTabbableChildren(this.previousFocus)) {
-                        return;
-                    }
-                }
-                if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
-                    return;
-                }
-                event.preventDefault();
-                this.currentFocus = nextFocus;
-                (_a = this.currentFocus) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: false });
-                // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.
-                const allActiveElements = [...activeElements()];
-                if (allActiveElements.includes(this.currentFocus) ||
-                    !allActiveElements.includes(this.previousFocus)) {
-                    break;
-                }
-            }
-            setTimeout(() => this.checkFocus());
-        };
-        this.handleKeyUp = () => {
-            this.tabDirection = 'forward';
-        };
-        this.element = element;
-        this.elementsWithTabbableControls = ['iframe'];
-    }
-    /** Activates focus trapping. */
-    activate() {
-        activeModals.push(this.element);
-        document.addEventListener('focusin', this.handleFocusIn);
-        document.addEventListener('keydown', this.handleKeyDown);
-        document.addEventListener('keyup', this.handleKeyUp);
-    }
-    /** Deactivates focus trapping. */
-    deactivate() {
-        activeModals = activeModals.filter(modal => modal !== this.element);
-        this.currentFocus = null;
-        document.removeEventListener('focusin', this.handleFocusIn);
-        document.removeEventListener('keydown', this.handleKeyDown);
-        document.removeEventListener('keyup', this.handleKeyUp);
-    }
-    /** Determines if this modal element is currently active or not. */
-    isActive() {
-        // The "active" modal is always the most recent one shown
-        return activeModals[activeModals.length - 1] === this.element;
-    }
-    /** Activates external modal behavior and temporarily disables focus trapping. */
-    activateExternal() {
-        this.isExternalActivated = true;
-    }
-    /** Deactivates external modal behavior and re-enables focus trapping. */
-    deactivateExternal() {
-        this.isExternalActivated = false;
-    }
-    checkFocus() {
-        if (this.isActive() && !this.isExternalActivated) {
-            const tabbableElements = getTabbableElements(this.element);
-            if (!this.element.matches(':focus-within')) {
-                const start = tabbableElements[0];
-                const end = tabbableElements[tabbableElements.length - 1];
-                const target = this.tabDirection === 'forward' ? start : end;
-                if (typeof (target === null || target === void 0 ? void 0 : target.focus) === 'function') {
-                    this.currentFocus = target;
-                    target.focus({ preventScroll: false });
-                }
-            }
-        }
-    }
-    possiblyHasTabbableChildren(element) {
-        return (this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')
-        // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?
-        );
-    }
-}
+/* istanbul ignore file */
+import { activeElements, getDeepestActiveElement } from './active-elements.js';
+import { getTabbableElements } from './tabbable.js';
+let activeModals = [];
+export default class Modal {
+    constructor(element) {
+        this.isExternalActivated = false;
+        this.tabDirection = 'forward';
+        this.currentFocus = null;
+        this.previousFocus = null;
+        this.handleFocusIn = () => {
+            if (!this.isActive())
+                return;
+            this.checkFocus();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (event.key !== 'Tab' || this.isExternalActivated)
+                return;
+            if (!this.isActive())
+                return;
+            // Because sometimes focus can actually be taken over from outside sources,
+            // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and
+            // recurse through shadowRoots.
+            const currentActiveElement = getDeepestActiveElement();
+            this.previousFocus = currentActiveElement;
+            if (this.previousFocus &&
+                this.possiblyHasTabbableChildren(this.previousFocus)) {
+                return;
+            }
+            if (event.shiftKey) {
+                this.tabDirection = 'backward';
+            }
+            else {
+                this.tabDirection = 'forward';
+            }
+            const tabbableElements = getTabbableElements(this.element);
+            let currentFocusIndex = tabbableElements.findIndex(el => el === currentActiveElement);
+            this.previousFocus = this.currentFocus;
+            const addition = this.tabDirection === 'forward' ? 1 : -1;
+            // eslint-disable-next-line
+            while (true) {
+                if (currentFocusIndex + addition >= tabbableElements.length) {
+                    currentFocusIndex = 0;
+                }
+                else if (currentFocusIndex + addition < 0) {
+                    currentFocusIndex = tabbableElements.length - 1;
+                }
+                else {
+                    currentFocusIndex += addition;
+                }
+                this.previousFocus = this.currentFocus;
+                const nextFocus = 
+                /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];
+                // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element
+                // that possibly has "controls"
+                if (this.tabDirection === 'backward') {
+                    if (this.previousFocus &&
+                        this.possiblyHasTabbableChildren(this.previousFocus)) {
+                        return;
+                    }
+                }
+                if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
+                    return;
+                }
+                event.preventDefault();
+                this.currentFocus = nextFocus;
+                (_a = this.currentFocus) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: false });
+                // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.
+                const allActiveElements = [...activeElements()];
+                if (allActiveElements.includes(this.currentFocus) ||
+                    !allActiveElements.includes(this.previousFocus)) {
+                    break;
+                }
+            }
+            setTimeout(() => this.checkFocus());
+        };
+        this.handleKeyUp = () => {
+            this.tabDirection = 'forward';
+        };
+        this.element = element;
+        this.elementsWithTabbableControls = ['iframe'];
+    }
+    /** Activates focus trapping. */
+    activate() {
+        activeModals.push(this.element);
+        document.addEventListener('focusin', this.handleFocusIn);
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keyup', this.handleKeyUp);
+    }
+    /** Deactivates focus trapping. */
+    deactivate() {
+        activeModals = activeModals.filter(modal => modal !== this.element);
+        this.currentFocus = null;
+        document.removeEventListener('focusin', this.handleFocusIn);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
+    }
+    /** Determines if this modal element is currently active or not. */
+    isActive() {
+        // The "active" modal is always the most recent one shown
+        return activeModals[activeModals.length - 1] === this.element;
+    }
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal() {
+        this.isExternalActivated = true;
+    }
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal() {
+        this.isExternalActivated = false;
+    }
+    checkFocus() {
+        if (this.isActive() && !this.isExternalActivated) {
+            const tabbableElements = getTabbableElements(this.element);
+            if (!this.element.matches(':focus-within')) {
+                const start = tabbableElements[0];
+                const end = tabbableElements[tabbableElements.length - 1];
+                const target = this.tabDirection === 'forward' ? start : end;
+                if (typeof (target === null || target === void 0 ? void 0 : target.focus) === 'function') {
+                    this.currentFocus = target;
+                    target.focus({ preventScroll: false });
+                }
+            }
+        }
+    }
+    possiblyHasTabbableChildren(element) {
+        return (this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')
+        // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?
+        );
+    }
+}
 //# sourceMappingURL=modal.js.map

package/dist/src/shoelace/tabbable.d.ts

@@ -1,9 +1,9 @@
-/**
- * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
- * element because it short-circuits after finding the first and last ones.
- */
-export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
-    start: HTMLElement;
-    end: HTMLElement;
-};
-export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement;
+    end: HTMLElement;
+};
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];

package/dist/src/shoelace/tabbable.js

@@ -1,170 +1,170 @@
-/* istanbul ignore file */
-// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
-// computedStyle calls are "live" so they only need to be retrieved once for an element.
-const computedStyleMap = new WeakMap();
-function getCachedComputedStyle(el) {
-    let computedStyle = computedStyleMap.get(el);
-    if (!computedStyle) {
-        computedStyle = window.getComputedStyle(el, null);
-        computedStyleMap.set(el, computedStyle);
-    }
-    return computedStyle;
-}
-function isVisible(el) {
-    // This is the fastest check, but isn't supported in Safari.
-    if ('checkVisibility' in el && typeof el['checkVisibility'] === 'function') {
-        // Opacity is focusable, visibility is not.
-        /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
-        return el['checkVisibility']({
-            checkOpacity: false,
-            checkVisibilityCSS: true,
-        });
-    }
-    // Fallback "polyfill" for "checkVisibility"
-    const computedStyle = getCachedComputedStyle(el);
-    return (computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none');
-}
-// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable
-// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most
-// accessible way of handling overflow areas. [Konnor]
-function isOverflowingAndTabbable(el) {
-    const computedStyle = getCachedComputedStyle(el);
-    const { overflowY, overflowX } = computedStyle;
-    if (overflowY === 'scroll' || overflowX === 'scroll') {
-        return true;
-    }
-    if (overflowY !== 'auto' || overflowX !== 'auto') {
-        return false;
-    }
-    // Always overflow === "auto" by this point
-    const isOverflowingY = el.scrollHeight > el.clientHeight;
-    if (isOverflowingY && overflowY === 'auto') {
-        return true;
-    }
-    const isOverflowingX = el.scrollWidth > el.clientWidth;
-    if (isOverflowingX && overflowX === 'auto') {
-        return true;
-    }
-    return false;
-}
-/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
-function isTabbable(el) {
-    const tag = el.tagName.toLowerCase();
-    const tabindex = Number(el.getAttribute('tabindex'));
-    const hasTabindex = el.hasAttribute('tabindex');
-    // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
-    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
-        return false;
-    }
-    // Elements with a disabled attribute are not tabbable
-    if (el.hasAttribute('disabled')) {
-        return false;
-    }
-    // If any parents have "inert", we aren't "tabbable"
-    if (el.closest('[inert]')) {
-        return false;
-    }
-    // Radios without a checked attribute are not tabbable
-    if (tag === 'input' &&
-        el.getAttribute('type') === 'radio' &&
-        !el.hasAttribute('checked')) {
-        return false;
-    }
-    if (!isVisible(el)) {
-        return false;
-    }
-    // Audio and video elements with the controls attribute are tabbable
-    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
-        return true;
-    }
-    // Elements with a tabindex other than -1 are tabbable
-    if (el.hasAttribute('tabindex')) {
-        return true;
-    }
-    // Elements with a contenteditable attribute are tabbable
-    if (el.hasAttribute('contenteditable') &&
-        el.getAttribute('contenteditable') !== 'false') {
-        return true;
-    }
-    // At this point, the following elements are considered tabbable
-    const isNativelyTabbable = [
-        'button',
-        'input',
-        'select',
-        'textarea',
-        'a',
-        'audio',
-        'video',
-        'summary',
-        'iframe',
-    ].includes(tag);
-    if (isNativelyTabbable) {
-        return true;
-    }
-    // We save the overflow checks for last, because they're the most expensive
-    return isOverflowingAndTabbable(el);
-}
-/**
- * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
- * element because it short-circuits after finding the first and last ones.
- */
-export function getTabbableBoundary(root) {
-    var _a, _b;
-    const tabbableElements = getTabbableElements(root);
-    // Find the first and last tabbable elements
-    const start = (_a = tabbableElements[0]) !== null && _a !== void 0 ? _a : null;
-    const end = (_b = tabbableElements[tabbableElements.length - 1]) !== null && _b !== void 0 ? _b : null;
-    return { start, end };
-}
-/**
- * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
- * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
- * This fixes that fun edge case.
- */
-function getSlottedChildrenOutsideRootElement(slotElement, root) {
-    var _a;
-    return (((_a = slotElement.getRootNode({ composed: true })) === null || _a === void 0 ? void 0 : _a.host) !==
-        root);
-}
-export function getTabbableElements(root) {
-    const walkedEls = new WeakMap();
-    const tabbableElements = [];
-    function walk(el) {
-        if (el instanceof Element) {
-            // if the element has "inert" we can just no-op it.
-            if (el.hasAttribute('inert') || el.closest('[inert]')) {
-                return;
-            }
-            if (walkedEls.has(el)) {
-                return;
-            }
-            walkedEls.set(el, true);
-            if (!tabbableElements.includes(el) && isTabbable(el)) {
-                tabbableElements.push(el);
-            }
-            if (el instanceof HTMLSlotElement &&
-                getSlottedChildrenOutsideRootElement(el, root)) {
-                el.assignedElements({ flatten: true }).forEach((assignedEl) => {
-                    walk(assignedEl);
-                });
-            }
-            if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
-                walk(el.shadowRoot);
-            }
-        }
-        for (const e of Array.from(el.children)) {
-            walk(e);
-        }
-    }
-    // Collect all elements including the root
-    walk(root);
-    // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
-    // So is it worth being right? Or fast?
-    return tabbableElements.sort((a, b) => {
-        // Make sure we sort by tabindex.
-        const aTabindex = Number(a.getAttribute('tabindex')) || 0;
-        const bTabindex = Number(b.getAttribute('tabindex')) || 0;
-        return bTabindex - aTabindex;
-    });
-}
+/* istanbul ignore file */
+// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
+// computedStyle calls are "live" so they only need to be retrieved once for an element.
+const computedStyleMap = new WeakMap();
+function getCachedComputedStyle(el) {
+    let computedStyle = computedStyleMap.get(el);
+    if (!computedStyle) {
+        computedStyle = window.getComputedStyle(el, null);
+        computedStyleMap.set(el, computedStyle);
+    }
+    return computedStyle;
+}
+function isVisible(el) {
+    // This is the fastest check, but isn't supported in Safari.
+    if ('checkVisibility' in el && typeof el['checkVisibility'] === 'function') {
+        // Opacity is focusable, visibility is not.
+        /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+        return el['checkVisibility']({
+            checkOpacity: false,
+            checkVisibilityCSS: true,
+        });
+    }
+    // Fallback "polyfill" for "checkVisibility"
+    const computedStyle = getCachedComputedStyle(el);
+    return (computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none');
+}
+// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable
+// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most
+// accessible way of handling overflow areas. [Konnor]
+function isOverflowingAndTabbable(el) {
+    const computedStyle = getCachedComputedStyle(el);
+    const { overflowY, overflowX } = computedStyle;
+    if (overflowY === 'scroll' || overflowX === 'scroll') {
+        return true;
+    }
+    if (overflowY !== 'auto' || overflowX !== 'auto') {
+        return false;
+    }
+    // Always overflow === "auto" by this point
+    const isOverflowingY = el.scrollHeight > el.clientHeight;
+    if (isOverflowingY && overflowY === 'auto') {
+        return true;
+    }
+    const isOverflowingX = el.scrollWidth > el.clientWidth;
+    if (isOverflowingX && overflowX === 'auto') {
+        return true;
+    }
+    return false;
+}
+/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
+function isTabbable(el) {
+    const tag = el.tagName.toLowerCase();
+    const tabindex = Number(el.getAttribute('tabindex'));
+    const hasTabindex = el.hasAttribute('tabindex');
+    // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
+    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+        return false;
+    }
+    // Elements with a disabled attribute are not tabbable
+    if (el.hasAttribute('disabled')) {
+        return false;
+    }
+    // If any parents have "inert", we aren't "tabbable"
+    if (el.closest('[inert]')) {
+        return false;
+    }
+    // Radios without a checked attribute are not tabbable
+    if (tag === 'input' &&
+        el.getAttribute('type') === 'radio' &&
+        !el.hasAttribute('checked')) {
+        return false;
+    }
+    if (!isVisible(el)) {
+        return false;
+    }
+    // Audio and video elements with the controls attribute are tabbable
+    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+        return true;
+    }
+    // Elements with a tabindex other than -1 are tabbable
+    if (el.hasAttribute('tabindex')) {
+        return true;
+    }
+    // Elements with a contenteditable attribute are tabbable
+    if (el.hasAttribute('contenteditable') &&
+        el.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    // At this point, the following elements are considered tabbable
+    const isNativelyTabbable = [
+        'button',
+        'input',
+        'select',
+        'textarea',
+        'a',
+        'audio',
+        'video',
+        'summary',
+        'iframe',
+    ].includes(tag);
+    if (isNativelyTabbable) {
+        return true;
+    }
+    // We save the overflow checks for last, because they're the most expensive
+    return isOverflowingAndTabbable(el);
+}
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export function getTabbableBoundary(root) {
+    var _a, _b;
+    const tabbableElements = getTabbableElements(root);
+    // Find the first and last tabbable elements
+    const start = (_a = tabbableElements[0]) !== null && _a !== void 0 ? _a : null;
+    const end = (_b = tabbableElements[tabbableElements.length - 1]) !== null && _b !== void 0 ? _b : null;
+    return { start, end };
+}
+/**
+ * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
+ * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
+ * This fixes that fun edge case.
+ */
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+    var _a;
+    return (((_a = slotElement.getRootNode({ composed: true })) === null || _a === void 0 ? void 0 : _a.host) !==
+        root);
+}
+export function getTabbableElements(root) {
+    const walkedEls = new WeakMap();
+    const tabbableElements = [];
+    function walk(el) {
+        if (el instanceof Element) {
+            // if the element has "inert" we can just no-op it.
+            if (el.hasAttribute('inert') || el.closest('[inert]')) {
+                return;
+            }
+            if (walkedEls.has(el)) {
+                return;
+            }
+            walkedEls.set(el, true);
+            if (!tabbableElements.includes(el) && isTabbable(el)) {
+                tabbableElements.push(el);
+            }
+            if (el instanceof HTMLSlotElement &&
+                getSlottedChildrenOutsideRootElement(el, root)) {
+                el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+                    walk(assignedEl);
+                });
+            }
+            if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+                walk(el.shadowRoot);
+            }
+        }
+        for (const e of Array.from(el.children)) {
+            walk(e);
+        }
+    }
+    // Collect all elements including the root
+    walk(root);
+    // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
+    // So is it worth being right? Or fast?
+    return tabbableElements.sort((a, b) => {
+        // Make sure we sort by tabindex.
+        const aTabindex = Number(a.getAttribute('tabindex')) || 0;
+        const bTabindex = Number(b.getAttribute('tabindex')) || 0;
+        return bTabindex - aTabindex;
+    });
+}
 //# sourceMappingURL=tabbable.js.map

package/dist/test/modal-config.test.d.ts

@@ -1 +1 @@
-export {};
+export {};