@schukai/monster 4.136.14 → 4.136.15

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.14"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.15"}

package/source/components/layout/popper.mjs

@@ -115,6 +115,8 @@ const dismissRecordSymbol = Symbol("dismissRecord");
  * @type {symbol}
  */
 const usesHostDismissSymbol = Symbol("usesHostDismiss");
+const contentUpdateHandlerSymbol = Symbol("contentUpdateHandler");
+const scheduledUpdateFrameSymbol = Symbol("scheduledUpdateFrame");
 
 /**
  * Popper component for displaying floating UI elements
@@ -248,6 +250,7 @@ class Popper extends CustomElement {
 		}
 
 		updatePopper.call(this);
+		attachContentUpdateListeners.call(this);
 		attachResizeObserver.call(this);
 	}
 
@@ -267,6 +270,8 @@ class Popper extends CustomElement {
 
 		unregisterFromHost.call(this);
 
+		detachContentUpdateListeners.call(this);
+		cancelScheduledPopperUpdate.call(this);
 		disconnectResizeObserver.call(this);
 	}
 
@@ -520,6 +525,55 @@ function attachResizeObserver() {
 	});
 }
 
+function attachContentUpdateListeners() {
+	const popperElement = this[popperElementSymbol];
+	if (!(popperElement instanceof HTMLElement)) {
+		return;
+	}
+
+	if (typeof this[contentUpdateHandlerSymbol] !== "function") {
+		this[contentUpdateHandlerSymbol] = () => {
+			schedulePopperUpdate.call(this);
+		};
+	}
+
+	for (const type of ["input", "change", "transitionend", "animationend"]) {
+		popperElement.addEventListener(type, this[contentUpdateHandlerSymbol]);
+	}
+}
+
+function detachContentUpdateListeners() {
+	const popperElement = this[popperElementSymbol];
+	const handler = this[contentUpdateHandlerSymbol];
+	if (!(popperElement instanceof HTMLElement) || typeof handler !== "function") {
+		return;
+	}
+
+	for (const type of ["input", "change", "transitionend", "animationend"]) {
+		popperElement.removeEventListener(type, handler);
+	}
+}
+
+function schedulePopperUpdate() {
+	if (this[scheduledUpdateFrameSymbol] !== undefined) {
+		return;
+	}
+
+	this[scheduledUpdateFrameSymbol] = requestAnimationFrame(() => {
+		this[scheduledUpdateFrameSymbol] = undefined;
+		updatePopper.call(this);
+	});
+}
+
+function cancelScheduledPopperUpdate() {
+	if (this[scheduledUpdateFrameSymbol] === undefined) {
+		return;
+	}
+
+	cancelAnimationFrame(this[scheduledUpdateFrameSymbol]);
+	this[scheduledUpdateFrameSymbol] = undefined;
+}
+
 /**
  * Disconnects resize observer
  * @private

package/test/cases/components/form/message-state-button.mjs

@@ -263,6 +263,64 @@ describe("MessageStateButton", function () {
 			}, 0);
 		});
 
+		it("should refresh the open popper after checkbox-driven form growth", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			const form = document.createElement("form");
+			const label = document.createElement("label");
+			const checkbox = document.createElement("input");
+			checkbox.type = "checkbox";
+			label.appendChild(checkbox);
+			label.append(" show more");
+			form.appendChild(label);
+
+			setTimeout(() => {
+				try {
+					button.setMessage(form);
+					button.showMessage();
+
+					setTimeout(() => {
+						try {
+							const popper = button.shadowRoot.querySelector(
+								'[data-monster-role="popper"]',
+							);
+							expect(popper).to.exist;
+
+							const originalHook = popper.monsterBeforeFloatingUpdate;
+							let updateCount = 0;
+							popper.monsterBeforeFloatingUpdate = () => {
+								updateCount += 1;
+								if (typeof originalHook === "function") {
+									originalHook();
+								}
+							};
+
+							checkbox.checked = true;
+							checkbox.dispatchEvent(
+								new Event("change", { bubbles: true, composed: true }),
+							);
+
+							setTimeout(() => {
+								try {
+									expect(updateCount).to.be.at.least(1);
+									done();
+								} catch (e) {
+									done(e);
+								}
+							}, 20);
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+
 		it("should resolve nested select message content to horizontal clipping only", async function () {
 			let mocks = document.getElementById("mocks");
 			const button = document.createElement("monster-message-state-button");