reshaped 2.8.0 → 2.8.1

package/dist/components/Theme/Theme.js

@@ -0,0 +1,48 @@
+"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 { ThemeContext } from "./Theme.context.js";
+import { useTheme, useGlobalColorMode } from "./useTheme.js";
+import s from "./Theme.module.css";
+const Theme = (props) => {
+    const { name, defaultName, colorMode, children, className } = props;
+    const [mounted, setMounted] = React.useState(false);
+    const [stateTheme, setStateTheme] = React.useState(defaultName);
+    const globalColorMode = useGlobalColorMode();
+    const parentTheme = useTheme();
+    const isRootProvider = !parentTheme.theme;
+    const usedTheme = name || stateTheme || parentTheme.theme;
+    const parentColorMode = isRootProvider ? globalColorMode : parentTheme.colorMode;
+    const invertedColorMode = parentColorMode === "light" ? "dark" : "light";
+    const usedColorMode = colorMode === "inverted" ? invertedColorMode : colorMode || parentColorMode;
+    const rootClassNames = classNames(s.root, className);
+    const setTheme = (theme) => {
+        setStateTheme(theme);
+    };
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        if (!document || !isRootProvider)
+            return;
+        const hasColorModeApplied = document.documentElement.getAttribute("data-rs-color-mode");
+        document.documentElement.setAttribute("data-rs-theme", usedTheme);
+        if (!hasColorModeApplied) {
+            document.documentElement.setAttribute("data-rs-color-mode", usedColorMode);
+        }
+        return () => {
+            document.documentElement.removeAttribute("data-rs-theme");
+            if (!hasColorModeApplied) {
+                document.documentElement.removeAttribute("data-rs-color-mode");
+            }
+        };
+    }, [usedTheme, usedColorMode, isRootProvider]);
+    return (_jsx(ThemeContext.Provider, { value: {
+            theme: usedTheme,
+            colorMode: usedColorMode,
+            setTheme,
+        }, children: _jsx("div", { className: rootClassNames, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider || (!colorMode && !mounted) ? undefined : usedColorMode, children: children }) }));
+};
+export default Theme;

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./Timeline.types";
+declare const Timeline: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Item: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Timeline;

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import s from "./Timeline.module.css";
+const TimelineItem = (props) => {
+    const { children, markerSlot, className, attributes } = props;
+    const hasMarker = markerSlot !== null;
+    const itemClassNames = classNames(s.item, !hasMarker && s["item--full-width"], className);
+    return (_jsxs(View, { as: "li", direction: "row", align: "stretch", gap: 3, attributes: attributes, className: itemClassNames, children: [hasMarker && _jsx("span", { className: s.marker, children: markerSlot }), _jsx(View.Item, { grow: true, children: children })] }));
+};
+const Timeline = (props) => {
+    const { children, className, attributes } = props;
+    const rootClassNames = classNames(className);
+    return (_jsx("ul", Object.assign({}, attributes, { className: rootClassNames, children: React.Children.map(children, (child, index) => {
+            return (child === null || child === void 0 ? void 0 : child.type) === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
+        }) })));
+};
+Timeline.Item = TimelineItem;
+export default Timeline;

