@kubex/zinc 1.1.89 → 1.1.90

package/docs/pages/components/editor.md

@@ -321,7 +321,6 @@ Add custom quick actions to the context menu using the `zn-editor-quick-action`
 ```html:preview
 <zn-editor
   name="content"
-  value="<p>Select this text to see custom quick actions in the context menu</p>"
   style="height: 300px">
   <zn-editor-quick-action
     slot="context-items"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.89",
+  "version": "1.1.90",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/absolute-container/absolute-container.component.ts

@@ -14,6 +14,7 @@ import type {PropertyValues} from 'lit';
  *
  */
 export default class ZnAbsoluteContainer extends ZincElement {
+  private _resizeFrame: number | null = null;
 
   constructor() {
     super();
@@ -30,12 +31,30 @@ export default class ZnAbsoluteContainer extends ZincElement {
     this.resize();
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeFrame !== null) {
+      cancelAnimationFrame(this._resizeFrame);
+      this._resizeFrame = null;
+    }
+  }
+
   resize() {
-    let newSize = 0;
-    Array.from(this.children).forEach((child) => {
-      newSize += child.getBoundingClientRect().height;
+    if (this._resizeFrame !== null) {
+      return;
+    }
+    this._resizeFrame = requestAnimationFrame(() => {
+      this._resizeFrame = null;
+      let newSize = 0;
+      Array.from(this.children).forEach((child) => {
+        newSize += child.getBoundingClientRect().height;
+      });
+      const minHeight = newSize + 'px';
+      // Guarded write: setting style re-triggers our own MutationController
+      if (this.style.minHeight !== minHeight) {
+        this.style.minHeight = minHeight;
+      }
     });
-    this.style.minHeight = newSize + 'px';
   }
 
   // the height of this element is set to the height of its children (absolute positioned)

package/src/components/scroll-container/scroll-container.component.ts

@@ -1,4 +1,4 @@
-import {type CSSResultGroup, html, unsafeCSS, PropertyValues} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, query} from "lit/decorators.js";
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
@@ -34,6 +34,9 @@ export default class ZnScrollContainer extends ZincElement {
   @query('.scroll-footer')
   private footer: HTMLElement;
 
+  private _footerObserved: boolean = false;
+  private _footerHeightFrame: number | null = null;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.startScrolled && this.container) {
@@ -41,15 +44,34 @@ export default class ZnScrollContainer extends ZincElement {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._footerHeightFrame !== null) {
+      cancelAnimationFrame(this._footerHeightFrame);
+      this._footerHeightFrame = null;
+    }
+  }
+
   scrollEnd() {
     this.container.scrollTop = this.container.scrollHeight;
   }
 
+  private _syncFooterHeight() {
+    if (this._footerHeightFrame !== null) {
+      return;
+    }
+    this._footerHeightFrame = requestAnimationFrame(() => {
+      this._footerHeightFrame = null;
+      const height = `${this.footer?.clientHeight ?? 0}px`;
+      if (this.style.getPropertyValue('--zn-scroll-footer-height') !== height) {
+        this.style.setProperty('--zn-scroll-footer-height', height);
+      }
+    });
+  }
+
   private readonly _footerResizeObserver = new ResizeController(this, {
     target: null,
-    callback: () => {
-      this.style.setProperty('--zn-scroll-footer-height', `${this.footer?.clientHeight ?? 0}px`);
-    },
+    callback: () => this._syncFooterHeight(),
   });
 
   private readonly _domObserver = new MutationController(this, {
@@ -58,8 +80,11 @@ export default class ZnScrollContainer extends ZincElement {
     callback: () => {
       setTimeout(() => this.scrollEnd(), 100);
       if (this.footer) {
-        this.style.setProperty('--zn-scroll-footer-height', `${this.footer.clientHeight}px`);
-        this._footerResizeObserver.observe(this.footer);
+        this._syncFooterHeight();
+        if (!this._footerObserved) {
+          this._footerObserved = true;
+          this._footerResizeObserver.observe(this.footer);
+        }
       }
     },
   });