@schukai/monster 4.137.4 → 4.137.6

package/source/components/navigation/site-navigation.mjs

@@ -43,6 +43,12 @@ const instanceSymbol = Symbol("instanceSymbol");
 const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
 const hideHamburgerMenuSymbol = Symbol("hideHamburgerMenu");
 const hamburgerCloseButtonSymbol = Symbol("hamburgerCloseButton");
+const layoutFrameSymbol = Symbol("layoutFrame");
+const layoutSignatureSymbol = Symbol("layoutSignature");
+const measurementCacheSymbol = Symbol("measurementCache");
+
+const navigationItemIds = new WeakMap();
+let navigationItemId = 0;
 
 function getAutoUpdateOptions() {
 	return {
@@ -115,14 +121,16 @@ class SiteNavigation extends CustomElement {
 	connectedCallback() {
 		super.connectedCallback();
 		attachResizeObserver.call(this);
-		requestAnimationFrame(() => {
-			populateTabs.call(this);
-		});
+		schedulePopulateTabs.call(this);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		detachResizeObserver.call(this);
+		if (typeof this[layoutFrameSymbol] === "number") {
+			cancelAnimationFrame(this[layoutFrameSymbol]);
+		}
+		this[layoutFrameSymbol] = null;
 	}
 }
 
@@ -300,14 +308,28 @@ function attachResizeObserver() {
 			}
 		}
 		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-			requestAnimationFrame(() => {
-				populateTabs.call(this);
-			});
+			schedulePopulateTabs.call(this);
 		});
 	});
 	this[resizeObserverSymbol].observe(this);
 }
 
