@schukai/monster 4.129.0 → 4.129.2

package/source/components/form/message-state-button.mjs

@@ -37,9 +37,13 @@ export { MessageStateButton };
 const buttonElementSymbol = Symbol("buttonElement");
 const innerDisabledObserverSymbol = Symbol("innerDisabledObserver");
 const popperElementSymbol = Symbol("popperElement");
+const contentElementSymbol = Symbol("contentElement");
 const messageElementSymbol = Symbol("messageElement");
 const measurementPopperSymbol = Symbol("measurementPopper");
 const autoHideTimerSymbol = Symbol("autoHideTimer");
+const MESSAGE_LAYOUT_OVERLAY = "overlay";
+const MESSAGE_LAYOUT_PROSE = "prose";
+const MESSAGE_LAYOUT_WIDE = "wide";
 
 /**
  * A specialized button component that combines state management with message display capabilities.
@@ -111,6 +115,8 @@ class MessageStateButton extends Popper {
 	 * @property {string|number} message.width.min Minimum width (px, rem, em, vw)
 	 * @property {string|number} message.width.max Maximum width (px, rem, em, vw)
 	 * @property {number} message.width.viewportRatio Max width as ratio of viewport width (0-1)
+	 * @property {Object} popper Popper options inherited from the base popper
+	 * @property {string} popper.contentOverflow Content clipping mode: both|horizontal|smart
 	 * @property {string} mode The mode of the button, can be `manual` or `submit`
 	 * @property {string} labels.button Button label
 	 * @property {Object} classes Classes for internal elements
@@ -122,20 +128,25 @@ class MessageStateButton extends Popper {
 	 * @property {string} aria.label Aria label for the button
 	 */
 	get defaults() {
-		return Object.assign({}, super.defaults, {
+		const defaults = super.defaults;
+
+		return Object.assign({}, defaults, {
 			message: {
 				title: undefined,
 				content: undefined,
 				icon: undefined,
 				width: {
 					min: "12rem",
-					max: "32rem",
-					viewportRatio: 0.7,
+					max: null,
+					viewportRatio: null,
 				},
 			},
 			templates: {
 				main: getTemplate(),
 			},
+			popper: Object.assign({}, defaults.popper, {
+				contentOverflow: "smart",
+			}),
 			mode: "manual",
 			labels: {
 				button: "<slot></slot>",
@@ -234,6 +245,8 @@ class MessageStateButton extends Popper {
 			);
 		}
 
+		applyResolvedMessagePresentation.call(this);
+
 		return this;
 	}
 
@@ -247,6 +260,7 @@ class MessageStateButton extends Popper {
 		this.setOption("message.content", undefined);
 		this.setOption("message.icon", undefined);
 		clearAutoHideTimer.call(this);
+		applyResolvedMessagePresentation.call(this);
 		return this;
 	}
 
@@ -258,6 +272,7 @@ class MessageStateButton extends Popper {
 	 */
 	showMessage(timeout) {
 		clearAutoHideTimer.call(this);
+		applyResolvedMessagePresentation.call(this);
 		applyMeasuredMessageWidth.call(this);
 		this.showDialog.call(this);
 
@@ -287,6 +302,13 @@ class MessageStateButton extends Popper {
 		return this;
 	}
 
+	/**
+	 * @return {string}
+	 */
+	resolveContentOverflowMode() {
+		return resolveContentOverflowMode.call(this);
+	}
+
 	/**
 	 *
 	 * @return {MessageStateButton}
@@ -438,9 +460,12 @@ function initControlReferences() {
 	this[popperElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=popper]`,
 	);
+	this[contentElementSymbol] =
+		this.shadowRoot.querySelector(`[part="content"]`);
 	this[messageElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=message]`,
 	);
+	applyResolvedMessagePresentation.call(this);
 }
 
 /**
@@ -534,8 +559,11 @@ function getTemplate() {
 
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
                 <div data-monster-role="arrow"></div>
-                <div data-monster-role="message" part="message" class="flex"
-                     data-monster-patch="path:message.content"></div>
+                <div part="content"
+                     class="flex">
+                    <div data-monster-role="message" part="message" class="flex"
+                         data-monster-patch="path:message.content"></div>
+                </div>
             </div>
         </div>
         </div>
@@ -561,7 +589,166 @@ function getMeasurementContent(content) {
 
 /**
  * @private
- * @return {{popper: HTMLElement, message: HTMLElement}|null}
+ * @return {void}
+ */
+function applyResolvedMessagePresentation() {
+	const contentElement = this[contentElementSymbol];
+	const messageElement = this[messageElementSymbol];
+	const layoutMode = resolveMessageLayoutMode.call(this);
+	const overflowMode = this.resolveContentOverflowMode();
+
+	if (contentElement instanceof HTMLElement) {
+		contentElement.setAttribute("data-monster-overflow-mode", overflowMode);
+		contentElement.setAttribute("data-monster-message-layout", layoutMode);
+	}
+
+	if (messageElement instanceof HTMLElement) {
+		messageElement.setAttribute("data-monster-message-layout", layoutMode);
+	}
+
+	if (this[measurementPopperSymbol]?.content instanceof HTMLElement) {
+		this[measurementPopperSymbol].content.setAttribute(
+			"data-monster-overflow-mode",
+			overflowMode,
+		);
+		this[measurementPopperSymbol].content.setAttribute(
+			"data-monster-message-layout",
+			layoutMode,
+		);
+	}
+
+	if (this[measurementPopperSymbol]?.message instanceof HTMLElement) {
+		this[measurementPopperSymbol].message.setAttribute(
+			"data-monster-message-layout",
+			layoutMode,
+		);
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function resolveContentOverflowMode() {
+	const configuredMode = this.getOption("popper.contentOverflow", "smart");
+
+	if (configuredMode !== "smart") {
+		return configuredMode;
+	}
+
+	if (resolveMessageLayoutMode.call(this) === MESSAGE_LAYOUT_OVERLAY) {
+		return "horizontal";
+	}
+
+	return "both";
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function resolveMessageLayoutMode() {
+	const content = this.getOption("message.content");
+
+	if (containsNestedOverlayContent(content)) {
+		return MESSAGE_LAYOUT_OVERLAY;
+	}
+
+	if (containsWideContent(content)) {
+		return MESSAGE_LAYOUT_WIDE;
+	}
+
+	return MESSAGE_LAYOUT_PROSE;
+}
+
+/**
+ * @private
+ * @param {unknown} content
+ * @return {boolean}
+ */
+function containsNestedOverlayContent(content) {
+	const selector = [
+		"monster-details",
+		"monster-message-state-button",
+		"monster-popper",
+		"monster-popper-button",
+		"monster-select",
+		"details",
+	].join(",");
+
+	if (isString(content)) {
+		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;
+}
+
+/**
+ * @private
+ * @param {unknown} content
+ * @return {boolean}
+ */
+function containsWideContent(content) {
+	const root = getContentSearchRoot(content);
+	if (!(root instanceof HTMLElement)) {
+		return false;
+	}
+
+	const selector = [
+		'[data-monster-message-layout="wide"]',
+		"pre",
+		"table",
+		'[style*="white-space: nowrap"]',
+		'[style*="white-space:nowrap"]',
+		'[style*="overflow-x: auto"]',
+		'[style*="overflow-x:auto"]',
+		'[style*="overflow-x: scroll"]',
+		'[style*="overflow-x:scroll"]',
+		'[style*="overflow: auto"]',
+		'[style*="overflow:auto"]',
+		'[style*="overflow: scroll"]',
+		'[style*="overflow:scroll"]',
+	].join(",");
+
+	if (root.matches(selector)) {
+		return true;
+	}
+
+	return root.querySelector(selector) instanceof HTMLElement;
+}
+
+/**
+ * @private
+ * @param {unknown} content
+ * @return {HTMLElement|null}
+ */
+function getContentSearchRoot(content) {
+	if (isString(content)) {
+		const container = document.createElement("div");
+		container.innerHTML = content;
+		return container;
+	}
+
+	if (content instanceof HTMLElement) {
+		return content;
+	}
+
+	return null;
+}
+
+/**
+ * @private
+ * @return {{popper: HTMLElement, content: HTMLElement, message: HTMLElement}|null}
  */
 function ensureMeasurementPopper() {
 	if (this[measurementPopperSymbol]) {
@@ -588,14 +775,19 @@ function ensureMeasurementPopper() {
 		popper.className = this[popperElementSymbol].className;
 	}
 
+	const content = document.createElement("div");
+	content.setAttribute("part", "content");
+
 	const message = document.createElement("div");
 	message.setAttribute(ATTRIBUTE_ROLE, "message");
 	message.className = "flex";
 
-	popper.appendChild(message);
+	content.appendChild(message);
+	popper.appendChild(content);
 	this.shadowRoot.appendChild(popper);
 
-	this[measurementPopperSymbol] = { popper, message };
+	this[measurementPopperSymbol] = { popper, content, message };
+	applyResolvedMessagePresentation.call(this);
 	return this[measurementPopperSymbol];
 }
 
@@ -623,6 +815,8 @@ function applyMeasuredMessageWidth() {
 		measurement.popper.className = popper.className;
 	}
 
+	applyResolvedMessagePresentation.call(this);
+
 	measurement.message.innerHTML = "";
 	if (isString(measureContent)) {
 		measurement.message.innerHTML = measureContent;
@@ -637,6 +831,7 @@ function applyMeasuredMessageWidth() {
 	const rootFontSize =
 		parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 	const widthOptions = this.getOption("message.width", {});
+	const layoutMode = resolveMessageLayoutMode.call(this);
 	const minWidthOption = resolveLength(
 		widthOptions?.min,
 		fontSize,
@@ -649,21 +844,23 @@ function applyMeasuredMessageWidth() {
 		rootFontSize,
 		window.innerWidth,
 	);
-	const viewportRatio =
-		typeof widthOptions?.viewportRatio === "number" &&
-		widthOptions.viewportRatio > 0 &&
-		widthOptions.viewportRatio <= 1
-			? widthOptions.viewportRatio
-			: 0.7;
+	const viewportPadding = rootFontSize * 2;
+	const viewportWidthLimit = Math.max(0, window.innerWidth - viewportPadding);
+	const viewportRatio = resolveViewportRatio(
+		widthOptions?.viewportRatio,
+		layoutMode,
+	);
+	const fallbackMaxWidth =
+		layoutMode === MESSAGE_LAYOUT_WIDE ? viewportWidthLimit : fontSize * 32;
 
 	const minWidth = Math.max(0, minWidthOption ?? Math.round(fontSize * 12));
 	const maxViewportWidth = Math.max(
 		minWidth,
-		window.innerWidth * viewportRatio,
+		Math.min(window.innerWidth * viewportRatio, viewportWidthLimit),
 	);
 	const maxWidth = Math.max(
 		minWidth,
-		Math.min(maxWidthOption ?? fontSize * 32, maxViewportWidth),
+		Math.min(maxWidthOption ?? fallbackMaxWidth, maxViewportWidth),
 	);
 	const targetWidth = Math.max(
 		minWidth,
@@ -673,8 +870,27 @@ function applyMeasuredMessageWidth() {
 	popper.style.width = `${targetWidth}px`;
 	popper.style.minWidth = `${minWidth}px`;
 	popper.style.maxWidth = `${maxWidth}px`;
-	popper.style.whiteSpace = "normal";
-	popper.style.overflowWrap = "anywhere";
+	popper.style.removeProperty("white-space");
+	popper.style.removeProperty("overflow-wrap");
+}
+
+/**
+ * @private
+ * @param {unknown} value
+ * @param {string} layoutMode
+ * @return {number}
+ */
+function resolveViewportRatio(value, layoutMode) {
+	if (
+		typeof value === "number" &&
+		Number.isFinite(value) &&
+		value > 0 &&
+		value <= 1
+	) {
+		return value;
+	}
+
+	return layoutMode === MESSAGE_LAYOUT_WIDE ? 1 : 0.7;
 }
 
 /**

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

@@ -25,9 +25,8 @@ import {
 import { isFunction } from "../../types/is.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Popper } from "../layout/popper.mjs";
-import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
 import { PopperButtonStyleSheet } from "./stylesheet/popper-button.mjs";
-import { positionPopper } from "./util/floating-ui.mjs";
+import { isPositionedPopperOpen, positionPopper } from "./util/floating-ui.mjs";
 import { AccessibilityStyleSheet } from "../stylesheet/accessibility.mjs";
 import "./button.mjs";
 import { addErrorAttribute } from "../../dom/error.mjs";
@@ -353,12 +352,16 @@ class PopperButton extends Popper {
  */
 function initEventHandler() {
 	this[closeEventHandler] = (event) => {
-		const path = event.composedPath();
-
-		for (const [, element] of Object.entries(path)) {
-			if (element === this) {
-				return;
-			}
+		if (
+			isEventInsidePopperButton(
+				this,
+				event,
+				this[controlElementSymbol],
+				this[buttonElementSymbol],
+				this[popperElementSymbol],
+			)
+		) {
+			return;
 		}
 		this.hideDialog();
 	};
@@ -366,6 +369,45 @@ function initEventHandler() {
 	return this;
 }
 
+function isEventInsidePopperButton(
+	owner,
+	event,
+	controlElement,
+	buttonElement,
+	popperElement,
+) {
+	const path = event.composedPath?.() || [];
+
+	for (const element of path) {
+		if (
+			element === owner ||
+			element === controlElement ||
+			element === buttonElement ||
+			element === popperElement
+		) {
+			return true;
+		}
+	}
+
+	const target = path[0] || event.target;
+	if (!(target instanceof Node)) {
+		return false;
+	}
+
+	if (owner instanceof HTMLElement && owner.contains(target)) {
+		return true;
+	}
+
+	if (
+		owner?.shadowRoot instanceof ShadowRoot &&
+		owner.shadowRoot.contains(target)
+	) {
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * @private
  */
@@ -408,7 +450,7 @@ function disconnectResizeObserver() {
  * @private
  */
 function updatePopper() {
-	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
 		return;
 	}
 

package/source/components/form/select.mjs

@@ -63,9 +63,13 @@ import { ProxyObserver } from "../../types/proxyobserver.mjs";
 import { validateArray, validateString } from "../../types/validate.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Processing } from "../../util/processing.mjs";
-import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
 import { SelectStyleSheet } from "./stylesheet/select.mjs";
-import { positionPopper } from "./util/floating-ui.mjs";
+import {
+	closePositionedPopper,
+	isPositionedPopperOpen,
+	openPositionedPopper,
+	positionPopper,
+} from "./util/floating-ui.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
 
@@ -381,6 +385,14 @@ class Select extends CustomControl {
 		initOptionObserver.call(this);
 	}
 
+	setOption(path, value) {
+		if (path === "features.closeOnSelect") {
+			this[closeOnSelectAutoSymbol] = false;
+		}
+
+		return super.setOption(path, value);
+	}
+
 	/**
 	 * This method is called by the `instanceof` operator.
 	 * @return {Symbol}
@@ -3149,7 +3161,10 @@ function gatherState() {
 			addErrorAttribute(this, e);
 		});
 
-	if (this.getOption("features.closeOnSelect") === true) {
+	if (
+		this.getOption("features.closeOnSelect") === true &&
+		isPositionedPopperOpen(this[popperElementSymbol])
+	) {
 		hide.call(this);
 	}
 
@@ -3717,7 +3732,7 @@ function fetchData(url) {
  * @private
  */
 function hide() {
-	this[popperElementSymbol].style.display = "none";
+	closePositionedPopper(this[popperElementSymbol]);
 	setStatusOrRemoveBadges.call(this, "closed");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
 	unregisterFromHost.call(this);
@@ -3733,7 +3748,7 @@ function show() {
 		return;
 	}
 
-	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+	if (isPositionedPopperOpen(this[popperElementSymbol])) {
 		return;
 	}
 
@@ -3786,7 +3801,11 @@ function show() {
 	}
 
 	this[popperElementSymbol].style.visibility = "hidden";
-	this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+	openPositionedPopper(
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+		this.getOption("popper", {}),
+	);
 	setStatusOrRemoveBadges.call(this, "open");
 
 	addAttributeToken(this[controlElementSymbol], "class", "open");
@@ -3984,7 +4003,7 @@ function refreshSelectPaginationLayout() {
  * @private
  */
 function toggle() {
-	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+	if (isPositionedPopperOpen(this[popperElementSymbol])) {
 		hide.call(this);
 	} else {
 		show.call(this);
@@ -4053,12 +4072,16 @@ function initEventHandler() {
 	 * @param {Event} event
 	 */
 	self[closeEventHandler] = (event) => {
-		const path = event.composedPath();
-
-		for (const [, element] of Object.entries(path)) {
-			if (element === self) {
-				return;
-			}
+		if (
+			isEventInsideSelect(
+				self,
+				event,
+				self[controlElementSymbol],
+				self[containerElementSymbol],
+				self[popperElementSymbol],
+			)
+		) {
+			return;
 		}
 		hide.call(self);
 	};
@@ -4257,6 +4280,45 @@ function initEventHandler() {
 	return self;
 }
 
+function isEventInsideSelect(
+	owner,
+	event,
+	controlElement,
+	containerElement,
+	popperElement,
+) {
+	const path = event.composedPath?.() || [];
+
+	for (const element of path) {
+		if (
+			element === owner ||
+			element === controlElement ||
+			element === containerElement ||
+			element === popperElement
+		) {
+			return true;
+		}
+	}
+
+	const target = path[0] || event.target;
+	if (!(target instanceof Node)) {
+		return false;
+	}
+
+	if (owner instanceof HTMLElement && owner.contains(target)) {
+		return true;
+	}
+
+	if (
+		owner?.shadowRoot instanceof ShadowRoot &&
+		owner.shadowRoot.contains(target)
+	) {
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * @private
  * @return {Select}
@@ -4395,7 +4457,7 @@ function initControlReferences() {
  * @private
  */
 function updatePopper() {
-	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
 		return;
 	}
 

package/source/components/form/style/context-error.pcss

@@ -32,6 +32,21 @@
    /* transform: translateY(0.15em);*/
 }
 
+div[data-monster-role="popper"] {
+    max-width: min(var(--monster-popper-max-width, calc(100vw - 2rem)), 32rem);
+
+    & > [part="content"] {
+        display: block;
+        max-width: 100%;
+        max-height: none;
+        overflow: visible;
+        white-space: normal;
+        text-wrap: pretty;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+    }
+}
+
 :host([disabled]) [data-monster-role="button"] svg {
     cursor: default;
     pointer-events: none;

package/source/components/form/style/context-help.pcss

@@ -24,8 +24,20 @@
     }
 }
 
-[data-monster-role="popper"] {
+div[data-monster-role="popper"] {
     z-index: var(--monster-z-index-tooltip-overlay);
+    max-width: min(var(--monster-popper-max-width, calc(100vw - 2rem)), 32rem);
+
+    & > [part="content"] {
+        display: block;
+        max-width: 100%;
+        max-height: none;
+        overflow: visible;
+        white-space: normal;
+        text-wrap: pretty;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+    }
 }
 
 :host {