reshaped 1.0.1 → 2.2.0

package/components/Timeline/tests/Timeline.stories.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Timeline from "../index.js";
+export default { title: "Components/Timeline" };
+export const base = () => (<Example>
+		<Example.Item title="children passed directly">
+			<Timeline>
+				<Placeholder />
+				<Placeholder />
+				<Placeholder />
+			</Timeline>
+		</Example.Item>
+		<Example.Item title="children wrapped with Timeline.Item">
+			<Timeline>
+				<Timeline.Item>
+					<Placeholder />
+				</Timeline.Item>
+				<Timeline.Item>
+					<Placeholder />
+				</Timeline.Item>
+				<Timeline.Item>
+					<Placeholder />
+				</Timeline.Item>
+			</Timeline>
+		</Example.Item>
+	</Example>);
+export const marker = () => (<Example>
+		<Example.Item title="slot">
+			<Timeline>
+				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+					<Placeholder />
+				</Timeline.Item>
+				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+					<Placeholder />
+				</Timeline.Item>
+				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+					<Placeholder />
+				</Timeline.Item>
+			</Timeline>
+		</Example.Item>
+
+		<Example.Item title="null marker">
+			<Timeline>
+				<Timeline.Item markerSlot={null}>
+					<Placeholder />
+				</Timeline.Item>
+				<Timeline.Item markerSlot={null}>
+					<Placeholder />
+				</Timeline.Item>
+				<Timeline.Item>
+					<Placeholder />
+				</Timeline.Item>
+			</Timeline>
+		</Example.Item>
+	</Example>);

package/components/Toast/Toast.constants.d.ts

@@ -0,0 +1,10 @@
+import type * as T from "./Toast.types";
+export declare const timeouts: Record<T.Timeout, number>;
+export declare const positions: T.Position[];
+export declare const defaultContextData: {
+    queues: Record<T.Position, T.ContainerProps[]>;
+    show: () => void;
+    hide: () => void;
+    remove: () => void;
+    add: () => string;
+};

package/components/Toast/Toast.constants.js

@@ -0,0 +1,20 @@
+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) => (Object.assign({ [cur]: [] }, acc)), {});
+export const defaultContextData = {
+    queues: defaultPositionData,
+    show: () => { },
+    hide: () => { },
+    remove: () => { },
+    add: () => "",
+};

package/components/Toast/Toast.context.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Toast.types";
+declare const context: React.Context<T.Context>;
+export default context;

package/components/Toast/Toast.context.js

@@ -0,0 +1,5 @@
+"use client";
+import React from "react";
+import { defaultContextData } from "./Toast.constants.js";
+const context = React.createContext(defaultContextData);
+export default context;

package/components/Toast/Toast.d.ts

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

package/components/Toast/Toast.js

@@ -0,0 +1,55 @@
+"use client";
+import React from "react";
+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, 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) && (React.createElement(React.Fragment, null,
+        title && (React.createElement(Text, { variant: "body-3", weight: "bold", as: textTagName },
+            title,
+            " ")),
+        React.createElement(Text, { variant: "body-3", as: textTagName }, text)));
+    const toastNode = (React.createElement(View, { backgroundColor: backgroundColor, borderColor: borderColor, padding: 4, borderRadius: "medium", animated: true, direction: "row", gap: 3, align: isLarge ? "start" : "center", className: s.toast, attributes: attributes },
+        icon && React.createElement(Icon, { size: 5, svg: icon, className: s.icon }),
+        startSlot && !icon && React.createElement(View.Item, null, startSlot),
+        React.createElement(View.Item, { grow: true },
+            React.createElement(View, { direction: isLarge ? "column" : "row", align: isLarge ? "start" : "center", gap: 3 },
+                React.createElement(View.Item, { grow: true }, (textContent && children) || size !== "small" ? (React.createElement(View, { gap: 0.5 },
+                    textContent,
+                    children && React.createElement(View, { gap: 3 }, children))) : (textContent || children)),
+                actions.length && (React.createElement(View, { direction: "row", align: "center", gap: 2 }, 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 React.createElement(Button, Object.assign({}, defaultProps, slot.props, { key: index }));
+                    }
+                    else {
+                        return slot;
+                    }
+                })))))));
+    if (color === "inverted") {
+        return React.createElement(Theme, { colorMode: "inverted" }, toastNode);
+    }
+    return toastNode;
+};
+export default Toast;

package/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-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;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--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 (min-width:660px){.region{width:360px}}

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

@@ -0,0 +1,77 @@
+import 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";
+    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/components/Toast/Toast.types.js

@@ -0,0 +1 @@
+export {};

package/components/Toast/ToastContainer.d.ts

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

package/components/Toast/ToastContainer.js

@@ -0,0 +1,97 @@
+"use client";
+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 (React.createElement("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 },
+        React.createElement("span", { className: s.wrapper },
+            React.createElement(Toast, Object.assign({}, toastProps, { collapsed: index > 0 && !inspected, attributes: { ref: wrapperRef } })))));
+};
+export default ToastContainer;

package/components/Toast/ToastProvider.d.ts

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

package/components/Toast/ToastProvider.js

@@ -0,0 +1,80 @@
+"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 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) => {
+                    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 (React.createElement(ToastContext.Provider, { value: value },
+        children,
+        positions.map((position) => (React.createElement(ToastRegion, { position: position, key: position })))));
+};
+export default ToastProvider;

package/components/Toast/ToastRegion.d.ts

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

package/components/Toast/ToastRegion.js

@@ -0,0 +1,63 @@
+"use client";
+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
+    React.createElement("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width } }, queue.map((data, index) => {
+        const visibleIndex = filteredLength - index + hiddenCount - 1;
+        if (data.status !== "entered")
+            hiddenCount += 1;
+        return (React.createElement(ToastContainer, Object.assign({ key: data.id }, data, { index: visibleIndex, inspected: inspecting || !!expanded })));
+    })));
+};
+export default ToastRegion;

package/components/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useToast } from "./useToast";
+export { default as ToastProvider } from "./ToastProvider";
+export type { Props as ToastProps, ProviderProps as ToastProviderProps } from "./Toast.types";

package/components/Toast/index.js

@@ -0,0 +1,2 @@
+export { default as useToast } from "./useToast.js";
+export { default as ToastProvider } from "./ToastProvider.js";

package/components/Toast/tests/Toast.stories.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const position: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const timeout: () => React.JSX.Element;
+export declare const regionOptions: () => React.JSX.Element;
+export declare const slots: () => React.JSX.Element;
+export declare const edgeCases: () => React.JSX.Element;