@vaadin/overlay 24.4.0-rc2 → 24.5.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.4.0-rc2",
+  "version": "24.5.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-rc2",
-    "@vaadin/component-base": "24.4.0-rc2",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-rc2",
-    "@vaadin/vaadin-material-styles": "24.4.0-rc2",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-rc2",
+    "@vaadin/a11y-base": "24.5.0-alpha2",
+    "@vaadin/component-base": "24.5.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "ea3d99e8cf67a337e959d5cab849f80464c7c7e5"
+  "gitHead": "403f153bf4351f220cb6172485a0575ddf0d0fba"
 }

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 */

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;
+}