@reshaped/utilities 3.9.1-canary.3 → 3.10.0-canary.4

package/dist/a11y/tests/focus.test.js

@@ -0,0 +1,278 @@
+import { expect, test, describe, beforeEach, afterEach } from "vitest";
+import { getActiveElement, focusElement, getFocusableElements, getFocusData, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../focus.js";
+describe("a11y/focus", () => {
+    let container;
+    beforeEach(() => {
+        container = document.createElement("div");
+        document.body.appendChild(container);
+    });
+    afterEach(() => {
+        document.body.removeChild(container);
+        document.body.focus();
+    });
+    describe("getActiveElement", () => {
+        test("returns document.activeElement when no pseudo focus is set", () => {
+            const button = document.createElement("button");
+            container.appendChild(button);
+            button.focus();
+            expect(getActiveElement()).toBe(button);
+        });
+        test("returns pseudo focused element when data-rs-focus is set", () => {
+            const button1 = document.createElement("button");
+            const button2 = document.createElement("button");
+            container.appendChild(button1);
+            container.appendChild(button2);
+            button1.focus();
+            button2.setAttribute("data-rs-focus", "true");
+            expect(getActiveElement()).toBe(button2);
+        });
+    });
+    describe("focusElement", () => {
+        test("focuses element with real focus by default", () => {
+            const button = document.createElement("button");
+            container.appendChild(button);
+            focusElement(button);
+            expect(document.activeElement).toBe(button);
+            expect(button.hasAttribute("data-rs-focus")).toBe(false);
+        });
+        test("focuses element with pseudo focus when option is set", () => {
+            const button = document.createElement("button");
+            container.appendChild(button);
+            focusElement(button, { pseudoFocus: true });
+            expect(button.getAttribute("data-rs-focus")).toBe("true");
+        });
+        test("removes previous pseudo focus when focusing new element", () => {
+            const button1 = document.createElement("button");
+            const button2 = document.createElement("button");
+            container.appendChild(button1);
+            container.appendChild(button2);
+            focusElement(button1, { pseudoFocus: true });
+            focusElement(button2, { pseudoFocus: true });
+            expect(button1.hasAttribute("data-rs-focus")).toBe(false);
+            expect(button2.getAttribute("data-rs-focus")).toBe("true");
+        });
+    });
+    describe("getFocusableElements", () => {
+        test("returns all focusable elements", () => {
+            container.innerHTML = `
+        <div>content</div>
+				<button>Button 1</button>
+				<input type="text" />
+				<textarea></textarea>
+				<button>Button 2</button>
+        <textarea></textarea>
+        <select><option>Option 1</option></select>
+        <details><summary>Summary</summary>Content</details>
+        <div contenteditable>Contenteditable</div>
+        <div tabindex="0">Negative tabindex</div>
+			`;
+            const focusable = getFocusableElements(container);
+            expect(focusable).toHaveLength(9);
+        });
+        test("filters out disabled elements", () => {
+            container.innerHTML = `
+				<button>Enabled</button>
+				<button disabled>Disabled</button>
+			`;
+            const focusable = getFocusableElements(container);
+            expect(focusable).toHaveLength(1);
+            expect(focusable[0].textContent).toBe("Enabled");
+        });
+        test("filters out hidden elements (clientHeight === 0)", () => {
+            const button1 = document.createElement("button");
+            const button2 = document.createElement("button");
+            button1.textContent = "Visible";
+            button2.textContent = "Hidden";
+            button2.style.display = "none";
+            container.appendChild(button1);
+            container.appendChild(button2);
+            const focusable = getFocusableElements(container);
+            expect(focusable).toHaveLength(1);
+            expect(focusable[0].textContent).toBe("Visible");
+        });
+        test("filters out elements with tabindex=-1 by default", () => {
+            container.innerHTML = `
+				<button>Regular</button>
+				<button tabindex="-1">Negative tabindex</button>
+			`;
+            const focusable = getFocusableElements(container);
+            expect(focusable).toHaveLength(1);
+            expect(focusable[0].textContent).toBe("Regular");
+        });
+        test("includes elements with tabindex=-1 when option is set", () => {
+            container.innerHTML = `
+				<button>Regular</button>
+				<button tabindex="-1">Negative tabindex</button>
+			`;
+            const focusable = getFocusableElements(container, { includeNegativeTabIndex: true });
+            expect(focusable).toHaveLength(2);
+        });
+        test("handles radio buttons in a group", () => {
+            container.innerHTML = `
+				<form>
+					<input type="radio" name="group1" value="1" />
+					<input type="radio" name="group1" value="2" checked />
+					<input type="radio" name="group1" value="3" />
+				</form>
+			`;
+            const focusable = getFocusableElements(container);
+            // Only the checked radio should be focusable
+            expect(focusable).toHaveLength(1);
+            expect(focusable[0].value).toBe("2");
+        });
+        test("includes first radio when none are checked", () => {
+            container.innerHTML = `
+				<form>
+					<input type="radio" name="group1" value="1" />
+					<input type="radio" name="group1" value="2" />
+					<input type="radio" name="group1" value="3" />
+				</form>
+			`;
+            const focusable = getFocusableElements(container);
+            expect(focusable).toHaveLength(1);
+            expect(focusable[0].value).toBe("1");
+        });
+        test("adds additional element at the beginning when provided", () => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+			`;
+            const additionalButton = document.createElement("button");
+            additionalButton.textContent = "Additional";
+            document.body.appendChild(additionalButton);
+            const focusable = getFocusableElements(container, { additionalElement: additionalButton });
+            expect(focusable).toHaveLength(3);
+            expect(focusable[0]).toBe(additionalButton);
+            document.body.removeChild(additionalButton);
+        });
+    });
+    describe("getFocusData", () => {
+        beforeEach(() => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+				<button>Button 3</button>
+			`;
+        });
+        test("returns next element data", () => {
+            const buttons = container.querySelectorAll("button");
+            buttons[0].focus();
+            const data = getFocusData({ root: container, target: "next" });
+            expect(data.el).toBe(buttons[1]);
+            expect(data.overflow).toBe(false);
+        });
+        test("returns previous element data", () => {
+            const buttons = container.querySelectorAll("button");
+            buttons[1].focus();
+            const data = getFocusData({ root: container, target: "prev" });
+            expect(data.el).toBe(buttons[0]);
+            expect(data.overflow).toBe(false);
+        });
+        test("returns first element data", () => {
+            const buttons = container.querySelectorAll("button");
+            const data = getFocusData({ root: container, target: "first" });
+            expect(data.el).toBe(buttons[0]);
+        });
+        test("returns last element data", () => {
+            const buttons = container.querySelectorAll("button");
+            const data = getFocusData({ root: container, target: "last" });
+            expect(data.el).toBe(buttons[2]);
+        });
+        test("handles overflow at end without circular option", () => {
+            const buttons = container.querySelectorAll("button");
+            buttons[2].focus();
+            const data = getFocusData({ root: container, target: "next" });
+            expect(data.el).toBe(buttons[2]);
+            expect(data.overflow).toBe(true);
+        });
+        test("handles overflow at start without circular option", () => {
+            const buttons = container.querySelectorAll("button");
+            buttons[0].focus();
+            const data = getFocusData({ root: container, target: "prev" });
+            expect(data.el).toBe(buttons[0]);
+            expect(data.overflow).toBe(true);
+        });
+        test("wraps to first when going next from last with circular option", () => {
+            const buttons = container.querySelectorAll("button");
+            buttons[2].focus();
+            const data = getFocusData({ root: container, target: "next", options: { circular: true } });
+            expect(data.el).toBe(buttons[0]);
+            expect(data.overflow).toBe(true);
+        });
+        test("wraps to last when going prev from first with circular option", () => {
+            const buttons = container.querySelectorAll("button");
+            buttons[0].focus();
+            const data = getFocusData({ root: container, target: "prev", options: { circular: true } });
+            expect(data.el).toBe(buttons[2]);
+            expect(data.overflow).toBe(true);
+        });
+    });
+    describe("focusNextElement", () => {
+        test("focuses next element in sequence", () => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+			`;
+            const buttons = container.querySelectorAll("button");
+            buttons[0].focus();
+            focusNextElement(container);
+            expect(document.activeElement).toBe(buttons[1]);
+        });
+        test("wraps to first element with circular option", () => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+			`;
+            const buttons = container.querySelectorAll("button");
+            buttons[1].focus();
+            focusNextElement(container, { circular: true });
+            expect(document.activeElement).toBe(buttons[0]);
+        });
+    });
+    describe("focusPreviousElement", () => {
+        test("focuses previous element in sequence", () => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+			`;
+            const buttons = container.querySelectorAll("button");
+            buttons[1].focus();
+            focusPreviousElement(container);
+            expect(document.activeElement).toBe(buttons[0]);
+        });
+        test("wraps to last element with circular option", () => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+			`;
+            const buttons = container.querySelectorAll("button");
+            buttons[0].focus();
+            focusPreviousElement(container, { circular: true });
+            expect(document.activeElement).toBe(buttons[1]);
+        });
+    });
+    describe("focusFirstElement", () => {
+        test("focuses first focusable element", () => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+				<button>Button 3</button>
+			`;
+            const buttons = container.querySelectorAll("button");
+            focusFirstElement(container);
+            expect(document.activeElement).toBe(buttons[0]);
+        });
+    });
+    describe("focusLastElement", () => {
+        test("focuses last focusable element", () => {
+            container.innerHTML = `
+				<button>Button 1</button>
+				<button>Button 2</button>
+				<button>Button 3</button>
+			`;
+            const buttons = container.querySelectorAll("button");
+            focusLastElement(container);
+            expect(document.activeElement).toBe(buttons[2]);
+        });
+    });
+});

package/dist/a11y/tests/keyboardMode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/a11y/tests/keyboardMode.test.js

@@ -0,0 +1,27 @@
+import { expect, test, describe, beforeEach, afterEach } from "vitest";
+import { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode, keyboardModeAttribute, } from "../keyboardMode.js";
+describe("a11y/keyboardMode", () => {
+    beforeEach(() => {
+        document.documentElement.removeAttribute(keyboardModeAttribute);
+    });
+    afterEach(() => {
+        document.documentElement.removeAttribute(keyboardModeAttribute);
+    });
+    test("activates keyboard mode by setting attribute", () => {
+        expect(document.documentElement.hasAttribute(keyboardModeAttribute)).toBe(false);
+        activateKeyboardMode();
+        expect(document.documentElement.getAttribute(keyboardModeAttribute)).toBe("true");
+    });
+    test("deactivates keyboard mode by removing attribute", () => {
+        document.documentElement.setAttribute(keyboardModeAttribute, "true");
+        deactivateKeyboardMode();
+        expect(document.documentElement.hasAttribute(keyboardModeAttribute)).toBe(false);
+    });
+    test("checks keyboard mode correctly", () => {
+        expect(checkKeyboardMode()).toBe(false);
+        activateKeyboardMode();
+        expect(checkKeyboardMode()).toBe(true);
+        deactivateKeyboardMode();
+        expect(checkKeyboardMode()).toBe(false);
+    });
+});

package/dist/a11y/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * dialog: Completely trap the focus inside for tab navigation until content is closed
+ * example: Modal
+ *
+ * action-menu: Trap the arrow navigation, while tab moves the focus to
+ * the next element on the page after the trigger
+ * example: Dropdown Menu
+ *
+ * action-bar: Same as action-menu but with horizontal keyboard arrow navigation
+ *
+ * content-menu: Include dropdown content into the tab navigation flow and move the focus to
+ * the next element on the page after the trigger after navigation through the trapped content
+ * example: Header navigation dropdowns
+ *
+ * selection-menu: Keep the focus on the trigger and enable arrow key navigation with pseudo focusing with data-attributes
+ * without moving the focus away from the trigger
+ * example: Autocomplete
+ */
+export type TrapMode = "dialog" | "action-menu" | "action-bar" | "content-menu" | "selection-menu";
+export type FocusableElement = HTMLButtonElement | HTMLInputElement;
+export type FocusableOptions = {
+    additionalElement?: FocusableElement | null;
+    includeNegativeTabIndex?: boolean;
+};

package/dist/a11y/types.js

@@ -0,0 +1 @@
+export {};

package/dist/constants/keys.d.ts

@@ -0,0 +1,11 @@
+export declare const ESC = "Escape";
+export declare const SPACE = " ";
+export declare const ENTER = "Enter";
+export declare const TAB = "Tab";
+export declare const UP = "ArrowUp";
+export declare const DOWN = "ArrowDown";
+export declare const RIGHT = "ArrowRight";
+export declare const LEFT = "ArrowLeft";
+export declare const HOME = "Home";
+export declare const END = "End";
+export declare const BACKSPACE = "Backspace";

package/dist/constants/keys.js

@@ -0,0 +1,11 @@
+export const ESC = "Escape";
+export const SPACE = " ";
+export const ENTER = "Enter";
+export const TAB = "Tab";
+export const UP = "ArrowUp";
+export const DOWN = "ArrowDown";
+export const RIGHT = "ArrowRight";
+export const LEFT = "ArrowLeft";
+export const HOME = "Home";
+export const END = "End";
+export const BACKSPACE = "Backspace";

package/dist/css/StyleCache.d.ts

@@ -0,0 +1,7 @@
+type Styles = Record<string, string>;
+declare class StyleCache {
+    cache: Map<HTMLElement, Record<string, string>>;
+    set: (el: HTMLElement, styles: Styles) => void;
+    reset: () => void;
+}
+export default StyleCache;

package/dist/css/StyleCache.js

@@ -0,0 +1,19 @@
+class StyleCache {
+    cache = new Map();
+    set = (el, styles) => {
+        const originalStyles = {};
+        const cachedStyles = this.cache.get(el);
+        Object.keys(styles).forEach((key) => {
+            originalStyles[key] = el.style.getPropertyValue(key);
+        });
+        this.cache.set(el, { ...originalStyles, ...cachedStyles });
+        Object.assign(el.style, styles);
+    };
+    reset = () => {
+        for (const [el, styles] of this.cache.entries()) {
+            Object.assign(el.style, styles);
+        }
+        this.cache.clear();
+    };
+}
+export default StyleCache;

package/dist/css/classNames.d.ts

@@ -0,0 +1,7 @@
+type ClassNameValue = string | null | undefined | false;
+export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
+/**
+ * Resolve an array of values into a classname string
+ */
+declare const classNames: (...args: ClassName[]) => string;
+export default classNames;

package/dist/css/classNames.js

@@ -0,0 +1,19 @@
+/**
+ * Resolve an array of values into a classname string
+ */
+const classNames = (...args) => {
+    return args
+        .reduce((acc, cur) => {
+        if (Array.isArray(cur)) {
+            const className = classNames(...cur);
+            if (!className)
+                return acc;
+            return `${acc} ${className}`;
+        }
+        if (cur)
+            return `${acc} ${cur}`;
+        return acc;
+    }, "")
+        .trim();
+};
+export default classNames;

package/dist/css/index.d.ts

@@ -0,0 +1,2 @@
+export { default as classNames, type ClassName } from "./classNames";
+export { default as StyleCache } from "./StyleCache";

package/dist/css/index.js

@@ -0,0 +1,4 @@
+// External
+export { default as classNames } from "./classNames.js";
+// Internal
+export { default as StyleCache } from "./StyleCache.js";

package/dist/css/tests/StyleCache.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/css/tests/StyleCache.test.js

@@ -0,0 +1,45 @@
+import { expect, test, describe, beforeEach } from "vitest";
+import StyleCache from "../StyleCache.js";
+describe("css/StyleCache", () => {
+    let styleCache;
+    beforeEach(() => {
+        styleCache = new StyleCache();
+    });
+    test("applies styles and restores original styles on reset", () => {
+        const el = document.createElement("div");
+        el.style.color = "red";
+        el.style.overflow = "visible";
+        styleCache.set(el, { color: "blue", overflow: "hidden" });
+        expect(el.style.color).toBe("blue");
+        expect(el.style.overflow).toBe("hidden");
+        styleCache.reset();
+        expect(el.style.color).toBe("red");
+        expect(el.style.overflow).toBe("visible");
+    });
+    test("preserves original styles across multiple set calls", () => {
+        const el = document.createElement("div");
+        el.style.color = "red";
+        styleCache.set(el, { color: "blue" });
+        styleCache.set(el, { color: "green" });
+        styleCache.reset();
+        expect(el.style.color).toBe("red");
+    });
+    test("handles multiple elements", () => {
+        const el1 = document.createElement("div");
+        const el2 = document.createElement("div");
+        el1.style.color = "red";
+        el2.style.color = "blue";
+        styleCache.set(el1, { color: "green" });
+        styleCache.set(el2, { color: "yellow" });
+        styleCache.reset();
+        expect(el1.style.color).toBe("red");
+        expect(el2.style.color).toBe("blue");
+    });
+    test("clears cache after reset", () => {
+        const el = document.createElement("div");
+        el.style.color = "red";
+        styleCache.set(el, { color: "blue" });
+        styleCache.reset();
+        expect(styleCache.cache.size).toBe(0);
+    });
+});

package/dist/css/tests/classNames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/css/tests/classNames.test.js

@@ -0,0 +1,63 @@
+import { expect, test, describe } from "vitest";
+import classNames from "../classNames.js";
+describe("helpers/classNames", () => {
+    test("returns empty string when no arguments are provided", () => {
+        expect(classNames()).toBe("");
+    });
+    test("returns a single class name", () => {
+        expect(classNames("foo")).toBe("foo");
+    });
+    test("concatenates multiple class names", () => {
+        expect(classNames("foo", "bar", "baz")).toBe("foo bar baz");
+    });
+    test("filters out null values", () => {
+        expect(classNames("foo", null, "bar")).toBe("foo bar");
+        expect(classNames(null, "foo", null)).toBe("foo");
+        expect(classNames(null, null)).toBe("");
+    });
+    test("filters out undefined values", () => {
+        expect(classNames("foo", undefined, "bar")).toBe("foo bar");
+        expect(classNames(undefined, "foo", undefined)).toBe("foo");
+        expect(classNames(undefined, undefined)).toBe("");
+    });
+    test("filters out false values", () => {
+        expect(classNames("foo", false, "bar")).toBe("foo bar");
+        expect(classNames(false, "foo", false)).toBe("foo");
+        expect(classNames(false, false)).toBe("");
+    });
+    test("handles arrays of class names", () => {
+        expect(classNames(["foo", "bar"])).toBe("foo bar");
+        expect(classNames(["foo", "bar"], "baz")).toBe("foo bar baz");
+        expect(classNames("foo", ["bar", "baz"])).toBe("foo bar baz");
+    });
+    test("handles nested arrays", () => {
+        expect(classNames(["foo", ["bar", "baz"]])).toBe("foo bar baz");
+        expect(classNames([["foo", "bar"], "baz"])).toBe("foo bar baz");
+        expect(classNames([["foo"], ["bar"], ["baz"]])).toBe("foo bar baz");
+    });
+    test("filters out falsy values in arrays", () => {
+        expect(classNames(["foo", null, "bar"])).toBe("foo bar");
+        expect(classNames(["foo", undefined, "bar"])).toBe("foo bar");
+        expect(classNames(["foo", false, "bar"])).toBe("foo bar");
+        expect(classNames([null, undefined, false])).toBe("");
+    });
+    test("handles deeply nested arrays with falsy values", () => {
+        expect(classNames([["foo", null], [undefined, "bar"], false])).toBe("foo bar");
+        expect(classNames(["foo", [null, undefined, ["bar", false, "baz"]]])).toBe("foo bar baz");
+    });
+    test("handles empty arrays", () => {
+        expect(classNames([])).toBe("");
+        expect(classNames("foo", [], "bar")).toBe("foo bar");
+        expect(classNames([[], []])).toBe("");
+    });
+    test("handles empty strings", () => {
+        expect(classNames("", "foo")).toBe("foo");
+        expect(classNames("foo", "", "bar")).toBe("foo bar");
+        expect(classNames("", "", "")).toBe("");
+    });
+    test("handles conditional class names", () => {
+        const isActive = true;
+        const isDisabled = false;
+        expect(classNames("button", isActive && "active", isDisabled && "disabled")).toBe("button active");
+    });
+});

package/dist/dom/findClosestScrollableContainer.d.ts

@@ -0,0 +1,5 @@
+type Args = {
+    el: HTMLElement;
+};
+declare const _default: (args: Args) => HTMLElement | null;
+export default _default;

package/dist/dom/findClosestScrollableContainer.js

@@ -0,0 +1,12 @@
+const findClosestScrollableContainer = (args) => {
+    const { el, iteration } = args;
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    const isScrollable = overflowY.includes("scroll") || overflowY.includes("auto");
+    if (!el.parentElement)
+        return null;
+    if (isScrollable && el.scrollHeight > el.clientHeight)
+        return el;
+    return findClosestScrollableContainer({ el: el.parentElement, iteration: iteration + 1 });
+};
+export default (args) => findClosestScrollableContainer({ ...args, iteration: 0 });

package/dist/dom/findParent.d.ts

@@ -0,0 +1,2 @@
+declare const findParent: (element: HTMLElement, condition: (el: HTMLElement) => boolean) => HTMLElement | null;
+export default findParent;

package/dist/dom/findParent.js

@@ -0,0 +1,10 @@
+const findParent = (element, condition) => {
+    let currentElement = element.parentElement;
+    while (currentElement) {
+        if (condition(currentElement))
+            return currentElement;
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+};
+export default findParent;

package/dist/dom/index.d.ts

@@ -0,0 +1,3 @@
+export { default as findClosestScrollableContainer } from "./findClosestScrollableContainer";
+export { default as findParent } from "./findParent";
+export { default as getShadowRoot } from "./getShadowRoot";

package/dist/dom/index.js

@@ -0,0 +1,4 @@
+// Internal
+export { default as findClosestScrollableContainer } from "./findClosestScrollableContainer.js";
+export { default as findParent } from "./findParent.js";
+export { default as getShadowRoot } from "./getShadowRoot.js";

package/dist/dom/tests/findClosestScrollableContainer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dom/tests/findClosestScrollableContainer.test.js

@@ -0,0 +1,61 @@
+import { expect, test, describe, afterEach } from "vitest";
+import findClosestScrollableContainer from "../findClosestScrollableContainer.js";
+describe("dom/findClosestScrollableContainer", () => {
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+    test("returns null when no scrollable container is found", () => {
+        const container = document.createElement("div");
+        const child = document.createElement("div");
+        container.appendChild(child);
+        document.body.appendChild(container);
+        const result = findClosestScrollableContainer({ el: child });
+        expect(result).toBe(null);
+    });
+    test("returns element with overflow auto and scrollable content", () => {
+        const scrollable = document.createElement("div");
+        scrollable.style.overflowY = "auto";
+        scrollable.style.height = "100px";
+        const content = document.createElement("div");
+        content.style.height = "200px";
+        scrollable.appendChild(content);
+        document.body.appendChild(scrollable);
+        const result = findClosestScrollableContainer({ el: content });
+        expect(result).toBe(scrollable);
+    });
+    test("returns element with overflow scroll and scrollable content", () => {
+        const scrollable = document.createElement("div");
+        scrollable.style.overflowY = "scroll";
+        scrollable.style.height = "100px";
+        const content = document.createElement("div");
+        content.style.height = "200px";
+        scrollable.appendChild(content);
+        document.body.appendChild(scrollable);
+        const result = findClosestScrollableContainer({ el: content });
+        expect(result).toBe(scrollable);
+    });
+    test("returns first scrollable ancestor", () => {
+        const scrollable = document.createElement("div");
+        scrollable.style.overflowY = "auto";
+        scrollable.style.height = "100px";
+        const middle = document.createElement("div");
+        const child = document.createElement("div");
+        child.style.height = "200px";
+        scrollable.appendChild(middle);
+        middle.appendChild(child);
+        document.body.appendChild(scrollable);
+        const result = findClosestScrollableContainer({ el: child });
+        expect(result).toBe(scrollable);
+    });
+    test("skips element with overflow but no scrollable content", () => {
+        const notScrollable = document.createElement("div");
+        notScrollable.style.overflowY = "auto";
+        notScrollable.style.height = "200px";
+        const content = document.createElement("div");
+        content.style.height = "100px";
+        notScrollable.appendChild(content);
+        document.body.appendChild(notScrollable);
+        const result = findClosestScrollableContainer({ el: content });
+        expect(result).toBe(null);
+    });
+});