@vaadin/overlay 25.3.0-alpha9 → 25.3.0-beta1

package/custom-elements.json

@@ -639,7 +639,7 @@
         },
         {
           "kind": "function",
-          "name": "shouldAnimate",
+          "name": "getStateAnimations",
           "parameters": [
             {
               "name": "element",
@@ -648,10 +648,10 @@
               }
             }
           ],
-          "description": "Detect whether an animation runs on the given element, so that its end can be\nawaited before the element is hidden or removed. An element that is not rendered,\nhas no animation name, or has a zero duration does not fire `animationend`.",
+          "description": "Collect the animations that report the state of the given element, so that their end can be\nawaited before the element is hidden or removed. The animations are read instead of the\ncomputed style, so that the decision to wait cannot disagree with what the browser actually\ncreated: a keyframes rule that does not exist and an element that is not rendered both give\nan empty list.\n\nOnly CSS animations count, as the transitions and the script animations that `getAnimations()`\nalso returns do not report the state. Animations of any content are already left out, as\n`getAnimations()` only descends into the subtree when asked to. Animations that take no time\nare dropped as well, so that a delay on its own does not hold the state.",
           "return": {
             "type": {
-              "text": "boolean"
+              "text": "!Array<!Animation>"
             }
           }
         },
@@ -695,9 +695,9 @@
         },
         {
           "kind": "js",
-          "name": "shouldAnimate",
+          "name": "getStateAnimations",
           "declaration": {
-            "name": "shouldAnimate",
+            "name": "getStateAnimations",
             "module": "src/vaadin-overlay-utils.js"
           }
         },
@@ -1020,6 +1020,7 @@
           },
           "tagName": "vaadin-overlay",
           "customElement": true,
