From a162a3f7b09db0df6bec1deb0f7ed879748d6b01 Mon Sep 17 00:00:00 2001
From: Clara Castillo <claracastillochale@gmail.com>
Date: Tue, 16 Apr 2024 11:31:33 +0200
Subject: [PATCH 1/5] fix: dismissable renamed to dismissible

BREAKING CHANGE: toast dissmisable field has been renamed to dismissible
---
 libs/ngx-sonner/src/lib/state.ts           | 6 +++---
 libs/ngx-sonner/src/lib/toast.component.ts | 2 +-
 libs/ngx-sonner/src/lib/types.ts           | 2 +-
 libs/ngx-sonner/src/tests/toaster.spec.ts  | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/ngx-sonner/src/lib/state.ts b/libs/ngx-sonner/src/lib/state.ts
index 5c9c08a..3b7d858 100644
--- a/libs/ngx-sonner/src/lib/state.ts
+++ b/libs/ngx-sonner/src/lib/state.ts
@@ -31,7 +31,7 @@ function createToastState() {
         ? data.id
         : toastsCounter++;
 
-    const dismissable = data.dismissable ?? true;
+    const dismissable = data.dismissible ?? true;
     const type = data.type ?? 'default';
 
     const alreadyExists = toasts().find(toast => toast.id === id);
@@ -45,7 +45,7 @@ function createToastState() {
               ...data,
               id,
               title: message,
-              dismissable,
+              dismissible: dismissable,
               type,
               updated: true,
             };
@@ -53,7 +53,7 @@ function createToastState() {
         })
       );
     } else {
-      addToast({ ...rest, id, title: message, dismissable, type });
+      addToast({ ...rest, id, title: message, dismissible: dismissable, type });
     }
 
     return id;
