@workday/canvas-kit-react/dist/es6/toast/lib/Toast.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createContainer } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { Popup } from '@workday/canvas-kit-react/popup';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { ToastBody } from './ToastBody';
import { ToastCloseIcon } from './ToastCloseIcon';
import { ToastIcon } from './ToastIcon';
import { ToastLink } from './ToastLink';
import { ToastMessage } from './ToastMessage';
import { useToastModel } from './hooks/useToastModel';
/**
 * The function helps set the correct aria attributes based on the mode
 * @param mode Defines what aria attributes will be added to the main container
 * @param id Used to tie the Toast to Toast.Message for screen readers
 */
const getAriaAttributes = (mode, id) => {
    switch (mode) {
        case 'dialog':
            return {
                'aria-describedby': id,
                // This is added by Popup.Card, so overwriting to remove it
                'aria-labelledby': undefined,
                role: 'dialog',
            };
        case 'alert':
            return {
                role: 'alert',
                'aria-live': 'assertive',
                'aria-atomic': true,
            };
        case 'status':
            return {
                role: 'status',
                'aria-live': 'polite',
                'aria-atomic': true,
            };
        default: {
            return {};
        }
    }
};
const toastStencil = createStencil({
    base: { name: "wz0ct", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}variant{alt{border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}tonal{}}" }
}, "toast-4e8aec");
/**
 * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
 *
 * ```tsx
 * import { Toast } from "@workday/canvas-kit-react/toast";
 *
 * const MyToast = (props: CardProps) => (
 *    <Toast mode="dialog" aria-label="notifcation">
 *      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
 *      <Toast.Body>
 *        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
 *        <Toast.Link href="#hreflink">Custom Link</Toast.Link>
 *      </Toast.Body>
 *      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
 *    </Toast>
 * );
 *```
 */
export const Toast = createContainer('div')({
    displayName: 'Toast',
    modelHook: useToastModel,
    subComponents: {
        /**
         * `Toast.Body` should container `Toast.Message` and `Toast.Link`. This ensures proper styling and spacing between elements.
         *
         * ```tsx
         * <Toast.Body>
         *  <Toast.Message>Your workbook was successfully processed.</Toast.Message>
         *  <Toast.Link href="#hreflink">Custom Link</Toast.Link>
         * </Toast.Body>
         * ```
         */
        Body: ToastBody,
        /**
         * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
         */
        CloseIcon: ToastCloseIcon,
        /**
         * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
         */
        Icon: ToastIcon,
        /**
         * `Toast.Message` renders our `Subtext` component where you can style however way you'd like with style properties.
         * This component also has an `id` so that when the `Toast` has a prop of `mode="dialog"` the message is read out by screen readers by adding an `aria-describedby` on the main `Toast` component.
         */
        Message: ToastMessage,
        /**
         * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
         */
        Link: ToastLink,
    },
})(({ children, variant, ...elemProps }, _, model) => {
    return (_jsx(Popup.Card, { variant: variant, ...getAriaAttributes(model.state.mode, model.state.id), ...mergeStyles(elemProps, toastStencil({ variant })), children: children }));
});