Merge branch 'v1/contrib' into feature/no-implicit-lit

Author: nielslyngsoe

.github/workflows/dependency-review.yml

@@ -17,4 +17,4 @@ jobs:
       - name: 'Checkout Repository'
         uses: actions/checkout@v4
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v3
+        uses: actions/dependency-review-action@v4

package-lock.json

@@ -128,7 +128,7 @@
     "tsc-files": "1.1.4",
     "turbo": "1.11.3",
     "typescript": "5.2.2",
-    "vite": "5.0.5",
+    "vite": "5.0.12",
     "vite-tsconfig-paths": "4.2.0",
     "web-component-analyzer": "2.0.0"
   },

package.json

@@ -18,6 +18,7 @@ function slotHasContent(target: EventTarget | null): boolean {
  *  @slot header - header area, use this for things that are not the headline but are located in the header.
  *  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.
  *  @slot - area for the content of the box
+ *  @cssprop --uui-box-header-padding - overwrite the header padding
  *  @cssprop --uui-box-default-padding - overwrite the box padding
  *
  */
@@ -128,7 +129,10 @@ export class UUIBoxElement extends LitElement {
         display: flex;
         column-gap: var(--uui-size-space-5);
         border-bottom: 1px solid var(--uui-color-divider-standalone);
-        padding: var(--uui-size-space-4) var(--uui-size-space-5);
+        padding: var(
+          --uui-box-header-padding,
+          var(--uui-size-space-4) var(--uui-size-space-5)
+        );
       }
 
       slot:not([name]) {

packages/uui-box/lib/uui-box.element.ts

@@ -69,6 +69,7 @@ export class UUIPopoverContainerElement extends LitElement {
   _actualPlacement: PopoverContainerPlacement = this._placement;
 
   #targetElement: HTMLElement | null = null;
+  #scrollParents: Element[] = [];
 
   connectedCallback(): void {
     //TODO: Remove this polyfill when firefox supports the new popover API
@@ -85,6 +86,7 @@ export class UUIPopoverContainerElement extends LitElement {
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.removeEventListener('beforetoggle', this.#onBeforeToggle);
+    this.#stopScrollListener();
   }
 
   #onBeforeToggle = (event: any) => {
@@ -96,6 +98,8 @@ 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(
@@ -110,11 +114,11 @@ export class UUIPopoverContainerElement extends LitElement {
     );
 
     if (!this._open) {
-      document.removeEventListener('scroll', this.#initUpdate);
+      this.#stopScrollListener();
       return;
     }
 
-    document.addEventListener('scroll', this.#initUpdate);
+    this.#startScrollListener();
 
     requestAnimationFrame(() => {
       this.#initUpdate();
@@ -305,6 +309,52 @@ export class UUIPopoverContainerElement extends LitElement {
       `${oppositeDirection}-${position}` as PopoverContainerPlacement;
   }
 
+  #startScrollListener() {
+    this.#scrollParents.forEach(el => {
+      el.addEventListener('scroll', this.#initUpdate, { passive: true });
+    });
+    document.addEventListener('scroll', this.#initUpdate, { passive: true });
+  }
+  #stopScrollListener() {
+    this.#scrollParents.forEach(el => {
+      el.removeEventListener('scroll', this.#initUpdate);
+    });
+    document.removeEventListener('scroll', this.#initUpdate);
+  }
+
+  #getScrollParents(): any {
+    if (!this.#targetElement) return;
+
+    let style = getComputedStyle(this.#targetElement);
+    if (style.position === 'fixed') {
+      return;
+    }
+
+    const includeHidden = false;
+    const excludeStaticParent = style.position === 'absolute';
+    const overflowRegex = includeHidden
+      ? /(auto|scroll|hidden)/
+      : /(auto|scroll)/;
+
+    let el = this.#targetElement;
+    while ((el = el.parentElement as HTMLElement)) {
+      style = getComputedStyle(el);
+
+      if (excludeStaticParent && style.position === 'static') {
+        continue;
+      }
+      if (
+        overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
+      ) {
+        this.#scrollParents.push(el);
+      }
+      if (style.position === 'fixed') {
+        return;
+      }
+    }
+    this.#scrollParents.push(document.body);
+  }
+
   render() {
     return html`<slot></slot>`;
   }

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

@@ -158,3 +158,61 @@ export const Tooltip: Story = {
     </uui-popover-container>
   `,
 };
+
+export const InsideScrollContainer: Story = {
+  args: {
+    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
+        style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+        <div style="height: 150px"></div>
+        <uui-button
+          id="popover-button"
+          popovertarget="popover-container"
+          look="primary"
+          label="Open popover">
+          Open popover
+        </uui-button>
+        <div style="height: 150px"></div>
+        <div style="height: 150px"></div>
+      </div>
+      <div style="height: 400px"></div>
+    </div>
+    <uui-popover-container
+      id="popover-container"
+      popover
+      placement=${args.placement}
+      margin=${args.margin}>
+      <div
+        style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
+        <h3>Scroll!</h3>
+        Scrolling in any of the 2 boxes should trigger an update
+      </div>
+    </uui-popover-container>
+  `,
+};

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

@@ -81,22 +81,25 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
-    <uui-ref-node-data-type border name="TextField" alias="Umbraco.TextField">
+    <uui-ref-node-data-type
+      standalone
+      name="TextField"
+      alias="Umbraco.TextField">
       <uui-action-bar slot="actions">
         <uui-button label="Remove">Remove</uui-button>
       </uui-action-bar>
     </uui-ref-node-data-type>
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-data-type
-  border
+  standalone
   name="TextField"
   alias="Umbraco.TextField">
   <uui-action-bar slot="actions">

packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts

@@ -81,22 +81,25 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
-    <uui-ref-node-document-type border name="Product Page" alias="productPage">
+    <uui-ref-node-document-type
+      standalone
+      name="Product Page"
+      alias="productPage">
       <uui-action-bar slot="actions">
         <uui-button label="Remove">Remove</uui-button>
       </uui-action-bar>
     </uui-ref-node-document-type>
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-document-type
-  border
+  standalone
   name="Product Page"
   alias="productPage">
   <uui-action-bar slot="actions">

packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts

@@ -82,10 +82,10 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
     <uui-ref-node-form
-      border
+      standalone
       name="Newsletter Signup"
       detail="Signup for newsletter">
       <uui-action-bar slot="actions">
@@ -95,12 +95,12 @@ export const Border: Story = () => html`
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-form
-  border
+  standalone
   name="Newsletter Signup"
   detail="Signup for newsletter">
   <uui-action-bar slot="actions">

packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts

@@ -83,10 +83,10 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
     <uui-ref-node-member
-      border
+      standalone
       name="Arnold Vitz"
       group-name="Visitor, Registered-Member">
       <uui-action-bar slot="actions">
@@ -96,12 +96,12 @@ export const Border: Story = () => html`
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-member
-  border
+  standalone
   name="Arnold Vitz"
   group-name="Visitor, Registered-Member">
   <uui-action-bar slot="actions">