@schukai/monster 4.136.20 → 4.136.22

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,7 +728,7 @@ 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);
@@ -718,9 +737,11 @@ class Select extends CustomControl {
 
 					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}
@@ -1129,7 +1188,10 @@ function getSelectionSyncState() {
 function hasSelectionLikeValue(candidate) {
 	if (isArray(candidate)) {
 		return candidate.some((entry) => {
-			if (isObject(entry) && Object.prototype.hasOwnProperty.call(entry, "value")) {
+			if (
+				isObject(entry) &&
+				Object.prototype.hasOwnProperty.call(entry, "value")
+			) {
 				return hasSelectionLikeValue.call(this, entry.value);
 			}
 
@@ -1851,8 +1913,7 @@ function getTranslations() {
  */
 function lookupSelection() {
 	const self = this;
-	const IntersectionObserverImplementation =
-		getGlobal().IntersectionObserver;
+	const IntersectionObserverImplementation = getGlobal().IntersectionObserver;
 
 	if (!(IntersectionObserverImplementation instanceof Function)) {
 		runSelectionLookupWhenVisible(self);
@@ -1911,11 +1972,9 @@ function runSelectionLookupWhenVisible(self) {
 			if (isEmptyLookupValue.call(self, value)) {
 				continue;
 			}
-			filterFromRemoteByValue
-				.call(self, url, { filter: value })
-				.catch((e) => {
-					addErrorAttribute(self, e);
-				});
+			filterFromRemoteByValue.call(self, url, { filter: value }).catch((e) => {
+				addErrorAttribute(self, e);
+			});
 		}
 	}, 100);
 }
@@ -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,21 +2219,16 @@ function disconnectResizeObserver() {
 		this[resizeObserverSymbol].disconnect();
 	}
 	cancelScheduledResizeObserverPopperUpdate.call(this);
+	cancelScheduledSelectLayoutCycle.call(this);
 
 	const viewport = getGlobal().visualViewport;
-	if (
-		viewport &&
-		this[visualViewportResizeHandlerSymbol] instanceof Function
-	) {
+	if (viewport && this[visualViewportResizeHandlerSymbol] instanceof Function) {
 		viewport.removeEventListener(
 			"resize",
 			this[visualViewportResizeHandlerSymbol],
 		);
 	}
-	if (
-		viewport &&
-		this[visualViewportScrollHandlerSymbol] instanceof Function
-	) {
+	if (viewport && this[visualViewportScrollHandlerSymbol] instanceof Function) {
 		viewport.removeEventListener(
 			"scroll",
 			this[visualViewportScrollHandlerSymbol],
@@ -2213,11 +2269,15 @@ function scheduleResizeObserverPopperUpdate() {
 			? globalObject.requestAnimationFrame.bind(globalObject)
 			: (callback) => {
 					return globalObject.setTimeout(callback, 16);
-			  };
+				};
 
 	this[resizeObserverFrameSymbol] = schedule(() => {
 		delete this[resizeObserverFrameSymbol];
-		updatePopper.call(this);
+		scheduleSelectLayoutCycle.call(
+			this,
+			SELECT_LAYOUT_PRIORITY_CRITICAL,
+			SELECT_LAYOUT_REASON_ALL,
+		);
 	});
 }
 
@@ -2236,6 +2296,156 @@ 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 +2537,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 +3004,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 +3026,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 +3034,7 @@ function setTotalText() {
 		count: String(diff),
 	}).format(text);
 
-	this.setOption("messages.total", selectedText);
+	setRemoteInfoText.call(this, selectedText);
 }
 
 /**
@@ -2833,7 +3066,10 @@ function setSummaryAndControlText() {
 		current === msg ||
 		current === null
 	) {
-		if (selections.length === 0 && hasRequestedSelectionValue.call(this) !== true) {
+		if (
+			selections.length === 0 &&
+			hasRequestedSelectionValue.call(this) !== true
+		) {
 			this.setOption("messages.control", msg);
 		} else {
 			this.setOption("messages.control", "");
@@ -2951,7 +3187,9 @@ function calcAndSetOptionsDimension() {
 	});
 
 	container.style.height =
-		listDimension.desiredHeight > 0 ? `${listDimension.desiredHeight}px` : "0px";
+		listDimension.desiredHeight > 0
+			? `${listDimension.desiredHeight}px`
+			: "0px";
 	container.style.maxHeight =
 		listDimension.maxHeight > 0 ? `${listDimension.maxHeight}px` : "0px";
 	container.style.overflowY = listDimension.overflowY;
@@ -3107,12 +3345,11 @@ function resolveSelectViewportMetrics({
 	};
 }
 
-function resolveSelectVisibleRect({
-	viewportMetrics,
-	boundaryRect = null,
-}) {
-	const viewportLeft = (viewportMetrics?.left || 0) + (viewportMetrics?.padding || 0);
-	const viewportTop = (viewportMetrics?.top || 0) + (viewportMetrics?.padding || 0);
+function resolveSelectVisibleRect({ viewportMetrics, boundaryRect = null }) {
+	const viewportLeft =
+		(viewportMetrics?.left || 0) + (viewportMetrics?.padding || 0);
+	const viewportTop =
+		(viewportMetrics?.top || 0) + (viewportMetrics?.padding || 0);
 	const viewportRight =
 		(viewportMetrics?.left || 0) +
 		(viewportMetrics?.width || 0) -
@@ -3160,14 +3397,8 @@ function getSelectPopperGeometry() {
 		viewportMetrics: viewport,
 		boundaryRect,
 	});
-	const spaceAbove = Math.max(
-		0,
-		controlRect.top - visibleRect.top,
-	);
-	const spaceBelow = Math.max(
-		0,
-		visibleRect.bottom - controlRect.bottom,
-	);
+	const spaceAbove = Math.max(0, controlRect.top - visibleRect.top);
+	const spaceBelow = Math.max(0, visibleRect.bottom - controlRect.bottom);
 	const availableHeight = Math.max(spaceAbove, spaceBelow, 0);
 
 	return {
@@ -3193,15 +3424,15 @@ function getSelectPopperPositionOptions() {
 		middleware.length === 0 ||
 		usesLegacyDefaultMiddleware
 	) {
-		popperOptions.middleware = getDefaultSelectPopperPositionProfile().middleware;
+		popperOptions.middleware =
+			getDefaultSelectPopperPositionProfile().middleware;
 	}
 
 	if (
 		!isString(popperOptions.placement) ||
 		popperOptions.placement === "bottom"
 	) {
-		popperOptions.placement =
-			getDefaultSelectPopperPositionProfile().placement;
+		popperOptions.placement = getDefaultSelectPopperPositionProfile().placement;
 	}
 
 	if (
@@ -3364,7 +3595,11 @@ function filterOptions() {
 		.run()
 		.then(() => {
 			new Processing(100, () => {
-				calcAndSetOptionsDimension.call(this);
+				scheduleSelectLayoutCycle.call(
+					this,
+					SELECT_LAYOUT_PRIORITY_CRITICAL,
+					SELECT_LAYOUT_REASON_PAGINATION | SELECT_LAYOUT_REASON_POSITION,
+				);
 				focusFilter.call(this);
 			})
 				.run()
@@ -4518,8 +4753,10 @@ function show() {
 		const shouldLoadRemoteOptions =
 			getFilterMode.call(self) === FILTER_MODE_REMOTE &&
 			getOptionElements.call(self).length === 0;
-		const shouldLoadDefaultOptions =
-			shouldUseDefaultOptionsUrl.call(self, getCurrentFilterValue.call(self));
+		const shouldLoadDefaultOptions = shouldUseDefaultOptionsUrl.call(
+			self,
+			getCurrentFilterValue.call(self),
+		);
 
 		if (shouldLoadDefaultOptions) {
 			setTimeout(() => {
@@ -4537,11 +4774,12 @@ function show() {
 		} else {
 			initTotal.call(self);
 		}
-		calcAndSetOptionsDimension.call(this);
 		focusFilter.call(this);
-		this[popperElementSymbol].style.removeProperty("visibility");
-		refreshSelectPaginationLayout.call(this);
-		updatePopper.call(this);
+		return performSelectLayoutCycle
+			.call(this, SELECT_LAYOUT_REASON_ALL)
+			.then(() => {
+				this[popperElementSymbol].style.removeProperty("visibility");
+			});
 	})
 		.run()
 		.catch((e) => {
@@ -4627,7 +4865,9 @@ function initTotal() {
 	}
 
 	const fetchOptions = this.getOption("fetch", {});
-	this.setOption("messages.total", "");
+	setRemoteInfoText.call(this, "", {
+		reserveSpace: true,
+	});
 
 	const remoteInfoRequest = getGlobal()
 		.fetch(url, fetchOptions)
@@ -4684,7 +4924,7 @@ function resetPaginationState(clearTotalMessage = true) {
 	paginationElement.setOption("currentPage", null);
 	paginationElement.setOption("objectsPerPage", null);
 	if (clearTotalMessage === true) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 	}
 }
 
@@ -4695,13 +4935,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;
 	}
@@ -4962,9 +5210,11 @@ function initEventHandler() {
 		this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
 			100,
 			() => {
-				checkOptionState.call(self);
-				calcAndSetOptionsDimension.call(self);
-				updatePopper.call(self);
+				scheduleSelectLayoutCycle.call(
+					self,
+					SELECT_LAYOUT_PRIORITY_INTERACTIVE,
+					SELECT_LAYOUT_REASON_ALL,
+				);
 				delete this[debounceOptionsMutationObserverSymbol];
 			},
 		);
@@ -5140,7 +5390,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"]`,
@@ -5170,31 +5420,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;
 }