reshaped 3.5.4-canary.0 → 3.6.0-canary.1

package/dist/components/Slider/tests/Slider.test.stories.js

@@ -1,150 +0,0 @@
-import { expect, fn, fireEvent } from "@storybook/test";
-import Slider from "../index.js";
-export default {
-    title: "Components/Slider/tests",
-    component: Slider,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/slider",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider name="test-name" defaultValue={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("slider");
-        expect(input).toHaveValue("50");
-        fireEvent.change(input, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        expect(input).toHaveValue("51");
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider name="test-name" value={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("slider");
-        expect(input).toHaveValue("50");
-        fireEvent.change(input, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        expect(input).toHaveValue("50");
-    },
-};
-export const rangeDefaultValue = {
-    name: "range, defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider range name="test-name" defaultMinValue={50} defaultMaxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const [minInput, maxInput] = canvas.getAllByRole("slider");
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-        fireEvent.change(minInput, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            minValue: 51,
-            maxValue: 70,
-            name: "test-name",
-        });
-        expect(minInput).toHaveValue("51");
-        expect(maxInput).toHaveValue("70");
-    },
-};
-export const rangeValue = {
-    name: "range, value, controlled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider range name="test-name" minValue={50} maxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const [minInput, maxInput] = canvas.getAllByRole("slider");
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-        fireEvent.change(minInput, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            minValue: 51,
-            maxValue: 70,
-            name: "test-name",
-        });
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-    },
-};
-export const minMax = {
-    name: "min, max",
-    render: () => <Slider name="nmae" range min={50} max={70}/>,
-    play: async ({ canvas }) => {
-        const [minInputEl, maxInputEl] = canvas.getAllByRole("slider");
-        expect(minInputEl).toHaveAttribute("min", "50");
-        expect(minInputEl).toHaveAttribute("max", "70");
-        expect(maxInputEl).toHaveAttribute("min", "50");
-        expect(maxInputEl).toHaveAttribute("max", "70");
-    },
-};
-export const step = {
-    name: "step",
-    render: () => <Slider name="name" defaultValue={11} step={5}/>,
-    play: async ({ canvas }) => {
-        const inputEl = canvas.getByRole("slider");
-        expect(inputEl).toHaveValue("10");
-    },
-};
-export const stepFloat = {
-    name: "step, float",
-    render: () => <Slider name="name" defaultValue={20.24} step={0.1}/>,
-    play: async ({ canvas }) => {
-        const inputEl = canvas.getByRole("slider");
-        expect(inputEl).toHaveValue("20.2");
-    },
-};
-export const renderValue = {
-    name: "renderValue",
-    render: () => <Slider name="name" defaultValue={50} renderValue={(args) => `$${args.value}`}/>,
-    play: async ({ canvas }) => {
-        const tooltipEl = canvas.getByText(`$50`);
-        expect(tooltipEl).toBeInTheDocument();
-    },
-};
-export const withoutTooltipValue = {
-    name: "renderValue=false",
-    render: () => <Slider name="name" defaultValue={50} renderValue={false}/>,
-    play: async ({ canvas }) => {
-        const tooltipEl = canvas.queryByText(`$50`);
-        expect(tooltipEl).not.toBeInTheDocument();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => <Slider name="name" defaultValue={50} disabled/>,
-    play: async ({ canvas }) => {
-        const inputEl = canvas.getByRole("slider");
-        expect(inputEl).toBeDisabled();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Slider name="name" className="test-classname" attributes={{ id: "test-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

package/dist/components/_private/Flyout/Flyout.constants.d.ts

@@ -1,3 +0,0 @@
-export declare const mouseEnter = 800;
-export declare const mouseEnterShort = 100;
-export declare const mouseLeave = 150;

package/dist/components/_private/Flyout/Flyout.constants.js

@@ -1,3 +0,0 @@
-export const mouseEnter = 800;
-export const mouseEnterShort = 100;
-export const mouseLeave = 150;

package/dist/components/_private/Flyout/useFlyout.js

@@ -1,211 +0,0 @@
-import React from "react";
-import useRTL from "../../../hooks/useRTL.js";
-import { findClosestRenderContainer, getShadowRoot, getRectFromCoordinates } from "../../../utilities/dom/index.js";
-import calculatePosition from "./utilities/calculatePosition.js";
-import getPositionFallbacks from "./utilities/getPositionFallbacks.js";
-import isFullyVisible from "./utilities/isFullyVisible.js";
-/**
- * Order of keys here is responsible for the order of styles applied
- */
-const defaultStyles = {
-    left: 0,
-    top: 0,
-    width: "auto",
-    height: "auto",
-    // z-index doesn't accept strings
-    zIndex: "var(--rs-z-index-flyout)",
-};
-const resetStyles = {
-    left: 0,
-    top: 0,
-    position: "absolute",
-    visibility: "hidden",
-    animation: "none",
-    transition: "none",
-    zIndex: "var(--rs-z-index-tooltip)",
-};
-/**
- * Set position of the target element to fit on the screen
- */
-const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, ...options } = args;
-    const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
-    const targetClone = flyoutEl.cloneNode(true);
-    const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
-    const unitModifier = baseUnit ? parseInt(baseUnit) : 0;
-    const internalTriggerBounds = triggerEl?.getBoundingClientRect();
-    const triggerBounds = passedTriggerBounds || internalTriggerBounds;
-    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) {
-        if (width === "trigger") {
-            targetClone.style.width = `${resolvedTriggerBounds.width}px`;
-        }
-        else if (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 flyoutBounds = targetClone.getBoundingClientRect();
-    const closestRenderContainer = !container && triggerEl ? findClosestRenderContainer({ el: triggerEl }) : undefined;
-    const containerParent = container ||
-        // Only render inside non-scrollable container to make sure it doesn't get clipped by overflow auto
-        // We render those cases in the document root and then sync the position on scroll instead
-        (!closestRenderContainer?.scrollable ? closestRenderContainer?.el : undefined) ||
-        document.body;
-    const containerBounds = containerParent.getBoundingClientRect();
-    const scopeOffset = {
-        top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
-        left: containerBounds.left + document.documentElement.scrollLeft - containerParent.scrollLeft,
-    };
-    let calculated = null;
-    const testOrder = getPositionFallbacks(position, fallbackPositions);
-    testOrder.some((currentPosition) => {
-        const tested = calculatePosition({
-            ...options,
-            triggerBounds: resolvedTriggerBounds,
-            flyoutBounds,
-            scopeOffset,
-            position: currentPosition,
-            contentGap: contentGap * unitModifier,
-            contentShift: contentShift * unitModifier,
-        });
-        const visible = isFullyVisible({ ...tested, container });
-        const validPosition = visible || fallbackPositions?.length === 0;
-        // Saving first try in case non of the options work
-        if (validPosition || lastUsedFallback === currentPosition) {
-            calculated = tested;
-            onFallback(currentPosition);
-        }
-        return validPosition;
-    });
-    if (!calculated) {
-        throw new Error(`[Reshaped] Can't calculate styles for the ${position} position`);
-    }
-    targetClone.parentNode?.removeChild(targetClone);
-    return calculated;
-};
-const flyoutReducer = (state, action) => {
-    switch (action.type) {
-        case "render":
-            if (state.status !== "idle")
-                return state;
-            // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
-        case "position":
-            if (!action.payload.sync && state.status !== "rendered")
-                return state;
-            if (action.payload.sync && state.status !== "visible")
-                return state;
-            return {
-                ...state,
-                status: action.payload.sync ? "visible" : "positioned",
-                position: action.payload.position,
-                styles: { ...defaultStyles, ...action.payload.styles },
-            };
-        case "show":
-            if (state.status !== "positioned")
-                return state;
-            return { ...state, status: "visible" };
-        case "hide":
-            if (state.status !== "visible")
-                return state;
-            return { ...state, status: "hidden" };
-        case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
-            return { ...state, status: "idle", styles: resetStyles };
-        default:
-            throw new Error("[Reshaped] Invalid flyout reducer type");
-    }
-};
-const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
-    const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
-    const lastUsedFallbackRef = React.useRef(defaultPosition);
-    // Memo the array internally to avoid new arrays triggering useCallback
-    const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [fallbackPositions?.join(" ")]);
-    const [isRTL] = useRTL();
-    const [state, dispatch] = React.useReducer(flyoutReducer, {
-        position: defaultPosition,
-        styles: defaultStyles,
-        status: "idle",
-    });
-    const render = React.useCallback(() => {
-        dispatch({ type: "render" });
-    }, []);
-    const show = React.useCallback(() => {
-        dispatch({ type: "show" });
-    }, []);
-    const hide = React.useCallback(() => {
-        dispatch({ type: "hide" });
-    }, []);
-    const remove = React.useCallback(() => {
-        dispatch({ type: "remove" });
-    }, []);
-    const handleFallback = React.useCallback((position) => {
-        lastUsedFallbackRef.current = position;
-    }, []);
-    const updatePosition = React.useCallback((options) => {
-        if (!flyoutElRef.current)
-            return;
-        const nextFlyoutData = flyout({
-            triggerEl: triggerElRef.current,
-            flyoutEl: flyoutElRef.current,
-            triggerBounds,
-            width,
-            position: defaultPosition,
-            fallbackPositions: cachedFallbackPositions,
-            lastUsedFallback: lastUsedFallbackRef.current,
-            onFallback: handleFallback,
-            rtl: isRTL,
-            container,
-            contentGap,
-            contentShift,
-        });
-        if (nextFlyoutData) {
-            dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
-        }
-    }, [
-        container,
-        defaultPosition,
-        cachedFallbackPositions,
-        isRTL,
-        flyoutElRef,
-        triggerElRef,
-        triggerBounds,
-        width,
-        contentGap,
-        contentShift,
-        handleFallback,
-    ]);
-    React.useEffect(() => {
-        if (state.status === "rendered")
-            updatePosition();
-    }, [state.status, updatePosition]);
-    return React.useMemo(() => ({
-        position: state.position,
-        styles: state.styles,
-        status: state.status,
-        updatePosition,
-        render,
-        hide,
-        remove,
-        show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
-};
-export default useFlyout;

package/dist/components/_private/Flyout/utilities/calculatePosition.d.ts

@@ -1,19 +0,0 @@
-import type * as T from "../Flyout.types";
-/**
- * Calculate styles for the current position
- */
-declare const calculatePosition: (args: T.Options & {
-    triggerBounds: DOMRect;
-    flyoutBounds: DOMRect;
-    scopeOffset: Record<"left" | "top", number>;
-}) => {
-    styles: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    };
-    position: T.Position;
-    scopeOffset: Record<"left" | "top", number>;
-};
-export default calculatePosition;

package/dist/components/_private/Flyout/utilities/calculatePosition.js

@@ -1,102 +0,0 @@
-const SCREEN_OFFSET = 16;
-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
- */
-const centerBySize = (originSize, targetSize) => {
-    return Math.floor(originSize / 2 - targetSize / 2);
-};
-/**
- * Calculate styles for the current position
- */
-const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width, contentGap = 0, contentShift = 0, } = args;
-    const isFullWidth = width === "full" || width === "100%";
-    let left = 0;
-    let top = 0;
-    let position = passedPosition;
-    if (rtl)
-        position = getRTLPosition(position);
-    if (isFullWidth || width === "trigger") {
-        position = position.includes("top") ? "top" : "bottom";
-    }
-    const isHorizontalPosition = position.match(/^(start|end)/);
-    const isVerticalPosition = position.match(/^(top|bottom)/);
-    const flyoutWidth = flyoutBounds.width + (isHorizontalPosition ? contentGap : 0);
-    const flyoutHeight = flyoutBounds.height + (isVerticalPosition ? contentGap : 0);
-    switch (position) {
-        case "bottom":
-        case "top":
-            left = centerBySize(triggerBounds.width, flyoutWidth) + triggerBounds.left + contentShift;
-            break;
-        case "start":
-        case "start-top":
-        case "start-bottom":
-            left = triggerBounds.left - flyoutWidth;
-            break;
-        case "end":
-        case "end-top":
-        case "end-bottom":
-            left = triggerBounds.right;
-            break;
-        case "top-start":
-        case "bottom-start":
-            left = triggerBounds.left + contentShift + contentShift;
-            break;
-        case "top-end":
-        case "bottom-end":
-            left = triggerBounds.right - flyoutWidth + contentShift;
-            break;
-        default:
-            break;
-    }
-    switch (position) {
-        case "top":
-        case "top-start":
-        case "top-end":
-            top = triggerBounds.top - flyoutHeight;
-            break;
-        case "bottom":
-        case "bottom-start":
-        case "bottom-end":
-            top = triggerBounds.bottom;
-            break;
-        case "start":
-        case "end":
-            top = centerBySize(triggerBounds.height, flyoutHeight) + triggerBounds.top + contentShift;
-            break;
-        case "start-top":
-        case "end-top":
-            top = triggerBounds.top + contentShift;
-            break;
-        case "start-bottom":
-        case "end-bottom":
-            top = triggerBounds.bottom - flyoutHeight + contentShift;
-            break;
-        default:
-            break;
-    }
-    if (top === undefined || left === undefined) {
-        throw Error(`[Reshaped, flyout]: ${position} position is not valid`);
-    }
-    top = Math.round(top + (window.scrollY || 0) - scopeOffset.top);
-    left = Math.round(left + (window.scrollX || 0) - scopeOffset.left);
-    let widthStyle = Math.ceil(flyoutWidth);
-    const height = Math.ceil(flyoutHeight);
-    if (isFullWidth) {
-        left = SCREEN_OFFSET;
-        widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
-    }
-    else if (width === "trigger") {
-        widthStyle = triggerBounds.width;
-    }
-    const styles = { left, top, width: widthStyle, height };
-    return { styles, position, scopeOffset };
-};
-export default calculatePosition;

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

@@ -1,8 +0,0 @@
-import calculatePosition from "./calculatePosition";
-/**
- * Check if element visually fits on the screen
- */
-declare const isFullyVisible: (args: ReturnType<typeof calculatePosition> & {
-    container?: HTMLElement | null;
-}) => boolean;
-export default isFullyVisible;

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

@@ -1,16 +0,0 @@
-/**
- * Check if element visually fits on the screen
- */
-const isFullyVisible = (args) => {
-    const { styles, scopeOffset, container } = args;
-    const htmlEl = container || document.documentElement;
-    const pageLeft = htmlEl.scrollLeft;
-    const pageRight = pageLeft + htmlEl.clientWidth;
-    const pageTop = htmlEl.scrollTop;
-    const pageBottom = pageTop + htmlEl.clientHeight;
-    return (styles.left + scopeOffset.left >= pageLeft &&
-        styles.left + styles.width + scopeOffset.left <= pageRight &&
-        styles.top + scopeOffset.top >= pageTop &&
-        styles.top + styles.height + scopeOffset.top <= pageBottom);
-};
-export default isFullyVisible;