@vaadin/overlay 25.0.0-alpha16 → 25.0.0-alpha18

package/package.json

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

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

@@ -16,7 +16,7 @@ export const overlayStyles = css`
 
     /* Default position constraints. Themes can
           override this to adjust the gap between the overlay and the viewport. */
-    inset: 8px;
+    inset: var(--vaadin-overlay-viewport-inset, 8px);
     bottom: var(--vaadin-overlay-viewport-bottom);
 
     /* Override native [popover] user agent styles */
@@ -68,7 +68,7 @@ export const overlayStyles = css`
   }
 
   [part='backdrop'] {
-    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
+    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
     content: '';
     inset: 0;
     pointer-events: auto;

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

@@ -116,13 +116,6 @@ export const PositionMixin = (superClass) =>
       };
     }
 
-    static get observers() {
-      return [
-        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap, requiredVerticalSpace)',
-        '__overlayOpenedChanged(opened, positionTarget)',
-      ];
-    }
-
     constructor() {
       super();
 
@@ -145,6 +138,36 @@ export const PositionMixin = (superClass) =>
       this.__removeUpdatePositionEventListeners();
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('positionTarget')) {
+        const oldTarget = props.get('positionTarget');
+
+        // 1. When position target is removed, always reset position settings
+        // 2. When position target is set, reset if overlay was opened before
+        if ((!this.positionTarget && oldTarget) || (this.positionTarget && !oldTarget && !!this.__margins)) {
+          this.__resetPosition();
+        }
+      }
+
+      if (props.has('opened') || props.has('positionTarget')) {
+        this.__updatePositionSettings(this.opened, this.positionTarget);
+      }
+
+      const positionProps = [
+        'horizontalAlign',
+        'verticalAlign',
+        'noHorizontalOverlap',
+        'noVerticalOverlap',
+        'requiredVerticalSpace',
+      ];
+      if (positionProps.some((prop) => props.has(prop))) {
+        this._updatePosition();
+      }
+    }
+
     /** @private */
     __addUpdatePositionEventListeners() {
       window.visualViewport.addEventListener('resize', this._updatePosition);
@@ -181,7 +204,7 @@ export const PositionMixin = (superClass) =>
     }
 
     /** @private */
-    __overlayOpenedChanged(opened, positionTarget) {
+    __updatePositionSettings(opened, positionTarget) {
       this.__removeUpdatePositionEventListeners();
 
       if (positionTarget) {
@@ -210,20 +233,35 @@ export const PositionMixin = (superClass) =>
       }
     }
 
-    __positionSettingsChanged() {
-      this._updatePosition();
-    }
-
     /** @private */
     __onScroll(e) {
       // If the scroll event occurred inside the overlay, ignore it.
-      if (e.target instanceof Node && this.contains(e.target)) {
+      if (e.target instanceof Node && this._deepContains(e.target)) {
         return;
       }
 
       this._updatePosition();
     }
 
+    /** @private */
+    __resetPosition() {
+      this.__margins = null;
+
+      Object.assign(this.style, {
+        justifyContent: '',
+        alignItems: '',
+        top: '',
+        bottom: '',
+        left: '',
+        right: '',
+      });
+
+      setOverlayStateAttribute(this, 'bottom-aligned', false);
+      setOverlayStateAttribute(this, 'top-aligned', false);
+      setOverlayStateAttribute(this, 'end-aligned', false);
+      setOverlayStateAttribute(this, 'start-aligned', false);
+    }
+
     _updatePosition() {
       if (!this.positionTarget || !this.opened || !this.__margins) {
         return;

package/src/vaadin-overlay-utils.js

@@ -16,10 +16,12 @@
  */
 export function observeMove(element, callback) {
   let io = null;
+  let timeout;
 
   const root = document.documentElement;
 
   function cleanup() {
+    timeout && clearTimeout(timeout);
     io && io.disconnect();
     io = null;
   }
@@ -52,27 +54,22 @@ export function observeMove(element, callback) {
     let isFirstUpdate = true;
 
     function handleObserve(entries) {
-      let ratio = entries[0].intersectionRatio;
+      const ratio = entries[0].intersectionRatio;
 
       if (ratio !== threshold) {
         if (!isFirstUpdate) {
           return refresh();
         }
 
-        // It's possible for the watched element to not be at perfect 1.0 visibility when we create
-        // the IntersectionObserver. This has a couple of causes:
-        //   - elements being on partial pixels
-        //   - elements being hidden offscreen (e.g., <html> has `overflow: hidden`)
-        //   - delays: if your DOM change occurs due to e.g., page resize, you can see elements
-        //     behind their actual position
-        //
-        // In all of these cases, refresh but with this lower ratio of threshold. When the element
-        // moves beneath _that_ new value, the user will get notified.
-        if (ratio === 0.0) {
-          ratio = 0.0000001; // Just needs to be non-zero
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeout = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
         }
-
-        refresh(false, ratio);
       }
 
       isFirstUpdate = false;

package/src/vaadin-overlay.d.ts

@@ -98,10 +98,10 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  *
  * The following state attributes are available for styling:
  *
- * Attribute | Description | Part
- * ---|---|---
- * `opening` | Applied just after the overlay is attached to the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
- * `closing` | Applied just before the overlay is detached from the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
+ * Attribute | Description
+ * ----------|------------
+ * `opening` | Applied just after the overlay is opened. You can apply a CSS animation for this state.
+ * `closing` | Applied just before the overlay is closed. You can apply a CSS animation for this state.
  *
  * The following custom CSS properties are available for styling:
  *

package/src/vaadin-overlay.js

@@ -50,10 +50,10 @@ import { OverlayMixin } from './vaadin-overlay-mixin.js';
  *
  * The following state attributes are available for styling:
  *
- * Attribute | Description | Part
- * ---|---|---
- * `opening` | Applied just after the overlay is attached to the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
- * `closing` | Applied just before the overlay is detached from the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
+ * Attribute | Description
+ * ----------|------------
+ * `opening` | Applied just after the overlay is opened. You can apply a CSS animation for this state.
+ * `closing` | Applied just before the overlay is closed. You can apply a CSS animation for this state.
  *
  * The following custom CSS properties are available for styling:
  *