@schukai/monster 4.141.2 → 4.142.0

package/source/components/form/select.mjs

@@ -73,6 +73,11 @@ import {
 	resolveClippingBoundaryElement,
 	resolveParentPopperContentBoundary,
 } from "./util/floating-ui.mjs";
+import {
+	FLOATING_LAYOUT_REASON,
+	cancelFloatingLayout,
+	enqueueFloatingLayout,
+} from "./util/floating-layout-queue.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
 
@@ -144,6 +149,7 @@ const layoutCycleModeSymbol = Symbol("layoutCycleMode");
 const layoutCyclePendingFlagsSymbol = Symbol("layoutCyclePendingFlags");
 const layoutCyclePendingPrioritySymbol = Symbol("layoutCyclePendingPriority");
 const layoutCycleRunningSymbol = Symbol("layoutCycleRunning");
+const pendingOpenIntentSymbol = Symbol("pendingOpenIntent");
 const visualViewportResizeHandlerSymbol = Symbol("visualViewportResizeHandler");
 const visualViewportScrollHandlerSymbol = Symbol("visualViewportScrollHandler");
 const visibilityChangeHandlerSymbol = Symbol("visibilityChangeHandler");
@@ -151,6 +157,10 @@ const windowResizeHandlerSymbol = Symbol("windowResizeHandler");
 const windowOrientationChangeHandlerSymbol = Symbol(
 	"windowOrientationChangeHandler",
 );
