@synerise/ds-toast 1.4.9 → 1.4.11

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.4.10...@synerise/ds-toast@1.4.11) (2026-03-20)
+
+### Bug Fixes
+
+- **toast:** add animations to toast ([5167350](https://github.com/Synerise/synerise-design/commit/5167350a1f15ad06f8fa4cb20ca97e6aa1269b64))
+
+## [1.4.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.4.9...@synerise/ds-toast@1.4.10) (2026-03-09)
+
+**Note:** Version bump only for package @synerise/ds-toast
+
 ## [1.4.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.4.8...@synerise/ds-toast@1.4.9) (2026-02-23)
 
 **Note:** Version bump only for package @synerise/ds-toast

package/README.md

@@ -34,7 +34,7 @@ import Button from '@synerise/ds-button';
 | type            | message type                                          | 'success' / 'negative' / 'warning' / 'informative' | -       |
 | message         | message main content                                  | ReactNode                                          | -       |
 | description     | message description                                   | ReactNode                                          | -       |
-| customIcon      | overwrite default icon (default icon depends on type) | ReactNode                                          | -       |
+| customIcon      | overwrite default icon (default icon depends on type) | ReactElement                                       | -       |
 | expander        | render with expander icon                             | boolean                                            | -       |
 | onExpand        | triggered on click of expander icon                   | (expanded: boolean) => void                        | -       |
 | expandedContent | content rendered if exapanded prop is true            | ReactNode                                          | -       |
@@ -74,4 +74,4 @@ Removes a specific or all displayed toasts with an exit animation.
 
 #### showToast(type, toastProps, toastOptions?)
 
-enders a Toast of specified `type`, using toastProps and then displays it using the Toaster with toastOptoins. returns a toastID that can be later used to remove / dismiss that toast manually.
+Renders a Toast of specified `type`, using toastProps and then displays it using the Toaster with toastOptions. Returns a toastId that can be later used to remove / dismiss that toast manually.

package/dist/Toast.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ShowToastProps, type ToastCustomisationOptions, type ToastProps, type ToastType } from './Toast.types';
 export declare const Toast: {
-    ({ type, message, description, expander, expandedContent, withClose, customIcon, expanded, onExpand, onCloseClick, onDismiss, button, toastId, ...htmlAttributes }: ToastProps): React.JSX.Element;
+    ({ type, message, description, expander, expandedContent, withClose, customIcon, expanded, onExpand, onCloseClick, onDismiss, button, toastId, show, ...htmlAttributes }: ToastProps): React.JSX.Element;
     success(props: ShowToastProps, options?: ToastCustomisationOptions): string;
     error(props: ShowToastProps, options?: ToastCustomisationOptions): string;
     info(props: ShowToastProps, options?: ToastCustomisationOptions): string;

package/dist/Toast.js

@@ -1,4 +1,4 @@
-var _excluded = ["type", "message", "description", "expander", "expandedContent", "withClose", "customIcon", "expanded", "onExpand", "onCloseClick", "onDismiss", "button", "toastId"];
+var _excluded = ["type", "message", "description", "expander", "expandedContent", "withClose", "customIcon", "expanded", "onExpand", "onCloseClick", "onDismiss", "button", "toastId", "show"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useEffect, useMemo } from 'react';
@@ -7,7 +7,6 @@ import { v4 as uuid } from 'uuid';
 import Icon, { AngleDownS, CloseM } from '@synerise/ds-icon';
 import * as S from './Toast.styles';
 import { ICONS } from './constants';
-import { removeToast } from './utils';
 export var Toast = function Toast(_ref) {
   var type = _ref.type,
     message = _ref.message,
@@ -22,6 +21,8 @@ export var Toast = function Toast(_ref) {
     onDismiss = _ref.onDismiss,
     button = _ref.button,
     toastId = _ref.toastId,
+    _ref$show = _ref.show,
+    show = _ref$show === void 0 ? true : _ref$show,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasToastContent = button || description || expandedContent;
   var toastContent = hasToastContent && /*#__PURE__*/React.createElement(S.AlertContent, {
@@ -42,7 +43,7 @@ export var Toast = function Toast(_ref) {
   var handleCloseClick = function handleCloseClick() {
     onCloseClick == null || onCloseClick();
     if (toastId) {
-      removeToast(toastId);
+      toast.dismiss(toastId);
     }
   };
   useEffect(function () {
@@ -50,7 +51,9 @@ export var Toast = function Toast(_ref) {
       onDismiss == null || onDismiss();
     };
   }, []);
-  return /*#__PURE__*/React.createElement(S.Container, _extends({
+  return /*#__PURE__*/React.createElement(S.AnimationContainer, {
+    $show: show
+  }, /*#__PURE__*/React.createElement(S.Container, _extends({
     toastType: type,
     "data-toastType": type
   }, htmlAttributes), /*#__PURE__*/React.createElement(S.IconWrapper, null, customIcon || /*#__PURE__*/React.createElement(Icon, {
@@ -69,14 +72,17 @@ export var Toast = function Toast(_ref) {
     onClick: handleCloseClick
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CloseM, null)
-  }))), toastContent));
+  }))), toastContent)));
 };
 export var showToast = function showToast(type, props, options) {
   var toastId = props.toastId || "toast-" + uuid();
-  return toast.custom(/*#__PURE__*/React.createElement(Toast, _extends({}, props, {
-    toastId: toastId,
-    type: type
-  })), _extends({}, options, {
+  return toast.custom(function (t) {
+    return /*#__PURE__*/React.createElement(Toast, _extends({}, props, {
+      toastId: toastId,
+      type: type,
+      show: t.visible
+    }));
+  }, _extends({}, options, {
     id: toastId
   }));
 };

package/dist/Toast.styles.d.ts

@@ -2,6 +2,9 @@ import { type ReactNode } from 'react';
 import { type Keyframes } from 'styled-components';
 import { type ToastType } from './Toast.types';
 export declare const closingAnimation: () => Keyframes;
+export declare const AnimationContainer: import("styled-components").StyledComponent<"div", any, {
+    $show?: boolean;
+}, never>;
 export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
     hasBottomMargin?: boolean;
 }, never>;
@@ -21,9 +24,6 @@ export declare const ListWrapper: import("styled-components").StyledComponent<"d
 export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AnimationContainer: import("styled-components").StyledComponent<"div", any, {
-    show?: boolean;
-}, never>;
 export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AlertMessage: import("styled-components").StyledComponent<"div", any, {
     noToastContent?: boolean;

package/dist/Toast.styles.js

@@ -40,52 +40,58 @@ var getWidth = function getWidth(hasClose, hasExpander) {
   return '24px';
 };
 var openingAnimation = function openingAnimation() {
-  return keyframes(["0%{height:0%;opacity:0;}100%{height:100%;opacity:1;}"]);
+  return keyframes(["0%{opacity:0;transform:translateY(60px);}100%{opacity:1;transform:translateY(0);}"]);
 };
 export var closingAnimation = function closingAnimation() {
-  return keyframes(["0%{height:100%;opacity:1;}100%{height:0%;opacity:0;}"]);
+  return keyframes(["0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-8px) scale(0.98);}"]);
 };
+export var AnimationContainer = styled.div.withConfig({
+  displayName: "Toaststyles__AnimationContainer",
+  componentId: "sc-wwaizr-0"
+})(["animation:", " 0.6s cubic-bezier(0.4,0,0.2,1) forwards;"], function (props) {
+  return props.$show ? openingAnimation() : closingAnimation();
+});
 export var AlertContent = styled.div.withConfig({
   displayName: "Toaststyles__AlertContent",
-  componentId: "sc-wwaizr-0"
+  componentId: "sc-wwaizr-1"
 })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin-right:24px;", " ", "{margin-bottom:8px;}"], function (props) {
   return props.hasBottomMargin && 'margin-bottom:16px;';
 }, UnorderedList);
 export var AllContent = styled.div.withConfig({
   displayName: "Toaststyles__AllContent",
-  componentId: "sc-wwaizr-1"
+  componentId: "sc-wwaizr-2"
 })(["display:flex;color:inherit;"]);
 export var IconWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconWrapper",
-  componentId: "sc-wwaizr-2"
+  componentId: "sc-wwaizr-3"
 })(["margin:12px;display:flex;"]);
 export var IconCloseWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconCloseWrapper",
