@schukai/monster 4.129.7 → 4.129.8

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.129.7"}
+{"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.129.8"}

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

@@ -28,6 +28,7 @@ import { Processing } from "../../../util/processing.mjs";
 
 export {
 	closePositionedPopper,
+	resolveClippingBoundaryElement,
 	isPositionedPopperOpen,
 	openPositionedPopper,
 	positionPopper,
@@ -43,7 +44,7 @@ const autoUpdateCleanupMap = new WeakMap();
  * @return {Promise|*}
  */
 function positionPopper(controlElement, popperElement, options) {
-	const config = normalizePopperConfig(options);
+	const config = normalizePopperConfig(options, controlElement, popperElement);
 
 	return new Processing(() => {
 		enableFloatingPositioning(controlElement, popperElement, config);
@@ -51,7 +52,7 @@ function positionPopper(controlElement, popperElement, options) {
 }
 
 function openPositionedPopper(controlElement, popperElement, options) {
-	const config = normalizePopperConfig(options);
+	const config = normalizePopperConfig(options, controlElement, popperElement);
 
 	stopAutoUpdate(popperElement);
 	popperElement.style.display = "block";
@@ -115,7 +116,7 @@ function isPositionedPopperOpen(popperElement) {
 	return popperElement.style.display === "block";
 }
 
-function normalizePopperConfig(options) {
+function normalizePopperConfig(options, controlElement, popperElement) {
 	const config = Object.assign(
 		{},
 		{
@@ -126,13 +127,28 @@ function normalizePopperConfig(options) {
 		options,
 	);
 
+	config.boundaryElement = resolveClippingBoundaryElement(
+		controlElement,
+		popperElement,
+	);
+	config.detectOverflowOptions = buildDetectOverflowOptions(
+		config.boundaryElement,
+	);
 	config.middleware = normalizeMiddleware(config);
 	config.middlewareTokens = config.middleware.filter((line) => isString(line));
 	config.floatingMiddleware = buildFloatingMiddleware(
 		config.middleware,
 		config.placement,
+		config.detectOverflowOptions,
+		popperElement,
 	);
 
+	if (!config.middlewareTokens.includes("size")) {
+		config.floatingMiddleware.push(
+			createAdaptiveSizeMiddleware(config.detectOverflowOptions, popperElement),
+		);
+	}
+
 	return config;
 }
 
@@ -149,7 +165,12 @@ function normalizeMiddleware(config) {
 	return [];
 }
 
-function buildFloatingMiddleware(middleware, placement) {
+function buildFloatingMiddleware(
+	middleware,
+	placement,
+	detectOverflowOptions,
+	popperElement,
+) {
 	const result = [...middleware];
 
 	for (const key in result) {
@@ -169,10 +190,10 @@ function buildFloatingMiddleware(middleware, placement) {
 
 		switch (fn) {
 			case "flip":
-				result[key] = flip();
+				result[key] = flip(detectOverflowOptions);
 				break;
 			case "shift":
-				result[key] = shift();
+				result[key] = shift(detectOverflowOptions);
 				break;
 			case "autoPlacement":
 				let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
@@ -192,31 +213,28 @@ function buildFloatingMiddleware(middleware, placement) {
 				}
 				defaultAllowedPlacements.unshift(placement);
 
-				result[key] = autoPlacement({
-					crossAxis: true,
-					autoAlignment: true,
-					allowedPlacements: defaultAllowedPlacements,
-				});
+				result[key] = autoPlacement(
+					Object.assign({}, detectOverflowOptions, {
+						crossAxis: true,
+						autoAlignment: true,
+						allowedPlacements: defaultAllowedPlacements,
+					}),
+				);
 				break;
 			case "arrow":
 				result[key] = null;
 				break;
 			case "size":
-				result[key] = size({
-					apply({ availableWidth, availableHeight, elements }) {
-						Object.assign(elements.floating.style, {
-							boxSizing: "border-box",
-							maxWidth: `${availableWidth}px`,
-							maxHeight: `${availableHeight}px`,
-						});
-					},
-				});
+				result[key] = createAdaptiveSizeMiddleware(
+					detectOverflowOptions,
+					popperElement,
+				);
 				break;
 			case "offset":
 				result[key] = offset(parseInt(kv?.shift()) || 10);
 				break;
 			case "hide":
-				result[key] = hide();
+				result[key] = hide(detectOverflowOptions);
 				break;
 			default:
 				throw new Error(`Unknown function: ${fn}`);
@@ -226,6 +244,135 @@ function buildFloatingMiddleware(middleware, placement) {
 	return result.filter(Boolean);
 }
 
+function createAdaptiveSizeMiddleware(detectOverflowOptions, popperElement) {
+	return size(
+		Object.assign({}, detectOverflowOptions, {
+			apply({ availableWidth, availableHeight, elements }) {
+				const floatingElement = elements?.floating || popperElement;
+				if (!(floatingElement instanceof HTMLElement)) {
+					return;
+				}
+
+				const maxWidth = clampAvailableDimension(
+					availableWidth,
+					readMaxDimension(floatingElement, "maxWidth"),
+				);
+				const maxHeight = clampAvailableDimension(
+					availableHeight,
+					readMaxDimension(floatingElement, "maxHeight"),
+				);
+				const nextStyle = {
+					boxSizing: "border-box",
+				};
+
+				if (Number.isFinite(maxWidth) && maxWidth > 0) {
+					nextStyle.maxWidth = `${maxWidth}px`;
+				}
+
+				if (Number.isFinite(maxHeight) && maxHeight > 0) {
+					nextStyle.maxHeight = `${maxHeight}px`;
+				}
+
+				Object.assign(floatingElement.style, nextStyle);
+			},
+		}),
+	);
+}
+
+function buildDetectOverflowOptions(boundaryElement) {
+	const result = {
+		rootBoundary: "viewport",
+		padding: 0,
+	};
+
+	if (boundaryElement instanceof HTMLElement) {
+		result.boundary = boundaryElement;
+	}
+
+	return result;
+}
+
+function resolveClippingBoundaryElement(...elements) {
+	for (const element of elements) {
+		const clippingBoundary = findNearestClippingContainer(element);
+		if (clippingBoundary instanceof HTMLElement) {
+			return clippingBoundary;
+		}
+	}
+
+	return null;
+}
+
+function findNearestClippingContainer(element) {
+	let current = getComposedParent(element);
+
+	while (current) {
+		if (
+			current instanceof HTMLElement &&
+			isClippingContainer(getComputedStyle(current))
+		) {
+			return current;
+		}
+
+		current = getComposedParent(current);
+	}
+
+	return null;
+}
+
+function getComposedParent(node) {
+	if (!node) {
+		return null;
+	}
+
+	if (node instanceof ShadowRoot) {
+		return node.host || null;
+	}
+
+	if (node.parentElement instanceof HTMLElement) {
+		return node.parentElement;
+	}
+
+	const rootNode = node.getRootNode?.();
+	if (rootNode instanceof ShadowRoot) {
+		return rootNode.host || null;
+	}
+
+	return node.parentNode || null;
+}
+
+function isClippingContainer(style) {
+	if (!style) {
+		return false;
+	}
+
+	return [style.overflow, style.overflowX, style.overflowY].some((value) => {
+		return ["hidden", "auto", "scroll", "clip"].includes(value);
+	});
+}
+
+function readMaxDimension(element, property) {
+	const rawValue = getComputedStyle(element)?.[property];
+	if (!rawValue || rawValue === "none") {
+		return Infinity;
+	}
+
+	const value = Number.parseFloat(rawValue);
+	return Number.isFinite(value) ? value : Infinity;
+}
+
+function clampAvailableDimension(available, configuredMax) {
+	if (!Number.isFinite(available) || available <= 0) {
+		return null;
+	}
+
+	if (!Number.isFinite(configuredMax)) {
+		return available;
+	}
+
+	return Math.min(available, configuredMax);
+}
+
 function startAutoUpdate(controlElement, popperElement, callback) {
 	stopAutoUpdate(popperElement);
 	autoUpdateCleanupMap.set(

package/test/cases/components/form/context-help.mjs

@@ -0,0 +1,71 @@
+import { getGlobal } from "../../../../source/types/global.mjs";
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let ContextHelp;
+let resolveClippingBoundaryElement;
+
+describe("ContextHelp", function () {
+	before(function (done) {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill").catch((e) => done(e));
+
+			if (!global.ResizeObserver) {
+				global.ResizeObserver = ResizeObserverMock;
+			}
+
+			Promise.all([
+				import("../../../../source/components/form/context-help.mjs"),
+				import("../../../../source/components/form/util/floating-ui.mjs"),
+			])
+				.then(([contextHelpModule, floatingUiModule]) => {
+					ContextHelp = contextHelpModule.ContextHelp;
+					resolveClippingBoundaryElement =
+						floatingUiModule.resolveClippingBoundaryElement;
+					done();
+				})
+				.catch((e) => done(e));
+		});
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should resolve the nearest clipping parent across the shadow boundary", function (done) {
+		let mocks = document.getElementById("mocks");
+		const outer = document.createElement("div");
+		const wrapper = document.createElement("div");
+		const help = document.createElement("monster-context-help");
+
+		outer.style.overflow = "visible";
+		wrapper.style.overflow = "hidden";
+		wrapper.appendChild(help);
+		outer.appendChild(wrapper);
+		mocks.appendChild(outer);
+		help.innerHTML = "<p>Inline help</p>";
+
+		setTimeout(() => {
+			try {
+				expect(help).to.be.instanceof(ContextHelp);
+
+				const popper = help.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(resolveClippingBoundaryElement(help, popper)).to.equal(wrapper);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+});

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

@@ -254,87 +254,41 @@ describe('Select', function () {
 
             const pagination = () => select.shadowRoot.querySelector('[data-monster-role=pagination]');
 
-            const triggerFilter = (value) => {
-                const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter]');
-                filterInput.value = value;
-                filterInput.dispatchEvent(new InputEvent('input', {
-                    bubbles: true,
-                    composed: true,
-                    data: value
-                }));
-                filterInput.dispatchEvent(new KeyboardEvent('keydown', {
-                    code: 'KeyA',
-                    key: 'a',
-                    bubbles: true,
-                    composed: true
-                }));
-            };
-
-            const startedAt = Date.now();
-            const pollLoadedState = () => {
-                try {
-                    const options = select.getOption('options');
-                    const pager = pagination();
-
-                    if (
-                        options?.length !== 1 ||
-                        !pager ||
-                        pager.getOption('currentPage') !== 1 ||
-                        pager.getOption('pages') !== 2 ||
-                        pager.getOption('objectsPerPage') !== 1
-                    ) {
-                        if (Date.now() - startedAt < 3000) {
-                            return setTimeout(pollLoadedState, 50);
-                        }
-                    }
-
-                    expect(options.length).to.equal(1);
-                    expect(pager.getOption('currentPage')).to.equal(1);
-                    expect(pager.getOption('pages')).to.equal(2);
-                    expect(pager.getOption('objectsPerPage')).to.equal(1);
-
-                    triggerFilter('b');
-                    setTimeout(pollErrorState, 50);
-                } catch (e) {
-                    done(e);
-                }
-            };
-
-            const pollErrorState = () => {
-                try {
-                    const optionsAfterError = select.getOption('options');
-                    const pager = pagination();
-
-                    if (
-                        optionsAfterError?.length !== 0 ||
-                        !pager ||
-                        pager.getOption('currentPage') !== null ||
-                        pager.getOption('pages') !== null ||
-                        pager.getOption('objectsPerPage') !== null ||
-                        select.getOption('total') !== null ||
-                        select.getOption('messages.total') !== ""
-                    ) {
-                        if (Date.now() - startedAt < 4500) {
-                            return setTimeout(pollErrorState, 50);
-                        }
-                    }
-
-                    expect(optionsAfterError.length).to.equal(0);
-                    expect(pager.getOption('currentPage')).to.equal(null);
-                    expect(pager.getOption('pages')).to.equal(null);
-                    expect(pager.getOption('objectsPerPage')).to.equal(null);
-                    expect(select.getOption('total')).to.equal(null);
-                    expect(select.getOption('messages.total')).to.equal("");
-                } catch (e) {
-                    return done(e);
-                }
-
-                done();
+            const fetchRemotePage = (value) => {
+                return select.fetch(`https://example.com/items?filter=${encodeURIComponent(value)}&page=1`);
             };
 
             setTimeout(() => {
-                triggerFilter('a');
-                setTimeout(pollLoadedState, 50);
+                fetchRemotePage('a')
+                    .then(() => {
+                        const options = select.getOption('options');
+                        const pager = pagination();
+
+                        expect(options.length).to.equal(1);
+                        expect(pager.getOption('currentPage')).to.equal(1);
+                        expect(pager.getOption('pages')).to.equal(2);
+                        expect(pager.getOption('objectsPerPage')).to.equal(1);
+
+                        return fetchRemotePage('b')
+                            .then(() => Promise.reject(new Error('Expected remote fetch to fail')))
+                            .catch((e) => {
+                                if (e.message === 'Expected remote fetch to fail') {
+                                    throw e;
+                                }
+
+                                const optionsAfterError = select.getOption('options');
+                                const pager = pagination();
+
+                                expect(optionsAfterError.length).to.equal(0);
+                                expect(pager.getOption('currentPage')).to.equal(null);
+                                expect(pager.getOption('pages')).to.equal(null);
+                                expect(pager.getOption('objectsPerPage')).to.equal(null);
+                                expect(select.getOption('total')).to.equal(null);
+                                expect(select.getOption('messages.total')).to.equal("");
+                            });
+                    })
+                    .then(() => done())
+                    .catch((e) => done(e));
             }, 50);
         });
     });