@reshaped/utilities 3.9.1-canary.2

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

@@ -0,0 +1,114 @@
+import { expect, test, describe } from "vitest";
+import getPositionFallbacks from "../getPositionFallbacks.js";
+describe("flyout/getPositionFallbacks", () => {
+    test("returns original position first for top-start", () => {
+        const result = getPositionFallbacks("top-start");
+        expect(result[0]).toBe("top-start");
+    });
+    test("returns fallback order for top-start", () => {
+        const result = getPositionFallbacks("top-start");
+        expect(result).toEqual([
+            "top-start",
+            "top-end",
+            "top",
+            "bottom-start",
+            "bottom-end",
+            "bottom",
+            "start-top",
+            "start-bottom",
+            "start",
+            "end-top",
+            "end-bottom",
+            "end",
+        ]);
+    });
+    test("returns fallback order for top", () => {
+        const result = getPositionFallbacks("top");
+        expect(result).toEqual([
+            "top",
+            "top-start",
+            "top-end",
+            "bottom",
+            "bottom-start",
+            "bottom-end",
+            "start",
+            "start-top",
+            "start-bottom",
+            "end",
+            "end-top",
+            "end-bottom",
+        ]);
+    });
+    test("returns fallback order for bottom-start", () => {
+        const result = getPositionFallbacks("bottom-start");
+        expect(result).toEqual([
+            "bottom-start",
+            "bottom-end",
+            "bottom",
+            "top-start",
+            "top-end",
+            "top",
+            "end-top",
+            "end-bottom",
+            "end",
+            "start-top",
+            "start-bottom",
+            "start",
+        ]);
+    });
+    test("returns fallback order for start-top", () => {
+        const result = getPositionFallbacks("start-top");
+        expect(result).toEqual([
+            "start-top",
+            "start-bottom",
+            "start",
+            "end-top",
+            "end-bottom",
+            "end",
+            "top-start",
+            "top-end",
+            "top",
+            "bottom-start",
+            "bottom-end",
+            "bottom",
+        ]);
+    });
+    test("returns fallback order for end-bottom", () => {
+        const result = getPositionFallbacks("end-bottom");
+        expect(result).toEqual([
+            "end-bottom",
+            "end-top",
+            "end",
+            "start-bottom",
+            "start-top",
+            "start",
+            "bottom-end",
+            "bottom-start",
+            "bottom",
+            "top-end",
+            "top-start",
+            "top",
+        ]);
+    });
+    test("filters positions based on availableFallbacks", () => {
+        const result = getPositionFallbacks("top-start", [
+            "top-start",
+            "top",
+            "bottom-start",
+            "start-top",
+        ]);
+        expect(result).toEqual(["top-start", "top", "bottom-start", "start-top"]);
+    });
+    test("returns only original position when availableFallbacks only contains it", () => {
+        const result = getPositionFallbacks("top-start", ["top-start"]);
+        expect(result).toEqual(["top-start"]);
+    });
+    test("excludes positions not in availableFallbacks", () => {
+        const result = getPositionFallbacks("top", ["top", "bottom", "start"]);
+        expect(result).toEqual(["top", "bottom", "start"]);
+    });
+    test("maintains order priority when filtering with availableFallbacks", () => {
+        const result = getPositionFallbacks("top-end", ["top", "top-end", "bottom", "end"]);
+        expect(result).toEqual(["top-end", "top", "bottom", "end"]);
+    });
+});

package/dist/flyout/utilities/tests/getRTLPosition.test.d.ts

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

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

@@ -0,0 +1,19 @@
+import { expect, test, describe } from "vitest";
+import getRTLPosition from "../getRTLPosition.js";
+describe("flyout/getRTLPosition", () => {
+    test("keeps top position", () => {
+        expect(getRTLPosition("top")).toEqual("top");
+    });
+    test("mirrors top-start position", () => {
+        expect(getRTLPosition("top-start")).toEqual("top-end");
+    });
+    test("mirrors start position", () => {
+        expect(getRTLPosition("start")).toEqual("end");
+    });
+    test("mirrors end position", () => {
+        expect(getRTLPosition("end")).toEqual("start");
+    });
+    test("mirrors bottom-end position", () => {
+        expect(getRTLPosition("bottom-end")).toEqual("bottom-start");
+    });
+});

package/dist/flyout/utilities/tests/isFullyVisible.test.d.ts

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

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

@@ -0,0 +1,129 @@
+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 },
+        });
+        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 },
+        });
+        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 },
+        });
+        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 },
+        });
+        expect(result).toBe(false);
+    });
+    test("returns false when flyout extends beyond right edge", () => {
+        const result = isFullyVisible({
+            flyoutBounds: {
+                left: 100 - 50 - 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 },
+        });
+        expect(result).toBe(false);
+    });
+    test("returns false when flyout extends beyond bottom edge", () => {
+        const result = isFullyVisible({
+            flyoutBounds: {
+                left: 8,
+                top: 100 - 50 - 7,
+                width: 50,
+                height: 50,
+            },
+            visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
+            renderContainerBounds: { 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", () => {
+        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 },
+        });
+        expect(result).toBe(true);
+    });
+    test("returns false when flyout extends beyond left edge with offset render container", () => {
+        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 },
+        });
+        expect(result).toBe(false);
+    });
+    test("returns false when flyout extends beyond top edge with offset render container", () => {
+        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 },
+        });
+        expect(result).toBe(false);
+    });
+    test("returns false when flyout extends beyond right edge with offset render container", () => {
+        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 },
+        });
+        expect(result).toBe(false);
+    });
+    test("returns false when flyout extends beyond bottom edge with offset render 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 },
+        });
+        expect(result).toBe(false);
+    });
+    test("returns false when flyout is larger than visual container", () => {
+        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 },
+        });
+        expect(result).toBe(true);
+    });
+    test("returns false when flyout extends beyond left with negative render container position", () => {
+        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 },
+        });
+        expect(result).toBe(false);
+    });
+});

