@schukai/monster 4.142.0 → 4.142.1

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.142.0"}
+{"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.142.1"}

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

@@ -610,6 +610,9 @@ function initEventHandler() {
 	};
 
 	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (self[layoutStateSymbol]?.suppressResize) {
+			return;
+		}
 		if (!hasContainerResizeEntry.call(self, entries)) {
 			return;
 		}

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

@@ -211,4 +211,115 @@ describe("ButtonBar", function () {
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
     }
   });
+
+  it("should ignore resize feedback caused by its own layout writes", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushOneFrame = async () => {
+      const callback = scheduledCallbacks.shift();
+      if (callback instanceof Function) {
+        callback();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        await flushOneFrame();
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="feedback-bar-wrapper">
+          <monster-button-bar id="feedback-bar">
+            <button type="button">One</button>
+            <button type="button">Two</button>
+            <button type="button">Three</button>
+          </monster-button-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("feedback-bar-wrapper");
+      const bar = document.getElementById("feedback-bar");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "80px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 80,
+      });
+
+      const buttons = Array.from(bar.querySelectorAll("button"));
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 48,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 48,
+          height: 32,
+          top: 0,
+          left: 0,
+          right: 48,
+          bottom: 32,
+          x: 0,
+          y: 0,
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushOneFrame();
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      const suppressedFrameCount = scheduledCallbacks.length;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      expect(scheduledCallbacks.length).to.equal(suppressedFrameCount);
+
+      await flushFrames();
+
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      expect(scheduledCallbacks.length).to.equal(1);
+
+      await flushFrames();
+      expect(scheduledCallbacks.length).to.equal(0);
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });