@schukai/monster 4.136.21 → 4.136.23

package/source/components/form/select.mjs

@@ -733,16 +733,16 @@ class Select extends CustomControl {
 					this.setOption("total", null);
 					resetPaginationState.call(this);
 
-						resetErrorAttribute(this);
+					resetErrorAttribute(this);
 
-						this[lazyLoadDoneSymbol] = false;
+					this[lazyLoadDoneSymbol] = false;
 
-						scheduleSelectLayoutCycle.call(
-							this,
-							SELECT_LAYOUT_PRIORITY_CRITICAL,
-							SELECT_LAYOUT_REASON_ALL,
-						);
-					})
+					scheduleSelectLayoutCycle.call(
+						this,
+						SELECT_LAYOUT_PRIORITY_CRITICAL,
+						SELECT_LAYOUT_REASON_ALL,
+					);
+				})
 				.catch((e) => {
 					addErrorAttribute(this, e);
 				});
@@ -1188,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);
 			}
 
@@ -1398,10 +1401,11 @@ function importOptionsIntern(data) {
 	}
 
 	for (const [value, label] of entries) {
+		const optionLabel = resolveOptionLabel(label, value);
 		let found = false;
 		for (const option of options) {
 			if (option.value === value) {
-				option.label = label;
+				option.label = optionLabel;
 				option.visibility = visibility;
 				option.data = map.get(value);
 				found = true;
@@ -1412,7 +1416,7 @@ function importOptionsIntern(data) {
 		if (!found) {
 			options.push({
 				value,
-				label,
+				label: optionLabel,
 				visibility,
 				data: map.get(value),
 			});
@@ -1433,6 +1437,27 @@ function importOptionsIntern(data) {
 	return this;
 }
 
+function resolveOptionLabel(label, value) {
+	if (!isEmptyOptionLabel(label)) {
+		return label;
+	}
+
+	if (value === undefined || value === null) {
+		return label;
+	}
+
+	const fallback = `${value}`;
+	return fallback.trim() === "" ? label : fallback;
+}
+
+function isEmptyOptionLabel(label) {
+	return (
+		label === undefined ||
+		label === null ||
+		(isString(label) && label.trim() === "")
+	);
+}
+
 /**
  * @private
  * @returns {object}
@@ -1910,8 +1935,7 @@ function getTranslations() {
  */
 function lookupSelection() {
 	const self = this;
-	const IntersectionObserverImplementation =
-		getGlobal().IntersectionObserver;
+	const IntersectionObserverImplementation = getGlobal().IntersectionObserver;
 
 	if (!(IntersectionObserverImplementation instanceof Function)) {
 		runSelectionLookupWhenVisible(self);
@@ -1970,11 +1994,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);
 }
@@ -2222,19 +2244,13 @@ function disconnectResizeObserver() {
 	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],
@@ -2275,7 +2291,7 @@ function scheduleResizeObserverPopperUpdate() {
 			? globalObject.requestAnimationFrame.bind(globalObject)
 			: (callback) => {
 					return globalObject.setTimeout(callback, 16);
-			  };
+				};
 
 	this[resizeObserverFrameSymbol] = schedule(() => {
 		delete this[resizeObserverFrameSymbol];
@@ -2360,7 +2376,8 @@ function flushScheduledSelectLayoutCycle() {
 	const layoutReasons =
 		this[layoutCyclePendingFlagsSymbol] || SELECT_LAYOUT_REASON_ALL;
 	const layoutPriority =
-		this[layoutCyclePendingPrioritySymbol] || SELECT_LAYOUT_PRIORITY_INTERACTIVE;
+		this[layoutCyclePendingPrioritySymbol] ||
+		SELECT_LAYOUT_PRIORITY_INTERACTIVE;
 
 	delete this[layoutCyclePendingFlagsSymbol];
 	delete this[layoutCyclePendingPrioritySymbol];
@@ -2432,7 +2449,7 @@ function scheduleSelectLayoutCycle(
 			? globalObject.requestAnimationFrame.bind(globalObject)
 			: (callback) => {
 					return globalObject.setTimeout(callback, 16);
-			  };
+				};
 
 	this[layoutCycleModeSymbol] = "frame";
 	const token = (this[layoutCycleTokenSymbol] || 0) + 1;
@@ -3071,7 +3088,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", "");
@@ -3176,10 +3196,19 @@ function calcAndSetOptionsDimension() {
 	margin += parseInt(styles.getPropertyValue("margin-bottom"), 10);
 
 	const geometry = getSelectPopperGeometry.call(this);
+	const popperMaxHeight = Math.min(
+		geometry.availableHeight,
+		SELECT_MAX_POPPER_HEIGHT,
+	);
+	const listAvailableHeight = resolveSelectListAvailableHeight({
+		popperElement: this[popperElementSymbol],
+		contentElement: content,
+		popperMaxHeight,
+	});
 	const listDimension = resolveSelectListDimension({
 		visibleOptionHeights,
 		maxVisibleOptions: max,
-		availableHeight: geometry.availableHeight,
+		availableHeight: listAvailableHeight,
 		padding,
 		margin,
 	});
@@ -3189,7 +3218,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;
@@ -3219,7 +3250,7 @@ function calcAndSetOptionsDimension() {
 		Math.min(widthConstraints.preferredWidth, widthConstraints.maxWidth),
 	)}px`;
 	this[popperElementSymbol].style.maxHeight = `${Math.ceil(
-		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
+		popperMaxHeight,
 	)}px`;
 	container.style.overflowX = "hidden";
 
@@ -3230,6 +3261,62 @@ function calcAndSetOptionsDimension() {
 	}
 }
 
+function resolveSelectListAvailableHeight({
+	popperElement,
+	contentElement,
+	popperMaxHeight,
+}) {
+	if (!Number.isFinite(popperMaxHeight) || popperMaxHeight <= 0) {
+		return popperMaxHeight;
+	}
+
+	const reservedHeight = getSelectPopperReservedHeight(
+		popperElement,
+		contentElement,
+	);
+
+	return Math.max(0, popperMaxHeight - reservedHeight);
+}
+
+function getSelectPopperReservedHeight(popperElement, contentElement) {
+	if (!(popperElement instanceof HTMLElement)) {
+		return 0;
+	}
+
+	const popperStyle = getGlobal().getComputedStyle(popperElement);
+	let reservedHeight = 0;
+	reservedHeight += readSelectBoxDimension(popperStyle.paddingTop);
+	reservedHeight += readSelectBoxDimension(popperStyle.paddingBottom);
+	reservedHeight += readSelectBoxDimension(popperStyle.borderTopWidth);
+	reservedHeight += readSelectBoxDimension(popperStyle.borderBottomWidth);
+
+	for (const child of popperElement.children) {
+		if (
+			!(child instanceof HTMLElement) ||
+			child === contentElement ||
+			containsAttributeToken(child, "part", "content")
+		) {
+			continue;
+		}
+
+		const childStyle = getGlobal().getComputedStyle(child);
+		if (childStyle.display === "none") {
+			continue;
+		}
+
+		reservedHeight += child.getBoundingClientRect().height;
+		reservedHeight += readSelectBoxDimension(childStyle.marginTop);
+		reservedHeight += readSelectBoxDimension(childStyle.marginBottom);
+	}
+
+	return Math.max(0, reservedHeight);
+}
+
+function readSelectBoxDimension(rawValue) {
+	const value = Number.parseFloat(rawValue);
+	return Number.isFinite(value) ? value : 0;
+}
+
 function resolveSelectPopperPreferredWidth(controlWidth) {
 	return Math.max(Math.ceil(controlWidth), SELECT_MIN_POPPER_WIDTH);
 }
@@ -3345,12 +3432,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) -
@@ -3398,14 +3484,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 {
@@ -3431,15 +3511,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 (
@@ -3599,16 +3679,16 @@ function filterOptions() {
 			}
 		}
 	})
-			.run()
-			.then(() => {
-				new Processing(100, () => {
-					scheduleSelectLayoutCycle.call(
-						this,
-						SELECT_LAYOUT_PRIORITY_CRITICAL,
-						SELECT_LAYOUT_REASON_PAGINATION | SELECT_LAYOUT_REASON_POSITION,
-					);
-					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);
@@ -4319,8 +4399,9 @@ function areOptionsAvailableAndInitInternal() {
 			updated = true;
 		}
 
-		if (option?.label === undefined) {
-			option.label = option.value;
+		const normalizedLabel = resolveOptionLabel(option?.label, option?.value);
+		if (option?.label !== normalizedLabel) {
+			option.label = normalizedLabel;
 			updated = true;
 		}
 	}
@@ -4760,8 +4841,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(() => {
@@ -4779,13 +4862,13 @@ function show() {
 		} else {
 			initTotal.call(self);
 		}
-			focusFilter.call(this);
-			return performSelectLayoutCycle
-				.call(this, SELECT_LAYOUT_REASON_ALL)
-				.then(() => {
-					this[popperElementSymbol].style.removeProperty("visibility");
-				});
-		})
+		focusFilter.call(this);
+		return performSelectLayoutCycle
+			.call(this, SELECT_LAYOUT_REASON_ALL)
+			.then(() => {
+				this[popperElementSymbol].style.removeProperty("visibility");
+			});
+	})
 		.run()
 		.catch((e) => {
 			addErrorAttribute(this, e);
@@ -5212,17 +5295,17 @@ function initEventHandler() {
 			}
 		}
 
-			this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
-				100,
-				() => {
-					scheduleSelectLayoutCycle.call(
-						self,
-						SELECT_LAYOUT_PRIORITY_INTERACTIVE,
-						SELECT_LAYOUT_REASON_ALL,
-					);
-					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);

package/source/components/form/style/confirm-button.pcss

@@ -9,7 +9,10 @@ div[data-monster-role="decision"] {
     width: max-content;
     align-items: center;
     justify-content: space-evenly;
-    margin: 1rem 0 0.4rem 0;
+    gap: 0.75rem;
+    box-sizing: border-box;
+    margin: 1rem 0 0 0;
+    padding-bottom: 0.75rem;
 }
 
 div[data-monster-role="control"] {