@schukai/monster 4.145.0 → 4.145.1

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.145.0"}
+{"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.145.1"}

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

@@ -34,6 +34,8 @@ import {
 export {
 	applyAdaptiveFloatingElementSize,
 	closePositionedPopper,
+	createVisibilityRecoveryConfig,
+	getFloatingVisibleRatio,
 	resolveClippingBoundaryElement,
 	resolveParentPopperContentBoundary,
 	isPositionedPopperOpen,
@@ -43,11 +45,13 @@ export {
 
 const autoUpdateCleanupMap = new WeakMap();
 const settlingFrameMap = new WeakMap();
+const visibilityRecoveryMap = new WeakMap();
 const floatingResizeObserverMap = new WeakMap();
 const floatingSyncCycleMap = new WeakMap();
 const floatingAppearanceFrameMap = new WeakMap();
 const floatingAppearanceTimeoutMap = new WeakMap();
 const adaptiveScrollHeightDatasetKey = "monsterAdaptiveScrollHeight";
+const MINIMUM_VISIBLE_FLOATING_RATIO = 0.8;
 
 /**
  * @private
@@ -76,6 +80,7 @@ function openPositionedPopper(controlElement, popperElement, options) {
 
 	stopAutoUpdate(popperElement);
 	cancelFloatingAppearanceFrame(popperElement);
+	visibilityRecoveryMap.delete(popperElement);
 	popperElement.dataset.monsterAppearance = "opening";
 	popperElement.style.display = "block";
 	popperElement.style.position = config.strategy;
@@ -187,6 +192,13 @@ function syncFloatingPopover(
 		if (allowSettlingPass) {
 			scheduleSettlingPass(controlElement, popperElement, config);
 		}
+
+		scheduleVisibilityRecoveryPass(
+			controlElement,
+			popperElement,
+			config,
+			syncCycleId,
+		);
 	});
 }
 
@@ -194,6 +206,7 @@ function closePositionedPopper(popperElement) {
 	cancelFloatingLayout(popperElement);
 	stopAutoUpdate(popperElement);
 	cancelFloatingAppearanceFrame(popperElement);
+	visibilityRecoveryMap.delete(popperElement);
 	delete popperElement.dataset.monsterAppearance;
 	popperElement.style.display = "none";
 	popperElement.style.removeProperty("visibility");
@@ -358,6 +371,203 @@ function normalizeShiftOptions(tokens, detectOverflowOptions) {
 	return options;
 }
 
+function scheduleVisibilityRecoveryPass(
+	controlElement,
+	popperElement,
+	config,
+	syncCycleId,
+) {
+	if (config.visibilityRecovery === false || config.visibilityRecoveryPass) {
+		return;
+	}
+
+	if (!isActiveFloatingSyncCycle(popperElement, syncCycleId)) {
+		return;
+	}
+
+	const visibleRatio = getFloatingVisibleRatio(popperElement);
+	if (visibleRatio >= MINIMUM_VISIBLE_FLOATING_RATIO) {
+		visibilityRecoveryMap.delete(popperElement);
+		return;
+	}
+
+	if (visibilityRecoveryMap.has(popperElement)) {
+		return;
+	}
+	visibilityRecoveryMap.set(popperElement, true);
+
+	enqueueFloatingLayout({
+		popperElement,
+		reason: FLOATING_LAYOUT_REASON.SETTLE | FLOATING_LAYOUT_REASON.VIEWPORT,
+		isActive: () => isPositionedPopperOpen(popperElement),
+		position: () => {
+			runFloatingUpdateHook(popperElement);
+			syncFloatingPopover(
+				controlElement,
+				popperElement,
+				createVisibilityRecoveryConfig(config),
+				false,
+			);
+		},
+	});
+}
+
+function getFloatingVisibleRatio(floatingElement) {
+	if (!(floatingElement instanceof HTMLElement)) {
+		return 1;
+	}
+
+	const rect = floatingElement.getBoundingClientRect();
+	const area = rect.width * rect.height;
+	if (!Number.isFinite(area) || area <= 0) {
+		return 1;
+	}
+
+	const visibleRect = getVisibleFloatingRect(floatingElement, rect);
+	if (!visibleRect) {
+		return 0;
+	}
+
+	const visibleArea = visibleRect.width * visibleRect.height;
+	return Math.max(0, Math.min(1, visibleArea / area));
+}
+
+function getVisibleFloatingRect(floatingElement, rect) {
+	let visibleRect = normalizeRect(rect);
+	const viewportRect = {
+		top: 0,
+		left: 0,
+		right: window.innerWidth || document.documentElement.clientWidth || 0,
+		bottom: window.innerHeight || document.documentElement.clientHeight || 0,
+	};
+	viewportRect.width = Math.max(0, viewportRect.right - viewportRect.left);
+	viewportRect.height = Math.max(0, viewportRect.bottom - viewportRect.top);
+
+	visibleRect = intersectRects(visibleRect, viewportRect);
+	if (!visibleRect) {
+		return null;
+	}
+
+	for (const clippingContainer of getFloatingClippingContainers(floatingElement)) {
+		visibleRect = intersectRects(
+			visibleRect,
+			normalizeRect(clippingContainer.getBoundingClientRect()),
+		);
+		if (!visibleRect) {
+			return null;
+		}
+	}
+
+	return visibleRect;
+}
+
+function getFloatingClippingContainers(element) {
+	const result = [];
+	let current = getComposedParent(element);
+
+	while (current) {
+		if (
+			current instanceof HTMLElement &&
+			isClippingContainer(getComputedStyle(current))
+		) {
+			result.push(current);
+		}
+
+		current = getComposedParent(current);
+	}
+
+	return result;
+}
+
+function normalizeRect(rect) {
+	const left = Number.isFinite(rect.left) ? rect.left : rect.x || 0;
+	const top = Number.isFinite(rect.top) ? rect.top : rect.y || 0;
+	const right = Number.isFinite(rect.right) ? rect.right : left + rect.width;
+	const bottom = Number.isFinite(rect.bottom)
+		? rect.bottom
+		: top + rect.height;
+
+	return {
+		top,
+		left,
+		right,
+		bottom,
+		width: Math.max(0, right - left),
+		height: Math.max(0, bottom - top),
+	};
+}
+
+function intersectRects(firstRect, secondRect) {
+	const left = Math.max(firstRect.left, secondRect.left);
+	const top = Math.max(firstRect.top, secondRect.top);
+	const right = Math.min(firstRect.right, secondRect.right);
+	const bottom = Math.min(firstRect.bottom, secondRect.bottom);
+
+	if (right <= left || bottom <= top) {
+		return null;
+	}
+
+	return {
+		top,
+		left,
+		right,
+		bottom,
+		width: right - left,
+		height: bottom - top,
+	};
+}
+
+function createVisibilityRecoveryConfig(config) {
+	return Object.assign({}, config, {
+		visibilityRecoveryPass: true,
+		middleware: createVisibilityRecoveryMiddleware(config.middleware),
+	});
+}
+
+function createVisibilityRecoveryMiddleware(middleware) {
+	const source = isArray(middleware) ? middleware : [];
+	const offsetMiddleware = [];
+	const remainingMiddleware = [];
+	let hasShift = false;
+
+	for (const entry of source) {
+		const tokenName = getMiddlewareTokenName(entry);
+		if (tokenName === "flip" || tokenName === "autoPlacement") {
+			continue;
+		}
+		if (tokenName === "offset") {
+			offsetMiddleware.push(entry);
+			continue;
+		}
+		if (tokenName === "shift") {
+			hasShift = true;
+		}
+		remainingMiddleware.push(entry);
+	}
+
+	if (!hasShift) {
+		remainingMiddleware.unshift("shift:crossAxis");
+	}
+
+	return [
+		...offsetMiddleware,
+		"autoPlacement:top,bottom,right,left",
+		...remainingMiddleware,
+	];
+}
+
+function getMiddlewareTokenName(entry) {
+	if (isString(entry)) {
+		return entry.split(":").shift();
+	}
+
+	if (isObject(entry) && isString(entry.name)) {
+		return entry.name;
+	}
+
+	return null;
+}
+
 function createAdaptiveSizeMiddleware(
 	detectOverflowOptions,
 	popperElement,

package/test/cases/components/form/button-bar.mjs

@@ -6,6 +6,29 @@ import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 let expect = chai.expect;
 chai.use(chaiDom);
 
+function waitForCondition(check, { timeout = 4000, interval = 25 } = {}) {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const poll = () => {
+      try {
+        if (check()) {
+          resolve();
+          return;
+        }
+      } catch {}
+
+      if (Date.now() - start >= timeout) {
+        reject(new Error("Timed out waiting for condition"));
+        return;
+      }
+
+      setTimeout(poll, interval);
+    };
+
+    poll();
+  });
+}
+
 const waitForLayout = () => new Promise((resolve) => setTimeout(resolve, 120));
 
 const html = `
@@ -92,7 +115,12 @@ describe("ButtonBar", function () {
     `;
     const bar = document.getElementById("empty-auto-hidden-button-bar");
 
-    await waitForLayout();
+    await waitForCondition(() => {
+      return (
+        bar.hasAttribute("hidden") &&
+        bar.hasAttribute("data-monster-empty-hidden")
+      );
+    });
 
     expect(bar.getOption("layout.hideWhenEmpty")).to.equal(true);
     expect(bar.hasAttribute("hidden")).to.be.true;

package/test/cases/components/form/control-bar.mjs

@@ -6,7 +6,8 @@ import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 const expect = chai.expect;
 chai.use(chaiDom);
 
-const waitForLayout = () => new Promise((resolve) => setTimeout(resolve, 120));
+const waitForLayout = (timeout = 120) =>
+  new Promise((resolve) => setTimeout(resolve, timeout));
 
 const html = `
   <div id="test1">
@@ -156,13 +157,13 @@ describe("ControlBar", function () {
     expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
 
     button.removeAttribute("hidden");
-    await waitForLayout();
+    await waitForLayout(360);
 
     expect(bar.hasAttribute("hidden")).to.be.false;
     expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
 
     button.style.display = "none";
-    await waitForLayout();
+    await waitForLayout(360);
 
     expect(bar.hasAttribute("hidden")).to.be.true;
     expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;

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

@@ -5,6 +5,8 @@ let expect = chai.expect;
 
 let resolveClippingBoundaryElement;
 let applyAdaptiveFloatingElementSize;
+let createVisibilityRecoveryConfig;
+let getFloatingVisibleRatio;
 
 describe("form floating-ui boundary resolution", function () {
 	before(function (done) {
@@ -17,6 +19,8 @@ describe("form floating-ui boundary resolution", function () {
 			.then((m) => {
 				resolveClippingBoundaryElement = m.resolveClippingBoundaryElement;
 				applyAdaptiveFloatingElementSize = m.applyAdaptiveFloatingElementSize;
+				createVisibilityRecoveryConfig = m.createVisibilityRecoveryConfig;
+				getFloatingVisibleRatio = m.getFloatingVisibleRatio;
 				done();
 			})
 			.catch((e) => done(e));
@@ -398,4 +402,78 @@ describe("form floating-ui boundary resolution", function () {
 		expect(content.style.height).to.equal("200px");
 		expect(content.style.maxHeight).to.equal("200px");
 	});
+
+	it("should calculate the visible popper ratio against clipping containers", function () {
+		const mocks = document.getElementById("mocks");
+		const wrapper = document.createElement("div");
+		const popper = document.createElement("div");
+		const originalInnerWidth = window.innerWidth;
+		const originalInnerHeight = window.innerHeight;
+
+		Object.defineProperty(window, "innerWidth", {
+			configurable: true,
+			value: 200,
+		});
+		Object.defineProperty(window, "innerHeight", {
+			configurable: true,
+			value: 200,
+		});
+
+		wrapper.style.overflow = "hidden";
+		wrapper.getBoundingClientRect = () => {
+			return {
+				width: 100,
+				height: 100,
+				top: 0,
+				left: 0,
+				right: 100,
+				bottom: 100,
+				x: 0,
+				y: 0,
+			};
+		};
+		popper.getBoundingClientRect = () => {
+			return {
+				width: 100,
+				height: 100,
+				top: -50,
+				left: 50,
+				right: 150,
+				bottom: 50,
+				x: 50,
+				y: -50,
+			};
+		};
+
+		wrapper.appendChild(popper);
+		mocks.appendChild(wrapper);
+
+		try {
+			expect(getFloatingVisibleRatio(popper)).to.equal(0.25);
+		} finally {
+			Object.defineProperty(window, "innerWidth", {
+				configurable: true,
+				value: originalInnerWidth,
+			});
+			Object.defineProperty(window, "innerHeight", {
+				configurable: true,
+				value: originalInnerHeight,
+			});
+		}
+	});
+
+	it("should build a bounded visibility recovery pass with auto placement", function () {
+		const recoveryConfig = createVisibilityRecoveryConfig({
+			placement: "top",
+			middleware: ["flip", "shift", "offset:15", "arrow"],
+		});
+
+		expect(recoveryConfig.visibilityRecoveryPass).to.equal(true);
+		expect(recoveryConfig.middleware).to.deep.equal([
+			"offset:15",
+			"autoPlacement:top,bottom,right,left",
+			"shift",
+			"arrow",
+		]);
+	});
 });