@schukai/monster 4.129.2 → 4.129.4

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

package/source/components/form/stylesheet/context-error.mjs

@@ -25,7 +25,7 @@ try {
 	ContextErrorStyleSheet.insertRule(
 		`
 @layer contexterror { 
-[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem)}div[data-monster-role=popper]>[part=content]{display:block;max-height:none;max-width:100%;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}div[data-monster-role=popper]{max-height:none;max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem);overflow:visible}div[data-monster-role=popper]>[part=content]{display:block;max-height:none;max-width:100%;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
 }`,
 		0,
 	);

package/source/components/form/stylesheet/context-help.mjs

@@ -25,7 +25,7 @@ try {
 	ContextHelpStyleSheet.insertRule(
 		`
 @layer contexthelp { 
-[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem);z-index:var(--monster-z-index-tooltip-overlay)}div[data-monster-role=popper]>[part=content]{display:block;max-height:none;max-width:100%;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}div[data-monster-role=popper]{max-height:none;max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem);overflow:visible;z-index:var(--monster-z-index-tooltip-overlay)}div[data-monster-role=popper]>[part=content]{display:block;max-height:none;max-width:100%;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
 }`,
 		0,
 	);

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

@@ -59,44 +59,7 @@ function positionPopper(controlElement, popperElement, options) {
 			return;
 		}
 
-		teardownNativePopover(popperElement);
-		popperElement.style.removeProperty("visibility");
-		popperElement.style.display = "block";
-
-		const arrowElement = popperElement.querySelector(
-			"[data-monster-role=arrow]",
-		);
-		const floatingMiddleware = [...config.floatingMiddleware];
-		if (
-			arrowElement instanceof HTMLElement &&
-			config.middlewareTokens.includes("arrow")
-		) {
-			floatingMiddleware.push(arrow({ element: arrowElement }));
-		}
-
-		startAutoUpdate(controlElement, popperElement, () => {
-			computePosition(
-				controlElement,
-				popperElement,
-				Object.assign({}, config, {
-					middleware: floatingMiddleware,
-				}),
-			).then(({ x, y, placement, middlewareData }) => {
-				Object.assign(popperElement.style, {
-					top: "0",
-					left: "0",
-					transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
-				});
-
-				if (middlewareData.arrow) {
-					applyFloatingArrowStyles(
-						arrowElement,
-						placement,
-						middlewareData.arrow,
-					);
-				}
-			});
-		});
+		enableFloatingPositioning(controlElement, popperElement, config);
 	}).run();
 }
 
@@ -116,6 +79,47 @@ function openPositionedPopper(controlElement, popperElement, options) {
 	popperElement.style.display = "block";
 }
 
+function enableFloatingPositioning(controlElement, popperElement, config) {
+	teardownNativePopover(popperElement);
+	popperElement.style.removeProperty("visibility");
+	popperElement.style.display = "block";
+
+	startAutoUpdate(controlElement, popperElement, () => {
+		syncFloatingPopover(controlElement, popperElement, config);
+	});
+	syncFloatingPopover(controlElement, popperElement, config);
+}
+
+function syncFloatingPopover(controlElement, popperElement, config) {
+	const arrowElement = popperElement.querySelector("[data-monster-role=arrow]");
+	const floatingMiddleware = [...config.floatingMiddleware];
+
+	if (
+		arrowElement instanceof HTMLElement &&
+		config.middlewareTokens.includes("arrow")
+	) {
+		floatingMiddleware.push(arrow({ element: arrowElement }));
+	}
+
+	computePosition(
+		controlElement,
+		popperElement,
+		Object.assign({}, config, {
+			middleware: floatingMiddleware,
+		}),
+	).then(({ x, y, placement, middlewareData }) => {
+		Object.assign(popperElement.style, {
+			top: "0",
+			left: "0",
+			transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
+		});
+
+		if (middlewareData.arrow) {
+			applyFloatingArrowStyles(arrowElement, placement, middlewareData.arrow);
+		}
+	});
+}
+
 function closePositionedPopper(popperElement) {
 	stopAutoUpdate(popperElement);
 	cancelScheduledNativeArrowSync(popperElement);
@@ -404,6 +408,12 @@ function syncNativePopover(controlElement, popperElement, config) {
 
 	applyNativePlacementStyles(popperElement, placement, offsetValue);
 	popperElement.style.removeProperty("visibility");
+
+	if (hasViewportOverflow(popperElement)) {
+		enableFloatingPositioning(controlElement, popperElement, config);
+		return;
+	}
+
 	syncNativeArrow(controlElement, popperElement);
 	scheduleNativeArrowSync(controlElement, popperElement);
 }
@@ -861,6 +871,24 @@ function matchesPopoverOpen(popperElement) {
 	}
 }
 
+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);
 }

package/test/cases/components/content/image-editor.mjs

@@ -9,29 +9,24 @@ let expect = chai.expect;
 chai.use(chaiDom);
 
 describe('ImageEditor', function () {
+    this.timeout(10000);
 
     let ImageEditor, document;
     let registerCustomElement;
     let CustomElement;
     let assembleMethodSymbol;
 
-    before(function (done) {
-        initJSDOM({}).then(() => {
-            import("../../../../source/dom/customelement.mjs").then((domModule) => {
-                registerCustomElement = domModule['registerCustomElement'];
-                CustomElement = domModule['CustomElement'];
-                assembleMethodSymbol = domModule['assembleMethodSymbol'];
-                return import("../../../../source/components/content/image-editor.mjs");
-            }).then((m) => {
-                try {
-                    ImageEditor = m['ImageEditor'];
-                    document = getDocument();
-                    done();
-                } catch (e) {
-                    done(e);
-                }
-            }).catch((e) => done(e));
-        });
+    before(async function () {
+        await initJSDOM({});
+
+        const domModule = await import("../../../../source/dom/customelement.mjs");
+        registerCustomElement = domModule['registerCustomElement'];
+        CustomElement = domModule['CustomElement'];
+        assembleMethodSymbol = domModule['assembleMethodSymbol'];
+
+        const componentModule = await import("../../../../source/components/content/image-editor.mjs");
+        ImageEditor = componentModule['ImageEditor'];
+        document = getDocument();
     });
 
     beforeEach(() => {