@schukai/monster 4.148.7 → 4.148.9

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.148.7"}
+{"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.148.9"}

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

@@ -43,7 +43,6 @@ import { positionPopper } from "./util/floating-ui.mjs";
 import { convertToPixels } from "../../dom/dimension.mjs";
 import { addErrorAttribute } from "../../dom/error.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { Processing } from "../../util/processing.mjs";
 export { ControlBar };
 
 /**
@@ -217,7 +216,7 @@ const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
  * @type {number}
  */
 const LAYOUT_CHANGED_EVENT_DELAY = 20;
-const LAYOUT_SWITCH_HYSTERESIS = 16;
+const LAYOUT_RESIZE_EPSILON = 0.5;
 
 /**
  * @private
@@ -332,6 +331,8 @@ class ControlBar extends CustomElement {
 			suppressSlotChange: false,
 			suppressMutation: false,
 			suppressResize: false,
+			itemInlineSizes: new WeakMap(),
+			joinedInlineOffsets: new WeakMap(),
 		};
 
 		initControlReferences.call(this);
@@ -643,7 +644,7 @@ function initEventHandler() {
 		if (self[layoutStateSymbol]?.suppressResize) {
 			return;
 		}
-		if (!hasContainerResizeEntry.call(self, entries)) {
+		if (!hasLayoutResizeEntry.call(self, entries)) {
 			return;
 		}
 		scheduleLayout.call(self, { measure: true, layout: true });
@@ -721,7 +722,8 @@ function runLayout() {
 	state.needsLayout = false;
 	state.running = true;
 
-	new Processing(() => {
+	let popperUpdate;
+	try {
 		syncEmptyVisibility.call(this);
 
 		if (needsObserve) {
@@ -741,7 +743,17 @@ function runLayout() {
 
 		if (needsLayout) {
 			try {
-				rearrangeItems.call(this);
+				let shouldStabilize = rearrangeItems.call(this);
+				let stabilizationPass = 0;
+				const maximumStabilizationPasses = this.children.length + 1;
+				while (
+					shouldStabilize &&
+					stabilizationPass < maximumStabilizationPasses
+				) {
+					calculateControlBarDimensions.call(this);
+					shouldStabilize = rearrangeItems.call(this);
+					stabilizationPass++;
+				}
 			} catch (error) {
 				addErrorAttribute(
 					this,
@@ -750,27 +762,40 @@ function runLayout() {
 			}
 		}
 
-		return updatePopper.call(this);
-	})
-		.run()
-		.catch((error) => {
+		try {
+			popperUpdate = updatePopper.call(this);
+		} catch (error) {
 			addErrorAttribute(
 				this,
-				error?.message ||
-					"An error occurred while running the control bar layout",
+				error?.message || "An error occurred while updating the popper",
+			);
+		}
+	} catch (error) {
+		addErrorAttribute(
+			this,
+			error?.message ||
+				"An error occurred while running the control bar layout",
+		);
+	} finally {
+		state.running = false;
+		if (state.needsObserve || state.needsMeasure || state.needsLayout) {
+			scheduleLayoutFrame.call(this);
+		}
+	}
+
+	if (popperUpdate instanceof Promise) {
+		popperUpdate.catch((error) => {
+			addErrorAttribute(
+				this,
+				error?.message || "An error occurred while updating the popper",
 			);
-		})
-		.finally(() => {
-			state.running = false;
-			if (state.needsObserve || state.needsMeasure || state.needsLayout) {
-				scheduleLayoutFrame.call(this);
-			}
 		});
+	}
 }
 
 /**
  * @private
- * @return {Object}
+ * @return {boolean}
  */
 function rearrangeItems() {
 	let space = 0;
@@ -825,7 +850,7 @@ function rearrangeItems() {
 		});
 	}
 
