Implement onClose callback for Toast (#7969)

Author: deleonio

packages/components/src/components/toaster/shadow.tsx

@@ -74,6 +74,7 @@ export class KolToastContainer implements ToasterAPI {
 				...this.state,
 				_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),
 			};
+			toastState.toast.onClose?.();
 		}, TRANSITION_TIMEOUT);
 	}
 
@@ -101,6 +102,9 @@ export class KolToastContainer implements ToasterAPI {
 					...this.state,
 					_toastStates: this.state._toastStates.filter((toastState) => toastsToClose.every((toastToClose) => toastToClose.id !== toastState.id)),
 				};
+				toastsToClose.forEach((toastState) => {
+					toastState.toast.onClose?.();
+				});
 			}, TRANSITION_TIMEOUT);
 		}
 	}

packages/components/src/schema/components/toaster.ts

@@ -18,6 +18,7 @@ export type Toast = {
 	 */
 	alertVariant?: AlertVariant;
 	variant?: AlertVariant;
+	onClose?: () => void;
 };
 
 export type ToastState = {

packages/samples/react/src/components/toast/basic.tsx

@@ -20,6 +20,9 @@ export const ToastBasic: FC = () => {
 			description: 'Toasty',
 			label: `Initial Toast`,
 			type: 'warning',
+			onClose: () => {
+				console.log('Simple toast has been closed.');
+			},
 		});
 	};
 

packages/samples/react/vite.config.ts

@@ -29,6 +29,5 @@ export default defineConfig({
 	},
 	server: {
 		port: 9191,
-		strictPort: true,
 	},
 });