@schukai/monster 4.141.3 → 4.142.1

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

@@ -0,0 +1,228 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { getGlobal } from "../../../types/global.mjs";
+
+export {
+	FLOATING_LAYOUT_REASON,
+	cancelFloatingLayout,
+	enqueueFloatingLayout,
+	flushFloatingLayoutQueueForTests,
+};
+
+const FLOATING_LAYOUT_REASON = Object.freeze({
+	OPEN: 1 << 0,
+	RESIZE: 1 << 1,
+	CONTENT: 1 << 2,
+	POSITION: 1 << 3,
+	VIEWPORT: 1 << 4,
+	SETTLE: 1 << 5,
+});
+
+const jobs = new Map();
+let queueFrame = null;
+let queueTimeout = null;
+let flushing = false;
+
+function enqueueFloatingLayout({
+	popperElement,
+	owner = null,
+	reason = FLOATING_LAYOUT_REASON.POSITION,
+	measure = undefined,
+	mutate = undefined,
+	position = undefined,
+	isActive = undefined,
+	onError = undefined,
+} = {}) {
+	if (!(popperElement instanceof HTMLElement)) {
+		return Promise.resolve();
+	}
+
+	let job = jobs.get(popperElement);
+	if (!job) {
+		job = createJob(popperElement);
+		jobs.set(popperElement, job);
+	}
+
+	job.owner = owner || job.owner;
+	job.reasons |= reason;
+	if (measure instanceof Function) {
+		job.measure = measure;
+	}
+	if (mutate instanceof Function) {
+		job.mutate = mutate;
+	}
+	if (position instanceof Function) {
+		job.position = position;
+	}
+	job.isActive = isActive instanceof Function ? isActive : job.isActive;
+	job.onError = onError instanceof Function ? onError : job.onError;
+
+	if (job.running) {
+		job.pending = true;
+		return Promise.resolve();
+	}
+
+	scheduleQueueFlush();
+	return job.promise;
+}
+
+function cancelFloatingLayout(popperElement) {
+	const job = jobs.get(popperElement);
+	if (!job) {
+		return;
+	}
+
+	job.cancelled = true;
+	job.resolve();
+	jobs.delete(popperElement);
+}
+
+function flushFloatingLayoutQueueForTests() {
+	cancelQueueFrame();
+	return flushQueue();
+}
+
+function createJob(popperElement) {
+	let resolve;
+	const promise = new Promise((res) => {
+		resolve = res;
+	});
+
+	return {
+		popperElement,
+		owner: null,
+		reasons: 0,
+		measure: null,
+		mutate: null,
+		position: null,
+		isActive: null,
+		onError: null,
+		running: false,
+		pending: false,
+		cancelled: false,
+		promise,
+		resolve,
+	};
+}
+
+function scheduleQueueFlush() {
+	if (queueFrame !== null) {
+		return;
+	}
+
+	const globalObject = getGlobal();
+	const schedule =
+		globalObject?.requestAnimationFrame instanceof Function
+			? globalObject.requestAnimationFrame.bind(globalObject)
+			: (callback) => globalObject.setTimeout(callback, 16);
+
+	const runScheduledFlush = () => {
+		if (queueFrame === null && queueTimeout === null) {
+			return;
+		}
+		queueFrame = null;
+		if (queueTimeout !== null) {
+			globalObject.clearTimeout(queueTimeout);
+			queueTimeout = null;
+		}
+		flushQueue().catch((error) => {
+			setTimeout(() => {
+				throw error;
+			}, 0);
+		});
+	};
+
+	queueFrame = schedule(runScheduledFlush);
+	queueTimeout = globalObject.setTimeout(runScheduledFlush, 32);
+}
+
+function cancelQueueFrame() {
+	if (queueFrame === null && queueTimeout === null) {
+		return;
+	}
+
+	const globalObject = getGlobal();
+	if (
+		queueFrame !== null &&
+		globalObject?.cancelAnimationFrame instanceof Function
+	) {
+		globalObject.cancelAnimationFrame(queueFrame);
+	} else if (queueFrame !== null) {
+		globalObject.clearTimeout(queueFrame);
+	}
+	queueFrame = null;
+	if (queueTimeout !== null) {
+		globalObject.clearTimeout(queueTimeout);
+		queueTimeout = null;
+	}
+}
+
+async function flushQueue() {
+	if (flushing) {
+		return;
+	}
+
+	flushing = true;
+	const currentJobs = Array.from(jobs.values());
+
+	for (const job of currentJobs) {
+		await flushJob(job);
+	}
+
+	flushing = false;
+
+	if (Array.from(jobs.values()).some((job) => job.pending && !job.cancelled)) {
+		for (const job of jobs.values()) {
+			if (job.pending) {
+				job.pending = false;
+			}
+		}
+		scheduleQueueFlush();
+	}
+}
+
+async function flushJob(job) {
+	if (job.cancelled || !jobs.has(job.popperElement)) {
+		return;
+	}
+
+	const isActive =
+		job.isActive instanceof Function ? job.isActive(job.popperElement) : true;
+	if (!isActive) {
+		job.resolve();
+		jobs.delete(job.popperElement);
+		return;
+	}
+
+	const reasons = job.reasons;
+	job.reasons = 0;
+	job.running = true;
+
+	try {
+		const measurement =
+			job.measure instanceof Function ? job.measure(reasons) : undefined;
+		if (job.mutate instanceof Function) {
+			job.mutate(measurement, reasons);
+		}
+		if (job.position instanceof Function) {
+			await job.position(measurement, reasons);
+		}
+	} catch (error) {
+		if (job.onError instanceof Function) {
+			job.onError(error);
+		} else {
+			throw error;
+		}
+	} finally {
+		job.running = false;
+		if (!job.pending && job.reasons === 0) {
+			job.resolve();
+			jobs.delete(job.popperElement);
+		}
+	}
+}

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

