@reshaped/utilities 3.9.1-canary.2

package/dist/flyout/utilities/findClosestFixedContainer.js

@@ -0,0 +1,18 @@
+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 });

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

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

package/dist/flyout/utilities/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/flyout/utilities/getPositionFallbacks.d.ts

@@ -0,0 +1,8 @@
+import type { Position } from "../types";
+/**
+ * Get an order of positions to try to fit flyout on the screen based on its starting position
+ * @param position - position being checked
+ * @param availableFallbacks
+ */
+declare const getPositionFallbacks: (position: Position, availableFallbacks?: Position[]) => Position[];
+export default getPositionFallbacks;

package/dist/flyout/utilities/getPositionFallbacks.js

@@ -0,0 +1,43 @@
+// All available positions for each side
+const positions = {
+    top: ["top-start", "top-end", "top"],
+    bottom: ["bottom-start", "bottom-end", "bottom"],
+    start: ["start-top", "start-bottom", "start"],
+    end: ["end-top", "end-bottom", "end"],
+};
+// Order of sides to try depending on the starting side
+const fallbackOrder = {
+    top: ["bottom", "start", "end"],
+    bottom: ["top", "end", "start"],
+    start: ["end", "top", "bottom"],
+    end: ["start", "bottom", "top"],
+};
+/**
+ * Get an order of positions to try to fit flyout on the screen based on its starting position
+ * @param position - position being checked
+ * @param availableFallbacks
+ */
+const getPositionFallbacks = (position, availableFallbacks) => {
+    const result = new Set([position]);
+    const chunks = position.split("-");
+    const [firstChunk] = chunks;
+    const passedPositionOrder = positions[firstChunk];
+    const startingFallbackIndex = passedPositionOrder.indexOf(position);
+    const fallbackIndexOrder = [startingFallbackIndex];
+    passedPositionOrder.forEach((_, index) => {
+        if (index === startingFallbackIndex)
+            return;
+        fallbackIndexOrder.push(index);
+    });
+    [firstChunk, ...fallbackOrder[firstChunk]].forEach((fallbackSide) => {
+        const fallbackOrder = positions[fallbackSide];
+        fallbackIndexOrder.forEach((index) => {
+            const position = fallbackOrder[index];
+            if (availableFallbacks?.indexOf(position) === -1)
+                return;
+            result.add(position);
+        });
+    });
+    return Array.from(result);
+};
+export default getPositionFallbacks;

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

@@ -0,0 +1,3 @@
+import { Position } from "../types";
+declare const getRTLPosition: (position: Position) => Position;
+export default getRTLPosition;

package/dist/flyout/utilities/getRTLPosition.js

@@ -0,0 +1,8 @@
+const getRTLPosition = (position) => {
+    if (position.includes("start"))
+        return position.replace("start", "end");
+    if (position.includes("end"))
+        return position.replace("end", "start");
+    return position;
+};
+export default getRTLPosition;

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

@@ -0,0 +1,6 @@
+import type { Coordinates } from "../types";
+/**
+ * Include any missing properties to match DOMRect interface when coordinates are passed
+ */
+declare const getRectFromCoordinates: (coordinates: DOMRect | Coordinates) => DOMRect;
+export default getRectFromCoordinates;

package/dist/flyout/utilities/getRectFromCoordinates.js

@@ -0,0 +1,18 @@
+/**
+ * Include any missing properties to match DOMRect interface when coordinates are passed
+ */
+const getRectFromCoordinates = (coordinates) => {
+    if ("width" in coordinates && coordinates.width !== undefined)
+        return coordinates;
+    return {
+        ...coordinates,
+        width: 0,
+        height: 0,
+        left: coordinates.x,
+        right: coordinates.x,
+        top: coordinates.y,
+        bottom: coordinates.y,
+        toJSON: () => { },
+    };
+};
+export default getRectFromCoordinates;

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

@@ -0,0 +1,13 @@
+type Bounds = Pick<DOMRect, "left" | "top" | "width" | "height">;
+/**
+ * Check if element visually fits within its render container
+ * @param flyoutBounds - Bounds of the flyout content
+ * @param visualContainerBounds - Bounds of the container where the flyout content should visually fit
+ * @param renderContainerBounds - Bounds of the container where flyout content is rendered
+ */
+declare const isFullyVisible: (args: {
+    flyoutBounds: Bounds;
+    visualContainerBounds: Bounds;
+    renderContainerBounds: Bounds;
+}) => boolean;
+export default isFullyVisible;

