@vaadin/notification 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-notification.js",
   "module": "vaadin-notification.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -33,18 +34,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.2",
-    "@vaadin/vaadin-lumo-styles": "^22.0.2",
-    "@vaadin/vaadin-material-styles": "^22.0.2",
-    "@vaadin/vaadin-themable-mixin": "^22.0.2",
+    "@vaadin/component-base": "23.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/button": "^22.0.2",
-    "@vaadin/polymer-legacy-adapter": "^22.0.2",
+    "@vaadin/button": "23.0.0-alpha4",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

package/src/vaadin-notification.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { TemplateResult } from 'lit';

package/src/vaadin-notification.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -114,12 +114,14 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
   _openedChanged(opened) {
     if (opened) {
       document.body.appendChild(this);
+      document.addEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
       if (this._boundIosResizeListener) {
         this._detectIosNavbar();
         window.addEventListener('resize', this._boundIosResizeListener);
       }
     } else {
       document.body.removeChild(this);
+      document.removeEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
       if (this._boundIosResizeListener) {
         window.removeEventListener('resize', this._boundIosResizeListener);
       }
@@ -129,6 +131,7 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
   constructor() {
     super();
 
+    this._boundVaadinOverlayClose = this._onVaadinOverlayClose.bind(this);
     if (isIOS) {
       this._boundIosResizeListener = () => this._detectIosNavbar();
     }
@@ -146,6 +149,17 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
       this.style.bottom = '0';
     }
   }
+
+  /** @private */
+  _onVaadinOverlayClose(event) {
+    // Notifications are a separate overlay mechanism from vaadin-overlay, and
+    // interacting with them should not close modal overlays
+    const sourceEvent = event.detail.sourceEvent;
+    const isFromNotification = sourceEvent && sourceEvent.composedPath().indexOf(this) >= 0;
+    if (isFromNotification) {
+      event.preventDefault();
+    }
+  }
 }
 
 /**
@@ -321,7 +335,9 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    */
   requestContentUpdate() {
-    if (!this.renderer) return;
+    if (!this.renderer) {
+      return;
+    }
 
     this.renderer(this._card, this);
   }
@@ -490,11 +506,10 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       return Notification._createAndShowNotification((root) => {
         render(contents, root);
       }, options);
-    } else {
-      return Notification._createAndShowNotification((root) => {
-        root.innerText = contents;
-      }, options);
     }
+    return Notification._createAndShowNotification((root) => {
+      root.innerText = contents;
+    }, options);
   }
 
   /** @private */