-	const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 2;
+	const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 0;
 
 	const layoutItems = (availableSpace) => {
 		if (availableSpace < 0) {
@@ -854,67 +879,52 @@ function rearrangeItems() {
 		return { visibleItemsInMainSlot, itemsToMoveToPopper };
 	};
 
-	const switchCurrentlyVisible =
-		this[switchElementSymbol] instanceof HTMLElement &&
-		!this[switchElementSymbol].hasAttribute("hidden");
-	let layout;
-	if (switchCurrentlyVisible) {
-		layout = layoutItems(space - switchWidth - LAYOUT_SWITCH_HYSTERESIS);
-		if (layout.itemsToMoveToPopper.length === 0) {
-			layout = layoutItems(space);
-		}
-	} else {
-		layout = layoutItems(space - LAYOUT_SWITCH_HYSTERESIS);
-		if (layout.itemsToMoveToPopper.length > 0) {
-			layout = layoutItems(space - switchWidth);
-		} else {
-			layout = layoutItems(space);
-		}
-	}
+	const totalItemWidth = itemEntries.reduce((sum, entry) => {
+		return entry.hidden ? sum : sum + entry.width;
+	}, 0);
+	const shouldOverflow = totalItemWidth > space;
+	let layout = layoutItems(shouldOverflow ? space - switchWidth : space);
 
 	layout = normalizeSpacerOverflowLayout(
 		layout,
 		itemEntries.map((entry) => entry.element),
 	);
-	layout = stabilizeOverflowBoundary.call(
-		this,
-		layout,
-		itemEntries,
-		switchCurrentlyVisible,
-	);
 
 	const shouldShowSwitch = layout.itemsToMoveToPopper.length > 0 && hasItems;
-	updateLastOverflowBoundary.call(
-		this,
-		layout,
-		itemEntries.map((entry) => entry.element),
-	);
 	const shouldUseStackedLayout =
 		shouldShowSwitch || isStackedBreakpointMatched.call(this);
+	let layoutChanged = false;
 
-	suppressLayoutFeedback.call(this);
 	setLayoutStackedState.call(this, shouldUseStackedLayout);
 
 	for (const item of layout.itemsToMoveToPopper) {
 		if (item.getAttribute("slot") !== "popper") {
 			item.setAttribute("slot", "popper");
+			layoutChanged = true;
 		}
 	}
 
 	for (const item of layout.visibleItemsInMainSlot) {
 		if (item.hasAttribute("slot")) {
 			item.removeAttribute("slot");
+			layoutChanged = true;
 		}
 	}
 
 	setSwitchVisible.call(this, shouldShowSwitch);
-	updateControlSizing.call(this, layout, shouldShowSwitch);
-	updateJoinedBorders.call(this, layout, shouldShowSwitch);
+	layoutChanged =
+		updateControlSizing.call(this, layout, shouldShowSwitch) || layoutChanged;
+	layoutChanged =
+		updateJoinedBorders.call(this, layout, shouldShowSwitch) || layoutChanged;
 	applyLayoutAlignment.call(this);
 	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
 	syncEmptyVisibility.call(this);
+	if (layoutChanged) {
+		suppressLayoutFeedback.call(this);
+	}
+	return layoutChanged;
 }
 
 /**
@@ -1007,88 +1017,6 @@ function isControlItemVisible(item) {
 	});
 }
 
-/**
- * @private
- * @param {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}} layout
- * @param {{element: HTMLElement, hidden: boolean}[]} itemEntries
- * @param {boolean} switchCurrentlyVisible
- * @return {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}}
- */
-function stabilizeOverflowBoundary(layout, itemEntries, switchCurrentlyVisible) {
-	const state = this[layoutStateSymbol];
-	if (!switchCurrentlyVisible || !state) {
-		return layout;
-	}
-
-	const orderedItems = itemEntries.map((entry) => entry.element);
-	const nextBoundary = getFirstOverflowIndex(layout, orderedItems);
-	const previousBoundary = state.lastOverflowStartIndex;
-	if (
-		typeof previousBoundary !== "number" ||
-		typeof nextBoundary !== "number" ||
-		nextBoundary <= previousBoundary ||
-		previousBoundary < 0 ||
-		previousBoundary >= itemEntries.length
-	) {
-		return layout;
-	}
-
-	const popperItems = new Set();
-	const mainItems = new Set();
-	for (let index = 0; index < itemEntries.length; index++) {
-		const entry = itemEntries[index];
-		if (index >= previousBoundary && !entry.hidden) {
-			popperItems.add(entry.element);
-		} else {
-			mainItems.add(entry.element);
-		}
-	}
-
-	return normalizeSpacerOverflowLayout(
-		{
-			visibleItemsInMainSlot: orderedItems.filter((item) => mainItems.has(item)),
-			itemsToMoveToPopper: orderedItems.filter((item) => popperItems.has(item)),
-		},
-		orderedItems,
-	);
-}
-
-/**
- * @private
- * @param {{itemsToMoveToPopper: HTMLElement[]}} layout
- * @param {HTMLElement[]} orderedItems
- * @return {void}
- */
-function updateLastOverflowBoundary(layout, orderedItems) {
-	const state = this[layoutStateSymbol];
-	if (!state) {
-		return;
-	}
-
-	const boundary = getFirstOverflowIndex(layout, orderedItems);
-	if (typeof boundary === "number") {
-		state.lastOverflowStartIndex = boundary;
-		return;
-	}
-	delete state.lastOverflowStartIndex;
-}
-
-/**
- * @private
- * @param {{itemsToMoveToPopper: HTMLElement[]}} layout
- * @param {HTMLElement[]} orderedItems
- * @return {number|undefined}
- */
-function getFirstOverflowIndex(layout, orderedItems) {
-	const popperItems = new Set(layout.itemsToMoveToPopper);
-	for (let index = 0; index < orderedItems.length; index++) {
-		if (popperItems.has(orderedItems[index])) {
-			return index;
-		}
-	}
-	return undefined;
-}
-
 /**
  * @private
  * @param {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}} layout
@@ -1160,15 +1088,15 @@ function calcBoxWidth(node) {
 		throw new Error("no computed style");
 	}
 	const bounding = node.getBoundingClientRect();
+	this[layoutStateSymbol]?.itemInlineSizes?.set(node, bounding.width);
+	const joinedInlineOffset =
+		this[layoutStateSymbol]?.joinedInlineOffsets?.get(node) || 0;
 
 	return (
-		getComputedCssPixels(dim["border-left-width"]) +
-		getComputedCssPixels(dim["padding-left"]) +
 		getComputedCssPixels(dim["margin-left"]) +
 		bounding["width"] +
-		getComputedCssPixels(dim["border-right-width"]) +
-		getComputedCssPixels(dim["margin-right"]) +
-		getComputedCssPixels(dim["padding-right"])
+		getComputedCssPixels(dim["margin-right"]) -
+		joinedInlineOffset
 	);
 }
 
@@ -1197,7 +1125,7 @@ function getComputedCssPixels(value) {
  * @private
  * @param {Object} layout
  * @param {boolean} shouldShowSwitch
- * @return {void}
+ * @return {boolean}
  */
 function updateControlSizing(layout, shouldShowSwitch) {
 	const mainItems = [...layout.visibleItemsInMainSlot];
@@ -1206,42 +1134,50 @@ function updateControlSizing(layout, shouldShowSwitch) {
 	}
 
 	const controlItems = [...mainItems, ...layout.itemsToMoveToPopper];
+	let changed = false;
 	for (const element of controlItems) {
-		applyControlSizing.call(this, element);
+		changed = applyControlSizing.call(this, element) || changed;
 	}
+	return changed;
 }
 
 /**
  * @private
  * @param {HTMLElement} element
- * @return {void}
+ * @return {boolean}
  */
 function applyControlSizing(element) {
-	setStylePropertyIfChanged(element, "boxSizing", "border-box");
-	setStylePropertyIfChanged(
-		element,
-		"height",
-		"var(--monster-control-bar-height)",
-	);
-	setStylePropertyIfChanged(
-		element,
-		"minHeight",
-		"var(--monster-control-bar-height)",
-	);
+	let changed = setStylePropertyIfChanged(element, "boxSizing", "border-box");
+	changed =
+		setStylePropertyIfChanged(
+			element,
+			"height",
+			"var(--monster-control-bar-height)",
+		) || changed;
+	changed =
+		setStylePropertyIfChanged(
+			element,
+			"minHeight",
+			"var(--monster-control-bar-height)",
+		) || changed;
 	if (isWrapperElement(element)) {
-		setStylePropertyIfChanged(element, "display", "flex");
-		setStylePropertyIfChanged(element, "alignItems", "stretch");
+		changed = setStylePropertyIfChanged(element, "display", "flex") || changed;
+		changed =
+			setStylePropertyIfChanged(element, "alignItems", "stretch") || changed;
 	}
 
 	for (const control of getContainedControlElements(element)) {
-		setStylePropertyIfChanged(control, "display", "flex");
-		setStylePropertyIfChanged(control, "boxSizing", "border-box");
-		setStylePropertyIfChanged(control, "height", "100%");
-		setStylePropertyIfChanged(control, "minHeight", "0px");
+		changed = setStylePropertyIfChanged(control, "display", "flex") || changed;
+		changed =
+			setStylePropertyIfChanged(control, "boxSizing", "border-box") || changed;
+		changed = setStylePropertyIfChanged(control, "height", "100%") || changed;
+		changed = setStylePropertyIfChanged(control, "minHeight", "0px") || changed;
 		if (control.tagName === "MONSTER-INPUT-GROUP") {
-			setStylePropertyIfChanged(control, "flex", "1 1 auto");
+			changed =
+				setStylePropertyIfChanged(control, "flex", "1 1 auto") || changed;
 		}
 	}
+	return changed;
 }
 
 /**
@@ -1295,7 +1231,7 @@ function isTopLevelContainedControl(container, control) {
  * @private
  * @param {Object} layout
  * @param {boolean} shouldShowSwitch
- * @return {void}
+ * @return {boolean}
  */
 function updateJoinedBorders(layout, shouldShowSwitch) {
 	const mainItems = [...layout.visibleItemsInMainSlot];
@@ -1331,7 +1267,11 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 		"bottom",
 		"top",
 	);
-	applyJoinedBorderOffsets.call(this, marginLeftByElement, marginTopByElement);
+	return applyJoinedBorderOffsets.call(
+		this,
+		marginLeftByElement,
+		marginTopByElement,
+	);
 }
 
 /**
@@ -1432,21 +1372,26 @@ function collectBlockJoinedBorders(elements, marginTopByElement) {
  * @private
  * @param {Map<HTMLElement, string>} marginLeftByElement
  * @param {Map<HTMLElement, string>} marginTopByElement
- * @return {void}
+ * @return {boolean}
  */
 function applyJoinedBorderOffsets(marginLeftByElement, marginTopByElement) {
+	let changed = false;
 	for (const element of getJoinedBorderOffsetElements.call(this)) {
-		setStylePropertyIfChanged(
+		const marginLeft = marginLeftByElement.get(element) || "";
+		changed =
+			setStylePropertyIfChanged(element, "marginLeft", marginLeft) || changed;
+		this[layoutStateSymbol]?.joinedInlineOffsets?.set(
 			element,
-			"marginLeft",
-			marginLeftByElement.get(element) || "",
-		);
-		setStylePropertyIfChanged(
-			element,
-			"marginTop",
-			marginTopByElement.get(element) || "",
+			getComputedCssPixels(marginLeft),
 		);
+		changed =
+			setStylePropertyIfChanged(
+				element,
+				"marginTop",
+				marginTopByElement.get(element) || "",
+			) || changed;
 	}
+	return changed;
 }
 
 /**
@@ -1472,7 +1417,7 @@ function getJoinedBorderOffsetElements() {
  * @param {HTMLElement} element
  * @param {"marginLeft"|"marginTop"} property
  * @param {string} value
- * @return {void}
+ * @return {boolean}
  */
 function setStylePropertyIfChanged(element, property, value) {
 	if (property.startsWith("--")) {
@@ -1482,13 +1427,16 @@ function setStylePropertyIfChanged(element, property, value) {
 			} else {
 				element.style.setProperty(property, value);
 			}
+			return true;
 		}
-		return;
+		return false;
 	}
 
 	if (element.style[property] !== value) {
 		element.style[property] = value;
+		return true;
 	}
+	return false;
 }
 
 /**
@@ -1667,10 +1615,13 @@ function calculateControlBarDimensions() {
 	}
 
 	if (this[switchElementSymbol]) {
-		this[dimensionsSymbol].setVia(
-			"data.switchWidth",
-			this[switchElementSymbol].offsetWidth,
-		);
+		let cachedSwitchWidth = 0;
+		try {
+			cachedSwitchWidth =
+				this[dimensionsSymbol].getVia("data.switchWidth") || 0;
+		} catch {}
+		const switchWidth = measureSwitchWidth.call(this, cachedSwitchWidth);
+		this[dimensionsSymbol].setVia("data.switchWidth", switchWidth);
 	}
 
 	this[dimensionsSymbol].setVia("data.calculated", true);
@@ -1836,17 +1787,101 @@ function suppressLayoutFeedback() {
  * @param {ResizeObserverEntry[]} entries
  * @return {boolean}
  */
