@schukai/monster 4.144.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.144.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/control-bar.mjs

@@ -193,6 +193,19 @@ const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT =
 const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER =
 	"data-monster-option-layout-stacked-breakpoint-container";
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_HIDE_WHEN_EMPTY =
+	"data-monster-option-layout-hide-when-empty";
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_AUTO_HIDDEN_EMPTY = "data-monster-empty-hidden";
+
 /**
  * @private
  * @type {string}
@@ -250,6 +263,7 @@ class ControlBar extends CustomElement {
 				stackedAlignment: undefined,
 				stackedBreakpoint: undefined,
 				stackedBreakpointContainer: undefined,
+				hideWhenEmpty: false,
 			},
 			popper: {
 				placement: "left",
@@ -309,7 +323,8 @@ class ControlBar extends CustomElement {
 			path === "layout.alignment" ||
 			path === "layout.stackedAlignment" ||
 			path === "layout.stackedBreakpoint" ||
-			path === "layout.stackedBreakpointContainer"
+			path === "layout.stackedBreakpointContainer" ||
+			path === "layout.hideWhenEmpty"
 		) {
 			syncLayoutState.call(this, {
 				observe: path === "layout.stackedBreakpointContainer",
@@ -366,6 +381,7 @@ class ControlBar extends CustomElement {
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_HIDE_WHEN_EMPTY);
 		return attributes;
 	}
 
@@ -572,6 +588,11 @@ function initEventHandler() {
 		syncLayoutState.call(self, { observe: true });
 	};
 
+	self[attributeObserverSymbol][ATTRIBUTE_OPTION_LAYOUT_HIDE_WHEN_EMPTY] =
+		() => {
+			syncLayoutState.call(self);
+		};
+
 	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (self[layoutStateSymbol]?.suppressResize) {
 			return;
@@ -655,6 +676,8 @@ function runLayout() {
 	state.running = true;
 
 	new Processing(() => {
+		syncEmptyVisibility.call(this);
+
 		if (needsObserve) {
 			updateResizeObserverObservation.call(this);
 		}
@@ -845,6 +868,97 @@ function rearrangeItems() {
 	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
+	syncEmptyVisibility.call(this);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function syncEmptyVisibility() {
+	if (this.getOption("layout.hideWhenEmpty", false) !== true) {
+		clearEmptyVisibilityState.call(this);
+		return;
+	}
+
+	if (hasVisibleControlItem.call(this)) {
+		clearEmptyVisibilityState.call(this);
+		return;
+	}
+
+	if (this.hasAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY)) {
+		return;
+	}
+
+	if (this.hasAttribute("hidden")) {
+		return;
+	}
+
+	this.setAttribute("hidden", "");
+	this.setAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY, "");
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function clearEmptyVisibilityState() {
+	if (this.hasAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY)) {
+		this.removeAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY);
+		if (this.hasAttribute("hidden")) {
+			this.removeAttribute("hidden");
+		}
+	}
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function hasVisibleControlItem() {
+	return getControlItems.call(this).some((item) => {
+		return isControlItemVisible.call(this, item);
+	});
+}
+
+/**
+ * @private
+ * @return {HTMLElement[]}
+ */
+function getControlItems() {
+	return Array.from(this.children).filter((item) => {
+		if (!(item instanceof HTMLElement)) {
+			return false;
+		}
+		return item.slot === "" || item.slot === "popper";
+	});
+}
+
+/**
+ * @private
+ * @param {HTMLElement} item
+ * @return {boolean}
+ */
+function isControlItemVisible(item) {
+	if (isControlBarSpacerElement(item) || isElementSelfHidden(item)) {
+		return false;
+	}
+
+	const computedStyle = getComputedStyle(item);
+	if (computedStyle.opacity === "0") {
+		return false;
+	}
+
+	const containedControls = getContainedControlElements(item);
+	if (containedControls.length === 0) {
+		return true;
+	}
+
+	return containedControls.some((control) => {
+		return (
+			!isElementSelfHidden(control) && getComputedStyle(control).opacity !== "0"
+		);
+	});
 }
 
 /**

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,31 @@ 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 = `
   <div id="test1">
     <monster-button-bar id="bar"></monster-button-bar>
@@ -80,6 +105,117 @@ describe("ButtonBar", function () {
     }, 50);
   });
 
+  it("should hide an empty button bar when configured to hide empty bars", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-button-bar
+        id="empty-auto-hidden-button-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-button-bar>
+    `;
+    const bar = document.getElementById("empty-auto-hidden-button-bar");
+
+    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;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should reveal an auto-hidden button bar when a button becomes visible", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-button-bar
+        id="dynamic-auto-hidden-button-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      >
+        <button id="dynamic-auto-hidden-button" hidden>Run</button>
+      </monster-button-bar>
+    `;
+    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;
+
+    button.removeAttribute("hidden");
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
+  it("should keep an auto-hidden button bar visible when buttons overflow into the popper", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <div id="overflow-auto-hidden-wrapper">
+        <monster-button-bar
+          id="overflow-auto-hidden-button-bar"
+          data-monster-option-layout-hide-when-empty="true"
+        >
+          <button id="overflow-auto-hidden-a" type="button">One</button>
+          <button id="overflow-auto-hidden-b" type="button">Two</button>
+        </monster-button-bar>
+      </div>
+    `;
+    const wrapper = document.getElementById("overflow-auto-hidden-wrapper");
+    const bar = document.getElementById("overflow-auto-hidden-button-bar");
+    const buttons = [
+      document.getElementById("overflow-auto-hidden-a"),
+      document.getElementById("overflow-auto-hidden-b"),
+    ];
+    const switchButton = bar.shadowRoot.querySelector(
+      '[data-monster-role="switch"]',
+    );
+
+    wrapper.style.boxSizing = "border-box";
+    wrapper.style.width = "30px";
+    Object.defineProperty(wrapper, "clientWidth", {
+      configurable: true,
+      value: 30,
+    });
+    Object.defineProperty(switchButton, "offsetWidth", {
+      configurable: true,
+      value: 20,
+    });
+
+    for (const button of buttons) {
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 48,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 48,
+        height: 30,
+        top: 0,
+        right: 48,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+    }
+
+    await waitForLayout();
+
+    expect(buttons.every((button) => button.getAttribute("slot") === "popper"))
+      .to.be.true;
+    expect(switchButton.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
   it("should default the button bar layout alignment to left", function () {
     const bar = document.getElementById("bar");
     const buttonBar = bar.shadowRoot.querySelector(

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

@@ -6,6 +6,9 @@ import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 const expect = chai.expect;
 chai.use(chaiDom);
 
+const waitForLayout = (timeout = 120) =>
+  new Promise((resolve) => setTimeout(resolve, timeout));
+
 const html = `
   <div id="test1">
     <monster-control-bar id="bar">
@@ -97,6 +100,119 @@ describe("ControlBar", function () {
     expect(controlBar.style.opacity).to.not.equal("0");
   });
 
+  it("should keep an empty control bar visible by default", async function () {
+    const bar = document.getElementById("bar-right");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
+  it("should hide an empty control bar when the empty option is enabled at runtime", async function () {
+    const bar = document.getElementById("bar-right");
+
+    await waitForLayout();
+
+    bar.setOption("layout.hideWhenEmpty", true);
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should hide an empty control bar when configured to hide empty bars", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="empty-auto-hidden-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-control-bar>
+    `;
+    const bar = document.getElementById("empty-auto-hidden-bar");
+
+    await waitForLayout();
+
+    expect(bar.getOption("layout.hideWhenEmpty")).to.equal(true);
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should update empty control bar visibility when child controls become visible", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="dynamic-auto-hidden-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      >
+        <button id="dynamic-auto-hidden-button" hidden>Run</button>
+      </monster-control-bar>
+    `;
+    const bar = document.getElementById("dynamic-auto-hidden-bar");
+    const button = document.getElementById("dynamic-auto-hidden-button");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+
+    button.removeAttribute("hidden");
+    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(360);
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should release empty auto-hidden state when the option is disabled", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="option-auto-hidden-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-control-bar>
+    `;
+    const bar = document.getElementById("option-auto-hidden-bar");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+
+    bar.setOption("layout.hideWhenEmpty", false);
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
+  it("should preserve a manual hidden attribute when empty hiding is disabled", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="manual-hidden-bar"
+        hidden
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-control-bar>
+    `;
+    const bar = document.getElementById("manual-hidden-bar");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+
+    bar.setOption("layout.hideWhenEmpty", false);
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
   it("should allow configuring the control bar layout alignment to right", function (done) {
     const bar = document.getElementById("bar-right");
 

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