@schukai/monster 4.129.6 → 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.6"}
+{"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/confirm-button.mjs

@@ -98,6 +98,7 @@ class ConfirmButton extends PopperButton {
 			},
 		});
 
+		obj["popper"]["strategy"] = "fixed";
 		obj["classes"]["confirmButton"] = "monster-button-primary";
 		obj["classes"]["cancelButton"] = "monster-button-secondary";
 		obj["actions"]["cancel"] = (e) => {

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,15 +52,15 @@ 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";
+	popperElement.style.position = config.strategy;
 	popperElement.style.removeProperty("transform");
 
 	// Keep the call signature stable even though only Floating UI is used now.
 	void controlElement;
-	void config;
 }
 
 function enableFloatingPositioning(controlElement, popperElement, config) {
@@ -93,6 +94,7 @@ function syncFloatingPopover(controlElement, popperElement, config) {
 		Object.assign(popperElement.style, {
 			top: "0",
 			left: "0",
+			position: config.strategy,
 			transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
 		});
 
@@ -106,6 +108,7 @@ function closePositionedPopper(popperElement) {
 	stopAutoUpdate(popperElement);
 	popperElement.style.display = "none";
 	popperElement.style.removeProperty("visibility");
+	popperElement.style.removeProperty("position");
 	popperElement.style.removeProperty("transform");
 }
 
@@ -113,23 +116,39 @@ function isPositionedPopperOpen(popperElement) {
 	return popperElement.style.display === "block";
 }
 
-function normalizePopperConfig(options) {
+function normalizePopperConfig(options, controlElement, popperElement) {
 	const config = Object.assign(
 		{},
 		{
 			placement: "top",
 			engine: "floating",
+			strategy: "absolute",
 		},
 		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;
 }
 
@@ -146,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) {
@@ -166,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"];
@@ -189,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}`);
@@ -223,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/confirm-button.mjs

@@ -15,10 +15,11 @@ let html1, options, html2, ConfirmButton;
 
 describe('ConfirmButton', function () {
 
-    before(function (done) {
+    before(async function () {
+
+        await initJSDOM();
+        await import("element-internals-polyfill");
 
-        import("element-internals-polyfill").catch(e => done(e));    
-        
         if(!global.ResizeObserver) {
             global.ResizeObserver = ResizeObserverMock;
         }
@@ -43,16 +44,8 @@ describe('ConfirmButton', function () {
     </div>
 `
 
-
-        initJSDOM().then(() => {
-
-            import("../../../../source/components/form/confirm-button.mjs").then((m) => {
-                ConfirmButton = m['ConfirmButton'];
-                done()
-            }).catch(e => done(e))
-
-
-        });
+        const m = await import("../../../../source/components/form/confirm-button.mjs");
+        ConfirmButton = m['ConfirmButton'];
     })
 
     describe('new ConfirmButton', function () {
@@ -120,8 +113,31 @@ describe('ConfirmButton', function () {
             }, 0)
 
 
+        });
+
+        it('should use fixed positioning by default', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const button = document.createElement('monster-confirm-button');
+            mocks.appendChild(button);
+
+            setTimeout(() => {
+                try {
+                    button.showDialog();
+
+                    const popper = button.shadowRoot.querySelector('[data-monster-role="popper"]');
+                    expect(popper).to.exist;
+                    expect(popper.style.position).to.equal('fixed');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+
+
         });
     });
 
 
-});
+});

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/popper-button.mjs

@@ -86,4 +86,25 @@ describe("PopperButton", function () {
 			}
 		}, 0);
 	});
+
+	it("should use absolute positioning by default", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				button.showDialog();
+
+				const popper = button.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(popper.style.position).to.equal("absolute");
+				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);
         });
     });

package/test/cases/dom/updater.mjs

@@ -289,18 +289,19 @@ describe("DOM", function () {
                   firedDisconnected: 0,
                 },
               };
+              static pendingCallbacks = [];
 
               connectedCallback() {
                 const mode = this.getAttribute("data-mode") || "replace";
                 MonsterTestRaceItem.stats[mode].connected++;
 
-                setTimeout(() => {
+                MonsterTestRaceItem.pendingCallbacks.push(() => {
                   if (this.isConnected) {
                     MonsterTestRaceItem.stats[mode].firedConnected++;
                   } else {
                     MonsterTestRaceItem.stats[mode].firedDisconnected++;
                   }
-                }, 10);
+                });
               }
 
               disconnectedCallback() {
@@ -308,6 +309,14 @@ describe("DOM", function () {
                 MonsterTestRaceItem.stats[mode].disconnected++;
               }
 
+              static flushPendingCallbacks() {
+                const pending = [...MonsterTestRaceItem.pendingCallbacks];
+                MonsterTestRaceItem.pendingCallbacks = [];
+                for (const callback of pending) {
+                  callback();
+                }
+              }
+
               static resetStats() {
                 MonsterTestRaceItem.stats = {
                   replace: {
@@ -323,6 +332,7 @@ describe("DOM", function () {
                     firedDisconnected: 0,
                   },
                 };
+                MonsterTestRaceItem.pendingCallbacks = [];
               }
             }
 
@@ -671,8 +681,9 @@ describe("DOM", function () {
 
                 setTimeout(() => {
                   try {
-                    const raceStats =
-                      customElements.get("monster-test-race-item").stats;
+                    const raceItem = customElements.get("monster-test-race-item");
+                    raceItem.flushPendingCallbacks();
+                    const raceStats = raceItem.stats;
                     expect(raceStats.patch.firedDisconnected).to.equal(0);
                     expect(raceStats.replace.firedDisconnected).to.be.greaterThan(
                       0,