@reshaped/utilities 3.9.1-canary.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Reshaped
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/dom/getShadowRoot.d.ts

@@ -0,0 +1,2 @@
+declare const getShadowRoot: (el: HTMLElement | null) => ShadowRoot | null;
+export default getShadowRoot;

package/dist/dom/getShadowRoot.js

@@ -0,0 +1,5 @@
+const getShadowRoot = (el) => {
+    const rootNode = el?.getRootNode();
+    return rootNode instanceof ShadowRoot ? rootNode : null;
+};
+export default getShadowRoot;

package/dist/flyout/Flyout.d.ts

@@ -0,0 +1,13 @@
+import applyPosition from "./utilities/applyPosition";
+import type { Options } from "./types";
+declare class Flyout {
+    #private;
+    constructor(options: Options);
+    /**
+     * Public methods
+     */
+    update: (options?: Partial<Options>) => ReturnType<typeof applyPosition>;
+    open: () => ReturnType<typeof this.update>;
+    close: () => void;
+}
+export default Flyout;

package/dist/flyout/Flyout.js

@@ -0,0 +1,101 @@
+import rafThrottle from "../helpers/rafThrottle.js";
+import applyPosition from "./utilities/applyPosition.js";
+import findClosestScrollableContainer from "./utilities/findClosestScrollableContainer.js";
+class Flyout {
+    #active = false;
+    #lastUsedPosition = null;
+    #options;
+    #handlerCleanupMap = {};
+    constructor(options) {
+        this.#options = options;
+    }
+    #update = (options) => {
+        const result = applyPosition({
+            ...this.#options,
+            fallbackPositions: options?.fallback === false ? [] : this.#options.fallbackPositions,
+            lastUsedPosition: this.#lastUsedPosition,
+        });
+        this.#lastUsedPosition = result.position;
+        return result;
+    };
+    #addParentScrollHandler = () => {
+        const { trigger, onClose } = this.#options;
+        if (!trigger)
+            return;
+        const container = findClosestScrollableContainer({ el: trigger });
+        if (!container)
+            return;
+        const handleScroll = rafThrottle(() => {
+            if (!this.#active)
+                return;
+            const triggerBounds = trigger.getBoundingClientRect();
+            const containerBounds = container.getBoundingClientRect();
+            if (triggerBounds.top < containerBounds.top ||
+                triggerBounds.left < containerBounds.left ||
+                triggerBounds.right > containerBounds.right ||
+                triggerBounds.bottom > containerBounds.bottom) {
+                onClose();
+            }
+            else {
+                this.#update({ fallback: false });
+            }
+        });
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        this.#handlerCleanupMap.scroll = () => container.removeEventListener("scroll", handleScroll);
+    };
+    #addRTLHandler = () => {
+        const observer = new MutationObserver(() => {
+            if (!this.#active)
+                return;
+            this.#update();
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["dir"],
+        });
+        this.#handlerCleanupMap.rtl = () => observer.disconnect();
+    };
+    #addResizeHandler = () => {
+        const handleResize = () => {
+            if (!this.#active)
+                return;
+            this.#update();
+        };
+        const observer = new ResizeObserver(handleResize);
+        window.addEventListener("resize", handleResize);
+        if (this.#options.trigger)
+            observer.observe(this.#options.trigger);
+        if (this.#options.content)
+            observer.observe(this.#options.content);
+        this.#handlerCleanupMap.resize = () => {
+            observer.disconnect();
+            window.removeEventListener("resize", handleResize);
+        };
+    };
+    #removeHandlers = () => {
+        Object.values(this.#handlerCleanupMap).forEach((cleanup) => cleanup());
+        this.#handlerCleanupMap = {};
+    };
+    /**
+     * Public methods
+     */
+    update = (options) => {
+        if (options)
+            this.#options = { ...this.#options, ...options };
+        return this.#update();
+    };
+    open = () => {
+        const result = this.#update();
+        this.#addParentScrollHandler();
+        this.#addRTLHandler();
+        this.#addResizeHandler();
+        this.#active = true;
+        return result;
+    };
+    close = () => {
+        this.#lastUsedPosition = null;
+        this.#active = false;
+        this.#removeHandlers();
+    };
+}
+export default Flyout;

package/dist/flyout/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const CONTAINER_OFFSET = 8;
+export declare const RESET_STYLES: {
+    readonly left: "0";
+    readonly top: "0";
+    readonly position: "absolute";
+    readonly visibility: "hidden";
+    readonly animation: "none";
+    readonly transition: "none";
+};

package/dist/flyout/constants.js

@@ -0,0 +1,9 @@
+export const CONTAINER_OFFSET = 8;
+export const RESET_STYLES = {
+    left: "0",
+    top: "0",
+    position: "absolute",
+    visibility: "hidden",
+    animation: "none",
+    transition: "none",
+};

package/dist/flyout/index.d.ts

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

package/dist/flyout/index.js

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

package/dist/flyout/tests/Flyout.test.d.ts

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

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

@@ -0,0 +1,129 @@
+import { expect, test, describe, beforeEach, afterEach, vi } from "vitest";
+import Flyout from "../Flyout.js";
+describe("flyout/Flyout", () => {
+    let content;
+    let trigger;
+    let onClose;
+    beforeEach(() => {
+        content = document.createElement("div");
+        content.style.position = "absolute";
+        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);
+        onClose = vi.fn();
+    });
+    afterEach(() => {
+        if (content.parentNode)
+            content.parentNode.removeChild(content);
+        if (trigger.parentNode)
+            trigger.parentNode.removeChild(trigger);
+    });
+    test("updates position", () => {
+        const flyout = new Flyout({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            onClose,
+        });
+        const result = flyout.open();
+        expect(result.position).toBe("top");
+        trigger.style.top = "0px";
+        const resultUpdate = flyout.update();
+        expect(resultUpdate.position).toBe("bottom");
+    });
+    test("closes flyout when trigger scrolls out of container bounds", () => {
+        const container = document.createElement("div");
+        container.style.position = "relative";
+        container.style.width = "200px";
+        container.style.height = "200px";
+        container.style.overflow = "auto";
+        document.body.appendChild(container);
+        trigger.style.position = "relative";
+        container.appendChild(trigger);
+        const flyout = new Flyout({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            onClose,
+        });
+        flyout.open();
+        // Scroll trigger out of bounds
+        trigger.style.position = "absolute";
+        trigger.style.top = "-100px";
+        container.scrollTop = 0;
+        // Trigger scroll event
+        container.dispatchEvent(new Event("scroll", { bubbles: true }));
+        // Wait for rafThrottle
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    expect(onClose).toHaveBeenCalled();
+                    document.body.removeChild(container);
+                    resolve(undefined);
+                });
+            });
+        });
+    });
+    test("updates position when trigger scrolls but stays in bounds", () => {
+        const container = document.createElement("div");
+        container.style.position = "relative";
+        container.style.width = "500px";
+        container.style.height = "500px";
+        container.style.overflow = "auto";
+        document.body.appendChild(container);
+        trigger.style.position = "relative";
+        trigger.style.top = "100px";
+        container.appendChild(trigger);
+        const flyout = new Flyout({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "top",
+            onClose,
+        });
+        flyout.open();
+        // Scroll within bounds
+        container.scrollTop = 50;
+        container.dispatchEvent(new Event("scroll", { bubbles: true }));
+        // Should update, not close
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    expect(onClose).not.toHaveBeenCalled();
+                    document.body.removeChild(container);
+                    resolve(undefined);
+                });
+            });
+        });
+    });
+    test("updates position on RTL direction change", async () => {
+        const flyout = new Flyout({
+            content,
+            trigger,
+            triggerCoordinates: null,
+            position: "start",
+            onClose,
+        });
+        const initialResult = flyout.open();
+        expect(initialResult.position).toBe("start");
+        // Start is positioned from the right side
+        expect(content.style.right).toBe("0px");
+        expect(content.style.left).toBe("");
+        document.documentElement.setAttribute("dir", "rtl");
+        await vi.waitFor(() => {
+            // End is position from the left side
+            expect(content.style.left).toBe("0px");
+            expect(content.style.right).toBe("");
+        });
+        document.documentElement.setAttribute("dir", "ltr");
+    });
+});

