@wix/design-system/dist/esm/Toast/Toast.js

@wix/design-system

import React, { memo, useContext } from 'react';
import { CloseButton } from '../CloseButton';
import { ToastContext } from './ToastContext';
import { classes } from './Toast.classes';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import { useHorizontalSwipe } from './hooks/useHorizontalSwipe';
const DEFAULT_ROLE = 'status';
const Toast = memo(({ dataHook, id, role = DEFAULT_ROLE, className, dismissible, dismissLabel, onDismiss, children, }) => {
    const ariaLive = role === 'alert' ? 'assertive' : 'polite';
    const hidden = useContext(ToastContext)?.hidden ?? false;
    const { mobile } = useContext(WixDesignSystemContext);
    const swipeHandlers = useHorizontalSwipe({
        onSwipe: () => dismissible && onDismiss?.(),
        disabled: hidden || !dismissible,
    });
    const handleDismissClick = (event) => {
        event.preventDefault();
        event.stopPropagation();
        onDismiss?.(event);
    };
    return (React.createElement("div", { id: id, className: classes.root({ mobile }, className), "data-hook": dataHook, role: role, "aria-live": ariaLive, "aria-hidden": hidden, ...swipeHandlers },
        React.createElement("div", { "data-hook": "toast-content", className: classes.content() }, children),
        dismissible && (React.createElement("div", { className: classes.dismiss() },
            React.createElement(CloseButton, { className: classes.dismissButton(), dataHook: "toast-dismiss-button", skin: "light", size: "medium", "aria-label": dismissLabel, disabled: hidden, onClick: handleDismissClick })))));
});
Toast.displayName = 'Toast';
export { Toast };
//# sourceMappingURL=Toast.js.map