package/dist/flyout/utilities/isFullyVisible.js

@@ -0,0 +1,28 @@
+import { CONTAINER_OFFSET } from "../constants.js";
+/**
+ * Check if element visually fits within its render container
+ * @param flyoutBounds - Bounds of the flyout content
+ * @param visualContainerBounds - Bounds of the container where the flyout content should visually fit
+ * @param renderContainerBounds - Bounds of the container where flyout content is rendered
+ */
+const isFullyVisible = (args) => {
+    const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
+    const flyoutLeft = renderContainerBounds.left + flyoutBounds.left;
+    const flyoutTop = renderContainerBounds.top + flyoutBounds.top;
+    const containerLeft = visualContainerBounds.left;
+    const containerTop = visualContainerBounds.top;
+    if (flyoutLeft < containerLeft + CONTAINER_OFFSET)
+        return false;
+    if (flyoutTop < containerTop + CONTAINER_OFFSET)
+        return false;
+    if (flyoutLeft + flyoutBounds.width >
+        containerLeft + visualContainerBounds.width - CONTAINER_OFFSET) {
+        return false;
+    }
+    if (flyoutTop + flyoutBounds.height >
+        containerTop + visualContainerBounds.height - CONTAINER_OFFSET) {
+        return false;
+    }
+    return true;
+};
+export default isFullyVisible;

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

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

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

@@ -0,0 +1,143 @@
+import { expect, test, describe, beforeEach, afterEach, vi } from "vitest";
+import applyPosition from "../applyPosition.js";
+describe("flyout/applyPosition", () => {
+    let content;
+    let trigger;
+    beforeEach(() => {
+        // Create mock elements
+        content = document.createElement("div");
+        content.style.width = "100px";
+        content.style.height = "50px";
+        document.body.appendChild(content);
+        trigger = document.createElement("button");
+        trigger.style.position = "absolute";
+        trigger.style.left = "100px";
+        trigger.style.top = "200px";
+        trigger.style.width = "50px";
+        trigger.style.height = "30px";
+        document.body.appendChild(trigger);
+    });
+    afterEach(() => {
+        // Clean up
+        if (content.parentNode)
+            content.parentNode.removeChild(content);
+        if (trigger.parentNode)
+            trigger.parentNode.removeChild(trigger);
+    });
+    test("applies position when flyout is fully visible", () => {
+        const result = applyPosition({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        expect(result.position).toBe("top");
+    });
+    test("uses fallback position when first position is not visible", () => {
+        // Position trigger at top edge so "top" won't fit
+        trigger.style.top = "0px";
+        const result = applyPosition({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        expect(result.position).toBe("bottom");
+    });
+    test("uses triggerCoordinates when provided", () => {
+        const triggerCoordinates = {
+            x: 150,
+            y: 250,
+        };
+        const result = applyPosition({
+            content,
+            triggerCoordinates,
+            position: "top",
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        expect(result.position).toBe("top");
+        expect(content.style.transform).toBe(`translate(150px, ${250 - window.innerHeight}px)`);
+    });
+    test("throws error when triggerBounds are missing", () => {
+        expect(() => {
+            applyPosition({
+                content,
+                triggerCoordinates: null,
+                position: "top",
+                lastUsedPosition: null,
+                onClose: vi.fn(),
+            });
+        }).toThrow("Trigger bounds are required");
+    });
+    test("applies custom width when provided", () => {
+        applyPosition({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            width: "200px",
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        expect(content.style.width).toBe("200px");
+    });
+    test("applies width 'trigger' option", () => {
+        const result = applyPosition({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            width: "trigger",
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        expect(result.position).toBeTruthy();
+    });
+    test("applies width '100%' option in fallback", () => {
+        // Make content very large
+        content.style.width = "2000px";
+        content.style.height = "2000px";
+        const result = applyPosition({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        // Should try full-width positions
+        expect(result.position).toBeTruthy();
+    });
+    test("applies fallbackPositions when provided", () => {
+        // Position trigger at top edge
+        trigger.style.top = "0px";
+        const result = applyPosition({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            fallbackPositions: ["start"],
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        expect(result.position).toBe("start");
+    });
+    test("removes content clone from DOM after calculation", () => {
+        const initialChildCount = document.body.children.length;
+        applyPosition({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            lastUsedPosition: null,
+            onClose: vi.fn(),
+        });
+        // Clone should be removed
+        expect(document.body.children.length).toBe(initialChildCount);
+    });
+});

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

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