reshaped 2.11.11 → 3.0.0

package/components/_private/Aligner/Aligner.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../../utilities/helpers.js";
-import s from "./Aligner.module.css";
-const Aligner = (props) => {
-    const { side: passedSide = "all", children, className, attributes } = props;
-    const sides = typeof passedSide === "string" ? [passedSide] : passedSide;
-    const rootClassNames = classNames(s.root, sides.map((side) => s[`--side-${side}`]), className);
-    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, children: children })));
-};
-export default Aligner;

package/components/_private/Aligner/Aligner.types.d.ts

@@ -1,9 +0,0 @@
-import type * as G from "../../../types/global";
-type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all";
-export type Props = {
-    children: React.ReactElement;
-    side?: Side | Side[];
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export {};

package/components/_private/Expandable/Expandable.js

@@ -1,27 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import s from "./Expandable.module.css";
-import { classNames } from "../../../utilities/helpers.js";
-import { onNextFrame } from "../../../utilities/animation.js";
-const Expandable = (props) => {
-    const { children, active, attributes } = props;
-    const [rendered, setRendered] = React.useState(active);
-    const rootClassNames = classNames(s.root, active && rendered && s["--active"], !active && !rendered && s["--hidden"]);
-    const handleTransitionEnd = (e) => {
-        if (e.propertyName !== "height")
-            return;
-        if (active)
-            return;
-        onNextFrame(() => {
-            setRendered(false);
-        });
-    };
-    React.useEffect(() => {
-        if (!active)
-            return;
-        setRendered(active);
-    }, [active]);
-    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active, children: _jsx("div", { className: s.inner, children: children }) })));
-};
-export default Expandable;

package/components/_private/Expandable/Expandable.module.css

@@ -1 +0,0 @@
-.root{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--rs-duration-slow) var(--rs-easing-standard)}.--active{grid-template-rows:1fr}.--hidden{display:none}.inner{overflow:hidden}

package/components/_private/Flyout/Flyout.context.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import type * as T from "./Flyout.types";
-declare const FlyoutContext: React.Context<T.ContextProps>;
-export declare const useFlyoutContext: () => T.ContextProps;
-export declare const Provider: React.Provider<T.ContextProps>;
-export default FlyoutContext;

package/components/_private/Flyout/Flyout.context.js

@@ -1,6 +0,0 @@
-"use client";
-import React from "react";
-const FlyoutContext = React.createContext({});
-export const useFlyoutContext = () => React.useContext(FlyoutContext);
-export const Provider = FlyoutContext.Provider;
-export default FlyoutContext;

package/components/_private/Flyout/Flyout.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
-import FlyoutControlled from "./FlyoutControlled.js";
-import FlyoutTrigger from "./FlyoutTrigger.js";
-import FlyoutContent from "./FlyoutContent.js";
-const Flyout = (props) => {
-    const { active } = props;
-    if (typeof active === "boolean")
-        return _jsx(FlyoutControlled, Object.assign({}, props));
-    return _jsx(FlyoutUncontrolled, Object.assign({}, props));
-};
-Flyout.Trigger = FlyoutTrigger;
-Flyout.Content = FlyoutContent;
-export default Flyout;

package/components/_private/Flyout/Flyout.types.d.ts