+          "deprecated": "`<vaadin-overlay>` is deprecated and will be removed in Vaadin 26. Consider using `OverlayMixin` and `PositionMixin` instead.",
           "attributes": [
             {
               "name": "autofocus",

package/package.json

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

package/src/styles/vaadin-overlay-base-styles.js

@@ -56,6 +56,11 @@ const overlayBase = css`
     display: none !important;
   }
 
+  :host([suppressed]) [part='overlay'],
+  :host([suppressed]) ::slotted(*) {
+    pointer-events: none !important;
+  }
+
   [part='overlay'] {
     color: var(--vaadin-overlay-text-color, var(--vaadin-text-color));
     background: var(--vaadin-overlay-background, var(--vaadin-background-color));

package/src/vaadin-overlay-mixin.js

@@ -6,7 +6,7 @@
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
-import { setOverlayStateAttribute, shouldAnimate } from './vaadin-overlay-utils.js';
+import { getStateAnimations, setOverlayStateAttribute } from './vaadin-overlay-utils.js';
 
 export const OverlayMixin = (superClass) =>
   class OverlayMixin extends OverlayFocusMixin(OverlayStackMixin(superClass)) {
@@ -132,11 +132,6 @@ export const OverlayMixin = (superClass) =>
       if (this.$.backdrop) {
         this.$.backdrop.addEventListener('click', () => {});
       }
-
-      this.addEventListener('animationcancel', () => {
-        this._flushAnimation('opening');
-        this._flushAnimation('closing');
-      });
     }
 
     /** @protected */
@@ -393,30 +388,35 @@ export const OverlayMixin = (superClass) =>
     }
 
     /**
-     * @return {boolean}
-     * @private
-     */
-    _shouldAnimate() {
-      return shouldAnimate(this);
-    }
-
-    /**
+     * Run the callback once every animation reporting the state has ended, or right away when
+     * there is none.
+     *
      * @param {string} type
      * @param {Function} callback
      * @private
      */
     _enqueueAnimation(type, callback) {
+      const animations = getStateAnimations(this);
+      if (animations.length === 0) {
+        callback();
+        return;
+      }
+
       const handler = `__${type}Handler`;
-      const listener = (event) => {
-        if (event && event.target !== this) {
+      const finish = () => {
+        // The phase may already have been finished by _flushAnimation(), or superseded by a
+        // later one of the same type, in which case this callback no longer applies
+        if (this[handler] !== finish) {
           return;
         }
-        callback();
-        this.removeEventListener('animationend', listener);
+        // Cleared before the callback, so that a listener reopening the overlay synchronously
+        // installs its own handler rather than having it deleted afterwards
         delete this[handler];
+        callback();
       };
-      this[handler] = listener;
-      this.addEventListener('animationend', listener);
+      this[handler] = finish;
+      // A cancelled animation rejects, which ends the phase just as finishing does
+      Promise.all(animations.map((animation) => animation.finished)).then(finish, finish);
     }
 
     /**
@@ -437,19 +437,14 @@ export const OverlayMixin = (superClass) =>
       }
       this._attachOverlay();
       this._appendAttachedInstance();
-      this.bringToFront();
       if (!this.modeless) {
         this._enterModalState();
       }
       setOverlayStateAttribute(this, 'opening', true);
 
-      if (this._shouldAnimate()) {
-        this._enqueueAnimation('opening', () => {
-          this._finishOpening();
-        });
-      } else {
+      this._enqueueAnimation('opening', () => {
         this._finishOpening();
-      }
+      });
     }
 
     /** @private */
@@ -468,7 +463,7 @@ export const OverlayMixin = (superClass) =>
     _finishClosing() {
       this._detachOverlay();
       this._removeAttachedInstance();
-      this.$.overlay.style.removeProperty('pointer-events');
+      this.toggleAttribute('suppressed', false);
       setOverlayStateAttribute(this, 'closing', false);
       this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
     }
@@ -483,13 +478,9 @@ export const OverlayMixin = (superClass) =>
         setOverlayStateAttribute(this, 'closing', true);
         this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
 
-        if (this._shouldAnimate()) {
-          this._enqueueAnimation('closing', () => {
-            this._finishClosing();
-          });
-        } else {
+        this._enqueueAnimation('closing', () => {
           this._finishClosing();
-        }
+        });
       }
     }
 
@@ -546,6 +537,11 @@ export const OverlayMixin = (superClass) =>
 
       if (this.opened && !evt.defaultPrevented) {
         this.close(event);
+
+        // Only for modal overlays which make underlying content non-interactive.
+        if (!this.opened && !this.modeless) {
+          event.preventDefault();
+        }
       }
     }
 

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

@@ -106,10 +106,10 @@ export const OverlayStackMixin = (superClass) =>
         document.body.style.pointerEvents = 'none';
       }
 
-      // Disable pointer events in other attached overlays
+      // Suppress pointer events in other attached overlays
       getAttachedInstances().forEach((el) => {
         if (el !== this) {
-          el.$.overlay.style.pointerEvents = 'none';
+          el.toggleAttribute('suppressed', true);
         }
       });
     }
@@ -122,7 +122,7 @@ export const OverlayStackMixin = (superClass) =>
         delete this._previousDocumentPointerEvents;
       }
 
-      // Restore pointer events in the previous overlay(s)
+      // Stop suppressing pointer events in the previous overlay(s)
       const instances = getAttachedInstances();
 
       let el;
@@ -132,7 +132,7 @@ export const OverlayStackMixin = (superClass) =>
           // Skip the current instance
           continue;
         }
-        el.$.overlay.style.removeProperty('pointer-events');
+        el.toggleAttribute('suppressed', false);
         if (!el.modeless) {
           // Stop after the last modal
           break;

package/src/vaadin-overlay-utils.d.ts

@@ -13,11 +13,18 @@
 export function observeMove(element: HTMLElement, callback: () => void): () => void;
 
 /**
- * Detect whether an animation runs on the given element, so that its end can be
- * awaited before the element is hidden or removed. An element that is not rendered,
- * has no animation name, or has a zero duration does not fire `animationend`.
+ * Collect the animations that report the state of the given element, so that their end can be
+ * awaited before the element is hidden or removed. The animations are read instead of the
+ * computed style, so that the decision to wait cannot disagree with what the browser actually
+ * created: a keyframes rule that does not exist and an element that is not rendered both give
+ * an empty list.
+ *
+ * Only CSS animations count, as the transitions and the script animations that `getAnimations()`
+ * also returns do not report the state. Animations of any content are already left out, as
+ * `getAnimations()` only descends into the subtree when asked to. Animations that take no time
+ * are dropped as well, so that a delay on its own does not hold the state.
  */
-export function shouldAnimate(element: HTMLElement): boolean;
+export function getStateAnimations(element: HTMLElement): Animation[];
 
 /**
  * Toggle the state attribute on the overlay element and also its owner element. This allows targeting state attributes

package/src/vaadin-overlay-utils.js

@@ -86,21 +86,26 @@ export function observeMove(element, callback) {
 }
 
 /**
- * Detect whether an animation runs on the given element, so that its end can be
- * awaited before the element is hidden or removed. An element that is not rendered,
- * has no animation name, or has a zero duration does not fire `animationend`.
+ * Collect the animations that report the state of the given element, so that their end can be
+ * awaited before the element is hidden or removed. The animations are read instead of the
+ * computed style, so that the decision to wait cannot disagree with what the browser actually
+ * created: a keyframes rule that does not exist and an element that is not rendered both give
+ * an empty list.
+ *
+ * Only CSS animations count, as the transitions and the script animations that `getAnimations()`
+ * also returns do not report the state. Animations of any content are already left out, as
+ * `getAnimations()` only descends into the subtree when asked to. Animations that take no time
+ * are dropped as well, so that a delay on its own does not hold the state.
  *
  * @param {HTMLElement} element
- * @return {boolean}
+ * @return {!Array<!Animation>}
  */
-export function shouldAnimate(element) {
-  const style = getComputedStyle(element);
-  const name = style.getPropertyValue('animation-name');
-  const hasDuration = style
-    .getPropertyValue('animation-duration')
-    .split(',')
-    .some((duration) => parseFloat(duration) > 0);
-  return style.getPropertyValue('display') !== 'none' && name && name !== 'none' && hasDuration;
+export function getStateAnimations(element) {
+  return element
+    .getAnimations()
+    .filter(
+      (animation) => animation instanceof CSSAnimation && animation.effect.getComputedTiming().activeDuration > 0,
+    );
 }
 
 /**

package/src/vaadin-overlay.d.ts

@@ -118,6 +118,8 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  * @fires {CustomEvent} vaadin-overlay-closed - Fired after the overlay is closed.
  * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay is closed on outside click. Calling `preventDefault()` on the event cancels the closing.
  * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay is closed on Escape key press. Calling `preventDefault()` on the event cancels the closing.
+ * @deprecated `<vaadin-overlay>` is deprecated and will be removed in Vaadin 26.
+ * Consider using `OverlayMixin` and `PositionMixin` instead.
  */
 declare class Overlay extends OverlayMixin(ThemableMixin(DirMixin(HTMLElement))) {
   addEventListener<K extends keyof OverlayEventMap>(

package/src/vaadin-overlay.js

@@ -7,6 +7,7 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { overlayStyles } from './styles/vaadin-overlay-base-styles.js';
@@ -73,6 +74,8 @@ import { OverlayMixin } from './vaadin-overlay-mixin.js';
  *
  * @customElement vaadin-overlay
  * @extends HTMLElement
+ * @deprecated `<vaadin-overlay>` is deprecated and will be removed in Vaadin 26.
+ * Consider using `OverlayMixin` and `PositionMixin` instead.
  */
 class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
@@ -94,6 +97,15 @@ class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjec
       </div>
     `;
   }
+
+  /** @protected */
+  firstUpdated() {
+    super.firstUpdated();
+
+    issueWarning(
+      '`<vaadin-overlay>` is deprecated and will be removed in Vaadin 26. Consider using `OverlayMixin` and `PositionMixin` instead.',
+    );
+  }
 }
 
 defineCustomElement(Overlay);