+/**
+ * @private
+ * @this {SiteNavigation}
+ * @return {void}
+ */
+function schedulePopulateTabs() {
+	if (typeof this[layoutFrameSymbol] === "number") {
+		return;
+	}
+
+	this[layoutFrameSymbol] = requestAnimationFrame(() => {
+		this[layoutFrameSymbol] = null;
+		populateTabs.call(this);
+	});
+}
+
 /**
  * Disconnects and cleans up the ResizeObserver instance.
  * @private
@@ -595,6 +617,156 @@ function cloneNavItem(item) {
 	return liClone;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} hamburgerButton
+ * @return {number}
+ */
+function measureHamburgerWidth(hamburgerButton) {
+	const originalDisplay = hamburgerButton.style.display;
+	const originalVisibility = hamburgerButton.style.visibility;
+	setStyleValue(hamburgerButton, "visibility", "hidden");
+	setStyleValue(hamburgerButton, "display", "flex");
+	const width = Math.ceil(hamburgerButton.getBoundingClientRect().width) || 0;
+	setStyleValue(hamburgerButton, "display", originalDisplay);
+	setStyleValue(hamburgerButton, "visibility", originalVisibility);
+	return width;
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} sourceItems
+ * @param {string} sourceSignature
+ * @param {HTMLElement} visibleList
+ * @param {HTMLElement} navEl
+ * @return {object}
+ */
+function getNavigationMeasurements(
+	sourceItems,
+	sourceSignature,
+	visibleList,
+	navEl,
+) {
+	const cache = this[measurementCacheSymbol];
+	if (cache?.sourceSignature === sourceSignature && cache.items.length > 0) {
+		return cache;
+	}
+
+	const originalOverflow = navEl.style.overflow;
+	const originalFlexWrap = visibleList.style.flexWrap;
+	const originalVisibility = visibleList.style.visibility;
+
+	setStyleValue(navEl, "overflow", "hidden");
+	setStyleValue(visibleList, "flexWrap", "nowrap");
+	setStyleValue(visibleList, "visibility", "hidden");
+
+	const clones = sourceItems.map(cloneNavItem);
+	visibleList.replaceChildren(...clones);
+
+	const items = clones.map((clone) => {
+		const submenu = clone.querySelector("ul, div[part='mega-menu']");
+		if (submenu instanceof HTMLElement) {
+			setStyleValue(submenu, "display", "none");
+		}
+		return {
+			requiredWidth: clone.offsetLeft + clone.offsetWidth,
+			width: clone.getBoundingClientRect().width || clone.offsetWidth || 0,
+		};
+	});
+	const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
+
+	visibleList.replaceChildren();
+	setStyleValue(navEl, "overflow", originalOverflow);
+	setStyleValue(visibleList, "flexWrap", originalFlexWrap);
+	setStyleValue(visibleList, "visibility", originalVisibility);
+
+	this[measurementCacheSymbol] = {
+		gap,
+		items,
+		sourceSignature,
+	};
+	return this[measurementCacheSymbol];
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} sourceItems
+ * @return {string}
+ */
+function getSourceItemsSignature(sourceItems) {
+	return sourceItems
+		.map((item) => {
+			return [
+				getNavigationItemId(item),
+				item.className || "",
+				item.textContent || "",
+				item.querySelectorAll("li").length,
+			].join(":");
+		})
+		.join("|");
+}
+
+/**
+ * @private
+ * @param {HTMLElement} item
+ * @return {number}
+ */
+function getNavigationItemId(item) {
+	let id = navigationItemIds.get(item);
+	if (id === undefined) {
+		id = ++navigationItemId;
+		navigationItemIds.set(item, id);
+	}
+	return id;
+}
+
+/**
+ * @private
+ * @param {object} params
+ * @return {string}
+ */
+function getLayoutSignature({ fit, navWidth, rest }) {
+	return [
+		navWidth,
+		fit.map(getNavigationItemId).join(","),
+		rest.map(getNavigationItemId).join(","),
+	].join("::");
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {string} property
+ * @param {string} value
+ * @return {void}
+ */
+function setStyleValue(element, property, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.style[property] !== value) {
+		element.style[property] = value;
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {HTMLElement[]} children
+ * @return {void}
+ */
+function replaceChildrenIfChanged(element, children) {
+	const currentSignature = Array.from(element.children)
+		.map((child) => [child.className || "", child.textContent || ""].join(":"))
+		.join("|");
+	const nextSignature = children
+		.map((child) => [child.className || "", child.textContent || ""].join(":"))
+		.join("|");
+	if (currentSignature !== nextSignature) {
+		element.replaceChildren(...children);
+	}
+}
+
 /**
  * Measures available space and distributes slotted navigation items between
  * the visible list and the hidden hamburger menu list.
@@ -618,12 +790,12 @@ function populateTabs() {
 		(ul) => ul.parentElement === this,
 	);
 
-	visibleList.innerHTML = "";
-	hiddenList.innerHTML = "";
-	hamburgerButton.style.display = "none";
 	this.style.visibility = "hidden";
 
 	if (!topLevelUl) {
+		replaceChildrenIfChanged.call(this, visibleList, []);
+		replaceChildrenIfChanged.call(this, hiddenList, []);
+		setStyleValue(hamburgerButton, "display", "none");
 		this.style.visibility = "visible";
 		return; // Nichts zu tun
 	}
@@ -631,27 +803,29 @@ function populateTabs() {
 		(n) => n.tagName === "LI",
 	);
 	if (sourceItems.length === 0) {
+		replaceChildrenIfChanged.call(this, visibleList, []);
+		replaceChildrenIfChanged.call(this, hiddenList, []);
+		setStyleValue(hamburgerButton, "display", "none");
 		this.style.visibility = "visible";
 		return;
 	}
 
 	const navWidth = navEl.clientWidth;
-
-	const originalDisplay = hamburgerButton.style.display;
-	hamburgerButton.style.visibility = "hidden";
-	hamburgerButton.style.display = "flex";
-	const hamburgerWidth =
-		Math.ceil(hamburgerButton.getBoundingClientRect().width) || 0;
-	hamburgerButton.style.display = originalDisplay;
-	hamburgerButton.style.visibility = "visible";
-
-	navEl.style.overflow = "hidden";
-	visibleList.style.flexWrap = "nowrap";
-	visibleList.style.visibility = "hidden"; // Inhalt der Liste während Manipulation ausblenden
+	const sourceSignature = getSourceItemsSignature(sourceItems);
+	const hamburgerWidth = measureHamburgerWidth(hamburgerButton);
+	const measurements = getNavigationMeasurements.call(
+		this,
+		sourceItems,
+		sourceSignature,
+		visibleList,
+		navEl,
+	);
 
 	const fit = [];
 	const rest = [];
 	let hasOverflow = false;
+	const availableWidth = navWidth - hamburgerWidth;
+	const SAFETY_MARGIN = 1;
 
 	for (let i = 0; i < sourceItems.length; i++) {
 		const item = sourceItems[i];
@@ -661,12 +835,7 @@ function populateTabs() {
 			continue;
 		}
 
-		const liClone = cloneNavItem(item);
-		visibleList.appendChild(liClone);
-
-		const requiredWidth = liClone.offsetLeft + liClone.offsetWidth;
-		const availableWidth = navWidth - hamburgerWidth;
-		const SAFETY_MARGIN = 1; // 1px Sicherheitsmarge für Subpixel-Rendering
+		const requiredWidth = measurements.items[i]?.requiredWidth || 0;
 
 		if (requiredWidth > availableWidth + SAFETY_MARGIN) {
 			hasOverflow = true;
@@ -677,49 +846,40 @@ function populateTabs() {
 	}
 
 	if (fit.length > 0 && rest.length > 0) {
-		const lastVisibleItem = visibleList.children[fit.length - 1];
-		const visibleItemsWidth =
-			lastVisibleItem.offsetLeft + lastVisibleItem.offsetWidth;
-
-		const firstHiddenItemClone = cloneNavItem(rest[0]);
-		const submenu = firstHiddenItemClone.querySelector(
-			"ul, div[part='mega-menu']",
-		);
-		if (submenu) submenu.style.display = "none";
-
-		visibleList.appendChild(firstHiddenItemClone);
-		const firstHiddenItemWidth =
-			firstHiddenItemClone.getBoundingClientRect().width;
-		visibleList.removeChild(firstHiddenItemClone);
-
-		const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
-		if (visibleItemsWidth + gap + firstHiddenItemWidth <= navWidth) {
+		const visibleItemsWidth = measurements.items[fit.length - 1]?.requiredWidth || 0;
+		const firstHiddenIndex = sourceItems.indexOf(rest[0]);
+		const firstHiddenItemWidth = measurements.items[firstHiddenIndex]?.width || 0;
+		if (
+			visibleItemsWidth + measurements.gap + firstHiddenItemWidth <=
+			navWidth
+		) {
 			fit.push(rest.shift());
 		}
 	}
 
-	navEl.style.overflow = "";
-	visibleList.style.flexWrap = "";
-	visibleList.innerHTML = "";
-
-	if (fit.length) {
-		const clonedVisible = fit.map(cloneNavItem);
-		visibleList.append(...clonedVisible);
-		visibleList
-			.querySelectorAll(":scope > li")
-			.forEach((li) => setupSubmenu.call(this, li, "visible", 1));
+	const layoutSignature = getLayoutSignature({ fit, navWidth, rest });
+	if (this[layoutSignatureSymbol] === layoutSignature) {
+		setStyleValue(visibleList, "visibility", "visible");
+		this.style.visibility = "visible";
+		return;
 	}
+	this[layoutSignatureSymbol] = layoutSignature;
 
-	if (rest.length) {
-		const clonedHidden = rest.map(cloneNavItem);
-		hiddenList.append(...clonedHidden);
-		hamburgerButton.style.display = "flex";
-		hiddenList
-			.querySelectorAll(":scope > li")
-			.forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
-	}
+	const clonedVisible = fit.map(cloneNavItem);
+	const clonedHidden = rest.map(cloneNavItem);
+	replaceChildrenIfChanged.call(this, visibleList, clonedVisible);
+	replaceChildrenIfChanged.call(this, hiddenList, clonedHidden);
+
+	visibleList
+		.querySelectorAll(":scope > li")
+		.forEach((li) => setupSubmenu.call(this, li, "visible", 1));
+
+	setStyleValue(hamburgerButton, "display", rest.length ? "flex" : "none");
+	hiddenList
+		.querySelectorAll(":scope > li")
+		.forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
 
-	visibleList.style.visibility = "visible";
+	setStyleValue(visibleList, "visibility", "visible");
 	this.style.visibility = "visible";
 	fireCustomEvent(this, "monster-layout-change", {
 		visibleItems: fit,

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.136.7");
+	monsterVersion = new Version("4.137.5");
 
 	return monsterVersion;
 }

package/test/cases/components/datatable/pagination.mjs

@@ -123,6 +123,16 @@ describe('Pagination', function () {
                         expect(list).to.exist;
 
                         list.setAttribute('data-monster-adaptive-ready', 'true');
+                        control.refreshLayout();
+                        list.setAttribute('data-monster-adaptive-ready', 'true');
+                        let adaptiveReadyResetCount = 0;
+                        const originalSetAttribute = list.setAttribute.bind(list);
+                        list.setAttribute = (name, value) => {
+                            if (name === 'data-monster-adaptive-ready' && value === 'false') {
+                                adaptiveReadyResetCount++;
+                            }
+                            return originalSetAttribute(name, value);
+                        };
                         control.setPaginationState({currentPage: 2, totalPages: 5});
 
                         expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
@@ -130,6 +140,7 @@ describe('Pagination', function () {
                         setTimeout(() => {
                             try {
                                 expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
+                                expect(adaptiveReadyResetCount).to.equal(0);
                                 done();
                             } catch (e) {
                                 done(e);

package/test/cases/components/form/button-bar.mjs

@@ -1,6 +1,7 @@
 import * as chai from "chai";
 import { chaiDom } from "../../../util/chai-dom.mjs";
 import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 
 let expect = chai.expect;
 chai.use(chaiDom);
@@ -94,4 +95,92 @@ describe("ButtonBar", function () {
       }
     }, 50);
   });
+
+  it("should coalesce resize layouts and avoid unchanged layout writes", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="button-bar-wrapper">
+          <monster-button-bar id="overflow-bar"></monster-button-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("button-bar-wrapper");
+      const bar = document.getElementById("overflow-bar");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "50px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 50,
+      });
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      let hiddenWriteCount = 0;
+      const originalSetAttribute = switchButton.setAttribute.bind(switchButton);
+      switchButton.setAttribute = (name, value) => {
+        if (name === "hidden") hiddenWriteCount++;
+        return originalSetAttribute(name, value);
+      };
+
+      resizeObserver.triggerResize([]);
+      resizeObserver.triggerResize([]);
+
+      expect(scheduledCallbacks.length).to.equal(1);
+      await flushFrames();
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(scheduledCallbacks.length).to.equal(0);
+      expect(hiddenWriteCount).to.equal(0);
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });

package/test/cases/components/form/sheet.mjs

@@ -0,0 +1,126 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+
+describe("Sheet", function () {
+	let Sheet;
+
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				import("../../../../source/components/form/sheet.mjs")
+					.then((m) => {
+						Sheet = m.Sheet;
+						done();
+					})
+					.catch((e) => done(e));
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should register monster-sheet", function () {
+		expect(document.createElement("monster-sheet")).to.be.instanceof(Sheet);
+	});
+
+	it("should coalesce column resize pointer moves", function (done) {
+		const originalRequestAnimationFrame = window.requestAnimationFrame;
+		const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+		const originalCancelAnimationFrame = window.cancelAnimationFrame;
+		const originalGlobalCancelAnimationFrame = globalThis.cancelAnimationFrame;
+		const scheduledCallbacks = [];
+
+		try {
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallbacks.push(callback);
+				return scheduledCallbacks.length;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+			window.cancelAnimationFrame = () => {};
+			globalThis.cancelAnimationFrame = window.cancelAnimationFrame;
+
+			const mocks = document.getElementById("mocks");
+			const sheet = document.createElement("monster-sheet");
+			mocks.appendChild(sheet);
+
+			setTimeout(() => {
+				try {
+					const grid = sheet.shadowRoot.querySelector(
+						'[data-monster-role="grid"]',
+					);
+					const handle = sheet.shadowRoot.querySelector(
+						'[data-monster-role="column-resize"]',
+					);
+					const header = handle.parentElement;
+					grid.setPointerCapture = () => {};
+					grid.releasePointerCapture = () => {};
+					Object.defineProperty(header, "getBoundingClientRect", {
+						configurable: true,
+						value: () => ({ width: 120 }),
+					});
+
+					let resizeEvents = 0;
+					sheet.addEventListener("monster-sheet-resize-column", () => {
+						resizeEvents++;
+					});
+
+					const down = new Event("pointerdown", { bubbles: true });
+					Object.assign(down, {
+						button: 0,
+						clientX: 100,
+						clientY: 0,
+						pointerId: 1,
+					});
+					handle.dispatchEvent(down);
+
+					const firstMove = new Event("pointermove", { bubbles: true });
+					Object.assign(firstMove, {
+						clientX: 130,
+						clientY: 0,
+						pointerId: 1,
+					});
+					const secondMove = new Event("pointermove", { bubbles: true });
+					Object.assign(secondMove, {
+						clientX: 150,
+						clientY: 0,
+						pointerId: 1,
+					});
+					grid.dispatchEvent(firstMove);
+					grid.dispatchEvent(secondMove);
+
+					expect(scheduledCallbacks.length).to.equal(1);
+					scheduledCallbacks.shift()();
+					expect(resizeEvents).to.equal(1);
+
+					const repeatedMove = new Event("pointermove", { bubbles: true });
+					Object.assign(repeatedMove, {
+						clientX: 150,
+						clientY: 0,
+						pointerId: 1,
+					});
+					grid.dispatchEvent(repeatedMove);
+					scheduledCallbacks.shift()();
+					expect(resizeEvents).to.equal(1);
+					done();
+				} catch (e) {
+					done(e);
+				} finally {
+					window.requestAnimationFrame = originalRequestAnimationFrame;
+					globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+					window.cancelAnimationFrame = originalCancelAnimationFrame;
+					globalThis.cancelAnimationFrame = originalGlobalCancelAnimationFrame;
+				}
+			}, 0);
+		} catch (e) {
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+			window.cancelAnimationFrame = originalCancelAnimationFrame;
+			globalThis.cancelAnimationFrame = originalGlobalCancelAnimationFrame;
+			done(e);
+		}
+	});
+});