@schukai/monster 4.136.12 → 4.136.14

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.12"}
+{"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.14"}

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/navigation/table-of-content.mjs

@@ -284,16 +284,24 @@ function calcAndSetNavigationTopScrollableParentContext() {
 		return;
 	}
 
-	const scrollTop = this[scrollableParentSymbol].scrollTop;
-	const thisTop = scrollTop;
+	const parentRect = this[scrollableParentSymbol].getBoundingClientRect();
+	const rect = this.getBoundingClientRect();
+	const thisTop = rect.top - parentRect.top;
+	const thisBottom = rect.bottom - parentRect.top;
 	let top = 0;
-	top += scrollTop;
+	if (thisTop < 0) {
+		top = -1 * thisTop;
+	}
 
 	const offset = this.getOption("offset");
 	if (offset > 0) {
 		top += offset;
 	}
 
+	if (thisBottom < 0) {
+		return;
+	}
+
 	fireCustomEvent(this, "new-top", { top: top });
 
 	this[navigationElementSymbol].style.top = top + "px";
@@ -388,10 +396,15 @@ function createListFromHeadings(nodeList, currentLevel = 1) {
 			li.addEventListener("click", (e) => {
 				e.stopPropagation();
 				getWindow().requestAnimationFrame(() => {
-					window.scrollTo(0, 0);
-					// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-					// mostly supported
-					node?.scrollIntoView({ behavior: "smooth" });
+					if (!node) {
+						return;
+					}
+
+					node.scrollIntoView({
+						behavior: "smooth",
+						block: "start",
+						inline: "nearest",
+					});
 				});
 			});
 
@@ -579,7 +592,7 @@ function getTemplate() {
 	return `
         <div data-monster-role="control" part="control">
             <div class="navigation" data-monster-role="navigation">
-                <monster-popper data-monster-option-mode="enter">
+                <monster-popper data-monster-option-mode="enter" data-monster-option-popper-content-overflow="visible">
                     <div slot="button" data-monster-role="navigation-control">
                     </div>
                     <div data-monster-role="navigation-list">

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");