package/dist/flyout/types.d.ts

@@ -0,0 +1,24 @@
+type XSide = "start" | "end";
+type YSide = "top" | "bottom";
+export type Side = XSide | YSide;
+export type Position = `${YSide}` | `${YSide}-${XSide}` | `${XSide}` | `${XSide}-${YSide}`;
+export type Coordinates = {
+    x: number;
+    y: number;
+};
+export type Width = "trigger" | string;
+export type Options = {
+    content: HTMLElement;
+    trigger?: HTMLElement | null;
+    container?: HTMLElement | null;
+    triggerCoordinates: Coordinates | null;
+    position: Position;
+    fallbackPositions?: Position[];
+    width?: Width;
+    fallbackAdjustLayout?: boolean;
+    fallbackMinHeight?: string;
+    contentGap?: number;
+    contentShift?: number;
+    onClose: () => void;
+};
+export {};

package/dist/flyout/types.js

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

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

@@ -0,0 +1,7 @@
+import type { Position, Options } from "../types";
+declare const applyPosition: (args: Options & {
+    lastUsedPosition: Position | null;
+}) => {
+    position: Position;
+};
+export default applyPosition;

package/dist/flyout/utilities/applyPosition.js

@@ -0,0 +1,103 @@
+import getShadowRoot from "../../dom/getShadowRoot.js";
+import isRTL from "../../i18n/isRTL.js";
+import { CONTAINER_OFFSET, RESET_STYLES } from "../constants.js";
+import calculatePosition from "./calculatePosition.js";
+import findClosestFixedContainer from "./findClosestFixedContainer.js";
+import getPositionFallbacks from "./getPositionFallbacks.js";
+import getRectFromCoordinates from "./getRectFromCoordinates.js";
+import isFullyVisible from "./isFullyVisible.js";
+const applyPosition = (args) => {
+    const { trigger, content, triggerCoordinates, container: passedContainer, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, lastUsedPosition, } = args;
+    const rtl = isRTL();
+    const contentClone = content.cloneNode(true);
+    const triggerBounds = triggerCoordinates || trigger?.getBoundingClientRect();
+    contentClone.style.cssText = "";
+    if (!triggerBounds)
+        throw new Error("Trigger bounds are required");
+    const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
+    Object.keys(RESET_STYLES).forEach((_key) => {
+        const key = _key;
+        const value = RESET_STYLES[key];
+        if (value)
+            contentClone.style[key] = value.toString();
+    });
+    // Insert inside shadow root if possible to make sure styles are applied correctly
+    const root = (trigger && getShadowRoot(trigger)) ?? document.body;
+    root.appendChild(contentClone);
+    const closestFixedContainer = !passedContainer && trigger ? findClosestFixedContainer({ el: trigger }) : undefined;
+    const container = passedContainer ||
+        // Render inside fixed position container automatically to keep their position synced on scroll
+        closestFixedContainer ||
+        document.body;
+    const renderContainerBounds = container.getBoundingClientRect();
+    const testPosition = (position, options) => {
+        if (options?.width === "100%") {
+            contentClone.style.width = `calc(100% - ${CONTAINER_OFFSET * 2}px)`;
+        }
+        else if (options?.width === "trigger") {
+            contentClone.style.width = `${resolvedTriggerBounds.width}px`;
+        }
+        else if (width) {
+            contentClone.style.width = width;
+        }
+        else {
+            contentClone.style.width = "";
+        }
+        return calculatePosition({
+            triggerBounds: resolvedTriggerBounds,
+            flyoutBounds: contentClone.getBoundingClientRect(),
+            containerBounds: renderContainerBounds,
+            position,
+            contentGap,
+            contentShift,
+            rtl,
+            width,
+            passedContainer: passedContainer ||
+                (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
+            fallbackAdjustLayout,
+            fallbackMinHeight,
+        });
+    };
+    const testVisibility = (calculated) => {
+        const visualContainerBounds = passedContainer?.getBoundingClientRect() ?? {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            left: window.scrollX,
+            top: window.scrollY,
+        };
+        return isFullyVisible({
+            flyoutBounds: calculated.boundaries,
+            visualContainerBounds,
+            renderContainerBounds,
+        });
+    };
+    let calculated = null;
+    const testOrder = getPositionFallbacks(position, fallbackPositions);
+    testOrder.some((currentPosition) => {
+        const tested = testPosition(currentPosition);
+        const visible = testVisibility(tested);
+        if (visible)
+            calculated = tested;
+        return visible;
+    });
+    // Try full width positions in case it doesn't fit on any side
+    if (!calculated) {
+        const smallScreenFallbackPositions = ["top", "bottom"].filter((position) => testOrder.includes(position));
+        smallScreenFallbackPositions.some((position) => {
+            const tested = testPosition(position, { width: "100%" });
+            const visible = testVisibility(tested);
+            if (visible)
+                calculated = tested;
+            return visible;
+        });
+    }
+    // None of the positions fit, use the last used position or the default position
+    if (!calculated)
+        calculated = testPosition(lastUsedPosition ?? position);
+    root.removeChild(contentClone);
+    Object.entries(calculated.styles).forEach(([key, value]) => {
+        content.style.setProperty(key, value);
+    });
+    return { position: calculated.position };
+};
+export default applyPosition;

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

@@ -0,0 +1,33 @@
+import type { Width, Position } from "../types";
+type Args = {
+    triggerBounds: DOMRect;
+    flyoutBounds: DOMRect;
+    containerBounds: DOMRect;
+    passedContainer?: HTMLElement | null;
+    position: Position;
+    rtl: boolean;
+    width?: Width;
+    contentGap: number;
+    contentShift: number;
+    fallbackAdjustLayout?: boolean;
+    fallbackMinHeight?: string;
+};
+declare const calculatePosition: (args: Args) => {
+    position: Position;
+    styles: {
+        left: string | null;
+        right: string | null;
+        top: string | null;
+        bottom: string | null;
+        transform: string;
+        height: string | null;
+        width: string | null;
+    };
+    boundaries: {
+        left: number;
+        top: number;
+        height: number;
+        width: number;
+    };
+};
+export default calculatePosition;

package/dist/flyout/utilities/calculatePosition.js

@@ -0,0 +1,159 @@
+import { CONTAINER_OFFSET } from "../constants.js";
+import centerBySize from "./centerBySize.js";
+import getRTLPosition from "./getRTLPosition.js";
+const calculatePosition = (args) => {
+    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, fallbackMinHeight, } = args;
+    const position = rtl ? getRTLPosition(passedPosition) : passedPosition;
+    const isHorizontalPosition = !!position.match(/^(start|end)/);
+    let left = 0;
+    let top = 0;
+    let bottom = null;
+    let right = null;
+    let height = null;
+    let width = null;
+    const flyoutWidth = flyoutBounds.width;
+    const flyoutHeight = flyoutBounds.height;
+    const triggerWidth = triggerBounds.width;
+    const triggerHeight = triggerBounds.height;
+    // Detect passed container scroll to sync the flyout position with it
+    const containerX = passedContainer?.scrollLeft;
+    const containerY = passedContainer?.scrollTop;
+    const scrollX = containerX ?? window.scrollX;
+    const scrollY = containerY ?? window.scrollY;
+    const renderContainerHeight = passedContainer?.clientHeight ?? window.innerHeight;
+    const renderContainerWidth = passedContainer?.clientWidth ?? window.innerWidth;
+    // When rendering in the body, bottom bounds will be larrger than the viewport so we calculate it manually
+    const containerBoundsBottom = passedContainer
+        ? containerBounds.bottom
+        : window.innerHeight - scrollY;
+    // When inside a container, adjut position based on the container scroll since flyout is rendered outside the scroll area
+    const relativeLeft = triggerBounds.left - containerBounds.left + (containerX || 0);
+    const relativeRight = containerBounds.right - triggerBounds.right - (containerX || 0);
+    const relativeTop = triggerBounds.top - containerBounds.top - (containerY || 0);
+    const relativeBottom = containerBoundsBottom - triggerBounds.bottom - (containerY || 0);
+    switch (position) {
+        case "start":
+        case "start-top":
+        case "start-bottom":
+            left = relativeLeft - flyoutWidth - contentGap;
+            right = relativeRight + triggerWidth + contentGap;
+            break;
+        case "end":
+        case "end-top":
+        case "end-bottom":
+            left = relativeLeft + triggerWidth + contentGap;
+            break;
+        case "bottom":
+        case "top":
+            left = relativeLeft + centerBySize(triggerWidth, flyoutWidth) + contentShift;
+            break;
+        case "top-start":
+        case "bottom-start":
+            left = relativeLeft + contentShift;
+            break;
+        case "top-end":
+        case "bottom-end":
+            left = relativeLeft + triggerWidth - flyoutWidth + contentShift;
+            right = relativeRight - contentShift;
+            break;
+        default:
+            break;
+    }
+    switch (position) {
+        case "top":
+        case "top-start":
+        case "top-end":
+            top = relativeTop - flyoutHeight - contentGap;
+            bottom = relativeBottom + triggerHeight + contentGap;
+            break;
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+            top = relativeTop + triggerHeight + contentGap;
+            break;
+        case "start":
+        case "end":
+            top = relativeTop + centerBySize(triggerHeight, flyoutHeight) + contentShift;
+            break;
+        case "start-top":
+        case "end-top":
+            top = relativeTop + contentShift;
+            break;
+        case "start-bottom":
+        case "end-bottom":
+            top = relativeTop + triggerHeight - flyoutHeight + contentShift;
+            bottom = relativeBottom - contentShift;
+            break;
+        default:
+            break;
+    }
+    if (fallbackAdjustLayout) {
+        const getOverflow = () => {
+            return {
+                top: -top + scrollY + CONTAINER_OFFSET,
+                bottom: top + flyoutHeight + CONTAINER_OFFSET - scrollY - renderContainerHeight,
+                left: -left + scrollX + CONTAINER_OFFSET,
+                right: left + flyoutWidth + CONTAINER_OFFSET - scrollX - renderContainerWidth,
+            };
+        };
+        const overflow = getOverflow();
+        if (isHorizontalPosition) {
+            if (overflow.top > 0) {
+                top = CONTAINER_OFFSET + scrollY;
+                if (bottom !== null)
+                    bottom = bottom - overflow.top;
+            }
+            else if (overflow.bottom > 0) {
+                top = top - overflow.bottom;
+            }
+        }
+        else {
+            if (overflow.left > 0) {
+                left = CONTAINER_OFFSET + scrollX;
+                if (right !== null)
+                    right = right - overflow.left;
+            }
+            else if (overflow.right > 0) {
+                left = left - overflow.right;
+            }
+        }
+        const updatedOverflow = getOverflow();
+        if (updatedOverflow.top > 0) {
+            height = Math.max(parseInt(fallbackMinHeight ?? "0"), flyoutHeight - updatedOverflow.top);
+            top = top + (flyoutHeight - height);
+        }
+        else if (updatedOverflow.bottom > 0) {
+            height = Math.max(parseInt(fallbackMinHeight ?? "0"), flyoutHeight - updatedOverflow.bottom);
+            if (bottom !== null)
+                bottom = bottom + (flyoutHeight - height);
+        }
+    }
+    if (passedWidth === "100%") {
+        left = CONTAINER_OFFSET;
+        width = window.innerWidth - CONTAINER_OFFSET * 2;
+    }
+    else if (passedWidth === "trigger") {
+        width = triggerBounds.width;
+    }
+    const translateX = right !== null ? -right : left;
+    const translateY = bottom !== null ? -bottom : top;
+    return {
+        position,
+        styles: {
+            left: right === null ? "0px" : null,
+            right: right === null ? null : "0px",
+            top: bottom === null ? "0px" : null,
+            bottom: bottom === null ? null : "0px",
+            transform: `translate(${translateX}px, ${translateY}px)`,
+            height: height !== null ? `${height}px` : null,
+            width: width !== null ? `${width}px` : (passedWidth ?? null),
+        },
+        boundaries: {
+            left,
+            top,
+            height: height ?? Math.ceil(flyoutHeight),
+            width: width ?? Math.ceil(flyoutWidth),
+        },
+    };
+};
+export default calculatePosition;

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

@@ -0,0 +1,5 @@
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+declare const centerBySize: (originSize: number, targetSize: number) => number;
+export default centerBySize;

package/dist/flyout/utilities/centerBySize.js

@@ -0,0 +1,7 @@
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+const centerBySize = (originSize, targetSize) => {
+    return Math.floor(originSize / 2 - targetSize / 2);
+};
+export default centerBySize;

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

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