@schukai/monster 4.122.2 → 4.123.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 
 
+## [4.123.0] - 2026-02-17
+
+### Add Features
+
+- Optimize tree menu entry visibility handling
+- Enhance tree menu entry state management for improved performance and consistency
+
+
+
 ## [4.122.2] - 2026-02-16
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","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.122.2"}
+{"author":"Volker Schukai","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.123.0"}

package/source/components/tree-menu/html-tree-menu.mjs

@@ -124,6 +124,9 @@ class HtmlTreeMenu extends CustomElement {
 				onlazyloaded: null,
 				onlazyerror: null,
 			},
+			updater: {
+				batchUpdates: true,
+			},
 			entries: [],
 		});
 	}
@@ -687,50 +690,46 @@ function applyEntryState(index, state, event) {
 		event,
 	});
 
-	this.setOption("entries." + index + ".state", state);
-	const newVisibility = state === "open" ? "visible" : "hidden";
+	const entries = this.getOption("entries", []);
+	const nextEntries = [...entries];
+	let changed = false;
 
-	const entryNode = this.shadowRoot.querySelector(
-		"[data-monster-insert-reference=entries-" + index + "]",
-	);
+	nextEntries[index] = Object.assign({}, entry, {
+		state,
+	});
+	changed = true;
+	const newVisibility = state === "open" ? "visible" : "hidden";
+	const targetIntend = entry.intend;
+	const end = getSubtreeEndIndex(entries, index);
+	const childIntend = targetIntend + 1;
 