package/dist/helpers/rafThrottle.d.ts

@@ -0,0 +1,2 @@
+declare const rafThrottle: <T extends (...args: any[]) => void>(fn: T) => T;
+export default rafThrottle;

package/dist/helpers/rafThrottle.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const rafThrottle = (fn) => {
+    let rafId = null;
+    let args = null;
+    return function (...newArgs) {
+        args = newArgs;
+        if (rafId === null) {
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                fn(...args);
+            });
+        }
+    };
+};
+export default rafThrottle;

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

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

package/dist/helpers/tests/rafThrottle.test.js

@@ -0,0 +1,49 @@
+import { expect, test, describe, beforeEach, vi } from "vitest";
+import rafThrottle from "../rafThrottle.js";
+const waitForNextFrame = () => {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            resolve();
+        });
+    });
+};
+describe("helpers/rafThrottle", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let mockFn;
+    beforeEach(() => {
+        mockFn = vi.fn();
+    });
+    test("calls the function once per animation frame", async () => {
+        const throttled = rafThrottle(mockFn);
+        throttled("first");
+        throttled("second");
+        throttled("third");
+        expect(mockFn).not.toHaveBeenCalled();
+        await waitForNextFrame();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenCalledWith("third");
+    });
+    test("handles multiple arguments correctly", async () => {
+        const throttled = rafThrottle(mockFn);
+        throttled("arg1", "arg2", 123);
+        throttled("new1", "new2", 456);
+        await waitForNextFrame();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenCalledWith("new1", "new2", 456);
+    });
+    test("allows multiple calls across different frames", async () => {
+        const throttled = rafThrottle(mockFn);
+        // First frame
+        throttled("frame1-1");
+        throttled("frame1-2");
+        await waitForNextFrame();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenCalledWith("frame1-2");
+        // Second frame
+        throttled("frame2-1");
+        throttled("frame2-2");
+        await waitForNextFrame();
+        expect(mockFn).toHaveBeenCalledTimes(2);
+        expect(mockFn).toHaveBeenCalledWith("frame2-2");
+    });
+});

package/dist/i18n/isRTL.d.ts

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

package/dist/i18n/isRTL.js

@@ -0,0 +1,10 @@
+const isRTL = () => {
+    const root = document.documentElement;
+    const dir = root.dir;
+    if (dir === "rtl" || dir === "ltr")
+        return dir === "rtl";
+    // Fallback to computed style if dir attribute is not set
+    const computedStyle = window.getComputedStyle(root);
+    return computedStyle.direction === "rtl";
+};
+export default isRTL;

package/dist/i18n/tests/isRTL.test.d.ts

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

package/dist/i18n/tests/isRTL.test.js

@@ -0,0 +1,51 @@
+import { expect, test, describe, beforeEach, vi, afterAll } from "vitest";
+import isRTL from "../isRTL.js";
+describe("i18n/isRTL", () => {
+    beforeEach(() => {
+        document.documentElement.removeAttribute("dir");
+    });
+    afterAll(() => {
+        document.documentElement.removeAttribute("dir");
+    });
+    test("returns true when dir attribute is set to 'rtl'", () => {
+        document.documentElement.dir = "rtl";
+        expect(isRTL()).toBe(true);
+    });
+    test("returns false when dir attribute is set to 'ltr'", () => {
+        document.documentElement.dir = "ltr";
+        expect(isRTL()).toBe(false);
+    });
+    test("returns true when dir attribute is not set but computed style direction is 'rtl'", () => {
+        window.getComputedStyle = vi.fn(() => ({
+            direction: "rtl",
+        }));
+        expect(isRTL()).toBe(true);
+    });
+    test("returns false when dir attribute is not set and computed style direction is 'ltr'", () => {
+        window.getComputedStyle = vi.fn(() => ({
+            direction: "ltr",
+        }));
+        expect(isRTL()).toBe(false);
+    });
+    test("returns false when dir attribute is empty string", () => {
+        document.documentElement.dir = "";
+        window.getComputedStyle = vi.fn(() => ({
+            direction: "rtl",
+        }));
+        expect(isRTL()).toBe(true);
+    });
+    test("returns false when dir attribute is invalid value", () => {
+        document.documentElement.dir = "invalid";
+        window.getComputedStyle = vi.fn(() => ({
+            direction: "rtl",
+        }));
+        expect(isRTL()).toBe(true);
+    });
+    test("prioritizes dir attribute over computed style", () => {
+        document.documentElement.dir = "ltr";
+        window.getComputedStyle = vi.fn(() => ({
+            direction: "rtl",
+        }));
+        expect(isRTL()).toBe(false);
+    });
+});

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@reshaped/utilities",
+  "description": "Vanilla JS utilities for implementing common UI patterns",
+  "version": "3.9.1-canary.2",
+  "license": "MIT",
+  "homepage": "https://reshaped.so",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reshaped-ui/reshaped.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/reshaped-ui/reshaped/issues"
+  },
+  "author": {
+    "name": "Dmitry Belyaev",
+    "email": "blv.dmitry@gmail.com",
+    "url": "https://reshaped.so"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "tsc-watch --onSuccess \"resolve-tspaths\"",
+    "build": "tsc && resolve-tspaths",
+    "test:browser": "vitest run --project=browser"
+  }
+}