@vaadin/overlay 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

package/README.md

@@ -3,7 +3,6 @@
 <vaadin-overlay> is a Web Component meant for internal use in Vaadin components.
 
 [![npm version](https://badgen.net/npm/v/@vaadin/overlay)](https://www.npmjs.com/package/@vaadin/overlay)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.4.0-dev.b3e1d14600",
+  "version": "24.5.0-alpha1",
   "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-dev.b3e1d14600",
-    "@vaadin/component-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.b3e1d14600",
+    "@vaadin/a11y-base": "24.5.0-alpha1",
+    "@vaadin/component-base": "24.5.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { LitElement } from 'lit';
@@ -14,7 +14,7 @@ import { OverlayMixin } from './vaadin-overlay-mixin.js';
  *
  * ## Disclaimer
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
  * Feel free to try this code in your apps as per Apache 2.0 license.
  */

package/src/vaadin-lit-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
@@ -16,7 +16,7 @@ import { overlayStyles } from './vaadin-overlay-styles.js';
  *
  * ## Disclaimer
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
  * Feel free to try this code in your apps as per Apache 2.0 license.
  */

package/src/vaadin-overlay-focus-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-overlay-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
@@ -220,12 +220,13 @@ export const OverlayMixin = (superClass) =>
       this._oldOwner = owner;
 
       const rendererChanged = this._oldRenderer !== renderer;
+      const hasOldRenderer = this._oldRenderer !== undefined;
       this._oldRenderer = renderer;
 
       const openedChanged = this._oldOpened !== opened;
       this._oldOpened = opened;
 
-      if (rendererChanged) {
+      if (rendererChanged && hasOldRenderer) {
         this.innerHTML = '';
         // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
         // When clearing the rendered content, this part needs to be manually disposed of.

package/src/vaadin-overlay-position-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,9 +1,10 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * 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',
@@ -146,17 +147,25 @@ export const PositionMixin = (superClass) =>
 
     /** @private */
     __addUpdatePositionEventListeners() {
-      window.addEventListener('resize', this._updatePosition);
+      window.visualViewport.addEventListener('resize', this._updatePosition);
+      window.visualViewport.addEventListener('scroll', this.__onScroll, true);
 
       this.__positionTargetAncestorRootNodes = getAncestorRootNodes(this.positionTarget);
       this.__positionTargetAncestorRootNodes.forEach((node) => {
         node.addEventListener('scroll', this.__onScroll, true);
       });
+
+      if (this.positionTarget) {
+        this.__observePositionTargetMove = observeMove(this.positionTarget, () => {
+          this._updatePosition();
+        });
+      }
     }
 
     /** @private */
     __removeUpdatePositionEventListeners() {
-      window.removeEventListener('resize', this._updatePosition);
+      window.visualViewport.removeEventListener('resize', this._updatePosition);
+      window.visualViewport.removeEventListener('scroll', this.__onScroll, true);
 
       if (this.__positionTargetAncestorRootNodes) {
         this.__positionTargetAncestorRootNodes.forEach((node) => {
@@ -164,6 +173,11 @@ export const PositionMixin = (superClass) =>
         });
         this.__positionTargetAncestorRootNodes = null;
       }
+
+      if (this.__observePositionTargetMove) {
+        this.__observePositionTargetMove();
+        this.__observePositionTargetMove = null;
+      }
     }
 
     /** @private */
@@ -204,18 +218,25 @@ export const PositionMixin = (superClass) =>
     /** @private */
     __onScroll(e) {
       // If the scroll event occurred inside the overlay, ignore it.
-      if (!this.contains(e.target)) {
-        this._updatePosition();
+      if (e.target instanceof Node && this.contains(e.target)) {
+        return;
       }
+
+      this._updatePosition();
     }
 
     _updatePosition() {
-      if (!this.positionTarget || !this.opened) {
+      if (!this.positionTarget || !this.opened || !this.__margins) {
         return;
       }
 
       const targetRect = this.positionTarget.getBoundingClientRect();
 
+      if (targetRect.width === 0 && targetRect.height === 0 && this.opened) {
+        this.opened = false;
+        return;
+      }
+
       // Detect the desired alignment and update the layout accordingly
       const shouldAlignStartVertically = this.__shouldAlignStartVertically(targetRect);
       this.style.justifyContent = shouldAlignStartVertically ? 'flex-start' : 'flex-end';

package/src/vaadin-overlay-stack-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/vaadin-overlay-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';
@@ -39,7 +39,8 @@ export const overlayStyles = css`
   }
 
   :host([hidden]),
-  :host(:not([opened]):not([closing])) {
+  :host(:not([opened]):not([closing])),
+  :host(:not([opened]):not([closing])) [part='overlay'] {
     display: none !important;
   }
 

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

package/src/vaadin-overlay.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

package/src/vaadin-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 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';

package/theme/lumo/vaadin-overlay-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/lumo/vaadin-overlay.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-overlay-styles.js';
+import '../../src/vaadin-overlay.js';

package/theme/material/vaadin-overlay-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-overlay.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-overlay-styles.js';
+import '../../src/vaadin-overlay.js';