Merge branch 'main' into v1/bugfix/menu-item-z-index

Author: nielslyngsoe

package-lock.json

@@ -125,9 +125,9 @@
     "storybook": "^9.1.1",
     "tsc-files": "1.1.4",
     "turbo": "2.5.5",
-    "typescript": "5.8.2",
+    "typescript": "5.9.3",
     "typescript-eslint": "8.26.0",
-    "vite": "6.3.5",
+    "vite": "7.1.9",
     "vite-plugin-turbosnap": "1.0.3",
     "web-component-analyzer": "2.0.0"
   },

package.json

@@ -72,14 +72,20 @@ export class UUIPopoverContainerElement extends LitElement {
   #sizeObserver: ResizeObserver | null = null;
   #size: { width: number; height: number } = { width: 0, height: 0 };
 
+  constructor() {
+    super();
+
+    this.addEventListener('beforetoggle', this.#onBeforeToggle, {
+      passive: true,
+    });
+  }
+
   connectedCallback(): void {
+    super.connectedCallback();
     if (!this.hasAttribute('popover')) {
       this.setAttribute('popover', '');
     }
 
-    super.connectedCallback();
-    this.addEventListener('beforetoggle', this.#onBeforeToggle);
-
     if (!this.#sizeObserver) {
       this.#sizeObserver = new ResizeObserver(entries => {
         const element = entries[0]; // should be only one
@@ -101,7 +107,6 @@ export class UUIPopoverContainerElement extends LitElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.removeEventListener('beforetoggle', this.#onBeforeToggle);
     this.#stopScrollListener();
     this.#sizeObserver?.disconnect();
     this.#sizeObserver = null;
@@ -116,8 +121,6 @@ export class UUIPopoverContainerElement extends LitElement {
       this.id,
     );
 
-    this.#getScrollParents();
-
     // Dispatch a custom event that can be listened to by the popover target.
     // Mostly used for UUIButton.
     this.#targetElement?.dispatchEvent(
@@ -131,16 +134,17 @@ export class UUIPopoverContainerElement extends LitElement {
       }),
     );
 
-    if (!this._open) {
-      this.#stopScrollListener();
-      return;
-    }
+    if (this._open) {
+      this.#calculateScrollParents();
 
-    this.#startScrollListener();
+      this.#startScrollListener();
 
-    requestAnimationFrame(() => {
-      this.#initUpdate();
-    });
+      requestAnimationFrame(() => {
+        this.#initUpdate();
+      });
+    } else {
+      this.#stopScrollListener();
+    }
   };
 
   #initUpdate = () => {
@@ -340,7 +344,17 @@ export class UUIPopoverContainerElement extends LitElement {
     document.removeEventListener('scroll', this.#initUpdate);
   }
 
-  #getScrollParents(): any {
+  /**
+   * @internal
+   */
+  _getScrollParents() {
+    return this.#scrollParents;
+  }
+
+  #calculateScrollParents(): void {
+    // Clear previous scroll parents to avoid duplicates
+    this.#scrollParents = [];
+
     if (!this.#targetElement) return;
 
     let style = getComputedStyle(this.#targetElement);
@@ -349,7 +363,7 @@ export class UUIPopoverContainerElement extends LitElement {
     }
 
     const includeHidden = false;
-    const excludeStaticParent = style.position === 'absolute';
+    let excludeStaticParent = style.position === 'absolute';
     const overflowRegex = includeHidden
       ? /(auto|scroll|hidden)/
       : /(auto|scroll)/;
@@ -362,6 +376,11 @@ export class UUIPopoverContainerElement extends LitElement {
         el = this.#getAncestorElement(el);
         continue;
       }
+
+      if (style.position !== 'static') {
+        excludeStaticParent = style.position === 'absolute';
+      }
+
       if (
         overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
       ) {
@@ -379,10 +398,10 @@ export class UUIPopoverContainerElement extends LitElement {
   #getAncestorElement(el: HTMLElement | null): HTMLElement | null {
     if (el?.parentElement) {
       return el.parentElement;
-    } else {
-      // If we had no parentElement, then check for shadow roots:
-      return (el?.getRootNode() as any)?.host;
     }
+
+    // If we had no parentElement, then check for shadow roots:
+    return (el?.getRootNode() as any)?.host;
   }
 
   render() {

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

@@ -9,6 +9,28 @@ const meta: Meta<UUIPopoverContainerElement> = {
   id: 'uui-popover-container',
   component: 'uui-popover-container',
   title: 'Displays/Popover Container',
+  argTypes: {
+    open: {
+      control: false,
+    },
+    placement: {
+      options: [
+        'auto',
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'right',
+        'right-start',
+        'right-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+    },
+  },
   parameters: {
     readme: {
       markdown: readme,
@@ -32,28 +54,6 @@ export const Overview: Story = {
     placement: 'bottom-start',
     margin: 0,
   },
-  argTypes: {
-    open: {
-      control: false,
-    },
-    placement: {
-      options: [
-        'auto',
-        'top',
-        'top-start',
-        'top-end',
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-        'right',
-        'right-start',
-        'right-end',
-        'left',
-        'left-start',
-        'left-end',
-      ],
-    },
-  },
   render: args => html`
     <uui-button
       id="popover-button"
@@ -119,28 +119,6 @@ export const Tooltip: Story = {
     placement: 'bottom-start',
     margin: 0,
   },
-  argTypes: {
-    open: {
-      control: false,
-    },
-    placement: {
-      options: [
-        'auto',
-        'top',
-        'top-start',
-        'top-end',
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-        'right',
-        'right-start',
-        'right-end',
-        'left',
-        'left-start',
-        'left-end',
-      ],
-    },
-  },
   render: args => html`
     Sometimes words such as
     <b id="tooltip-toggle" popovertarget="tooltip-popover">petrichor</b> needs
@@ -164,28 +142,6 @@ export const InsideScrollContainer: Story = {
     placement: 'bottom-start',
     margin: 0,
   },
-  argTypes: {
-    open: {
-      control: false,
-    },
-    placement: {
-      options: [
-        'auto',
-        'top',
-        'top-start',
-        'top-end',
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-        'right',
-        'right-start',
-        'right-end',
-        'left',
-        'left-start',
-        'left-end',
-      ],
-    },
-  },
   render: args => html`
     <div style="height: 500px; overflow: auto; outline: 1px solid black">
       <div
@@ -222,15 +178,10 @@ export const InsideShadowDOMScrollContainer: Story = {
     placement: 'bottom-start',
     margin: 0,
   },
-  argTypes: {
-    open: {
-      control: false,
-    },
-  },
   render: () => html`
     <div style="height: 500px; overflow: auto; outline: 1px solid black">
       <div
-        style="position:static; width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+        style="position:static; width: 300px; height: 300px; outline: 1px solid black; overflow: auto; margin:auto">
         <div style="height: 150px"></div>
         <uui-popover-container-shadowdomtester></uui-popover-container-shadowdomtester>
         <div style="height: 150px"></div>