feat: event handlers on toast container

src/core/containerObserver.ts

@@ -98,8 +98,11 @@ export function createContainerObserver(
     notify();
     dispatchChanges(toToastItem(toast, isNew ? 'added' : 'updated'));
 
-    if (isNew && isFn(onOpen))
-      onOpen(isValidElement(children) && children.props);
+    if (isNew) {
+      if (isFn(props.onOpen))
+        props.onOpen(isValidElement(toast.content) && toast.content.props);
+      if (isFn(onOpen)) onOpen(isValidElement(children) && children.props);
+    }
   };
 
   const buildToast = <TData = unknown>(
@@ -119,6 +122,9 @@ export function createContainerObserver(
 
     const toastProps = {
       ...props,
+      // dont propagate the handlers called above for the container to the toast
+      onOpen: undefined,
+      onClose: undefined,
       style: props.toastStyle,
       key: toastKey++,
       ...Object.fromEntries(
@@ -142,6 +148,10 @@ export function createContainerObserver(
       deleteToast() {
         const toastToRemove = toasts.get(toastId)!;
         const { onClose, children } = toastToRemove.props;
+        if (isFn(props.onClose))
+          props.onClose(
+            isValidElement(toastToRemove.content) && toastToRemove.content.props
+          );
         if (isFn(onClose)) onClose(isValidElement(children) && children.props);
 
         dispatchChanges(toToastItem(toastToRemove, 'removed'));

src/core/toast.cy.tsx

@@ -34,6 +34,91 @@ describe('without container', () => {
   });
 });
 
+describe('with container event handlers', () => {
+  it('calls container open and close', () => {
+    const onOpen = cy.stub().as('onContainerOpen');
+    const onClose = cy.stub().as('onContainerClose');
+    cy.mount(
+      <ToastContainer
+        autoClose={false}
+        closeOnClick
+        onClose={onClose}
+        onOpen={onOpen}
+      />
+    );
+    toast('msg');
+    cy.resolveEntranceAnimation();
+    cy.findByText('msg').should('exist').click().should('not.exist');
+    cy.get('@onContainerOpen').should('have.been.calledOnce');
+    cy.get('@onContainerClose').should('have.been.calledOnce');
+  });
+
+  it('calls container open and close and toast open and close', () => {
+    const onOpen = cy.stub().as('onContainerOpen');
+    const onClose = cy.stub().as('onContainerClose');
+    cy.mount(
+      <ToastContainer
+        autoClose={false}
+        closeOnClick
+        onClose={onClose}
+        onOpen={onOpen}
+      />
+    );
+    toast('msg', {
+      onOpen: cy.stub().as('onToastOpen'),
+      onClose: cy.stub().as('onToastClose')
+    });
+    cy.resolveEntranceAnimation();
+    cy.findByText('msg').should('exist').click().should('not.exist');
+    cy.get('@onContainerOpen').should('have.been.calledOnce');
+    cy.get('@onContainerClose').should('have.been.calledOnce');
+    cy.get('@onToastOpen').should('have.been.calledOnce');
+    cy.get('@onToastClose').should('have.been.calledOnce');
+  });
+
+  it('uses current container callbacks and passes component props', () => {
+    const initialOpen = cy.stub().as('initialOpen');
+    const initialClose = cy.stub().as('initialClose');
+    const currentOpen = cy.stub().as('currentOpen');
+    const currentClose = cy.stub().as('currentClose');
+
+    function Content({ message }: { message: string }) {
+      return <span>{message}</span>;
+    }
+
+    function RerenderingContainer() {
+      const [updated, setUpdated] = React.useState(false);
+
+      return (
+        <>
+          <button onClick={() => setUpdated(true)}>Update callbacks</button>
+          <ToastContainer
+            autoClose={false}
+            closeOnClick
+            onClose={updated ? currentClose : initialClose}
+            onOpen={updated ? currentOpen : initialOpen}
+          />
+        </>
+      );
+    }
+
+    cy.mount(<RerenderingContainer />);
+    cy.findByRole('button', { name: 'Update callbacks' }).click();
+    cy.then(() => toast(<Content message="current toast" />));
+    cy.resolveEntranceAnimation();
+    cy.findByText('current toast').click().should('not.exist');
+
+    cy.get('@initialOpen').should('not.have.been.called');
+    cy.get('@initialClose').should('not.have.been.called');
+    cy.get('@currentOpen').should('have.been.calledWithMatch', {
+      message: 'current toast'
+    });
+    cy.get('@currentClose').should('have.been.calledWithMatch', {
+      message: 'current toast'
+    });
+  });
+});
+
 describe('with container', () => {
   beforeEach(() => {
     cy.mount(<ToastContainer autoClose={false} closeOnClick />);

src/types.ts

@@ -183,13 +183,6 @@ interface CommonOptions {
    * `Default: 'light'`
    */
   theme?: Theme;
-}
-
-export interface ToastOptions<Data = unknown> extends CommonOptions {
-  /**
-   * An optional css class to set.
-   */
-  className?: ToastClassName;
 
   /**
    * Called when toast is mounted.
@@ -200,6 +193,13 @@ export interface ToastOptions<Data = unknown> extends CommonOptions {
    * Called when toast is unmounted.
    */
   onClose?: <T = {}>(props: T) => void;
+}
+
+export interface ToastOptions<Data = unknown> extends CommonOptions {
+  /**
+   * An optional css class to set.
+   */
+  className?: ToastClassName;
 
   /**
    * An optional inline style to apply.