@@ -25,6 +25,11 @@ import {
 } from "@floating-ui/dom";
 import { isArray, isFunction, isObject, isString } from "../../../types/is.mjs";
 import { Processing } from "../../../util/processing.mjs";
+import {
+	FLOATING_LAYOUT_REASON,
+	cancelFloatingLayout,
+	enqueueFloatingLayout,
+} from "./floating-layout-queue.mjs";
 
 export {
 	applyAdaptiveFloatingElementSize,
@@ -55,7 +60,14 @@ function positionPopper(controlElement, popperElement, options) {
 	const config = normalizePopperConfig(options, controlElement, popperElement);
 
 	return new Processing(() => {
-		enableFloatingPositioning(controlElement, popperElement, config);
+		return enqueueFloatingLayout({
+			popperElement,
+			reason: FLOATING_LAYOUT_REASON.POSITION,
+			isActive: () => isPositionedPopperOpen(popperElement),
+			position: () => {
+				enableFloatingPositioning(controlElement, popperElement, config);
+			},
+		});
 	}).run();
 }
 
@@ -87,8 +99,16 @@ function enableFloatingPositioning(controlElement, popperElement, config) {
 			return;
 		}
 
-		runFloatingUpdateHook(popperElement);
-		syncFloatingPopover(controlElement, popperElement, config);
+		enqueueFloatingLayout({
+			popperElement,
+			reason:
+				FLOATING_LAYOUT_REASON.POSITION | FLOATING_LAYOUT_REASON.RESIZE,
+			isActive: () => isPositionedPopperOpen(popperElement),
+			position: () => {
+				runFloatingUpdateHook(popperElement);
+				syncFloatingPopover(controlElement, popperElement, config);
+			},
+		});
 	});
 	runFloatingUpdateHook(popperElement);
 	syncFloatingPopover(controlElement, popperElement, config);
