@synerise/ds-toast 1.3.1 → 1.4.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.4.0...@synerise/ds-toast@1.4.1) (2026-02-02)
+
+**Note:** Version bump only for package @synerise/ds-toast
+
+# [1.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.3.1...@synerise/ds-toast@1.4.0) (2026-01-29)
+
+### Bug Fixes
+
+- **toast:** wire up dismiss ([094da31](https://github.com/Synerise/synerise-design/commit/094da318d43f99fb8dd64262efce6ee1c95b46a1))
+
+### Features
+
+- **toast:** adds onDismiss prop ([613bc09](https://github.com/Synerise/synerise-design/commit/613bc099cdb2639df3cc0c93d59bff275f5b897c))
+
 ## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.3.0...@synerise/ds-toast@1.3.1) (2026-01-22)
 
 **Note:** Version bump only for package @synerise/ds-toast

package/README.md

@@ -41,6 +41,7 @@ import Button from '@synerise/ds-button';
 | expanded        | toggles rendering expanded content                    | boolean                                            | -       |
 | withClose       | renders X icon to manually dismiss toast              | boolean                                            | -       |
 | onCloseClick    | triggered on click of close icon                      | () => void                                         | -       |
+| onDismiss       | triggered when toast is dismissed                     | () => void                                         | -       |
 | button          | button element to render below message content        | ReactNode                                          | -       |
 
 ## Static methods

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, button, ...htmlAttributes }: ToastProps): React.JSX.Element;
+    ({ type, message, description, expander, expandedContent, withClose, customIcon, expanded, onExpand, onCloseClick, onDismiss, button, toastId, ...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,11 +1,13 @@
-var _excluded = ["type", "message", "description", "expander", "expandedContent", "withClose", "customIcon", "expanded", "onExpand", "onCloseClick", "button"];
+var _excluded = ["type", "message", "description", "expander", "expandedContent", "withClose", "customIcon", "expanded", "onExpand", "onCloseClick", "onDismiss", "button", "toastId"];
 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, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import toast from 'react-hot-toast';
+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,
@@ -17,7 +19,9 @@ export var Toast = function Toast(_ref) {
     expanded = _ref.expanded,
     onExpand = _ref.onExpand,
     onCloseClick = _ref.onCloseClick,
+    onDismiss = _ref.onDismiss,
     button = _ref.button,
+    toastId = _ref.toastId,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasToastContent = button || description || expandedContent;
   var toastContent = hasToastContent && /*#__PURE__*/React.createElement(S.AlertContent, {
@@ -35,6 +39,17 @@ export var Toast = function Toast(_ref) {
   var expandContent = useCallback(function () {
     onExpand && onExpand(!expanded);
   }, [onExpand, expanded]);
+  var handleCloseClick = function handleCloseClick() {
+    onCloseClick == null || onCloseClick();
+    if (toastId) {
+      removeToast(toastId);
+    }
+  };
+  useEffect(function () {
+    return function () {
+      onDismiss == null || onDismiss();
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     toastType: type,
     "data-toastType": type
@@ -51,15 +66,19 @@ export var Toast = function Toast(_ref) {
     component: /*#__PURE__*/React.createElement(AngleDownS, null),
     size: 24
   })), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
-    onClick: onCloseClick
+    onClick: handleCloseClick
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CloseM, null)
   }))), 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
-  })), options);
+  })), _extends({}, options, {
+    id: toastId
+  }));
 };
 Toast.success = function (props, options) {
   return showToast('success', props, options);

package/dist/Toast.types.d.ts

@@ -9,11 +9,19 @@ export type ToastProps = WithHTMLAttributes<HTMLDivElement, {
     customIcon?: ReactElement;
     expander?: boolean;
     expandedContent?: ReactNode;
-    withClose?: ReactNode;
+    withClose?: boolean;
     button?: ReactNode;
     expanded?: boolean;
     onExpand?: (isExpanded: boolean) => void;
+    /**
+     * fired when user manually dismisses the toast by clicking the X button
+     */
     onCloseClick?: () => void;
+    /**
+     * fired when toast is dismissed (both manually or after timeout)
+     */
+    onDismiss?: () => void;
+    toastId?: string;
 }>;
 export type ToastCustomisationOptions = Pick<ToastOptions, 'duration' | 'position' | 'id' | 'removeDelay' | 'className' | 'style'>;
 export type ShowToastProps = Omit<ToastProps, 'type'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-toast",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "Toast UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,15 +16,15 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "npm run build:js -- --watch",
+    "build:watch": "pnpm run build:js -- --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
-    "prepublish": "npm run build",
+    "prepublish": "pnpm run build",
     "test": "jest",
-    "test:watch": "npm run test -- --watchAll",
+    "test:watch": "pnpm run test -- --watchAll",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,14 +35,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.10.0",
-    "@synerise/ds-unordered-list": "^1.1.27",
-    "@synerise/ds-utils": "^1.5.3",
-    "react-hot-toast": "^2.5.2"
+    "@synerise/ds-icon": "^1.11.0",
+    "@synerise/ds-unordered-list": "^1.1.29",
+    "@synerise/ds-utils": "^1.5.4",
+    "react-hot-toast": "^2.5.2",
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1"
   },
-  "gitHead": "13055ac4f0b05cc3eb06021d51c93c8d32328053"
+  "gitHead": "6a3a82f8bc80e10eeb818795035e05393550e82e"
 }