@schukai/monster 4.136.28 → 4.136.30

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.28"}
+{"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.30"}

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

@@ -42,6 +42,7 @@ const floatingResizeObserverMap = new WeakMap();
 const floatingSyncCycleMap = new WeakMap();
 const floatingAppearanceFrameMap = new WeakMap();
 const floatingAppearanceTimeoutMap = new WeakMap();
+const adaptiveScrollHeightDatasetKey = "monsterAdaptiveScrollHeight";
 
 /**
  * @private
@@ -417,13 +418,16 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 	if (overflowMode === "horizontal" || overflowMode === "both") {
 		// Overlay-aware modes keep the parent wrapper sized to the real inline content.
 		// Nested poppers may still escape, but they must not inflate the outer popper height.
-		applyOverlayAwareContentHeight(
+		const contentHeightConstrained = applyOverlayAwareContentHeight(
 			contentElement,
 			preferredContentHeight,
 			nextContentMaxHeight,
 			minimumReadableHeight,
 		);
-		syncNestedScrollContainerHeight(contentElement, nextContentMaxHeight);
+		syncNestedScrollContainerHeight(
+			contentElement,
+			contentHeightConstrained ? nextContentMaxHeight : null,
+		);
 		return;
 	}
 
@@ -462,14 +466,25 @@ function applyOverlayAwareContentHeight(
 			: "visible";
 	contentElement.style.overflowY = isConstrained ? "auto" : "visible";
 
-	if (Number.isFinite(constrainedHeight) && constrainedHeight > 0) {
+	if (
+		isConstrained &&
+		Number.isFinite(constrainedHeight) &&
+		constrainedHeight > 0
+	) {
 		contentElement.style.height = `${constrainedHeight}px`;
 		contentElement.style.maxHeight = `${constrainedHeight}px`;
-		return;
+		return true;
 	}
 
+	// overflow-x:auto computes overflow-y to auto in browsers, so an unconstrained
+	// horizontal wrapper must keep its natural height to avoid a spurious scrollbar.
 	contentElement.style.removeProperty("height");
-	contentElement.style.removeProperty("maxHeight");
+	if (Number.isFinite(contentMaxHeight) && contentMaxHeight > 0) {
+		contentElement.style.maxHeight = `${contentMaxHeight}px`;
+	} else {
+		contentElement.style.removeProperty("maxHeight");
+	}
+	return false;
 }
 
 function getFloatingContentElement(floatingElement) {
@@ -591,11 +606,19 @@ function syncNestedScrollContainerHeight(contentElement, contentMaxHeight) {
 		);
 		nestedScrollableElement.style.height = `${nextNestedHeight}px`;
 		nestedScrollableElement.style.maxHeight = `${nextNestedHeight}px`;
+		nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey] = "true";
+		return;
+	}
+
+	if (
+		nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey] !== "true"
+	) {
 		return;
 	}
 
 	nestedScrollableElement.style.height = "";
 	nestedScrollableElement.style.maxHeight = "";
+	delete nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey];
 }
 
 function resolveNestedScrollContainerHeight(
@@ -723,6 +746,7 @@ function resetAdaptiveFloatingElementSize(floatingElement) {
 
 	nestedScrollableElement.style.removeProperty("height");
 	nestedScrollableElement.style.removeProperty("maxHeight");
+	delete nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey];
 }
 
 function runFloatingUpdateHook(popperElement) {

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

@@ -334,5 +334,68 @@ describe("form floating-ui boundary resolution", function () {
 
 		expect(content.style.overflowX).to.equal("auto");
 		expect(content.style.overflowY).to.equal("visible");
+		expect(content.style.height).to.equal("");
+		expect(content.style.maxHeight).to.equal("200px");
+	});
+
+	it("should preserve declared nested scroll height when horizontal overlay content fits", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const content = document.createElement("div");
+		const options = document.createElement("div");
+
+		content.setAttribute("part", "content");
+		content.setAttribute("data-monster-overflow-mode", "horizontal");
+		options.style.overflowY = "auto";
+		options.style.height = "72px";
+		options.style.maxHeight = "72px";
+
+		Object.defineProperty(content, "scrollHeight", {
+			configurable: true,
+			value: 120,
+		});
+		Object.defineProperty(options, "scrollHeight", {
+			configurable: true,
+			value: 72,
+		});
+
+		content.appendChild(options);
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 240,
+			availableHeight: 200,
+		});
+
+		expect(options.style.height).to.equal("72px");
+		expect(options.style.maxHeight).to.equal("72px");
+	});
+
+	it("should constrain horizontal overlay-aware content height only when it exceeds available height", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const content = document.createElement("div");
+
+		content.setAttribute("part", "content");
+		content.setAttribute("data-monster-overflow-mode", "horizontal");
+
+		Object.defineProperty(content, "scrollHeight", {
+			configurable: true,
+			value: 320,
+		});
+
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 240,
+			availableHeight: 200,
+		});
+
+		expect(content.style.overflowX).to.equal("auto");
+		expect(content.style.overflowY).to.equal("auto");
+		expect(content.style.height).to.equal("200px");
+		expect(content.style.maxHeight).to.equal("200px");
 	});
 });