@schukai/monster 4.127.1 → 4.128.1

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 # Changelog
 
 
+## [Unreleased]
+
+### Bug Fixes
+
+- **updater:** add explicit disposal semantics for observer, queue, and event-processing teardown
+- **updater:** dispose linked stateful subtrees before destructive replace/remove operations
+- **updater:** add `data-monster-patch` as a lifecycle-safe alternative to destructive replace rendering
+- **updater:** extend `data-monster-patch` with `DocumentFragment` and unkeyed array support
+- **updater:** add initial `data-monster-patch-key` support for keyed array reorder and removal
+- **updater:** add `data-monster-patch-render` for keyed object arrays with explicit single-node item rendering
+- **message-state-button:** render `message.content` through `data-monster-patch` to preserve rich and stateful message content
+- **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
+
+### Changes
+
+- document lifecycle ownership rules for Updater-driven and stateful custom element implementations
+
+
 
 ## [4.127.1] - 2026-03-16
 
@@ -4658,4 +4678,3 @@
 ## 1.8.0 - 2021-08-15
 
 - Initial release
-

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@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.127.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.1"}

package/source/components/datatable/datatable.mjs

@@ -117,6 +117,12 @@ const columnBarElementSymbol = Symbol("columnBarElement");
  */
 const copyAllElementSymbol = Symbol("copyAllElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const tableScrollElementSymbol = Symbol("tableScrollElement");
+
 /**
  * @private
  * @type {symbol}
@@ -794,6 +800,7 @@ function getCellValueForCopy(cell) {
  */
 function initEventHandler() {
 	const self = this;
+	const tableScrollElement = this[tableScrollElementSymbol];
 
 	// --- Column resizing state ---
 	let isResizing = false;
@@ -801,6 +808,166 @@ function initEventHandler() {
 	let startX = 0;
 	let startWidth = 0;
 
+	// --- Table drag scrolling state ---
+	let isTableDragging = false;
+	let tableDragMoved = false;
+	let tableDragPointerId = null;
+	let tableDragStartX = 0;
+	let tableDragStartY = 0;
+	let tableDragStartScrollLeft = 0;
+	let suppressClickUntil = 0;
+
+	const isInteractiveDragTarget = (event) => {
+		if (
+			findTargetElementFromEvent(event, "data-monster-role", "resize-handle")
+		) {
+			return true;
+		}
+
+		const path = event.composedPath?.();
+		if (!isArray(path)) {
+			return false;
+		}
+
+		for (const node of path) {
+			if (!(node instanceof HTMLElement)) {
+				continue;
+			}
+
+			if (node === tableScrollElement) {
+				return false;
+			}
+
+			if (
+				node.matches(
+					[
+						"button",
+						"a",
+						"input",
+						"select",
+						"textarea",
+						"label",
+						"summary",
+						"[contenteditable]",
+						"[contenteditable='true']",
+						"[draggable='true']",
+						"[role='button']",
+						"[role='link']",
+						"[role='textbox']",
+						"[role='checkbox']",
+						"[role='switch']",
+						"[role='menuitem']",
+					].join(","),
+				)
+			) {
+				return true;
+			}
+		}
+
+		return false;
+	};
+
+	const stopTableDragging = () => {
+		if (tableScrollElement instanceof HTMLElement) {
+			tableScrollElement.classList.remove("is-dragging");
+		}
+
+		getWindow().removeEventListener("pointermove", onTablePointerMove);
+		getWindow().removeEventListener("pointerup", onTablePointerUp);
+		getWindow().removeEventListener("pointercancel", onTablePointerUp);
+
+		if (tableDragPointerId !== null) {
+			tableScrollElement?.releasePointerCapture?.(tableDragPointerId);
+		}
+
+		isTableDragging = false;
+		tableDragMoved = false;
+		tableDragPointerId = null;
+	};
+
+	const onTablePointerDown = (event) => {
+		if (!(tableScrollElement instanceof HTMLElement)) {
+			return;
+		}
+
+		if (
+			(event.pointerType === "mouse" && event.button !== 0) ||
+			event.isPrimary === false
+		) {
+			return;
+		}
+
+		if (tableScrollElement.scrollWidth <= tableScrollElement.clientWidth) {
+			return;
+		}
+
+		if (isInteractiveDragTarget(event)) {
+			return;
+		}
+
+		isTableDragging = true;
+		tableDragMoved = false;
+		tableDragPointerId = event.pointerId;
+		tableDragStartX = event.clientX;
+		tableDragStartY = event.clientY;
+		tableDragStartScrollLeft = tableScrollElement.scrollLeft;
+
+		tableScrollElement.setPointerCapture?.(event.pointerId);
+		getWindow().addEventListener("pointermove", onTablePointerMove);
+		getWindow().addEventListener("pointerup", onTablePointerUp);
+		getWindow().addEventListener("pointercancel", onTablePointerUp);
+	};
+
+	const onTablePointerMove = (event) => {
+		if (
+			!isTableDragging ||
+			tableDragPointerId === null ||
+			event.pointerId !== tableDragPointerId ||
+			!(tableScrollElement instanceof HTMLElement)
+		) {
+			return;
+		}
+
+		const deltaX = event.clientX - tableDragStartX;
+		const deltaY = event.clientY - tableDragStartY;
+
+		if (!tableDragMoved) {
+			if (Math.abs(deltaX) < 8 || Math.abs(deltaX) <= Math.abs(deltaY)) {
+				return;
+			}
+
+			tableDragMoved = true;
+			tableScrollElement.classList.add("is-dragging");
+		}
+
+		event.preventDefault();
+		tableScrollElement.scrollLeft = tableDragStartScrollLeft - deltaX;
+	};
+
+	const onTablePointerUp = (event) => {
+		if (tableDragPointerId === null || event.pointerId !== tableDragPointerId) {
+			return;
+		}
+
+		if (tableDragMoved) {
+			suppressClickUntil = Date.now() + 250;
+		}
+
+		stopTableDragging();
+	};
+
+	const onTableClickCapture = (event) => {
+		if (suppressClickUntil < Date.now()) {
+			return;
+		}
+
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
+	tableScrollElement?.addEventListener("pointerdown", onTablePointerDown);
+	tableScrollElement?.addEventListener("click", onTableClickCapture, true);
+
 	// --- Pointer-based resize handlers (robust for mouse/touch/stylus) ---
 	const onPointerDown = (event) => {
 		// Important: Call helper with (attrName, value) – not with CSS selector
@@ -879,6 +1046,58 @@ function initEventHandler() {
 	const delimiterChar = this.getOption("copy.delimiter");
 	const rowBreak = this.getOption("copy.rowBreak");
 
+	const writeTextToClipboard = (text) => {
+		if (getWindow().navigator.clipboard && text) {
+			getWindow()
+				.navigator.clipboard.writeText(text)
+				.then(
+					() => {},
+					() => {},
+				);
+		}
+	};
+
+	const getCopyTextForRow = (headCell) => {
+		const index = headCell.getAttribute("data-monster-insert-reference");
+		if (!index) {
+			return "";
+		}
+
+		const cols = self.getGridElements(
+			`[data-monster-insert-reference="${index}"]`,
+		);
+		const colTexts = [];
+
+		for (let i = 0; i < cols.length; i++) {
+			const col = cols[i];
+
+			if (
+				col.querySelector("monster-button-bar") ||
+				col.querySelector("monster-button")
+			) {
+				continue;
+			}
+
+			const cellValue = getCellValueForCopy(col);
+			if (cellValue) {
+				colTexts.push(quoteOpenChar + cellValue + quoteCloseChar);
+			}
+		}
+
+		return colTexts.join(delimiterChar);
+	};
+
+	const getCopyTextForCell = (headCell) => {
+		if (
+			headCell.querySelector("monster-button-bar") ||
+			headCell.querySelector("monster-button")
+		) {
+			return "";
+		}
+
+		return getCellValueForCopy(headCell);
+	};
+
 	// --- Column-Bar -> Header visibility & persistence ---
 	if (self[columnBarElementSymbol]) {
 		self[columnBarElementSymbol].attachObserver(
@@ -917,60 +1136,30 @@ function initEventHandler() {
 		}
 	});
 
-	// --- Double-Click Copy (column or entire row with Shift) ---
-	const eventHandlerDoubleClickCopyToClipboard = (event) => {
+	// --- Copy interactions ---
+	const eventHandlerShiftClickCopyRowToClipboard = (event) => {
 		const headCell = findTargetElementFromEvent(event, "data-monster-head");
-		if (!headCell) return;
-
-		let text = "";
-
-		if (event.shiftKey) {
-			const index = headCell.getAttribute("data-monster-insert-reference");
-			if (index) {
-				const cols = self.getGridElements(
-					`[data-monster-insert-reference="${index}"]`,
-				);
-
-				const colTexts = [];
-				for (let i = 0; i < cols.length; i++) {
-					const col = cols[i];
-
-					if (
-						col.querySelector("monster-button-bar") ||
-						col.querySelector("monster-button")
-					) {
-						continue;
-					}
+		if (!headCell || !event.shiftKey) {
+			return;
+		}
 
-					const cellValue = getCellValueForCopy(col);
-					if (cellValue) {
-						colTexts.push(quoteOpenChar + cellValue + quoteCloseChar);
-					}
-				}
+		writeTextToClipboard(getCopyTextForRow(headCell));
+	};
 
-				text = colTexts.join(delimiterChar);
-			}
-		} else {
-			if (
-				headCell.querySelector("monster-button-bar") ||
-				headCell.querySelector("monster-button")
-			) {
-				return;
-			}
-			text = getCellValueForCopy(headCell);
+	const eventHandlerDoubleClickCopyToClipboard = (event) => {
+		const headCell = findTargetElementFromEvent(event, "data-monster-head");
+		if (!headCell || event.shiftKey) {
+			return;
 		}
 
-		if (getWindow().navigator.clipboard && text) {
-			getWindow()
-				.navigator.clipboard.writeText(text)
-				.then(
-					() => {},
-					() => {},
-				);
-		}
+		writeTextToClipboard(getCopyTextForCell(headCell));
 	};
 
 	if (self.getOption("features.doubleClickCopyToClipboard")) {
+		self[gridElementSymbol].addEventListener(
+			"click",
+			eventHandlerShiftClickCopyRowToClipboard,
+		);
 		self[gridElementSymbol].addEventListener(
 			"dblclick",
 			eventHandlerDoubleClickCopyToClipboard,
@@ -1537,6 +1726,10 @@ function initControlReferences() {
 		"[data-monster-role=copy-all]",
 	);
 
+	this[tableScrollElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=table-scroll]",
+	);
+
 	return this;
 }
 

package/source/components/datatable/style/datatable.pcss

@@ -56,6 +56,11 @@
     overflow-y: visible;
     width: 100%;
     padding-bottom: 3rem;
+    touch-action: pan-y;
+
+    &.is-dragging {
+        user-select: none;
+    }
 }
 
 :host {