@@ -1,111 +0,0 @@
-import React from "react";
-import type * as G from "../../../types/global";
-import type { TrapMode } from "../../../utilities/a11y/types";
-/**
- * Utility
- */
-export type Position = "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "start" | "start-top" | "start-bottom" | "end" | "end-top" | "end-bottom";
-export type Width = "trigger" | string;
-export type Options = {
-    width?: Width;
-    position: Position;
-    rtl: boolean;
-    forcePosition?: boolean;
-};
-export type Styles = React.CSSProperties;
-export type State = {
-    styles: Styles;
-    position?: Position;
-    status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
-};
-export type FlyoutData = {
-    styles: Styles;
-    position: Position;
-};
-export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
-    updatePosition: () => void;
-    render: () => void;
-    hide: () => void;
-    remove: () => void;
-    show: () => void;
-};
-/**
- * Component
- */
-export type InstanceRef = {
-    open: () => void;
-    close: () => void;
-} | undefined;
-type WithUncontrolled = {
-    active?: never;
-    defaultActive?: boolean;
-};
-type WithControlled = {
-    active: boolean;
-    defaultActive?: never;
-};
-export type TriggerAttributes = {
-    ref: React.RefObject<HTMLButtonElement>;
-    onBlur?: (e: React.FocusEvent) => void;
-    onFocus?: () => void;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-    onClick?: () => void;
-    "aria-describedby"?: string;
-    "aria-haspopup"?: "dialog" | "menu" | "listbox";
-    "aria-autocomplete"?: "list";
-    "aria-expanded"?: boolean;
-    "aria-controls"?: string;
-};
-type BaseProps = {
-    id?: string;
-    triggerType?: "hover" | "click" | "focus";
-    position?: Position;
-    forcePosition?: boolean;
-    trapFocusMode?: TrapMode;
-    disableHideAnimation?: boolean;
-    children?: React.ReactNode;
-    onOpen?: () => void;
-    onClose?: () => void;
-    width?: Width;
-    contentGap?: number;
-    contentClassName?: string;
-    contentAttributes?: G.Attributes<"div">;
-    instanceRef?: React.Ref<InstanceRef>;
-};
-export type DefaultProps = Required<{
-    position: BaseProps["position"];
-    trigger: BaseProps["triggerType"];
-}>;
-export type UncontrolledProps = BaseProps & WithUncontrolled;
-export type ControlledProps = BaseProps & WithControlled;
-export type Props = ControlledProps | UncontrolledProps;
-export type TriggerProps = {
-    children: (attributes: TriggerAttributes) => React.ReactNode;
-};
-export type ContentProps = {
-    children?: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export type ContextProps = {
-    id: string;
-    flyout: UseFlyoutData;
-    width?: Width;
-    triggerElRef: React.RefObject<HTMLButtonElement>;
-    flyoutElRef: React.RefObject<HTMLDivElement>;
-    handleClose: (options?: {
-        closeParents?: boolean;
-    }) => void;
-    handleOpen: () => void;
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
-    handleTransitionEnd: (e: React.TransitionEvent) => void;
-    handleTransitionStart: (e: TransitionEvent) => void;
-    handleClick: () => void;
-    handleBlur: (e: React.FocusEvent) => void;
-    handleFocus: () => void;
-    handleContentMouseDown: () => void;
-    handleContentMouseUp: () => void;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap">;
-export {};

package/components/_private/Flyout/FlyoutContent.js

@@ -1,54 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../../utilities/helpers.js";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
-import Portal from "../Portal/index.js";
-import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
-import { useFlyoutContext } from "./Flyout.context.js";
-import s from "./Flyout.module.css";
-const FlyoutContent = (props) => {
-    const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, width, } = useFlyoutContext();
-    const { styles, status, position } = flyout;
-    const [mounted, setMounted] = React.useState(false);
-    useIsomorphicLayoutEffect(() => {
-        setMounted(true);
-    }, []);
-    /**
-     * transitionStart doesn't exist as a jsx event handler and needs to be handled with vanilla js
-     */
-    React.useEffect(() => {
-        const el = flyoutElRef.current;
-        if (!el)
-            return;
-        el.addEventListener("transitionstart", handleTransitionStart);
-        return () => el.removeEventListener("transitionstart", handleTransitionStart);
-    }, [handleTransitionStart, flyoutElRef, status]);
-    if (status === "idle" || !mounted)
-        return null;
-    const contentClassNames = classNames(s.content, status === "visible" && s["--visible"], 
-    // Animate after correct position has been assigned
-    ["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"]);
-    // className is applied to inner element because it has the transform and is treated like a real root element
-    const innerClassNames = classNames(s.inner, className, contentClassName);
-    let role;
-    if (triggerType === "hover") {
-        role = "tooltip";
-    }
-    else if (trapFocusMode === "dialog") {
-        role = "dialog";
-    }
-    else if (trapFocusMode === "selection-menu") {
-        role = "listbox";
-    }
-    else if (trapFocusMode === "action-menu") {
-        role = "menu";
-    }
-    const content = (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsx("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", Object.assign({ role: role }, attributes, { id: id, "aria-modal": triggerType === "click", style: contentAttributes === null || contentAttributes === void 0 ? void 0 : contentAttributes.style, className: innerClassNames, children: children })) }));
-    const closestScrollable = getClosestFlyoutTarget(triggerElRef.current);
-    return (_jsx(Portal, { targetRef: closestScrollable === document.body ? undefined : { current: closestScrollable }, children: content }));
-};
-export default FlyoutContent;

