@spectrum-web-components/overlay 0.16.3 → 0.16.6-devmode.0

package/src/overlay-stack.js

@@ -1,135 +1,114 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { ActiveOverlay } from './ActiveOverlay.js';
-import { OverlayTimer } from './overlay-timer.js';
-import '../active-overlay.js';
-import { findOverlaysRootedInOverlay, parentOverlayOf, } from './overlay-utils.js';
+import { ActiveOverlay } from "./ActiveOverlay.js";
+import { OverlayTimer } from "./overlay-timer.js";
+import "../active-overlay.js";
+import {
+  findOverlaysRootedInOverlay,
+  parentOverlayOf
+} from "./overlay-utils.js";
+import { getDeepElementFromPoint } from "@spectrum-web-components/shared/src/get-deep-element-from-point.js";
 function isLeftClick(event) {
-    return event.button === 0;
+  return event.button === 0;
 }
 function hasModifier(event) {
-    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }
 export class OverlayStack {
-    constructor() {
-        this.overlays = [];
+  constructor() {
+    this.overlays = [];
+    this.preventMouseRootClose = false;
+    this.root = document.body;
+    this.handlingResize = false;
+    this.overlayTimer = new OverlayTimer();
+    this.canTabTrap = true;
+    this.trappingInited = false;
+    this._eventsAreBound = false;
+    this._bodyMarginsApplied = false;
+    this.forwardContextmenuEvent = async (event) => {
+      var _a;
+      const topOverlay = this.overlays[this.overlays.length - 1];
+      if (!this.trappingInited || topOverlay.interaction !== "modal" || event.target !== this.overlayHolder) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      await this.closeTopOverlay();
+      (_a = getDeepElementFromPoint(event.clientX, event.clientY)) == null ? void 0 : _a.dispatchEvent(new MouseEvent("contextmenu", event));
+    };
+    this.handleOverlayClose = (event) => {
+      const { root } = event;
+      if (!root)
+        return;
+      this.closeOverlaysForRoot(root);
+    };
+    this.handleMouseCapture = (event) => {
+      const topOverlay = this.topOverlay;
+      if (!event.target || !topOverlay || !topOverlay.overlayContent || hasModifier(event) || !isLeftClick(event)) {
+        this.preventMouseRootClose = true;
+        return;
+      }
+      if (event.target instanceof Node) {
+        const path = event.composedPath();
+        if (path.indexOf(topOverlay.overlayContent) >= 0) {
+          this.preventMouseRootClose = true;
+          return;
+        }
         this.preventMouseRootClose = false;
-        this.root = document.body;
-        this.handlingResize = false;
-        this.overlayTimer = new OverlayTimer();
-        this.canTabTrap = true;
-        this.trappingInited = false;
-        this._eventsAreBound = false;
-        this._bodyMarginsApplied = false;
-        this.forwardContextmenuEvent = async (event) => {
-            const topOverlay = this.overlays[this.overlays.length - 1];
-            if (!this.trappingInited ||
-                topOverlay.interaction !== 'modal' ||
-                event.target !== this.overlayHolder) {
-                return;
-            }
-            event.stopPropagation();
-            event.preventDefault();
-            await this.closeTopOverlay();
-            let target = document.elementFromPoint(event.clientX, event.clientY);
-            while (target === null || target === void 0 ? void 0 : target.shadowRoot) {
-                const innerTarget = target.shadowRoot.elementFromPoint(event.clientX, event.clientY);
-                if (!innerTarget || innerTarget === target) {
-                    break;
-                }
-                target = innerTarget;
-            }
-            target === null || target === void 0 ? void 0 : target.dispatchEvent(new MouseEvent('contextmenu', event));
-        };
-        this.handleMouseCapture = (event) => {
-            const topOverlay = this.topOverlay;
-            if (!event.target ||
-                !topOverlay ||
-                !topOverlay.overlayContent ||
-                hasModifier(event) ||
-                !isLeftClick(event)) {
-                this.preventMouseRootClose = true;
-                return;
-            }
-            if (event.target instanceof Node) {
-                const path = event.composedPath();
-                if (path.indexOf(topOverlay.overlayContent) >= 0) {
-                    this.preventMouseRootClose = true;
-                    return;
-                }
-                this.preventMouseRootClose = false;
-            }
-        };
-        /**
-         * A "longpress" occurs before the "click" that creates it has occured.
-         * In that way the first click will still be part of the "longpress" and
-         * not part of closing the overlay.
-         */
+      }
+    };
+    this._doesNotCloseOnFirstClick = false;
+    this.handleMouse = (event) => {
+      var _a;
+      if (this._doesNotCloseOnFirstClick) {
         this._doesNotCloseOnFirstClick = false;
-        this.handleMouse = (event) => {
-            var _a;
-            if (this._doesNotCloseOnFirstClick) {
-                this._doesNotCloseOnFirstClick = false;
-                return;
-            }
-            if (this.preventMouseRootClose || event.defaultPrevented) {
-                return;
-            }
-            this.closeTopOverlay();
-            const overlaysToClose = [];
-            let root = (_a = this.topOverlay) === null || _a === void 0 ? void 0 : _a.root;
-            let overlay = parentOverlayOf(root);
-            while (root && overlay) {
-                overlaysToClose.push(overlay);
-                overlay = parentOverlayOf(root);
-                root = overlay === null || overlay === void 0 ? void 0 : overlay.root;
-            }
-            if (overlay) {
-                overlaysToClose.push(overlay);
-            }
-            overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay));
-        };
-        this.handleKeyUp = (event) => {
-            if (event.code === 'Escape') {
-                this.closeTopOverlay();
-            }
-        };
-        this.handleResize = () => {
-            if (this.handlingResize)
-                return;
-            this.handlingResize = true;
-            requestAnimationFrame(async () => {
-                const promises = this.overlays.map((overlay) => overlay.updateOverlayPosition());
-                await Promise.all(promises);
-                this.handlingResize = false;
-            });
-        };
+        return;
+      }
+      if (this.preventMouseRootClose || event.defaultPrevented) {
+        return;
+      }
+      this.closeTopOverlay();
+      const overlaysToClose = [];
+      let root = (_a = this.topOverlay) == null ? void 0 : _a.root;
+      let overlay = parentOverlayOf(root);
+      while (root && overlay) {
+        overlaysToClose.push(overlay);
+        overlay = parentOverlayOf(root);
+        root = overlay == null ? void 0 : overlay.root;
+      }
+      if (overlay) {
+        overlaysToClose.push(overlay);
+      }
+      overlaysToClose.forEach((overlay2) => this.hideAndCloseOverlay(overlay2));
+    };
+    this.handleKeyUp = (event) => {
+      if (event.code === "Escape") {
+        this.closeTopOverlay();
+      }
+    };
+    this.handleResize = () => {
+      if (this.handlingResize)
+        return;
+      this.handlingResize = true;
+      requestAnimationFrame(async () => {
+        const promises = this.overlays.map((overlay) => overlay.updateOverlayPosition());
+        await Promise.all(promises);
+        this.handlingResize = false;
+      });
+    };
+  }
+  initTabTrapping() {
+    if (this.trappingInited)
+      return;
+    this.trappingInited = true;
+    if (this.document.body.shadowRoot) {
+      this.canTabTrap = false;
+      return;
     }
-    initTabTrapping() {
-        if (this.trappingInited)
-            return;
-        this.trappingInited = true;
-        /* c8 ignore next 4 */
-        if (this.document.body.shadowRoot) {
-            this.canTabTrap = false;
-            return;
-        }
-        this.document.body.attachShadow({ mode: 'open' });
-        /* c8 ignore next 3 */
-        if (!this.document.body.shadowRoot) {
-            return;
-        }
-        const root = this.document.body.shadowRoot;
-        root.innerHTML = `
+    this.document.body.attachShadow({ mode: "open" });
+    if (!this.document.body.shadowRoot) {
+      return;
+    }
+    const root = this.document.body.shadowRoot;
+    root.innerHTML = `
             <style>
             :host {
                 position: relative;
@@ -161,321 +140,297 @@ export class OverlayStack {
             <div id="actual"><slot></slot></div>
             <div id="holder"><slot name="open"></slot></div>
         `;
-        this.tabTrapper = root.querySelector('#actual');
-        this.overlayHolder = root.querySelector('#holder');
-        this.tabTrapper.attachShadow({ mode: 'open' });
-        if (this.tabTrapper.shadowRoot) {
-            this.tabTrapper.shadowRoot.innerHTML = '<slot></slot>';
-        }
-        this.overlayHolder.addEventListener('contextmenu', this.forwardContextmenuEvent, true);
-        requestAnimationFrame(() => {
-            this.applyBodyMargins();
-            const observer = new ResizeObserver(() => {
-                this.applyBodyMargins();
-            });
-            observer.observe(document.body);
-        });
+    this.tabTrapper = root.querySelector("#actual");
+    this.overlayHolder = root.querySelector("#holder");
+    this.tabTrapper.attachShadow({ mode: "open" });
+    if (this.tabTrapper.shadowRoot) {
+      this.tabTrapper.shadowRoot.innerHTML = "<slot></slot>";
     }
-    applyBodyMargins() {
-        const { marginLeft, marginRight, marginTop, marginBottom } = getComputedStyle(document.body);
-        const allZero = parseFloat(marginLeft) === 0 &&
-            parseFloat(marginRight) === 0 &&
-            parseFloat(marginTop) === 0 &&
-            parseFloat(marginBottom) === 0;
-        if (allZero && !this._bodyMarginsApplied) {
-            return;
-        }
-        this.tabTrapper.style.setProperty('--swc-body-margins-inline', `calc(${marginLeft} + ${marginRight})`);
-        this.tabTrapper.style.setProperty('--swc-body-margins-block', `calc(${marginTop} + ${marginBottom})`);
-        this._bodyMarginsApplied = !allZero;
+    this.overlayHolder.addEventListener("contextmenu", this.forwardContextmenuEvent, true);
+    requestAnimationFrame(() => {
+      this.applyBodyMargins();
+      const observer = new ResizeObserver(() => {
+        this.applyBodyMargins();
+      });
+      observer.observe(document.body);
+    });
+  }
+  applyBodyMargins() {
+    const { marginLeft, marginRight, marginTop, marginBottom } = getComputedStyle(document.body);
+    const allZero = parseFloat(marginLeft) === 0 && parseFloat(marginRight) === 0 && parseFloat(marginTop) === 0 && parseFloat(marginBottom) === 0;
+    if (allZero && !this._bodyMarginsApplied) {
+      return;
     }
-    startTabTrapping() {
-        this.initTabTrapping();
-        /* c8 ignore next 3 */
-        if (!this.canTabTrap) {
-            return;
-        }
-        this.tabTrapper.tabIndex = -1;
-        this.tabTrapper.setAttribute('aria-hidden', 'true');
+    this.tabTrapper.style.setProperty("--swc-body-margins-inline", `calc(${marginLeft} + ${marginRight})`);
+    this.tabTrapper.style.setProperty("--swc-body-margins-block", `calc(${marginTop} + ${marginBottom})`);
+    this._bodyMarginsApplied = !allZero;
+  }
+  startTabTrapping() {
+    this.initTabTrapping();
+    if (!this.canTabTrap) {
+      return;
     }
-    stopTabTrapping() {
-        /* c8 ignore next 3 */
-        if (!this.canTabTrap || !this.trappingInited) {
-            return;
-        }
-        this.tabTrapper.removeAttribute('tabindex');
-        this.tabTrapper.removeAttribute('aria-hidden');
+    this.tabTrapper.tabIndex = -1;
+    this.tabTrapper.setAttribute("aria-hidden", "true");
+  }
+  stopTabTrapping() {
+    if (!this.canTabTrap || !this.trappingInited) {
+      return;
     }
-    get document() {
-        return this.root.ownerDocument /* c8 ignore next */ || document;
+    this.tabTrapper.removeAttribute("tabindex");
+    this.tabTrapper.removeAttribute("aria-hidden");
+  }
+  get document() {
+    return this.root.ownerDocument || document;
+  }
+  get topOverlay() {
+    return this.overlays.slice(-1)[0];
+  }
+  findOverlayForContent(overlayContent) {
+    for (const item of this.overlays) {
+      if (overlayContent === item.overlayContent) {
+        return item;
+      }
     }
-    get topOverlay() {
-        return this.overlays.slice(-1)[0];
+    return void 0;
+  }
+  addEventListeners() {
+    if (this._eventsAreBound)
+      return;
+    this._eventsAreBound = true;
+    this.document.addEventListener("click", this.handleMouseCapture, true);
+    this.document.addEventListener("click", this.handleMouse);
+    this.document.addEventListener("keyup", this.handleKeyUp);
+    this.document.addEventListener("sp-overlay-close", this.handleOverlayClose);
+    window.addEventListener("resize", this.handleResize);
+  }
+  isClickOverlayActiveForTrigger(trigger) {
+    return this.overlays.some((item) => trigger === item.trigger && item.interaction === "click");
+  }
+  async openOverlay(details) {
+    this.addEventListeners();
+    if (this.findOverlayForContent(details.content)) {
+      return false;
     }
-    findOverlayForContent(overlayContent) {
-        for (const item of this.overlays) {
-            if (overlayContent === item.overlayContent) {
-                return item;
-            }
-        }
-        return undefined;
+    if (details.notImmediatelyClosable) {
+      this._doesNotCloseOnFirstClick = true;
     }
-    addEventListeners() {
-        if (this._eventsAreBound)
-            return;
-        this._eventsAreBound = true;
-        this.document.addEventListener('click', this.handleMouseCapture, true);
-        this.document.addEventListener('click', this.handleMouse);
-        this.document.addEventListener('keyup', this.handleKeyUp);
-        window.addEventListener('resize', this.handleResize);
+    if (details.interaction === "modal") {
+      this.startTabTrapping();
     }
-    isClickOverlayActiveForTrigger(trigger) {
-        return this.overlays.some((item) => trigger === item.trigger && item.interaction === 'click');
+    const contentWithLifecycle = details.content;
+    if (contentWithLifecycle.overlayWillOpenCallback) {
+      const { trigger } = details;
+      contentWithLifecycle.overlayWillOpenCallback({ trigger });
     }
-    async openOverlay(details) {
-        this.addEventListeners();
-        if (this.findOverlayForContent(details.content)) {
-            return false;
-        }
-        if (details.notImmediatelyClosable) {
-            this._doesNotCloseOnFirstClick = true;
-        }
-        if (details.interaction === 'modal') {
-            this.startTabTrapping();
-        }
-        const contentWithLifecycle = details.content;
-        if (contentWithLifecycle.overlayWillOpenCallback) {
-            const { trigger } = details;
-            contentWithLifecycle.overlayWillOpenCallback({ trigger });
-        }
-        if (details.delayed) {
-            const cancelledPromise = this.overlayTimer.openTimer(details.content);
-            const promises = [cancelledPromise];
-            if (details.abortPromise) {
-                promises.push(details.abortPromise);
-            }
-            const cancelled = await Promise.race(promises);
-            if (cancelled) {
-                if (contentWithLifecycle.overlayOpenCancelledCallback) {
-                    const { trigger } = details;
-                    contentWithLifecycle.overlayOpenCancelledCallback({
-                        trigger,
-                    });
-                }
-                return cancelled;
-            }
-        }
-        if (details.root) {
-            this.closeOverlaysForRoot(details.root);
+    if (details.delayed) {
+      const cancelledPromise = this.overlayTimer.openTimer(details.content);
+      const promises = [cancelledPromise];
+      if (details.abortPromise) {
+        promises.push(details.abortPromise);
+      }
+      const cancelled = await Promise.race(promises);
+      if (cancelled) {
+        if (contentWithLifecycle.overlayOpenCancelledCallback) {
+          const { trigger } = details;
+          contentWithLifecycle.overlayOpenCancelledCallback({
+            trigger
+          });
         }
-        if (details.interaction === 'click') {
-            this.closeAllHoverOverlays();
-        }
-        else if (details.interaction === 'hover' &&
-            this.isClickOverlayActiveForTrigger(details.trigger)) {
-            // Don't show a hover popover if the click popover is already active
-            return true;
-        }
-        const activeOverlay = ActiveOverlay.create(details);
-        if (this.overlays.length) {
-            const topOverlay = this.overlays[this.overlays.length - 1];
-            topOverlay.obscure(activeOverlay.interaction);
-        }
-        document.body.appendChild(activeOverlay);
-        /**
-         * The following work to make the new overlay the "top" of the stack
-         * has to happen AFTER the current call stack completes in case there
-         * is work there in to remove the previous "top" overlay.
-         */
-        return new Promise((res) => requestAnimationFrame(res)).then(async () => {
-            this.overlays.push(activeOverlay);
-            await activeOverlay.updateComplete;
-            this.addOverlayEventListeners(activeOverlay);
-            if (typeof contentWithLifecycle.open !== 'undefined') {
-                contentWithLifecycle.open = true;
-            }
-            let cb = () => {
-                return;
-            };
-            if (contentWithLifecycle.overlayOpenCallback) {
-                const { trigger } = activeOverlay;
-                const { overlayOpenCallback } = contentWithLifecycle;
-                cb = async () => await overlayOpenCallback({ trigger });
-            }
-            await activeOverlay.openCallback(cb);
-            return false;
-        });
+        return cancelled;
+      }
     }
-    addOverlayEventListeners(activeOverlay) {
-        activeOverlay.addEventListener('close', (() => {
-            this.hideAndCloseOverlay(activeOverlay, true // animated?
-            );
-        }));
-        switch (activeOverlay.interaction) {
-            case 'replace':
-                this.addReplaceOverlayEventListeners(activeOverlay);
-                break;
-            case 'inline':
-                this.addInlineOverlayEventListeners(activeOverlay);
-                break;
-        }
+    if (details.root) {
+      this.closeOverlaysForRoot(details.root);
     }
-    addReplaceOverlayEventListeners(activeOverlay) {
-        activeOverlay.addEventListener('keydown', (event) => {
-            const { code } = event;
-            /* c8 ignore next */
-            if (code !== 'Tab')
-                return;
-            event.stopPropagation();
-            this.closeOverlay(activeOverlay.overlayContent);
-            activeOverlay.tabbingAway = true;
-            activeOverlay.trigger.focus();
-            activeOverlay.trigger.dispatchEvent(new KeyboardEvent('keydown', event));
-        });
+    if (details.interaction === "click") {
+      this.closeAllHoverOverlays();
+    } else if (details.interaction === "hover" && this.isClickOverlayActiveForTrigger(details.trigger)) {
+      return true;
     }
-    addInlineOverlayEventListeners(activeOverlay) {
-        activeOverlay.trigger.addEventListener('keydown', activeOverlay.handleInlineTriggerKeydown);
-        activeOverlay.addEventListener('keydown', (event) => {
-            const { code, shiftKey } = event;
-            /* c8 ignore next */
-            if (code !== 'Tab')
-                return;
-            activeOverlay.tabbingAway = true;
-            if (shiftKey) {
-                const returnFocusElement = document.createElement('span');
-                returnFocusElement.tabIndex = -1;
-                if (activeOverlay.trigger.hasAttribute('slot')) {
-                    returnFocusElement.slot = activeOverlay.trigger.slot;
-                }
-                activeOverlay.trigger.insertAdjacentElement('afterend', returnFocusElement);
-                returnFocusElement.focus();
-                returnFocusElement.remove();
-                return;
-            }
-            event.stopPropagation();
-            const triggerWithLifecycle = activeOverlay.trigger;
-            if (typeof triggerWithLifecycle.open !== 'undefined') {
-                triggerWithLifecycle.open = false;
-            }
-            this.closeOverlay(activeOverlay.overlayContent);
-            activeOverlay.trigger.focus();
-        });
+    const activeOverlay = ActiveOverlay.create(details);
+    if (this.overlays.length) {
+      const topOverlay = this.overlays[this.overlays.length - 1];
+      topOverlay.obscure(activeOverlay.interaction);
     }
-    closeOverlay(content) {
-        this.overlayTimer.close(content);
-        requestAnimationFrame(() => {
-            const overlayFromContent = this.findOverlayForContent(content);
-            const overlaysToClose = [overlayFromContent];
-            overlaysToClose.push(...findOverlaysRootedInOverlay(overlayFromContent, this.overlays));
-            overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay));
-        });
+    document.body.appendChild(activeOverlay);
+    return new Promise((res) => requestAnimationFrame(res)).then(async () => {
+      this.overlays.push(activeOverlay);
+      await activeOverlay.updateComplete;
+      this.addOverlayEventListeners(activeOverlay);
+      if (typeof contentWithLifecycle.open !== "undefined") {
+        contentWithLifecycle.open = true;
+      }
+      let cb = () => {
+        return;
+      };
+      if (contentWithLifecycle.overlayOpenCallback) {
+        const { trigger } = activeOverlay;
+        const { overlayOpenCallback } = contentWithLifecycle;
+        cb = async () => await overlayOpenCallback({ trigger });
+      }
+      await activeOverlay.openCallback(cb);
+      return false;
+    });
+  }
+  addOverlayEventListeners(activeOverlay) {
+    activeOverlay.addEventListener("close", () => {
+      this.hideAndCloseOverlay(activeOverlay, true);
+    });
+    switch (activeOverlay.interaction) {
+      case "replace":
+        this.addReplaceOverlayEventListeners(activeOverlay);
+        break;
+      case "inline":
+        this.addInlineOverlayEventListeners(activeOverlay);
+        break;
     }
-    closeAllHoverOverlays() {
-        for (const overlay of this.overlays) {
-            if (overlay.interaction === 'hover') {
-                this.hideAndCloseOverlay(overlay, false);
-            }
+  }
+  addReplaceOverlayEventListeners(activeOverlay) {
+    activeOverlay.addEventListener("keydown", (event) => {
+      const { code } = event;
+      if (code !== "Tab")
+        return;
+      event.stopPropagation();
+      this.closeOverlay(activeOverlay.overlayContent);
+      activeOverlay.tabbingAway = true;
+      activeOverlay.trigger.focus();
+      activeOverlay.trigger.dispatchEvent(new KeyboardEvent("keydown", event));
+    });
+  }
+  addInlineOverlayEventListeners(activeOverlay) {
+    activeOverlay.trigger.addEventListener("keydown", activeOverlay.handleInlineTriggerKeydown);
+    activeOverlay.addEventListener("keydown", (event) => {
+      const { code, shiftKey } = event;
+      if (code !== "Tab")
+        return;
+      activeOverlay.tabbingAway = true;
+      if (shiftKey) {
+        const returnFocusElement = document.createElement("span");
+        returnFocusElement.tabIndex = -1;
+        if (activeOverlay.trigger.hasAttribute("slot")) {
+          returnFocusElement.slot = activeOverlay.trigger.slot;
         }
+        activeOverlay.trigger.insertAdjacentElement("afterend", returnFocusElement);
+        returnFocusElement.focus();
+        returnFocusElement.remove();
+        return;
+      }
+      event.stopPropagation();
+      const triggerWithLifecycle = activeOverlay.trigger;
+      if (typeof triggerWithLifecycle.open !== "undefined") {
+        triggerWithLifecycle.open = false;
+      }
+      this.closeOverlay(activeOverlay.overlayContent);
+      activeOverlay.trigger.focus();
+    });
+  }
+  closeOverlay(content) {
+    this.overlayTimer.close(content);
+    requestAnimationFrame(() => {
+      const overlayFromContent = this.findOverlayForContent(content);
+      const overlaysToClose = [overlayFromContent];
+      overlaysToClose.push(...findOverlaysRootedInOverlay(overlayFromContent, this.overlays));
+      overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay));
+    });
+  }
+  closeAllHoverOverlays() {
+    for (const overlay of this.overlays) {
+      if (overlay.interaction === "hover") {
+        this.hideAndCloseOverlay(overlay, false);
+      }
     }
-    closeOverlaysForRoot(root) {
-        const overlaysToClose = [];
-        for (const overlay of this.overlays) {
-            if (overlay.root && overlay.root === root) {
-                overlaysToClose.push(overlay);
-                overlaysToClose.push(...findOverlaysRootedInOverlay(overlay, this.overlays));
-            }
-        }
-        overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay, true, true));
+  }
+  closeOverlaysForRoot(root) {
+    const overlaysToClose = [];
+    for (const overlay of this.overlays) {
+      if (overlay.root && overlay.root === root) {
+        overlaysToClose.push(overlay);
+        overlaysToClose.push(...findOverlaysRootedInOverlay(overlay, this.overlays));
+      }
     }
-    async manageFocusAfterCloseWhenOverlaysRemain(returnBeforeFocus) {
-        const topOverlay = this.overlays[this.overlays.length - 1];
-        topOverlay.feature();
-        // Push focus in the the next remaining overlay as needed when a `type="modal"` overlay exists.
-        if (topOverlay.interaction === 'modal' || topOverlay.hasModalRoot) {
-            if (returnBeforeFocus)
-                return;
-            await topOverlay.focus();
-        }
-        else {
-            this.stopTabTrapping();
-        }
+    overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay, true, true));
+  }
+  async manageFocusAfterCloseWhenOverlaysRemain(returnBeforeFocus) {
+    const topOverlay = this.overlays[this.overlays.length - 1];
+    topOverlay.feature();
+    if (topOverlay.interaction === "modal" || topOverlay.hasModalRoot) {
+      if (returnBeforeFocus)
+        return;
+      await topOverlay.focus();
+    } else {
+      this.stopTabTrapping();
     }
-    manageFocusAfterCloseWhenLastOverlay(overlay) {
-        this.stopTabTrapping();
-        const isModal = overlay.interaction === 'modal';
-        const isReceivesFocus = overlay.receivesFocus === 'auto';
-        const isReplace = overlay.interaction === 'replace';
-        const isInline = overlay.interaction === 'inline';
-        const isTabbingAwayFromInlineOrReplace = (isReplace || isInline) && !overlay.tabbingAway;
-        overlay.tabbingAway = false;
-        if (!isModal && !isReceivesFocus && !isTabbingAwayFromInlineOrReplace) {
-            return;
-        }
-        // Manage post closure focus when needed.
-        const overlayRoot = overlay.overlayContent.getRootNode();
-        const overlayContentActiveElement = overlayRoot.activeElement;
-        let triggerRoot;
-        let triggerActiveElement;
-        const contentContainsActiveElement = () => overlay.overlayContent.contains(overlayContentActiveElement);
-        const triggerRootContainsActiveElement = () => {
-            triggerRoot = overlay.trigger.getRootNode();
-            triggerActiveElement = triggerRoot.activeElement;
-            return triggerRoot.contains(triggerActiveElement);
-        };
-        const triggerHostIsActiveElement = () => triggerRoot.host && triggerRoot.host === triggerActiveElement;
-        // Return focus to the trigger as long as the user hasn't actively focused
-        // something outside of the current overlay interface; trigger, root, host.
-        if (isModal ||
-            contentContainsActiveElement() ||
-            triggerRootContainsActiveElement() ||
-            triggerHostIsActiveElement()) {
-            overlay.trigger.focus();
-        }
+  }
+  manageFocusAfterCloseWhenLastOverlay(overlay) {
+    this.stopTabTrapping();
+    const isModal = overlay.interaction === "modal";
+    const isReceivesFocus = overlay.receivesFocus === "auto";
+    const isReplace = overlay.interaction === "replace";
+    const isInline = overlay.interaction === "inline";
+    const isTabbingAwayFromInlineOrReplace = (isReplace || isInline) && !overlay.tabbingAway;
+    overlay.tabbingAway = false;
+    if (!isModal && !isReceivesFocus && !isTabbingAwayFromInlineOrReplace) {
+      return;
     }
-    async hideAndCloseOverlay(overlay, animated, returnBeforeFocus) {
-        if (!overlay) {
-            return;
-        }
-        const contentWithLifecycle = overlay.overlayContent;
-        if (typeof contentWithLifecycle.overlayWillCloseCallback !== 'undefined') {
-            const { trigger } = overlay;
-            if (contentWithLifecycle.overlayWillCloseCallback({ trigger })) {
-                return;
-            }
-        }
-        await overlay.hide(animated);
-        if (typeof contentWithLifecycle.open !== 'undefined') {
-            contentWithLifecycle.open = false;
-        }
-        if (contentWithLifecycle.overlayCloseCallback) {
-            const { trigger } = overlay;
-            await contentWithLifecycle.overlayCloseCallback({ trigger });
-        }
-        if (overlay.state != 'dispose')
-            return;
-        const index = this.overlays.indexOf(overlay);
-        if (index >= 0) {
-            this.overlays.splice(index, 1);
-        }
-        if (this.overlays.length) {
-            await this.manageFocusAfterCloseWhenOverlaysRemain(returnBeforeFocus);
-        }
-        else {
-            this.manageFocusAfterCloseWhenLastOverlay(overlay);
-        }
-        overlay.remove();
-        overlay.dispose();
-        overlay.trigger.dispatchEvent(new CustomEvent('sp-closed', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-            detail: {
-                interaction: overlay.interaction,
-            },
-        }));
+    const overlayRoot = overlay.overlayContent.getRootNode();
+    const overlayContentActiveElement = overlayRoot.activeElement;
+    let triggerRoot;
+    let triggerActiveElement;
+    const contentContainsActiveElement = () => overlay.overlayContent.contains(overlayContentActiveElement);
+    const triggerRootContainsActiveElement = () => {
+      triggerRoot = overlay.trigger.getRootNode();
+      triggerActiveElement = triggerRoot.activeElement;
+      return triggerRoot.contains(triggerActiveElement);
+    };
+    const triggerHostIsActiveElement = () => triggerRoot.host && triggerRoot.host === triggerActiveElement;
+    if (isModal || contentContainsActiveElement() || triggerRootContainsActiveElement() || triggerHostIsActiveElement()) {
+      overlay.trigger.focus();
+    }
+  }
+  async hideAndCloseOverlay(overlay, animated, returnBeforeFocus) {
+    if (!overlay) {
+      return;
+    }
+    const contentWithLifecycle = overlay.overlayContent;
+    if (typeof contentWithLifecycle.overlayWillCloseCallback !== "undefined") {
+      const { trigger } = overlay;
+      if (contentWithLifecycle.overlayWillCloseCallback({ trigger })) {
+        return;
+      }
+    }
+    await overlay.hide(animated);
+    if (typeof contentWithLifecycle.open !== "undefined") {
+      contentWithLifecycle.open = false;
+    }
+    if (contentWithLifecycle.overlayCloseCallback) {
+      const { trigger } = overlay;
+      await contentWithLifecycle.overlayCloseCallback({ trigger });
+    }
+    if (overlay.state != "dispose")
+      return;
+    const index = this.overlays.indexOf(overlay);
+    if (index >= 0) {
+      this.overlays.splice(index, 1);
     }
-    closeTopOverlay() {
-        return this.hideAndCloseOverlay(this.topOverlay, true);
+    if (this.overlays.length) {
+      await this.manageFocusAfterCloseWhenOverlaysRemain(returnBeforeFocus);
+    } else {
+      this.manageFocusAfterCloseWhenLastOverlay(overlay);
     }
+    overlay.remove();
+    overlay.dispose();
+    overlay.trigger.dispatchEvent(new CustomEvent("sp-closed", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail: {
+        interaction: overlay.interaction
+      }
+    }));
+  }
+  closeTopOverlay() {
+    return this.hideAndCloseOverlay(this.topOverlay, true);
+  }
 }
-//# sourceMappingURL=overlay-stack.js.map
+//# sourceMappingURL=overlay-stack.js.map