@schukai/monster 4.136.23 → 4.136.24

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.136.23"}
+{"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.136.24"}

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

@@ -41,6 +41,7 @@ import { ButtonBarStyleSheet } from "./stylesheet/button-bar.mjs";
 import { positionPopper } from "./util/floating-ui.mjs";
 import { convertToPixels } from "../../dom/dimension.mjs";
 import { addErrorAttribute } from "../../dom/error.mjs";
+import { Processing } from "../../util/processing.mjs";
 export { ButtonBar };
 
 /**
@@ -126,6 +127,8 @@ const switchElementSymbol = Symbol("switchElement");
  * @type {symbol}
  */
 const layoutStateSymbol = Symbol("layoutState");
+const layoutFrameSymbol = Symbol("layoutFrame");
+const layoutTokenSymbol = Symbol("layoutToken");
 
 /**
  * @private
@@ -201,6 +204,7 @@ class ButtonBar extends CustomElement {
 		this[dimensionsSymbol] = new Pathfinder({ data: {} });
 		this[layoutStateSymbol] = {
 			scheduled: false,
+			running: false,
 			needsMeasure: true,
 			needsLayout: true,
 			needsObserve: true,
@@ -283,6 +287,12 @@ class ButtonBar extends CustomElement {
 			document.removeEventListener(type, this[closeEventHandler]);
 		}
 
+		if (typeof this[layoutFrameSymbol] === "number") {
+			cancelAnimationFrame(this[layoutFrameSymbol]);
+		}
+		delete this[layoutFrameSymbol];
+		this[layoutTokenSymbol] = (this[layoutTokenSymbol] || 0) + 1;
+
 		disconnectResizeObserver.call(this);
 		if (this[mutationObserverSymbol]) {
 			this[mutationObserverSymbol].disconnect();
@@ -442,12 +452,27 @@ function scheduleLayout(options = {}) {
 	state.needsLayout = state.needsLayout || options.layout === true;
 	state.needsObserve = state.needsObserve || options.observe === true;
 
-	if (state.scheduled) {
+	if (state.scheduled || state.running) {
+		return;
+	}
+
+	scheduleLayoutFrame.call(this);
+}
+
+function scheduleLayoutFrame() {
+	const state = this[layoutStateSymbol];
+	if (!state || state.scheduled || state.running) {
 		return;
 	}
 
 	state.scheduled = true;
-	requestAnimationFrame(() => {
+	const token = (this[layoutTokenSymbol] || 0) + 1;
+	this[layoutTokenSymbol] = token;
+	this[layoutFrameSymbol] = requestAnimationFrame(() => {
+		if (this[layoutTokenSymbol] !== token) {
+			return;
+		}
+		delete this[layoutFrameSymbol];
 		runLayout.call(this);
 	});
 }
@@ -463,36 +488,61 @@ function runLayout() {
 		return;
 	}
 
-	if (state.needsObserve) {
-		updateResizeObserverObservation.call(this);
-		state.needsObserve = false;
+	if (state.running) {
+		return;
 	}
 
-	if (state.needsMeasure) {
-		try {
-			calculateButtonBarDimensions.call(this);
-		} catch (error) {
-			addErrorAttribute(
-				this,
-				error?.message || "An error occurred while calculating dimensions",
-			);
+	const needsObserve = state.needsObserve;
+	const needsMeasure = state.needsMeasure;
+	const needsLayout = state.needsLayout;
+
+	state.needsObserve = false;
+	state.needsMeasure = false;
+	state.needsLayout = false;
+	state.running = true;
+
+	new Processing(() => {
+		if (needsObserve) {
+			updateResizeObserverObservation.call(this);
 		}
-		state.needsMeasure = false;
-	}
 
-	if (state.needsLayout) {
-		try {
-			rearrangeButtons.call(this);
-		} catch (error) {
+		if (needsMeasure) {
+			try {
+				calculateButtonBarDimensions.call(this);
+			} catch (error) {
+				addErrorAttribute(
+					this,
+					error?.message || "An error occurred while calculating dimensions",
+				);
+			}
+		}
+
+		if (needsLayout) {
+			try {
+				rearrangeButtons.call(this);
+			} catch (error) {
+				addErrorAttribute(
+					this,
+					error?.message || "An error occurred while rearranging the buttons",
+				);
+			}
+		}
+
+		return updatePopper.call(this);
+	})
+		.run()
+		.catch((error) => {
 			addErrorAttribute(
 				this,
-				error?.message || "An error occurred while rearranging the buttons",
+				error?.message || "An error occurred while running the button bar layout",
 			);
-		}
-		state.needsLayout = false;
-	}
-
-	updatePopper.call(this);
+		})
+		.finally(() => {
+			state.running = false;
+			if (state.needsObserve || state.needsMeasure || state.needsLayout) {
+				scheduleLayoutFrame.call(this);
+			}
+		});
 }
 
 /**

package/source/components/layout/popper.mjs

@@ -25,6 +25,7 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
 import { fireCustomEvent } from "../../dom/events.mjs";
 import {
 	findElementWithSelectorUpwards,
@@ -115,6 +116,8 @@ const dismissRecordSymbol = Symbol("dismissRecord");
  * @type {symbol}
  */
 const usesHostDismissSymbol = Symbol("usesHostDismiss");
