@zywave/zui-dialog - npm Package Compare versions

Comparing version 4.0.36 to 4.0.37-pre.0

dist/custom-elements.json

@@ -38,18 +38,27 @@ {
               "kind": "field",
-              "name": "_headerSlottedNodes",
+              "name": "#open",
+              "privacy": "private",
               "type": {
-                "text": "Array<HTMLCollection>"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "_footerSlottedNodes",
+              "name": "#canceled",
+              "privacy": "private",
               "type": {
-                "text": "Array<HTMLCollection>"
-              },
-              "privacy": "private"
+                "text": "boolean | null | undefined | undefined"
+              }
             },
             {
               "kind": "field",
+              "name": "#contentObserver",
+              "privacy": "private",
+              "type": {
+                "text": "MutationObserver | undefined"
+              }
+            },
+            {
+              "kind": "field",
               "name": "#instances",
@@ -62,6 +71,6 @@ "privacy": "private",
               "kind": "field",
-              "name": "#open",
+              "name": "#scrollbarVisible",
               "privacy": "private",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
@@ -72,19 +81,26 @@ "default": "false"
               "kind": "field",
-              "name": "#canceled",
-              "privacy": "private",
+              "name": "_dialogElement",
               "type": {
-                "text": "boolean | null | undefined | undefined"
-              }
+                "text": "HTMLDialogElement | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#scrollbarVisible",
-              "privacy": "private",
+              "name": "_headerSlottedNodes",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Array<HTMLCollection>"
               },
-              "default": "false"
+              "privacy": "private"
             },
             {
               "kind": "field",
+              "name": "_footerSlottedNodes",
+              "type": {
+                "text": "Array<HTMLCollection>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
               "name": "opened",
@@ -110,10 +126,2 @@ "type": {
               "kind": "field",
-              "name": "_dialogElement",
-              "type": {
-                "text": "HTMLDialogElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
               "name": "canceled",
@@ -225,7 +233,15 @@ "type": {
               "kind": "method",
-              "name": "#applyStickyFooter"
+              "name": "#isScrollbarVisible"
             },
             {
               "kind": "method",
-              "name": "#undoStickyFooter"
+              "name": "#resetScrollbarVisible"
+            },
+            {
+              "kind": "method",
+              "name": "#setupContentMutationObserver"
+            },
+            {
+              "kind": "method",
+              "name": "#disconnectContentMutationObserver"
             }
@@ -232,0 +248,0 @@ ],

dist/zui-dialog.d.ts

@@ -25,5 +25,6 @@ import { ZuiBaseElement } from '@zywave/zui-base';
     #private;
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    private _dialogElement?;
     private _headerSlottedNodes;
     private _footerSlottedNodes;
-    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     /**
@@ -38,3 +39,2 @@ * Represents if the dialog is currently open or not. Can apply to automatically open the dialog when attached to the DOM.
     noCancelOutsideDialog: boolean;
-    private _dialogElement?;
     get canceled(): boolean;
@@ -41,0 +41,0 @@ /**

dist/zui-dialog.js

@@ -18,3 +18,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-var _ZuiDialogElement_instances, _a, _ZuiDialogElement_instances_1, _ZuiDialogElement_open, _ZuiDialogElement_canceled, _ZuiDialogElement_scrollbarVisible, _ZuiDialogElement_ensureDialogState, _ZuiDialogElement_dispatchOpenEvent, _ZuiDialogElement_dispatchCloseEvent, _ZuiDialogElement_footerActionHandler, _ZuiDialogElement_wasBackdropClicked, _ZuiDialogElement_toggleHeader, _ZuiDialogElement_toggleFooter, _ZuiDialogElement_applyStickyFooter, _ZuiDialogElement_undoStickyFooter;
+var _ZuiDialogElement_instances, _a, _ZuiDialogElement_open, _ZuiDialogElement_canceled, _ZuiDialogElement_contentObserver, _ZuiDialogElement_instances_1, _ZuiDialogElement_scrollbarVisible, _ZuiDialogElement_ensureDialogState, _ZuiDialogElement_dispatchOpenEvent, _ZuiDialogElement_dispatchCloseEvent, _ZuiDialogElement_footerActionHandler, _ZuiDialogElement_wasBackdropClicked, _ZuiDialogElement_toggleHeader, _ZuiDialogElement_toggleFooter, _ZuiDialogElement_isScrollbarVisible, _ZuiDialogElement_resetScrollbarVisible, _ZuiDialogElement_setupContentMutationObserver, _ZuiDialogElement_disconnectContentMutationObserver;
 import { ZuiBaseElement } from '@zywave/zui-base';
@@ -52,3 +52,4 @@ import { html } from 'lit';
         _ZuiDialogElement_canceled.set(this, void 0);
-        // Used for stickying the dialog footer when scrollbar is visible (true)
+        _ZuiDialogElement_contentObserver.set(this, void 0);
+        // Used for checking if content is longer than dialog in order to overflow content and sticky the dialog footer
         _ZuiDialogElement_scrollbarVisible.set(this, false);
@@ -76,3 +77,3 @@ /**
             val ? __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_dispatchOpenEvent).call(this) : __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_dispatchCloseEvent).call(this, false);
-            val ? __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_applyStickyFooter).call(this) : __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_undoStickyFooter).call(this);
+            val ? __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_isScrollbarVisible).call(this) : __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_resetScrollbarVisible).call(this);
             if (!val) {
@@ -103,3 +104,3 @@ __classPrivateFieldSet(this, _ZuiDialogElement_canceled, true, "f");
             __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_dispatchCloseEvent).call(this, confirm);
-            __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_undoStickyFooter).call(this);
+            __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_resetScrollbarVisible).call(this);
         }
@@ -112,2 +113,3 @@ }
         this.setAttribute('aria-describedby', 'dialogDesc');
+        __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_setupContentMutationObserver).call(this);
         __classPrivateFieldGet(ZuiDialogElement, _a, "f", _ZuiDialogElement_instances_1).set(this, false);
@@ -119,2 +121,3 @@ }
         __classPrivateFieldGet(ZuiDialogElement, _a, "f", _ZuiDialogElement_instances_1).delete(this);
+        __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_disconnectContentMutationObserver).call(this);
     }
@@ -159,3 +162,3 @@ async firstUpdated() {
 }
-_a = ZuiDialogElement, _ZuiDialogElement_open = new WeakMap(), _ZuiDialogElement_canceled = new WeakMap(), _ZuiDialogElement_scrollbarVisible = new WeakMap(), _ZuiDialogElement_instances = new WeakSet(), _ZuiDialogElement_ensureDialogState = function _ZuiDialogElement_ensureDialogState(isOpen, retries = 1) {
+_a = ZuiDialogElement, _ZuiDialogElement_open = new WeakMap(), _ZuiDialogElement_canceled = new WeakMap(), _ZuiDialogElement_contentObserver = new WeakMap(), _ZuiDialogElement_scrollbarVisible = new WeakMap(), _ZuiDialogElement_instances = new WeakSet(), _ZuiDialogElement_ensureDialogState = function _ZuiDialogElement_ensureDialogState(isOpen, retries = 1) {
     var _b;
@@ -218,15 +221,12 @@ // disconnected elements cannot be in an "open" state
     this.requestUpdate();
-}, _ZuiDialogElement_applyStickyFooter = 
-// Sticky the dialog footer when the dialog scrollbar is visible
-async function _ZuiDialogElement_applyStickyFooter() {
+}, _ZuiDialogElement_isScrollbarVisible = 
+// Check if dialog scrollbar is visible
+async function _ZuiDialogElement_isScrollbarVisible() {
     var _b, _c;
     await this.updateComplete;
-    if (((_b = this._dialogElement) === null || _b === void 0 ? void 0 : _b.scrollHeight) > ((_c = this._dialogElement) === null || _c === void 0 ? void 0 : _c.clientHeight)) {
+    if (!__classPrivateFieldGet(this, _ZuiDialogElement_scrollbarVisible, "f") && ((_b = this._dialogElement) === null || _b === void 0 ? void 0 : _b.scrollHeight) > ((_c = this._dialogElement) === null || _c === void 0 ? void 0 : _c.clientHeight)) {
         __classPrivateFieldSet(this, _ZuiDialogElement_scrollbarVisible, true, "f");
     }
-    else {
-        __classPrivateFieldSet(this, _ZuiDialogElement_scrollbarVisible, false, "f");
-    }
     this.requestUpdate();
-}, _ZuiDialogElement_undoStickyFooter = function _ZuiDialogElement_undoStickyFooter() {
+}, _ZuiDialogElement_resetScrollbarVisible = function _ZuiDialogElement_resetScrollbarVisible() {
     if (__classPrivateFieldGet(this, _ZuiDialogElement_scrollbarVisible, "f")) {
@@ -236,5 +236,23 @@ __classPrivateFieldSet(this, _ZuiDialogElement_scrollbarVisible, false, "f");
     this.requestUpdate();
+}, _ZuiDialogElement_setupContentMutationObserver = function _ZuiDialogElement_setupContentMutationObserver() {
+    var _b;
+    __classPrivateFieldSet(this, _ZuiDialogElement_contentObserver, new MutationObserver((mutations) => {
+        for (const m of mutations) {
+            if (m.type === 'childList') {
+                __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_isScrollbarVisible).call(this);
+            }
+        }
+    }), "f");
+    (_b = __classPrivateFieldGet(this, _ZuiDialogElement_contentObserver, "f")) === null || _b === void 0 ? void 0 : _b.observe(this, { childList: true, subtree: true });
+    this.requestUpdate();
+}, _ZuiDialogElement_disconnectContentMutationObserver = function _ZuiDialogElement_disconnectContentMutationObserver() {
+    if (__classPrivateFieldGet(this, _ZuiDialogElement_contentObserver, "f")) {
+        __classPrivateFieldGet(this, _ZuiDialogElement_contentObserver, "f").disconnect();
+    }
 };
 _ZuiDialogElement_instances_1 = { value: new Map() };
 __decorate([
+    query('dialog')
+], ZuiDialogElement.prototype, "_dialogElement", void 0);
+__decorate([
     queryAssignedNodes({ slot: 'header' })
@@ -251,6 +269,3 @@ ], ZuiDialogElement.prototype, "_headerSlottedNodes", void 0);
 ], ZuiDialogElement.prototype, "noCancelOutsideDialog", void 0);
-__decorate([
-    query('dialog')
-], ZuiDialogElement.prototype, "_dialogElement", void 0);
 window.customElements.define('zui-dialog', ZuiDialogElement);
 //# sourceMappingURL=zui-dialog.js.map

package.json

 {
   "name": "@zywave/zui-dialog",
-  "version": "4.0.36",
+  "version": "4.0.37-pre.0",
   "main": "dist/index.js",
@@ -28,3 +28,3 @@ "module": "dist/index.js",
   "customElements": "dist/custom-elements.json",
-  "gitHead": "6454fd8c3054c7c742d1d80c07a742af3d626140"
+  "gitHead": "46b0936f63fd9c3d87d23623ade228f4c4562725"
 }

src/zui-dialog.ts

@@ -30,9 +30,10 @@ import { ZuiBaseElement } from '@zywave/zui-base';
 export class ZuiDialogElement extends ZuiBaseElement {
-  @queryAssignedNodes({ slot: 'header' })
-  private _headerSlottedNodes: Array<HTMLCollection>;
+  #open = false;
+  #canceled?: boolean | null | undefined;
+  #contentObserver?: MutationObserver;
+  static #instances = new Map<ZuiDialogElement, boolean>();
 
-  @queryAssignedNodes({ slot: 'footer' })
-  private _footerSlottedNodes: Array<HTMLCollection>;
+  // Used for checking if content is longer than dialog in order to overflow content and sticky the dialog footer
+  #scrollbarVisible?: boolean = false;
 
-  static #instances = new Map<ZuiDialogElement, boolean>();
   static get styles() {
@@ -42,8 +43,11 @@ return [super.styles, style];
 
-  #open = false;
-  #canceled?: boolean | null | undefined;
+  @query('dialog')
+  private _dialogElement?: HTMLDialogElement;
 
-  // Used for stickying the dialog footer when scrollbar is visible (true)
-  #scrollbarVisible?: boolean = false;
+  @queryAssignedNodes({ slot: 'header' })
+  private _headerSlottedNodes: Array<HTMLCollection>;
 
+  @queryAssignedNodes({ slot: 'footer' })
+  private _footerSlottedNodes: Array<HTMLCollection>;
+
   /**
@@ -64,3 +68,3 @@ * Represents if the dialog is currently open or not. Can apply to automatically open the dialog when attached to the DOM.
       val ? this.#dispatchOpenEvent() : this.#dispatchCloseEvent(false);
-      val ? this.#applyStickyFooter() : this.#undoStickyFooter();
+      val ? this.#isScrollbarVisible() : this.#resetScrollbarVisible();
       if (!val) {
@@ -78,5 +82,2 @@ this.#canceled = true;
 
-  @query('dialog')
-  private _dialogElement?: HTMLDialogElement;
-
   get canceled() {
@@ -104,3 +105,3 @@ return this.#canceled;
       this.#dispatchCloseEvent(confirm);
-      this.#undoStickyFooter();
+      this.#resetScrollbarVisible();
     }
@@ -114,2 +115,3 @@ }
     this.setAttribute('aria-describedby', 'dialogDesc');
+    this.#setupContentMutationObserver();
 
@@ -123,2 +125,3 @@ ZuiDialogElement.#instances.set(this, false);
     ZuiDialogElement.#instances.delete(this);
+    this.#disconnectContentMutationObserver();
   }
@@ -198,2 +201,3 @@
 
+  // Show or hide header slot based on whether or not it has content
   #toggleHeader() {
@@ -211,2 +215,3 @@ const header: HTMLElement = this.shadowRoot.querySelector('.header');
 
+  // Show or hide footer slot based on whether or not it has content
   #toggleFooter() {
@@ -224,10 +229,8 @@ const footer: HTMLElement = this.shadowRoot.querySelector('.footer');
 
-  // Sticky the dialog footer when the dialog scrollbar is visible
-  async #applyStickyFooter() {
+  // Check if dialog scrollbar is visible
+  async #isScrollbarVisible() {
     await this.updateComplete;
 
-    if (this._dialogElement?.scrollHeight > this._dialogElement?.clientHeight) {
+    if (!this.#scrollbarVisible && this._dialogElement?.scrollHeight > this._dialogElement?.clientHeight) {
       this.#scrollbarVisible = true;
-    } else {
-      this.#scrollbarVisible = false;
     }
@@ -238,4 +241,4 @@
 
-  // Unsticky the dialog footer
-  #undoStickyFooter() {
+  // Reset this.#scrollbarVisible to false, usually when closing a dialog
+  #resetScrollbarVisible() {
     if (this.#scrollbarVisible) {
@@ -248,2 +251,24 @@ this.#scrollbarVisible = false;
 
+  // Setup MutationObserver to check if dialog content has changed
+  #setupContentMutationObserver() {
+    this.#contentObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === 'childList') {
+          this.#isScrollbarVisible();
+        }
+      }
+    });
+
+    this.#contentObserver?.observe(this, { childList: true, subtree: true });
+
+    this.requestUpdate();
+  }
+
+  // Disconnect MutationObserver
+  #disconnectContentMutationObserver() {
+    if (this.#contentObserver) {
+      this.#contentObserver.disconnect();
+    }
+  }
+
   render() {
@@ -250,0 +275,0 @@ return html`

test/zui-dialog.test.ts

@@ -90,3 +90,3 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference
     await element.updateComplete;
-    getOverlayElement(element).click();
+    getOverlayElement(element)?.click();
     await element.updateComplete;
@@ -222,3 +222,3 @@ assert.isTrue(element.canceled);
     assertDialogState(element, true);
-    await Promise.allSettled([awaitEvent(element, 'close'), getOverlayElement(element).click()]);
+    await Promise.allSettled([awaitEvent(element, 'close'), getOverlayElement(element)?.click()]);
     assertDialogState(element, false);
@@ -233,3 +233,3 @@ });
     assertDialogState(element, true);
-    getOverlayElement(element).click();
+    getOverlayElement(element)?.click();
     await element.updateComplete;
@@ -283,3 +283,3 @@ assertDialogState(element, true);
     await element.updateComplete;
-    assert.exists(element.shadowRoot!.querySelector('dialog[open]'));
+    assert.exists(element.shadowRoot?.querySelector('dialog[open]'));
   });
@@ -289,8 +289,8 @@
     await element.updateComplete;
-    element.shadowRoot!.querySelector('article').style.height = '400px';
-    element.shadowRoot!.getElementById('dialogDesc').style.height = '1000px';
+    element.shadowRoot!.querySelector('article')!.style.height = '400px';
+    element.shadowRoot!.getElementById('dialogDesc')!.style.height = '1000px';
     await element.updateComplete;
     element.open();
     await element.updateComplete;
-    assert.exists(element.shadowRoot!.querySelector('dialog').classList.contains('scrolling'));
+    assert.exists(element.shadowRoot?.querySelector('dialog')?.classList.contains('scrolling'));
   });
@@ -300,4 +300,4 @@
     await element.updateComplete;
-    element.shadowRoot!.querySelector('article').style.height = '400px';
-    element.shadowRoot!.getElementById('dialogDesc').style.height = '1000px';
+    element.shadowRoot!.querySelector('article')!.style.height = '400px';
+    element.shadowRoot!.getElementById('dialogDesc')!.style.height = '1000px';
     await element.updateComplete;
@@ -308,4 +308,100 @@ element.open();
     await element.updateComplete;
-    assert.isFalse(element.shadowRoot!.querySelector('dialog').classList.contains('scrolling'));
+    assert.isFalse(element.shadowRoot?.querySelector('dialog')?.classList.contains('scrolling'));
   });
+
+  test('dialog should scroll when lots of dynamic content is injected after dialog opens', async () => {
+    await element.updateComplete;
+
+    const HeadingStr = `<h2 id="dynamic-header" slot="header"></h2>`;
+    element.appendChild(constructHtml(HeadingStr));
+    const ContentStr = `<div id="dynamic-content" slot="content"></div>`;
+    element.appendChild(constructHtml(ContentStr));
+
+    const footerButtonsStr = `
+      <div id="dynamic-footer" slot="footer">
+        <zui-button dialog-confirm>Confirm</zui-button>
+        <zui-button dialog-close class="link">Cancel</zui-button>
+      </div>
+    `;
+    element.appendChild(constructHtml(footerButtonsStr));
+
+    const HeadingEl = element.querySelector('#dynamic-header') as HTMLElement;
+    const ContentEl = element.querySelector('#dynamic-content') as HTMLElement;
+
+    element.open();
+
+    element.addEventListener('open', () => {
+      setTimeout(() => {
+        HeadingEl.textContent = 'Dynamic Heading';
+        ContentEl.innerHTML = `Yo, VIP, let's kick it!<br />
+        Ice ice baby<br />
+        Ice ice baby<br />
+        All right stop<br />
+        Collaborate and listen<br />
+        Ice is back with my brand new invention<br />
+        Something grabs a hold of me tightly<br />
+        Then I flow that a harpoon daily and nightly<br />
+        Will it ever stop?<br />
+        Yo, I don't know<br />
+        Turn off the lights and I'll glow<br />
+        To the extreme, I rock a mic like a vandal<br />
+        Light up a stage and wax a chump like a candle<br />
+        Dance <br />
+        Bum rush the speaker that booms<br />
+        I'm killin' your brain like a poisonous mushroom<br />
+        Deadly, when I play a dope melody<br />
+        Anything less that the best is a felony<br />
+        Love it or leave it<br />
+        You better gain way<br />
+        You better hit bull's eye<br />
+        The kid don't play<br />
+        If there was a problem<br />
+        Yo, I'll solve it<br />
+        Check out the hook while my DJ revolves it<br />
+        Ice ice baby Vanilla<br />
+        Ice ice baby Vanilla<br />
+        Ice ice baby Vanilla<br />
+        Ice ice baby Vanilla<br />
+        Now that the party is jumping<br />
+        With the bass kicked in, the fingers are pumpin'<br />
+        Quick to the point, to the point no faking<br />
+        I'm cooking MC's like a pound of bacon<br />
+        Burning them if they're not quick and nimble<br />
+        I go crazy when I hear a cymbal<br />
+        And a hi hat with a souped up tempo<br />
+        I'm on a roll and it's time to go solo<br />
+        Rollin in my 5.0<br />
+        With my ragtop down so my hair can blow<br />
+        The girlies on standby<br />
+        Waving just to say hi<br />
+        Did you stop?<br />
+        No, I just drove by<br />
+        Kept on pursuing to the next stop<br />
+        I busted a left and I'm heading to the next block<br />
+        That block was dead<br />
+        Yo so I continued to a1a Beachfront Ave<br />
+        Girls were hot wearing less than bikinis<br />
+        Rock man lovers driving Lamborghini<br />
+        Jealous 'cause I'm out getting mine<br />
+        Shay with a gauge and Vanilla with a nine<br />
+        Ready for the chumps on the wall<br />
+        The chumps are acting ill because they're so full of eight balls<br />
+        Gunshots ranged out like a bell<br />
+        I grabbed my nine<br />
+        All I heard were shells<br />
+        Fallin' on the concrete real fast<br />
+        Jumped in my car, slammed on the gas<br />
+        Bumper to bumper the avenue's packed<br />
+        I'm tryin' to get away before the jackers jack<br />
+        Police on the scene<br />
+        You know what I mean<br />
+        They passed me up, confronted all the dope fiends<br />
+        If there was a problem<br />
+        Yo, I'll solve it<br />
+        Check out the hook while my DJ revolves it`;
+      }, 1000);
+    });
+
+    assert.exists(element.shadowRoot?.querySelector('dialog')?.classList.contains('scrolling'));
+  });
 });

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

135846

increased by12.27%

Lines of code

1337

increased by11.88%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes