reshaped 2.11.12 → 3.0.1

package/dist/components/Theme/useTheme.js

@@ -0,0 +1,20 @@
+"use client";
+import React from "react";
+import { ThemeContext, GlobalColorModeContext } from "./Theme.context.js";
+export const useGlobalColorMode = () => {
+    const { mode } = React.useContext(GlobalColorModeContext);
+    return mode;
+};
+export const useTheme = () => {
+    const { colorMode, theme, setTheme, rootTheme, setRootTheme } = React.useContext(ThemeContext);
+    const { mode, setMode, invertMode } = React.useContext(GlobalColorModeContext);
+    return React.useMemo(() => ({
+        theme,
+        setTheme,
+        rootTheme,
+        setRootTheme,
+        colorMode: colorMode || mode,
+        setColorMode: setMode,
+        invertColorMode: invertMode,
+    }), [colorMode, mode, setMode, invertMode, theme, setTheme, setRootTheme, rootTheme]);
+};

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", { ...attributes, className: rootClassNames, children: React.Children.map(children, (child, index) => {
+            return 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">;
+};
+export type ItemProps = {
+    markerSlot?: React.ReactNode | null;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"li">;
+};

package/dist/components/Toast/Toast.constants.js

@@ -0,0 +1,21 @@
+export const timeouts = {
+    short: 4000,
+    long: 8000,
+};
+export const positions = [
+    "top-start",
+    "top",
+    "top-end",
+    "bottom-start",
+    "bottom",
+    "bottom-end",
+];
+const defaultPositionData = positions.reduce((acc, cur) => ({ [cur]: [], ...acc }), {});
+export const defaultContextData = {
+    queues: defaultPositionData,
+    id: "",
+    show: () => { },
+    hide: () => { },
+    remove: () => { },
+    add: () => "",
+};

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" : "media";
+                                const defaultProps = {
+                                    variant: isPrimary ? "solid" : "ghost",
+                                    size: "small",
+                                    color: isPrimary ? primaryColor : "inherit",
+                                    elevated: color !== "neutral",
+                                };
+                                if (slot.type === Button) {
+                                    return _createElement(Button, { ...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.module.css

@@ -0,0 +1 @@
+.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform:translateZ(0);transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}

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

@@ -0,0 +1,80 @@
+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">;
+};
+export type ProviderProps = {
+    children?: React.ReactNode;
+    options?: Partial<Record<RegionProps["position"], {
+        width?: string;
+        expanded?: boolean;
+    }>>;
+};
+export type RegionProps = {
+    position: Position;
+    nested?: boolean;
+};
+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;
+    id: string;
+};
+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.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 { checkKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
+import TrapFocus from "../../utilities/a11y/TrapFocus.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 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 ?? 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;
+        const trapFocus = new TrapFocus(wrapperRef.current);
+        if (visible) {
+            trapFocus.trap({
+                includeTrigger: true,
+                mode: "content-menu",
+            });
+        }
+        else if (checkKeyboardMode()) {
+            trapFocus.release();
+        }
+    }, [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, { ...toastProps, collapsed: index > 0 && !inspected, attributes: { ...toastProps.attributes, ref: wrapperRef } }) }) }));
+};
+export default ToastContainer;

package/dist/components/Toast/ToastProvider.js

@@ -0,0 +1,77 @@
+"use client";
+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 useToast from "./useToast.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 { position = "bottom-end", ...toastProps } = action.payload.toastProps || {};
+            return {
+                ...state,
+                [position]: [...state[position], { id: action.payload.id, toastProps, status: "entering" }],
+            };
+        case "show":
+            const { id: showId } = action.payload;
+            nextState = { ...state };
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].map((item) => {
+                    if (item.status !== "entering")
+                        return item;
+                    return item.id === showId ? { ...item, status: "entered" } : item;
+                });
+            });
+            return nextState;
+        case "hide":
+            const { id: hideId } = action.payload;
+            nextState = { ...state };
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].map((item) => item.id === hideId ? { ...item, status: "exiting" } : item);
+            });
+            return nextState;
+        case "remove":
+            const { id: removeId } = action.payload;
+            nextState = { ...state };
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].filter((item) => item.id !== removeId);
+            });
+            return nextState;
+    }
+};
+const ToastProvider = (props) => {
+    const { children, options } = props;
+    const toast = useToast();
+    const id = React.useId();
+    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,
+        id,
+        add,
+        show,
+        hide,
+        remove,
+        inspecting: false,
+        options,
+    }), [data, show, hide, add, remove, id, options]);
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, positions.map((position) => (_jsx(ToastRegion, { position: position, nested: !!toast.id }, position)))] }));
+};
+export default ToastProvider;

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/focus.js";
+import ToastContainer from "./ToastContainer.js";
+import ToastContext from "./Toast.context.js";
+import s from "./Toast.module.css";
+const ToastRegion = (props) => {
+    const { position, nested } = 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?.[position] || {};
+    const regionClassNames = classNames(s.region, s[`region--position-${position}`], nested && s["region--nested"]);
+    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, { ...data, index: visibleIndex, inspected: inspecting || !!expanded }, data.id));
+        }) }));
+};
+export default ToastRegion;