@schukai/monster 4.145.0 → 4.145.2

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.2"}

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

@@ -219,6 +219,35 @@ const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
 const LAYOUT_CHANGED_EVENT_DELAY = 20;
 const LAYOUT_SWITCH_HYSTERESIS = 16;
 
+/**
+ * @private
+ * @type {string}
+ */
+const CONTAINED_CONTROL_SELECTOR = [
+	"monster-input-group",
+	"monster-select",
+	"monster-button",
+	"monster-state-button",
+	"monster-message-state-button",
+	"monster-action-button",
+	"monster-api-button",
+	"monster-confirm-button",
+	"monster-popper-button",
+].join(",");
+
+/**
+ * @private
+ * @type {string}
+ */
+const VISUAL_BORDER_CONTROL_SELECTOR = [
+	"button",
+	"input",
+	"select",
+	"textarea",
+	CONTAINED_CONTROL_SELECTOR,
+	"[data-monster-role=control]",
+].join(",");
+
 /**
  * A control bar control.
  *
@@ -1213,24 +1242,36 @@ function isWrapperElement(element) {
  * @return {HTMLElement[]}
  */
 function getContainedControlElements(element) {
-	if (!isWrapperElement(element)) {
+	if (element.matches(CONTAINED_CONTROL_SELECTOR)) {
 		return [];
 	}
 
 	return Array.from(
-		element.querySelectorAll(
-			[
-				"monster-input-group",
-				"monster-select",
-				"monster-button",
-				"monster-state-button",
-				"monster-message-state-button",
-				"monster-action-button",
-				"monster-api-button",
-				"monster-confirm-button",
-			].join(","),
-		),
-	).filter((control) => control instanceof HTMLElement);
+		element.querySelectorAll(CONTAINED_CONTROL_SELECTOR),
+	).filter((control) => {
+		return (
+			control instanceof HTMLElement &&
+			isTopLevelContainedControl(element, control)
+		);
+	});
+}
+
+/**
+ * @private
+ * @param {HTMLElement} container
+ * @param {HTMLElement} control
+ * @return {boolean}
+ */
+function isTopLevelContainedControl(container, control) {
+	let parent = control.parentElement;
+	while (parent instanceof HTMLElement && parent !== container) {
+		if (parent.matches(CONTAINED_CONTROL_SELECTOR)) {
+			return false;
+		}
+		parent = parent.parentElement;
+	}
+
+	return true;
 }
 
 /**
@@ -1253,6 +1294,13 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 	const marginTopByElement = new Map();
 
 	collectInlineJoinedBorders.call(this, mainItems, marginLeftByElement);
+	for (const item of [...mainItems, ...layout.itemsToMoveToPopper]) {
+		collectInlineJoinedBorders.call(
+			this,
+			getContainedControlElements(item),
+			marginLeftByElement,
+		);
+	}
 	collectBlockJoinedBorders.call(
 		this,
 		layout.itemsToMoveToPopper,
@@ -1392,6 +1440,9 @@ function getJoinedBorderOffsetElements() {
 	const elements = Array.from(this.children).filter(
 		(element) => element instanceof HTMLElement,
 	);
+	for (const element of [...elements]) {
+		elements.push(...getContainedControlElements(element));
+	}
 	if (this[popperNavElementSymbol] instanceof HTMLElement) {
 		elements.push(this[popperNavElementSymbol]);
 	}
@@ -1458,22 +1509,6 @@ function getVisualBorderElement(element, side) {
 		return this[switchElementSymbol] || element;
 	}
 
-	const selector = [
-		"button",
-		"input",
-		"select",
-		"textarea",
-		"monster-input-group",
-		"monster-select",
-		"monster-button",
-		"monster-state-button",
-		"monster-message-state-button",
-		"monster-action-button",
-		"monster-api-button",
-		"monster-confirm-button",
-		"monster-popper-button",
-		"[data-monster-role=control]",
-	].join(",");
 	if (element.shadowRoot instanceof ShadowRoot) {
 		const primaryControl = element.shadowRoot.querySelector(
 			"[data-monster-role=button],button,input,select,textarea",
@@ -1482,7 +1517,9 @@ function getVisualBorderElement(element, side) {
 			return getVisualBorderElement.call(this, primaryControl, side);
 		}
 
-		const control = element.shadowRoot.querySelector(selector);
+		const control = element.shadowRoot.querySelector(
+			VISUAL_BORDER_CONTROL_SELECTOR,
+		);
 		if (control instanceof HTMLElement && control !== element) {
 			return getVisualBorderElement.call(this, control, side);
 		}
@@ -1490,9 +1527,9 @@ function getVisualBorderElement(element, side) {
 		return element;
 	}
 
-	const candidates = Array.from(element.querySelectorAll(selector)).filter(
-		(candidate) => candidate instanceof HTMLElement,
-	);
+	const candidates = Array.from(
+		element.querySelectorAll(VISUAL_BORDER_CONTROL_SELECTOR),
+	).filter((candidate) => candidate instanceof HTMLElement);
 	if (candidates.length === 0) {
 		return element;
 	}

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;
@@ -112,15 +140,17 @@ describe("ButtonBar", function () {
     const bar = document.getElementById("dynamic-auto-hidden-button-bar");
     const button = document.getElementById("dynamic-auto-hidden-button");
 
-    await waitForLayout();
-
-    expect(bar.hasAttribute("hidden")).to.be.true;
+    await waitForCondition(() => {
+      return bar.hasAttribute("hidden");
+    });
 
     button.removeAttribute("hidden");
-    await waitForLayout();
-
-    expect(bar.hasAttribute("hidden")).to.be.false;
-    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+    await waitForCondition(() => {
+      return (
+        !bar.hasAttribute("hidden") &&
+        !bar.hasAttribute("data-monster-empty-hidden")
+      );
+    });
   });
 
   it("should keep an auto-hidden button bar visible when buttons overflow into the popper", async function () {

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;
@@ -632,6 +633,123 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should size and join popper buttons inside custom control wrappers", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="custom-wrapper-border-bar-wrapper">
+          <monster-control-bar id="custom-wrapper-border-bar">
+            <nucleus-workflow-transition-control id="custom-wrapper-workflow">
+              <monster-popper-button id="custom-wrapper-release">
+                <span slot="button">Release order</span>
+              </monster-popper-button>
+              <monster-popper-button id="custom-wrapper-cancel">
+                <span slot="button">Cancel order</span>
+              </monster-popper-button>
+            </nucleus-workflow-transition-control>
+            <nucleus-follow-ups-action id="custom-wrapper-follow-up">
+              <monster-popper-button id="custom-wrapper-follow-up-button">
+                <span slot="button">Create follow-up</span>
+                <monster-message-state-button id="custom-wrapper-follow-up-submit">
+                  Create follow-up
+                </monster-message-state-button>
+              </monster-popper-button>
+            </nucleus-follow-ups-action>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById(
+        "custom-wrapper-border-bar-wrapper",
+      );
+      const workflow = document.getElementById("custom-wrapper-workflow");
+      const followUp = document.getElementById("custom-wrapper-follow-up");
+      const release = document.getElementById("custom-wrapper-release");
+      const cancel = document.getElementById("custom-wrapper-cancel");
+      const followUpButton = document.getElementById(
+        "custom-wrapper-follow-up-button",
+      );
+      const followUpSubmit = document.getElementById(
+        "custom-wrapper-follow-up-submit",
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "500px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 500,
+      });
+
+      for (const control of [workflow, followUp]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 160,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 160,
+          height: 30,
+          top: 0,
+          right: 160,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const releaseInnerButton = release.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+      const cancelInnerButton = cancel.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+      const followUpInnerButton = followUpButton.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+
+      releaseInnerButton.style.borderRightWidth = "3px";
+      cancelInnerButton.style.borderLeftWidth = "3px";
+      cancelInnerButton.style.borderRightWidth = "2px";
+      followUpInnerButton.style.borderLeftWidth = "2px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(release.style.height).to.equal("100%");
+      expect(cancel.style.height).to.equal("100%");
+      expect(followUpButton.style.height).to.equal("100%");
+      expect(cancel.style.marginLeft).to.equal("-3px");
+      expect(followUp.style.marginLeft).to.equal("-2px");
+      expect(followUpSubmit.style.height).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should join borders between message state and confirm buttons", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;

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",
+		]);
+	});
 });