Added custom event callback

Author: codewithkyle

src/notifications.ts

@@ -108,7 +108,12 @@ class NotificationComponent extends HTMLElement {
     private handleActionButtonClick: EventListener = (e: Event) => {
         const target = e.currentTarget as HTMLElement;
         const index = parseInt(target.dataset.index);
-        this.settings.buttons[index].callback();
+        this.settings.buttons?.[index]?.callback();
+        if (this.settings.buttons?.[index]?.event !== null) {
+            window.dispatchEvent(new CustomEvent(this.settings.buttons[index].event, {
+                detail: this.settings.buttons[index]?.eventData ?? null,
+            }));
+        }
         this.remove();
     };
 

src/snackbar.ts

@@ -80,7 +80,12 @@ class SnackbarComponent extends HTMLElement {
     private handleActionButtonClick: EventListener = (e: Event) => {
         const target = e.currentTarget as HTMLElement;
         const index = parseInt(target.dataset.index);
-        this.settings.buttons[index].callback();
+        this.settings.buttons?.[index]?.callback();
+        if (this.settings.buttons[index]?.event !== null) {
+            window.dispatchEvent(new CustomEvent(this.settings.buttons[index].event, {
+                detail: this.settings.buttons[index]?.eventData ?? null,
+            }));
+        }
         this.remove();
     };
 

src/sonner.ts

@@ -120,6 +120,8 @@ class Sonner extends HTMLElement {
                 callback: ()=>{},
                 label: "",
                 classes: "",
+                event: null,
+                eventData: null,
             },
         }, settings);
 
@@ -131,7 +133,6 @@ class Sonner extends HTMLElement {
             toast.classes = [toast.classes];
         }
         if (typeof toast.button?.callback !== "function") {
-            console.warn("Sonner callback must be a function");
             toast.button.callback = ()=>{};
         }
         if (!toast.button?.classes) {
@@ -208,6 +209,11 @@ class SonnerToast extends HTMLElement {
         if (buttonEl) {
             buttonEl.addEventListener("click", ()=>{
                 this.settings.button.callback();
+                if (this.settings.button?.event !== null) {
+                    window.dispatchEvent(new CustomEvent(this.settings.button.event, {
+                        detail: this.settings.button?.eventData ?? null,
+                    }));
+                }
                 this.delete();
             });
         }

src/types.d.ts

@@ -1,9 +1,11 @@
 export type NotificationButton = {
     label: string;
-    callback: Function;
+    callback?: Function;
     ariaLabel?: string;
     classes?: string[];
     autofocus?: boolean;
+    event: string;
+    eventData: any;
 };
 
 export type SnackbarNotification = {
@@ -46,9 +48,11 @@ export type SonnerNotification = {
     duration: number,
     classes: Array<string>|string,
     button: {
-        callback: Function,
+        callback?: Function,
         label: string,
         classes: Array<string>|string,
+        event?: string;
+        eventData?: any;
     }
 }
 

test/index.html

@@ -44,11 +44,20 @@
 
         let count = 0;
 
+        window.addEventListener("test-event", (e)=>{
+            alert(e.detail);
+        });
+
         const sonner2 = document.body.querySelector(".js-sonner2");
         sonner2.addEventListener("click", ()=>{
             const event = new CustomEvent("notify:sonner", {
                 detail: {
                     message: `Example sonner toast message.`,
+                    button: {
+                        label: "Test",
+                        event: "test-event",
+                        eventData: "Hi mom!",
+                    }
                 }
             });
             window.dispatchEvent(event);