unique status for close button removal

src/components/Toast.tsx

@@ -24,6 +24,7 @@ export const Toast: React.FC<ToastProps> = props => {
     type,
     hideProgressBar,
     closeToast,
+    closeToastByButton,
     transition: Transition,
     position,
     className,
@@ -65,7 +66,7 @@ export const Toast: React.FC<ToastProps> = props => {
   const icon = getIcon(props);
   const isProgressControlled = !!progress || !autoClose;
 
-  const closeButtonProps = { closeToast, type, theme };
+  const closeButtonProps = { closeToast: closeToastByButton, type, theme };
   let Close: React.ReactNode = null;
 
   if (closeButton === false) {

src/core/containerObserver.ts

@@ -45,6 +45,7 @@ export function createContainerObserver(
   let activeToasts: Id[] = [];
   let snapshot: Toast[] = [];
   let props = containerProps;
+  let closedByButton = false;
   const toasts = new Map<Id, Toast>();
   const listeners = new Set<Notify>();
 
@@ -113,6 +114,11 @@ export function createContainerObserver(
       removeToast(toastId);
     };
 
+    const closeToastByButton = () => {
+      removeToast(toastId);
+      closedByButton = true;
+    };
+
     const isNotAnUpdate = updateId == null;
 
     if (isNotAnUpdate) toastCount++;
@@ -128,6 +134,7 @@ export function createContainerObserver(
       updateId,
       data,
       closeToast,
+      closeToastByButton,
       isIn: false,
       className: parseClassName(options.className || props.toastClassName),
       bodyClassName: parseClassName(
@@ -144,9 +151,15 @@ export function createContainerObserver(
         const { onClose, children } = toastToRemove.props;
         if (isFn(onClose)) onClose(isValidElement(children) && children.props);
 
-        dispatchChanges(toToastItem(toastToRemove, 'removed'));
+        dispatchChanges(
+          toToastItem(
+            toastToRemove,
+            !closedByButton ? 'removed' : 'removed by button'
+          )
+        );
         toasts.delete(toastId);
 
+        closedByButton = false;
         toastCount--;
         if (toastCount < 0) toastCount = 0;
 

src/core/toast.cy.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ToastContainer } from '../components';
 import { toast } from './toast';
+import { Default } from '../utils';
 
 beforeEach(() => {
   cy.viewport('macbook-15');
@@ -84,6 +85,23 @@ describe('with container', () => {
     });
   });
 
+  it('remove toast by button', () => {
+    toast.onChange(cy.stub().as('onChange'));
+
+    toast('msg', { data: 'xxxx' });
+
+    cy.resolveEntranceAnimation();
+
+    cy.findByText('msg').should('exist');
+
+    cy.get(`.${Default.CSS_NAMESPACE}__close-button`).click();
+
+    cy.get('@onChange').should('have.been.calledWithMatch', {
+      status: 'removed by button'
+    });
+    cy.findByText('msg').should('not.exist');
+  });
+
   it('unsubscribe from change event', () => {
     const unsub = toast.onChange(cy.stub().as('onChange'));
     unsub();

src/types.ts

@@ -306,6 +306,7 @@ export interface ToastProps extends ToastOptions {
   key: Id;
   transition: ToastTransition;
   closeToast: () => void;
+  closeToastByButton: () => void;
   position: ToastPosition;
   children?: ToastContent;
   draggablePercent: number;
@@ -336,7 +337,11 @@ export interface Toast {
   toggle?: (v: boolean) => void;
 }
 
-export type ToastItemStatus = 'added' | 'removed' | 'updated';
+export type ToastItemStatus =
+  | 'added'
+  | 'removed'
+  | 'updated'
+  | 'removed by button';
 
 export interface ToastItem<Data = {}> {
   content: ToastContent<Data>;