@schukai/monster 4.142.3 → 4.142.4

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.142.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.4"}

package/source/components/form/select.mjs

@@ -2088,6 +2088,12 @@ function fetchIt(url, controlOptions) {
 
 						queueMicrotask(() => {
 							checkOptionState.call(this);
+							if (
+								getFilterMode.call(this) === FILTER_MODE_REMOTE &&
+								this.getOption("options", []).length === 0
+							) {
+								calcAndSetOptionsDimension.call(this);
+							}
 							setTotalText.call(this);
 							updatePopper.call(this);
 							setStatusOrRemoveBadges.call(this, "closed");
@@ -2509,14 +2515,22 @@ function scheduleSelectLayoutCycle(
 }
 
 function hasConfiguredOptionsWaitingForRender() {
+	if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
+		return false;
+	}
+
 	const options = this.getOption("options");
 
 	if (isArray(options)) {
-		return options.length > 0;
+		if (options.length > 0) {
+			return true;
+		}
+
+		return getSlottedElements.call(this, "div").length > 0;
 	}
 
 	if (!isIterable(options) || isString(options)) {
-		return false;
+		return getSlottedElements.call(this, "div").length > 0;
 	}
 
 	for (const option of options) {
@@ -2546,7 +2560,9 @@ function retryPendingOpenIntent() {
 	}
 
 	if (getOptionElements.call(this).length === 0) {
-		clearPendingOpenIntent.call(this);
+		if (!hasConfiguredOptionsWaitingForRender.call(this)) {
+			clearPendingOpenIntent.call(this);
+		}
 		return;
 	}
 
@@ -3658,6 +3674,8 @@ function getSelectPopperPositionOptions() {
 		popperOptions.placement = getDefaultSelectPopperPositionProfile().placement;
 	}
 
+	popperOptions.adaptiveSize = false;
+
 	if (
 		resolveParentPopperContentBoundary(
 			this[controlElementSymbol],
@@ -4969,6 +4987,8 @@ function show() {
 	const options = getOptionElements.call(this);
 	if (options.length === 0 && hasPopperFilterFlag === false) {
 		if (hasConfiguredOptionsWaitingForRender.call(this)) {
+			removeErrorAttribute(this, "No options available.");
+			setStatusOrRemoveBadges.call(this, "loading");
 			queuePendingOpenIntent.call(this);
 		}
 		return;

package/source/components/form/util/floating-layout-queue.mjs

@@ -27,6 +27,12 @@ const jobs = new Map();
 let queueFrame = null;
 let queueTimeout = null;
 let flushing = false;
+const OSCILLATION_HISTORY_LIMIT = 4;
+const OSCILLATION_TIME_WINDOW_MS = 1000;
+const OSCILLATION_SAFE_REASONS =
+	FLOATING_LAYOUT_REASON.POSITION |
+	FLOATING_LAYOUT_REASON.RESIZE |
+	FLOATING_LAYOUT_REASON.SETTLE;
 
 function enqueueFloatingLayout({
 	popperElement,
@@ -105,6 +111,7 @@ function createJob(popperElement) {
 		running: false,
 		pending: false,
 		cancelled: false,
+		layoutSignatures: [],
 		promise,
 		resolve,
 	};
@@ -220,9 +227,67 @@ async function flushJob(job) {
 		}
 	} finally {
 		job.running = false;
+		recordLayoutSignature(job);
+		if (job.pending && shouldSuppressOscillatingPendingLayout(job)) {
+			job.pending = false;
+			job.reasons = 0;
+		}
 		if (!job.pending && job.reasons === 0) {
 			job.resolve();
 			jobs.delete(job.popperElement);
 		}
 	}
 }
+
+function recordLayoutSignature(job) {
+	if (!(job?.popperElement instanceof HTMLElement)) {
+		return;
+	}
+
+	const rect = job.popperElement.getBoundingClientRect();
+	const signature = [
+		Math.round(rect.x),
+		Math.round(rect.y),
+		Math.round(rect.width),
+		Math.round(rect.height),
+	].join("/");
+
+	job.layoutSignatures.push({
+		signature,
+		time: performanceNow(),
+	});
+	if (job.layoutSignatures.length > OSCILLATION_HISTORY_LIMIT) {
+		job.layoutSignatures.shift();
+	}
+}
+
+function shouldSuppressOscillatingPendingLayout(job) {
+	if ((job.reasons & ~OSCILLATION_SAFE_REASONS) !== 0) {
+		return false;
+	}
+
+	const signatures = job.layoutSignatures;
+	if (signatures.length < OSCILLATION_HISTORY_LIMIT) {
+		return false;
+	}
+
+	const [a, b, c, d] = signatures;
+	if (d.time - a.time > OSCILLATION_TIME_WINDOW_MS) {
+		return false;
+	}
+
+	return (
+		a.signature === c.signature &&
+		b.signature === d.signature &&
+		a.signature !== b.signature
+	);
+}
+
+function performanceNow() {
+	const globalObject = getGlobal();
+	if (globalObject?.performance?.now instanceof Function) {
+		return globalObject.performance.now();
+	}
+
+	return Date.now();
+}

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

@@ -132,9 +132,12 @@ function syncFloatingPopover(
 		config.detectOverflowOptions,
 		popperElement,
 		syncCycleId,
+		config.adaptiveSize,
 	);
 
-	resetAdaptiveFloatingElementSize(popperElement);
+	if (config.adaptiveSize !== false) {
+		resetAdaptiveFloatingElementSize(popperElement);
+	}
 
 	if (
 		arrowElement instanceof HTMLElement &&
@@ -143,7 +146,10 @@ function syncFloatingPopover(
 		floatingMiddleware.push(arrow({ element: arrowElement }));
 	}
 
-	if (!config.middlewareTokens.includes("size")) {
+	if (
+		config.adaptiveSize !== false &&
+		!config.middlewareTokens.includes("size")
+	) {
 		floatingMiddleware.push(
 			createAdaptiveSizeMiddleware(
 				config.detectOverflowOptions,
@@ -206,6 +212,7 @@ function normalizePopperConfig(options, controlElement, popperElement) {
 			placement: "top",
 			engine: "floating",
 			strategy: "absolute",
+			adaptiveSize: true,
 		},
 		options,
 	);
@@ -247,6 +254,7 @@ function buildFloatingMiddleware(
 	detectOverflowOptions,
 	popperElement,
 	syncCycleId = null,
+	adaptiveSize = true,
 ) {
 	const result = [...middleware];
 
@@ -272,7 +280,7 @@ function buildFloatingMiddleware(
 			case "shift":
 				result[key] = shift(normalizeShiftOptions(kv, detectOverflowOptions));
 				break;
-			case "autoPlacement":
+			case "autoPlacement": {
 				let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
 
 				const defPlacement = kv?.shift();
@@ -298,18 +306,22 @@ function buildFloatingMiddleware(
 					}),
 				);
 				break;
+			}
 			case "arrow":
 				result[key] = null;
 				break;
 			case "size":
-				result[key] = createAdaptiveSizeMiddleware(
-					detectOverflowOptions,
-					popperElement,
-					syncCycleId,
-				);
+				result[key] =
+					adaptiveSize === false
+						? null
+						: createAdaptiveSizeMiddleware(
+								detectOverflowOptions,
+								popperElement,
+								syncCycleId,
+							);
 				break;
 			case "offset":
-				result[key] = offset(parseInt(kv?.shift()) || 10);
+				result[key] = offset(parseInt(kv?.shift(), 10) || 10);
 				break;
 			case "hide":
 				result[key] = hide(detectOverflowOptions);