@vaadin/vaadin-overlay 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-overlay",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -14,7 +14,7 @@
   "author": "Vaadin Ltd",
   "homepage": "https://vaadin.com/components",
   "bugs": {
-    "url": "https://github.com/vaadin/vaadin-overlay/issues"
+    "url": "https://github.com/vaadin/web-components/issues"
   },
   "main": "vaadin-overlay.js",
   "module": "vaadin-overlay.js",
@@ -35,20 +35,20 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@polymer/iron-overlay-behavior": "^3.0.0",
-    "@vaadin/button": "23.2.0-dev.8a7678b70",
-    "@vaadin/radio-group": "23.2.0-dev.8a7678b70",
+    "@vaadin/button": "23.3.0-alpha1",
+    "@vaadin/radio-group": "23.3.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.2.0-dev.8a7678b70",
+    "@vaadin/text-field": "23.3.0-alpha1",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

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

@@ -15,6 +15,16 @@ const PROP_NAMES_HORIZONTAL = {
   end: 'right',
 };
 
+const targetResizeObserver = new ResizeObserver((entries) => {
+  setTimeout(() => {
+    entries.forEach((entry) => {
+      if (entry.target.__overlay) {
+        entry.target.__overlay._updatePosition();
+      }
+    });
+  });
+});
+
 /**
  * @polymerMixin
  */
@@ -132,8 +142,15 @@ export const PositionMixin = (superClass) =>
     __overlayOpenedChanged(opened, positionTarget) {
       this.__removeUpdatePositionEventListeners();
 
-      if (opened && positionTarget) {
-        this.__addUpdatePositionEventListeners();
+      if (positionTarget) {
+        positionTarget.__overlay = null;
+        targetResizeObserver.unobserve(positionTarget);
+
+        if (opened) {
+          this.__addUpdatePositionEventListeners();
+          positionTarget.__overlay = this;
+          targetResizeObserver.observe(positionTarget);
+        }
       }
 
       if (opened) {

package/src/vaadin-overlay.d.ts

@@ -135,7 +135,7 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayElementEventMap;
  * ---|---|---
  * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
@@ -232,13 +232,13 @@ declare class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(HTML
   addEventListener<K extends keyof OverlayEventMap>(
     type: K,
     listener: (this: OverlayElement, ev: OverlayEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof OverlayEventMap>(
     type: K,
     listener: (this: OverlayElement, ev: OverlayEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-overlay.js

@@ -90,7 +90,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * ---|---|---
  * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
@@ -404,7 +404,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
    * @protected
    */
   _setTemplateFromNodes(nodes) {
-    this.template = nodes.filter((node) => node.localName && node.localName === 'template')[0] || this.template;
+    this.template = nodes.find((node) => node.localName && node.localName === 'template') || this.template;
   }
 
   /**