@schukai/monster 4.129.4 → 4.129.5

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"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.129.4"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"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.129.5"}

package/source/components/content/copy.mjs

@@ -163,7 +163,7 @@ class Copy extends CustomElement {
 	 * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
 	 * @property {Object} popper Popper configuration
 	 * @property {string} popper.placement="top" Popper placement
-	 * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
+	 * @property {string[]} popper.middleware=["flip", "shift", "offset:-1", "arrow"] Popper middleware
 	 * @property {boolean} disabled=false Disabled state
 	 */
 	get defaults() {
@@ -178,7 +178,7 @@ class Copy extends CustomElement {
 			},
 			popper: {
 				placement: "top",
-				middleware: ["autoPlacement", "offset:-1", "arrow"],
+				middleware: ["flip", "shift", "offset:-1", "arrow"],
 			},
 		});
 	}

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

@@ -183,7 +183,7 @@ class ButtonBar extends CustomElement {
 			},
 			popper: {
 				placement: "left",
-				middleware: ["autoPlacement", "shift", "offset:5"],
+				middleware: ["flip", "shift", "offset:5"],
 			},
 		});
 

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

@@ -22,12 +22,11 @@ import {
 	size,
 	shift,
 } from "@floating-ui/dom";
-import { Processing } from "../../../util/processing.mjs";
-import { isString, isArray, isObject, isFunction } from "../../../types/is.mjs";
 import { hide } from "@popperjs/core";
