@schukai/monster 4.136.19 → 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.19"}
+{"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/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) {