@@ -165,6 +185,7 @@ function syncFloatingPopover(
 }
 
 function closePositionedPopper(popperElement) {
+	cancelFloatingLayout(popperElement);
 	stopAutoUpdate(popperElement);
 	cancelFloatingAppearanceFrame(popperElement);
 	delete popperElement.dataset.monsterAppearance;
@@ -189,7 +210,10 @@ function normalizePopperConfig(options, controlElement, popperElement) {
 		options,
 	);
 
-	if (!(config.boundaryElement instanceof HTMLElement)) {
+	if (
+		config.boundaryElement !== null &&
+		!(config.boundaryElement instanceof HTMLElement)
+	) {
 		config.boundaryElement = resolveClippingBoundaryElement(
 			controlElement,
 			popperElement,
@@ -981,7 +1005,7 @@ function startAutoUpdate(controlElement, popperElement, callback) {
 	autoUpdateCleanupMap.set(
 		popperElement,
 		autoUpdate(controlElement, popperElement, callback, {
-			elementResize: typeof ResizeObserver === "function",
+			elementResize: false,
 			layoutShift: false,
 		}),
 	);
@@ -1009,7 +1033,15 @@ function startFloatingResizeObserver(controlElement, popperElement, config) {
 			return;
 		}
 
-		scheduleSettlingPass(controlElement, popperElement, config);
+		enqueueFloatingLayout({
+			popperElement,
+			reason: FLOATING_LAYOUT_REASON.SETTLE,
+			isActive: () => isPositionedPopperOpen(popperElement),
+			position: () => {
+				runFloatingUpdateHook(popperElement);
+				syncFloatingPopover(controlElement, popperElement, config, false);
+			},
+		});
 	});
 
 	observer.observe(popperElement);
@@ -1038,8 +1070,15 @@ function scheduleSettlingPass(controlElement, popperElement, config) {
 			return;
 		}
 
-		runFloatingUpdateHook(popperElement);
-		syncFloatingPopover(controlElement, popperElement, config, false);
+		enqueueFloatingLayout({
+			popperElement,
+			reason: FLOATING_LAYOUT_REASON.SETTLE,
+			isActive: () => isPositionedPopperOpen(popperElement),
+			position: () => {
+				runFloatingUpdateHook(popperElement);
+				syncFloatingPopover(controlElement, popperElement, config, false);
+			},
+		});
 	});
 
 	settlingFrameMap.set(popperElement, frameId);

package/source/components/layout/panel.mjs

@@ -99,6 +99,25 @@ class Panel extends CustomElement {
 		calcHeight.call(this);
 	}
 
+	/**
+	 * Get the height that fits this panel into the currently available viewport.
+	 *
+	 * @return {number}
+	 */
+	getMaximumHeight() {
+		return getMaximumPanelHeight.call(this);
+	}
+
+	/**
+	 * Recalculate and apply the current maximum panel height.
+	 *
+	 * @return {Panel}
+	 */
+	recalculateHeight() {
+		calcHeight.call(this);
+		return this;
+	}
+
 	/**
 	 * This method is called by the dom and should not be called directly.
 	 *
@@ -145,11 +164,24 @@ class Panel extends CustomElement {
 function calcHeight() {
 	this.style.boxSizing = "border-box";
 
-	let height = calculateMaximumHeight.call(this, this);
-	if (height < 0) {
+	const height = getMaximumPanelHeight.call(this);
+	if (height < 0 || Number.isNaN(height)) {
 		return;
 	}
 
+	this.style.height = `${height}px`;
+}
+
+/**
+ * @private
+ * @return {number}
+ */
+function getMaximumPanelHeight() {
+	let height = calculateMaximumHeight.call(this, this);
+	if (height < 0 || Number.isNaN(height)) {
+		return -1;
+	}
+
 	const parent =
 		this.parentNode instanceof HTMLElement ? this.parentNode : null;
 	const parentHeight = parent?.clientHeight || 0;
@@ -157,7 +189,7 @@ function calcHeight() {
 		height = Math.min(height, parentHeight);
 	}
 
-	this.style.height = `${height}px`;
+	return height;
 }
 
 /**
@@ -202,12 +234,18 @@ function calculateMaximumHeight(element) {
 		const boxShadowVertical = parseFloat(style.boxShadow.split(" ")[3] || 0);
 
 		// Accumulate values
-		totalBottomBorder += isNaN(borderBottomWidth) ? 0 : borderBottomWidth;
+		totalBottomBorder += Number.isNaN(borderBottomWidth)
+			? 0
+			: borderBottomWidth;
 		totalBottomPadding +=
-			isNaN(paddingBottom) || boxSizing === "border-box" ? 0 : paddingBottom;
-		totalBottomMargin += isNaN(marginBottom) ? 0 : marginBottom;
-		totalOutlineHeight += isNaN(outlineHeight) ? 0 : outlineHeight;
-		totalBoxShadowHeight += isNaN(boxShadowVertical) ? 0 : boxShadowVertical;
+			Number.isNaN(paddingBottom) || boxSizing === "border-box"
+				? 0
+				: paddingBottom;
+		totalBottomMargin += Number.isNaN(marginBottom) ? 0 : marginBottom;
+		totalOutlineHeight += Number.isNaN(outlineHeight) ? 0 : outlineHeight;
+		totalBoxShadowHeight += Number.isNaN(boxShadowVertical)
+			? 0
+			: boxShadowVertical;
 
 		currentElement = currentElement.parentNode || currentElement.host;
 	}
@@ -221,7 +259,7 @@ function calculateMaximumHeight(element) {
 		totalBottomMargin -
 		totalOutlineHeight -
 		totalBoxShadowHeight;
-	return maximumHeight + this.getOption("heightAdjustment");
+	return maximumHeight + getNumericOption.call(this, "heightAdjustment");
 }
 
 /**
@@ -234,7 +272,7 @@ function attachResizeObserver() {
 			try {
 				this[timerCallbackSymbol].touch();
 				return;
-			} catch (e) {
+			} catch {
 				delete this[timerCallbackSymbol];
 			}
 		}
@@ -244,8 +282,13 @@ function attachResizeObserver() {
 		});
 	});
 
-	this[resizeObserverSymbol].observe(this.ownerDocument.body);
-	this[resizeObserverSymbol].observe(document.scrollingElement);
+	if (this.ownerDocument.body instanceof Element) {
+		this[resizeObserverSymbol].observe(this.ownerDocument.body);
+	}
+
+	if (this.ownerDocument.scrollingElement instanceof Element) {
+		this[resizeObserverSymbol].observe(this.ownerDocument.scrollingElement);
+	}
 }
 
 function disconnectResizeObserver() {
@@ -254,6 +297,16 @@ function disconnectResizeObserver() {
 	}
 }
 
+/**
+ * @private
+ * @param {string} name
+ * @return {number}
+ */
+function getNumericOption(name) {
+	const value = Number.parseFloat(this.getOption(name));
+	return Number.isNaN(value) ? 0 : value;
+}
+
 /**
  * @private
  * @return {Panel}

package/source/components/layout/split-panel.mjs

@@ -175,9 +175,9 @@ class SplitPanel extends CustomElement {
 	setDimension(dimension) {
 		// check if percent and greater than100
 		if (dimension.includes("%")) {
-			if (parseInt(dimension) > 100) {
+			if (parseFloat(dimension) > 100) {
 				throw new Error("dimension must be less than 100%");
-			} else if (parseInt(dimension) < 0) {
+			} else if (parseFloat(dimension) < 0) {
 				throw new Error("dimension must be greater than 0%");
 			}
 		}
@@ -217,17 +217,19 @@ class SplitPanel extends CustomElement {
 function applyPanelDimensions() {
 	const splitType = this.getOption("splitType");
 	const dimension = this[internalSymbol].getSubject().currentDimension;
+	const draggerSize = getDraggerSize.call(this);
 
 	if (splitType === TYPE_VERTICAL) {
 		this[startPanelElementSymbol].style.width = dimension;
-		this[endPanelElementSymbol].style.width = `calc(100% - ${dimension} - 5px)`;
+		this[endPanelElementSymbol].style.width =
+			`calc(100% - ${dimension} - ${draggerSize})`;
 		this[draggerElementSymbol].style.cursor = "ew-resize";
 		this[splitScreenElementSymbol].classList.add("vertical");
 		this[splitScreenElementSymbol].classList.remove("horizontal");
 	} else {
 		this[startPanelElementSymbol].style.height = dimension;
 		this[endPanelElementSymbol].style.height =
-			`calc(100% - ${dimension} - 5px)`;
+			`calc(100% - ${dimension} - ${draggerSize})`;
 		this[draggerElementSymbol].style.cursor = "ns-resize";
 		this[splitScreenElementSymbol].classList.add("horizontal");
 		this[splitScreenElementSymbol].classList.remove("vertical");
@@ -267,6 +269,29 @@ function initControlReferences() {
 	);
 }
 
+/**
+ * @private
+ * @return {string}
+ */
+function getDraggerSize() {
+	if (!(this[draggerElementSymbol] instanceof Element)) {
+		return "0px";
+	}
+
+	const inlineProperty =
+		this[draggerElementSymbol] instanceof HTMLElement
+			? this[draggerElementSymbol].style
+					.getPropertyValue("--monster-dragger-width")
+					.trim()
+			: "";
+	const computedProperty = window
+		.getComputedStyle(this[draggerElementSymbol])
+		.getPropertyValue("--monster-dragger-width")
+		.trim();
+
+	return inlineProperty || computedProperty || "0px";
+}
+
 /**
  * @private
  */
@@ -316,43 +341,42 @@ function initEventHandler() {
 			if (!touch) return;
 
 			// identical logic as in mousemove - but with touch.clientX/clientY
-			let draggerWidth =
-				getComputedStyle(self[draggerElementSymbol]).getPropertyValue(
-					"--monster-dragger-width",
-				) || "0";
+			const draggerWidth = getDraggerSize.call(self);
 
 			if (self.getOption("splitType") === TYPE_HORIZONTAL) {
-				const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
-				let newTopHeight = touch.clientY - containerOffsetTop;
+				const containerRect =
+					self[splitScreenElementSymbol].getBoundingClientRect();
+				let newTopHeight = touch.clientY - containerRect.top;
 
 				const min = this.getOption("dimension").min;
 				const max = this.getOption("dimension").max;
 				const topAsPercent =
 					(newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
 
-				if (parseInt(min) > topAsPercent) newTopHeight = min;
-				else if (parseInt(max) < topAsPercent) newTopHeight = max;
-				else newTopHeight = topAsPercent + "%";
+				if (parseFloat(min) > topAsPercent) newTopHeight = min;
+				else if (parseFloat(max) < topAsPercent) newTopHeight = max;
+				else newTopHeight = `${topAsPercent}%`;
 
 				const newTopHeightPx =
-					(parseInt(newTopHeight) / 100) *
+					(parseFloat(newTopHeight) / 100) *
 					this[splitScreenElementSymbol].offsetHeight;
 
 				self[startPanelElementSymbol].style.height = `${newTopHeightPx}px`;
 				self[endPanelElementSymbol].style.height =
 					`calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
 			} else {
-				const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
-				let newLeftWidth = touch.clientX - containerOffsetLeft;
+				const containerRect =
+					self[splitScreenElementSymbol].getBoundingClientRect();
+				let newLeftWidth = touch.clientX - containerRect.left;
 
 				const min = this.getOption("dimension").min;
 				const max = this.getOption("dimension").max;
 				const leftAsPercent =
 					(newLeftWidth / this[splitScreenElementSymbol].offsetWidth) * 100;
 
-				if (parseInt(min) > leftAsPercent) newLeftWidth = min;
-				else if (parseInt(max) < leftAsPercent) newLeftWidth = max;
-				else newLeftWidth = leftAsPercent + "%";
+				if (parseFloat(min) > leftAsPercent) newLeftWidth = min;
+				else if (parseFloat(max) < leftAsPercent) newLeftWidth = max;
+				else newLeftWidth = `${leftAsPercent}%`;
 
 				self[startPanelElementSymbol].style.width = `${newLeftWidth}`;
 				self[endPanelElementSymbol].style.width =
@@ -370,7 +394,7 @@ function initEventHandler() {
 		document.addEventListener("touchend", dragTouchEnd);
 	});
 
-	let userSelectDefault = getDocument().body.style.userSelect;
+	const userSelectDefault = getDocument().body.style.userSelect;
 
 	this[draggerElementSymbol].addEventListener("mousedown", () => {
 		self[internalSymbol].getSubject().isDragging = true;
@@ -378,18 +402,7 @@ function initEventHandler() {
 		const eventListener = (e) => {
 			e.preventDefault();
 
-			// the 5px are wrong and must be calc from css property --monster-dragger-width
-
-			let draggerWidth = getComputedStyle(
-				self[draggerElementSymbol],
-			).getPropertyValue("--monster-dragger-width");
-			if (
-				draggerWidth === "" ||
-				draggerWidth === undefined ||
-				draggerWidth === null
-			) {
-				draggerWidth = "0";
-			}
+			const draggerWidth = getDraggerSize.call(self);
 
 			if (!self[internalSymbol].getSubject().isDragging) {
 				return;
@@ -398,36 +411,38 @@ function initEventHandler() {
 			getDocument().body.style.userSelect = "none";
 
 			if (self.getOption("splitType") === TYPE_HORIZONTAL) {
-				const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
+				const containerRect =
+					self[splitScreenElementSymbol].getBoundingClientRect();
 				const topPanel = self[startPanelElementSymbol];
 				const bottomPanel = self[endPanelElementSymbol];
-				let newTopHeight = e.clientY - containerOffsetTop;
+				let newTopHeight = e.clientY - containerRect.top;
 
 				const min = this.getOption("dimension").min;
 				const max = this.getOption("dimension").max;
 
 				const topAsPercent =
 					(newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
-				if (parseInt(min) > topAsPercent) {
+				if (parseFloat(min) > topAsPercent) {
 					newTopHeight = min;
-				} else if (parseInt(max) < topAsPercent) {
+				} else if (parseFloat(max) < topAsPercent) {
 					newTopHeight = max;
 				} else {
-					newTopHeight = topAsPercent + "%";
+					newTopHeight = `${topAsPercent}%`;
 				}
 
 				// calc new top height to pixel
 				const newTopHeightPx =
-					(parseInt(newTopHeight) / 100) *
+					(parseFloat(newTopHeight) / 100) *
 					this[splitScreenElementSymbol].offsetHeight;
 
 				topPanel.style.height = `${newTopHeightPx}px`;
-				bottomPanel.style.height = `calc(100% - ${newTopHeightPx}px - ${draggerWidth})`; // 5px is dragger height
+				bottomPanel.style.height = `calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
 			} else {
-				const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
+				const containerRect =
+					self[splitScreenElementSymbol].getBoundingClientRect();
 				const leftPanel = self[startPanelElementSymbol];
 				const rightPanel = self[endPanelElementSymbol];
-				let newLeftWidth = e.clientX - containerOffsetLeft;
+				let newLeftWidth = e.clientX - containerRect.left;
 
 				const min = this.getOption("dimension").min;
 				const max = this.getOption("dimension").max;
@@ -435,26 +450,26 @@ function initEventHandler() {
 				const leftAsPercent =
 					(newLeftWidth / this[splitScreenElementSymbol].offsetWidth) * 100;
 
-				if (parseInt(min) > leftAsPercent) {
+				if (parseFloat(min) > leftAsPercent) {
 					newLeftWidth = min;
-				} else if (parseInt(max) < leftAsPercent) {
+				} else if (parseFloat(max) < leftAsPercent) {
 					newLeftWidth = max;
 				} else {
-					newLeftWidth = leftAsPercent + "%";
+					newLeftWidth = `${leftAsPercent}%`;
 				}
 
 				leftPanel.style.width = `${newLeftWidth}`;
-				rightPanel.style.width = `calc(100% - ${newLeftWidth} - ${draggerWidth})`; // 5px is dragger width
+				rightPanel.style.width = `calc(100% - ${newLeftWidth} - ${draggerWidth})`;
 			}
 		};
 
-		const dragEventHandler = (e) => {
+		const dragEventHandler = () => {
 			self[internalSymbol].getSubject().isDragging = false;
 
 			document.body.style.userSelect = userSelectDefault;
 
 			document.removeEventListener("mousemove", eventListener);
-			document.removeEventListener("mouseup", eventListener);
+			document.removeEventListener("mouseup", dragEventHandler);
 		};
 
 		document.addEventListener("mousemove", eventListener);