@vaadin/overlay 25.0.0-alpha14 → 25.0.0-alpha15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.0.0-alpha14",
+  "version": "25.0.0-alpha15",
   "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-alpha15",
+    "@vaadin/component-base": "25.0.0-alpha15",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha15",
     "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-alpha15",
+    "@vaadin/test-runner-commands": "25.0.0-alpha15",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha14",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha15",
     "sinon": "^18.0.0"
   },
-  "gitHead": "8ebeeeca4b5b6564eff954d6582d0d6760464e51"
+  "gitHead": "1ad98437e7600769bf66f870929feefbeef16edf"
 }

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

@@ -80,6 +80,24 @@ export const OverlayFocusMixin = (superClass) =>
       return this;
     }
 
+    /**
+     * Override to specify another element used as a focus trap root,
+     * e.g. the overlay's owner element, rather than overlay part.
+     * @protected
+     */
+    get _focusTrapRoot() {
+      return this.$.overlay;
+    }
+
+    /**
+     * Override not use a controller for setting `aria-hidden` on
+     * elements outside the overlay, e.g. when using `aria-modal`.
+     * @protected
+     */
+    _useAriaHidden() {
+      return true;
+    }
+
     /**
      * Release focus and restore focus after the overlay is closed.
      *
@@ -87,7 +105,9 @@ export const OverlayFocusMixin = (superClass) =>
      */
     _resetFocus() {
       if (this.focusTrap) {
-        this.__ariaModalController.close();
+        if (this._useAriaHidden) {
+          this.__ariaModalController.close();
+        }
         this.__focusTrapController.releaseFocus();
       }
 
@@ -115,8 +135,10 @@ export const OverlayFocusMixin = (superClass) =>
      */
     _trapFocus() {
       if (this.focusTrap) {
-        this.__ariaModalController.showModal();
-        this.__focusTrapController.trapFocus(this.$.overlay);
+        if (this._useAriaHidden) {
+          this.__ariaModalController.showModal();
+        }
+        this.__focusTrapController.trapFocus(this._focusTrapRoot);
       }
     }
 

package/src/vaadin-overlay-mixin.js

@@ -183,7 +183,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 +237,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 +265,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 +304,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 +347,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 +356,7 @@ export const OverlayMixin = (superClass) =>
 
         document.addEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._addGlobalListeners();
         }
       } else if (wasOpened) {
@@ -341,7 +371,7 @@ export const OverlayMixin = (superClass) =>
 
         document.removeEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._removeGlobalListeners();
         }
       }
@@ -522,7 +552,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.$.overlay)) {
         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.