@schukai/monster 4.129.0 → 4.129.1

package/CHANGELOG.md

@@ -15,10 +15,13 @@
 - **customelement:** skip mutation-observer updater reruns for disconnected or disposed instances
 - **message-state-button:** clear auto-hide timers on disconnect and ignore delayed hides after removal
 - **popper:** guard show/hide/update flows against disconnected hosts and missing internal elements
+- **message-state-button:** distinguish overlay, prose, and wide message layouts for smart popper sizing and overflow ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
+- **popper:** support kebab-case camelCase option attributes such as `data-monster-option-popper-content-overflow` ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
 
 ### Changes
 
 - document lifecycle ownership rules for Updater-driven and stateful custom element implementations
+- document smart message popper layout behavior for forms and feedback flows ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
 
 
 

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

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,11 @@ 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 +558,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 +588,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 +774,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 +814,8 @@ function applyMeasuredMessageWidth() {
 		measurement.popper.className = popper.className;
 	}
 
+	applyResolvedMessagePresentation.call(this);
+
 	measurement.message.innerHTML = "";
 	if (isString(measureContent)) {
 		measurement.message.innerHTML = measureContent;
@@ -637,6 +830,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 +843,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 +869,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/style/message-state-button.pcss

@@ -16,20 +16,63 @@ button {
     max-width: 100%;
 }
 
+[part=content] {
+    display: block;
+    min-width: 0;
+}
+
 [data-monster-role=message] {
-    max-width: 100%;
+    display: block;
     min-width: 0;
+}
+
+[data-monster-role=message][data-monster-message-layout=prose] {
+    width: 100%;
+    max-width: 100%;
+    overflow-wrap: break-word;
+    word-break: break-word;
+
+    & > * {
+        max-width: 100%;
+        min-width: 0;
+    }
+}
+
+[data-monster-role=message][data-monster-message-layout=wide] {
+    width: max-content;
+    max-width: none;
+
+    & > * {
+        min-width: 0;
+    }
+}
+
+[data-monster-role=message][data-monster-message-layout=overlay] {
+    width: 100%;
+    max-width: 100%;
     overflow-wrap: break-word;
     word-break: break-word;
 
     & > * {
         max-width: 100%;
+        min-width: 0;
     }
 
     & input,
     & select,
-    & textarea,
-    & monster-select {
+    & textarea {
+        max-width: 100%;
+        min-width: 0;
+    }
+
+    & monster-select,
+    & monster-details,
+    & monster-popper,
+    & monster-popper-button,
+    & monster-message-state-button {
+        display: block;
+        width: 100%;
         max-width: 100%;
+        min-width: 0;
     }
 }