@schukai/monster 4.129.9 → 4.129.10

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

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

@@ -160,6 +160,9 @@ class PopperButton extends Popper {
 			},
 			mode: "click",
 			value: null,
+			popper: Object.assign({}, super.defaults.popper, {
+				contentOverflow: "smart",
+			}),
 
 			aria: {
 				role: null,

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

@@ -309,7 +309,8 @@ function findNearestClippingContainer(element) {
 	while (current) {
 		if (
 			current instanceof HTMLElement &&
-			isClippingContainer(getComputedStyle(current))
+			isClippingContainer(getComputedStyle(current)) &&
+			!shouldIgnoreClippingContainer(current)
 		) {
 			return current;
 		}
@@ -341,6 +342,41 @@ function getComposedParent(node) {
 	return node.parentNode || null;
 }
 
+function shouldIgnoreClippingContainer(element) {
+	if (!(element instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (!isPopperContentWrapper(element)) {
+		return false;
+	}
+
+	const parent = getComposedParent(element);
+	return (
+		parent instanceof HTMLElement &&
+		parent.getAttribute("data-monster-role") === "popper"
+	);
+}
+
+function isPopperContentWrapper(element) {
+	if (!(element instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (!element.hasAttribute("data-monster-overflow-mode")) {
+		return false;
+	}
+
+	const part = element.getAttribute("part");
+	return (
+		isString(part) &&
+		part
+			.split(/\s+/)
+			.filter((token) => token.length > 0)
+			.includes("content")
+	);
+}
+
 function isClippingContainer(style) {
 	if (!style) {
 		return false;

package/source/components/layout/popper.mjs

@@ -155,7 +155,7 @@ class Popper extends CustomElement {
 	 * @property {Object} popper - Positioning options
 	 * @property {string} popper.placement - Placement: top|bottom|left|right
 	 * @property {Array} popper.middleware - Positioning middleware functions
-	 * @property {string} popper.contentOverflow - Content clipping mode: both|horizontal|visible
+	 * @property {string} popper.contentOverflow - Content clipping mode: both|horizontal|visible|smart
 	 * @property {Object} features - Feature flags
 	 * @property {boolean} features.preventOpenEventSent - Prevent open event
 	 * @returns {Object} Default options merged with parent defaults
@@ -200,6 +200,10 @@ class Popper extends CustomElement {
 
 		if (path === "popper.contentOverflow") {
 			applyContentOverflowMode.call(this);
+		} else if (path === "content") {
+			queueMicrotask(() => {
+				applyContentOverflowMode.call(this);
+			});
 		}
 
 		return this;
@@ -282,7 +286,16 @@ class Popper extends CustomElement {
 	 * @return {string}
 	 */
 	resolveContentOverflowMode() {
-		return this.getOption("popper.contentOverflow", "both");
+		const configuredMode = this.getOption("popper.contentOverflow", "both");
+		if (configuredMode !== "smart") {
+			return configuredMode;
+		}
+
+		if (containsNestedOverlayContent(this.getOption("content"))) {
+			return "horizontal";
+		}
+
+		return "both";
 	}
 
 	/**
@@ -702,6 +715,9 @@ function initOverflowObserver() {
 		() => {
 			applyContentOverflowMode.call(this);
 		};
+	this[attributeObserverSymbol]["data-monster-option-content"] = () => {
+		applyContentOverflowMode.call(this);
+	};
 }
 
 /**
@@ -743,4 +759,31 @@ function getTemplate() {
     `;
 }
 
+function containsNestedOverlayContent(content) {
+	const selector = [
+		"monster-details",
+		"monster-message-state-button",
+		"monster-popper",
+		"monster-popper-button",
+		"monster-select",
+		"details",
+	].join(",");
+
+	if (typeof content === "string") {
+		const container = document.createElement("div");
+		container.innerHTML = content;
+		return container.querySelector(selector) instanceof HTMLElement;
+	}
+
+	if (!(content instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (content.matches(selector)) {
+		return true;
+	}
+
+	return content.querySelector(selector) instanceof HTMLElement;
+}
+
 registerCustomElement(Popper);

package/source/components/layout/stylesheet/popper.mjs

@@ -25,7 +25,7 @@ try {
 	PopperStyleSheet.insertRule(
 		`
 @layer popper { 
-[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));max-width:100%;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]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;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]{display:flex;position:relative} 
+[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));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;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]{display:flex;position:relative} 
 }`,
 		0,
 	);

package/source/components/style/floating-ui.css

@@ -1,2 +1,2 @@
 /** generated from floating-ui.pcss **/
-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));max-width:100%;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]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;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}
+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));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;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}

package/source/components/style/floating-ui.pcss

@@ -31,12 +31,7 @@ div[data-monster-role=popper] {
 
     & > [part=content][data-monster-overflow-mode=horizontal] {
         overflow: visible;
-        clip-path: inset(
-            calc(-1 * var(--monster-popper-content-block-overflow, 100vh))
-            0
-            calc(-1 * var(--monster-popper-content-block-overflow, 100vh))
-            0
-        );
+        clip-path: none;
     }
 
     & > [part=content][data-monster-overflow-mode=visible] {

package/source/components/stylesheet/floating-ui.mjs

@@ -24,7 +24,7 @@ const FloatingUiStyleSheet = new CSSStyleSheet();
 try {
   FloatingUiStyleSheet.insertRule(`
 @layer floatingui { 
-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));max-width:100%;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]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;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} 
+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));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;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} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/test/cases/components/form/floating-ui.mjs

@@ -0,0 +1,61 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+
+let resolveClippingBoundaryElement;
+
+describe("form floating-ui boundary resolution", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				return import(
+					"../../../../source/components/form/util/floating-ui.mjs"
+				);
+			})
+			.then((m) => {
+				resolveClippingBoundaryElement = m.resolveClippingBoundaryElement;
+				done();
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should ignore parent popper content wrappers as clipping boundaries for nested controls", function () {
+		const mocks = document.getElementById("mocks");
+		const wrapper = document.createElement("div");
+		const popperHost = document.createElement("div");
+		const selectHost = document.createElement("div");
+
+		wrapper.style.overflow = "hidden";
+		mocks.appendChild(wrapper);
+		wrapper.appendChild(popperHost);
+
+		const popperShadow = popperHost.attachShadow({ mode: "open" });
+		popperShadow.innerHTML = `
+            <div data-monster-role="popper">
+                <div part="content"
+                     data-monster-overflow-mode="both"
+                     style="overflow: auto;">
+                </div>
+            </div>
+        `;
+
+		popperShadow.querySelector('[part="content"]').appendChild(selectHost);
+
+		const selectShadow = selectHost.attachShadow({ mode: "open" });
+		selectShadow.innerHTML = `
+            <div data-monster-role="control"></div>
+            <div data-monster-role="popper"></div>
+        `;
+
+		const control = selectShadow.querySelector('[data-monster-role="control"]');
+		const popper = selectShadow.querySelector('[data-monster-role="popper"]');
+
+		expect(resolveClippingBoundaryElement(control, popper)).to.equal(wrapper);
+	});
+});

package/test/cases/components/form/popper-button.mjs

@@ -62,6 +62,37 @@ describe("PopperButton", function () {
 		}, 0);
 	});
 
+	it("should resolve nested overlay content to horizontal overflow by default", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(content).to.exist;
+
+				button.setOption(
+					"content",
+					"<div><monster-select></monster-select></div>",
+				);
+
+				setTimeout(() => {
+					try {
+						expect(
+							content.getAttribute("data-monster-overflow-mode"),
+						).to.equal("horizontal");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 0);
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
 	it("should apply visible content overflow mode to the rendered content wrapper", function (done) {
 		let mocks = document.getElementById("mocks");
 		const button = document.createElement("monster-popper-button");