-	if (entryNode?.hasAttribute(ATTRIBUTE_INTEND)) {
-		const intend = entryNode.getAttribute(ATTRIBUTE_INTEND);
-		let ref = entryNode.nextElementSibling;
-		const childIntend = parseInt(intend) + 1;
+	for (let i = index + 1; i < end; i += 1) {
+		const childEntry = entries[i];
 
-		const cmp = (a, b) => {
-			if (state === "open") {
-				return a === b;
+		if (state === "open") {
+			if (childEntry.intend !== childIntend) {
+				continue;
 			}
-
-			return a >= b;
-		};
-
-		while (ref?.hasAttribute(ATTRIBUTE_INTEND)) {
-			const refIntend = ref.getAttribute(ATTRIBUTE_INTEND);
-
-			if (!cmp(Number.parseInt(refIntend), childIntend)) {
-				if (refIntend === intend) {
-					break;
-				}
-				ref = ref.nextElementSibling;
+			if (childEntry.visibility === newVisibility) {
 				continue;
 			}
-
-			const refIndex = ref
-				.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
-				.split("-")
-				.pop();
-
-			this.setOption("entries." + refIndex + ".visibility", newVisibility);
-
-			if (state === "close") {
-				this.setOption("entries." + refIndex + ".state", "close");
+		} else {
+			if (childEntry.visibility === newVisibility) {
+				continue;
 			}
+		}
 
-			ref = ref.nextElementSibling;
+		const updates = { visibility: newVisibility };
+		if (state === "close" && childEntry["has-children"]) {
+			updates.state = "close";
 		}
+
+		nextEntries[i] = Object.assign({}, childEntry, updates);
+		changed = true;
+	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
 	}
 }
 
@@ -751,16 +750,29 @@ function setEntryVisibility(value, visibility) {
 		return;
 	}
 
-	this.setOption("entries." + index + ".visibility", visibility);
-	const intend = target.intend;
-	for (let i = index + 1; i < entries.length; i += 1) {
-		if (entries[i].intend <= intend) {
-			break;
-		}
+	const nextEntries = [...entries];
+	let changed = false;
+	if (target.visibility !== visibility) {
+		nextEntries[index] = Object.assign({}, target, {
+			visibility,
+		});
+		changed = true;
+	}
+	const end = getSubtreeEndIndex(entries, index);
+	for (let i = index + 1; i < end; i += 1) {
 		if (visibility === "hidden") {
-			this.setOption("entries." + i + ".visibility", "hidden");
+			if (entries[i].visibility !== "hidden") {
+				nextEntries[i] = Object.assign({}, entries[i], {
+					visibility: "hidden",
+				});
+				changed = true;
+			}
 		}
 	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
+	}
 }
 
 /**
@@ -804,6 +816,9 @@ function collapseEntry(value) {
 	if (!entry || entry["has-children"] === false) {
 		return;
 	}
+	if (entry.state === "close") {
+		return;
+	}
 
 	const doAction = getAction.call(this, ["oncollapse", "close"]);
 	if (isFunction(doAction)) {
@@ -814,15 +829,38 @@ function collapseEntry(value) {
 		index,
 	});
 
-	this.setOption("entries." + index + ".state", "close");
-
 	const entries = this.getOption("entries", []);
+	const nextEntries = [...entries];
+	let changed = false;
+	nextEntries[index] = Object.assign({}, entries[index], {
+		state: "close",
+	});
+	changed = true;
 	const end = getSubtreeEndIndex(entries, index);
 	for (let i = index + 1; i < end; i += 1) {
-		this.setOption("entries." + i + ".visibility", "hidden");
-		if (entries[i]["has-children"]) {
-			this.setOption("entries." + i + ".state", "close");
+		const childEntry = entries[i];
+		const hasChildren = childEntry["has-children"] === true;
+		if (
+			childEntry.visibility === "hidden" &&
+			(!hasChildren || childEntry.state === "close")
+		) {
+			continue;
+		}
+
+		const updates = {
+			visibility: "hidden",
+		};
+		if (hasChildren && childEntry.state !== "close") {
+			updates.state = "close";
 		}
+
+		const updatedChild = Object.assign({}, childEntry, updates);
+		nextEntries[i] = updatedChild;
+		changed = true;
+	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
 	}
 }
 
@@ -990,16 +1028,37 @@ function expandEntryByIndex(index) {
 		index,
 	});
 
-	this.setOption("entries." + index + ".state", "open");
-	this.setOption("entries." + index + ".visibility", "visible");
-
 	const entries = this.getOption("entries", []);
+	const nextEntries = [...entries];
+	let changed = false;
+	nextEntries[index] = Object.assign({}, entry, {
+		state: "open",
+		visibility: "visible",
+	});
+	changed = true;
 	const end = getSubtreeEndIndex(entries, index);
 	for (let i = index + 1; i < end; i += 1) {
-		this.setOption("entries." + i + ".visibility", "visible");
-		if (entries[i]["has-children"]) {
-			this.setOption("entries." + i + ".state", "open");
+		const childEntry = entries[i];
+		const changedVisibility = childEntry.visibility !== "visible";
+		const changedState =
+			childEntry["has-children"] && childEntry.state !== "open";
+
+		if (!changedVisibility && !changedState) {
+			continue;
 		}
+
+		const updatedChild = Object.assign({}, childEntry, {
+			visibility: "visible",
+		});
+		if (childEntry["has-children"]) {
+			updatedChild.state = "open";
+		}
+		nextEntries[i] = updatedChild;
+		changed = true;
+	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
 	}
 }
 

package/source/components/tree-menu/tree-menu.mjs

@@ -173,6 +173,10 @@ class TreeMenu extends CustomElement {
 				},
 			},
 
+			updater: {
+				batchUpdates: true,
+			},
+
 			data: [],
 			entries: [],
 		});
@@ -387,7 +391,14 @@ function initEventHandler() {
 			doAction.call(this, this.getOption("entries." + index), index);
 		}
 
-		this.setOption("entries." + index + ".state", newState);
+		const entries = this.getOption("entries", []);
+		const nextEntries = [...entries];
+		let changed = false;
+
+		nextEntries[index] = Object.assign({}, currentEntry, {
+			state: newState,
+		});
+		changed = true;
 		const newVisibility = newState === "open" ? "visible" : "hidden";
 
 		if (container.hasAttribute(ATTRIBUTE_INTEND)) {
@@ -418,16 +429,25 @@ function initEventHandler() {
 					.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
 					.split("-")
 					.pop();
-
-				this.setOption("entries." + refIndex + ".visibility", newVisibility);
-
-				if (newState === "close") {
-					this.setOption("entries." + refIndex + ".state", "close");
+				const childIndex = Number.parseInt(refIndex);
+				const childEntry = entries[childIndex];
+				if (!childEntry) {
+					ref = ref.nextElementSibling;
+					continue;
 				}
 
+				nextEntries[childIndex] = Object.assign({}, childEntry, {
+					visibility: newVisibility,
+					...(newState === "close" ? { state: "close" } : {}),
+				});
+				changed = true;
 				ref = ref.nextElementSibling;
 			}
 		}
+
+		if (changed === true) {
+			this.setOption("entries", nextEntries);
+		}
 	};
 
 	const types = this.getOption("toggleEventType", ["click"]);