@vaadin/overlay 24.1.0 → 24.2.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.1.0",
+  "version": "24.2.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.1.0",
-    "@vaadin/component-base": "~24.1.0",
-    "@vaadin/vaadin-lumo-styles": "~24.1.0",
-    "@vaadin/vaadin-material-styles": "~24.1.0",
-    "@vaadin/vaadin-themable-mixin": "~24.1.0"
+    "@vaadin/a11y-base": "24.2.0-alpha1",
+    "@vaadin/component-base": "24.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/testing-helpers": "^0.4.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "7fdfe7d5ceb4c305a894f8e9dc11e5b7d04cf1f2"
+  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
 }

package/src/vaadin-overlay-focus-mixin.d.ts

@@ -36,12 +36,28 @@ export declare class OverlayFocusMixinClass {
   protected _resetFocus(): void;
 
   /**
-   * Store previously focused node when the overlay starts to open.
+   * Save the previously focused node when the overlay starts to open.
    */
-  protected _storeFocus(): void;
+  protected _saveFocus(): void;
 
   /**
    * Trap focus within the overlay after opening has completed.
    */
   protected _trapFocus(): void;
+
+  /**
+   * Returns true if focus is still inside the overlay or on the body element,
+   * otherwise false.
+   *
+   * Focus shouldn't be restored if it's been moved elsewhere by another
+   * component or as a result of a user interaction e.g. the user clicked
+   * on a button outside the overlay while the overlay was open.
+   */
+  protected _shouldRestoreFocus(): boolean;
+
+  /**
+   * Returns true if the overlay contains the given node,
+   * including those within shadow DOM trees.
+   */
+  protected _deepContains(node: Node): boolean;
 }

package/src/vaadin-overlay-focus-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
+import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
@@ -51,6 +52,7 @@ export const OverlayFocusMixin = (superClass) =>
 
       this.__ariaModalController = new AriaModalController(this);
       this.__focusTrapController = new FocusTrapController(this);
+      this.__focusRestorationController = new FocusRestorationController();
     }
 
     /** @protected */
@@ -59,6 +61,7 @@ export const OverlayFocusMixin = (superClass) =>
 
       this.addController(this.__ariaModalController);
       this.addController(this.__focusTrapController);
+      this.addController(this.__focusRestorationController);
     }
 
     /**
@@ -72,19 +75,19 @@ export const OverlayFocusMixin = (superClass) =>
         this.__focusTrapController.releaseFocus();
       }
 
-      if (this.restoreFocusOnClose) {
-        this.__restoreFocus();
+      if (this.restoreFocusOnClose && this._shouldRestoreFocus()) {
+        this.__focusRestorationController.restoreFocus();
       }
     }
 
     /**
-     * Store previously focused node when the overlay starts to open.
+     * Save the previously focused node when the overlay starts to open.
      *
      * @protected
      */
