@schukai/monster 4.136.25 → 4.136.27

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.25"}
+{"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.27"}

package/source/components/form/button-bar.mjs

@@ -359,6 +359,25 @@ function isElementTrulyVisible(element) {
 	);
 }
 
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementSelfHidden(element) {
+	if (!(element instanceof HTMLElement)) {
+		return true;
+	}
+
+	const computedStyle = getComputedStyle(element);
+	return (
+		element.hidden === true ||
+		element.hasAttribute("hidden") ||
+		computedStyle.display === "none" ||
+		computedStyle.visibility === "hidden"
+	);
+}
+
 /**
  * @private
  */
@@ -372,8 +391,10 @@ function initEventHandler() {
 				const target = mutation.target;
 				if (target instanceof HTMLElement) {
 					const ref = target.getAttribute("data-monster-reference");
-					if (ref && !isElementTrulyVisible(target)) {
-						self[dimensionsSymbol].setVia(`data.button.${ref}`, 0);
+					if (ref) {
+						if (!isElementTrulyVisible(target)) {
+							self[dimensionsSymbol].setVia(`data.button.${ref}`, 0);
+						}
 						needsRecalc = true;
 					}
 				}
@@ -596,12 +617,10 @@ function rearrangeButtons() {
 			// In this case, we assume the width is 0.
 			// This can happen for buttons that have never been visible.
 		}
-		const style = getComputedStyle(element);
-
 		buttonEntries.push({
 			element,
 			width: buttonWidth,
-			hidden: style.display === "none",
+			hidden: isElementSelfHidden(element),
 		});
 	}
 
@@ -617,11 +636,7 @@ function rearrangeButtons() {
 
 		for (const entry of buttonEntries) {
 			if (entry.hidden) {
-				if (entry.width > 0) {
-					buttonsToMoveToPopper.push(entry.element);
-				} else {
-					visibleButtonsInMainSlot.push(entry.element);
-				}
+				visibleButtonsInMainSlot.push(entry.element);
 				continue;
 			}
 
@@ -826,7 +841,7 @@ function updateResizeObserverObservation() {
 		if (this[mutationObserverSymbol]) {
 			this[mutationObserverSymbol].observe(node, {
 				attributes: true,
-				attributeFilter: ["style", "class"],
+				attributeFilter: ["style", "class", "hidden"],
 			});
 		}
 	});

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

@@ -456,7 +456,10 @@ function applyOverlayAwareContentHeight(
 		preferredHeight > contentMaxHeight;
 
 	contentElement.style.removeProperty("overflow");
-	contentElement.style.overflowX = "visible";
+	contentElement.style.overflowX =
+		contentElement.dataset.monsterOverflowMode === "horizontal"
+			? "auto"
+			: "visible";
 	contentElement.style.overflowY = isConstrained ? "auto" : "visible";
 
 	if (Number.isFinite(constrainedHeight) && constrainedHeight > 0) {

package/source/components/layout/tabs.mjs

@@ -203,6 +203,9 @@ class Tabs extends CustomElement {
 				standard: [],
 				popper: [],
 			},
+			updater: {
+				batchUpdates: true,
+			},
 			fetch: {
 				redirect: "error",
 				method: "GET",

package/source/components/style/floating-ui.css

@@ -43,7 +43,8 @@ div[data-monster-role="popper"] > [part="content"] {
 div[data-monster-role="popper"]
 	> [part="content"][data-monster-overflow-mode="horizontal"] {
 	clip-path: none;
-	overflow: visible;
+	overflow-x: auto;
+	overflow-y: visible;
 }
 div[data-monster-role="popper"]
 	> [part="content"][data-monster-overflow-mode="visible"] {

package/source/components/style/floating-ui.pcss

@@ -47,7 +47,8 @@ div[data-monster-role=popper] {
     }
 
     & > [part=content][data-monster-overflow-mode=horizontal] {
-        overflow: visible;
+        overflow-x: auto;
+        overflow-y: visible;
         clip-path: none;
     }
 

package/source/components/stylesheet/floating-ui.mjs

@@ -25,7 +25,7 @@ try {
 	FloatingUiStyleSheet.insertRule(
 		`
 @layer floatingui { 
-div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));opacity:1;padding:1.1em;position:absolute;top:0;transition:opacity var(--monster-popper-fade-duration,.14s) var(--monster-popper-fade-timing,cubic-bezier(.2,0,0,1));width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper][data-monster-appearance=opening]{opacity:0}div[data-monster-role=popper][data-monster-appearance=open]{opacity:1}@media (prefers-reduced-motion:reduce){div[data-monster-role=popper]{transition:none}}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1} 
+div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));opacity:1;padding:1.1em;position:absolute;top:0;transition:opacity var(--monster-popper-fade-duration,.14s) var(--monster-popper-fade-timing,cubic-bezier(.2,0,0,1));width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper][data-monster-appearance=opening]{opacity:0}div[data-monster-role=popper][data-monster-appearance=open]{opacity:1}@media (prefers-reduced-motion:reduce){div[data-monster-role=popper]{transition:none}}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow-x:auto;overflow-y:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}
 }`,
 		0,
 	);

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

@@ -310,4 +310,29 @@ describe("form floating-ui boundary resolution", function () {
 		expect(popper.style.width).to.equal("240px");
 		expect(popper.style.minWidth).to.equal("240px");
 	});
+
+	it("should constrain horizontal overlay-aware content on the inline axis", 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: 120,
+		});
+
+		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("visible");
+	});
 });

package/test/cases/components/layout/tabs.mjs

@@ -2,6 +2,7 @@ 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);
@@ -61,6 +62,35 @@ let htmlOverflow = `
 `;
 
 let Tabs;
+let restoreBoundingClientRect = null;
+let restoreResizeObserver = null;
+
+function waitForCondition(check, {timeout = 4000, interval = 10} = {}) {
+	const startedAt = Date.now();
+
+	return new Promise((resolve, reject) => {
+		const tick = () => {
+			try {
+				if (check() === true) {
+					resolve();
+					return;
+				}
+			} catch (e) {
+				reject(e);
+				return;
+			}
+
+			if (Date.now() - startedAt > timeout) {
+				reject(new Error('condition timed out'));
+				return;
+			}
+
+			setTimeout(tick, interval);
+		};
+
+		tick();
+	});
+}
 
 describe('Tabs', function () {
 
@@ -92,6 +122,14 @@ describe('Tabs', function () {
     describe('document.createElement()', function () {
 
         afterEach(() => {
+			if (restoreBoundingClientRect instanceof Function) {
+				restoreBoundingClientRect();
+				restoreBoundingClientRect = null;
+			}
+			if (restoreResizeObserver instanceof Function) {
+				restoreResizeObserver();
+				restoreResizeObserver = null;
+			}
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = "";
         })
@@ -219,10 +257,35 @@ describe('Tabs', function () {
         });
 
 		it('should move overflowing tabs into the popper without losing them', function (done) {
+			this.timeout(5000);
 
             let mocks = document.getElementById('mocks');
+			const OriginalResizeObserver = window.ResizeObserver;
+			const originalGlobalResizeObserver = global.ResizeObserver;
+			class TrackingResizeObserver extends ResizeObserverMock {
+				static instances = [];
+				static callbackCount = 0;
+
+				constructor(callback) {
+					super((entries, observer) => {
+						TrackingResizeObserver.callbackCount++;
+						callback(entries, observer);
+					});
+					TrackingResizeObserver.instances.push(this);
+				}
+			}
+			window.ResizeObserver = TrackingResizeObserver;
+			global.ResizeObserver = TrackingResizeObserver;
+			restoreResizeObserver = () => {
+				window.ResizeObserver = OriginalResizeObserver;
+				global.ResizeObserver = originalGlobalResizeObserver;
+			};
 			const originalGetBoundingClientRect =
 				global.HTMLElement.prototype.getBoundingClientRect;
+			restoreBoundingClientRect = () => {
+				global.HTMLElement.prototype.getBoundingClientRect =
+					originalGetBoundingClientRect;
+			};
 			global.HTMLElement.prototype.getBoundingClientRect = function () {
 				const role = this.getAttribute?.('data-monster-role');
 				const label = this.textContent?.trim() || '';
@@ -258,63 +321,90 @@ describe('Tabs', function () {
 
             mocks.innerHTML = htmlOverflow;
 
-			setTimeout(() => {
+			waitForCondition(() => {
+				const tabs = document.getElementById('overflow-tabs');
+				const switchButton = tabs?.shadowRoot?.querySelector(
+					'[data-monster-role="switch"]',
+				);
+				const standardButtons = tabs?.getOption?.('buttons.standard') || [];
+				const popperButtons = tabs?.getOption?.('buttons.popper') || [];
+
+				return (
+					tabs instanceof Tabs &&
+					switchButton !== null &&
+					standardButtons.length > 0 &&
+					popperButtons.length > 0 &&
+					standardButtons.length + popperButtons.length === 11 &&
+					switchButton.classList.contains('hidden') === false
+				);
+			}).then(() => {
 				try {
 					const tabs = document.getElementById('overflow-tabs');
 					expect(tabs).is.instanceof(Tabs);
-
-					setTimeout(() => {
-						try {
-							const switchButton = tabs.shadowRoot.querySelector(
-								'[data-monster-role="switch"]',
+					const switchButton = tabs.shadowRoot.querySelector(
+						'[data-monster-role="switch"]',
+					);
+					let standardButtons = tabs.getOption('buttons.standard');
+					let popperButtons = tabs.getOption('buttons.popper');
+
+					expect(switchButton).to.not.equal(null);
+					expect(standardButtons.length).to.be.greaterThan(0);
+					expect(popperButtons.length).to.be.greaterThan(0);
+					expect(standardButtons.length + popperButtons.length).to.equal(11);
+					expect(switchButton.classList.contains('hidden')).to.equal(false);
+
+					const resizeObserver = TrackingResizeObserver.instances.find(
+						(observer) => observer.elements.includes(tabs.shadowRoot.querySelector('[data-monster-role="nav"]')),
+					);
+					expect(resizeObserver).to.not.equal(undefined);
+					resizeObserver.triggerResize([]);
+
+					return waitForCondition(() => {
+						return (
+							TrackingResizeObserver.callbackCount > 0 &&
+							tabs.getOption('buttons.standard').length === 11 &&
+							tabs.getOption('buttons.popper').length === 0
+						);
+					}).then(() => {
+						return waitForCondition(() => {
+							standardButtons = tabs.getOption('buttons.standard');
+							popperButtons = tabs.getOption('buttons.popper');
+							return (
+								standardButtons.length > 0 &&
+								popperButtons.length > 0 &&
+								standardButtons.length + popperButtons.length === 11 &&
+								new Set(
+									standardButtons
+										.concat(popperButtons)
+										.map((button) => button.reference),
+								).size === 11
 							);
-							let standardButtons = tabs.getOption('buttons.standard');
-							let popperButtons = tabs.getOption('buttons.popper');
-
-							expect(switchButton).to.not.equal(null);
-							expect(standardButtons.length).to.be.greaterThan(0);
-							expect(popperButtons.length).to.be.greaterThan(0);
-							expect(
-								standardButtons.length + popperButtons.length,
-							).to.equal(11);
-							expect(switchButton.classList.contains('hidden')).to.equal(false);
-
-							window.dispatchEvent(new Event('resize'));
-							setTimeout(() => {
-								try {
-									standardButtons = tabs.getOption('buttons.standard');
-									popperButtons = tabs.getOption('buttons.popper');
-									expect(standardButtons.length).to.be.greaterThan(0);
-									expect(popperButtons.length).to.be.greaterThan(0);
-									expect(
-										standardButtons.length + popperButtons.length,
-									).to.equal(11);
-									expect(
-										new Set(
-											standardButtons.concat(popperButtons).map((button) => button.reference),
-										).size,
-									).to.equal(11);
-									global.HTMLElement.prototype.getBoundingClientRect =
-										originalGetBoundingClientRect;
-									done();
-								} catch (e) {
-									global.HTMLElement.prototype.getBoundingClientRect =
-										originalGetBoundingClientRect;
-									done(e);
-								}
-							}, 250);
-						} catch (e) {
-							global.HTMLElement.prototype.getBoundingClientRect =
-								originalGetBoundingClientRect;
-							done(e);
-						}
-					}, 250);
+						});
+					}).then(() => {
+						restoreBoundingClientRect();
+						restoreBoundingClientRect = null;
+						restoreResizeObserver();
+						restoreResizeObserver = null;
+						done();
+					});
 				} catch (e) {
-					global.HTMLElement.prototype.getBoundingClientRect =
-						originalGetBoundingClientRect;
+					restoreBoundingClientRect();
+					restoreBoundingClientRect = null;
+					restoreResizeObserver();
+					restoreResizeObserver = null;
 					return done(e);
                 }
-            }, 0);
+			}).catch((e) => {
+				if (restoreBoundingClientRect instanceof Function) {
+					restoreBoundingClientRect();
+					restoreBoundingClientRect = null;
+				}
+				if (restoreResizeObserver instanceof Function) {
+					restoreResizeObserver();
+					restoreResizeObserver = null;
+				}
+				done(e);
+			});
         });
 
     });