@schukai/monster 4.141.3 → 4.142.0

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.141.3"}
+{"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.142.0"}

package/source/components/datatable/pagination.mjs

@@ -319,6 +319,12 @@ class Pagination extends CustomElement {
 
 		setTimeout(() => {
 			const parentParentNode = parentNode?.parentNode || parentNode;
+			const sizeContainer =
+				parentParentNode instanceof HTMLElement
+					? parentParentNode
+					: parentNode instanceof HTMLElement
+						? parentNode
+						: this;
 
 			this[resizeObserverSymbol] = new ResizeObserver(() => {
 				if (this[layoutApplySymbol]) {
@@ -340,7 +346,7 @@ class Pagination extends CustomElement {
 							return;
 						}
 
-						const parentWidth = parentParentNode.offsetWidth;
+						const parentWidth = sizeContainer.offsetWidth;
 						const ownWidth = this.clientWidth;
 
 						if (this[sizeDataSymbol]?.last?.parentWidth === parentWidth) {
@@ -366,7 +372,7 @@ class Pagination extends CustomElement {
 				};
 				schedulePaginationLayoutUpdate.call(this);
 			} else {
-				const parentWidth = parentParentNode.offsetWidth;
+				const parentWidth = sizeContainer.offsetWidth;
 				const ownWidth = this.offsetWidth;
 
 				this[sizeDataSymbol] = {
@@ -381,7 +387,7 @@ class Pagination extends CustomElement {
 				}
 			}
 
-			this[resizeObserverSymbol].observe(parentParentNode);
+			this[resizeObserverSymbol].observe(sizeContainer);
 		}, 0);
 	}
 

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

@@ -278,6 +278,7 @@ class ControlBar extends CustomElement {
 			initialLayoutOpacity: undefined,
 			suppressSlotChange: false,
 			suppressMutation: false,
+			suppressResize: false,
 		};
 
 		initControlReferences.call(this);
@@ -608,7 +609,10 @@ function initEventHandler() {
 		syncLayoutState.call(self, { observe: true });
 	};
 
-	self[resizeObserverSymbol] = new ResizeObserver(() => {
+	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (!hasContainerResizeEntry.call(self, entries)) {
+			return;
+		}
 		scheduleLayout.call(self, { measure: true, layout: true });
 	});
 	self[mutationObserverSymbol] = new MutationObserver(mutationCallback);
@@ -819,8 +823,7 @@ function rearrangeItems() {
 		layout = layoutItems(space - switchWidth);
 	}
 
-	const shouldShowSwitch =
-		layout.itemsToMoveToPopper.length > 0 && hasItems;
+	const shouldShowSwitch = layout.itemsToMoveToPopper.length > 0 && hasItems;
 	const shouldUseStackedLayout =
 		shouldShowSwitch || isStackedBreakpointMatched.call(this);
 
@@ -901,17 +904,11 @@ function getComputedCssPixels(value) {
  */
 function updateControlSizing(layout, shouldShowSwitch) {
 	const mainItems = [...layout.visibleItemsInMainSlot];
-	if (
-		shouldShowSwitch &&
-		this[popperNavElementSymbol] instanceof HTMLElement
-	) {
+	if (shouldShowSwitch && this[popperNavElementSymbol] instanceof HTMLElement) {
 		mainItems.push(this[popperNavElementSymbol]);
 	}
 
-	const controlItems = [
-		...mainItems,
-		...layout.itemsToMoveToPopper,
-	];
+	const controlItems = [...mainItems, ...layout.itemsToMoveToPopper];
 	for (const element of controlItems) {
 		applyControlSizing.call(this, element);
 	}
@@ -1010,13 +1007,7 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 		layout.itemsToMoveToPopper,
 		marginTopByElement,
 	);
-	updateSpacerLineWidths.call(
-		this,
-		mainItems,
-		"inline",
-		"right",
-		"left",
-	);
+	updateSpacerLineWidths.call(this, mainItems, "inline", "right", "left");
 	updateSpacerLineWidths.call(
 		this,
 		layout.itemsToMoveToPopper,
@@ -1504,9 +1495,27 @@ function suppressLayoutFeedback() {
 
 	state.suppressSlotChange = true;
 	state.suppressMutation = true;
-	queueMicrotask(() => {
+	state.suppressResize = true;
+	requestAnimationFrame(() => {
 		state.suppressSlotChange = false;
 		state.suppressMutation = false;
+		state.suppressResize = false;
+	});
+}
+
+/**
+ * @private
+ * @param {ResizeObserverEntry[]} entries
+ * @return {boolean}
+ */
+function hasContainerResizeEntry(entries) {
+	const stackedBreakpointContainer =
+		resolveStackedBreakpointContainer.call(this);
+	return entries.some((entry) => {
+		return (
+			entry.target === this.parentElement ||
+			entry.target === stackedBreakpointContainer
+		);
 	});
 }
 
@@ -1628,21 +1637,25 @@ function applyLayoutAlignment() {
 	}
 
 	if (alignment === "right") {
-		if (setAttributeIfChanged(
-			this[controlBarElementSymbol],
-			ATTRIBUTE_LAYOUT_ALIGNMENT,
-			"right",
-		)) {
+		if (
+			setAttributeIfChanged(
+				this[controlBarElementSymbol],
+				ATTRIBUTE_LAYOUT_ALIGNMENT,
+				"right",
+			)
+		) {
 			queueLayoutChangedEvent.call(this);
 		}
 		return;
 	}
 
-	if (setAttributeIfChanged(
-		this[controlBarElementSymbol],
-		ATTRIBUTE_LAYOUT_ALIGNMENT,
-		"left",
-	)) {
+	if (
+		setAttributeIfChanged(
+			this[controlBarElementSymbol],
+			ATTRIBUTE_LAYOUT_ALIGNMENT,
+			"left",
+		)
+	) {
 		queueLayoutChangedEvent.call(this);
 	}
 }
@@ -1719,11 +1732,13 @@ function setLayoutStackedState(stacked) {
 		return;
 	}
 
-	if (setAttributeIfChanged(
-		this[controlBarElementSymbol],
-		ATTRIBUTE_LAYOUT_STACKED,
-		this[layoutStateSymbol].stacked ? "true" : "false",
-	)) {
+	if (
+		setAttributeIfChanged(
+			this[controlBarElementSymbol],
+			ATTRIBUTE_LAYOUT_STACKED,
+			this[layoutStateSymbol].stacked ? "true" : "false",
+		)
+	) {
 		queueLayoutChangedEvent.call(this);
 	}
 	applyLayoutAlignment.call(this);
@@ -1738,7 +1753,9 @@ function queueLayoutChangedEvent() {
 		return;
 	}
 
-	this[layoutChangedEventQueueSymbol].add(getLayoutChangedEventDetail.call(this));
+	this[layoutChangedEventQueueSymbol].add(
+		getLayoutChangedEventDetail.call(this),
+	);
 
 	if (this[layoutChangedEventSwitchSymbol] instanceof DeadMansSwitch) {
 		this[layoutChangedEventSwitchSymbol].touch();

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);