-    _storeFocus() {
+    _saveFocus() {
       if (this.restoreFocusOnClose) {
-        this.__storeFocus();
+        this.__focusRestorationController.saveFocus(this.restoreFocusNode);
       }
     }
 
@@ -100,49 +103,40 @@ export const OverlayFocusMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __storeFocus() {
-      // Store the focused node.
-      this.__restoreFocusNode = getDeepActiveElement();
-
-      // Determine and store the node that has the `focus-ring` attribute
-      // in order to restore the attribute when the overlay closes.
-      const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
-      if (restoreFocusNode) {
-        const restoreFocusNodeHost = (restoreFocusNode.assignedSlot || restoreFocusNode).getRootNode().host;
-        this.__restoreFocusRingNode = [restoreFocusNode, restoreFocusNodeHost].find((node) => {
-          return node && node.hasAttribute('focus-ring');
-        });
-      }
-    }
-
-    /** @private */
-    __restoreFocus() {
-      // If the activeElement is `<body>` or inside the overlay,
-      // we are allowed to restore the focus. In all the other
-      // cases focus might have been moved elsewhere by another
-      // component or by the user interaction (e.g. click on a
-      // button outside the overlay).
+    /**
+     * Returns true if focus is still inside the overlay or on the body element,
+     * otherwise false.
+     *
+     * Focus shouldn't be restored if it's been moved elsewhere by another
+     * component or as a result of a user interaction e.g. the user clicked
+     * on a button outside the overlay while the overlay was open.
+     *
+     * @protected
+     * @return {boolean}
+     */
+    _shouldRestoreFocus() {
       const activeElement = getDeepActiveElement();
-      if (activeElement !== document.body && !this._deepContains(activeElement)) {
-        return;
-      }
+      return activeElement === document.body || this._deepContains(activeElement);
+    }
 
-      // Use restoreFocusNode if specified, otherwise fallback to the node
-      // which was focused before opening the overlay.
-      const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
-      if (restoreFocusNode) {
-        // Focusing the restoreFocusNode doesn't always work synchronously on Firefox and Safari
-        // (e.g. combo-box overlay close on outside click).
-        setTimeout(() => restoreFocusNode.focus());
-        this.__restoreFocusNode = null;
+    /**
+     * Returns true if the overlay contains the given node,
+     * including those within shadow DOM trees.
+     *
+     * @param {Node} node
+     * @return {boolean}
+     * @protected
+     */
+    _deepContains(node) {
+      if (this.contains(node)) {
+        return true;
       }
-
-      // Restore the `focus-ring` attribute if it was present
-      // when the overlay was opening.
-      if (this.__restoreFocusRingNode) {
-        this.__restoreFocusRingNode.setAttribute('focus-ring', '');
-        this.__restoreFocusRingNode = null;
+      let n = node;
+      const doc = node.ownerDocument;
+      // Walk from node to `this` or `document`
+      while (n && n !== doc && n !== this) {
+        n = n.parentNode || n.host;
       }
+      return n === this;
     }
   };

package/src/vaadin-overlay-stack-mixin.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function OverlayStackMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<OverlayStackMixinClass> & T;
+
+export declare class OverlayStackMixinClass {
+  /**
+   * Returns true if this is the last one in the opened overlays stack.
+   */
+  protected readonly _last: boolean;
+
+  /**
+   * Brings the overlay as visually the frontmost one.
+   */
+  bringToFront(): void;
+}

package/src/vaadin-overlay-stack-mixin.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns all attached overlays in visual stacking order.
+ * @private
+ */
+const getAttachedInstances = () =>
+  Array.from(document.body.children)
+    .filter((el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'))
+    .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+
+/**
+ * Returns true if the overlay is the last one in the opened overlays stack.
+ * @param {HTMLElement} overlay
+ * @return {boolean}
+ * @protected
+ */
+export const isLastOverlay = (overlay) => overlay === getAttachedInstances().pop();
+
+/**
+ * @polymerMixin
+ */
+export const OverlayStackMixin = (superClass) =>
+  class OverlayStackMixin extends superClass {
+    constructor() {
+      super();
+
+      this._hasOverlayStackMixin = true;
+    }
+
+    /**
+     * Returns true if this is the last one in the opened overlays stack.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    get _last() {
+      return isLastOverlay(this);
+    }
+
+    /**
+     * Brings the overlay as visually the frontmost one.
+     */
+    bringToFront() {
+      let zIndex = '';
+      const frontmost = getAttachedInstances()
+        .filter((o) => o !== this)
+        .pop();
+      if (frontmost) {
+        const frontmostZIndex = frontmost.__zIndex;
+        zIndex = frontmostZIndex + 1;
+      }
+      this.style.zIndex = zIndex;
+      this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
+    }
+
+    /** @protected */
+    _enterModalState() {
+      if (document.body.style.pointerEvents !== 'none') {
+        // Set body pointer-events to 'none' to disable mouse interactions with
+        // other document nodes.
+        this._previousDocumentPointerEvents = document.body.style.pointerEvents;
+        document.body.style.pointerEvents = 'none';
+      }
+
+      // Disable pointer events in other attached overlays
+      getAttachedInstances().forEach((el) => {
+        if (el !== this) {
+          el.$.overlay.style.pointerEvents = 'none';
+        }
+      });
+    }
+
+    /** @protected */
+    _exitModalState() {
+      if (this._previousDocumentPointerEvents !== undefined) {
+        // Restore body pointer-events
+        document.body.style.pointerEvents = this._previousDocumentPointerEvents;
+        delete this._previousDocumentPointerEvents;
+      }
+
+      // Restore pointer events in the previous overlay(s)
+      const instances = getAttachedInstances();
+
+      let el;
+      // Use instances.pop() to ensure the reverse order
+      while ((el = instances.pop())) {
+        if (el === this) {
+          // Skip the current instance
+          continue;
+        }
+        el.$.overlay.style.removeProperty('pointer-events');
+        if (!el.modeless) {
+          // Stop after the last modal
+          break;
+        }
+      }
+    }
+  };

package/src/vaadin-overlay.d.ts

@@ -110,7 +110,7 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  * ---|---|---
  * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
@@ -163,11 +163,6 @@ declare class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(HTMLEleme
    */
   hidden: boolean;
 
-  /**
-   * Returns true if this is the last one in the opened overlays stack.
-   */
-  protected readonly _last: boolean;
-
   close(sourceEvent?: Event | null): void;
 
   /**
@@ -178,11 +173,6 @@ declare class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(HTMLEleme
    */
   requestContentUpdate(): void;
 
-  /**
-   * Brings the overlay as visually the frontmost one
-   */
-  bringToFront(): void;
-
   addEventListener<K extends keyof OverlayEventMap>(
     type: K,
     listener: (this: Overlay, ev: OverlayEventMap[K]) => void,

package/src/vaadin-overlay.js

@@ -10,6 +10,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
+import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
 
 /**
  * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
@@ -60,7 +61,7 @@ import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
  * ---|---|---
  * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
@@ -75,7 +76,7 @@ import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
  * @mixes DirMixin
  * @mixes OverlayFocusMixin
  */
-class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement))) {
+class Overlay extends OverlayStackMixin(OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -251,16 +252,6 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
     return ['_rendererOrDataChanged(renderer, owner, model, opened)'];
   }
 
-  /**
-   * Returns all attached overlays in visual stacking order.
-   * @private
-   */
-  static get __attachedInstances() {
-    return Array.from(document.body.children)
-      .filter((el) => el instanceof Overlay && !el.hasAttribute('closing'))
-      .sort((a, b) => a.__zIndex - b.__zIndex || 0);
-  }
-
   constructor() {
     super();
     this._boundMouseDownListener = this._mouseDownListener.bind(this);
@@ -274,15 +265,6 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
     }
   }
 
-  /**
-   * Returns true if this is the last one in the opened overlays stack
-   * @return {boolean}
-   * @protected
-   */
-  get _last() {
-    return this === Overlay.__attachedInstances.pop();
-  }
-
   /** @protected */
   ready() {
     super.ready();
@@ -449,7 +431,7 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
   /** @private */
   _openedChanged(opened, wasOpened) {
     if (opened) {
-      this._storeFocus();
+      this._saveFocus();
 
       this._animatedOpening();
 
@@ -615,23 +597,6 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
     document.documentElement.addEventListener('click', this._boundOutsideClickListener, true);
   }
 
-  /** @private */
-  _enterModalState() {
-    if (document.body.style.pointerEvents !== 'none') {
-      // Set body pointer-events to 'none' to disable mouse interactions with
-      // other document nodes.
-      this._previousDocumentPointerEvents = document.body.style.pointerEvents;
-      document.body.style.pointerEvents = 'none';
-    }
-
-    // Disable pointer events in other attached overlays
-    Overlay.__attachedInstances.forEach((el) => {
-      if (el !== this) {
-        el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
-      }
-    });
-  }
-
   /** @private */
   _removeGlobalListeners() {
     document.removeEventListener('mousedown', this._boundMouseDownListener);
@@ -639,31 +604,6 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
     document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
   }
 
-  /** @private */
-  _exitModalState() {
-    if (this._previousDocumentPointerEvents !== undefined) {
-      // Restore body pointer-events
-      document.body.style.pointerEvents = this._previousDocumentPointerEvents;
-      delete this._previousDocumentPointerEvents;
-    }
-
-    // Restore pointer events in the previous overlay(s)
-    const instances = Overlay.__attachedInstances;
-    let el;
-    // Use instances.pop() to ensure the reverse order
-    while ((el = instances.pop())) {
-      if (el === this) {
-        // Skip the current instance
-        continue;
-      }
-      el.shadowRoot.querySelector('[part="overlay"]').style.removeProperty('pointer-events');
-      if (!el.modeless) {
-        // Stop after the last modal
-        break;
-      }
-    }
-  }
-
   /** @private */
   _rendererOrDataChanged(renderer, owner, model, opened) {
     const ownerOrModelChanged = this._oldOwner !== owner || this._oldModel !== model;
@@ -689,38 +629,6 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
     }
   }
 
-  /**
-   * @param {!Node} node
-   * @return {boolean}
-   * @private
-   */
-  _deepContains(node) {
-    if (this.contains(node)) {
-      return true;
-    }
-    let n = node;
-    const doc = node.ownerDocument;
-    // Walk from node to `this` or `document`
-    while (n && n !== doc && n !== this) {
-      n = n.parentNode || n.host;
-    }
-    return n === this;
-  }
-
-  /**
-   * Brings the overlay as visually the frontmost one
-   */
-  bringToFront() {
-    let zIndex = '';
-    const frontmost = Overlay.__attachedInstances.filter((o) => o !== this).pop();
-    if (frontmost) {
-      const frontmostZIndex = frontmost.__zIndex;
-      zIndex = frontmostZIndex + 1;
-    }
-    this.style.zIndex = zIndex;
-    this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
-  }
-
   /**
    * @event vaadin-overlay-open
    * Fired after the overlay is opened.