@schukai/monster 4.136.3 → 4.136.4

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.3"}
+{"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.4"}

package/source/components/form/select.mjs

@@ -1765,55 +1765,20 @@ function getTranslations() {
  */
 function lookupSelection() {
 	const self = this;
+	const IntersectionObserverImplementation =
+		getGlobal().IntersectionObserver;
 
-	const observer = new IntersectionObserver(
+	if (!(IntersectionObserverImplementation instanceof Function)) {
+		runSelectionLookupWhenVisible(self);
+		return;
+	}
+
+	const observer = new IntersectionObserverImplementation(
 		(entries, obs) => {
 			for (const entry of entries) {
 				if (entry.isIntersecting) {
 					obs.disconnect();
-
-					setTimeout(() => {
-						const selection = self.getOption("selection");
-						if (
-							selection.length === 0 ||
-							self[isLoadingSymbol] ||
-							self[lazyLoadDoneSymbol]
-						) {
-							return;
-						}
-
-						let url = self.getOption("lookup.url") || self.getOption("url");
-						self[cleanupOptionsListSymbol] = false;
-
-						if (self.getOption("lookup.grouping") === true) {
-							const values = selection
-								.map((s) => s?.["value"])
-								.filter(
-									(value) => isEmptyLookupValue.call(self, value) === false,
-								);
-							if (values.length === 0) {
-								return;
-							}
-							filterFromRemoteByValue
-								.call(self, url, { filter: values.join(",") })
-								.catch((e) => {
-									addErrorAttribute(self, e);
-								});
-							return;
-						}
-
-						for (const s of selection) {
-							const value = s?.["value"];
-							if (isEmptyLookupValue.call(self, value)) {
-								continue;
-							}
-							filterFromRemoteByValue
-								.call(self, url, { filter: value })
-								.catch((e) => {
-									addErrorAttribute(self, e);
-								});
-						}
-					}, 100);
+					runSelectionLookupWhenVisible(self);
 				}
 			}
 		},
@@ -1823,6 +1788,49 @@ function lookupSelection() {
 	observer.observe(self);
 }
 
+function runSelectionLookupWhenVisible(self) {
+	setTimeout(() => {
+		const selection = self.getOption("selection");
+		if (
+			selection.length === 0 ||
+			self[isLoadingSymbol] ||
+			self[lazyLoadDoneSymbol]
+		) {
+			return;
+		}
+
+		let url = self.getOption("lookup.url") || self.getOption("url");
+		self[cleanupOptionsListSymbol] = false;
+
+		if (self.getOption("lookup.grouping") === true) {
+			const values = selection
+				.map((s) => s?.["value"])
+				.filter((value) => isEmptyLookupValue.call(self, value) === false);
+			if (values.length === 0) {
+				return;
+			}
+			filterFromRemoteByValue
+				.call(self, url, { filter: values.join(",") })
+				.catch((e) => {
+					addErrorAttribute(self, e);
+				});
+			return;
+		}
+
+		for (const s of selection) {
+			const value = s?.["value"];
+			if (isEmptyLookupValue.call(self, value)) {
+				continue;
+			}
+			filterFromRemoteByValue
+				.call(self, url, { filter: value })
+				.catch((e) => {
+					addErrorAttribute(self, e);
+				});
+		}
+	}, 100);
+}
+
 /**
  * @private
  * @param {*} value

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

@@ -467,8 +467,12 @@ function syncNestedScrollContainerHeight(contentElement, contentMaxHeight) {
 	}
 
 	if (Number.isFinite(contentMaxHeight) && contentMaxHeight > 0) {
-		nestedScrollableElement.style.height = `${contentMaxHeight}px`;
-		nestedScrollableElement.style.maxHeight = `${contentMaxHeight}px`;
+		const nextNestedHeight = resolveNestedScrollContainerHeight(
+			nestedScrollableElement,
+			contentMaxHeight,
+		);
+		nestedScrollableElement.style.height = `${nextNestedHeight}px`;
+		nestedScrollableElement.style.maxHeight = `${nextNestedHeight}px`;
 		return;
 	}
 
@@ -476,6 +480,41 @@ function syncNestedScrollContainerHeight(contentElement, contentMaxHeight) {
 	nestedScrollableElement.style.maxHeight = "";
 }
 
+function resolveNestedScrollContainerHeight(
+	nestedScrollableElement,
+	contentMaxHeight,
+) {
+	const declaredHeight = readDeclaredDimension(nestedScrollableElement, "height");
+	const declaredMaxHeight = readDeclaredDimension(
+		nestedScrollableElement,
+		"maxHeight",
+	);
+	const scrollHeight = nestedScrollableElement.scrollHeight;
+	const preferredHeightCandidates = [
+		declaredHeight,
+		declaredMaxHeight,
+		scrollHeight,
+	];
+	const preferredHeight = preferredHeightCandidates.find((value) => {
+		return Number.isFinite(value) && value > 0;
+	});
+
+	if (Number.isFinite(preferredHeight) && preferredHeight > 0) {
+		return Math.min(contentMaxHeight, preferredHeight);
+	}
+
+	return contentMaxHeight;
+}
+
+function readDeclaredDimension(element, property) {
+	if (!(element instanceof HTMLElement)) {
+		return NaN;
+	}
+
+	const value = Number.parseFloat(element.style?.[property] || "");
+	return Number.isFinite(value) ? value : NaN;
+}
+
 function syncPreferredFloatingWidth(floatingElement, maxWidth) {
 	const preferredWidth = Number.parseFloat(
 		floatingElement.dataset.monsterPreferredWidth || "",

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

@@ -207,4 +207,34 @@ describe("form floating-ui boundary resolution", function () {
 
 		expect(content.style.maxHeight).to.equal("26px");
 	});
+
+	it("should respect a smaller nested scroll container height", 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.style.overflowY = "hidden";
+		options.style.overflowY = "auto";
+		options.style.height = "72px";
+		options.style.maxHeight = "72px";
+		Object.defineProperty(options, "scrollHeight", {
+			configurable: true,
+			value: 72,
+		});
+
+		content.appendChild(options);
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 180,
+		});
+
+		expect(content.style.maxHeight).to.equal("180px");
+		expect(options.style.height).to.equal("72px");
+		expect(options.style.maxHeight).to.equal("72px");
+	});
 });

package/test/cases/components/form/message-state-button.mjs

@@ -261,44 +261,39 @@ describe("MessageStateButton", function () {
 			}, 0);
 		});
 
-		it("should resolve nested select message content to horizontal clipping only", function (done) {
+		it("should resolve nested select message content to horizontal clipping only", async function () {
 			let mocks = document.getElementById("mocks");
 			const button = document.createElement("monster-message-state-button");
 			button.innerHTML = "Save";
 			mocks.appendChild(button);
 
-			setTimeout(() => {
-				try {
-					const wrapper = document.createElement("div");
-					wrapper.appendChild(document.createElement("monster-select"));
-					button.setMessage(wrapper);
-					button.showMessage();
+			const wrapper = document.createElement("div");
+			wrapper.appendChild(document.createElement("monster-select"));
+			button.setMessage(wrapper);
+			button.showMessage();
+
+			await waitForCondition(() => {
+				const content = button.shadowRoot?.querySelector('[part="content"]');
+				return (
+					content?.getAttribute("data-monster-overflow-mode") === "horizontal"
+				);
+			});
 
-					setTimeout(() => {
-						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
-							const message = button.shadowRoot.querySelector(
-								'[data-monster-role="message"]',
-							);
-							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"horizontal",
-							);
-							expect(
-								content.getAttribute("data-monster-message-layout"),
-							).to.equal("overlay");
-							expect(
-								message.getAttribute("data-monster-message-layout"),
-							).to.equal("overlay");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
-				} catch (e) {
-					done(e);
-				}
-			}, 0);
+			const content = button.shadowRoot.querySelector('[part="content"]');
+			const message = button.shadowRoot.querySelector(
+				'[data-monster-role="message"]',
+			);
+
+			expect(content).to.exist;
+			expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+				"horizontal",
+			);
+			expect(content.getAttribute("data-monster-message-layout")).to.equal(
+				"overlay",
+			);
+			expect(message.getAttribute("data-monster-message-layout")).to.equal(
+				"overlay",
+			);
 		});
 
 		it("should resolve wide plain content to the wide layout", function (done) {
@@ -489,3 +484,30 @@ describe("MessageStateButton", function () {
 		});
 	});
 });
+
+function waitForCondition(check, { timeout = 4000, interval = 25 } = {}) {
+	return new Promise((resolve, reject) => {
+		const start = Date.now();
+
+		const poll = () => {
+			try {
+				if (check()) {
+					resolve();
+					return;
+				}
+			} catch (error) {
+				reject(error);
+				return;
+			}
+
+			if (Date.now() - start >= timeout) {
+				reject(new Error("Timed out while waiting for test condition."));
+				return;
+			}
+
+			setTimeout(poll, interval);
+		};
+
+		poll();
+	});
+}

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

@@ -549,6 +549,46 @@ describe('Select', function () {
             }, 50);
         });
 
+        it('should not throw when IntersectionObserver is unavailable', function (done) {
+            this.timeout(2000);
+
+            let mocks = document.getElementById('mocks');
+            const savedIntersectionObserver = global.IntersectionObserver;
+            global.IntersectionObserver = undefined;
+            window.IntersectionObserver = undefined;
+            const failures = [];
+            const onError = (event) => {
+                failures.push(event?.error || event);
+            };
+            window.addEventListener('error', onError);
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            select.setOption('selection', [{value: 'alpha'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    expect(failures).to.have.length(0);
+                } catch (e) {
+                    return done(e);
+                } finally {
+                    window.removeEventListener('error', onError);
+                    global.IntersectionObserver = savedIntersectionObserver;
+                    window.IntersectionObserver = savedIntersectionObserver;
+                }
+
+                done();
+            }, 250);
+        });
+
     });
 
 

package/test/util/intersection-mock.mjs

@@ -14,6 +14,7 @@ export function setupIntersectionObserverMock(
     } = {}) {
 
     const savedImplementation = window.IntersectionObserver;
+    const savedGlobalImplementation = global.IntersectionObserver;
 
     let lastObject;
 
@@ -61,9 +62,10 @@ export function setupIntersectionObserverMock(
     return {
         restore: function () {
             window.IntersectionObserver = savedImplementation;
+            global.IntersectionObserver = savedGlobalImplementation;
         },
         getInstance: function () {
             return lastObject;
         }
     }
-}
+}