@schukai/monster 4.136.19 → 4.136.21

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.19"}
+{"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.21"}

package/source/components/datatable/pagination.mjs

@@ -205,10 +205,26 @@ class Pagination extends CustomElement {
 			return;
 		}
 
+		const previousCurrentPage = Number.parseInt(
+			this.getOption("currentPage"),
+			10,
+		);
+		const previousTotalPages = Number.parseInt(this.getOption("pages"), 10);
+		const stateUnchanged =
+			Number.isFinite(previousCurrentPage) &&
+			Number.isFinite(previousTotalPages) &&
+			previousCurrentPage === currentPage &&
+			previousTotalPages === totalPages;
+
 		// 1. Update the component's internal options with the new values.
 		this.setOption("currentPage", currentPage);
 		this.setOption("pages", totalPages);
 
+		if (stateUnchanged) {
+			this.refreshLayout({ schedule: true });
+			return;
+		}
+
 		// 2. Call the existing buildPagination function to recalculate the links.
 		const pagination = buildPagination.call(
 			this,
@@ -227,20 +243,35 @@ class Pagination extends CustomElement {
 		// 4. Set the 'pagination' option, which will trigger the component to re-render.
 		this.setOption("pagination", pagination);
 
-		if (isAdaptivePagination.call(this)) {
-			const list = this.shadowRoot?.querySelector(".pagination-list");
-			if (list) {
-				list.setAttribute("data-monster-adaptive-ready", "false");
-			}
-			schedulePaginationLayoutUpdate.call(this);
-		} else {
-			const list = this.shadowRoot?.querySelector(".pagination-list");
-			if (list) {
-				list.setAttribute("data-monster-adaptive-ready", "true");
+		this.refreshLayout({ schedule: true });
+
+		syncPaginationStateToDom.call(this, pagination);
+	}
+
+	refreshLayout({ schedule = false } = {}) {
+		if (schedule === true) {
+			if (isAdaptivePagination.call(this)) {
+				schedulePaginationLayoutUpdate.call(this);
+			} else {
+				const list = this.shadowRoot?.querySelector(".pagination-list");
+				if (list) {
+					list.setAttribute("data-monster-adaptive-ready", "true");
+				}
 			}
+			return this;
 		}
 
-		syncPaginationStateToDom.call(this, pagination);
+		if (isAdaptivePagination.call(this)) {
+			applyPaginationLayout.call(this);
+			return this;
+		}
+
+		const list = this.shadowRoot?.querySelector(".pagination-list");
+		if (list) {
+			list.setAttribute("data-monster-adaptive-ready", "true");
+		}
+
+		return this;
 	}
 	/**
 	 *
@@ -677,14 +708,7 @@ function handleDataSourceChanges() {
 
 	this.setOption("pagination", pagination);
 
-	if (isAdaptivePagination.call(this)) {
-		schedulePaginationLayoutUpdate.call(this);
-	} else {
-		const list = this.shadowRoot?.querySelector(".pagination-list");
-		if (list) {
-			list.setAttribute("data-monster-adaptive-ready", "true");
-		}
-	}
+	this.refreshLayout({ schedule: isAdaptivePagination.call(this) });
 }
 
 /**

package/source/components/form/select.mjs

@@ -138,6 +138,12 @@ const clearOptionEventHandler = Symbol("clearOptionEventHandler");
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
 const resizeObserverFrameSymbol = Symbol("resizeObserverFrame");
+const layoutCycleFrameSymbol = Symbol("layoutCycleFrame");
+const layoutCycleTokenSymbol = Symbol("layoutCycleToken");
+const layoutCycleModeSymbol = Symbol("layoutCycleMode");
+const layoutCyclePendingFlagsSymbol = Symbol("layoutCyclePendingFlags");
+const layoutCyclePendingPrioritySymbol = Symbol("layoutCyclePendingPriority");
+const layoutCycleRunningSymbol = Symbol("layoutCycleRunning");
 const visualViewportResizeHandlerSymbol = Symbol("visualViewportResizeHandler");
 const visualViewportScrollHandlerSymbol = Symbol("visualViewportScrollHandler");
 const visibilityChangeHandlerSymbol = Symbol("visibilityChangeHandler");
@@ -307,6 +313,19 @@ const lookupInProgressSymbol = Symbol("lookupInProgress");
 const unresolvedSelectionValuesSymbol = Symbol("unresolvedSelectionValues");
 const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
 const remoteInfoRequestSymbol = Symbol("remoteInfoRequest");
+const remoteInfoStableMessageSymbol = Symbol("remoteInfoStableMessage");
+
+const SELECT_LAYOUT_PRIORITY_PASSIVE = 1;
+const SELECT_LAYOUT_PRIORITY_INTERACTIVE = 2;
+const SELECT_LAYOUT_PRIORITY_CRITICAL = 3;
+
+const SELECT_LAYOUT_REASON_OPTION_STATE = 1 << 0;
+const SELECT_LAYOUT_REASON_PAGINATION = 1 << 1;
+const SELECT_LAYOUT_REASON_POSITION = 1 << 2;
+const SELECT_LAYOUT_REASON_ALL =
+	SELECT_LAYOUT_REASON_OPTION_STATE |
+	SELECT_LAYOUT_REASON_PAGINATION |
+	SELECT_LAYOUT_REASON_POSITION;
 
 /**
  * @private
@@ -709,19 +728,21 @@ class Select extends CustomControl {
 					}
 
 					this.setOption("messages.selected", "");
-					this.setOption("messages.total", "");
+					setRemoteInfoText.call(this, "");
 					this.setOption("messages.summary", "");
 					this.setOption("total", null);
 					resetPaginationState.call(this);
 
-					resetErrorAttribute(this);
+						resetErrorAttribute(this);
 
-					this[lazyLoadDoneSymbol] = false;
+						this[lazyLoadDoneSymbol] = false;
 
-					checkOptionState.call(this);
-					calcAndSetOptionsDimension.call(this);
-					updatePopper.call(this);
-				})
+						scheduleSelectLayoutCycle.call(
+							this,
+							SELECT_LAYOUT_PRIORITY_CRITICAL,
+							SELECT_LAYOUT_REASON_ALL,
+						);
+					})
 				.catch((e) => {
 					addErrorAttribute(this, e);
 				});
@@ -1102,6 +1123,44 @@ function processAndApplyRemoteInfoTotal(data) {
 	}
 }
 
+/**
+ * @private
+ * @param {string|null|undefined} message
+ * @param {object} [options]
+ * @param {boolean} [options.reserveSpace=false]
+ * @returns {void}
+ */
+function setRemoteInfoText(message, { reserveSpace = false } = {}) {
+	const normalizedMessage =
+		message === undefined || message === null ? "" : `${message}`;
+	const previousStableMessage =
+		typeof this[remoteInfoStableMessageSymbol] === "string"
+			? this[remoteInfoStableMessageSymbol]
+			: "";
+	const renderedMessage =
+		reserveSpace === true &&
+		normalizedMessage === "" &&
+		previousStableMessage !== ""
+			? previousStableMessage
+			: normalizedMessage;
+
+	this.setOption("messages.total", renderedMessage);
+
+	if (normalizedMessage !== "") {
+		this[remoteInfoStableMessageSymbol] = normalizedMessage;
+	} else if (reserveSpace !== true) {
+		this[remoteInfoStableMessageSymbol] = "";
+	}
+
+	if (this[remoteInfoElementSymbol] instanceof HTMLElement) {
+		if (reserveSpace === true && renderedMessage !== "") {
+			this[remoteInfoElementSymbol].style.visibility = "hidden";
+		} else {
+			this[remoteInfoElementSymbol].style.removeProperty("visibility");
+		}
+	}
+}
+
 /**
  * @private
  * @returns {number}
@@ -1964,7 +2023,9 @@ function fetchIt(url, controlOptions) {
 			classes.add("d-none");
 			this.setOption("classes.noOptions", classes.toString());
 			this.setOption("messages.emptyOptions", "");
-			this.setOption("messages.total", "");
+			setRemoteInfoText.call(this, "", {
+				reserveSpace: true,
+			});
 		}
 
 		new Processing(10, () => {
@@ -2158,6 +2219,7 @@ function disconnectResizeObserver() {
 		this[resizeObserverSymbol].disconnect();
 	}
 	cancelScheduledResizeObserverPopperUpdate.call(this);
+	cancelScheduledSelectLayoutCycle.call(this);
 
 	const viewport = getGlobal().visualViewport;
 	if (
@@ -2217,7 +2279,11 @@ function scheduleResizeObserverPopperUpdate() {
 
 	this[resizeObserverFrameSymbol] = schedule(() => {
 		delete this[resizeObserverFrameSymbol];
-		updatePopper.call(this);
+		scheduleSelectLayoutCycle.call(
+			this,
+			SELECT_LAYOUT_PRIORITY_CRITICAL,
+			SELECT_LAYOUT_REASON_ALL,
+		);
 	});
 }
 
@@ -2236,6 +2302,155 @@ function cancelScheduledResizeObserverPopperUpdate() {
 	delete this[resizeObserverFrameSymbol];
 }
 
+function applySelectLayoutState(layoutReasons = 0) {
+	if (layoutReasons & SELECT_LAYOUT_REASON_OPTION_STATE) {
+		checkOptionState.call(this);
+	}
+
+	calcAndSetOptionsDimension.call(this);
+
+	if (layoutReasons & SELECT_LAYOUT_REASON_PAGINATION) {
+		refreshSelectPaginationLayout.call(this);
+	}
+}
+
+function performSelectLayoutCycle(layoutReasons = SELECT_LAYOUT_REASON_ALL) {
+	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
+		return Promise.resolve();
+	}
+
+	if (this.getOption("disabled", false) === true) {
+		return Promise.resolve();
+	}
+
+	return new Processing(() => {
+		applySelectLayoutState.call(this, layoutReasons);
+		if (layoutReasons & SELECT_LAYOUT_REASON_POSITION) {
+			return positionPopper.call(
+				this,
+				this[controlElementSymbol],
+				this[popperElementSymbol],
+				getSelectPopperPositionOptions.call(this),
+			);
+		}
+	}).run();
+}
+
+function cancelScheduledSelectLayoutCycle() {
+	const globalObject = getGlobal();
+	const frameId = this[layoutCycleFrameSymbol];
+	if (typeof frameId === "number") {
+		if (globalObject?.cancelAnimationFrame instanceof Function) {
+			globalObject.cancelAnimationFrame(frameId);
+		} else {
+			globalObject.clearTimeout(frameId);
+		}
+	}
+
+	delete this[layoutCycleFrameSymbol];
+	this[layoutCycleTokenSymbol] = (this[layoutCycleTokenSymbol] || 0) + 1;
+	delete this[layoutCycleModeSymbol];
+}
+
+function flushScheduledSelectLayoutCycle() {
+	if (this[layoutCycleRunningSymbol] === true) {
+		return;
+	}
+
+	const layoutReasons =
+		this[layoutCyclePendingFlagsSymbol] || SELECT_LAYOUT_REASON_ALL;
+	const layoutPriority =
+		this[layoutCyclePendingPrioritySymbol] || SELECT_LAYOUT_PRIORITY_INTERACTIVE;
+
+	delete this[layoutCyclePendingFlagsSymbol];
+	delete this[layoutCyclePendingPrioritySymbol];
+
+	this[layoutCycleRunningSymbol] = true;
+	performSelectLayoutCycle
+		.call(this, layoutReasons)
+		.catch((e) => {
+			addErrorAttribute(this, e);
+		})
+		.finally(() => {
+			delete this[layoutCycleRunningSymbol];
+			if (this[layoutCyclePendingFlagsSymbol]) {
+				scheduleSelectLayoutCycle.call(
+					this,
+					layoutPriority,
+					this[layoutCyclePendingFlagsSymbol],
+				);
+			}
+		});
+}
+
+function scheduleSelectLayoutCycle(
+	layoutPriority = SELECT_LAYOUT_PRIORITY_INTERACTIVE,
+	layoutReasons = SELECT_LAYOUT_REASON_ALL,
+) {
+	this[layoutCyclePendingFlagsSymbol] =
+		(this[layoutCyclePendingFlagsSymbol] || 0) | layoutReasons;
+	this[layoutCyclePendingPrioritySymbol] = Math.max(
+		this[layoutCyclePendingPrioritySymbol] || 0,
+		layoutPriority,
+	);
+
+	if (this[layoutCycleRunningSymbol] === true) {
+		return;
+	}
+
+	const pendingPriority = this[layoutCyclePendingPrioritySymbol];
+	const currentMode = this[layoutCycleModeSymbol];
+	if (
+		currentMode === "microtask" ||
+		(currentMode === "frame" &&
+			pendingPriority !== SELECT_LAYOUT_PRIORITY_CRITICAL)
+	) {
+		return;
+	}
+
+	if (pendingPriority === SELECT_LAYOUT_PRIORITY_CRITICAL) {
+		cancelScheduledSelectLayoutCycle.call(this);
+		const token = this[layoutCycleTokenSymbol];
+		this[layoutCycleModeSymbol] = "microtask";
+		queueMicrotask(() => {
+			if (
+				this[layoutCycleModeSymbol] !== "microtask" ||
+				this[layoutCycleTokenSymbol] !== token
+			) {
+				return;
+			}
+
+			delete this[layoutCycleModeSymbol];
+			flushScheduledSelectLayoutCycle.call(this);
+		});
+		return;
+	}
+
+	const globalObject = getGlobal();
+	const schedule =
+		globalObject?.requestAnimationFrame instanceof Function
+			? globalObject.requestAnimationFrame.bind(globalObject)
+			: (callback) => {
+					return globalObject.setTimeout(callback, 16);
+			  };
+
+	this[layoutCycleModeSymbol] = "frame";
+	const token = (this[layoutCycleTokenSymbol] || 0) + 1;
+	this[layoutCycleTokenSymbol] = token;
+	this[layoutCycleFrameSymbol] = schedule(() => {
+		delete this[layoutCycleFrameSymbol];
+		if (
+			this[layoutCycleModeSymbol] !== "frame" ||
+			this[layoutCycleTokenSymbol] !== token
+		) {
+			return;
+		}
+
+		delete this[layoutCycleModeSymbol];
+		flushScheduledSelectLayoutCycle.call(this);
+	});
+}
+
 /**
  * @private
  * @returns {string}
@@ -2327,6 +2542,27 @@ function buildSelectionLabel(value) {
 		return map.get(key);
 	}
 
+	const options = this.getOption("options");
+	if (isArray(options)) {
+		for (const option of options) {
+			if (!isObject(option) || option.value === undefined) {
+				continue;
+			}
+
+			const optionKey = strict
+				? option.value
+				: getSelectionStateKey.call(this, option.value);
+			if (optionKey !== key) {
+				continue;
+			}
+
+			if (clearUnresolvedSelectionValue.call(this, value)) {
+				this[lookupCacheSymbol].delete(getSelectionCacheKey.call(this, value));
+			}
+			return option.label;
+		}
+	}
+
 	const cacheKey = getSelectionCacheKey.call(this, value);
 	if (this[lookupCacheSymbol].has(cacheKey)) {
 		return this[lookupCacheSymbol].get(cacheKey);
@@ -2773,19 +3009,21 @@ function setTotalText() {
 	}
 
 	if (this[isLoadingSymbol] === true) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "", {
+			reserveSpace: true,
+		});
 		return;
 	}
 
 	const count = this.getOption("options").length;
 	if (count === 0) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 		return;
 	}
 
 	const total = Number.parseInt(this.getOption("total"));
 	if (Number.isNaN(total)) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 		return;
 	}
 
@@ -2793,7 +3031,7 @@ function setTotalText() {
 
 	const diff = total - count;
 	if (diff < 0) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 		return;
 	}
 	const text = translations.getPluralRuleText("total", diff, "");
@@ -2801,7 +3039,7 @@ function setTotalText() {
 		count: String(diff),
 	}).format(text);
 
-	this.setOption("messages.total", selectedText);
+	setRemoteInfoText.call(this, selectedText);
 }
 
 /**
@@ -2959,6 +3197,7 @@ function calcAndSetOptionsDimension() {
 	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
 		widthConstraints.preferredWidth,
 	)}`;
+	this[popperElementSymbol].dataset.monsterWidthBehavior = "preferred";
 	if (
 		Number.isFinite(widthConstraints.maxWidth) &&
 		widthConstraints.maxWidth > 0
@@ -2973,8 +3212,12 @@ function calcAndSetOptionsDimension() {
 		delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
 		this[popperElementSymbol].style.removeProperty("maxWidth");
 	}
-	this[popperElementSymbol].style.width = "";
-	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.width = `${Math.ceil(
+		Math.min(widthConstraints.preferredWidth, widthConstraints.maxWidth),
+	)}px`;
+	this[popperElementSymbol].style.minWidth = `${Math.ceil(
+		Math.min(widthConstraints.preferredWidth, widthConstraints.maxWidth),
+	)}px`;
 	this[popperElementSymbol].style.maxHeight = `${Math.ceil(
 		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
 	)}px`;
@@ -3227,6 +3470,7 @@ function resetSelectPopperDimensionStyles() {
 
 	delete this[popperElementSymbol].dataset.monsterPreferredWidth;
 	delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+	delete this[popperElementSymbol].dataset.monsterWidthBehavior;
 	this[popperElementSymbol].style.removeProperty("width");
 	this[popperElementSymbol].style.removeProperty("minWidth");
 	this[popperElementSymbol].style.removeProperty("maxWidth");
@@ -3355,12 +3599,16 @@ function filterOptions() {
 			}
 		}
 	})
-		.run()
-		.then(() => {
-			new Processing(100, () => {
-				calcAndSetOptionsDimension.call(this);
-				focusFilter.call(this);
-			})
+			.run()
+			.then(() => {
+				new Processing(100, () => {
+					scheduleSelectLayoutCycle.call(
+						this,
+						SELECT_LAYOUT_PRIORITY_CRITICAL,
+						SELECT_LAYOUT_REASON_PAGINATION | SELECT_LAYOUT_REASON_POSITION,
+					);
+					focusFilter.call(this);
+				})
 				.run()
 				.catch((e) => {
 					addErrorAttribute(this, e);
@@ -4531,12 +4779,13 @@ function show() {
 		} else {
 			initTotal.call(self);
 		}
-		calcAndSetOptionsDimension.call(this);
-		focusFilter.call(this);
-		this[popperElementSymbol].style.removeProperty("visibility");
-		refreshSelectPaginationLayout.call(this);
-		updatePopper.call(this);
-	})
+			focusFilter.call(this);
+			return performSelectLayoutCycle
+				.call(this, SELECT_LAYOUT_REASON_ALL)
+				.then(() => {
+					this[popperElementSymbol].style.removeProperty("visibility");
+				});
+		})
 		.run()
 		.catch((e) => {
 			addErrorAttribute(this, e);
@@ -4621,7 +4870,9 @@ function initTotal() {
 	}
 
 	const fetchOptions = this.getOption("fetch", {});
-	this.setOption("messages.total", "");
+	setRemoteInfoText.call(this, "", {
+		reserveSpace: true,
+	});
 
 	const remoteInfoRequest = getGlobal()
 		.fetch(url, fetchOptions)
@@ -4678,7 +4929,7 @@ function resetPaginationState(clearTotalMessage = true) {
 	paginationElement.setOption("currentPage", null);
 	paginationElement.setOption("objectsPerPage", null);
 	if (clearTotalMessage === true) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 	}
 }
 
@@ -4689,13 +4940,21 @@ function clearOptionsOnError() {
 
 function refreshSelectPaginationLayout() {
 	const paginationElement = this[paginationElementSymbol];
-	if (!paginationElement || typeof paginationElement.getOption !== "function") {
+	if (!paginationElement) {
+		return;
+	}
+
+	if (typeof paginationElement.refreshLayout === "function") {
+		paginationElement.refreshLayout();
+		return;
+	}
+
+	if (typeof paginationElement.getOption !== "function") {
 		return;
 	}
 
 	const currentPage = paginationElement.getOption("currentPage");
 	const totalPages = paginationElement.getOption("pages");
-
 	if (!isInteger(currentPage) || !isInteger(totalPages)) {
 		return;
 	}
@@ -4953,15 +5212,17 @@ function initEventHandler() {
 			}
 		}
 
-		this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
-			100,
-			() => {
-				checkOptionState.call(self);
-				calcAndSetOptionsDimension.call(self);
-				updatePopper.call(self);
-				delete this[debounceOptionsMutationObserverSymbol];
-			},
-		);
+			this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
+				100,
+				() => {
+					scheduleSelectLayoutCycle.call(
+						self,
+						SELECT_LAYOUT_PRIORITY_INTERACTIVE,
+						SELECT_LAYOUT_REASON_ALL,
+					);
+					delete this[debounceOptionsMutationObserverSymbol];
+				},
+			);
 	};
 
 	const observer = new MutationObserver(callback);
@@ -5134,7 +5395,7 @@ function initControlReferences() {
 		`[${ATTRIBUTE_ROLE}=popper]`,
 	);
 	this[popperElementSymbol].monsterBeforeFloatingUpdate = () => {
-		calcAndSetOptionsDimension.call(this);
+		applySelectLayoutState.call(this, SELECT_LAYOUT_REASON_PAGINATION);
 	};
 	this[inlineFilterElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=filter][name="inline-filter"]`,
@@ -5164,31 +5425,11 @@ function initControlReferences() {
  * @private
  */
 function updatePopper() {
-	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
-		return;
-	}
-
-	if (this.getOption("disabled", false) === true) {
-		return;
-	}
-
-	new Processing(() => {
-		calcAndSetOptionsDimension.call(this);
-		positionPopper.call(
-			this,
-			this[controlElementSymbol],
-			this[popperElementSymbol],
-			getSelectPopperPositionOptions.call(this),
-		);
-		requestAnimationFrame(() => {
-			refreshSelectPaginationLayout.call(this);
-		});
-	})
-		.run()
-		.catch((e) => {
-			addErrorAttribute(this, e);
-		});
-
+	scheduleSelectLayoutCycle.call(
+		this,
+		SELECT_LAYOUT_PRIORITY_INTERACTIVE,
+		SELECT_LAYOUT_REASON_ALL,
+	);
 	return this;
 }
 

package/source/components/form/util/floating-ui.mjs

@@ -41,6 +41,7 @@ const settlingFrameMap = new WeakMap();
 const floatingResizeObserverMap = new WeakMap();
 const floatingSyncCycleMap = new WeakMap();
 const floatingAppearanceFrameMap = new WeakMap();
+const floatingAppearanceTimeoutMap = new WeakMap();
 
 /**
  * @private
@@ -639,6 +640,18 @@ function syncPreferredFloatingWidth(floatingElement, maxWidth) {
 	if (!Number.isFinite(preferredWidth) || preferredWidth <= 0) {
 		return;
 	}
+	const widthBehavior = floatingElement.dataset.monsterWidthBehavior;
+	if (widthBehavior === "preferred") {
+		const nextFloatingWidth = clampAvailableDimension(
+			preferredWidth,
+			Number.isFinite(maxWidth) ? maxWidth : Infinity,
+		);
+		if (Number.isFinite(nextFloatingWidth) && nextFloatingWidth > 0) {
+			floatingElement.style.width = `${nextFloatingWidth}px`;
+			floatingElement.style.minWidth = `${nextFloatingWidth}px`;
+		}
+		return;
+	}
 
 	const contentElement = getFloatingContentElement(floatingElement);
 	if (!(contentElement instanceof HTMLElement)) {
@@ -1036,6 +1049,15 @@ function scheduleFloatingAppearanceOpen(popperElement) {
 		return;
 	}
 
+	const finishAppearanceOpen = () => {
+		cancelFloatingAppearanceFrame(popperElement);
+
+		if (!isPositionedPopperOpen(popperElement)) {
+			return;
+		}
+
+		popperElement.dataset.monsterAppearance = "open";
+	};
 	const schedule =
 		typeof requestAnimationFrame === "function"
 			? requestAnimationFrame
@@ -1043,35 +1065,40 @@ function scheduleFloatingAppearanceOpen(popperElement) {
 					return setTimeout(callback, 16);
 			  };
 	const frameId = schedule(() => {
-		floatingAppearanceFrameMap.delete(popperElement);
-
-		if (!isPositionedPopperOpen(popperElement)) {
-			return;
-		}
-
-		popperElement.dataset.monsterAppearance = "open";
+		finishAppearanceOpen();
 	});
+	const timeoutId = setTimeout(() => {
+		finishAppearanceOpen();
+	}, 24);
 
 	floatingAppearanceFrameMap.set(popperElement, frameId);
+	floatingAppearanceTimeoutMap.set(popperElement, timeoutId);
 }
 
 function cancelFloatingAppearanceFrame(popperElement) {
 	const frameId = floatingAppearanceFrameMap.get(popperElement);
 	if (
-		frameId === undefined ||
-		frameId === null ||
-		Number.isNaN(frameId) === true
+		frameId !== undefined &&
+		frameId !== null &&
+		Number.isNaN(frameId) === false
 	) {
-		return;
+		if (typeof cancelAnimationFrame === "function") {
+			cancelAnimationFrame(frameId);
+		} else {
+			clearTimeout(frameId);
+		}
 	}
+	floatingAppearanceFrameMap.delete(popperElement);
 
-	if (typeof cancelAnimationFrame === "function") {
-		cancelAnimationFrame(frameId);
-	} else {
-		clearTimeout(frameId);
+	const timeoutId = floatingAppearanceTimeoutMap.get(popperElement);
+	if (
+		timeoutId !== undefined &&
+		timeoutId !== null &&
+		Number.isNaN(timeoutId) === false
+	) {
+		clearTimeout(timeoutId);
 	}
-
-	floatingAppearanceFrameMap.delete(popperElement);
+	floatingAppearanceTimeoutMap.delete(popperElement);
 }
 
 function applyFloatingArrowStyles(arrowElement, placement, arrowData) {

package/test/cases/components/datatable/pagination.mjs

@@ -7,6 +7,7 @@ let expect = chai.expect;
 chai.use(chaiDom);
 
 let Pagination;
+let EmbeddedPagination;
 
 describe('Pagination', function () {
     this.timeout(10000);
@@ -15,6 +16,9 @@ describe('Pagination', function () {
         initJSDOM().then(() => {
             import("../../../../source/components/datatable/pagination.mjs").then((m) => {
                 Pagination = m['Pagination'];
+                return import("../../../../source/components/datatable/embedded-pagination.mjs");
+            }).then((m) => {
+                EmbeddedPagination = m['EmbeddedPagination'];
                 done();
             }).catch(e => done(e));
         });
@@ -90,10 +94,65 @@ describe('Pagination', function () {
         }, 0);
     });
 
+    it('keeps adaptive pagination visible when the same state is applied again', function (done) {
+        const mocks = document.getElementById('mocks');
+        const wrapper = document.createElement('div');
+        const control = document.createElement('monster-embedded-pagination');
+
+        wrapper.getBoundingClientRect = () => ({
+            width: 320,
+            height: 40,
+            top: 0,
+            left: 0,
+            right: 320,
+            bottom: 40,
+            x: 0,
+            y: 0
+        });
+
+        mocks.appendChild(wrapper);
+        wrapper.appendChild(control);
+
+        setTimeout(() => {
+            try {
+                control.setPaginationState({currentPage: 2, totalPages: 5});
+
+                setTimeout(() => {
+                    try {
+                        const list = control.shadowRoot.querySelector('.pagination-list');
+                        expect(list).to.exist;
+
+                        list.setAttribute('data-monster-adaptive-ready', 'true');
+                        control.setPaginationState({currentPage: 2, totalPages: 5});
+
+                        expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
+
+                        setTimeout(() => {
+                            try {
+                                expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
+                                done();
+                            } catch (e) {
+                                done(e);
+                            }
+                        }, 50);
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 0);
+            } catch (e) {
+                done(e);
+            }
+        }, 0);
+    });
+
     describe('document.createElement', function () {
         it('should instance of Pagination', function () {
             expect(document.createElement('monster-pagination')).is.instanceof(Pagination);
         });
+
+        it('should instance of EmbeddedPagination', function () {
+            expect(document.createElement('monster-embedded-pagination')).is.instanceof(EmbeddedPagination);
+        });
     });
 
 });

package/test/cases/components/form/floating-ui.mjs

@@ -237,4 +237,77 @@ describe("form floating-ui boundary resolution", function () {
 		expect(options.style.height).to.equal("72px");
 		expect(options.style.maxHeight).to.equal("72px");
 	});
+
+	it("should keep a preferred-width popper stable instead of growing with content", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const header = document.createElement("div");
+		const content = document.createElement("div");
+		const options = document.createElement("div");
+
+		popper.dataset.monsterPreferredWidth = "240";
+		popper.dataset.monsterWidthBehavior = "preferred";
+		popper.style.maxWidth = "600px";
+		content.setAttribute("part", "content");
+		options.style.overflowY = "auto";
+
+		Object.defineProperty(content, "scrollWidth", {
+			configurable: true,
+			value: 620,
+		});
+		Object.defineProperty(options, "scrollWidth", {
+			configurable: true,
+			value: 620,
+		});
+
+		header.getBoundingClientRect = () => {
+			return {
+				width: 240,
+				height: 24,
+				top: 0,
+				left: 0,
+				right: 240,
+				bottom: 24,
+				x: 0,
+				y: 0,
+			};
+		};
+		content.getBoundingClientRect = () => {
+			return {
+				width: 220,
+				height: 120,
+				top: 0,
+				left: 0,
+				right: 220,
+				bottom: 120,
+				x: 0,
+				y: 0,
+			};
+		};
+		popper.getBoundingClientRect = () => {
+			return {
+				width: 240,
+				height: 160,
+				top: 0,
+				left: 0,
+				right: 240,
+				bottom: 160,
+				x: 0,
+				y: 0,
+			};
+		};
+
+		content.appendChild(options);
+		popper.appendChild(header);
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 600,
+			availableHeight: 200,
+		});
+
+		expect(popper.style.width).to.equal("240px");
+		expect(popper.style.minWidth).to.equal("240px");
+	});
 });

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

@@ -235,4 +235,44 @@ describe("PopperButton", function () {
 			}
 		}, 0);
 	});
+
+	it("should finish the opening appearance state when requestAnimationFrame stalls", function (done) {
+		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);
+
+		setTimeout(() => {
+			try {
+				button.showDialog();
+
+				const popper = button.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(popper.dataset.monsterAppearance).to.equal("opening");
+
+				setTimeout(() => {
+					try {
+						expect(popper.dataset.monsterAppearance).to.equal("open");
+						button.hideDialog();
+						done();
+					} catch (e) {
+						done(e);
+					} finally {
+						globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+						globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+					}
+				}, 30);
+			} catch (e) {
+				globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+				globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+				done(e);
+			}
+		}, 0);
+	});
 });

package/test/cases/components/form/select.mjs

@@ -47,6 +47,18 @@ function createJsonResponse(data, status = 200) {
     });
 }
 
+function createDeferred() {
+    let resolve;
+    let reject;
+
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return {promise, resolve, reject};
+}
+
 function waitForCondition(check, {timeout = 4000, interval = 25} = {}) {
     return new Promise((resolve, reject) => {
         const start = Date.now();
@@ -284,7 +296,8 @@ describe('Select', function () {
                     shadowRoot.querySelector('[data-monster-role=container]').click();
                     setTimeout(() => {
                         try {
-                            expect(popper.style.minWidth).to.equal('');
+                            expect(popper.style.minWidth).to.equal('240px');
+                            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
                             expect(popper.dataset.monsterPreferredWidth).to.equal('240');
                             done();
                         } catch (e) {
@@ -1140,6 +1153,195 @@ describe('Select', function () {
             expect(select.getOption('messages.total')).to.contain('No additional entries are available');
         });
 
+        it('should keep the remote-info footer height stable while a remote page request is pending', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            const firstRequest = createDeferred();
+            const secondRequest = createDeferred();
+            let requestCount = 0;
+
+            global['fetch'] = function () {
+                requestCount += 1;
+
+                if (requestCount === 1) {
+                    return firstRequest.promise;
+                }
+
+                if (requestCount === 2) {
+                    return secondRequest.promise;
+                }
+
+                return Promise.reject(new Error('unexpected fetch request'));
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const firstFetch = select.fetch('https://example.com/items?filter=*&page=1');
+            firstRequest.resolve(await createJsonResponse({
+                items: [
+                    {id: 'alpha', name: 'Alpha'}
+                ],
+                pagination: {
+                    total: 12,
+                    page: 1,
+                    perPage: 1
+                }
+            }));
+            await firstFetch;
+
+            await waitForCondition(() => {
+                return select.getOption('messages.total').includes('additional entries are available');
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const remoteInfoElement = select.shadowRoot.querySelector('[data-monster-role=remote-info]');
+
+            container.click();
+
+            await waitForCondition(() => {
+                return select.shadowRoot
+                    .querySelector('[data-monster-role=control]')
+                    .classList
+                    .contains('open');
+            });
+
+            expect(remoteInfoElement.style.visibility).to.equal('');
+
+            const secondFetch = select.fetch('https://example.com/items?filter=*&page=2');
+
+            await waitForCondition(() => {
+                return remoteInfoElement.style.visibility === 'hidden';
+            });
+
+            expect(select.getOption('messages.total')).to.contain('additional entries are available');
+
+            secondRequest.resolve(await createJsonResponse({
+                items: [
+                    {id: 'beta', name: 'Beta'}
+                ],
+                pagination: {
+                    total: 12,
+                    page: 2,
+                    perPage: 1
+                }
+            }));
+
+            await secondFetch;
+
+            await waitForCondition(() => {
+                return remoteInfoElement.style.visibility === '';
+            });
+
+            expect(select.getOption('messages.total')).to.contain('additional entries are available');
+        });
+
+        it('should clear preserved remote-info text after a later empty remote result settles', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            const firstRequest = createDeferred();
+            const secondRequest = createDeferred();
+            let requestCount = 0;
+
+            global['fetch'] = function () {
+                requestCount += 1;
+
+                if (requestCount === 1) {
+                    return firstRequest.promise;
+                }
+
+                if (requestCount === 2) {
+                    return secondRequest.promise;
+                }
+
+                return Promise.reject(new Error('unexpected fetch request'));
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const firstFetch = select.fetch('https://example.com/items?filter=*&page=1');
+            firstRequest.resolve(await createJsonResponse({
+                items: [
+                    {id: 'alpha', name: 'Alpha'}
+                ],
+                pagination: {
+                    total: 12,
+                    page: 1,
+                    perPage: 1
+                }
+            }));
+            await firstFetch;
+
+            await waitForCondition(() => {
+                return select.getOption('messages.total').includes('additional entries are available');
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const remoteInfoElement = select.shadowRoot.querySelector('[data-monster-role=remote-info]');
+
+            container.click();
+
+            await waitForCondition(() => {
+                return select.shadowRoot
+                    .querySelector('[data-monster-role=control]')
+                    .classList
+                    .contains('open');
+            });
+
+            const secondFetch = select.fetch('https://example.com/items?filter=leer&page=1');
+
+            await waitForCondition(() => {
+                return remoteInfoElement.style.visibility === 'hidden';
+            });
+
+            secondRequest.resolve(await createJsonResponse({
+                items: [],
+                pagination: {
+                    total: 0,
+                    page: 1,
+                    perPage: 1
+                }
+            }));
+
+            await secondFetch;
+
+            await waitForCondition(() => {
+                return select.getOption('messages.total') === '';
+            });
+
+            expect(remoteInfoElement.style.visibility).to.equal('');
+            expect(select.getOption('messages.total')).to.equal('');
+        });
+
         it('should avoid duplicate remote-info badges for empty remote filter results', async function () {
             this.timeout(4000);