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

package/dist/flyout/utilities/tests/centerBySize.test.js

@@ -1,5 +1,5 @@
 import { expect, test, describe } from "vitest";
-import centerBySize from "../centerBySize.js";
+import centerBySize from "flyout/utilities/centerBySize";
 describe("flyout/centerBySize", () => {
     test("centers even value", () => {
         expect(centerBySize(100, 50)).toEqual(25);

package/dist/flyout/utilities/tests/getPositionFallbacks.test.js

@@ -1,5 +1,5 @@
 import { expect, test, describe } from "vitest";
-import getPositionFallbacks from "../getPositionFallbacks.js";
+import getPositionFallbacks from "flyout/utilities/getPositionFallbacks";
 describe("flyout/getPositionFallbacks", () => {
     test("returns original position first for top-start", () => {
         const result = getPositionFallbacks("top-start");

package/dist/flyout/utilities/tests/getRTLPosition.test.js

@@ -1,5 +1,5 @@
 import { expect, test, describe } from "vitest";
-import getRTLPosition from "../getRTLPosition.js";
+import getRTLPosition from "flyout/utilities/getRTLPosition";
 describe("flyout/getRTLPosition", () => {
     test("keeps top position", () => {
         expect(getRTLPosition("top")).toEqual("top");

package/dist/flyout/utilities/tests/isFullyVisible.test.js

@@ -1,35 +1,31 @@
+import isFullyVisible from "flyout/utilities/isFullyVisible";
 import { expect, test, describe } from "vitest";
-import isFullyVisible from "../isFullyVisible.js";
 describe("flyout/isFullyVisible", () => {
     test("returns true when flyout is fully visible within visual container", () => {
         const result = isFullyVisible({
             flyoutBounds: { left: 8, top: 8, width: 50, height: 50 },
-            visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
-            renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(true);
     });
     test("returns true when flyout is fully visible and is exactly on the edges of the visual container", () => {
         const result = isFullyVisible({
             flyoutBounds: { left: 8, top: 8, width: 84, height: 84 },
-            visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
-            renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(true);
     });
     test("returns false when flyout extends beyond left edge", () => {
         const result = isFullyVisible({
             flyoutBounds: { left: 7, top: 8, width: 50, height: 50 },
-            visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
-            renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
     test("returns false when flyout extends beyond top edge", () => {
         const result = isFullyVisible({
             flyoutBounds: { left: 8, top: 7, width: 50, height: 50 },
-            visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
-            renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
@@ -41,8 +37,7 @@ describe("flyout/isFullyVisible", () => {
                 width: 50,
                 height: 50,
             },
-            visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
-            renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
@@ -54,75 +49,56 @@ describe("flyout/isFullyVisible", () => {
                 width: 50,
                 height: 50,
             },
-            visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
-            renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
-    /**
-     * Render container
-     */
-    test("returns true when flyout is fully visible with offset render container", () => {
+    test("returns true when flyout is fully visible within container with non-zero position", () => {
         const result = isFullyVisible({
-            flyoutBounds: { left: 58, top: 58, width: 100, height: 100 },
-            renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
-            visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
+            flyoutBounds: { left: 108, top: 208, width: 50, height: 50 },
+            containerBounds: { left: 100, top: 200, width: 100, height: 100 },
         });
         expect(result).toBe(true);
     });
-    test("returns false when flyout extends beyond left edge with offset render container", () => {
+    test("returns false when flyout extends beyond left edge of container with non-zero position", () => {
         const result = isFullyVisible({
-            flyoutBounds: { left: 0, top: 58, width: 50, height: 50 },
-            renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
-            visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
+            flyoutBounds: { left: 107, top: 208, width: 50, height: 50 },
+            containerBounds: { left: 100, top: 200, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
-    test("returns false when flyout extends beyond top edge with offset render container", () => {
+    test("returns false when flyout extends beyond top edge of container with non-zero position", () => {
         const result = isFullyVisible({
-            flyoutBounds: { left: 58, top: 0, width: 50, height: 50 },
-            renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
-            visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
+            flyoutBounds: { left: 108, top: 207, width: 50, height: 50 },
+            containerBounds: { left: 100, top: 200, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
-    test("returns false when flyout extends beyond right edge with offset render container", () => {
+    test("returns false when flyout extends beyond multiple edges", () => {
         const result = isFullyVisible({
-            flyoutBounds: { left: 200 - 7, top: 58, width: 50, height: 50 },
-            renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
-            visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
+            flyoutBounds: { left: 5, top: 5, width: 100, height: 100 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
-    test("returns false when flyout extends beyond bottom edge with offset render container", () => {
+    test("returns false when flyout is completely outside container", () => {
         const result = isFullyVisible({
-            flyoutBounds: { left: 58, top: 200 - 7, width: 50, height: 50 },
-            renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
-            visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
+            flyoutBounds: { left: 200, top: 200, width: 50, height: 50 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(false);
     });
-    test("returns false when flyout is larger than visual container", () => {
+    test("returns true when flyout has zero dimensions but is within bounds", () => {
         const result = isFullyVisible({
-            flyoutBounds: { left: 0, top: 0, width: 300, height: 300 },
-            visualContainerBounds: { left: 0, top: 0, width: 200, height: 200 },
-            renderContainerBounds: { left: 0, top: 0, width: 200, height: 200 },
-        });
-        expect(result).toBe(false);
-    });
-    test("returns true when flyout is fully visible with negative render container position", () => {
-        const result = isFullyVisible({
-            flyoutBounds: { left: 118, top: 118, width: 100, height: 50 },
-            visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
-            renderContainerBounds: { left: -10, top: -10, width: 200, height: 200 },
+            flyoutBounds: { left: 50, top: 50, width: 0, height: 0 },
+            containerBounds: { left: 0, top: 0, width: 100, height: 100 },
         });
         expect(result).toBe(true);
     });
-    test("returns false when flyout extends beyond left with negative render container position", () => {
+    test("returns false when container is smaller than required offsets", () => {
         const result = isFullyVisible({
-            flyoutBounds: { left: 0, top: 110, width: 100, height: 50 },
-            visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
-            renderContainerBounds: { left: -10, top: -10, width: 200, height: 200 },
+            flyoutBounds: { left: 8, top: 8, width: 1, height: 1 },
+            containerBounds: { left: 0, top: 0, width: 10, height: 10 },
         });
         expect(result).toBe(false);
     });

package/dist/helpers/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/helpers/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/helpers/index.d.ts

@@ -0,0 +1 @@
+export { default as rafThrottle } from "./rafThrottle";

package/dist/helpers/index.js

@@ -0,0 +1,2 @@
+// Internal
+export { default as rafThrottle } from "./rafThrottle.js";

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

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

package/dist/helpers/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/i18n/index.d.ts

@@ -0,0 +1 @@
+export { default as isRTL } from "./isRTL";

package/dist/i18n/index.js

@@ -0,0 +1,2 @@
+// External
+export { default as isRTL } from "./isRTL.js";

package/dist/index.d.ts

@@ -1 +1,5 @@
-export { default as Flyout } from "./flyout";
+export { Flyout } from "./flyout";
+export { TrapFocus } from "./a11y";
+export { lockScroll } from "./scroll";
+export { isRTL } from "./i18n";
+export { classNames, type ClassName } from "./css";

package/dist/index.js

@@ -1 +1,5 @@
-export { default as Flyout } from "./flyout/index.js";
+export { Flyout } from "./flyout/index.js";
+export { TrapFocus } from "./a11y/index.js";
+export { lockScroll } from "./scroll/index.js";
+export { isRTL } from "./i18n/index.js";
+export { classNames } from "./css/index.js";

package/dist/internal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Internal utilities re-used in other Reshaped components but not meant to be used as a public API
+ * Their API is subject to change without a major version bump.
+ *
+ * If you want to use one of these utilities, open an issue or a PR about moving it to the public API file
+ */
+export { focusableSelector, getActiveElement, getFocusableElements, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode, } from "./a11y";
+export type { TrapMode, FocusableElement } from "./a11y";
+export { disableScroll, enableScroll } from "./scroll";
+export { rafThrottle } from "./helpers";
+export { getShadowRoot, findParent } from "./dom";

package/dist/internal.js

@@ -0,0 +1,10 @@
+/**
+ * Internal utilities re-used in other Reshaped components but not meant to be used as a public API
+ * Their API is subject to change without a major version bump.
+ *
+ * If you want to use one of these utilities, open an issue or a PR about moving it to the public API file
+ */
+export { focusableSelector, getActiveElement, getFocusableElements, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode, } from "./a11y/index.js";
+export { disableScroll, enableScroll } from "./scroll/index.js";
+export { rafThrottle } from "./helpers/index.js";
+export { getShadowRoot, findParent } from "./dom/index.js";

package/dist/platform/index.d.ts

@@ -0,0 +1 @@
+export declare const isIOS: () => boolean;

package/dist/platform/index.js

@@ -0,0 +1,16 @@
+const testPlatform = (re) => {
+    // Using experimental and deprecated features here since that's the only way to detect platform consistently
+    const platform = 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.navigator.userAgentData?.platform || window.navigator.platform;
+    return typeof window !== "undefined" ? re.test(platform) : false;
+};
+const isIPhone = () => testPlatform(/^iPhone/i);
+const isMac = () => testPlatform(/^Mac/i);
+const isIPad = () => {
+    return (testPlatform(/^iPad/i) ||
+        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+        (isMac() && navigator.maxTouchPoints > 1));
+};
+export const isIOS = () => isIPhone() || isIPad();

package/dist/scroll/disable.d.ts

@@ -0,0 +1,7 @@
+export declare const preventDefault: (e: Event) => void;
+/**
+ * Prevent scrolling events for the cases when dragging elements
+ * without locking the page with overflow
+ */
+export declare const disableScroll: () => void;
+export declare const enableScroll: () => void;

package/dist/scroll/disable.js

@@ -0,0 +1,15 @@
+export const preventDefault = (e) => e.preventDefault();
+/**
+ * Prevent scrolling events for the cases when dragging elements
+ * without locking the page with overflow
+ */
+export const disableScroll = () => {
+    window.addEventListener("wheel", preventDefault, { passive: false });
+    window.addEventListener("touchmove", preventDefault, { passive: false });
+    document.body.style.userSelect = "none";
+};
+export const enableScroll = () => {
+    window.removeEventListener("wheel", preventDefault);
+    window.removeEventListener("touchmove", preventDefault);
+    document.body.style.userSelect = "";
+};

package/dist/scroll/helpers.d.ts

@@ -0,0 +1 @@
+export declare const getScrollbarWidth: () => number;

package/dist/scroll/helpers.js

@@ -0,0 +1,17 @@
+export const getScrollbarWidth = (() => {
+    let scrollbarWidth;
+    return () => {
+        if (scrollbarWidth)
+            return scrollbarWidth;
+        const scrollDiv = document.createElement("div");
+        scrollDiv.style.position = "absolute";
+        scrollDiv.style.top = "-9999px";
+        scrollDiv.style.width = "50px";
+        scrollDiv.style.height = "50px";
+        scrollDiv.style.overflow = "scroll";
+        document.body.appendChild(scrollDiv);
+        scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
+        document.body.removeChild(scrollDiv);
+        return scrollbarWidth;
+    };
+})();

package/dist/scroll/index.d.ts

@@ -0,0 +1,2 @@
+export { lockScroll } from "./lock";
+export { disableScroll, enableScroll } from "./disable";

package/dist/scroll/index.js

@@ -0,0 +1,4 @@
+// External
+export { lockScroll } from "./lock.js";
+// Internal
+export { disableScroll, enableScroll } from "./disable.js";

package/dist/scroll/lock.d.ts

@@ -0,0 +1,7 @@
+export declare const lockScroll: (args: {
+    containerEl?: HTMLElement | null;
+    originEl?: HTMLElement | null;
+    callback?: () => void;
+}) => ((args?: {
+    callback?: () => void;
+}) => void) | undefined;

package/dist/scroll/lock.js

@@ -0,0 +1,26 @@
+import { findClosestScrollableContainer } from "../dom/index.js";
+import { isIOS } from "../platform/index.js";
+import lockSafariScroll from "./lockSafari.js";
+import lockStandardScroll from "./lockStandard.js";
+export const lockScroll = (args) => {
+    const isIOSLock = isIOS();
+    let reset = () => { };
+    const container = args.containerEl ??
+        (args.originEl && findClosestScrollableContainer({ el: args.originEl })) ??
+        document.body;
+    const lockedBodyScroll = container === document.body;
+    // Already locked so no need to lock again and trigger the callback
+    if (container.style.overflow === "hidden")
+        return;
+    if (isIOSLock && lockedBodyScroll) {
+        reset = lockSafariScroll();
+    }
+    else {
+        reset = lockStandardScroll({ container });
+    }
+    args.callback?.();
+    return (args) => {
+        reset();
+        args?.callback?.();
+    };
+};

package/dist/scroll/lockSafari.d.ts

@@ -0,0 +1,2 @@
+declare const lockSafariScroll: () => () => void;
+export default lockSafariScroll;

package/dist/scroll/lockSafari.js

@@ -0,0 +1,20 @@
+import { StyleCache } from "../css/index.js";
+const styleCache = new StyleCache();
+const lockSafariScroll = () => {
+    const viewport = window.visualViewport;
+    const offsetLeft = viewport?.offsetLeft || 0;
+    const offsetTop = viewport?.offsetTop || 0;
+    const { scrollX, scrollY } = window;
+    styleCache.set(document.body, {
+        position: "fixed",
+        top: `${-(scrollY - Math.floor(offsetTop))}px`,
+        left: `${-(scrollX - Math.floor(offsetLeft))}px`,
+        right: "0",
+        overflow: "hidden",
+    });
+    return () => {
+        styleCache.reset();
+        window.scrollTo({ top: scrollY, left: scrollX, behavior: "instant" });
+    };
+};
+export default lockSafariScroll;

package/dist/scroll/lockStandard.d.ts

@@ -0,0 +1,4 @@
+declare const lockStandardScroll: (args: {
+    container: HTMLElement;
+}) => () => void;
+export default lockStandardScroll;

package/dist/scroll/lockStandard.js

@@ -0,0 +1,15 @@
+import { StyleCache } from "../css/index.js";
+import { getScrollbarWidth } from "./helpers.js";
+const styleCache = new StyleCache();
+const lockStandardScroll = (args) => {
+    const { container } = args;
+    const rect = container.getBoundingClientRect();
+    const isOverflowing = rect.left + rect.right < window.innerWidth;
+    styleCache.set(container, { overflow: "hidden" });
+    if (isOverflowing) {
+        const scrollBarWidth = getScrollbarWidth();
+        styleCache.set(container, { paddingRight: `${scrollBarWidth}px` });
+    }
+    return () => styleCache.reset();
+};
+export default lockStandardScroll;

package/dist/scroll/tests/lock.test.d.ts

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

package/dist/scroll/tests/lock.test.js

@@ -0,0 +1,81 @@
+import { expect, test, describe, beforeEach, vi, afterEach } from "vitest";
+import { lockScroll } from "../lock.js";
+// Mock the platform module to avoid iOS path
+vi.mock("@/platform", () => ({
+    isIOS: () => false,
+}));
+describe("scroll/lockScroll", () => {
+    beforeEach(() => {
+        // Reset the body styles before each test
+        document.body.style.overflow = "";
+        document.body.style.paddingRight = "";
+        document.body.innerHTML = "";
+    });
+    afterEach(() => {
+        // Clean up
+        document.body.style.overflow = "";
+        document.body.style.paddingRight = "";
+        document.body.innerHTML = "";
+    });
+    test("locks scroll on body", () => {
+        const unlock = lockScroll({});
+        expect(document.body.style.overflow).toBe("hidden");
+        unlock?.();
+        expect(document.body.style.overflow).toBe("");
+    });
+    test("locks scroll on custom container element", () => {
+        const container = document.createElement("div");
+        container.style.overflow = "auto";
+        container.style.height = "200px";
+        document.body.appendChild(container);
+        const unlock = lockScroll({ containerEl: container });
+        expect(container.style.overflow).toBe("hidden");
+        expect(document.body.style.overflow).not.toBe("hidden");
+        unlock?.();
+        expect(container.style.overflow).toBe("auto");
+    });
+    test("finds scrollable container from origin element", () => {
+        const scrollableContainer = document.createElement("div");
+        scrollableContainer.style.overflow = "auto";
+        scrollableContainer.style.height = "200px";
+        document.body.appendChild(scrollableContainer);
+        // Add content to make it scrollable
+        const content = document.createElement("div");
+        content.style.height = "500px";
+        scrollableContainer.appendChild(content);
+        const originEl = document.createElement("div");
+        scrollableContainer.appendChild(originEl);
+        const unlock = lockScroll({ originEl });
+        expect(scrollableContainer.style.overflow).toBe("hidden");
+        unlock?.();
+        expect(scrollableContainer.style.overflow).toBe("auto");
+    });
+    test("unlocks after multiple locks", () => {
+        const unlock1 = lockScroll({});
+        const unlock2 = lockScroll({});
+        expect(document.body.style.overflow).toBe("hidden");
+        unlock1?.();
+        expect(document.body.style.overflow).toBe("");
+        unlock2?.();
+        expect(document.body.style.overflow).toBe("");
+    });
+    test("calls lock callback immediately", () => {
+        const lockCb = vi.fn();
+        lockScroll({ callback: lockCb });
+        expect(lockCb).toHaveBeenCalledTimes(1);
+    });
+    test("calls unlock callback when unlocking", () => {
+        const unlockCb = vi.fn();
+        const unlock = lockScroll({});
+        unlock?.({ callback: unlockCb });
+        expect(unlockCb).toHaveBeenCalledTimes(1);
+    });
+    test("handles origin element when no scrollable container is found (falls back to body)", () => {
+        const originEl = document.createElement("div");
+        document.body.appendChild(originEl);
+        const unlock = lockScroll({ originEl });
+        expect(document.body.style.overflow).toBe("hidden");
+        unlock?.();
+        expect(document.body.style.overflow).toBe("");
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@reshaped/utilities",
   "description": "Vanilla JS utilities for implementing common UI patterns",
-  "version": "3.9.1-canary.2",
+  "version": "3.10.0-canary.4",
   "license": "MIT",
   "homepage": "https://reshaped.so",
   "repository": {
@@ -27,6 +27,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./internal": {
+      "types": "./dist/internal.d.ts",
+      "import": "./dist/internal.js",
+      "default": "./dist/internal.js"
+    },
     "./package.json": "./package.json"
   },
   "peerDependencies": {

package/dist/flyout/utilities/findClosestFixedContainer.d.ts

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

package/dist/flyout/utilities/findClosestFixedContainer.js

@@ -1,18 +0,0 @@
-import getShadowRoot from "../../dom/getShadowRoot.js";
-const findClosestPositionContainer = (args) => {
-    const { el, iteration = 0 } = args;
-    const style = el && window.getComputedStyle(el);
-    const position = style?.position;
-    const isFixed = position === "fixed" || position === "sticky";
-    if (iteration === 0) {
-        const shadowRoot = getShadowRoot(el);
-        if (shadowRoot?.firstElementChild)
-            return shadowRoot.firstElementChild;
-    }
-    if (el === document.body || !el)
-        return document.body;
-    if (isFixed)
-        return el;
-    return findClosestPositionContainer({ el: el.parentElement, iteration: iteration + 1 });
-};
-export default (args) => findClosestPositionContainer({ ...args, iteration: 0 });