@vaadin/overlay 25.0.0-alpha14 → 25.0.0-alpha16

package/package.json

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

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

@@ -3,7 +3,6 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * 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, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
@@ -48,7 +47,6 @@ export const OverlayFocusMixin = (superClass) =>
     constructor() {
       super();
 
-      this.__ariaModalController = new AriaModalController(this, () => this._modalRoot);
       this.__focusTrapController = new FocusTrapController(this);
       this.__focusRestorationController = new FocusRestorationController();
     }
@@ -66,18 +64,17 @@ export const OverlayFocusMixin = (superClass) =>
     ready() {
       super.ready();
 
-      this.addController(this.__ariaModalController);
       this.addController(this.__focusTrapController);
       this.addController(this.__focusRestorationController);
     }
 
     /**
-     * Override to specify another element used as a modality root,
-     * e.g. the overlay's owner element, rather than overlay itself.
+     * Override to specify another element used as a focus trap root,
+     * e.g. the overlay's owner element, rather than overlay part.
      * @protected
      */
-    get _modalRoot() {
-      return this;
+    get _focusTrapRoot() {
+      return this.$.overlay;
     }
 
     /**
@@ -87,7 +84,6 @@ export const OverlayFocusMixin = (superClass) =>
      */
     _resetFocus() {
       if (this.focusTrap) {
-        this.__ariaModalController.close();
         this.__focusTrapController.releaseFocus();
       }
 
@@ -115,8 +111,7 @@ export const OverlayFocusMixin = (superClass) =>
      */
     _trapFocus() {
       if (this.focusTrap) {
-        this.__ariaModalController.showModal();
-        this.__focusTrapController.trapFocus(this.$.overlay);
+        this.__focusTrapController.trapFocus(this._focusTrapRoot);
       }
     }
 

package/src/vaadin-overlay-mixin.js

@@ -156,6 +156,11 @@ export const OverlayMixin = (superClass) =>
     disconnectedCallback() {
       super.disconnectedCallback();
 
+      if (this.__scheduledOpen) {
+        cancelAnimationFrame(this.__scheduledOpen);
+        this.__scheduledOpen = null;
+      }
+
       /* c8 ignore next 3 */
       if (this._boundIosResizeListener) {
         window.removeEventListener('resize', this._boundIosResizeListener);
@@ -183,7 +188,7 @@ export const OverlayMixin = (superClass) =>
       const event = new CustomEvent('vaadin-overlay-close', {
         bubbles: true,
         cancelable: true,
-        detail: { sourceEvent },
+        detail: { overlay: this, sourceEvent },
       });
       this.dispatchEvent(event);
       // To allow listening for the event globally, also dispatch it on the document body
@@ -237,8 +242,25 @@ export const OverlayMixin = (superClass) =>
       }
     }
 
+    /**
+     * Whether to add global listeners for closing on outside click.
+     * By default, listeners are not added for a modeless overlay.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    _shouldAddGlobalListeners() {
+      return !this.modeless;
+    }
+
     /** @private */
     _addGlobalListeners() {
+      if (this.__hasGlobalListeners) {
+        return;
+      }
+
+      this.__hasGlobalListeners = true;
+
       document.addEventListener('mousedown', this._boundMouseDownListener);
       document.addEventListener('mouseup', this._boundMouseUpListener);
       // Firefox leaks click to document on contextmenu even if prevented
@@ -248,6 +270,12 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _removeGlobalListeners() {
+      if (!this.__hasGlobalListeners) {
+        return;
+      }
+
+      this.__hasGlobalListeners = false;
+
       document.removeEventListener('mousedown', this._boundMouseDownListener);
       document.removeEventListener('mouseup', this._boundMouseUpListener);
       document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
@@ -281,13 +309,20 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _modelessChanged(modeless) {
+      if (this.opened) {
+        // Add / remove listeners if modeless is changed while opened
+        if (this._shouldAddGlobalListeners()) {
+          this._addGlobalListeners();
+        } else {
+          this._removeGlobalListeners();
+        }
+      }
+
       if (!modeless) {
         if (this.opened) {
-          this._addGlobalListeners();
           this._enterModalState();
         }
       } else {
-        this._removeGlobalListeners();
         this._exitModalState();
       }
       setOverlayStateAttribute(this, 'modeless', modeless);
@@ -317,7 +352,7 @@ export const OverlayMixin = (superClass) =>
 
             // 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 });
+            const event = new CustomEvent('vaadin-overlay-open', { detail: { overlay: this }, bubbles: true });
             this.dispatchEvent(event);
             // To allow listening for the event globally, also dispatch it on the document body
             document.body.dispatchEvent(event);
@@ -326,7 +361,7 @@ export const OverlayMixin = (superClass) =>
 
         document.addEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._addGlobalListeners();
         }
       } else if (wasOpened) {
@@ -341,7 +376,7 @@ export const OverlayMixin = (superClass) =>
 
         document.removeEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._removeGlobalListeners();
         }
       }
@@ -522,7 +557,7 @@ export const OverlayMixin = (superClass) =>
       }
 
       // Only close modeless overlay on Esc press when it contains focus
-      if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
+      if (!this._shouldAddGlobalListeners() && !event.composedPath().includes(this._focusTrapRoot)) {
         return;
       }
 

package/src/vaadin-overlay.d.ts

@@ -17,13 +17,13 @@ export type OverlayOpenedChangedEvent = CustomEvent<{ value: boolean }>;
 /**
  * Fired after the overlay is opened.
  */
-export type OverlayOpenEvent = CustomEvent;
+export type OverlayOpenEvent = CustomEvent<{ overlay: HTMLElement }>;
 
 /**
  * Fired when the opened overlay is about to be closed.
  * Calling `preventDefault()` on the event cancels the closing.
  */
-export type OverlayCloseEvent = CustomEvent;
+export type OverlayCloseEvent = CustomEvent<{ overlay: HTMLElement }>;
 
 /**
  * Fired after the overlay is closed.