diff --git a/package.json b/package.json
index c82737b9c3..57abecce44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "monday-ui-react-core",
- "version": "0.3.59",
+ "version": "0.3.60",
"description": "Official monday.com UI resources for application development in React.js",
"main": "dist/main.js",
"scripts": {
diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx
index 674fbdda38..10c65b470d 100644
--- a/src/components/Toast/Toast.jsx
+++ b/src/components/Toast/Toast.jsx
@@ -4,12 +4,14 @@ import PropTypes from "prop-types";
import cx from "classnames";
import { CSSTransition } from "react-transition-group";
import Button from "../Button/Button";
+import ToastLink from "./ToastLink/ToastLink";
+import ToastButton from "./ToastButton/ToastButton";
import Icon from "../Icon/Icon";
import Check from "../Icon/Icons/components/Check";
import Alert from "../Icon/Icons/components/Alert";
import Info from "../Icon/Icons/components/Info";
import CloseSmall from "../Icon/Icons/components/CloseSmall";
-import { TOAST_TYPES } from "./ToastConstants";
+import { TOAST_TYPES, TOAST_ACTION_TYPES } from "./ToastConstants";
import "./Toast.scss";
const defaultIconMap = {
@@ -33,7 +35,34 @@ const getIcon = (type, icon) => {
/>
) : null;
};
-const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children, closeable, onClose, className }) => {
+
+const Toast = ({
+ open,
+ autoHideDuration,
+ type,
+ icon,
+ hideIcon,
+ action: deprecatedAction,
+ actions,
+ children,
+ closeable,
+ onClose,
+ className
+}) => {
+ const toastLinks = useMemo(() => {
+ return actions
+ ? actions
+ .filter(action => action.type === TOAST_ACTION_TYPES.LINK)
+ .map(({ type, ...otherProps }) => )
+ : null;
+ }, [actions]);
+ const toastButtons = useMemo(() => {
+ return actions
+ ? actions
+ .filter(action => action.type === TOAST_ACTION_TYPES.BUTTON)
+ .map(({ type, content, ...otherProps }) => {content} )
+ : null;
+ }, [actions]);
const classNames = useMemo(() => cx("monday-style-toast", `monday-style-toast--type-${type}`, className), [type]);
const handleClose = useCallback(() => {
if (onClose) {
@@ -76,8 +105,11 @@ const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children,
})}
>
{children}
+ {toastLinks}
- {action &&
{action}
}
+ {(toastButtons || deprecatedAction) && (
+ {toastButtons || deprecatedAction}
+ )}
{closeable && (