@schukai/monster 3.95.0 → 3.95.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [3.95.1] - 2024-12-23
+
+### Bug Fixes
+
+- check rendering [#271](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/271)
+
+
+
 ## [3.95.0] - 2024-12-23
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@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":"3.95.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@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":"3.95.1"}

package/source/components/layout/tabs.mjs

@@ -36,7 +36,7 @@ import {
     findTargetElementFromEvent,
     fireCustomEvent,
 } from "../../dom/events.mjs";
-import {getDocument} from "../../dom/util.mjs";
+import {getDocument, getWindow} from "../../dom/util.mjs";
 import {random} from "../../math/random.mjs";
 import {getGlobal} from "../../types/global.mjs";
 import {ID} from "../../types/id.mjs";
@@ -150,6 +150,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @example /examples/components/layout/tabs-removable
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/271.html
  *
  * @since 3.74.0
  * @copyright schukai GmbH
@@ -1027,35 +1028,43 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function rearrangeButtons() {
-    const standardButtons = [];
-    const popperButtons = [];
 
-    let sum = 0;
-    const space = this[dimensionsSymbol].getVia("data.space");
+    getWindow().requestAnimationFrame(() => {
 
-    const buttons = this.getOption("buttons.standard");
-    for (const [, button] of buttons.entries()) {
-        const ref = button?.reference;
+        const standardButtons = [];
+        const popperButtons = [];
+        let sum = 0;
+        const space = this[dimensionsSymbol].getVia("data.space");
+
+        if (space <= 0) {
+            return;
+        }
 
-        sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+        const buttons = this.getOption("buttons.standard");
+        for (const [, button] of buttons.entries()) {
+            const ref = button?.reference;
 
-        if (sum > space) {
-            popperButtons.push(clone(button));
-        } else {
-            standardButtons.push(clone(button));
+            sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+
+            if (sum > space) {
+                popperButtons.push(clone(button));
+            } else {
+                standardButtons.push(clone(button));
+            }
         }
-    }
 
-    this.setOption("buttons.standard", standardButtons);
-    this.setOption("buttons.popper", popperButtons);
+        this.setOption("buttons.standard", standardButtons);
+        this.setOption("buttons.popper", popperButtons);
 
-    if (this[switchElementSymbol]) {
-        if (popperButtons.length > 0) {
-            this[switchElementSymbol].classList.remove("hidden");
-        } else {
-            this[switchElementSymbol].classList.add("hidden");
+        if (this[switchElementSymbol]) {
+            if (popperButtons.length > 0) {
+                this[switchElementSymbol].classList.remove("hidden");
+            } else {
+                this[switchElementSymbol].classList.add("hidden");
+            }
         }
-    }
+
+    });
 }
 
 /**
@@ -1105,8 +1114,11 @@ function calculateNavigationButtonsDimensions() {
         slot.classList.remove("invisible");
     }
 
-    this[dimensionsSymbol].setVia("data.calculated", true);
     this.setOption("buttons.standard", clone(buttons));
+
+    getWindow().requestAnimationFrame(() => {
+        this[dimensionsSymbol].setVia("data.calculated", true);
+    });
 }
 
 /**