package/components/_private/Flyout/FlyoutControlled.js

@@ -1,238 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { debounce } from "../../../utilities/helpers.js";
-import TrapFocus from "../../../utilities/a11y/TrapFocus.js";
-import * as timeouts from "../../../constants/timeouts.js";
-import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
-import useElementId from "../../../hooks/useElementId.js";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
-import useHotkeys from "../../../hooks/useHotkeys.js";
-import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
-import useRTL from "../../../hooks/useRTL.js";
-import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
-import useFlyout from "./useFlyout.js";
-import { Provider, useFlyoutContext } from "./Flyout.context.js";
-const FlyoutRoot = (props) => {
-    const { triggerType = "click", onOpen, onClose, children, forcePosition, trapFocusMode, width, disableHideAnimation, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, } = props;
-    const parentFlyoutContext = useFlyoutContext();
-    const [isRTL] = useRTL();
-    const internalTriggerElRef = React.useRef(null);
-    const triggerElRef = (parentFlyoutContext === null || parentFlyoutContext === void 0 ? void 0 : parentFlyoutContext.triggerElRef) || internalTriggerElRef;
-    const flyoutElRef = React.useRef(null);
-    const id = useElementId(passedId);
-    const timerRef = React.useRef();
-    const trapFocusRef = React.useRef(null);
-    const lockedRef = React.useRef(false);
-    const transitionStartedRef = React.useRef(false);
-    const lockedBlurEffects = React.useRef(false);
-    const shouldReturnFocusRef = React.useRef(true);
-    const flyout = useFlyout(triggerElRef, flyoutElRef, {
-        width,
-        position: passedPosition,
-        defaultActive: passedActive,
-        forcePosition,
-    });
-    const { status, updatePosition, render, hide, remove, show } = flyout;
-    // Don't create dismissible queue for hover flyout because they close all together on mouseout
-    const isDismissible = useIsDismissible(triggerType !== "hover" && status !== "idle", flyoutElRef, triggerElRef);
-    const clearTimer = React.useCallback(() => {
-        if (timerRef.current)
-            clearTimeout(timerRef.current);
-    }, [timerRef]);
-    /**
-     * Component open/close handlers
-     * Called from the internal actions
-     */
-    const handleOpen = React.useCallback(() => {
-        const canOpen = !lockedRef.current && status === "idle";
-        if (!canOpen)
-            return;
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [status]);
-    const handleClose = React.useCallback((options) => {
-        var _a;
-        const isLocked = triggerType === "click" && !isDismissible();
-        const canClose = !isLocked && status !== "idle";
-        if (!canClose)
-            return;
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        if (options === null || options === void 0 ? void 0 : options.closeParents) {
-            (_a = parentFlyoutContext === null || parentFlyoutContext === void 0 ? void 0 : parentFlyoutContext.handleClose) === null || _a === void 0 ? void 0 : _a.call(parentFlyoutContext);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [status, isDismissible, triggerType]);
-    /**
-     * Trigger event handlers
-     */
-    const handleBlur = React.useCallback((e) => {
-        var _a;
-        const focusedContent = (_a = flyoutElRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget);
-        if (
-        // Empty flyouts don't move the focus so they have to be closed on blur
-        focusedContent ||
-            // Content menu keeps the focus on the original trigger so moving the focus away from it shouldn't close it
-            (triggerType === "hover" && trapFocusMode === "content-menu") ||
-            // Prevent from closing in case user interacts with items inside content
-            lockedBlurEffects.current) {
-            return;
-        }
-        handleClose();
-    }, [handleClose, triggerType, trapFocusMode]);
-    const handleFocus = React.useCallback(() => {
-        handleOpen();
-    }, [handleOpen]);
-    const handleMouseEnter = React.useCallback(() => {
-        clearTimer();
-        timerRef.current = setTimeout(handleOpen, timeouts.mouseEnter);
-    }, [clearTimer, timerRef, handleOpen]);
-    const handleMouseLeave = React.useCallback(() => {
-        clearTimer();
-        timerRef.current = setTimeout(() => handleClose(), timeouts.mouseLeave);
-    }, [clearTimer, timerRef, handleClose]);
-    const handleTriggerClick = React.useCallback(() => {
-        if (status === "idle") {
-            handleOpen();
-        }
-        else {
-            handleClose();
-        }
-    }, [status, handleOpen, handleClose]);
-    const handleContentMouseDown = () => (lockedBlurEffects.current = true);
-    const handleContentMouseUp = () => (lockedBlurEffects.current = false);
-    const handleTransitionStart = React.useCallback((e) => {
-        if (!passedActive)
-            return;
-        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
-            return;
-        transitionStartedRef.current = true;
-    }, [passedActive]);
-    const handleTransitionEnd = React.useCallback((e) => {
-        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
-            return;
-        if (status === "hidden") {
-            transitionStartedRef.current = false;
-            remove();
-        }
-    }, [remove, status]);
-    /**
-     * Control the display based on the props
-     */
-    useIsomorphicLayoutEffect(() => {
-        if (passedActive) {
-            render();
-            return;
-        }
-        /**
-         * Check that transitions are enabled and it has been triggered on tooltip open
-         * (keyboard focus navigation could move too fast and ignore the transitions completely)
-         */
-        if (checkTransitions() && !disableHideAnimation && transitionStartedRef.current) {
-            hide();
-        }
-        else {
-            // In case transitions are disabled globally - remove from the DOM immediately
-            remove();
-        }
-    }, [passedActive, render, hide, disableHideAnimation]);
-    React.useEffect(() => {
-        // Wait after positioning before show is triggered to animate flyout from the right side
-        if (status === "positioned")
-            onNextFrame(() => show());
-    }, [status, show]);
-    /**
-     * Handle focus trap
-     *
-     * We release focus on visible change to not wait till animation ends
-     * so if we click outside the flyout, it won't focus the trigger
-     * after the animation and open it again
-     *
-     * Trap focus on visible to avoid scroll jumping, position is defined only when flyout is visible
-     */
-    useIsomorphicLayoutEffect(() => {
-        if (status !== "visible" || !flyoutElRef.current)
-            return;
-        trapFocusRef.current = new TrapFocus(flyoutElRef.current);
-        trapFocusRef.current.trap({
-            mode: trapFocusMode,
-            includeTrigger: triggerType === "hover" && trapFocusMode === "content-menu",
-            onNavigateOutside: () => {
-                handleClose();
-            },
-        });
-    }, [status, triggerType, handleClose, trapFocusMode]);
-    React.useEffect(() => {
-        var _a;
-        if (!disableHideAnimation && status !== "hidden")
-            return;
-        if (disableHideAnimation && status !== "idle")
-            return;
-        if ((_a = trapFocusRef.current) === null || _a === void 0 ? void 0 : _a.trapped) {
-            /* Locking the popover to not open it again on trigger focus */
-            if (triggerType === "hover") {
-                lockedRef.current = true;
-                setTimeout(() => {
-                    lockedRef.current = false;
-                }, 100);
-            }
-            trapFocusRef.current.release({ withoutFocusReturn: !shouldReturnFocusRef.current });
-            shouldReturnFocusRef.current = true;
-        }
-    }, [status, triggerType, disableHideAnimation]);
-    /**
-     * Release focus trapping on unmount
-     */
-    React.useEffect(() => {
-        return () => { var _a; return (_a = trapFocusRef.current) === null || _a === void 0 ? void 0 : _a.release(); };
-    }, []);
-    /**
-     * Update position on resize or RTL
-     */
-    React.useEffect(() => {
-        const update = debounce(updatePosition, 10);
-        window.addEventListener("resize", update);
-        return () => window.removeEventListener("resize", update);
-    }, [updatePosition]);
-    React.useEffect(() => {
-        updatePosition();
-    }, [isRTL, updatePosition]);
-    /**
-     * Imperative methods for controlling Flyout
-     */
-    React.useImperativeHandle(instanceRef, () => ({
-        open: handleOpen,
-        close: handleClose,
-    }), [handleOpen, handleClose]);
-    useHotkeys({ Escape: () => handleClose() }, [handleClose]);
-    useOnClickOutside([flyoutElRef, triggerElRef], () => {
-        // Clicking outside changes focused element so we don't need to set it back ourselves
-        shouldReturnFocusRef.current = false;
-        handleClose();
-    });
-    return (_jsx(Provider, { value: {
-            id,
-            flyout,
-            width,
-            triggerElRef,
-            flyoutElRef,
-            handleClose,
-            handleOpen,
-            handleFocus,
-            handleBlur,
-            handleMouseEnter,
-            handleMouseLeave,
-            handleTransitionStart,
-            handleTransitionEnd,
-            handleClick: handleTriggerClick,
-            handleContentMouseDown,
-            handleContentMouseUp,
-            triggerType,
-            trapFocusMode,
-            contentGap,
-            contentClassName,
-            contentAttributes,
-        }, children: children }));
-};
-export default FlyoutRoot;

package/components/_private/Flyout/FlyoutTrigger.js

@@ -1,38 +0,0 @@
-"use client";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useFlyoutContext } from "./Flyout.context.js";
-const FlyoutTrigger = (props) => {
-    const { children } = props;
-    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, } = useFlyoutContext();
-    let childrenAttributes = {
-        onBlur: handleBlur,
-        ref: triggerElRef,
-    };
-    if (triggerType === "click" || trapFocusMode === "action-menu") {
-        childrenAttributes.onClick = handleClick;
-    }
-    if (triggerType === "hover") {
-        childrenAttributes.onMouseEnter = handleMouseEnter;
-        childrenAttributes.onMouseLeave = handleMouseLeave;
-    }
-    if ((triggerType === "hover" && trapFocusMode !== "action-menu") || triggerType === "focus") {
-        childrenAttributes.onFocus = handleFocus;
-        childrenAttributes["aria-describedby"] = id;
-    }
-    if (triggerType === "click" || triggerType === "focus" || trapFocusMode === "action-menu") {
-        if (trapFocusMode === "dialog") {
-            childrenAttributes["aria-haspopup"] = "dialog";
-        }
-        else if (trapFocusMode === "selection-menu") {
-            childrenAttributes["aria-haspopup"] = "listbox";
-            childrenAttributes["aria-autocomplete"] = "list";
-        }
-        else {
-            childrenAttributes["aria-haspopup"] = "menu";
-        }
-        childrenAttributes["aria-expanded"] = flyout.status !== "idle";
-        childrenAttributes["aria-controls"] = flyout.status !== "idle" ? id : undefined;
-    }
-    return _jsx(_Fragment, { children: children(childrenAttributes) });
-};
-export default FlyoutTrigger;

package/components/_private/Flyout/FlyoutUncontrolled.js

@@ -1,20 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import FlyoutControlled from "./FlyoutControlled.js";
-const FlyoutUncontrolled = (props) => {
-    const { defaultActive, onClose, onOpen } = props;
-    const [active, setActive] = React.useState(defaultActive || false);
-    const handleClose = () => {
-        setActive(false);
-        if (onClose)
-            onClose();
-    };
-    const handleOpen = () => {
-        setActive(true);
-        if (onOpen)
-            onOpen();
-    };
-    return (_jsx(FlyoutControlled, Object.assign({}, props, { defaultActive: undefined, active: active, onClose: handleClose, onOpen: handleOpen })));
-};
-export default FlyoutUncontrolled;