@schukai/monster 4.52.0 → 4.54.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 
 
+## [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
+
+- Improve button visibility handling and optimize element width calculations
+### Bug Fixes
+
+- Preserve scroll position when updating hash for tabs
+
+
+
 ## [4.52.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.52.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.0"}

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();
+		}
 	}
 
 	/**
@@ -300,72 +309,100 @@ function initDefaultsFromAttributes(obj) {
 	return obj;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementTrulyVisible(element) {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    const computedStyle = getComputedStyle(element);
+    return computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden' && computedStyle.opacity !== '0' && element.offsetWidth > 0 && element.offsetHeight > 0;
+}
+
 /**
  * @private
  */
 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);
 }
@@ -389,16 +426,21 @@ function checkAndRearrangeButtons() {
  * @return {Object}
  */
 function rearrangeButtons() {
-	let sum = this[switchElementSymbol].offsetWidth;
+	let sum = 0;
+	// Only add the popper switch's width if it's currently visible.
+	if (isElementTrulyVisible(this[switchElementSymbol])) {
+		sum += this[switchElementSymbol].offsetWidth;
+	}
 	const space = this[dimensionsSymbol].getVia("data.space");
 
 	const buttonReferences = this[dimensionsSymbol].getVia(
 		"data.buttonReferences",
 	);
 
-	for (const ref of buttonReferences) {
-		sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+	const visibleButtonsInMainSlot = [];
+	const buttonsToMoveToPopper = [];
 
+	for (const ref of buttonReferences) {
 		let elements = getSlottedElements.call(
 			this,
 			'[data-monster-reference="' + ref + '"]',
@@ -422,15 +464,53 @@ function rearrangeButtons() {
 			continue;
 		}
 
-		if (sum > space) {
-			element.setAttribute("slot", "popper");
+		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 {
+				// 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 {
-			element.removeAttribute("slot");
+			sum += buttonWidth;
+			visibleButtonsInMainSlot.push(element);
 		}
 	}
 
-	const inVisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
-	if (inVisibleButtons.size > 0) {
+	for (const button of buttonsToMoveToPopper) {
+		button.setAttribute("slot", "popper");
+	}
+
+	for (const button of visibleButtonsInMainSlot) {
+		button.removeAttribute("slot");
+	}
+
+	const buttonsInPopper = getSlottedElements.call(this, ":scope", "popper");
+
+	if (buttonsInPopper.size > 0) {
 		this[switchElementSymbol].classList.remove("hidden");
 	} else {
 		this[switchElementSymbol].classList.add("hidden");
@@ -483,9 +563,8 @@ function calculateButtonBarDimensions() {
 		try {
 			pixel = convertToPixels(width);
 		} catch (e) {
-			addAttributeToken(
+			addErrorAttribute(
 				this,
-				ATTRIBUTE_ERRORMESSAGE,
 				e?.message || "An error occurred while calculating the dimensions",
 			);
 		}
@@ -503,9 +582,8 @@ function calculateButtonBarDimensions() {
 		try {
 			borderWidthWithoutUnit = convertToPixels(borderWidth);
 		} catch (e) {
-			addAttributeToken(
+			addErrorAttribute(
 				this,
-				ATTRIBUTE_ERRORMESSAGE,
 				e?.message || "An error occurred while calculating the dimensions",
 			);
 		}
@@ -521,35 +599,44 @@ function calculateButtonBarDimensions() {
 
 	const buttonReferences = [];
 
-	const visibleButtons = getSlottedElements.call(this, ":scope", null); // null ↦ o
+	// Get all buttons, regardless of their current slot
+	const allButtons = Array.from(getSlottedElements.call(this, ":scope", null));
+	const popperButtons = Array.from(getSlottedElements.call(this, ":scope", "popper"));
+
+	const combinedButtons = [...allButtons, ...popperButtons].filter((button, index, self) => {
+		// Filter out duplicates based on data-monster-reference if present, or element itself
+		return self.findIndex(b => b.dataset.monsterReference === button.dataset.monsterReference || b === button) === index;
+	});
+
+	for (const button of combinedButtons) {
+		if (!(button instanceof HTMLElement)) {
+			continue;
+		}
 
-	for (const [, button] of visibleButtons.entries()) {
 		if (!button.hasAttribute("data-monster-reference")) {
-			button.setAttribute("data-monster-reference", new ID("vb").toString());
+			button.setAttribute("data-monster-reference", new ID("btn").toString());
 		}
 
 		const ref = button.getAttribute("data-monster-reference");
 		if (ref === null) continue;
 
 		buttonReferences.push(ref);
-		this[dimensionsSymbol].setVia(
-			`data.button.${ref}`,
-			calcBoxWidth.call(this, button),
-		);
-	}
 
-	const invisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
-	for (const [, button] of invisibleButtons.entries()) {
-		if (!button.hasAttribute("data-monster-reference")) {
-			button.setAttribute("data-monster-reference", new ID("ib").toString());
+		// Only calculate width for visible buttons. Assume invisible ones
+		// (e.g. in popper) have their width calculated previously and stored.
+		if (isElementTrulyVisible(button)) {
+			this[dimensionsSymbol].setVia(
+				`data.button.${ref}`,
+				calcBoxWidth.call(this, button),
+			);
 		}
+	}
 
-		const ref = button.getAttribute("data-monster-reference");
-		if (ref === null) continue;
-
-		if (ref.indexOf("ib") !== 0) {
-			buttonReferences.push(ref);
-		}
+	if (this[switchElementSymbol]) {
+		this[dimensionsSymbol].setVia(
+			"data.switchWidth",
+			this[switchElementSymbol].offsetWidth,
+		);
 	}
 
 	this[dimensionsSymbol].setVia("data.calculated", true);
@@ -561,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(() => {

package/source/components/form/form.mjs

@@ -17,9 +17,9 @@ import "../form/field-set.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { DataSet } from "../datatable/dataset.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
-	getSlottedElements,
+  assembleMethodSymbol,
+  registerCustomElement,
+  getSlottedElements,
 } from "../../dom/customelement.mjs";
 import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
 import { FormStyleSheet } from "./stylesheet/form.mjs";
@@ -60,116 +60,116 @@ const debounceBindSymbol = Symbol("debounceBind");
  * @fires monster-changed
  */
 class Form extends DataSet {
-	/**
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} classes Class definitions
-	 * @property {string} classes.form Form class
-	 * @property {Object} writeBack Write back definitions
-	 * @property {string[]} writeBack.events Write back events
-	 * @property {Object} bind Bind definitions
-	 * @property {Object} reportValidity Report validity definitions
-	 * @property {string} reportValidity.selector Report validity selector
-	 * @property {boolean} features.mutationObserver Mutation observer feature
-	 * @property {boolean} features.writeBack Write back feature
-	 * @property {boolean} features.bind Bind feature
-	 */
-	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			classes: {
-				form: "",
-			},
-
-			writeBack: {
-				events: ["keyup", "click", "change", "drop", "touchend", "input"],
-			},
-
-			reportValidity: {
-				selector:
-					"input,select,textarea,monster-select,monster-toggle-switch,monster-password",
-			},
-
-			eventProcessing: true,
-		});
-
-		obj["features"]["mutationObserver"] = false;
-		obj["features"]["writeBack"] = true;
-
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-form";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [FormStyleSheet, InvalidStyleSheet];
-	}
-
-	/**
-	 *
-	 */
-	[assembleMethodSymbol]() {
-		const selector = this.getOption("datasource.selector");
-
-		if (!selector) {
-			this[datasourceLinkedElementSymbol] = getDocument().createElement(
-				"monster-datasource-dom",
-			);
-		}
-
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		initDataSourceHandler.call(this);
-	}
-
-	/**
-	 * This method is called when the component is created.
-	 * @since 3.70.0
-	 * @return {Promise}
-	 */
-	refresh() {
-		return this.write().then(() => {
-			super.refresh();
-			return this;
-		});
-	}
-
-	/**
-	 * Run reportValidation on all child html form controls.
-	 *
-	 * @since 2.10.0
-	 * @return {boolean}
-	 */
-	reportValidity() {
-		let valid = true;
-
-		const selector = this.getOption("reportValidity.selector");
-		const nodes = getSlottedElements.call(this, selector);
-
-		nodes.forEach((node) => {
-			if (typeof node.reportValidity === "function") {
-				if (node.reportValidity() === false) {
-					valid = false;
-				}
-			}
-		});
-
-		return valid;
-	}
+  /**
+   * @property {Object} templates Template definitions
+   * @property {string} templates.main Main template
+   * @property {Object} classes Class definitions
+   * @property {string} classes.form Form class
+   * @property {Object} writeBack Write back definitions
+   * @property {string[]} writeBack.events Write back events
+   * @property {Object} bind Bind definitions
+   * @property {Object} reportValidity Report validity definitions
+   * @property {string} reportValidity.selector Report validity selector
+   * @property {boolean} features.mutationObserver Mutation observer feature
+   * @property {boolean} features.writeBack Write back feature
+   * @property {boolean} features.bind Bind feature
+   */
+  get defaults() {
+    const obj = Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+
+      classes: {
+        form: "",
+      },
+
+      writeBack: {
+        events: ["keyup", "click", "change", "drop", "touchend", "input"],
+      },
+
+      reportValidity: {
+        selector:
+          "input,select,textarea,monster-select,monster-toggle-switch,monster-password",
+      },
+
+      eventProcessing: true,
+    });
+
+    obj["features"]["mutationObserver"] = false;
+    obj["features"]["writeBack"] = true;
+
+    return obj;
+  }
+
+  /**
+   *
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-form";
+  }
+
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [FormStyleSheet, InvalidStyleSheet];
+  }
+
+  /**
+   *
+   */
+  [assembleMethodSymbol]() {
+    const selector = this.getOption("datasource.selector");
+
+    if (!selector) {
+      this[datasourceLinkedElementSymbol] = getDocument().createElement(
+        "monster-datasource-dom",
+      );
+    }
+
+    super[assembleMethodSymbol]();
+
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+    initDataSourceHandler.call(this);
+  }
+
+  /**
+   * This method is called when the component is created.
+   * @since 3.70.0
+   * @return {Promise}
+   */
+  refresh() {
+    return this.write().then(() => {
+      super.refresh();
+      return this;
+    });
+  }
+
+  /**
+   * Run reportValidation on all child html form controls.
+   *
+   * @since 2.10.0
+   * @return {boolean}
+   */
+  reportValidity() {
+    let valid = true;
+
+    const selector = this.getOption("reportValidity.selector");
+    const nodes = getSlottedElements.call(this, selector);
+
+    nodes.forEach((node) => {
+      if (typeof node.reportValidity === "function") {
+        if (node.reportValidity() === false) {
+          valid = false;
+        }
+      }
+    });
+
+    return valid;
+  }
 }
 
 function initDataSourceHandler() {}
@@ -179,47 +179,47 @@ function initDataSourceHandler() {}
  * @return {initEventHandler}
  */
 function initEventHandler() {
-	this[debounceBindSymbol] = {};
-
-	if (this.getOption("features.writeBack") === true) {
-		setTimeout(() => {
-			const events = this.getOption("writeBack.events");
-			for (const event of events) {
-				this.addEventListener(event, (e) => {
-					if (!this.reportValidity()) {
-						this.classList.add("invalid");
-						setTimeout(() => {
-							this.classList.remove("invalid");
-						}, 1000);
-
-						return;
-					}
-
-					if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
-						try {
-							this[debounceWriteBackSymbol].touch();
-							return;
-						} catch (e) {
-							if (e.message !== "has already run") {
-								throw e;
-							}
-							delete this[debounceWriteBackSymbol];
-						}
-					}
-
-					this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
-						setTimeout(() => {
-							this.write().catch((e) => {
-								addAttributeToken(this, "error", e.message || `${e}`);
-							});
-						}, 0);
-					});
-				});
-			}
-		}, 0);
-	}
-
-	return this;
+  this[debounceBindSymbol] = {};
+
+  if (this.getOption("features.writeBack") === true) {
+    setTimeout(() => {
+      const events = this.getOption("writeBack.events");
+      for (const event of events) {
+        this.addEventListener(event, (e) => {
+          if (!this.reportValidity()) {
+            this.classList.add("invalid");
+            setTimeout(() => {
+              this.classList.remove("invalid");
+            }, 1000);
+
+            return;
+          }
+
+          if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
+            try {
+              this[debounceWriteBackSymbol].touch();
+              return;
+            } catch (e) {
+              if (e.message !== "has already run") {
+                throw e;
+              }
+              delete this[debounceWriteBackSymbol];
+            }
+          }
+
+          this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
+            setTimeout(() => {
+              this.write().catch((e) => {
+                addAttributeToken(this, "error", e.message || `${e}`);
+              });
+            }, 0);
+          });
+        });
+      }
+    }, 0);
+  }
+
+  return this;
 }
 
 /**
@@ -227,10 +227,10 @@ function initEventHandler() {
  * @return {FilterButton}
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-	return this;
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
+  return this;
 }
 
 /**
@@ -238,8 +238,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
         <div data-monster-role="control" part="control">
             <form data-monster-attributes="disabled path:disabled | if:true, class path:classes.form"
                   data-monster-role="form"

package/source/components/layout/utils/attach-tabs-hash-sync.mjs

@@ -108,7 +108,10 @@ export function attachTabsHashSync(
 
 		const newHash = createBracketedKeyValueHash(hashObj);
 		if (location.hash !== newHash) {
+			const scrollX = window.scrollX;
+			const scrollY = window.scrollY;
 			history.replaceState(null, "", newHash);
+			window.scrollTo(scrollX, scrollY);
 		}
 		lastKnownActiveTabId = activeTabId;
 		lastKnownAllTabIds = allTabIds;