@schukai/monster 4.143.2 → 4.143.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.143.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.143.3"}

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

@@ -392,6 +392,9 @@ class ControlBar extends CustomElement {
 		}
 		delete this[layoutFrameSymbol];
 		this[layoutTokenSymbol] = (this[layoutTokenSymbol] || 0) + 1;
+		if (this[layoutStateSymbol]) {
+			this[layoutStateSymbol].scheduled = false;
+		}
 
 		disconnectResizeObserver.call(this);
 		defuseLayoutChangedEvent.call(this);

package/test/cases/components/form/control-bar.mjs

@@ -762,6 +762,100 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should reveal the control bar after reconnecting before initial layout", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="reconnect-bar-wrapper">
+          <monster-control-bar
+            id="reconnect-bar"
+            class="nucleus-list-main-actions"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="30rem"
+          >
+            <button id="reconnect-create">Create</button>
+            <button id="reconnect-tags">Manage tags</button>
+            <button id="reconnect-import">Import</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("reconnect-bar-wrapper");
+      const bar = document.getElementById("reconnect-bar");
+      const buttons = [
+        document.getElementById("reconnect-create"),
+        document.getElementById("reconnect-tags"),
+        document.getElementById("reconnect-import"),
+      ];
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 480,
+      });
+
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 90,
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 90,
+          height: 30,
+          top: 0,
+          right: 90,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      expect(controlBar.style.opacity).to.equal("0");
+
+      bar.remove();
+      wrapper.append(bar);
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.style.opacity).to.equal("");
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "right",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should keep the overflow switch stable across the switch-width threshold", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;