diff --git a/libs/ngx-sonner/src/lib/toast.component.ts b/libs/ngx-sonner/src/lib/toast.component.ts
index b1df67b..fd1f5e8 100644
--- a/libs/ngx-sonner/src/lib/toast.component.ts
+++ b/libs/ngx-sonner/src/lib/toast.component.ts
@@ -78,7 +78,7 @@ const defaultClasses: ToastClassnames = {
       (pointerdown)="onPointerDown($event)"
       (pointerup)="onPointerUp()"
       (pointermove)="onPointerMove($event)">
-      @if (toast().dismissable && closeButton() && !toast().component) {
+      @if (toast().dismissible && closeButton() && !toast().component) {
         <button
           aria-label="Close toast"
           [attr.data-disabled]="disabled()"
diff --git a/libs/ngx-sonner/src/lib/types.ts b/libs/ngx-sonner/src/lib/types.ts
index d7e9ce1..b9ab864 100644
--- a/libs/ngx-sonner/src/lib/types.ts
+++ b/libs/ngx-sonner/src/lib/types.ts
@@ -51,7 +51,7 @@ export type ToastT = {
   };
   onDismiss?: (toast: ToastT) => void;
   onAutoClose?: (toast: ToastT) => void;
-  dismissable?: boolean;
+  dismissible?: boolean;
   promise?: PromiseT;
   style?: Record<string, unknown>;
   class?: string;
diff --git a/libs/ngx-sonner/src/tests/toaster.spec.ts b/libs/ngx-sonner/src/tests/toaster.spec.ts
index f919341..8f5eecf 100644
--- a/libs/ngx-sonner/src/tests/toaster.spec.ts
+++ b/libs/ngx-sonner/src/tests/toaster.spec.ts
@@ -265,7 +265,7 @@ describe('Toaster', () => {
 
   it('should not show close button if the toast is not dismissable', async () => {
     const { user, trigger, container } = await setup({
-      callback: toast => toast('Hello world', { dismissable: false }),
+      callback: toast => toast('Hello world', { dismissible: false }),
       closeButton: true,
     });
 

From 9502c43602db965d2aa0f09b9e62925c7b1e3fc3 Mon Sep 17 00:00:00 2001
From: Clara Castillo <claracastillochale@gmail.com>
Date: Tue, 16 Apr 2024 11:54:00 +0200
Subject: [PATCH 2/5] fix: don't allow to swipe out a toast if it's not
 dismissible

---
 libs/ngx-sonner/src/lib/toast.component.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/libs/ngx-sonner/src/lib/toast.component.ts b/libs/ngx-sonner/src/lib/toast.component.ts
index fd1f5e8..a42957c 100644
--- a/libs/ngx-sonner/src/lib/toast.component.ts
+++ b/libs/ngx-sonner/src/lib/toast.component.ts
@@ -70,6 +70,7 @@ const defaultClasses: ToastClassnames = {
       [attr.data-index]="index()"
       [attr.data-front]="isFront()"
       [attr.data-swiping]="swiping()"
+      [attr.data-dismissible]="toast().dismissible"
       [attr.data-type]="toastType()"
       [attr.data-invert]="invert()"
       [attr.data-swipe-out]="swipeOut()"
@@ -300,6 +301,10 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   }));
 
   constructor() {
+    effect(() => {
+      console.log(this.toast().dismissible);
+    });
+
     effect(() => {
       const heightIndex = this.heightIndex();
       const toastsHeightBefore = this.toastsHeightBefore();
@@ -389,7 +394,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   }
 
   onPointerDown(event: PointerEvent) {
-    if (this.disabled()) return;
+    if (this.disabled() || !this.toast().dismissible) return;
 
     this.offsetBeforeRemove.set(this.offset());
     const target = event.target as HTMLElement;
@@ -403,7 +408,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   }
 
   onPointerUp() {
-    if (this.swipeOut()) return;
+    if (this.swipeOut() || !this.toast().dismissible) return;
 
     this.pointerStartRef = null;
     const swipeAmount = Number(
@@ -426,7 +431,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   }
 
   onPointerMove(event: PointerEvent) {
-    if (!this.pointerStartRef) return;
+    if (!this.pointerStartRef || !this.toast().dismissible) return;
 
     const yPosition = event.clientY - this.pointerStartRef.y;
     const xPosition = event.clientX - this.pointerStartRef.x;
@@ -449,14 +454,15 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   }
 
   onCloseButtonClick() {
-    if (this.disabled()) return;
+    if (this.disabled() || !this.toast().dismissible) return;
     this.deleteToast();
     this.toast().onDismiss?.(this.toast());
   }
 
   onCancelClick() {
-    this.deleteToast();
     const toast = this.toast();
+    if (!toast.dismissible) return;
+    this.deleteToast();
     if (toast.cancel?.onClick) {
       toast.cancel.onClick();
     }

From 31bfc7b539e4adad490075ad71bfdf782f3d27c9 Mon Sep 17 00:00:00 2001
From: Clara Castillo <claracastillochale@gmail.com>
Date: Tue, 16 Apr 2024 12:00:47 +0200
Subject: [PATCH 3/5] fix: check toast dismissible value in toaster

---
 libs/ngx-sonner/src/lib/toaster.component.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
index ac16299..1fb2a56 100644
--- a/libs/ngx-sonner/src/lib/toaster.component.ts
+++ b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -63,7 +63,7 @@ const GAP = 14;
             (mouseenter)="expanded.set(true)"
             (mousemove)="expanded.set(true)"
             (mouseleave)="handleMouseLeave()"
-            (pointerdown)="interacting.set(true)"
+            (pointerdown)="handlePointerDown($event)"
             (pointerup)="interacting.set(false)"
             [style]="toasterStyles()">
             @for (
@@ -225,12 +225,27 @@ export class NgxSonnerToaster implements OnDestroy {
   }
 
   handleFocus(event: FocusEvent) {
+    const isNotDismissible =
+      event.target instanceof HTMLElement &&
+      event.target.dataset['dismissible'] === 'false';
+
+    if (isNotDismissible) return;
+
     if (!this.isFocusWithinRef()) {
       this.isFocusWithinRef.set(true);
       this.lastFocusedElementRef.set(event.relatedTarget as HTMLElement);
     }
   }
 
+  handlePointerDown(event: MouseEvent) {
+    const isNotDismissible =
+      event.target instanceof HTMLElement &&
+      event.target.dataset['dismissible'] === 'false';
+
+    if (isNotDismissible) return;
+    this.interacting.set(true);
+  }
+
   handleMouseLeave() {
     if (!this.interacting()) {
       this.expanded.set(false);

From 42a940b522407328cba47f0bb70227797b483a75 Mon Sep 17 00:00:00 2001
From: Clara Castillo <claracastillochale@gmail.com>
Date: Tue, 16 Apr 2024 12:13:11 +0200
Subject: [PATCH 4/5] fix: remove console log

---
 libs/ngx-sonner/src/lib/toast.component.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/ngx-sonner/src/lib/toast.component.ts b/libs/ngx-sonner/src/lib/toast.component.ts
index a42957c..101a6b0 100644
--- a/libs/ngx-sonner/src/lib/toast.component.ts
+++ b/libs/ngx-sonner/src/lib/toast.component.ts
@@ -301,10 +301,6 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   }));
 
   constructor() {
-    effect(() => {
-      console.log(this.toast().dismissible);
-    });
-
     effect(() => {
       const heightIndex = this.heightIndex();
       const toastsHeightBefore = this.toastsHeightBefore();

From 8e30c203036db4ed26523fd33761ebf573fb2e02 Mon Sep 17 00:00:00 2001
From: Clara Castillo <claracastillochale@gmail.com>
Date: Tue, 16 Apr 2024 12:42:14 +0200
Subject: [PATCH 5/5] fix: dismissable renamed to dismissible

---
 libs/ngx-sonner/src/lib/state.ts          | 6 +++---
 libs/ngx-sonner/src/tests/toaster.spec.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/ngx-sonner/src/lib/state.ts b/libs/ngx-sonner/src/lib/state.ts
index 3b7d858..6b6661c 100644
--- a/libs/ngx-sonner/src/lib/state.ts
+++ b/libs/ngx-sonner/src/lib/state.ts
@@ -31,7 +31,7 @@ function createToastState() {
         ? data.id
         : toastsCounter++;
 
-    const dismissable = data.dismissible ?? true;
+    const dismissible = data.dismissible ?? true;
     const type = data.type ?? 'default';
 
     const alreadyExists = toasts().find(toast => toast.id === id);
@@ -45,7 +45,7 @@ function createToastState() {
               ...data,
               id,
               title: message,
-              dismissible: dismissable,
+              dismissible,
               type,
               updated: true,
             };
@@ -53,7 +53,7 @@ function createToastState() {
         })
       );
     } else {
-      addToast({ ...rest, id, title: message, dismissible: dismissable, type });
+      addToast({ ...rest, id, title: message, dismissible: dismissible, type });
     }
 
     return id;
diff --git a/libs/ngx-sonner/src/tests/toaster.spec.ts b/libs/ngx-sonner/src/tests/toaster.spec.ts
index 8f5eecf..301b592 100644
--- a/libs/ngx-sonner/src/tests/toaster.spec.ts
+++ b/libs/ngx-sonner/src/tests/toaster.spec.ts
@@ -263,7 +263,7 @@ describe('Toaster', () => {
     expect(closeButton).not.toBeNull();
   });
 
-  it('should not show close button if the toast is not dismissable', async () => {
+  it('should not show close button if the toast is not dismissible', async () => {
     const { user, trigger, container } = await setup({
       callback: toast => toast('Hello world', { dismissible: false }),
       closeButton: true,