-  componentId: "sc-wwaizr-3"
+  componentId: "sc-wwaizr-4"
 })(["cursor:pointer;"]);
 export var IconExpanderWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconExpanderWrapper",
-  componentId: "sc-wwaizr-4"
+  componentId: "sc-wwaizr-5"
 })(["cursor:pointer;svg{transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
   return props.expanded ? '180deg' : '0deg';
 });
 export var ButtonWrapper = styled.div.withConfig({
   displayName: "Toaststyles__ButtonWrapper",
-  componentId: "sc-wwaizr-5"
+  componentId: "sc-wwaizr-6"
 })(["position:absolute;right:12px;top:12px;display:flex;"]);
 export var FirstButtonWrapper = styled.div.withConfig({
   displayName: "Toaststyles__FirstButtonWrapper",
-  componentId: "sc-wwaizr-6"
+  componentId: "sc-wwaizr-7"
 })(["margin-right:8px;"]);
 export var NumberWrapper = styled.div.withConfig({
   displayName: "Toaststyles__NumberWrapper",
-  componentId: "sc-wwaizr-7"
+  componentId: "sc-wwaizr-8"
 })(["margin-left:4px;color:inherit;opacity:0.6;cursor:pointer;&:hover{background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;opacity:1;}"], function (props) {
   return props.theme.palette['grey-400'];
 });
 export var ListWrapper = styled.div.withConfig({
   displayName: "Toaststyles__ListWrapper",
-  componentId: "sc-wwaizr-8"
+  componentId: "sc-wwaizr-9"
 })(["display:flex;visibility:", ";height:", ";margin-top:", ";"], function (props) {
   return props.visible ? 'visible' : 'hidden';
 }, function (props) {
@@ -95,26 +101,20 @@ export var ListWrapper = styled.div.withConfig({
 });
 export var IconOrderWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconOrderWrapper",
-  componentId: "sc-wwaizr-9"
+  componentId: "sc-wwaizr-10"
 })(["visibility:hidden;margin:-4px 0;&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
   return props.theme.palette['blue-600'];
 });
 export var OrderWrapper = styled.div.withConfig({
   displayName: "Toaststyles__OrderWrapper",
-  componentId: "sc-wwaizr-10"
+  componentId: "sc-wwaizr-11"
 })(["display:flex;&:hover{", "{visibility:visible;}", "{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;opacity:1;}}"], IconOrderWrapper, NumberWrapper);
 export var Wrapper = styled.div.withConfig({
   displayName: "Toaststyles__Wrapper",
-  componentId: "sc-wwaizr-11"
+  componentId: "sc-wwaizr-12"
 })(["color:", ";"], function (props) {
   return props.theme.palette['grey-600'];
 });
