@schukai/monster 4.136.15 → 4.136.16

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.15"}
+{"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.16"}

package/source/components/form/message-state-button.mjs

@@ -310,6 +310,18 @@ class MessageStateButton extends Popper {
 		return resolveContentOverflowMode.call(this);
 	}
 
+	/**
+	 * Recalculates the open message popper after dynamic content changes.
+	 *
+	 * @return {MessageStateButton}
+	 */
+	recalcMessage() {
+		applyResolvedMessagePresentation.call(this);
+		applyMeasuredMessageWidth.call(this);
+		super.recalcPopper();
+		return this;
+	}
+
 	/**
 	 *
 	 * @return {MessageStateButton}

package/source/components/layout/popper.mjs

@@ -115,8 +115,6 @@ 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
@@ -250,7 +248,6 @@ class Popper extends CustomElement {
 		}
 
 		updatePopper.call(this);
-		attachContentUpdateListeners.call(this);
 		attachResizeObserver.call(this);
 	}
 
@@ -269,9 +266,6 @@ class Popper extends CustomElement {
 		}
 
 		unregisterFromHost.call(this);
-
-		detachContentUpdateListeners.call(this);
-		cancelScheduledPopperUpdate.call(this);
 		disconnectResizeObserver.call(this);
 	}
 
@@ -284,6 +278,17 @@ class Popper extends CustomElement {
 		return this;
 	}
 
+	/**
+	 * Recalculates the size and position of an already open popper.
+	 *
+	 * @return {Popper}
+	 */
+	recalcPopper() {
+		applyContentOverflowMode.call(this);
+		updatePopper.call(this);
+		return this;
+	}
+
 	/**
 	 * Resolves the effective popper options for the current render pass.
 	 * Subclasses can override this to adapt positioning without mutating
@@ -525,55 +530,6 @@ 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,7 +263,7 @@ describe("MessageStateButton", function () {
 			}, 0);
 		});
 
-		it("should refresh the open popper after checkbox-driven form growth", function (done) {
+		it("should recalculate 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";
@@ -299,9 +299,7 @@ describe("MessageStateButton", function () {
 							};
 
 							checkbox.checked = true;
-							checkbox.dispatchEvent(
-								new Event("change", { bubbles: true, composed: true }),
-							);
+							button.recalcMessage();
 
 							setTimeout(() => {
 								try {