+const stablePopperControlWidthSymbol = Symbol("stablePopperControlWidth");
+const stablePopperHostStyleSnapshotSymbol = Symbol(
+	"stablePopperHostStyleSnapshot",
+);
 
 /**
  * local symbol
@@ -952,6 +962,7 @@ class Select extends CustomControl {
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		clearPendingOpenIntent.call(this);
 		if (!this[usesHostDismissSymbol]) {
 			const document = getDocument();
 			// close on outside ui-events
@@ -2339,17 +2350,46 @@ function performSelectLayoutCycle(layoutReasons = SELECT_LAYOUT_REASON_ALL) {
 		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();
+	return enqueueFloatingLayout({
+		owner: this,
+		popperElement: this[popperElementSymbol],
+		reason: resolveFloatingLayoutReasonFromSelectLayout(layoutReasons),
+		isActive: () =>
+			isPositionedPopperOpen(this[popperElementSymbol]) &&
+			this.getOption("disabled", false) !== true,
+		mutate: () => {
+			applySelectLayoutState.call(this, layoutReasons);
+		},
+		position: () => {
+			if (layoutReasons & SELECT_LAYOUT_REASON_POSITION) {
+				return positionPopper.call(
+					this,
+					this[controlElementSymbol],
+					this[popperElementSymbol],
+					getSelectPopperPositionOptions.call(this),
+				);
+			}
+		},
+		onError: (error) => {
+			addErrorAttribute(this, error);
+		},
+	});
+}
+
+function resolveFloatingLayoutReasonFromSelectLayout(layoutReasons) {
+	let reason = 0;
+
+	if (layoutReasons & SELECT_LAYOUT_REASON_OPTION_STATE) {
+		reason |= FLOATING_LAYOUT_REASON.CONTENT;
+	}
+	if (layoutReasons & SELECT_LAYOUT_REASON_PAGINATION) {
+		reason |= FLOATING_LAYOUT_REASON.CONTENT;
+	}
+	if (layoutReasons & SELECT_LAYOUT_REASON_POSITION) {
+		reason |= FLOATING_LAYOUT_REASON.POSITION;
+	}
+
+	return reason || FLOATING_LAYOUT_REASON.CONTENT;
 }
 
 function cancelScheduledSelectLayoutCycle() {
@@ -2468,6 +2508,52 @@ function scheduleSelectLayoutCycle(
 	});
 }
 
+function hasConfiguredOptionsWaitingForRender() {
+	const options = this.getOption("options");
+
+	if (isArray(options)) {
+		return options.length > 0;
+	}
+
+	if (!isIterable(options) || isString(options)) {
+		return false;
+	}
+
+	for (const option of options) {
+		void option;
+		return true;
+	}
+
+	return false;
+}
+
+function queuePendingOpenIntent() {
+	this[pendingOpenIntentSymbol] = true;
+}
+
+function clearPendingOpenIntent() {
+	delete this[pendingOpenIntentSymbol];
+}
+
+function retryPendingOpenIntent() {
+	if (this[pendingOpenIntentSymbol] !== true) {
+		return;
+	}
+
+	if (isPositionedPopperOpen(this[popperElementSymbol])) {
+		clearPendingOpenIntent.call(this);
+		return;
+	}
+
+	if (getOptionElements.call(this).length === 0) {
+		clearPendingOpenIntent.call(this);
+		return;
+	}
+
+	clearPendingOpenIntent.call(this);
+	show.call(this);
+}
+
 /**
  * @private
  * @returns {string}
@@ -3213,7 +3299,7 @@ function calcAndSetOptionsDimension() {
 		margin,
 	});
 	const widthConstraints = resolveSelectPopperWidthConstraints({
-		controlWidth: this[controlElementSymbol].getBoundingClientRect().width,
+		controlWidth: getStableSelectPopperControlWidth.call(this),
 		availableWidth: geometry.availableWidth,
 	});
 
@@ -3332,6 +3418,55 @@ function resolveSelectPopperWidthConstraints({
 	};
 }
 
+function getStableSelectPopperControlWidth() {
+	const stableWidth = this[stablePopperControlWidthSymbol];
+	if (Number.isFinite(stableWidth) && stableWidth > 0) {
+		return stableWidth;
+	}
+
+	return this[controlElementSymbol].getBoundingClientRect().width;
+}
+
+function lockControlBarSelectHostWidthForOpenPopper() {
+	if (!isInControlBar.call(this)) {
+		return;
+	}
+
+	const controlWidth = this[controlElementSymbol].getBoundingClientRect().width;
+	const hostWidth = this.getBoundingClientRect().width;
+	const stableWidth = Math.ceil(Math.max(controlWidth, hostWidth));
+	if (!Number.isFinite(stableWidth) || stableWidth <= 0) {
+		return;
+	}
+
+	this[stablePopperControlWidthSymbol] = stableWidth;
+	if (!this[stablePopperHostStyleSnapshotSymbol]) {
+		this[stablePopperHostStyleSnapshotSymbol] = {
+			flex: this.style.flex,
+			inlineSize: this.style.inlineSize,
+			minInlineSize: this.style.minInlineSize,
+		};
+	}
+
+	this.style.flex = `0 0 ${stableWidth}px`;
+	this.style.inlineSize = `${stableWidth}px`;
+	this.style.minInlineSize = `${stableWidth}px`;
+}
+
+function unlockControlBarSelectHostWidthAfterOpenPopper() {
+	const snapshot = this[stablePopperHostStyleSnapshotSymbol];
+	delete this[stablePopperControlWidthSymbol];
+	delete this[stablePopperHostStyleSnapshotSymbol];
+
+	if (!snapshot) {
+		return;
+	}
+
+	this.style.flex = snapshot.flex;
+	this.style.inlineSize = snapshot.inlineSize;
+	this.style.minInlineSize = snapshot.minInlineSize;
+}
+
 function resolveSelectListDimension({
 	visibleOptionHeights = [],
 	maxVisibleOptions = 10,
@@ -3473,10 +3608,13 @@ function getSelectPopperGeometry() {
 		this[controlElementSymbol],
 		this[popperElementSymbol],
 	);
+	const effectiveBoundaryElement = isInControlBar.call(this)
+		? null
+		: boundaryElement;
 	const controlRect = this[controlElementSymbol].getBoundingClientRect();
 	const boundaryRect =
-		boundaryElement instanceof HTMLElement
-			? boundaryElement.getBoundingClientRect()
+		effectiveBoundaryElement instanceof HTMLElement
+			? effectiveBoundaryElement.getBoundingClientRect()
 			: null;
 	const visibleRect = resolveSelectVisibleRect({
 		viewportMetrics: viewport,
@@ -3491,7 +3629,7 @@ function getSelectPopperGeometry() {
 		spaceBelow,
 		availableHeight,
 		availableWidth: visibleRect.width,
-		boundaryElement,
+		boundaryElement: effectiveBoundaryElement,
 	};
 }
 
@@ -3535,6 +3673,7 @@ function getSelectPopperPositionOptions() {
 		// Popper content rendered outside a 40px control-bar host must be hit-testable
 		// against the viewport instead of the host's compact shadow boundary.
 		popperOptions.strategy = "fixed";
+		popperOptions.boundaryElement = null;
 	}
 
 	return popperOptions;
@@ -4766,8 +4905,11 @@ function fetchData(url) {
  * @private
  */
 function hide() {
+	clearPendingOpenIntent.call(this);
+	cancelFloatingLayout(this[popperElementSymbol]);
 	resetSelectPopperDimensionStyles.call(this);
 	closePositionedPopper(this[popperElementSymbol]);
+	unlockControlBarSelectHostWidthAfterOpenPopper.call(this);
 	setStatusOrRemoveBadges.call(this, "closed");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
 	unregisterFromHost.call(this);
@@ -4826,10 +4968,16 @@ function show() {
 
 	const options = getOptionElements.call(this);
 	if (options.length === 0 && hasPopperFilterFlag === false) {
+		if (hasConfiguredOptionsWaitingForRender.call(this)) {
+			queuePendingOpenIntent.call(this);
+		}
 		return;
 	}
 
+	clearPendingOpenIntent.call(this);
+
 	resetSelectPopperDimensionStyles.call(this);
+	lockControlBarSelectHostWidthForOpenPopper.call(this);
 	this[popperElementSymbol].style.visibility = "hidden";
 	openPositionedPopper(
 		this[controlElementSymbol],
@@ -5064,6 +5212,8 @@ function refreshSelectPaginationLayout() {
 function toggle() {
 	if (isPositionedPopperOpen(this[popperElementSymbol])) {
 		hide.call(this);
+	} else if (this[pendingOpenIntentSymbol] === true) {
+		return;
 	} else {
 		show.call(this);
 	}
@@ -5316,6 +5466,7 @@ function initEventHandler() {
 					SELECT_LAYOUT_PRIORITY_INTERACTIVE,
 					SELECT_LAYOUT_REASON_ALL,
 				);
+				retryPendingOpenIntent.call(self);
 				delete this[debounceOptionsMutationObserverSymbol];
 			},
 		);
@@ -5580,32 +5731,33 @@ function getTemplate() {
                 \${selected}
             </div>
 
-            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
-                <div class="option-filter-control" role="search" part="popper-filter-control">
-                    <input type="text" role="searchbox"
-                           data-monster-attributes="placeholder path:placeholder.filter"
-                           part="popper-filter" name="popper-filter"
-                           data-monster-role="filter"
-                           autocomplete="off"
-                           tabindex="0">
-                </div>
- 
-                <div part="content" class="flex" data-monster-replace="path:content">
-                    <div part="options" data-monster-role="options" data-monster-insert="options path:options"
-                         tabindex="-1"></div>
-                </div>
-                <monster-pagination data-monster-role="pagination" part="pagination"></monster-pagination>
-                <div part="remote-info"
-                     data-monster-role="remote-info"
-                     data-monster-attributes="class path:classes.remoteInfo"
-                     data-monster-replace="path:messages.total"></div>
-                <div part="no-options" data-monster-role="no-options"
-                     data-monster-attributes="class path:classes.noOptions"
-                     data-monster-replace="path:messages.emptyOptions"></div>
-            </div>
             <div part="status-or-remove-badges" data-monster-role="status-or-remove-badges"
                  data-monster-attributes="class path:classes.statusOrRemoveBadge"></div>
         </div>
+
+        <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+            <div class="option-filter-control" role="search" part="popper-filter-control">
+                <input type="text" role="searchbox"
+                       data-monster-attributes="placeholder path:placeholder.filter"
+                       part="popper-filter" name="popper-filter"
+                       data-monster-role="filter"
+                       autocomplete="off"
+                       tabindex="0">
+            </div>
+
+            <div part="content" class="flex" data-monster-replace="path:content">
+                <div part="options" data-monster-role="options" data-monster-insert="options path:options"
+                     tabindex="-1"></div>
+            </div>
+            <monster-pagination data-monster-role="pagination" part="pagination"></monster-pagination>
+            <div part="remote-info"
+                 data-monster-role="remote-info"
+                 data-monster-attributes="class path:classes.remoteInfo"
+                 data-monster-replace="path:messages.total"></div>
+            <div part="no-options" data-monster-role="no-options"
+                 data-monster-attributes="class path:classes.noOptions"
+                 data-monster-replace="path:messages.emptyOptions"></div>
+        </div>
     `;
 }
 

package/source/components/form/style/control-bar.pcss

@@ -50,9 +50,11 @@ div[data-monster-role="control"] {
         & ::slotted(*) {
             display: flex;
             box-sizing: border-box;
+            flex: 0 0 auto !important;
             align-self: stretch;
             height: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
+            min-width: 0;
         }
 
         & ::slotted(form),
@@ -76,13 +78,22 @@ div[data-monster-role="control"] {
             line-height: 1.5;
             height: var(--monster-control-bar-height);
             padding: var(--monster-select-control-padding, 0.4rem 0.6rem);
+            width: auto !important;
+            inline-size: auto !important;
         }
 
         & ::slotted(monster-select) {
+            --monster-select-container-align-self: stretch;
+            --monster-select-container-block-size: 100%;
             --monster-select-container-overflow: hidden;
             --monster-select-selection-flex-wrap: nowrap;
             --monster-select-selection-margin: 0;
             --monster-select-control-padding: 0.4rem 0.6rem;
+            width: auto !important;
+            inline-size: auto !important;
+            max-inline-size: 100%;
+            min-inline-size: var(--monster-control-bar-select-min-inline-size, 12rem) !important;
+            min-width: var(--monster-control-bar-select-min-inline-size, 12rem) !important;
         }
 
         & ::slotted(monster-input-group) {
@@ -139,6 +150,8 @@ div[data-monster-role="control"] {
         }
 
         &::slotted(monster-select) {
+            --monster-select-container-align-self: stretch;
+            --monster-select-container-block-size: 100%;
             --monster-select-container-overflow: hidden;
             --monster-select-selection-flex-wrap: nowrap;
             --monster-select-selection-margin: 0;

package/source/components/form/style/select.pcss

@@ -14,6 +14,8 @@
     min-height: 0;
     flex: 4 0 90%;
     width: 100%;
+    block-size: var(--monster-select-container-block-size, auto);
+    align-self: var(--monster-select-container-align-self, auto);
     overflow: var(--monster-select-container-overflow, auto);
     display: flex;
     align-items: center;
@@ -87,6 +89,10 @@ div[data-monster-role="control"] {
 
 }
 
+[data-monster-role=popper] {
+    z-index: var(--monster-z-index-popover);
+}
+
 @media (prefers-color-scheme: light) {
     [data-monster-role=control] {
         background-color: var(--monster-bg-color-primary-1);