@schukai/monster 4.53.0 → 4.54.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 
 
+## [4.54.1] - 2025-12-28
+
+### Bug Fixes
+
+- Reorganize imports and improve code structure in CustomElement
+
+
+
+## [4.54.0] - 2025-12-28
+
+### Add Features
+
+- Update project references and add issue handling for button bar
+### Bug Fixes
+
+- revert to jsdom 26.1
+### Changes
+
+- close issue [#347](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/347)
+
+
+
 ## [4.53.0] - 2025-12-28
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"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.53.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"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.54.1"}

package/source/components/form/button-bar.mjs

@@ -112,6 +112,12 @@ const popperSwitchEventHandler = Symbol("popperSwitchEventHandler");
  */
 const popperNavElementSymbol = Symbol("popperNavElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const mutationObserverSymbol = Symbol("mutationObserver");
+
 /**
  * @private
  * @type {symbol}
@@ -257,6 +263,9 @@ class ButtonBar extends CustomElement {
 		}
 
 		disconnectResizeObserver.call(this);
+		if (this[mutationObserverSymbol]) {
+			this[mutationObserverSymbol].disconnect();
+		}
 	}
 
 	/**
@@ -318,67 +327,82 @@ function isElementTrulyVisible(element) {
  */
 function initEventHandler() {
 	const self = this;
+
+	const triggerRecalculation = () => {
+		if (self[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				self[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				if (e.message !== "has already run") throw e;
+				delete self[timerCallbackSymbol];
+			}
+		}
+
+		self[timerCallbackSymbol] = new DeadMansSwitch(50, () => {
+			requestAnimationFrame(() => {
+				updatePopper.call(self);
+				self[dimensionsSymbol].setVia("data.calculated", false);
+				try {
+					checkAndRearrangeButtons.call(self);
+				} catch (error) {
+					addErrorAttribute(
+						self,
+						error?.message || "An error occurred while rearranging the buttons",
+					);
+				}
+			});
+		});
+	};
+
+	const mutationCallback = (mutationList) => {
+		let needsRecalc = false;
+		for (const mutation of mutationList) {
+			if (mutation.type === "attributes") {
+				const target = mutation.target;
+				if (target instanceof HTMLElement) {
+					const ref = target.getAttribute("data-monster-reference");
+					if (ref && !isElementTrulyVisible(target)) {
+						self[dimensionsSymbol].setVia(`data.button.${ref}`, 0);
+						needsRecalc = true;
+					}
+				}
+			}
+		}
+		if (needsRecalc) {
+			triggerRecalculation();
+		}
+	};
+
 	/**
 	 * @param {Event} event
 	 */
 	self[closeEventHandler] = (event) => {
 		const path = event.composedPath();
-
-		for (const [, element] of Object.entries(path)) {
-			if (element === self) {
-				return;
-			}
+		for (const element of path) {
+			if (element === self) return;
 		}
-
 		hide.call(self);
 	};
 
 	if (self[buttonBarSlotElementSymbol]) {
-		self[buttonBarSlotElementSymbol].addEventListener("slotchange", (event) => {
+		self[buttonBarSlotElementSymbol].addEventListener("slotchange", () => {
 			checkAndRearrangeButtons.call(self);
 		});
 	}
 
 	if (self[popperElementSymbol]) {
-		self[popperElementSymbol].addEventListener("slotchange", (event) => {
+		self[popperElementSymbol].addEventListener("slotchange", () => {
 			checkAndRearrangeButtons.call(self);
 		});
 	}
 
-	// data-monster-options
 	self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = function (value) {
 		self.setOption("classes.button", value);
 	};
 
-	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
-		if (self[timerCallbackSymbol] instanceof DeadMansSwitch) {
-			try {
-				self[timerCallbackSymbol].touch();
-				return;
-			} catch (e) {
-				// catch Error("has already run");
-				if (e.message !== "has already run") {
-					throw e;
-				}
-				delete self[timerCallbackSymbol];
-			}
-		}
-
-		self[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-			requestAnimationFrame(() => {
-				updatePopper.call(self);
-				self[dimensionsSymbol].setVia("data.calculated", false);
-				try {
-					checkAndRearrangeButtons.call(self);
-				} catch (error) {
-					addErrorAttribute(
-						this,
-						error?.message || "An error occurred while rearranging the buttons",
-					);
-				}
-			});
-		});
-	});
+	self[resizeObserverSymbol] = new ResizeObserver(triggerRecalculation);
+	self[mutationObserverSymbol] = new MutationObserver(mutationCallback);
 
 	initSlotChangedHandler.call(self);
 }
@@ -440,17 +464,39 @@ function rearrangeButtons() {
 			continue;
 		}
 
-		if (isElementTrulyVisible(element)) {
-			const buttonWidth = this[dimensionsSymbol].getVia(`data.button.${ref}`);
-			if (sum + buttonWidth > space) {
+		let buttonWidth = 0;
+		try {
+			buttonWidth = this[dimensionsSymbol].getVia(`data.button.${ref}`);
+		} catch (e) {
+			// If the path does not exist, pathfinder throws an error.
+			// In this case, we assume the width is 0.
+			// This can happen for buttons that have never been visible.
+		}
+		const style = getComputedStyle(element);
+
+		// A user-hidden button should not participate in layout calculations.
+		// We will assign it to the popper to keep it out of the flow.
+		if (style.display === "none") {
+			// This button is not visible. It could be user-hidden, or it could be
+			// in the popper which is currently hidden.
+			// We should only count it towards the popper if it has a non-zero width,
+			// which implies it's a genuinely overflowing button, not one that is
+			// user-hidden from the start.
+			if (buttonWidth > 0) {
 				buttonsToMoveToPopper.push(element);
 			} else {
-				sum += buttonWidth;
+				// It has 0 width. Treat it as a truly hidden element.
+				// Put it in the main slot, where it will be invisible and take no space.
 				visibleButtonsInMainSlot.push(element);
 			}
+			continue;
+		}
+
+		        const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 2;
+		        if (sum + buttonWidth > space - switchWidth) {			buttonsToMoveToPopper.push(element);
 		} else {
-			// If a button is not truly visible, force it into the popper slot
-			buttonsToMoveToPopper.push(element);
+			sum += buttonWidth;
+			visibleButtonsInMainSlot.push(element);
 		}
 	}
 
@@ -462,11 +508,9 @@ function rearrangeButtons() {
 		button.removeAttribute("slot");
 	}
 
-	const trulyVisibleButtonsInPopper = Array.from(
-		getSlottedElements.call(this, ":scope", "popper"),
-	).filter(isElementTrulyVisible);
+	const buttonsInPopper = getSlottedElements.call(this, ":scope", "popper");
 
-	if (trulyVisibleButtonsInPopper.length > 0) {
+	if (buttonsInPopper.size > 0) {
 		this[switchElementSymbol].classList.remove("hidden");
 	} else {
 		this[switchElementSymbol].classList.add("hidden");
@@ -576,9 +620,11 @@ function calculateButtonBarDimensions() {
 		const ref = button.getAttribute("data-monster-reference");
 		if (ref === null) continue;
 
-		// Only consider truly visible buttons for width calculation
+		buttonReferences.push(ref);
+
+		// Only calculate width for visible buttons. Assume invisible ones
+		// (e.g. in popper) have their width calculated previously and stored.
 		if (isElementTrulyVisible(button)) {
-			buttonReferences.push(ref);
 			this[dimensionsSymbol].setVia(
 				`data.button.${ref}`,
 				calcBoxWidth.call(this, button),
@@ -586,6 +632,13 @@ function calculateButtonBarDimensions() {
 		}
 	}
 
+	if (this[switchElementSymbol]) {
+		this[dimensionsSymbol].setVia(
+			"data.switchWidth",
+			this[switchElementSymbol].offsetWidth,
+		);
+	}
+
 	this[dimensionsSymbol].setVia("data.calculated", true);
 	this[dimensionsSymbol].setVia("data.buttonReferences", buttonReferences);
 }
@@ -595,10 +648,19 @@ function calculateButtonBarDimensions() {
  */
 function updateResizeObserverObservation() {
 	this[resizeObserverSymbol].disconnect();
+	if (this[mutationObserverSymbol]) {
+		this[mutationObserverSymbol].disconnect();
+	}
 
 	const slottedNodes = getSlottedElements.call(this);
 	slottedNodes.forEach((node) => {
 		this[resizeObserverSymbol].observe(node);
+		if (this[mutationObserverSymbol]) {
+			this[mutationObserverSymbol].observe(node, {
+				attributes: true,
+				attributeFilter: ["style", "class"],
+			});
+		}
 	});
 
 	requestAnimationFrame(() => {