@wix/design-system
Version:
@wix/design-system
20 lines • 1.23 kB
JavaScript
import React, { memo, useContext } from 'react';
import CloseButton from '../CloseButton';
import { ToastContext } from './ToastContext';
import { st, classes } from './Toast.st.css.js';
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 handleDismissClick = (event) => {
event.preventDefault();
event.stopPropagation();
onDismiss?.(event);
};
return (React.createElement("div", { id: id, className: st(classes.root, className), "data-hook": dataHook, role: role, "aria-live": ariaLive, "aria-hidden": hidden },
React.createElement("div", { "data-hook": "toast-content", className: classes.content }, children),
dismissible && (React.createElement("div", { className: classes.dismiss },
React.createElement(CloseButton, { dataHook: "toast-dismiss-button", skin: "light", size: "medium", "aria-label": dismissLabel, disabled: hidden, onClick: handleDismissClick })))));
});
export default Toast;
//# sourceMappingURL=Toast.js.map