@schukai/monster 4.136.18 → 4.136.20

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.18"}
+{"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.20"}

package/source/components/datatable/pagination.mjs

@@ -205,10 +205,33 @@ class Pagination extends CustomElement {
 			return;
 		}
 
+		const previousCurrentPage = Number.parseInt(
+			this.getOption("currentPage"),
+			10,
+		);
+		const previousTotalPages = Number.parseInt(this.getOption("pages"), 10);
+		const stateUnchanged =
+			Number.isFinite(previousCurrentPage) &&
+			Number.isFinite(previousTotalPages) &&
+			previousCurrentPage === currentPage &&
+			previousTotalPages === totalPages;
+
 		// 1. Update the component's internal options with the new values.
 		this.setOption("currentPage", currentPage);
 		this.setOption("pages", totalPages);
 
+		if (stateUnchanged) {
+			if (isAdaptivePagination.call(this)) {
+				schedulePaginationLayoutUpdate.call(this);
+			} else {
+				const list = this.shadowRoot?.querySelector(".pagination-list");
+				if (list) {
+					list.setAttribute("data-monster-adaptive-ready", "true");
+				}
+			}
+			return;
+		}
+
 		// 2. Call the existing buildPagination function to recalculate the links.
 		const pagination = buildPagination.call(
 			this,

package/source/components/form/select.mjs

@@ -2959,6 +2959,7 @@ function calcAndSetOptionsDimension() {
 	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
 		widthConstraints.preferredWidth,
 	)}`;
+	this[popperElementSymbol].dataset.monsterWidthBehavior = "preferred";
 	if (
 		Number.isFinite(widthConstraints.maxWidth) &&
 		widthConstraints.maxWidth > 0
@@ -2973,8 +2974,12 @@ function calcAndSetOptionsDimension() {
 		delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
 		this[popperElementSymbol].style.removeProperty("maxWidth");
 	}
-	this[popperElementSymbol].style.width = "";
-	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.width = `${Math.ceil(
+		Math.min(widthConstraints.preferredWidth, widthConstraints.maxWidth),
+	)}px`;
+	this[popperElementSymbol].style.minWidth = `${Math.ceil(
+		Math.min(widthConstraints.preferredWidth, widthConstraints.maxWidth),
+	)}px`;
 	this[popperElementSymbol].style.maxHeight = `${Math.ceil(
 		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
 	)}px`;
@@ -3227,6 +3232,7 @@ function resetSelectPopperDimensionStyles() {
 
 	delete this[popperElementSymbol].dataset.monsterPreferredWidth;
 	delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+	delete this[popperElementSymbol].dataset.monsterWidthBehavior;
 	this[popperElementSymbol].style.removeProperty("width");
 	this[popperElementSymbol].style.removeProperty("minWidth");
 	this[popperElementSymbol].style.removeProperty("maxWidth");

package/source/components/form/util/floating-ui.mjs

@@ -639,6 +639,18 @@ function syncPreferredFloatingWidth(floatingElement, maxWidth) {
 	if (!Number.isFinite(preferredWidth) || preferredWidth <= 0) {
 		return;
 	}
+	const widthBehavior = floatingElement.dataset.monsterWidthBehavior;
+	if (widthBehavior === "preferred") {
+		const nextFloatingWidth = clampAvailableDimension(
+			preferredWidth,
+			Number.isFinite(maxWidth) ? maxWidth : Infinity,
+		);
+		if (Number.isFinite(nextFloatingWidth) && nextFloatingWidth > 0) {
+			floatingElement.style.width = `${nextFloatingWidth}px`;
+			floatingElement.style.minWidth = `${nextFloatingWidth}px`;
+		}
+		return;
+	}
 
 	const contentElement = getFloatingContentElement(floatingElement);
 	if (!(contentElement instanceof HTMLElement)) {

package/source/components/navigation/table-of-content.mjs

@@ -286,12 +286,8 @@ function calcAndSetNavigationTopScrollableParentContext() {
 
 	const parentRect = this[scrollableParentSymbol].getBoundingClientRect();
 	const rect = this.getBoundingClientRect();
-	const thisTop = rect.top - parentRect.top;
 	const thisBottom = rect.bottom - parentRect.top;
-	let top = 0;
-	if (thisTop < 0) {
-		top = -1 * thisTop;
-	}
+	let top = this[scrollableParentSymbol].scrollTop || 0;
 
 	const offset = this.getOption("offset");
 	if (offset > 0) {
@@ -536,6 +532,20 @@ function initEventHandler() {
  * @return {HTMLElement|Window} - The found scrollable parent or the Window object.
  */
 function findScrollableParent(element) {
+	function isScrollable(elementToCheck) {
+		const styles = window.getComputedStyle(elementToCheck);
+		const overflowY = styles.overflowY;
+		const canScrollY =
+			(overflowY === "scroll" || overflowY === "auto") &&
+			elementToCheck.scrollHeight > elementToCheck.clientHeight;
+		const overflowX = styles.overflowX;
+		const canScrollX =
+			(overflowX === "scroll" || overflowX === "auto") &&
+			elementToCheck.scrollWidth > elementToCheck.clientWidth;
+
+		return canScrollY || canScrollX;
+	}
+
 	// Helper function to find the next parent element, checking for Shadow DOM
 	function getNextParent(elem) {
 		// If the element is in a Shadow DOM, attempt to climb up to the host
@@ -551,9 +561,7 @@ function findScrollableParent(element) {
 
 	let parent = getNextParent(element);
 	while (parent) {
-		// Check the scroll properties of the element
-		const overflowY = window.getComputedStyle(parent).overflowY;
-		if (overflowY === "scroll" || overflowY === "auto") {
+		if (isScrollable(parent)) {
 			return parent;
 		}
 		parent = getNextParent(parent); // Move to the next parent element

package/test/cases/components/datatable/pagination.mjs

@@ -7,6 +7,7 @@ let expect = chai.expect;
 chai.use(chaiDom);
 
 let Pagination;
+let EmbeddedPagination;
 
 describe('Pagination', function () {
     this.timeout(10000);
@@ -15,6 +16,9 @@ describe('Pagination', function () {
         initJSDOM().then(() => {
             import("../../../../source/components/datatable/pagination.mjs").then((m) => {
                 Pagination = m['Pagination'];
+                return import("../../../../source/components/datatable/embedded-pagination.mjs");
+            }).then((m) => {
+                EmbeddedPagination = m['EmbeddedPagination'];
                 done();
             }).catch(e => done(e));
         });
@@ -90,10 +94,65 @@ describe('Pagination', function () {
         }, 0);
     });
 
+    it('keeps adaptive pagination visible when the same state is applied again', function (done) {
+        const mocks = document.getElementById('mocks');
+        const wrapper = document.createElement('div');
+        const control = document.createElement('monster-embedded-pagination');
+
+        wrapper.getBoundingClientRect = () => ({
+            width: 320,
+            height: 40,
+            top: 0,
+            left: 0,
+            right: 320,
+            bottom: 40,
+            x: 0,
+            y: 0
+        });
+
+        mocks.appendChild(wrapper);
+        wrapper.appendChild(control);
+
+        setTimeout(() => {
+            try {
+                control.setPaginationState({currentPage: 2, totalPages: 5});
+
+                setTimeout(() => {
+                    try {
+                        const list = control.shadowRoot.querySelector('.pagination-list');
+                        expect(list).to.exist;
+
+                        list.setAttribute('data-monster-adaptive-ready', 'true');
+                        control.setPaginationState({currentPage: 2, totalPages: 5});
+
+                        expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
+
+                        setTimeout(() => {
+                            try {
+                                expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
+                                done();
+                            } catch (e) {
+                                done(e);
+                            }
+                        }, 50);
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 0);
+            } catch (e) {
+                done(e);
+            }
+        }, 0);
+    });
+
     describe('document.createElement', function () {
         it('should instance of Pagination', function () {
             expect(document.createElement('monster-pagination')).is.instanceof(Pagination);
         });
+
+        it('should instance of EmbeddedPagination', function () {
+            expect(document.createElement('monster-embedded-pagination')).is.instanceof(EmbeddedPagination);
+        });
     });
 
 });

package/test/cases/components/form/floating-ui.mjs

@@ -237,4 +237,77 @@ describe("form floating-ui boundary resolution", function () {
 		expect(options.style.height).to.equal("72px");
 		expect(options.style.maxHeight).to.equal("72px");
 	});
+
+	it("should keep a preferred-width popper stable instead of growing with content", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const header = document.createElement("div");
+		const content = document.createElement("div");
+		const options = document.createElement("div");
+
+		popper.dataset.monsterPreferredWidth = "240";
+		popper.dataset.monsterWidthBehavior = "preferred";
+		popper.style.maxWidth = "600px";
+		content.setAttribute("part", "content");
+		options.style.overflowY = "auto";
+
+		Object.defineProperty(content, "scrollWidth", {
+			configurable: true,
+			value: 620,
+		});
+		Object.defineProperty(options, "scrollWidth", {
+			configurable: true,
+			value: 620,
+		});
+
+		header.getBoundingClientRect = () => {
+			return {
+				width: 240,
+				height: 24,
+				top: 0,
+				left: 0,
+				right: 240,
+				bottom: 24,
+				x: 0,
+				y: 0,
+			};
+		};
+		content.getBoundingClientRect = () => {
+			return {
+				width: 220,
+				height: 120,
+				top: 0,
+				left: 0,
+				right: 220,
+				bottom: 120,
+				x: 0,
+				y: 0,
+			};
+		};
+		popper.getBoundingClientRect = () => {
+			return {
+				width: 240,
+				height: 160,
+				top: 0,
+				left: 0,
+				right: 240,
+				bottom: 160,
+				x: 0,
+				y: 0,
+			};
+		};
+
+		content.appendChild(options);
+		popper.appendChild(header);
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 600,
+			availableHeight: 200,
+		});
+
+		expect(popper.style.width).to.equal("240px");
+		expect(popper.style.minWidth).to.equal("240px");
+	});
 });

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

@@ -284,7 +284,8 @@ describe('Select', function () {
                     shadowRoot.querySelector('[data-monster-role=container]').click();
                     setTimeout(() => {
                         try {
-                            expect(popper.style.minWidth).to.equal('');
+                            expect(popper.style.minWidth).to.equal('240px');
+                            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
                             expect(popper.dataset.monsterPreferredWidth).to.equal('240');
                             done();
                         } catch (e) {

package/test/cases/components/navigation/table-of-content.mjs

@@ -0,0 +1,115 @@
+'use strict';
+
+import * as chai from 'chai';
+import { getDocument } from "../../../../source/dom/util.mjs";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+describe('TableOfContent', function () {
+	this.timeout(10000);
+
+	let document;
+
+	before(async function () {
+		await initJSDOM({});
+		globalThis.IntersectionObserver = class {
+			observe() {}
+			disconnect() {}
+			unobserve() {}
+		};
+		globalThis.HTMLHeadingElement ??= globalThis.HTMLElement;
+		await import("../../../../source/components/navigation/table-of-content.mjs");
+		document = getDocument();
+	});
+
+	beforeEach(() => {
+		let mocks = document.getElementById('mocks');
+		mocks.innerHTML = '<div id="target"></div>';
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById('mocks');
+		mocks.innerHTML = '';
+	});
+
+	it('should bind to the first actually scrollable parent', function (done) {
+		const target = document.getElementById('target');
+		const outerScroller = document.createElement('div');
+		const innerWrapper = document.createElement('div');
+		const tableOfContent = document.createElement('monster-table-of-content');
+		const heading = document.createElement('h2');
+		const paragraph = document.createElement('p');
+
+		heading.textContent = 'Introduction';
+		paragraph.textContent = 'Content';
+		tableOfContent.appendChild(heading);
+		tableOfContent.appendChild(paragraph);
+
+		Object.defineProperties(outerScroller, {
+			clientHeight: { configurable: true, value: 200 },
+			scrollHeight: { configurable: true, value: 600 },
+			clientWidth: { configurable: true, value: 300 },
+			scrollWidth: { configurable: true, value: 300 },
+		});
+
+		Object.defineProperties(innerWrapper, {
+			clientHeight: { configurable: true, value: 400 },
+			scrollHeight: { configurable: true, value: 400 },
+			clientWidth: { configurable: true, value: 300 },
+			scrollWidth: { configurable: true, value: 300 },
+		});
+
+		outerScroller.style.overflowY = 'auto';
+		innerWrapper.style.overflowY = 'auto';
+
+		outerScroller.getBoundingClientRect = () => ({
+			top: 0,
+			bottom: 200,
+			left: 0,
+			right: 300,
+			width: 300,
+			height: 200,
+			x: 0,
+			y: 0,
+		});
+
+		tableOfContent.getBoundingClientRect = () => ({
+			top: outerScroller.scrollTop ? -20 : 100,
+			bottom: outerScroller.scrollTop ? 80 : 200,
+			left: 0,
+			right: 300,
+			width: 300,
+			height: 100,
+			x: 0,
+			y: outerScroller.scrollTop ? -20 : 100,
+		});
+
+		innerWrapper.appendChild(tableOfContent);
+		outerScroller.appendChild(innerWrapper);
+		target.appendChild(outerScroller);
+
+		setTimeout(() => {
+			try {
+				const navigation = tableOfContent.shadowRoot.querySelector('.navigation');
+				expect(navigation.style.top).to.equal('50px');
+
+				outerScroller.scrollTop = 120;
+				outerScroller.dispatchEvent(new window.Event('scroll'));
+
+				setTimeout(() => {
+					try {
+						expect(navigation.style.top).to.equal('170px');
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 20);
+			} catch (error) {
+				done(error);
+			}
+		}, 30);
+	});
+});