package/dist/components/Timeline/Timeline.types.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"ul", Props>;
+};
+export type ItemProps = {
+    markerSlot?: React.ReactNode | null;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"li", ItemProps>;
+};

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,5 @@
+import type * as T from "./Toast.types";
+declare const Toast: (props: T.Props & {
+    collapsed: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Toast;

package/dist/components/Toast/Toast.js

@@ -0,0 +1,44 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import View from "../View/index.js";
+import Button from "../Button/index.js";
+import Icon from "../Icon/index.js";
+import Theme from "../Theme/index.js";
+import Text from "../Text/index.js";
+import s from "./Toast.module.css";
+const Toast = (props) => {
+    const { size = "small", text, children, color = "inverted", icon, title, actionsSlot, startSlot, collapsed, className, attributes, } = props;
+    let backgroundColor = color === "inverted" || color === "neutral" ? "elevation-overlay" : color;
+    if (color === "neutral")
+        backgroundColor = collapsed ? "neutral" : "elevation-overlay";
+    const borderColor = color === "neutral" ? "neutral-faded" : "transparent";
+    const textTagName = size === "small" ? "span" : "div";
+    const isLarge = size === "large";
+    let actions = [];
+    if (actionsSlot) {
+        actions = Array.isArray(actionsSlot) ? actionsSlot : [actionsSlot];
+    }
+    const textContent = (title || text) && (_jsxs(_Fragment, { children: [title && (_jsxs(Text, { variant: "body-3", weight: "bold", as: textTagName, children: [title, " "] })), _jsx(Text, { variant: "body-3", as: textTagName, children: text })] }));
+    const toastNode = (_jsxs(View, { backgroundColor: backgroundColor, borderColor: borderColor, padding: 4, borderRadius: "medium", animated: true, direction: "row", gap: 3, align: isLarge ? "start" : "center", className: [s.toast, className], attributes: attributes, children: [icon && _jsx(Icon, { size: 5, svg: icon, className: s.icon }), startSlot && !icon && _jsx(View.Item, { children: startSlot }), _jsx(View.Item, { grow: true, children: _jsxs(View, { direction: isLarge ? "column" : "row", align: isLarge ? "start" : "center", gap: 3, children: [_jsx(View.Item, { grow: true, children: (textContent && children) || size !== "small" ? (_jsxs(View, { gap: 0.5, children: [textContent, children && _jsx(View, { gap: 3, children: children })] })) : (textContent || children) }), actions.length && (_jsx(View, { direction: "row", align: "center", gap: 2, children: actions.map((slot, index) => {
+                                const isPrimary = size === "large" ? index === 0 : index === actions.length - 1;
+                                const primaryColor = color === "neutral" || color === "inverted" ? "neutral" : "white";
+                                const defaultProps = {
+                                    variant: isPrimary ? "solid" : "ghost",
+                                    size: "small",
+                                    color: isPrimary ? primaryColor : "inherit",
+                                    elevated: color !== "neutral",
+                                };
+                                if (slot.type === Button) {
+                                    return _createElement(Button, Object.assign({}, defaultProps, slot.props, { key: index }));
+                                }
+                                else {
+                                    return slot;
+                                }
+                            }) }))] }) })] }));
+    if (color === "inverted") {
+        return _jsx(Theme, { colorMode: "inverted", children: toastNode });
+    }
+    return toastNode;
+};
+export default Toast;

package/dist/components/Toast/Toast.types.d.ts

@@ -0,0 +1,78 @@
+import type React from "react";
+import type { IconProps } from "../Icon";
+import type * as G from "../../types/global";
+export type Status = "entering" | "entered" | "exited";
+export type TimeoutAlias = "short" | "long";
+export type Timeout = TimeoutAlias | number;
+export type Position = "top" | "top-end" | "top-start" | "bottom" | "bottom-start" | "bottom-end";
+export type Props = {
+    size?: "small" | "medium" | "large";
+    icon?: IconProps["svg"];
+    startSlot?: React.ReactNode;
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    actionsSlot?: React.ReactNode;
+    color?: "neutral" | "primary" | "critical" | "positive" | "inverted";
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export type ProviderProps = {
+    children?: React.ReactNode;
+    options?: Partial<Record<RegionProps["position"], {
+        width?: string;
+        expanded?: boolean;
+    }>>;
+};
+export type RegionProps = {
+    position: Position;
+};
+export type ContainerProps = {
+    id: string;
+    toastProps: Props & {
+        timeout?: Timeout;
+    };
+    index: number;
+    status?: "entering" | "entered" | "exiting";
+    inspected: boolean;
+};
+export type Context = {
+    options?: ProviderProps["options"];
+    queues: Record<RegionProps["position"], Array<ContainerProps>>;
+    add: (toast: Props & ShowOptions) => string;
+    show: (id: string) => void;
+    hide: (id: string) => void;
+    remove: (id: string) => void;
+};
+export type ShowOptions = {
+    timeout?: Timeout;
+    position?: Position;
+};
+type AddAction = {
+    type: "add";
+    payload: {
+        toastProps: Props & ShowOptions;
+        id: string;
+    };
+};
+type ShowAction = {
+    type: "show";
+    payload: {
+        id: string;
+    };
+};
+type HideAction = {
+    type: "hide";
+    payload: {
+        id: string;
+    };
+};
+type RemoveAction = {
+    type: "remove";
+    payload: {
+        id: string;
+    };
+};
+type Action = AddAction | ShowAction | HideAction | RemoveAction;
+export type Reducer = (state: Context["queues"], action: Action) => Context["queues"];
+export {};

package/dist/components/Toast/ToastContainer.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Toast.types";
+declare const ToastContainer: (props: T.ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default ToastContainer;

package/dist/components/Toast/ToastContainer.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { trapFocus, isKeyboardMode } from "../../utilities/a11y.js";
+import Toast from "./Toast.js";
+import ToastContext from "./Toast.context.js";
+import { timeouts } from "./Toast.constants.js";
+import s from "./Toast.module.css";
+const ToastContainer = (props) => {
+    const { toastProps, id, status, inspected, index } = props;
+    const { timeout = "short" } = toastProps;
+    const { show, hide, remove } = React.useContext(ToastContext);
+    const [toastHeight, setToastHeight] = React.useState();
+    const timeoutRef = React.useRef();
+    const resizingRef = React.useRef(false);
+    const trapFocusRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const visible = status === "entered";
+    const containerClassNames = classNames(s.container, visible && s[`container--visible`], index === 0 && s[`container--index-${index}`], !inspected && (index === 1 || index === 2) && s[`container--index-${index}`], !inspected && index >= 3 && s["container--index-overflow"]);
+    const stopTimer = React.useCallback(() => {
+        if (!timeoutRef.current)
+            return;
+        clearTimeout(timeoutRef.current);
+    }, []);
+    const startTimer = React.useCallback(() => {
+        stopTimer();
+        const timeoutValue = typeof timeout === "string" ? timeouts[timeout] : timeout;
+        if (timeout === 0)
+            return;
+        timeoutRef.current = setTimeout(() => {
+            hide(id);
+        }, timeoutValue !== null && timeoutValue !== void 0 ? timeoutValue : timeouts.short);
+    }, [hide, id, timeout, stopTimer]);
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "height")
+            return;
+        if (visible)
+            return;
+        remove(id);
+    };
+    React.useEffect(() => {
+        if (!visible)
+            return;
+        if (inspected) {
+            stopTimer();
+        }
+        else {
+            startTimer();
+        }
+    }, [inspected, startTimer, stopTimer, visible]);
+    React.useEffect(() => {
+        if (wrapperRef.current) {
+            setToastHeight(wrapperRef.current.clientHeight);
+        }
+        show(id);
+        startTimer();
+    }, [show, id, startTimer]);
+    React.useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        if (visible) {
+            trapFocusRef.current = trapFocus(wrapperRef.current, {
+                includeTrigger: true,
+                mode: "content-menu",
+            });
+        }
+        else if (trapFocusRef.current && isKeyboardMode()) {
+            trapFocusRef.current();
+            trapFocusRef.current = null;
+        }
+    }, [visible]);
+    React.useEffect(() => {
+        if (!visible || index > 0)
+            return;
+        const handleResize = () => {
+            resizingRef.current = true;
+            onNextFrame(() => {
+                resizingRef.current = false;
+            });
+            if (wrapperRef.current) {
+                setToastHeight(wrapperRef.current.clientHeight);
+            }
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [visible, index]);
+    return (_jsx("li", { className: containerClassNames, style: {
+            // Height + padding + borders
+            height: status === "entered" ? `calc(${toastHeight}px + var(--rs-unit-x2) + 2px)` : 0,
+            // Disable transition when height of the toast can change
+            transitionDuration: resizingRef.current ? "0s" : undefined,
+        }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, Object.assign({}, toastProps, { collapsed: index > 0 && !inspected, attributes: Object.assign(Object.assign({}, toastProps.attributes), { ref: wrapperRef }) })) }) }));
+};
+export default ToastContainer;

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Toast.types";
+declare const ToastProvider: (props: T.ProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ToastProvider;

package/dist/components/Toast/ToastProvider.js

@@ -0,0 +1,81 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import ToastContext from "./Toast.context.js";
+import ToastRegion from "./ToastRegion.js";
+import { positions, defaultContextData } from "./Toast.constants.js";
+let counter = 0;
+const generateId = () => `__rs-toast-${counter++}`;
+const toastReducer = (state, action) => {
+    let nextState;
+    switch (action.type) {
+        case "add":
+            const _a = action.payload.toastProps || {}, { position = "bottom-end" } = _a, toastProps = __rest(_a, ["position"]);
+            return Object.assign(Object.assign({}, state), { [position]: [...state[position], { id: action.payload.id, toastProps, status: "entering" }] });
+        case "show":
+            const { id: showId } = action.payload;
+            nextState = Object.assign({}, state);
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].map((item) => {
+                    if (item.status !== "entering")
+                        return item;
+                    return item.id === showId ? Object.assign(Object.assign({}, item), { status: "entered" }) : item;
+                });
+            });
+            return nextState;
+        case "hide":
+            const { id: hideId } = action.payload;
+            nextState = Object.assign({}, state);
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].map((item) => item.id === hideId ? Object.assign(Object.assign({}, item), { status: "exiting" }) : item);
+            });
+            return nextState;
+        case "remove":
+            const { id: removeId } = action.payload;
+            nextState = Object.assign({}, state);
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].filter((item) => item.id !== removeId);
+            });
+            return nextState;
+    }
+};
+const ToastProvider = (props) => {
+    const { children, options } = props;
+    const [data, dispatch] = React.useReducer(toastReducer, defaultContextData.queues);
+    const add = React.useCallback((toastProps) => {
+        const id = generateId();
+        dispatch({ type: "add", payload: { toastProps, id } });
+        return id;
+    }, []);
+    const show = React.useCallback((id) => {
+        dispatch({ type: "show", payload: { id } });
+    }, []);
+    const hide = React.useCallback((id) => {
+        dispatch({ type: "hide", payload: { id } });
+    }, []);
+    const remove = React.useCallback((id) => {
+        dispatch({ type: "remove", payload: { id } });
+    }, []);
+    const value = React.useMemo(() => ({
+        queues: data,
+        add,
+        show,
+        hide,
+        remove,
+        inspecting: false,
+        options,
+    }), [data, show, hide, add, remove, options]);
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, positions.map((position) => (_jsx(ToastRegion, { position: position }, position)))] }));
+};
+export default ToastProvider;

