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

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

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

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

@@ -0,0 +1,45 @@
+import { expect, test, describe } from "vitest";
+import findParent from "../findParent.js";
+describe("dom/findParent", () => {
+    test("returns null when element has no parent", () => {
+        const element = document.createElement("div");
+        const result = findParent(element, () => true);
+        expect(result).toBe(null);
+    });
+    test("returns null when no parent matches the condition", () => {
+        const parent = document.createElement("div");
+        const child = document.createElement("span");
+        parent.appendChild(child);
+        const result = findParent(child, () => false);
+        expect(result).toBe(null);
+    });
+    test("returns the immediate parent when it matches", () => {
+        const parent = document.createElement("div");
+        parent.className = "target";
+        const child = document.createElement("span");
+        parent.appendChild(child);
+        const result = findParent(child, (el) => el.className === "target");
+        expect(result).toBe(parent);
+    });
+    test("returns a distant ancestor when it matches", () => {
+        const grandparent = document.createElement("div");
+        grandparent.className = "target";
+        const parent = document.createElement("div");
+        const child = document.createElement("span");
+        grandparent.appendChild(parent);
+        parent.appendChild(child);
+        const result = findParent(child, (el) => el.className === "target");
+        expect(result).toBe(grandparent);
+    });
+    test("returns the first matching parent", () => {
+        const grandparent = document.createElement("div");
+        grandparent.className = "match";
+        const parent = document.createElement("div");
+        parent.className = "match";
+        const child = document.createElement("span");
+        grandparent.appendChild(parent);
+        parent.appendChild(child);
+        const result = findParent(child, (el) => el.className === "match");
+        expect(result).toBe(parent);
+    });
+});

package/dist/flyout/Flyout.d.ts

@@ -7,7 +7,7 @@ declare class Flyout {
      * Public methods
      */
     update: (options?: Partial<Options>) => ReturnType<typeof applyPosition>;
-    open: () => ReturnType<typeof this.update>;
-    close: () => void;
+    activate: () => ReturnType<typeof this.update>;
+    deactivate: () => void;
 }
 export default Flyout;

package/dist/flyout/Flyout.js

@@ -1,6 +1,6 @@
-import rafThrottle from "../helpers/rafThrottle.js";
+import { findClosestScrollableContainer } from "../dom/index.js";
+import { rafThrottle } from "../helpers/index.js";
 import applyPosition from "./utilities/applyPosition.js";
