reshaped 3.9.0 → 3.9.1-canary.3

package/dist/components/Flyout/utilities/flyout.js

@@ -1,115 +0,0 @@
-import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
-import { resetStyles } from "../Flyout.constants.js";
-import calculatePosition from "./calculatePosition.js";
-import { SCREEN_OFFSET } from "./constants.js";
-import getPositionFallbacks from "./getPositionFallbacks.js";
-import isFullyVisible from "./isFullyVisible.js";
-/**
- * Set position of the target element to fit on the screen
- */
-const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container: passedContainer, lastUsedPosition, onPositionChoose, rtl, } = args;
-    const targetClone = flyoutEl.cloneNode(true);
-    const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
-    const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
-    const triggerBounds = passedTriggerBounds || triggerEl?.getBoundingClientRect();
-    if (!triggerBounds)
-        return;
-    const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
-    // Reset all styles applied on the previous hook execution
-    targetClone.style.cssText = "";
-    Object.keys(resetStyles).forEach((key) => {
-        const value = resetStyles[key];
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (value)
-            targetClone.style[key] = value.toString();
-    });
-    if (width === "trigger") {
-        targetClone.style.width = `${resolvedTriggerBounds.width}px`;
-    }
-    else if (width && width !== "full") {
-        targetClone.style.width = width;
-    }
-    const shadowRoot = triggerEl && getShadowRoot(triggerEl);
-    // Insert inside shadow root if possible to make sure styles are applied correctly
-    (shadowRoot || document.body).appendChild(targetClone);
-    const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : 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 applyPosition = (position, options) => {
-        const widthOption = options?.width || width;
-        // If there is a width override, apply it to calculate the position and the height correctly
-        if (widthOption === "full") {
-            targetClone.style.width = `calc(100% - ${SCREEN_OFFSET * 2}px)`;
-        }
-        else if (widthOption === "trigger") {
-            targetClone.style.width = `${resolvedTriggerBounds.width}px`;
-        }
-        else {
-            targetClone.style.width = widthOption || "";
-        }
-        const cloneRect = targetClone.getBoundingClientRect();
-        const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
-        return calculatePosition({
-            triggerBounds: resolvedTriggerBounds,
-            flyoutBounds,
-            containerBounds: renderContainerBounds,
-            position,
-            contentGap: contentGap * unitModifier,
-            contentShift: contentShift * unitModifier,
-            rtl,
-            width: widthOption,
-            passedContainer: passedContainer ||
-                (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
-            fallbackAdjustLayout,
-            fallbackMinWidth,
-            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 = applyPosition(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 = applyPosition(position, { width: "full" });
-            const visible = testVisibility(tested);
-            if (visible)
-                calculated = tested;
-            return visible;
-        });
-    }
-    if (!calculated)
-        calculated = applyPosition(lastUsedPosition);
-    onPositionChoose(calculated.position);
-    targetClone.parentNode?.removeChild(targetClone);
-    Object.entries(calculated.styles).forEach(([key, value]) => {
-        flyoutEl.style.setProperty(key, value);
-    });
-    return { position: calculated.position };
-};
-export default flyout;

package/dist/components/Flyout/utilities/getPositionFallbacks.d.ts

@@ -1,3 +0,0 @@
-import type * as T from "../Flyout.types";
-declare const getPositionFallbacks: (position: T.Position, availableFallbacks?: T.Position[]) => T.Position[];
-export default getPositionFallbacks;

package/dist/components/Flyout/utilities/getPositionFallbacks.js

@@ -1,39 +0,0 @@
-// 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
-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/components/Flyout/utilities/helpers.d.ts

@@ -1,7 +0,0 @@
-import type * as T from "../Flyout.types";
-/** Mirror the position for RTL */
-export declare const getRTLPosition: (position: T.Position) => T.Position;
-/**
- * Get a position value which centers 2 elements vertically or horizontally
- */
-export declare const centerBySize: (originSize: number, targetSize: number) => number;

package/dist/components/Flyout/utilities/helpers.js

@@ -1,14 +0,0 @@
-/** Mirror the position for RTL */
-export const getRTLPosition = (position) => {
-    if (position.includes("start"))
-        return position.replace("start", "end");
-    if (position.includes("end"))
-        return position.replace("end", "start");
-    return position;
-};
-/**
- * Get a position value which centers 2 elements vertically or horizontally
- */
-export const centerBySize = (originSize, targetSize) => {
-    return Math.floor(originSize / 2 - targetSize / 2);
-};

package/dist/components/Flyout/utilities/isFullyVisible.d.ts

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

package/dist/components/Flyout/utilities/isFullyVisible.js

@@ -1,23 +0,0 @@
-import { SCREEN_OFFSET } from "./constants.js";
-/**
- * Check if element visually fits within its render container
- */
-const isFullyVisible = (args) => {
-    const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
-    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left + SCREEN_OFFSET) {
-        return false;
-    }
-    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top + SCREEN_OFFSET) {
-        return false;
-    }
-    if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width >
-        visualContainerBounds.left + visualContainerBounds.width - SCREEN_OFFSET) {
-        return false;
-    }
-    if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height >
-        visualContainerBounds.top + visualContainerBounds.height - SCREEN_OFFSET) {
-        return false;
-    }
-    return true;
-};
-export default isFullyVisible;

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

@@ -1,2 +0,0 @@
-import type * as G from "../../types/global";
-export declare const getRectFromCoordinates: (coordinates: DOMRect | G.Coordinates) => DOMRect;

package/dist/utilities/dom/flyout.js

@@ -1,14 +0,0 @@
-export 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: () => { },
-    };
-};