-export var AnimationContainer = styled.div.withConfig({
-  displayName: "Toaststyles__AnimationContainer",
-  componentId: "sc-wwaizr-12"
-})(["animation:", " 0.5s ease-in-out 0s 1;"], function (props) {
-  return props.show ? openingAnimation() : closingAnimation();
-});
 export var WrapperSectionMessage = styled.div.withConfig({
   displayName: "Toaststyles__WrapperSectionMessage",
   componentId: "sc-wwaizr-13"

package/dist/Toast.types.d.ts

@@ -12,6 +12,7 @@ export type ToastProps = WithHTMLAttributes<HTMLDivElement, {
     withClose?: boolean;
     button?: ReactNode;
     expanded?: boolean;
+    show?: boolean;
     onExpand?: (isExpanded: boolean) => void;
     /**
      * fired when user manually dismisses the toast by clicking the X button
@@ -24,4 +25,4 @@ export type ToastProps = WithHTMLAttributes<HTMLDivElement, {
     toastId?: string;
 }>;
 export type ToastCustomisationOptions = Pick<ToastOptions, 'duration' | 'position' | 'id' | 'removeDelay' | 'className' | 'style'>;
-export type ShowToastProps = Omit<ToastProps, 'type'>;
+export type ShowToastProps = Omit<ToastProps, 'type' | 'show'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-toast",
-  "version": "1.4.9",
+  "version": "1.4.11",
   "description": "Toast UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,9 +35,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-unordered-list": "^1.1.37",
-    "@synerise/ds-utils": "^1.6.0",
+    "@synerise/ds-icon": "^1.15.0",
+    "@synerise/ds-unordered-list": "^1.1.39",
+    "@synerise/ds-utils": "^1.7.0",
     "react-hot-toast": "^2.5.2",
     "uuid": "^8.3.2"
   },
@@ -45,5 +45,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1"
   },
-  "gitHead": "2997f77d657c1aed2fc39901d3e0b8f88b05cc53"
+  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
 }