package/dist/components/Toast/ToastRegion.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Toast.types";
+declare const ToastRegion: (props: T.RegionProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ToastRegion;

package/dist/components/Toast/ToastRegion.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { focusableSelector } from "../../utilities/a11y.js";
+import ToastContainer from "./ToastContainer.js";
+import ToastContext from "./Toast.context.js";
+import s from "./Toast.module.css";
+const ToastRegion = (props) => {
+    const { position } = props;
+    const { queues, options } = React.useContext(ToastContext);
+    const [inspecting, setInspecting] = React.useState(false);
+    const ignoreHoverRef = React.useRef(false);
+    const rootRef = React.useRef(null);
+    const queue = queues[position];
+    const { width, expanded } = (options === null || options === void 0 ? void 0 : options[position]) || {};
+    const regionClassNames = classNames(s.region, s[`region--position-${position}`]);
+    const filteredLength = queue.filter((item) => item.status === "entered").length;
+    let hiddenCount = 0;
+    // If touch event was triggered – ignore hover events
+    const handleTouchStart = () => {
+        ignoreHoverRef.current = true;
+    };
+    const handleClick = (e) => {
+        let currentEl = e.target;
+        let isFocusable = false;
+        while (currentEl && currentEl !== rootRef.current && !isFocusable) {
+            isFocusable = currentEl.matches(focusableSelector);
+            currentEl = currentEl.parentElement;
+        }
+        // Change inspecting mode when clicking on static content
+        if (!isFocusable) {
+            setInspecting((prevInspecting) => !prevInspecting);
+        }
+        // Click is called last so we reset our hover events ignore
+        ignoreHoverRef.current = false;
+    };
+    const handleMouseEnter = () => {
+        if (ignoreHoverRef.current)
+            return;
+        setInspecting(true);
+    };
+    const handleMouseLeave = () => {
+        if (ignoreHoverRef.current)
+            return;
+        setInspecting(false);
+    };
+    React.useEffect(() => {
+        if (queue.length === 0)
+            setInspecting(false);
+    }, [queue.length]);
+    if (!queue.length)
+        return null;
+    return (
+    // We only use onClick for touch devices since touchend is not supported
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsx("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width }, children: queue.map((data, index) => {
+            const visibleIndex = filteredLength - index + hiddenCount - 1;
+            if (data.status !== "entered")
+                hiddenCount += 1;
+            return (_jsx(ToastContainer, Object.assign({}, data, { index: visibleIndex, inspected: inspecting || !!expanded }), data.id));
+        }) }));
+};
+export default ToastRegion;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Tooltip.types";
+declare const Tooltip: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Theme from "../Theme/index.js";
+import Text from "../Text/index.js";
+import Flyout from "../_private/Flyout/index.js";
+import s from "./Tooltip.module.css";
+const Tooltip = (props) => {
+    const { id, text, children, onOpen, onClose, position = "bottom", active } = props;
+    return (_jsxs(Flyout, { id: id, active: active, position: position, onOpen: onOpen, onClose: onClose, triggerType: "hover", children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+};
+export default Tooltip;

package/dist/components/View/View.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./View.types";
+declare const View: {
+    <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
+    Item: <As_1 extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As_1>) => import("react/jsx-runtime").JSX.Element;
+};
+export default View;