@schukai/monster 4.128.0 → 4.128.2

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

@@ -3,6 +3,8 @@ div[data-monster-role=popper] {
     box-sizing: border-box;
     display: none;
     padding: 1.1em;
+    max-width: var(--monster-popper-max-width, calc(100vw - 2rem));
+    max-height: var(--monster-popper-max-height, calc(100vh - 2rem));
     z-index: var(--monster-z-index-modal);
     background: var(--monster-bg-color-primary-1);
     color: var(--monster-color-primary-1);
@@ -21,6 +23,12 @@ div[data-monster-role=popper] {
     top: 0;
     left: 0;
 
+    & > [part=content] {
+        overflow: auto;
+        max-width: 100%;
+        max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
+    }
+
     & div[data-monster-role=arrow] {
         position: absolute;
         width: calc(2 * max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance)));

package/source/components/stylesheet/floating-ui.mjs

@@ -25,7 +25,7 @@ try {
 	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;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] 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] 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,
 	);

package/source/dom/customelement.mjs

@@ -932,33 +932,33 @@ function attachChildMutationObserver() {
 			return;
 		}
 
-			self[childMutationTimerSymbol] = setTimeout(() => {
-				self[childMutationTimerSymbol] = null;
-				if (!self.isConnected) {
-					return;
-				}
+		self[childMutationTimerSymbol] = setTimeout(() => {
+			self[childMutationTimerSymbol] = null;
+			if (!self.isConnected) {
+				return;
+			}
 
-				if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
-					return;
-				}
+			if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
+				return;
+			}
+
+			const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
+			for (const list of updaters) {
+				for (const updater of list) {
+					if (
+						typeof updater?.isDisposed === "function" &&
+						updater.isDisposed() === true
+					) {
+						continue;
+					}
+
+					if (!updater?.[internalSymbol]?.element?.isConnected) {
+						continue;
+					}
 
-				const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
-				for (const list of updaters) {
-					for (const updater of list) {
-						if (
-							typeof updater?.isDisposed === "function" &&
-							updater.isDisposed() === true
-						) {
-							continue;
-						}
-
-						if (!updater?.[internalSymbol]?.element?.isConnected) {
-							continue;
-						}
-
-						updater.run().catch((e) => {
-							addErrorAttribute(self, e);
-						});
+					updater.run().catch((e) => {
+						addErrorAttribute(self, e);
+					});
 				}
 			}
 		}, 50);

package/source/dom/updater.mjs

@@ -161,15 +161,15 @@ class Updater extends Base {
 				return Promise.resolve();
 			}
 
-				const real = this[internalSymbol].subject.getRealSubject();
-				const diffResult = diff(this[internalSymbol].last, real);
-				this[internalSymbol].last = clone(real);
-				if (diffResult.length === 0) {
-					return Promise.resolve();
-				}
-				this[pendingDiffsSymbol].push(diffResult);
-				return this[processQueueSymbol]();
-			});
+			const real = this[internalSymbol].subject.getRealSubject();
+			const diffResult = diff(this[internalSymbol].last, real);
+			this[internalSymbol].last = clone(real);
+			if (diffResult.length === 0) {
+				return Promise.resolve();
+			}
+			this[pendingDiffsSymbol].push(diffResult);
+			return this[processQueueSymbol]();
+		});
 		this[internalSymbol].subject.attachObserver(this[subjectObserverSymbol]);
 	}
 
