@navinc/base-react-components/dist/wayfinder/toast/toast.js

Nav's Pattern Library

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 { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as ToastPrimitive from '@radix-ui/react-toast';
import { useCallback, useState, useMemo, forwardRef } from 'react';
import { Icon } from '../icon/icon.js';
import { CopyInheritColor } from '../copy/index.js';
import { ToastIcon } from './toast-icon.js';
import { defaultVariation } from './helpers.js';
import { StyledCloseButton, StyledDescription, StyledTitle, StyledToastViewport, ToastBody, ToastContainer, } from './styles.js';
import { ToastContext } from './toast-context.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
export const Toast = styledBackwardsCompatibility(forwardRef((_a, forwardedRef) => {
    var { onOpenChange, shouldAutoClose = true, duration = 5000, variation = defaultVariation, iconComponent = null, title, description } = _a, toastProps = __rest(_a, ["onOpenChange", "shouldAutoClose", "duration", "variation", "iconComponent", "title", "description"]);
    if (!title && !description) {
        return null;
    }
    return (_jsxs(ToastContainer, Object.assign({}, toastProps, { ref: forwardedRef, duration: shouldAutoClose ? duration : Infinity, onOpenChange: onOpenChange, "data-variation": variation, variation: variation, children: [iconComponent || _jsx(ToastIcon, { variation: variation }), _jsxs(ToastBody, { children: [title && (_jsx(StyledTitle, { "data-testid": "toast:title", children: _jsx(CopyInheritColor, { size: "headline", variant: "emphasized", children: title }) })), description && (_jsx(StyledDescription, { "data-testid": "toast:description", children: _jsx(CopyInheritColor, { size: "body2", variant: "emphasized", children: description }) }))] }), _jsx(StyledCloseButton, { "aria-label": "Close", children: _jsx(Icon, { size: "small", name: "actions/close" }) })] })));
}));
export const ToastProvider = (_a) => {
    var { children, viewportStyle } = _a, props = __rest(_a, ["children", "viewportStyle"]);
    const [toasts, setToasts] = useState(new Map());
    const handleAddToast = useCallback((toast) => {
        setToasts((currentToasts) => {
            const newMap = new Map(currentToasts);
            const timestamp = String(Date.now());
            newMap.set(timestamp, Object.assign(Object.assign({}, toast), { open: true }));
            if (newMap.size > 3) {
                newMap.delete(newMap.keys().next().value);
            }
            return newMap;
        });
    }, []);
    const handleRemoveToast = useCallback((key) => {
        setToasts((currentToasts) => {
            const newMap = new Map(currentToasts);
            newMap.delete(key);
            return newMap;
        });
    }, []);
    const handleDispatchInfo = useCallback((payload) => {
        handleAddToast(Object.assign(Object.assign({}, payload), { variation: 'info' }));
    }, [handleAddToast]);
    const handleDispatchError = useCallback((payload) => handleAddToast(Object.assign(Object.assign({}, payload), { variation: 'error' })), [handleAddToast]);
    const handleDispatchSuccess = useCallback((payload) => handleAddToast(Object.assign(Object.assign({}, payload), { variation: 'success' })), [handleAddToast]);
    const value = useMemo(() => ({ info: handleDispatchInfo, error: handleDispatchError, success: handleDispatchSuccess }), [handleDispatchInfo, handleDispatchError, handleDispatchSuccess]);
    const visibleToasts = useMemo(() => Array.from(toasts), [toasts]);
    return (_jsx(ToastContext.Provider, { value: value, children: _jsxs(ToastPrimitive.Provider, Object.assign({}, props, { children: [children, visibleToasts.map(([key, toastProps]) => (_createElement(Toast, Object.assign({}, toastProps, { key: key, id: key, onOpenChange: (open) => {
                        if (!open) {
                            handleRemoveToast(key);
                        }
                    } })))), _jsx(StyledToastViewport, { style: viewportStyle })] })) }));
};
//# sourceMappingURL=toast.js.map