@vaadin/overlay 25.0.0-alpha8 → 25.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-alpha9",
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha9",
+    "@vaadin/test-runner-commands": "25.0.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

package/src/vaadin-overlay-mixin.js

@@ -117,8 +117,11 @@ export const OverlayMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
-      super.ready();
+    firstUpdated() {
+      super.firstUpdated();
+
+      // Set popover in firstUpdated before opened observers are called
+      this.popover = 'manual';
 
       // Need to add dummy click listeners to this and the backdrop or else
       // the document click event listener (_outsideClickListener) may never
@@ -175,13 +178,17 @@ export const OverlayMixin = (superClass) =>
      * @param {Event=} sourceEvent
      */
     close(sourceEvent) {
-      const evt = new CustomEvent('vaadin-overlay-close', {
+      // Dispatch the event on the overlay. Not using composed, as propagating the event through shadow roots could have
+      // side effects when nesting overlays
+      const event = new CustomEvent('vaadin-overlay-close', {
         bubbles: true,
         cancelable: true,
         detail: { sourceEvent },
       });
-      this.dispatchEvent(evt);
-      if (!evt.defaultPrevented) {
+      this.dispatchEvent(event);
+      // To allow listening for the event globally, also dispatch it on the document body
+      document.body.dispatchEvent(event);
+      if (!event.defaultPrevented) {
         this.opened = false;
       }
     }
@@ -308,7 +315,12 @@ export const OverlayMixin = (superClass) =>
           setTimeout(() => {
             this._trapFocus();
 
-            this.dispatchEvent(new CustomEvent('vaadin-overlay-open', { bubbles: true, composed: true }));
+            // Dispatch the event on the overlay. Not using composed, as propagating the event through shadow roots
+            // could have side effects when nesting overlays
+            const event = new CustomEvent('vaadin-overlay-open', { bubbles: true });
+            this.dispatchEvent(event);
+            // To allow listening for the event globally, also dispatch it on the document body
+            document.body.dispatchEvent(event);
           });
         });
 
@@ -407,9 +419,7 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _attachOverlay() {
-      this._placeholder = document.createComment('vaadin-overlay-placeholder');
-      this.parentNode.insertBefore(this._placeholder, this);
-      document.body.appendChild(this);
+      this.showPopover();
     }
 
     /** @private */
@@ -448,8 +458,7 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _detachOverlay() {
-      this._placeholder.parentNode.insertBefore(this, this._placeholder);
-      this._placeholder.parentNode.removeChild(this._placeholder);
+      this.hidePopover();
     }
 
     /** @private */
@@ -493,7 +502,6 @@ export const OverlayMixin = (superClass) =>
       }
 
       const evt = new CustomEvent('vaadin-overlay-outside-click', {
-        bubbles: true,
         cancelable: true,
         detail: { sourceEvent: event },
       });
@@ -520,7 +528,6 @@ export const OverlayMixin = (superClass) =>
 
       if (event.key === 'Escape') {
         const evt = new CustomEvent('vaadin-overlay-escape-press', {
-          bubbles: true,
           cancelable: true,
           detail: { sourceEvent: event },
         });

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

@@ -11,17 +11,7 @@ const attachedInstances = new Set();
  * Returns all attached overlays in visual stacking order.
  * @private
  */
-const getAttachedInstances = () =>
-  [...attachedInstances].filter(
-    (el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'),
-  );
-
-/**
- * Returns all attached overlay instances excluding notification container,
- * which only needs to be in the stack for zIndex but not pointer-events.
- * @private
- */
-const getOverlayInstances = () => getAttachedInstances().filter((el) => el.$.overlay);
+const getAttachedInstances = () => [...attachedInstances].filter((el) => !el.hasAttribute('closing'));
 
 /**
  * Returns true if all the instances on top of the overlay are nested overlays.
@@ -49,38 +39,15 @@ const hasOnlyNestedOverlays = (overlay) => {
  * @protected
  */
 export const isLastOverlay = (overlay, filter = (_overlay) => true) => {
-  const filteredOverlays = getOverlayInstances().filter(filter);
+  const filteredOverlays = getAttachedInstances().filter(filter);
   return overlay === filteredOverlays.pop();
 };
 
-const overlayMap = new WeakMap();
-
-/**
- * Stores the reference to the nested overlay for given parent,
- * or removes it when the nested overlay is null.
- * @param {HTMLElement} parent
- * @param {HTMLElement} nested
- * @protected
- */
-export const setNestedOverlay = (parent, nested) => {
-  if (nested != null) {
-    overlayMap.set(parent, nested);
-  } else {
-    overlayMap.delete(parent);
-  }
-};
-
 /**
  * @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.
      *
@@ -105,18 +72,6 @@ export const OverlayStackMixin = (superClass) =>
      * Brings the overlay as visually the frontmost one.
      */
     bringToFront() {
-      // Update z-index to be the highest among all attached overlays
-      // TODO: Can be removed after switching all overlays to be based on native popover
-      let zIndex = '';
-      const frontmost = getAttachedInstances()
-        .filter((o) => o !== this)
-        .pop();
-      if (frontmost) {
-        const frontmostZIndex = parseFloat(getComputedStyle(frontmost).zIndex);
-        zIndex = frontmostZIndex + 1;
-      }
-      this.style.zIndex = zIndex;
-
       // If the overlay is the last one, or if all other overlays shown above
       // are nested overlays (e.g. date-picker inside a dialog), do not call
       // `showPopover()` unnecessarily to avoid scroll position being reset.
@@ -133,11 +88,6 @@ export const OverlayStackMixin = (superClass) =>
       // Update order of attached instances
       this._removeAttachedInstance();
       this._appendAttachedInstance();
-
-      // If there is a nested overlay, call `bringToFront()` for it as well.
-      if (overlayMap.has(this)) {
-        overlayMap.get(this).bringToFront();
-      }
     }
 
     /** @protected */
@@ -150,7 +100,7 @@ export const OverlayStackMixin = (superClass) =>
       }
 
       // Disable pointer events in other attached overlays
-      getOverlayInstances().forEach((el) => {
+      getAttachedInstances().forEach((el) => {
         if (el !== this) {
           el.$.overlay.style.pointerEvents = 'none';
         }
@@ -166,7 +116,7 @@ export const OverlayStackMixin = (superClass) =>
       }
 
       // Restore pointer events in the previous overlay(s)
-      const instances = getOverlayInstances();
+      const instances = getAttachedInstances();
 
       let el;
       // Use instances.pop() to ensure the reverse order