@schukai/monster 4.136.1 → 4.136.3

package/source/components/layout/popper.mjs

@@ -279,6 +279,17 @@ class Popper extends CustomElement {
 		return this;
 	}
 
+	/**
+	 * Resolves the effective popper options for the current render pass.
+	 * Subclasses can override this to adapt positioning without mutating
+	 * the persisted component options.
+	 *
+	 * @return {object}
+	 */
+	resolvePopperOptions() {
+		return Object.assign({}, this.getOption("popper", {}));
+	}
+
 	/**
 	 * Resolves the effective content overflow mode for the rendered wrapper.
 	 * Subclasses can override this when the configured option is only an intermediate mode.
@@ -587,7 +598,7 @@ function show() {
 	openPositionedPopper(
 		self[controlElementSymbol],
 		popperElement,
-		self.getOption("popper", {}),
+		self.resolvePopperOptions(),
 	);
 
 	addAttributeToken(controlElement, "class", "open");
@@ -628,7 +639,7 @@ function updatePopper() {
 		this,
 		this[controlElementSymbol],
 		this[popperElementSymbol],
-		this.getOption("popper", {}),
+		this.resolvePopperOptions(),
 	);
 }
 

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

@@ -1,2 +1,62 @@
 /** 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: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}
+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/stylesheet/floating-ui.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 
-export {FloatingUiStyleSheet}
+export { FloatingUiStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {FloatingUiStyleSheet}
 const FloatingUiStyleSheet = new CSSStyleSheet();
 
 try {
-  FloatingUiStyleSheet.insertRule(`
+	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: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);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/test/cases/components/form/context-help.mjs

@@ -11,6 +11,7 @@ const global = getGlobal();
 
 let ContextHelp;
 let resolveClippingBoundaryElement;
+let resolveParentPopperContentBoundary;
 
 describe("ContextHelp", function () {
 	before(function (done) {
@@ -29,6 +30,8 @@ describe("ContextHelp", function () {
 					ContextHelp = contextHelpModule.ContextHelp;
 					resolveClippingBoundaryElement =
 						floatingUiModule.resolveClippingBoundaryElement;
+					resolveParentPopperContentBoundary =
+						floatingUiModule.resolveParentPopperContentBoundary;
 					done();
 				})
 				.catch((e) => done(e));
@@ -88,4 +91,74 @@ describe("ContextHelp", function () {
 			}
 		}, 0);
 	});
+
+	it("should switch to fixed positioning inside a clipping container", function (done) {
+		let mocks = document.getElementById("mocks");
+		const wrapper = document.createElement("div");
+		const help = document.createElement("monster-context-help");
+
+		wrapper.style.overflow = "hidden";
+		wrapper.appendChild(help);
+		mocks.appendChild(wrapper);
+		help.innerHTML = "<p>Inline help</p>";
+
+		setTimeout(() => {
+			try {
+				help.showDialog();
+
+				const popper = help.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(popper.style.position).to.equal("fixed");
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
+	it("should switch to fixed positioning inside a parent popper content wrapper with overflow both", function (done) {
+		let mocks = document.getElementById("mocks");
+		const host = document.createElement("div");
+		const help = document.createElement("monster-context-help");
+
+		mocks.appendChild(host);
+		const shadowRoot = host.attachShadow({ mode: "open" });
+		shadowRoot.innerHTML = `
+			<div data-monster-role="popper">
+				<div part="content"
+					 data-monster-overflow-mode="both">
+				</div>
+			</div>
+		`;
+		shadowRoot.querySelector('[part="content"]').appendChild(help);
+		help.innerHTML = "<p>Nested help</p>";
+
+		setTimeout(() => {
+			try {
+				const control = help.shadowRoot.querySelector(
+					'[data-monster-role="control"]',
+				);
+				const popper = help.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+
+				expect(
+					resolveParentPopperContentBoundary(control, popper),
+				).to.equal(shadowRoot.querySelector('[part="content"]'));
+
+				const content = help.shadowRoot.querySelector('[part="content"]');
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"both",
+				);
+
+				help.showDialog();
+				expect(popper.style.position).to.equal("fixed");
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
 });

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

@@ -135,4 +135,76 @@ describe("form floating-ui boundary resolution", function () {
 		expect(content.style.maxWidth).to.equal("");
 		expect(content.style.maxHeight).to.equal("100px");
 	});
+
+	it("should not clamp the floating element height when content overflow is visible", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const content = document.createElement("div");
+
+		popper.style.maxHeight = "300px";
+		content.style.maxHeight = "240px";
+		content.setAttribute("part", "content");
+		content.setAttribute("data-monster-overflow-mode", "visible");
+
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 160,
+		});
+
+		expect(popper.style.maxHeight).to.equal("");
+		expect(content.style.maxHeight).to.equal("240px");
+	});
+
+	it("should keep at least one readable line for scrollable content", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const content = document.createElement("div");
+
+		popper.style.maxHeight = "300px";
+		content.setAttribute("part", "content");
+		content.textContent = "A long help text that still needs one readable line.";
+		content.style.fontSize = "16px";
+		content.style.lineHeight = "24px";
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 10,
+		});
+
+		expect(content.style.maxHeight).to.equal("24px");
+	});
+
+	it("should use the first slotted element line height for the minimum readable size", function () {
+		const mocks = document.getElementById("mocks");
+		const popperHost = document.createElement("div");
+		const slottedParagraph = document.createElement("p");
+		slottedParagraph.textContent = "Readable help line";
+		slottedParagraph.style.lineHeight = "26px";
+
+		mocks.appendChild(popperHost);
+		const shadowRoot = popperHost.attachShadow({ mode: "open" });
+		shadowRoot.innerHTML = `
+			<div data-monster-role="popper">
+				<div part="content">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+
+		const popper = shadowRoot.querySelector('[data-monster-role="popper"]');
+		const content = shadowRoot.querySelector('[part="content"]');
+		popperHost.appendChild(slottedParagraph);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 10,
+		});
+
+		expect(content.style.maxHeight).to.equal("26px");
+	});
 });