@schukai/monster 4.137.2 → 4.137.3

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.137.2"}
+{"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.137.3"}

package/source/components/layout/tabs.mjs

@@ -580,6 +580,7 @@ function initPopperSwitch() {
 	}
 
 	this[switchElementSymbol] = switchButton;
+	updatePopperSwitchVisibility.call(this);
 }
 
 /**
@@ -1180,25 +1181,36 @@ function adjustButtonVisibility() {
 	const self = this;
 
 	return new Promise((resolve) => {
-		const observer = new MutationObserver(function (mutations) {
+		let resolved = false;
+		let observer;
+		const runIfRendered = () => {
+			if (resolved === true) return;
+
 			const defCount = self.getOption("buttons.standard").length;
 			const domCount = self[navElementSymbol].querySelectorAll(
-				'button[data-monster-role="button"]',
+				'button[data-monster-role="button"][data-monster-tab-reference]',
 			).length;
 
-			// in drawing
 			if (defCount !== domCount) return;
 
-			observer.disconnect();
-
+			resolved = true;
+			observer?.disconnect();
 			checkAndRearrangeButtons.call(self);
-
 			resolve();
+		};
+
+		observer = new MutationObserver(function () {
+			runIfRendered();
 		});
 
 		observer.observe(self[navElementSymbol], {
 			attributes: true,
+			childList: true,
+			subtree: true,
 		});
+
+		runIfRendered();
+		getWindow().requestAnimationFrame(runIfRendered);
 	});
 }
 
@@ -1273,16 +1285,25 @@ function rearrangeButtons() {
 
 		setButtonCollections.call(this, standardButtons, popperButtons);
 
-		if (this[switchElementSymbol]) {
-			if (popperButtons.length > 0) {
-				this[switchElementSymbol].classList.remove("hidden");
-			} else {
-				this[switchElementSymbol].classList.add("hidden");
-			}
-		}
+		updatePopperSwitchVisibility.call(this);
 	});
 }
 
+/**
+ * @private
+ */
+function updatePopperSwitchVisibility() {
+	if (!this[switchElementSymbol]) {
+		return;
+	}
+
+	if (this.getOption("buttons.popper").length > 0) {
+		this[switchElementSymbol].classList.remove("hidden");
+	} else {
+		this[switchElementSymbol].classList.add("hidden");
+	}
+}
+
 /**
  * @private
  * @param {string} ref