-function hasContainerResizeEntry(entries) {
+function hasLayoutResizeEntry(entries) {
 	const stackedBreakpointContainer =
 		resolveStackedBreakpointContainer.call(this);
 	return entries.some((entry) => {
-		return (
+		if (
 			entry.target === this.parentElement ||
 			entry.target === stackedBreakpointContainer
+		) {
+			return true;
+		}
+
+		if (
+			!(entry.target instanceof HTMLElement) ||
+			entry.target.parentElement !== this
+		) {
+			return false;
+		}
+
+		const inlineSize = entry.target.getBoundingClientRect().width;
+		if (!(inlineSize > 0)) {
+			return false;
+		}
+
+		const itemInlineSizes = this[layoutStateSymbol]?.itemInlineSizes;
+		if (!(itemInlineSizes instanceof WeakMap)) {
+			return true;
+		}
+
+		const previousInlineSize = itemInlineSizes.get(entry.target);
+		itemInlineSizes.set(entry.target, inlineSize);
+		return (
+			typeof previousInlineSize !== "number" ||
+			Math.abs(previousInlineSize - inlineSize) > LAYOUT_RESIZE_EPSILON
 		);
 	});
 }
 
+/**
+ * Measure the overflow switch without exposing it visually. A switch hidden
+ * with `display: none` has no layout width, so it must be made measurable for
+ * the duration of the synchronous read.
+ *
+ * @private
+ * @param {number} cachedWidth
+ * @return {number}
+ */
+function measureSwitchWidth(cachedWidth = 0) {
+	const element = this[switchElementSymbol];
+	if (!(element instanceof HTMLElement)) {
+		return 0;
+	}
+
+	const visibleWidth = element.offsetWidth;
+	if (visibleWidth > 0) {
+		return visibleWidth;
+	}
+	if (cachedWidth > 0) {
+		return cachedWidth;
+	}
+
+	const hadHiddenAttribute = element.hasAttribute("hidden");
+	const hadHiddenClass = element.classList.contains("hidden");
+	const previousVisibility = element.style.getPropertyValue("visibility");
+	const previousVisibilityPriority =
+		element.style.getPropertyPriority("visibility");
+
+	element.style.setProperty("visibility", "hidden", "important");
+	if (hadHiddenAttribute) {
+		element.removeAttribute("hidden");
+	}
+	if (hadHiddenClass) {
+		element.classList.remove("hidden");
+	}
+
+	const measuredWidth = element.offsetWidth;
+
+	if (hadHiddenClass) {
+		element.classList.add("hidden");
+	}
+	if (hadHiddenAttribute) {
+		element.setAttribute("hidden", "");
+	}
+	if (previousVisibility === "") {
+		element.style.removeProperty("visibility");
+	} else {
+		element.style.setProperty(
+			"visibility",
+			previousVisibility,
+			previousVisibilityPriority,
+		);
+	}
+
+	return measuredWidth;
+}
+
 /**
  * @private
  * @param {boolean} visible