-import findClosestScrollableContainer from "./utilities/findClosestScrollableContainer.js";
 class Flyout {
     #active = false;
     #lastUsedPosition = null;
@@ -18,7 +18,7 @@ class Flyout {
         return result;
     };
     #addParentScrollHandler = () => {
-        const { trigger, onClose } = this.#options;
+        const { trigger, onDeactivate } = this.#options;
         if (!trigger)
             return;
         const container = findClosestScrollableContainer({ el: trigger });
@@ -36,7 +36,7 @@ class Flyout {
                 triggerBounds.left < containerBounds.left ||
                 triggerBounds.right > containerBounds.right ||
                 triggerBounds.bottom > containerBounds.bottom) {
-                onClose();
+                onDeactivate();
             }
             else {
                 this.#update();
@@ -86,7 +86,7 @@ class Flyout {
             this.#options = { ...this.#options, ...options };
         return this.#update();
     };
-    open = () => {
+    activate = () => {
         const result = this.#update();
         this.#addParentScrollHandler();
         this.#addRTLHandler();
@@ -94,7 +94,7 @@ class Flyout {
         this.#active = true;
         return result;
     };
-    close = () => {
+    deactivate = () => {
         this.#lastUsedPosition = null;
         this.#active = false;
         this.#removeHandlers();

package/dist/flyout/index.d.ts

@@ -1 +1 @@
-export { default } from "./Flyout";
+export { default as Flyout } from "./Flyout";

package/dist/flyout/index.js

@@ -1 +1 @@
-export { default } from "./Flyout.js";
+export { default as Flyout } from "./Flyout.js";

package/dist/flyout/tests/Flyout.test.js

@@ -1,5 +1,5 @@
 import { expect, test, describe, beforeEach, afterEach, vi } from "vitest";
-import Flyout from "../Flyout.js";
+import Flyout from "flyout/Flyout";
 describe("flyout/Flyout", () => {
     let content;
     let trigger;
@@ -31,9 +31,9 @@ describe("flyout/Flyout", () => {
             trigger,
             triggerCoordinates: null,
             position: "top",
-            onClose,
+            onDeactivate: onClose,
         });
-        const result = flyout.open();
+        const result = flyout.activate();
         expect(result.position).toBe("top");
         trigger.style.top = "0px";
         const resultUpdate = flyout.update();
@@ -53,9 +53,9 @@ describe("flyout/Flyout", () => {
             trigger,
             triggerCoordinates: null,
             position: "top",
-            onClose,
+            onDeactivate: onClose,
         });
-        flyout.open();
+        flyout.activate();
         // Scroll trigger out of bounds
         trigger.style.position = "absolute";
         trigger.style.top = "-100px";
@@ -88,9 +88,9 @@ describe("flyout/Flyout", () => {
             trigger,
             triggerCoordinates: null,
             position: "top",
-            onClose,
+            onDeactivate: onClose,
         });
-        flyout.open();
+        flyout.activate();
         // Scroll within bounds
         container.scrollTop = 50;
         container.dispatchEvent(new Event("scroll", { bubbles: true }));
@@ -111,9 +111,9 @@ describe("flyout/Flyout", () => {
             trigger,
             triggerCoordinates: null,
             position: "start",
-            onClose,
+            onDeactivate: onClose,
         });
-        const initialResult = flyout.open();
+        const initialResult = flyout.activate();
         expect(initialResult.position).toBe("start");
         // Start is positioned from the right side
         expect(content.style.right).toBe("0px");

package/dist/flyout/types.d.ts

@@ -11,7 +11,7 @@ export type Options = {
     content: HTMLElement;
     trigger?: HTMLElement | null;
     container?: HTMLElement | null;
-    triggerCoordinates: Coordinates | null;
+    triggerCoordinates?: Coordinates | null;
     position: Position;
     fallbackPositions?: Position[];
     width?: Width;
@@ -19,6 +19,6 @@ export type Options = {
     fallbackMinHeight?: string;
     contentGap?: number;
     contentShift?: number;
-    onClose: () => void;
+    onDeactivate: () => void;
 };
 export {};

package/dist/flyout/utilities/applyPosition.js

@@ -1,4 +1,4 @@
-import getShadowRoot from "../../dom/getShadowRoot.js";
+import { getShadowRoot } from "../../dom/index.js";
 import isRTL from "../../i18n/isRTL.js";
 import { VIEWPORT_OFFSET, RESET_STYLES } from "../constants.js";
 import calculateLayoutAdjustment from "./calculateLayoutAdjustment.js";

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

@@ -1,5 +1,5 @@
 import { expect, test, describe, beforeEach, afterEach, vi } from "vitest";
-import applyPosition from "../applyPosition.js";
+import applyPosition from "flyout/utilities/applyPosition";
 describe("flyout/applyPosition", () => {
     let content;
     let trigger;
@@ -31,7 +31,7 @@ describe("flyout/applyPosition", () => {
             triggerCoordinates: null,
             position: "top",
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         expect(result.position).toBe("top");
     });
@@ -44,7 +44,7 @@ describe("flyout/applyPosition", () => {
             triggerCoordinates: null,
             position: "top",
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         expect(result.position).toBe("bottom");
     });
@@ -58,7 +58,7 @@ describe("flyout/applyPosition", () => {
             triggerCoordinates,
             position: "top",
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         expect(result.position).toBe("top");
         expect(content.style.transform).toBe(`translate(150px, ${250 - window.innerHeight}px)`);
@@ -70,7 +70,7 @@ describe("flyout/applyPosition", () => {
                 triggerCoordinates: null,
                 position: "top",
                 lastUsedPosition: null,
-                onClose: vi.fn(),
+                onDeactivate: vi.fn(),
             });
         }).toThrow("Trigger bounds are required");
     });
@@ -82,7 +82,7 @@ describe("flyout/applyPosition", () => {
             position: "top",
             width: "200px",
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         expect(content.style.width).toBe("200px");
     });
@@ -94,7 +94,7 @@ describe("flyout/applyPosition", () => {
             position: "top",
             width: "trigger",
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         expect(result.position).toBeTruthy();
     });
@@ -108,7 +108,7 @@ describe("flyout/applyPosition", () => {
             triggerCoordinates: null,
             position: "top",
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         // Should try full-width positions
         expect(result.position).toBeTruthy();
@@ -123,7 +123,7 @@ describe("flyout/applyPosition", () => {
             position: "top",
             fallbackPositions: ["start"],
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         expect(result.position).toBe("start");
     });
@@ -135,7 +135,7 @@ describe("flyout/applyPosition", () => {
             triggerCoordinates: null,
             position: "top",
             lastUsedPosition: null,
-            onClose: vi.fn(),
+            onDeactivate: vi.fn(),
         });
         // Clone should be removed
         expect(document.body.children.length).toBe(initialChildCount);

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

@@ -1,6 +1,6 @@
 import { expect, test, describe, vi, beforeEach } from "vitest";
-import { VIEWPORT_OFFSET } from "../../constants.js";
-import calculateLayoutAdjustment from "../calculateLayoutAdjustment.js";
+import { VIEWPORT_OFFSET } from "flyout/constants";
+import calculateLayoutAdjustment from "flyout/utilities/calculateLayoutAdjustment";
 describe("flyout/calculateLayoutAdjustment", () => {
     const createBounds = (left, top, width, height) => {
         return {

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

@@ -1,5 +1,5 @@
 import { expect, test, describe, vi, beforeEach } from "vitest";
-import calculatePosition from "../calculatePosition.js";
+import calculatePosition from "flyout/utilities/calculatePosition";
 describe("flyout/calculatePosition", () => {
     const createBounds = (left, top, width, height) => {
         return {

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,5 +1,5 @@
+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({

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;