@vaadin/overlay 24.1.1 → 24.2.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.1.1",
+  "version": "24.2.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.1.1",
-    "@vaadin/component-base": "~24.1.1",
-    "@vaadin/vaadin-lumo-styles": "~24.1.1",
-    "@vaadin/vaadin-material-styles": "~24.1.1",
-    "@vaadin/vaadin-themable-mixin": "~24.1.1"
+    "@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",
@@ -48,5 +48,5 @@
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c3a3d904885bd37ebb07a84b09617a340b4fab7e"
+  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
 }

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();
@@ -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,20 +629,6 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
     }
   }
 
-  /**
-   * 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.