use resize observer

Author: madsrasmussen

packages/uui-popover-container/lib/uui-popover-container.element.ts

@@ -1,6 +1,6 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { findAncestorByAttributeValue } from '@umbraco-ui/uui-base/lib/utils';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
 export type PopoverContainerPlacement =
@@ -69,6 +69,8 @@ export class UUIPopoverContainerElement extends LitElement {
 
   #targetElement: HTMLElement | null = null;
   #scrollParents: Element[] = [];
+  #sizeObserver: ResizeObserver | null = null;
+  #size: { width: number; height: number } = { width: 0, height: 0 };
 
   connectedCallback(): void {
     if (!this.hasAttribute('popover')) {
@@ -79,10 +81,33 @@ export class UUIPopoverContainerElement extends LitElement {
     this.addEventListener('beforetoggle', this.#onBeforeToggle);
   }
 
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+
+    // set up an observer that just logs the new width
+    this.#sizeObserver = new ResizeObserver(entries => {
+      const element = entries[0]; // should be only one
+      const width = element.contentRect.width;
+      const height = element.contentRect.height;
+
+      if (width === this.#size.width && height === this.#size.height) {
+        return; // no change
+      }
+
+      this.#size = { width, height };
+      this.#initUpdate();
+    });
+
+    // start listening for size changes
+    this.#sizeObserver.observe(this);
+  }
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.removeEventListener('beforetoggle', this.#onBeforeToggle);
     this.#stopScrollListener();
+    this.#sizeObserver?.disconnect();
+    this.#sizeObserver = null;
   }
 
   #onBeforeToggle = (event: any) => {
@@ -351,14 +376,8 @@ export class UUIPopoverContainerElement extends LitElement {
     this.#scrollParents.push(document.body);
   }
 
-  #onSlotChange() {
-    requestAnimationFrame(() => {
-      this.#initUpdate();
-    });
-  }
-
   render() {
-    return html`<slot @slotchange=${this.#onSlotChange}></slot>`;
+    return html`<slot></slot>`;
   }
 
   static styles = [