@schukai/monster 4.136.11 → 4.136.13

package/package.json

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

package/source/components/datatable/datatable.mjs

@@ -828,6 +828,16 @@ function initEventHandler() {
 	let suppressClickUntil = 0;
 
 	const isInteractiveDragTarget = (event) => {
+		if (
+			findTargetElementFromEvent(
+				event,
+				"data-monster-role",
+				"datatable-headers",
+			)
+		) {
+			return true;
+		}
+
 		if (
 			findTargetElementFromEvent(event, "data-monster-role", "resize-handle")
 		) {

package/source/components/form/select.mjs

@@ -1126,6 +1126,52 @@ function getSelectionSyncState() {
 	return { attrValue, selection, optionsLength };
 }
 
+function hasSelectionLikeValue(candidate) {
+	if (isArray(candidate)) {
+		return candidate.some((entry) => {
+			if (isObject(entry) && Object.prototype.hasOwnProperty.call(entry, "value")) {
+				return hasSelectionLikeValue.call(this, entry.value);
+			}
+
+			return hasSelectionLikeValue.call(this, entry);
+		});
+	}
+
+	if (isObject(candidate)) {
+		for (const key of ["value", "id", "key"]) {
+			if (Object.prototype.hasOwnProperty.call(candidate, key)) {
+				return hasSelectionLikeValue.call(this, candidate[key]);
+			}
+		}
+	}
+
+	if (candidate === undefined || candidate === null) {
+		return false;
+	}
+
+	if (isValueIsEmpty.call(this, candidate)) {
+		return false;
+	}
+
+	if (isString(candidate)) {
+		return candidate.trim() !== "";
+	}
+
+	return true;
+}
+
+function hasRequestedSelectionValue() {
+	const pendingValue = this[pendingSelectionSymbol]?.value;
+	const optionValue = this.getOption("value");
+	const attrValue = this.getAttribute("value");
+
+	return (
+		hasSelectionLikeValue.call(this, pendingValue) ||
+		hasSelectionLikeValue.call(this, optionValue) ||
+		hasSelectionLikeValue.call(this, attrValue)
+	);
+}
+
 /**
  * @private
  * @param {number} version
@@ -2787,7 +2833,7 @@ function setSummaryAndControlText() {
 		current === msg ||
 		current === null
 	) {
-		if (selections.length === 0) {
+		if (selections.length === 0 && hasRequestedSelectionValue.call(this) !== true) {
 			this.setOption("messages.control", msg);
 		} else {
 			this.setOption("messages.control", "");
@@ -3988,7 +4034,7 @@ function areOptionsAvailableAndInitInternal() {
 	if (
 		selections === undefined ||
 		selections === null ||
-		selections.length === 0
+		(selections.length === 0 && hasRequestedSelectionValue.call(this) !== true)
 	) {
 		this.setOption(
 			"messages.control",

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

@@ -188,6 +188,55 @@ describe("Datatable drag scroll", function () {
 		expect(clickCount).to.equal(1);
 	});
 
+	it("does not start drag scroll from header interactions", async function () {
+		const mocks = document.getElementById("mocks");
+		const datatable = document.createElement("monster-datatable");
+		datatable.id = "drag-scroll-header-table";
+		datatable.innerHTML = `
+			<template id="drag-scroll-header-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 headerCell = datatable.shadowRoot.querySelector(
+			"[data-monster-role=datatable-headers] > div",
+		);
+
+		expect(scroll).to.exist;
+		expect(headerCell).to.exist;
+
+		mockScrollableElement(scroll, {
+			clientWidth: 200,
+			scrollWidth: 600,
+		});
+
+		scroll.scrollLeft = 120;
+
+		dispatchPointerEvent(headerCell, "pointerdown", {
+			clientX: 100,
+			clientY: 20,
+		});
+		dispatchPointerEvent(window, "pointermove", {
+			clientX: 40,
+			clientY: 24,
+		});
+		dispatchPointerEvent(window, "pointerup", {
+			clientX: 40,
+			clientY: 24,
+		});
+
+		expect(scroll.scrollLeft).to.equal(120);
+		expect(scroll.classList.contains("is-dragging")).to.equal(false);
+	});
+
 	it("keeps double click copy for a single cell", async function () {
 		const mocks = document.getElementById("mocks");
 		const datatable = document.createElement("monster-datatable");

package/test/cases/components/form/select.mjs

@@ -978,6 +978,44 @@ describe('Select', function () {
             expect(select.getOption('messages.emptyOptions')).to.contain('Please consider modifying the filter');
         });
 
+        it('should not show the select placeholder while a value sync is still pending', async function () {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const savedGlobalQueueMicrotask = global.queueMicrotask;
+            const savedWindowQueueMicrotask = window.queueMicrotask;
+            const delayedQueueMicrotask = (callback) => setTimeout(callback, 50);
+
+            global.queueMicrotask = delayedQueueMicrotask;
+            window.queueMicrotask = delayedQueueMicrotask;
+
+            try {
+                const select = document.createElement('monster-select');
+                select.setOption('options', [
+                    {label: 'Alpha', value: 'a'}
+                ]);
+                select.setAttribute('value', 'a');
+                mocks.appendChild(select);
+
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(select.getOption('messages.control')).to.not.equal(
+                    select.getOption('labels.select-an-option')
+                );
+
+                await waitForCondition(() => {
+                    return Array.isArray(select.getOption('selection')) &&
+                        select.getOption('selection').length === 1;
+                });
+
+                expect(select.value).to.equal('a');
+                expect(select.getOption('messages.control')).to.equal('');
+            } finally {
+                global.queueMicrotask = savedGlobalQueueMicrotask;
+                window.queueMicrotask = savedWindowQueueMicrotask;
+            }
+        });
+
         it('should keep empty equivalent matching type-safe for numeric zero', function (done) {
             this.timeout(2000);