+const actionQueueSymbol = Symbol("actionQueue");
+const pendingActionSymbol = Symbol("pendingAction");
 
 /**
  * Popper component for displaying floating UI elements
@@ -274,7 +277,7 @@ class Popper extends CustomElement {
 	 * @return {Popper} The popper instance
 	 */
 	showDialog() {
-		show.call(this);
+		queuePopperAction.call(this, "show");
 		return this;
 	}
 
@@ -284,8 +287,7 @@ class Popper extends CustomElement {
 	 * @return {Popper}
 	 */
 	recalcPopper() {
-		applyContentOverflowMode.call(this);
-		updatePopper.call(this);
+		queuePopperAction.call(this, "update");
 		return this;
 	}
 
@@ -326,7 +328,7 @@ class Popper extends CustomElement {
 	 * @return {Popper} The popper instance
 	 */
 	hideDialog() {
-		hide.call(this);
+		queuePopperAction.call(this, "hide");
 		return this;
 	}
 
@@ -335,11 +337,7 @@ class Popper extends CustomElement {
 	 * @return {Popper} The popper instance
 	 */
 	toggleDialog() {
-		if (isPositionedPopperOpen(this[popperElementSymbol])) {
-			this.hideDialog();
-		} else {
-			this.showDialog();
-		}
+		queuePopperAction.call(this, "toggle");
 		return this;
 	}
 }
@@ -396,6 +394,59 @@ function initEventHandler() {
 	return this;
 }
 
+/**
+ * Serializes popper state changes so open/close/update events do not interleave.
+ * The latest requested action wins while a queue is already running.
+ *
+ * @private
+ * @param {"show"|"hide"|"toggle"|"update"} action
+ * @return {Promise<void>}
+ */
+function queuePopperAction(action) {
+	this[pendingActionSymbol] = action;
+
+	if (this[actionQueueSymbol] instanceof Promise) {
+		return this[actionQueueSymbol];
+	}
+
+	this[actionQueueSymbol] = (async () => {
+		while (this[pendingActionSymbol]) {
+			const nextAction = this[pendingActionSymbol];
+			delete this[pendingActionSymbol];
+			await Promise.resolve(runPopperAction.call(this, nextAction));
+		}
+	})()
+		.catch((e) => {
+			addErrorAttribute(this, e);
+		})
+		.finally(() => {
+			delete this[actionQueueSymbol];
+			if (this[pendingActionSymbol]) {
+				void queuePopperAction.call(this, this[pendingActionSymbol]);
+			}
+		});
+
+	return this[actionQueueSymbol];
+}
+
+function runPopperAction(action) {
+	switch (action) {
+		case "toggle":
+			if (isPositionedPopperOpen(this[popperElementSymbol])) {
+				return performHide.call(this);
+			}
+			return performShow.call(this);
+		case "hide":
+			return performHide.call(this);
+		case "show":
+			return performShow.call(this);
+		case "update":
+			return performUpdate.call(this);
+		default:
+			return undefined;
+	}
+}
+
 function isEventInsidePopperOwner(
 	owner,
 	event,
@@ -545,6 +596,14 @@ function disconnectResizeObserver() {
  * @private
  */
 function hide() {
+	void queuePopperAction.call(this, "hide");
+}
+
+/**
+ * Hides the popper element
+ * @private
+ */
+function performHide() {
 	const self = this;
 	const popperElement = self[popperElementSymbol];
 	const controlElement = self[controlElementSymbol];
@@ -580,6 +639,14 @@ function hide() {
  * @private
  */
 function show() {
+	void queuePopperAction.call(this, "show");
+}
+
+/**
+ * Shows the popper element
+ * @private
+ */
+function performShow() {
 	const self = this;
 	const popperElement = self[popperElementSymbol];
 	const controlElement = self[controlElementSymbol];
@@ -615,13 +682,13 @@ function show() {
 
 	addAttributeToken(controlElement, "class", "open");
 	registerWithHost.call(self);
-	updatePopper.call(self);
-
-	setTimeout(() => {
-		fireCustomEvent(self, "monster-popper-opened", {
-			self,
-		});
-	}, 0);
+	return performUpdate.call(self).then(() => {
+		setTimeout(() => {
+			fireCustomEvent(self, "monster-popper-opened", {
+				self,
+			});
+		}, 0);
+	});
 }
 
 /**
@@ -629,6 +696,14 @@ function show() {
  * @private
  */
 function updatePopper() {
+	void queuePopperAction.call(this, "update");
+}
+
+/**
+ * Updates popper positioning
+ * @private
+ */
+function performUpdate() {
 	if (
 		!this.isConnected ||
 		!(this[controlElementSymbol] instanceof HTMLElement) ||
@@ -647,7 +722,7 @@ function updatePopper() {
 
 	applyContentOverflowMode.call(this);
 
-	positionPopper.call(
+	return positionPopper.call(
 		this,
 		this[controlElementSymbol],
 		this[popperElementSymbol],

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

@@ -195,84 +195,97 @@ describe("PopperButton", function () {
 		}, 0);
 	});
 
-	it("should move the popper through the opening appearance states", function (done) {
+	it("should move the popper through the opening appearance states", async function () {
 		let mocks = document.getElementById("mocks");
 		const button = document.createElement("monster-popper-button");
 		mocks.appendChild(button);
 
-		setTimeout(() => {
-			try {
-				button.showDialog();
+		await waitForTimeout();
 
-				const popper = button.shadowRoot.querySelector(
-					'[data-monster-role="popper"]',
-				);
-				expect(popper).to.exist;
-				expect(popper.dataset.monsterAppearance).to.equal("opening");
+		button.showDialog();
 
-				setTimeout(() => {
-					try {
-						expect(popper.dataset.monsterAppearance).to.equal("open");
-
-						button.hideDialog();
-
-						setTimeout(() => {
-							try {
-								expect(
-									popper.hasAttribute("data-monster-appearance"),
-								).to.equal(false);
-								done();
-							} catch (e) {
-								done(e);
-							}
-						}, 0);
-					} catch (e) {
-						done(e);
-					}
-				}, 30);
-			} catch (e) {
-				done(e);
-			}
-		}, 0);
+		const popper = button.shadowRoot.querySelector(
+			'[data-monster-role="popper"]',
+		);
+		expect(popper).to.exist;
+		expect(popper.dataset.monsterAppearance).to.equal("opening");
+
+		await waitForCondition(() => {
+			return popper.dataset.monsterAppearance === "open";
+		});
+		expect(popper.dataset.monsterAppearance).to.equal("open");
+
+		button.hideDialog();
+
+		await waitForCondition(() => {
+			return !popper.hasAttribute("data-monster-appearance");
+		});
+		expect(popper.hasAttribute("data-monster-appearance")).to.equal(false);
 	});
 
-	it("should finish the opening appearance state when requestAnimationFrame stalls", function (done) {
+	it("should finish the opening appearance state when requestAnimationFrame stalls", async function () {
 		let mocks = document.getElementById("mocks");
 		const button = document.createElement("monster-popper-button");
 		const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
 		const originalCancelAnimationFrame = globalThis.cancelAnimationFrame;
 
-		globalThis.requestAnimationFrame = () => 1;
-		globalThis.cancelAnimationFrame = () => {};
-		mocks.appendChild(button);
+		try {
+			globalThis.requestAnimationFrame = () => 1;
+			globalThis.cancelAnimationFrame = () => {};
+			mocks.appendChild(button);
+
+			await waitForTimeout();
+
+			button.showDialog();
+
+			const popper = button.shadowRoot.querySelector(
+				'[data-monster-role="popper"]',
+			);
+			expect(popper).to.exist;
+			expect(popper.dataset.monsterAppearance).to.equal("opening");
+
+			await waitForCondition(() => {
+				return popper.dataset.monsterAppearance === "open";
+			});
+			expect(popper.dataset.monsterAppearance).to.equal("open");
+			button.hideDialog();
+		} finally {
+			globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+		}
+	});
+});
 
-		setTimeout(() => {
-			try {
-				button.showDialog();
+function waitForTimeout(timeout = 0) {
+	return new Promise((resolve) => setTimeout(resolve, timeout));
+}
 
-				const popper = button.shadowRoot.querySelector(
-					'[data-monster-role="popper"]',
-				);
-				expect(popper).to.exist;
-				expect(popper.dataset.monsterAppearance).to.equal("opening");
+function waitForCondition(check, { timeout = 1000, interval = 10 } = {}) {
+	const deadline = Date.now() + timeout;
 
-				setTimeout(() => {
-					try {
-						expect(popper.dataset.monsterAppearance).to.equal("open");
-						button.hideDialog();
-						done();
-					} catch (e) {
-						done(e);
-					} finally {
-						globalThis.requestAnimationFrame = originalRequestAnimationFrame;
-						globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
-					}
-				}, 30);
+	return new Promise((resolve, reject) => {
+		const tick = () => {
+			let done = false;
+			try {
+				done = check();
 			} catch (e) {
-				globalThis.requestAnimationFrame = originalRequestAnimationFrame;
-				globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
-				done(e);
+				reject(e);
+				return;
 			}
-		}, 0);
+
+			if (done) {
+				resolve();
+				return;
+			}
+
+			if (Date.now() >= deadline) {
+				reject(new Error("Timed out waiting for condition."));
+				return;
+			}
+
+			setTimeout(tick, interval);
+		};
+
+		tick();
 	});
-});
+}