@vaadin/overlay 25.3.0-alpha6 → 25.3.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.3.0-alpha6",
+  "version": "25.3.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha6",
-    "@vaadin/component-base": "25.3.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha6",
+    "@vaadin/a11y-base": "25.3.0-alpha8",
+    "@vaadin/component-base": "25.3.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha6",
-    "@vaadin/chai-plugins": "25.3.0-alpha6",
-    "@vaadin/test-runner-commands": "25.3.0-alpha6",
+    "@vaadin/aura": "25.3.0-alpha8",
+    "@vaadin/chai-plugins": "25.3.0-alpha8",
+    "@vaadin/test-runner-commands": "25.3.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "92c124fb9cff367bc07e734d8e65707facd0bd43"
+  "gitHead": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
 }

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

@@ -40,9 +40,10 @@ export declare class OverlayFocusMixinClass {
   protected _saveFocus(): void;
 
   /**
-   * Trap focus within the overlay after opening has completed.
+   * Sets up focus after the overlay opening has completed: traps focus
+   * within the overlay if `focusTrap` is enabled.
    */
-  protected _trapFocus(): void;
+  protected _initFocus(): void;
 
   /**
    * Returns true if focus is still inside the overlay or on the body element,

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

@@ -66,11 +66,11 @@ export const OverlayFocusMixin = (superClass) =>
     }
 
     /**
-     * Override to specify another element used as a focus trap root,
+     * Override to specify another element used as a focus root,
      * e.g. the overlay's owner element, rather than overlay part.
      * @protected
      */
-    get _focusTrapRoot() {
+    get _focusRoot() {
       return this.$.overlay;
     }
 
@@ -103,13 +103,14 @@ export const OverlayFocusMixin = (superClass) =>
     }
 
     /**
-     * Trap focus within the overlay after opening has completed.
+     * Sets up focus after the overlay opening has completed: traps focus
+     * within the overlay if `focusTrap` is enabled.
      *
      * @protected
      */
-    _trapFocus() {
-      if (this.focusTrap && !isElementHidden(this._focusTrapRoot)) {
-        this.__focusTrapController.trapFocus(this._focusTrapRoot);
+    _initFocus() {
+      if (this.focusTrap && !isElementHidden(this._focusRoot)) {
+        this.__focusTrapController.trapFocus(this._focusRoot);
       }
     }
 

package/src/vaadin-overlay-mixin.js

@@ -359,7 +359,7 @@ export const OverlayMixin = (superClass) =>
 
         this.__scheduledOpen = requestAnimationFrame(() => {
           setTimeout(() => {
-            this._trapFocus();
+            this._initFocus();
 
             // Dispatch the event on the overlay. Not using composed, as propagating the event through shadow roots
             // could have side effects when nesting overlays
@@ -574,7 +574,7 @@ export const OverlayMixin = (superClass) =>
       }
 
       // Only close modeless overlay on Esc press when it contains focus
-      if (!this._shouldAddGlobalListeners() && !event.composedPath().includes(this._focusTrapRoot)) {
+      if (!this._shouldAddGlobalListeners() && !event.composedPath().includes(this._focusRoot)) {
         return;
       }
 

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

@@ -116,6 +116,11 @@ export const PositionMixin = (superClass) =>
     constructor() {
       super();
 
+      /**
+       * Used for mixin detection because `instanceof` does not work with mixins.
+       */
+      this._hasOverlayPositionMixin = true;
+
       this.__onScroll = this.__onScroll.bind(this);
       this._updatePosition = this._updatePosition.bind(this);
     }

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

@@ -14,23 +14,27 @@ const attachedInstances = new Set();
 const getAttachedInstances = () => [...attachedInstances].filter((el) => !el.hasAttribute('closing'));
 
 /**
- * Returns true if all the instances on top of the overlay are nested overlays.
- * @private
+ * Returns overlays shown on top of the given overlay.
+ * @param {HTMLElement} overlay
+ * @return {HTMLElement[]}
+ * @protected
  */
-export const hasOnlyNestedOverlays = (overlay) => {
+export const getOverlaysOnTop = (overlay) => {
   const instances = getAttachedInstances();
-  const next = instances[instances.indexOf(overlay) + 1];
-  if (!next) {
-    return true;
-  }
-
-  if (!overlay._deepContains(next)) {
-    return false;
-  }
-
-  return hasOnlyNestedOverlays(next);
+  const index = instances.indexOf(overlay);
+  // The overlay is not in the visible stack (closing), so nothing is "on top" of it.
+  return index === -1 ? [] : instances.slice(index + 1);
 };
 
+/**
+ * Returns true if the given overlay is a child of a parent overlay.
+ * @param {HTMLElement} parent
+ * @param {HTMLElement} overlay
+ * @return {boolean}
+ * @protected
+ */
+export const isNestedOverlay = (parent, overlay) => parent._deepContains(overlay);
+
 /**
  * Returns true if the overlay is the last one in the opened overlays stack.
  * @param {HTMLElement} overlay
@@ -69,22 +73,28 @@ export const OverlayStackMixin = (superClass) =>
      * Brings the overlay as visually the frontmost one.
      */
     bringToFront() {
-      // 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.
-      if (isLastOverlay(this) || hasOnlyNestedOverlays(this)) {
+      if (isLastOverlay(this)) {
         return;
       }
 
-      // Update stacking order of native popover-based overlays
-      if (this.matches(':popover-open')) {
-        this.hidePopover();
-        this.showPopover();
+      const overlays = getOverlaysOnTop(this);
+      // Nested positioned overlays anchored must stay visually on top.
+      const nestedOverlays = overlays.filter((el) => el._hasOverlayPositionMixin && isNestedOverlay(this, el));
+
+      // If the only overlays on top are nested positioned overlays, this overlay is already
+      // effectively frontmost. Skip to avoid resetting scroll position via `showPopover()`.
+      if (nestedOverlays.length === overlays.length) {
+        return;
       }
 
-      // Update order of attached instances
-      this._removeAttachedInstance();
-      this._appendAttachedInstance();
+      [this, ...nestedOverlays].forEach((overlay) => {
+        if (overlay.matches(':popover-open')) {
+          overlay.hidePopover();
+          overlay.showPopover();
+        }
+        overlay._removeAttachedInstance();
+        overlay._appendAttachedInstance();
+      });
     }
 
     /** @protected */