@schukai/monster 4.56.0 → 4.58.0

package/source/components/datatable/status.mjs

@@ -187,6 +187,9 @@ function initEventHandler() {
 
 		this[datasourceLinkedElementSymbol] = element;
 		element.addEventListener("monster-datasource-fetched", function () {
+			if (typeof self[errorElementSymbol]?.resetErrorMessage === "function") {
+				self[errorElementSymbol].resetErrorMessage();
+			}
 			fadeOutTimer = setTimeout(() => {
 				self.setOption("state.spinner", "hide");
 			}, 800);
@@ -198,6 +201,10 @@ function initEventHandler() {
 				fadeOutTimer = null;
 			}
 
+			if (typeof self[errorElementSymbol]?.resetErrorMessage === "function") {
+				self[errorElementSymbol].resetErrorMessage();
+			}
+
 			self.setOption("state.spinner", "show");
 		});
 

package/source/components/datatable/util.mjs

@@ -24,6 +24,7 @@ export { handleDataSourceChanges, datasourceLinkedElementSymbol };
  * @type {symbol}
  */
 const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
+const dataChangeVersionSymbol = Symbol("dataChangeVersion");
 
 /**
  * @private
@@ -33,6 +34,9 @@ function handleDataSourceChanges() {
 		return;
 	}
 
+	const version = (this[dataChangeVersionSymbol] || 0) + 1;
+	this[dataChangeVersionSymbol] = version;
+
 	let data = this[datasourceLinkedElementSymbol]?.data;
 
 	if (isPrimitive(data)) {
@@ -71,6 +75,9 @@ function handleDataSourceChanges() {
 	}
 
 	queueMicrotask(() => {
+		if (this[dataChangeVersionSymbol] !== version) {
+			return;
+		}
 		this.setOption("data", data);
 	});
 }

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

@@ -35,8 +35,6 @@ import { findTargetElementFromEvent } from "../../dom/events.mjs";
 import { getDocument } from "../../dom/util.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import { ID } from "../../types/id.mjs";
-import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { Processing } from "../../util/processing.mjs";
 import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
 import { ButtonBarStyleSheet } from "./stylesheet/button-bar.mjs";
 import { positionPopper } from "./util/floating-ui.mjs";
@@ -48,8 +46,6 @@ export { ButtonBar };
  * @private
  * @type {symbol}
  */
-const timerCallbackSymbol = Symbol("timerCallback");
-
 /**
  * local symbol
  * @private
@@ -124,6 +120,12 @@ const mutationObserverSymbol = Symbol("mutationObserver");
  */
 const switchElementSymbol = Symbol("switchElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const layoutStateSymbol = Symbol("layoutState");
+
 /**
  * @private
  * @type {string}
@@ -187,14 +189,20 @@ class ButtonBar extends CustomElement {
 		super[assembleMethodSymbol]();
 
 		this[dimensionsSymbol] = new Pathfinder({ data: {} });
+		this[layoutStateSymbol] = {
+			scheduled: false,
+			needsMeasure: true,
+			needsLayout: true,
+			needsObserve: true,
+			suppressSlotChange: false,
+		};
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 
 		// setup structure
-		initButtonBar.call(this).then(() => {
-			initPopperSwitch.call(this);
-		});
+		initButtonBar.call(this);
+		initPopperSwitch.call(this);
 	}
 
 	/**
@@ -230,10 +238,7 @@ class ButtonBar extends CustomElement {
 			document.addEventListener(type, this[closeEventHandler]);
 		}
 
-		setTimeout(() => {
-			updatePopper.call(this);
-			updateResizeObserverObservation.call(this);
-		}, 0);
+		scheduleLayout.call(this, { measure: true, layout: true, observe: true });
 	}
 
 	/**
@@ -315,11 +320,17 @@ function initDefaultsFromAttributes(obj) {
  * @return {boolean}
  */
 function isElementTrulyVisible(element) {
-    if (!(element instanceof HTMLElement)) {
-        return false;
-    }
-    const computedStyle = getComputedStyle(element);
-    return computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden' && computedStyle.opacity !== '0' && element.offsetWidth > 0 && element.offsetHeight > 0;
+	if (!(element instanceof HTMLElement)) {
+		return false;
+	}
+	const computedStyle = getComputedStyle(element);
+	return (
+		computedStyle.display !== "none" &&
+		computedStyle.visibility !== "hidden" &&
+		computedStyle.opacity !== "0" &&
+		element.offsetWidth > 0 &&
+		element.offsetHeight > 0
+	);
 }
 
 /**
@@ -328,33 +339,6 @@ function isElementTrulyVisible(element) {
 function initEventHandler() {
 	const self = this;
 
-	const triggerRecalculation = () => {
-		if (self[timerCallbackSymbol] instanceof DeadMansSwitch) {
-			try {
-				self[timerCallbackSymbol].touch();
-				return;
-			} catch (e) {
-				if (e.message !== "has already run") throw e;
-				delete self[timerCallbackSymbol];
-			}
-		}
-
-		self[timerCallbackSymbol] = new DeadMansSwitch(50, () => {
-			requestAnimationFrame(() => {
-				updatePopper.call(self);
-				self[dimensionsSymbol].setVia("data.calculated", false);
-				try {
-					checkAndRearrangeButtons.call(self);
-				} catch (error) {
-					addErrorAttribute(
-						self,
-						error?.message || "An error occurred while rearranging the buttons",
-					);
-				}
-			});
-		});
-	};
-
 	const mutationCallback = (mutationList) => {
 		let needsRecalc = false;
 		for (const mutation of mutationList) {
@@ -370,7 +354,7 @@ function initEventHandler() {
 			}
 		}
 		if (needsRecalc) {
-			triggerRecalculation();
+			scheduleLayout.call(self, { measure: true, layout: true });
 		}
 	};
 
@@ -387,13 +371,27 @@ function initEventHandler() {
 
 	if (self[buttonBarSlotElementSymbol]) {
 		self[buttonBarSlotElementSymbol].addEventListener("slotchange", () => {
-			checkAndRearrangeButtons.call(self);
+			if (self[layoutStateSymbol]?.suppressSlotChange) {
+				return;
+			}
+			scheduleLayout.call(self, {
+				measure: true,
+				layout: true,
+				observe: true,
+			});
 		});
 	}
 
 	if (self[popperElementSymbol]) {
 		self[popperElementSymbol].addEventListener("slotchange", () => {
-			checkAndRearrangeButtons.call(self);
+			if (self[layoutStateSymbol]?.suppressSlotChange) {
+				return;
+			}
+			scheduleLayout.call(self, {
+				measure: true,
+				layout: true,
+				observe: true,
+			});
 		});
 	}
 
@@ -401,7 +399,9 @@ function initEventHandler() {
 		self.setOption("classes.button", value);
 	};
 
-	self[resizeObserverSymbol] = new ResizeObserver(triggerRecalculation);
+	self[resizeObserverSymbol] = new ResizeObserver(() => {
+		scheduleLayout.call(self, { measure: true, layout: true });
+	});
 	self[mutationObserverSymbol] = new MutationObserver(mutationCallback);
 
 	initSlotChangedHandler.call(self);
@@ -409,16 +409,74 @@ function initEventHandler() {
 
 function initSlotChangedHandler() {
 	this[buttonBarElementSymbol].addEventListener("slotchange", () => {
-		updateResizeObserverObservation.call(this);
+		if (this[layoutStateSymbol]?.suppressSlotChange) {
+			return;
+		}
+		scheduleLayout.call(this, { observe: true });
 	});
 }
 
-function checkAndRearrangeButtons() {
-	if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
-		calculateButtonBarDimensions.call(this);
+function scheduleLayout(options = {}) {
+	if (!this[layoutStateSymbol]) {
+		return;
+	}
+
+	const state = this[layoutStateSymbol];
+	state.needsMeasure = state.needsMeasure || options.measure === true;
+	state.needsLayout = state.needsLayout || options.layout === true;
+	state.needsObserve = state.needsObserve || options.observe === true;
+
+	if (state.scheduled) {
+		return;
+	}
+
+	state.scheduled = true;
+	requestAnimationFrame(() => {
+		runLayout.call(this);
+	});
+}
+
+function runLayout() {
+	const state = this[layoutStateSymbol];
+	if (!state) {
+		return;
+	}
+
+	state.scheduled = false;
+	if (!this.isConnected) {
+		return;
+	}
+
+	if (state.needsObserve) {
+		updateResizeObserverObservation.call(this);
+		state.needsObserve = false;
+	}
+
+	if (state.needsMeasure) {
+		try {
+			calculateButtonBarDimensions.call(this);
+		} catch (error) {
+			addErrorAttribute(
+				this,
+				error?.message || "An error occurred while calculating dimensions",
+			);
+		}
+		state.needsMeasure = false;
+	}
+
+	if (state.needsLayout) {
+		try {
+			rearrangeButtons.call(this);
+		} catch (error) {
+			addErrorAttribute(
+				this,
+				error?.message || "An error occurred while rearranging the buttons",
+			);
+		}
+		state.needsLayout = false;
 	}
 
-	rearrangeButtons.call(this);
+	updatePopper.call(this);
 }
 
 /**
@@ -426,19 +484,19 @@ function checkAndRearrangeButtons() {
  * @return {Object}
  */
 function rearrangeButtons() {
-	let sum = 0;
-	// Only add the popper switch's width if it's currently visible.
-	if (isElementTrulyVisible(this[switchElementSymbol])) {
-		sum += this[switchElementSymbol].offsetWidth;
-	}
-	const space = this[dimensionsSymbol].getVia("data.space");
+	const state = this[layoutStateSymbol];
+	let space = 0;
+	try {
+		space = this[dimensionsSymbol].getVia("data.space");
+	} catch {}
 
 	const buttonReferences = this[dimensionsSymbol].getVia(
 		"data.buttonReferences",
+		[],
 	);
+	const hasButtons = buttonReferences.length > 0;
 
-	const visibleButtonsInMainSlot = [];
-	const buttonsToMoveToPopper = [];
+	const buttonEntries = [];
 
 	for (const ref of buttonReferences) {
 		let elements = getSlottedElements.call(
@@ -474,51 +532,75 @@ function rearrangeButtons() {
 		}
 		const style = getComputedStyle(element);
 
-		// A user-hidden button should not participate in layout calculations.
-		// We will assign it to the popper to keep it out of the flow.
-		if (style.display === "none") {
-			// This button is not visible. It could be user-hidden, or it could be
-			// in the popper which is currently hidden.
-			// We should only count it towards the popper if it has a non-zero width,
-			// which implies it's a genuinely overflowing button, not one that is
-			// user-hidden from the start.
-			if (buttonWidth > 0) {
-				buttonsToMoveToPopper.push(element);
+		buttonEntries.push({
+			element,
+			width: buttonWidth,
+			hidden: style.display === "none",
+		});
+	}
+
+	const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 2;
+
+	const layoutButtons = (availableSpace) => {
+		if (availableSpace < 0) {
+			availableSpace = 0;
+		}
+		let sum = 0;
+		const visibleButtonsInMainSlot = [];
+		const buttonsToMoveToPopper = [];
+
+		for (const entry of buttonEntries) {
+			if (entry.hidden) {
+				if (entry.width > 0) {
+					buttonsToMoveToPopper.push(entry.element);
+				} else {
+					visibleButtonsInMainSlot.push(entry.element);
+				}
+				continue;
+			}
+
+			if (sum + entry.width > availableSpace) {
+				buttonsToMoveToPopper.push(entry.element);
 			} else {
-				// It has 0 width. Treat it as a truly hidden element.
-				// Put it in the main slot, where it will be invisible and take no space.
-				visibleButtonsInMainSlot.push(element);
+				sum += entry.width;
+				visibleButtonsInMainSlot.push(entry.element);
 			}
-			continue;
 		}
 
-		        const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 2;
-		        if (sum + buttonWidth > space - switchWidth) {			buttonsToMoveToPopper.push(element);
-		} else {
-			sum += buttonWidth;
-			visibleButtonsInMainSlot.push(element);
-		}
+		return { visibleButtonsInMainSlot, buttonsToMoveToPopper };
+	};
+
+	let layout = layoutButtons(space);
+	if (layout.buttonsToMoveToPopper.length > 0) {
+		layout = layoutButtons(space - switchWidth);
 	}
 
-	for (const button of buttonsToMoveToPopper) {
+	const shouldShowSwitch =
+		layout.buttonsToMoveToPopper.length > 0 && hasButtons;
+
+	if (state) {
+		state.suppressSlotChange = true;
+	}
+
+	for (const button of layout.buttonsToMoveToPopper) {
 		button.setAttribute("slot", "popper");
 	}
 
-	for (const button of visibleButtonsInMainSlot) {
+	for (const button of layout.visibleButtonsInMainSlot) {
 		button.removeAttribute("slot");
 	}
 
-	const buttonsInPopper = getSlottedElements.call(this, ":scope", "popper");
+	if (state) {
+		state.suppressSlotChange = false;
+	}
 
-	if (buttonsInPopper.size > 0) {
+	if (shouldShowSwitch) {
 		this[switchElementSymbol].removeAttribute("hidden");
 		this[switchElementSymbol].classList.remove("hidden");
 	} else {
 		this[switchElementSymbol].setAttribute("hidden", "");
 		this[switchElementSymbol].classList.add("hidden");
-		setTimeout(() => {
-			hide.call(this);
-		}, 1);
+		hide.call(this);
 	}
 }
 
@@ -551,6 +633,14 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function calculateButtonBarDimensions() {
+	if (!(this.parentElement instanceof HTMLElement)) {
+		this[dimensionsSymbol].setVia("data.space", 0);
+		this[dimensionsSymbol].setVia("data.visible", false);
+		this[dimensionsSymbol].setVia("data.calculated", true);
+		this[dimensionsSymbol].setVia("data.buttonReferences", []);
+		return;
+	}
+
 	const computedStyle = getComputedStyle(this.parentElement);
 
 	if (computedStyle === null) {
@@ -603,12 +693,22 @@ function calculateButtonBarDimensions() {
 
 	// Get all buttons, regardless of their current slot
 	const allButtons = Array.from(getSlottedElements.call(this, ":scope", null));
-	const popperButtons = Array.from(getSlottedElements.call(this, ":scope", "popper"));
+	const popperButtons = Array.from(
+		getSlottedElements.call(this, ":scope", "popper"),
+	);
 
-	const combinedButtons = [...allButtons, ...popperButtons].filter((button, index, self) => {
-		// Filter out duplicates based on data-monster-reference if present, or element itself
-		return self.findIndex(b => b.dataset.monsterReference === button.dataset.monsterReference || b === button) === index;
-	});
+	const combinedButtons = [...allButtons, ...popperButtons].filter(
+		(button, index, self) => {
+			// Filter out duplicates based on data-monster-reference if present, or element itself
+			return (
+				self.findIndex(
+					(b) =>
+						b.dataset.monsterReference === button.dataset.monsterReference ||
+						b === button,
+				) === index
+			);
+		},
+	);
 
 	for (const button of combinedButtons) {
 		if (!(button instanceof HTMLElement)) {
@@ -793,9 +893,7 @@ function initButtonBar() {
 		throw new Error("no shadow-root is defined");
 	}
 
-	return new Processing(() => {
-		checkAndRearrangeButtons.call(this);
-	}).run();
+	scheduleLayout.call(this, { measure: true, layout: true, observe: true });
 }
 
 /**