@@ -464,7 +464,10 @@ function getControlEventHandler() {
 	 * @param {Event} event
 	 */
 	this[symbol] = (event) => {
-		if (this[disposedSymbol] === true || !this[internalSymbol].element?.isConnected) {
+		if (
+			this[disposedSymbol] === true ||
+			!this[internalSymbol].element?.isConnected
+		) {
 			return;
 		}
 
@@ -857,16 +860,16 @@ function insertElement(change) {
 				);
 
 				for (const [, node] of Object.entries(nodes)) {
-						if (
-							!available.has(
-								node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
-							)
-						) {
-							try {
-								teardownManagedSubtree(node);
-								containerElement.removeChild(node);
-							} catch (e) {
-								addErrorAttribute(containerElement, e);
+					if (
+						!available.has(
+							node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
+						)
+					) {
+						try {
+							teardownManagedSubtree(node);
+							containerElement.removeChild(node);
+						} catch (e) {
+							addErrorAttribute(containerElement, e);
 						}
 					}
 				}
@@ -1285,7 +1288,8 @@ function preparePatchedNode(node, value) {
 			typeof value === "number" ||
 			typeof value === "boolean"
 		) {
-			node.textContent = value === null || value === undefined ? "" : String(value);
+			node.textContent =
+				value === null || value === undefined ? "" : String(value);
 			return node;
 		}
 

package/test/cases/components/datatable/drag-scroll.mjs

@@ -0,0 +1,258 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+chai.use(chaiDom);
+
+function dispatchPointerEvent(target, type, options = {}) {
+	const event = new Event(type, {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+	});
+
+	const values = {
+		button: 0,
+		isPrimary: true,
+		pointerId: 1,
+		clientX: 0,
+		clientY: 0,
+		...options,
+	};
+
+	for (const [key, value] of Object.entries(values)) {
+		Object.defineProperty(event, key, {
+			configurable: true,
+			value,
+		});
+	}
+
+	target.dispatchEvent(event);
+	return event;
+}
+
+describe("Datatable drag scroll", function () {
+	before(async function () {
+		await initJSDOM();
+		await import("element-internals-polyfill").catch(() => {});
+		await import("../../../../source/components/datatable/datatable.mjs");
+	});
+
+	beforeEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("drags horizontally on non-interactive cells and suppresses the follow-up click", async function () {
+		const mocks = document.getElementById("mocks");
+		const datatable = document.createElement("monster-datatable");
+		datatable.id = "drag-scroll-table";
+		datatable.innerHTML = `
+			<template id="drag-scroll-table-row">
+				<div data-monster-head="Name">Alpha</div>
+				<div data-monster-head="Value">Beta</div>
+			</template>
+		`;
+		datatable.setOption("data", [{}, {}]);
+		mocks.appendChild(datatable);
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const scroll = datatable.shadowRoot.querySelector(
+			"[data-monster-role=table-scroll]",
+		);
+		const cell = datatable.shadowRoot.querySelector(
+			"[data-monster-role=datatable] > div",
+		);
+
+		expect(scroll).to.exist;
+		expect(cell).to.exist;
+
+		Object.defineProperty(scroll, "clientWidth", {
+			configurable: true,
+			value: 200,
+		});
+		Object.defineProperty(scroll, "scrollWidth", {
+			configurable: true,
+			value: 600,
+		});
+
+		scroll.scrollLeft = 120;
+
+		let clickCount = 0;
+		cell.addEventListener("click", () => {
+			clickCount += 1;
+		});
+
+		dispatchPointerEvent(cell, "pointerdown", {
+			clientX: 100,
+			clientY: 20,
+		});
+		dispatchPointerEvent(window, "pointermove", {
+			clientX: 40,
+			clientY: 24,
+		});
+		dispatchPointerEvent(window, "pointerup", {
+			clientX: 40,
+			clientY: 24,
+		});
+
+		expect(scroll.scrollLeft).to.equal(180);
+		expect(scroll.classList.contains("is-dragging")).to.equal(false);
+
+		cell.dispatchEvent(
+			new window.MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+			}),
+		);
+
+		expect(clickCount).to.equal(0);
+	});
+
+	it("does not break clicks on embedded controls", async function () {
+		const mocks = document.getElementById("mocks");
+		const datatable = document.createElement("monster-datatable");
+		datatable.id = "drag-scroll-button-table";
+		datatable.innerHTML = `
+			<template id="drag-scroll-button-table-row">
+				<div data-monster-head="Name">Alpha</div>
+				<div data-monster-head="Action"><button type="button">Open</button></div>
+			</template>
+		`;
+		datatable.setOption("data", [{}]);
+		mocks.appendChild(datatable);
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const scroll = datatable.shadowRoot.querySelector(
+			"[data-monster-role=table-scroll]",
+		);
+		const button = datatable.shadowRoot.querySelector("button");
+
+		expect(scroll).to.exist;
+		expect(button).to.exist;
+
+		Object.defineProperty(scroll, "clientWidth", {
+			configurable: true,
+			value: 200,
+		});
+		Object.defineProperty(scroll, "scrollWidth", {
+			configurable: true,
+			value: 600,
+		});
+
+		scroll.scrollLeft = 120;
+
+		let clickCount = 0;
+		button.addEventListener("click", () => {
+			clickCount += 1;
+		});
+
+		dispatchPointerEvent(button, "pointerdown", {
+			clientX: 100,
+			clientY: 20,
+		});
+		dispatchPointerEvent(window, "pointermove", {
+			clientX: 30,
+			clientY: 22,
+		});
+		dispatchPointerEvent(window, "pointerup", {
+			clientX: 30,
+			clientY: 22,
+		});
+
+		button.dispatchEvent(
+			new window.MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+			}),
+		);
+
+		expect(scroll.scrollLeft).to.equal(120);
+		expect(clickCount).to.equal(1);
+	});
+
+	it("keeps double click copy for a single cell", async function () {
+		const mocks = document.getElementById("mocks");
+		const datatable = document.createElement("monster-datatable");
+		datatable.id = "copy-cell-table";
+		datatable.innerHTML = `
+			<template id="copy-cell-table-row">
+				<div data-monster-head="Name">Alpha</div>
+				<div data-monster-head="Value">Beta</div>
+			</template>
+		`;
+		datatable.setOption("data", [{}]);
+		mocks.appendChild(datatable);
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const copied = [];
+		Object.defineProperty(window.navigator, "clipboard", {
+			configurable: true,
+			value: {
+				writeText: async (text) => {
+					copied.push(text);
+				},
+			},
+		});
+
+		const cell = datatable.shadowRoot.querySelector(
+			"[data-monster-role=datatable] > div",
+		);
+		cell.dispatchEvent(
+			new window.MouseEvent("dblclick", {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+			}),
+		);
+
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		expect(copied).deep.equal(["Alpha"]);
+	});
+
+	it("copies the whole row on shift click", async function () {
+		const mocks = document.getElementById("mocks");
+		const datatable = document.createElement("monster-datatable");
+		datatable.id = "copy-row-table";
+		datatable.innerHTML = `
+			<template id="copy-row-table-row">
+				<div data-monster-head="Name">Alpha</div>
+				<div data-monster-head="Value">Beta</div>
+			</template>
+		`;
+		datatable.setOption("data", [{}]);
+		mocks.appendChild(datatable);
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const copied = [];
+		Object.defineProperty(window.navigator, "clipboard", {
+			configurable: true,
+			value: {
+				writeText: async (text) => {
+					copied.push(text);
+				},
+			},
+		});
+
+		const cell = datatable.shadowRoot.querySelector(
+			"[data-monster-role=datatable] > div",
+		);
+		cell.dispatchEvent(
+			new window.MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				shiftKey: true,
+			}),
+		);
+
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		expect(copied).deep.equal(['"Alpha";"Beta"']);
+	});
+});