@schukai/monster 4.136.14 → 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.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.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

@@ -266,7 +266,6 @@ class Popper extends CustomElement {
 		}
 
 		unregisterFromHost.call(this);
-
 		disconnectResizeObserver.call(this);
 	}
 
@@ -279,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

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

@@ -263,6 +263,62 @@ describe("MessageStateButton", function () {
 			}, 0);
 		});
 
+		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";
+			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;
+							button.recalcMessage();
+
+							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");