@schukai/monster 4.128.3 → 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.128.3"}
+{"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/datatable/datatable.mjs

@@ -1692,7 +1692,10 @@ function updateGrid() {
  * @return {void}
  */
 function scheduleGridUpdate() {
-	if (this[resizeFrameRequestSymbol] !== null && this[resizeFrameRequestSymbol] !== undefined) {
+	if (
+		this[resizeFrameRequestSymbol] !== null &&
+		this[resizeFrameRequestSymbol] !== undefined
+	) {
 		return;
 	}
 

package/source/components/datatable/pagination.mjs

@@ -238,6 +238,8 @@ class Pagination extends CustomElement {
 				list.setAttribute("data-monster-adaptive-ready", "true");
 			}
 		}
+
+		syncPaginationStateToDom.call(this, pagination);
 	}
 	/**
 	 *
@@ -803,6 +805,42 @@ function buildPagination(current, max) {
 	};
 }
 
+/**
+ * @private
+ * @param {object} pagination
+ * @returns {void}
+ */
+function syncPaginationStateToDom(pagination) {
+	if (!this.shadowRoot || !pagination) {
+		return;
+	}
+
+	const prevLink = this.shadowRoot.querySelector(
+		"a[data-monster-role=pagination-prev]",
+	);
+	if (prevLink instanceof HTMLElement) {
+		prevLink.setAttribute("href", pagination.prevHref || "#");
+		prevLink.setAttribute("data-page-no", `${pagination.prevNo ?? ""}`);
+		prevLink.className = `previous${pagination.prevClass || ""}`.trim();
+	}
+
+	const nextLink = this.shadowRoot.querySelector(
+		"a[data-monster-role=pagination-next]",
+	);
+	if (nextLink instanceof HTMLElement) {
+		nextLink.setAttribute("href", pagination.nextHref || "#");
+		nextLink.setAttribute("data-page-no", `${pagination.nextNo ?? ""}`);
+		nextLink.className = `next${pagination.nextClass || ""}`.trim();
+	}
+
+	const summary = this.shadowRoot.querySelector(
+		"[data-monster-role=pagination-summary] span",
+	);
+	if (summary instanceof HTMLElement) {
+		summary.textContent = pagination.summary || "";
+	}
+}
+
 /**
  * @private
  */
@@ -1226,7 +1264,7 @@ function getTemplate() {
                    data-monster-replace="path:items.label"></a></li>
         </template>
 
-        <div data-monster-role="control" part="control">
+        <div data-monster-role="control" part="control" data-monster-select-this="true">
             <nav data-monster-role="pagination" role="navigation" aria-label="pagination" part="nav">
                 <ul class="pagination-list" data-monster-insert="items path:pagination.items"
                     data-monster-adaptive-ready="false"

package/source/components/form/login.mjs

@@ -89,6 +89,30 @@ const resetLoginProcessLinksSymbol = Symbol("resetLoginProcessLink");
  */
 const loggedInCollapseSymbol = Symbol("loggedInCollapse");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseSymbol = Symbol("customCollapse");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseHeaderSymbol = Symbol("customCollapseHeader");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseContentSymbol = Symbol("customCollapseContent");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseFooterSymbol = Symbol("customCollapseFooter");
+
 /**
  * @private
  * @type {symbol}
@@ -473,6 +497,98 @@ class Login extends CustomElement {
 		return this;
 	}
 
+	/**
+	 * Opens the custom collapse and focuses the first focusable element if available.
+	 *
+	 * @returns {Login}
+	 */
+	openCustomCollapse() {
+		this[customCollapseSymbol].open();
+		focusFirstCustomCollapseElement.call(this);
+		return this;
+	}
+
+	/**
+	 * Replaces the header content of the custom collapse.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+	 * @returns {Login}
+	 */
+	setCustomCollapseHeader(content) {
+		setCustomCollapseSectionContent.call(
+			this,
+			this[customCollapseHeaderSymbol],
+			content,
+		);
+		return this;
+	}
+
+	/**
+	 * Replaces the main content of the custom collapse.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+	 * @returns {Login}
+	 */
+	setCustomCollapseContent(content) {
+		setCustomCollapseSectionContent.call(
+			this,
+			this[customCollapseContentSymbol],
+			content,
+		);
+		return this;
+	}
+
+	/**
+	 * Replaces the footer content of the custom collapse.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+	 * @returns {Login}
+	 */
+	setCustomCollapseFooter(content) {
+		setCustomCollapseSectionContent.call(
+			this,
+			this[customCollapseFooterSymbol],
+			content,
+		);
+		return this;
+	}
+
+	/**
+	 * Clears all custom collapse sections.
+	 *
+	 * @returns {Login}
+	 */
+	clearCustomCollapse() {
+		this[customCollapseHeaderSymbol].replaceChildren();
+		this[customCollapseContentSymbol].replaceChildren();
+		this[customCollapseFooterSymbol].replaceChildren();
+		return this;
+	}
+
+	/**
+	 * Replaces the custom collapse content and opens it.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|Object|null|undefined} content
+	 * @returns {Login}
+	 */
+	showCustomCollapse(content) {
+		if (isObject(content) && !(content instanceof Node) && !isArray(content)) {
+			if ("header" in content) {
+				this.setCustomCollapseHeader(content.header);
+			}
+			if ("content" in content) {
+				this.setCustomCollapseContent(content.content);
+			}
+			if ("footer" in content) {
+				this.setCustomCollapseFooter(content.footer);
+			}
+		} else if (content !== undefined) {
+			this.setCustomCollapseContent(content);
+		}
+
+		return this.openCustomCollapse();
+	}
+
 	/**
 	 * @return {string}
 	 */
@@ -1745,6 +1861,20 @@ function initControlReferences() {
 		`[data-monster-role="logged-in-collapse"]`,
 	);
 
+	this[customCollapseSymbol] = this.shadowRoot.querySelector(
+		`[data-monster-role="custom-collapse"]`,
+	);
+
+	this[customCollapseHeaderSymbol] = this.shadowRoot.getElementById(
+		"customCollapseHeader",
+	);
+	this[customCollapseContentSymbol] = this.shadowRoot.getElementById(
+		"customCollapseContent",
+	);
+	this[customCollapseFooterSymbol] = this.shadowRoot.getElementById(
+		"customCollapseFooter",
+	);
+
 	this[digitsCollapseSymbol] = this.shadowRoot.querySelector(
 		`[data-monster-role="digits-collapse"]`,
 	);
@@ -1957,8 +2087,75 @@ function getTemplate() {
                     <slot name="logged-in-footer"></slot>
                 </div>
             </monster-collapse>
+            <monster-collapse data-monster-role="custom-collapse"
+                              exportparts="
+								control:collapse-custom-control,
+								container:collapse-custom-container,
+								deco:collapse-custom-deco"
+                              part="custom-collapse">
+                <div part="custom-collapse-wrapper">
+                    <div id="customCollapseHeader" part="custom-collapse-header"></div>
+                    <div id="customCollapseContent" part="custom-collapse-content"></div>
+                    <div id="customCollapseFooter" part="custom-collapse-footer"></div>
+                </div>
+            </monster-collapse>
 
         </div>`;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} target
+ * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+ * @returns {void}
+ */
+function setCustomCollapseSectionContent(target, content) {
+	if (!(target instanceof HTMLElement)) {
+		return;
+	}
+
+	target.replaceChildren(...normalizeCustomCollapseContent.call(this, content));
+
+	if (this[customCollapseSymbol]?.isOpen()) {
+		this[customCollapseSymbol].adjustHeight();
+	}
+}
+
+/**
+ * @private
+ * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+ * @returns {Node[]}
+ */
+function normalizeCustomCollapseContent(content) {
+	if (content === null || content === undefined) {
+		return [];
+	}
+
+	if (content instanceof Node) {
+		return [content];
+	}
+
+	if (isArray(content)) {
+		return content.flatMap((entry) =>
+			normalizeCustomCollapseContent.call(this, entry),
+		);
+	}
+
+	return [this.ownerDocument.createTextNode(String(content))];
+}
+
+/**
+ * @private
+ * @returns {void}
+ */
+function focusFirstCustomCollapseElement() {
+	setTimeout(() => {
+		const focusable = this[customCollapseSymbol]?.querySelector(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+		);
+
+		focusable?.focus?.();
+	}, 0);
+}
+
 registerCustomElement(Login);

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;
 }
 
 /**