+import { isArray, isFunction, isObject, isString } from "../../../types/is.mjs";
+import { Processing } from "../../../util/processing.mjs";
 
 export {
-	canUseNativePositionedPopper,
 	closePositionedPopper,
 	isPositionedPopperOpen,
 	openPositionedPopper,
@@ -35,9 +34,6 @@ export {
 };
 
 const autoUpdateCleanupMap = new WeakMap();
-const nativeArrowSyncFrameMap = new WeakMap();
-const anchorNameMap = new WeakMap();
-let anchorNameCounter = 0;
 
 /**
  * @private
@@ -50,15 +46,6 @@ function positionPopper(controlElement, popperElement, options) {
 	const config = normalizePopperConfig(options);
 
 	return new Processing(() => {
-		if (canUseNativePositionedPopper(controlElement, popperElement, config)) {
-			prepareNativePopover(controlElement, popperElement, config);
-			startAutoUpdate(controlElement, popperElement, () => {
-				syncNativePopover(controlElement, popperElement, config);
-			});
-			syncNativePopover(controlElement, popperElement, config);
-			return;
-		}
-
 		enableFloatingPositioning(controlElement, popperElement, config);
 	}).run();
 }
@@ -66,21 +53,16 @@ function positionPopper(controlElement, popperElement, options) {
 function openPositionedPopper(controlElement, popperElement, options) {
 	const config = normalizePopperConfig(options);
 
-	if (canUseNativePositionedPopper(controlElement, popperElement, config)) {
-		prepareNativePopover(controlElement, popperElement, config);
-		popperElement.style.removeProperty("transform");
-		if (!matchesPopoverOpen(popperElement)) {
-			popperElement.showPopover();
-		}
-		return;
-	}
-
-	teardownNativePopover(popperElement);
+	stopAutoUpdate(popperElement);
 	popperElement.style.display = "block";
+	popperElement.style.removeProperty("transform");
+
+	// Keep the call signature stable even though only Floating UI is used now.
+	void controlElement;
+	void config;
 }
 
 function enableFloatingPositioning(controlElement, popperElement, config) {
-	teardownNativePopover(popperElement);
 	popperElement.style.removeProperty("visibility");
 	popperElement.style.display = "block";
 
@@ -122,63 +104,21 @@ function syncFloatingPopover(controlElement, popperElement, config) {
 
 function closePositionedPopper(popperElement) {
 	stopAutoUpdate(popperElement);
-	cancelScheduledNativeArrowSync(popperElement);
-
-	if (isNativePopoverElement(popperElement)) {
-		if (matchesPopoverOpen(popperElement)) {
-			popperElement.hidePopover();
-		}
-		popperElement.style.display = "none";
-		popperElement.style.removeProperty("visibility");
-		popperElement.style.removeProperty("transform");
-		return;
-	}
-
 	popperElement.style.display = "none";
+	popperElement.style.removeProperty("visibility");
+	popperElement.style.removeProperty("transform");
 }
 
 function isPositionedPopperOpen(popperElement) {
-	if (isNativePopoverElement(popperElement)) {
-		return matchesPopoverOpen(popperElement);
-	}
-
 	return popperElement.style.display === "block";
 }
 
-function canUseNativePositionedPopper(controlElement, popperElement, options) {
-	if (!(controlElement instanceof HTMLElement)) {
-		return false;
-	}
-
-	if (!(popperElement instanceof HTMLElement)) {
-		return false;
-	}
-
-	if (options?.engine !== "native") {
-		return false;
-	}
-
-	if (!("showPopover" in HTMLElement.prototype)) {
-		return false;
-	}
-
-	if (typeof CSS === "undefined") {
-		return false;
-	}
-
-	return (
-		CSS.supports("anchor-name: --monster-popper-anchor") &&
-		CSS.supports("position-anchor: --monster-popper-anchor") &&
-		CSS.supports("top: anchor(bottom)")
-	);
-}
-
 function normalizePopperConfig(options) {
 	const config = Object.assign(
 		{},
 		{
 			placement: "top",
-			engine: "native",
+			engine: "floating",
 		},
 		options,
 	);
@@ -194,7 +134,7 @@ function normalizePopperConfig(options) {
 }
 
 function normalizeMiddleware(config) {
-	const middleware = config?.["middleware"];
+	const middleware = config?.middleware;
 	if (isArray(middleware)) {
 		return [...middleware];
 	}
@@ -299,499 +239,6 @@ function stopAutoUpdate(popperElement) {
 	autoUpdateCleanupMap.delete(popperElement);
 }
 
-function scheduleNativeArrowSync(controlElement, popperElement) {
-	cancelScheduledNativeArrowSync(popperElement);
-
-	const frameState = {
-		outer: 0,
-		inner: 0,
-	};
-
-	frameState.outer = requestAnimationFrame(() => {
-		frameState.inner = requestAnimationFrame(() => {
-			nativeArrowSyncFrameMap.delete(popperElement);
-
-			if (
-				!(controlElement instanceof HTMLElement) ||
-				!(popperElement instanceof HTMLElement) ||
-				!isNativePopoverElement(popperElement)
-			) {
-				return;
-			}
-
-			if (
-				!matchesPopoverOpen(popperElement) &&
-				popperElement.style.display !== "block"
-			) {
-				return;
-			}
-
-			syncNativeArrow(controlElement, popperElement);
-		});
-	});
-
-	nativeArrowSyncFrameMap.set(popperElement, frameState);
-}
-
-function cancelScheduledNativeArrowSync(popperElement) {
-	const frameState = nativeArrowSyncFrameMap.get(popperElement);
-	if (!frameState) {
-		return;
-	}
-
-	if (frameState.outer) {
-		cancelAnimationFrame(frameState.outer);
-	}
-
-	if (frameState.inner) {
-		cancelAnimationFrame(frameState.inner);
-	}
-
-	nativeArrowSyncFrameMap.delete(popperElement);
-}
-
-function prepareNativePopover(controlElement, popperElement, config) {
-	const anchorName = getAnchorName(controlElement);
-	popperElement.dataset.monsterPopperEngine = "native";
-	popperElement.setAttribute("popover", "manual");
-	controlElement.style.setProperty("anchor-name", anchorName);
-	popperElement.style.setProperty("position-anchor", anchorName);
-	popperElement.style.setProperty("inset", "auto");
-	popperElement.style.setProperty("margin", "0");
-	popperElement.style.setProperty("overflow", "visible");
-	popperElement.style.display = "block";
-	popperElement.style.removeProperty("transform");
-	applyNativeTryFallbacks(popperElement, config);
-}
-
-function teardownNativePopover(popperElement) {
-	if (!isNativePopoverElement(popperElement)) {
-		return;
-	}
-
-	if (matchesPopoverOpen(popperElement)) {
-		popperElement.hidePopover();
-	}
-
-	cancelScheduledNativeArrowSync(popperElement);
-	delete popperElement.dataset.monsterPopperEngine;
-	popperElement.removeAttribute("popover");
-	popperElement.style.removeProperty("position-anchor");
-	popperElement.style.removeProperty("position-area");
-	popperElement.style.removeProperty("inset-area");
-	popperElement.style.removeProperty("position-try");
-	popperElement.style.removeProperty("position-try-fallbacks");
-	popperElement.style.removeProperty("margin");
-	popperElement.style.removeProperty("margin-top");
-	popperElement.style.removeProperty("margin-right");
-	popperElement.style.removeProperty("margin-bottom");
-	popperElement.style.removeProperty("margin-left");
-	popperElement.style.removeProperty("inset");
-	popperElement.style.removeProperty("overflow");
-	popperElement.style.removeProperty("--monster-popper-control-width");
-	popperElement.style.removeProperty("--monster-popper-control-height");
-}
-
-function syncNativePopover(controlElement, popperElement, config) {
-	const controlRect = controlElement.getBoundingClientRect();
-	const placement = resolvePlacement(config.placement);
-	const offsetValue = resolveOffset(config.middlewareTokens);
-
-	popperElement.style.setProperty(
-		"--monster-popper-control-width",
-		`${Math.round(controlRect.width)}px`,
-	);
-	popperElement.style.setProperty(
-		"--monster-popper-control-height",
-		`${Math.round(controlRect.height)}px`,
-	);
-
-	applyNativePlacementStyles(popperElement, placement, offsetValue);
-	popperElement.style.removeProperty("visibility");
-
-	if (hasViewportOverflow(popperElement)) {
-		enableFloatingPositioning(controlElement, popperElement, config);
-		return;
-	}
-
-	syncNativeArrow(controlElement, popperElement);
-	scheduleNativeArrowSync(controlElement, popperElement);
-}
-
-function resolvePlacement(value) {
-	if (!isString(value) || value.trim().length === 0) {
-		return { side: "top", align: "center" };
-	}
-
-	const [rawSide, rawAlign] = value.split("-");
-	const side = rawSide === "auto" ? "top" : rawSide;
-	const align =
-		rawAlign === "start" || rawAlign === "end" ? rawAlign : "center";
-
-	if (!["top", "bottom", "left", "right"].includes(side)) {
-		return { side: "top", align: "center" };
-	}
-
-	return { side, align };
-}
-
-function resolveOffset(middleware) {
-	if (!isArray(middleware)) {
-		return 10;
-	}
-
-	for (const entry of middleware) {
-		if (!isString(entry) || !entry.startsWith("offset")) {
-			continue;
-		}
-
-		const [, rawValue] = entry.split(":");
-		const parsed = parseInt(rawValue);
-		if (Number.isFinite(parsed)) {
-			return parsed;
-		}
-	}
-
-	return 10;
-}
-
-function applyNativePlacementStyles(
-	popperElement,
-	{ side, align },
-	offsetValue,
-) {
-	if (supportsNativePositionArea()) {
-		applyNativePositionAreaStyles(popperElement, { side, align }, offsetValue);
-		return;
-	}
-
-	popperElement.style.removeProperty("position-area");
-	popperElement.style.removeProperty("inset-area");
-	popperElement.style.removeProperty("margin-top");
-	popperElement.style.removeProperty("margin-right");
-	popperElement.style.removeProperty("margin-bottom");
-	popperElement.style.removeProperty("margin-left");
-	popperElement.style.removeProperty("top");
-	popperElement.style.removeProperty("right");
-	popperElement.style.removeProperty("bottom");
-	popperElement.style.removeProperty("left");
-
-	switch (side) {
-		case "bottom":
-			popperElement.style.setProperty(
-				"top",
-				`calc(anchor(bottom) + ${offsetValue}px)`,
-			);
-			applyHorizontalAlignment(popperElement, align);
-			break;
-		case "left":
-			popperElement.style.setProperty(
-				"left",
-				`calc(anchor(left) - 100% - ${offsetValue}px)`,
-			);
-			applyVerticalAlignment(popperElement, align);
-			break;
-		case "right":
-			popperElement.style.setProperty(
-				"left",
-				`calc(anchor(right) + ${offsetValue}px)`,
-			);
-			applyVerticalAlignment(popperElement, align);
-			break;
-		case "top":
-		default:
-			popperElement.style.setProperty(
-				"top",
-				`calc(anchor(top) - 100% - ${offsetValue}px)`,
-			);
-			applyHorizontalAlignment(popperElement, align);
-			break;
-	}
-}
-
-function applyNativePositionAreaStyles(
-	popperElement,
-	{ side, align },
-	offsetValue,
-) {
-	const positionArea = resolveNativePositionArea({ side, align });
-
-	popperElement.style.removeProperty("top");
-	popperElement.style.removeProperty("right");
-	popperElement.style.removeProperty("bottom");
-	popperElement.style.removeProperty("left");
-	popperElement.style.setProperty("position-area", positionArea);
-	popperElement.style.setProperty("inset-area", positionArea);
-	popperElement.style.setProperty("margin-top", "0px");
-	popperElement.style.setProperty("margin-right", "0px");
-	popperElement.style.setProperty("margin-bottom", "0px");
-	popperElement.style.setProperty("margin-left", "0px");
-
-	switch (side) {
-		case "bottom":
-			popperElement.style.setProperty("margin-top", `${offsetValue}px`);
-			break;
-		case "left":
-			popperElement.style.setProperty("margin-right", `${offsetValue}px`);
-			break;
-		case "right":
-			popperElement.style.setProperty("margin-left", `${offsetValue}px`);
-			break;
-		case "top":
-		default:
-			popperElement.style.setProperty("margin-bottom", `${offsetValue}px`);
-			break;
-	}
-}
-
-function resolveNativePositionArea({ side, align }) {
-	switch (side) {
-		case "bottom":
-			switch (align) {
-				case "end":
-					return "bottom span-left";
-				case "center":
-					return "bottom center";
-				case "start":
-				default:
-					return "bottom span-right";
-			}
-		case "left":
-			switch (align) {
-				case "end":
-					return "left span-top";
-				case "center":
-					return "left center";
-				case "start":
-				default:
-					return "left span-bottom";
-			}
-		case "right":
-			switch (align) {
-				case "end":
-					return "right span-top";
-				case "center":
-					return "right center";
-				case "start":
-				default:
-					return "right span-bottom";
-			}
-		case "top":
-		default:
-			switch (align) {
-				case "end":
-					return "top span-left";
-				case "center":
-					return "top center";
-				case "start":
-				default:
-					return "top span-right";
-			}
-	}
-}
-
-function supportsNativePositionArea() {
-	if (typeof CSS === "undefined") {
-		return false;
-	}
-
-	return (
-		CSS.supports("position-area: bottom center") ||
-		CSS.supports("inset-area: bottom center")
-	);
-}
-
-function applyHorizontalAlignment(popperElement, align) {
-	switch (align) {
-		case "end":
-			popperElement.style.setProperty("left", "calc(anchor(right) - 100%)");
-			break;
-		case "center":
-			popperElement.style.setProperty(
-				"left",
-				"calc(anchor(left) + (var(--monster-popper-control-width) - 100%) / 2)",
-			);
-			break;
-		case "start":
-		default:
-			popperElement.style.setProperty("left", "anchor(left)");
-			break;
-	}
-}
-
-function applyVerticalAlignment(popperElement, align) {
-	switch (align) {
-		case "end":
-			popperElement.style.setProperty("top", "calc(anchor(bottom) - 100%)");
-			break;
-		case "center":
-			popperElement.style.setProperty(
-				"top",
-				"calc(anchor(top) + (var(--monster-popper-control-height) - 100%) / 2)",
-			);
-			break;
-		case "start":
-		default:
-			popperElement.style.setProperty("top", "anchor(top)");
-			break;
-	}
-}
-
-function applyNativeTryFallbacks(popperElement, config) {
-	const middleware = config.middlewareTokens || [];
-	const placement = resolvePlacement(config.placement);
-	let fallbacks = "";
-
-	if (
-		middleware.some(
-			(entry) => isString(entry) && entry.startsWith("autoPlacement"),
-		)
-	) {
-		fallbacks =
-			placement.side === "left" || placement.side === "right"
-				? "flip-inline, flip-block"
-				: "flip-block, flip-inline";
-	} else if (middleware.includes("flip")) {
-		fallbacks =
-			placement.side === "left" || placement.side === "right"
-				? "flip-inline"
-				: "flip-block";
-	}
-
-	if (fallbacks.length === 0) {
-		popperElement.style.removeProperty("position-try");
-		popperElement.style.removeProperty("position-try-fallbacks");
-		return;
-	}
-
-	popperElement.style.setProperty("position-try", fallbacks);
-	popperElement.style.setProperty("position-try-fallbacks", fallbacks);
-}
-
-function syncNativeArrow(controlElement, popperElement) {
-	const arrowElement = popperElement.querySelector("[data-monster-role=arrow]");
-
-	if (!(arrowElement instanceof HTMLElement)) {
-		return;
-	}
-
-	const controlRect = controlElement.getBoundingClientRect();
-	const popperRect = popperElement.getBoundingClientRect();
-	const arrowHalf = arrowElement.offsetWidth / 2;
-
-	if (arrowHalf === 0) {
-		return;
-	}
-
-	const side = resolveArrowSide(controlRect, popperRect);
-	const staticSide = side;
-	const defaultBorder =
-		"var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)";
-	const borderStyle = {
-		borderLeft: "transparent",
-		borderRight: "transparent",
-		borderBottom: "transparent",
-		borderTop: "transparent",
-	};
-
-	switch (side) {
-		case "top":
-			borderStyle.borderTop = defaultBorder;
-			borderStyle.borderLeft = defaultBorder;
-			break;
-		case "bottom":
-			borderStyle.borderRight = defaultBorder;
-			borderStyle.borderBottom = defaultBorder;
-			break;
-		case "left":
-			borderStyle.borderLeft = defaultBorder;
-			borderStyle.borderBottom = defaultBorder;
-			break;
-		case "right":
-			borderStyle.borderTop = defaultBorder;
-			borderStyle.borderRight = defaultBorder;
-			break;
-	}
-
-	const arrowOffset = resolveArrowOffset(
-		side,
-		controlRect,
-		popperRect,
-		arrowHalf,
-	);
-	const arrowLen = arrowElement.offsetWidth + 4;
-
-	Object.assign(
-		arrowElement.style,
-		{
-			left: side === "top" || side === "bottom" ? `${arrowOffset}px` : "",
-			top: side === "left" || side === "right" ? `${arrowOffset}px` : "",
-			right: "",
-			bottom: "",
-			[staticSide]: `${-arrowLen / 2}px`,
-			transform: "rotate(45deg)",
-		},
-		borderStyle,
-	);
-}
-
-function resolveArrowSide(controlRect, popperRect) {
-	const triggerCenterX = controlRect.left + controlRect.width / 2;
-	const triggerCenterY = controlRect.top + controlRect.height / 2;
-	const candidates = [];
-
-	if (triggerCenterY <= popperRect.top) {
-		candidates.push({
-			side: "top",
-			distance: popperRect.top - triggerCenterY,
-		});
-	}
-
-	if (triggerCenterY >= popperRect.bottom) {
-		candidates.push({
-			side: "bottom",
-			distance: triggerCenterY - popperRect.bottom,
-		});
-	}
-
-	if (triggerCenterX <= popperRect.left) {
-		candidates.push({
-			side: "left",
-			distance: popperRect.left - triggerCenterX,
-		});
-	}
-
-	if (triggerCenterX >= popperRect.right) {
-		candidates.push({
-			side: "right",
-			distance: triggerCenterX - popperRect.right,
-		});
-	}
-
-	if (candidates.length === 0) {
-		return "top";
-	}
-
-	candidates.sort((a, b) => a.distance - b.distance);
-	return candidates[0].side;
-}
-
-function resolveArrowOffset(side, controlRect, popperRect, arrowHalf) {
-	if (side === "top" || side === "bottom") {
-		return clamp(
-			controlRect.left + controlRect.width / 2 - popperRect.left - arrowHalf,
-			0,
-			Math.max(0, popperRect.width - arrowHalf * 2),
-		);
-	}
-
-	return clamp(
-		controlRect.top + controlRect.height / 2 - popperRect.top - arrowHalf,
-		0,
-		Math.max(0, popperRect.height - arrowHalf * 2),
-	);
-}
-
 function applyFloatingArrowStyles(arrowElement, placement, arrowData) {
 	if (!(arrowElement instanceof HTMLElement)) {
 		return;
@@ -847,52 +294,6 @@ function applyFloatingArrowStyles(arrowElement, placement, arrowData) {
 	);
 }
 
-function getAnchorName(controlElement) {
-	if (!anchorNameMap.has(controlElement)) {
-		anchorNameCounter += 1;
-		anchorNameMap.set(
-			controlElement,
-			`--monster-popper-anchor-${anchorNameCounter}`,
-		);
-	}
-
-	return anchorNameMap.get(controlElement);
-}
-
-function isNativePopoverElement(popperElement) {
-	return popperElement?.dataset?.monsterPopperEngine === "native";
-}
-
-function matchesPopoverOpen(popperElement) {
-	try {
-		return popperElement.matches(":popover-open");
-	} catch (e) {
-		return false;
-	}
-}
-
-function hasViewportOverflow(popperElement) {
-	if (!(popperElement instanceof HTMLElement)) {
-		return false;
-	}
-
-	const rect = popperElement.getBoundingClientRect();
-	const tolerance = 1;
-	const viewportWidth = window.innerWidth;
-	const viewportHeight = window.innerHeight;
-
-	return (
-		rect.left < -tolerance ||
-		rect.top < -tolerance ||
-		rect.right > viewportWidth + tolerance ||
-		rect.bottom > viewportHeight + tolerance
-	);
-}
-
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-
 function roundByDPR(value) {
 	const dpr = window.devicePixelRatio || 1;
 	return Math.round(value * dpr) / dpr;

package/source/components/layout/popper.mjs

@@ -169,8 +169,8 @@ class Popper extends CustomElement {
 			content: "<slot></slot>",
 			popper: {
 				placement: "top",
-				engine: "native",
-				middleware: ["autoPlacement", "shift", "offset:15", "arrow"],
+				engine: "floating",
+				middleware: ["flip", "shift", "offset:15", "arrow"],
 				contentOverflow: "both",
 			},
 			features: {