@vaadin/overlay 24.4.6 → 24.5.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.4.6",
-    "@vaadin/component-base": "~24.4.6",
-    "@vaadin/vaadin-lumo-styles": "~24.4.6",
-    "@vaadin/vaadin-material-styles": "~24.4.6",
-    "@vaadin/vaadin-themable-mixin": "~24.4.6",
+    "@vaadin/a11y-base": "24.5.0-alpha10",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
-  "gitHead": "46d3cdb72eb99d544c7bb86c3de95043b9e5857f"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getAncestorRootNodes } from '@vaadin/component-base/src/dom-utils.js';
+import { observeMove } from './vaadin-overlay-utils.js';
 
 const PROP_NAMES_VERTICAL = {
   start: 'top',
@@ -153,6 +154,12 @@ export const PositionMixin = (superClass) =>
       this.__positionTargetAncestorRootNodes.forEach((node) => {
         node.addEventListener('scroll', this.__onScroll, true);
       });
+
+      if (this.positionTarget) {
+        this.__observePositionTargetMove = observeMove(this.positionTarget, () => {
+          this._updatePosition();
+        });
+      }
     }
 
     /** @private */
@@ -166,6 +173,11 @@ export const PositionMixin = (superClass) =>
         });
         this.__positionTargetAncestorRootNodes = null;
       }
+
+      if (this.__observePositionTargetMove) {
+        this.__observePositionTargetMove();
+        this.__observePositionTargetMove = null;
+      }
     }
 
     /** @private */
@@ -191,7 +203,6 @@ export const PositionMixin = (superClass) =>
             this.__margins[propName] = parseInt(computedStyle[propName], 10);
           });
         }
-        this.setAttribute('dir', computedStyle.direction);
 
         this._updatePosition();
         // Schedule another position update (to cover virtual keyboard opening for example)
@@ -308,7 +319,7 @@ export const PositionMixin = (superClass) =>
       );
     }
 
-    // eslint-disable-next-line max-params
+    // eslint-disable-next-line @typescript-eslint/max-params
     __shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) {
       const spaceForStartAlignment =
         viewportSize - targetRect[noOverlap ? propNames.end : propNames.start] - margins[propNames.end];
@@ -365,7 +376,7 @@ export const PositionMixin = (superClass) =>
      * Returns an object with CSS position properties to set,
      * e.g. { top: "100px" }
      */
-    // eslint-disable-next-line max-params
+    // eslint-disable-next-line @typescript-eslint/max-params
     __calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) {
       const cssPropNameToSet = shouldAlignStart ? propNames.start : propNames.end;
       const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;

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

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Observe moving an element around on a page.
+ *
+ * Based on the idea from https://samthor.au/2021/observing-dom/ as implemented in Floating UI
+ * https://github.com/floating-ui/floating-ui/blob/58ed169/packages/dom/src/autoUpdate.ts#L45
+ */
+export function observeMove(element: HTMLElement, callback: () => void): () => void;

package/src/vaadin-overlay-utils.js

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright (c) 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Observe moving an element around on a page.
+ *
+ * Based on the idea from https://samthor.au/2021/observing-dom/ as implemented in Floating UI
+ * https://github.com/floating-ui/floating-ui/blob/58ed169/packages/dom/src/autoUpdate.ts#L45
+ *
+ * @param {HTMLElement} element
+ * @param {Function} callback
+ * @return {Function}
+ */
+export function observeMove(element, callback) {
+  let io = null;
+
+  const root = document.documentElement;
+
+  function cleanup() {
+    io && io.disconnect();
+    io = null;
+  }
+
+  function refresh(skip = false, threshold = 1) {
+    cleanup();
+
+    const { left, top, width, height } = element.getBoundingClientRect();
+
+    if (!skip) {
+      callback();
+    }
+
+    if (!width || !height) {
+      return;
+    }
+
+    const insetTop = Math.floor(top);
+    const insetRight = Math.floor(root.clientWidth - (left + width));
+    const insetBottom = Math.floor(root.clientHeight - (top + height));
+    const insetLeft = Math.floor(left);
+
+    const rootMargin = `${-insetTop}px ${-insetRight}px ${-insetBottom}px ${-insetLeft}px`;
+
+    const options = {
+      rootMargin,
+      threshold: Math.max(0, Math.min(1, threshold)) || 1,
+    };
+
+    let isFirstUpdate = true;
+
+    function handleObserve(entries) {
+      let 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
+        }
+
+        refresh(false, ratio);
+      }
+
+      isFirstUpdate = false;
+    }
+
+    io = new IntersectionObserver(handleObserve, options);
+
+    io.observe(element);
+  }
+
+  refresh(true);
+
+  return cleanup;
+}