From c7775a20f165bc39575afd599004e6cb3787859a Mon Sep 17 00:00:00 2001
From: Clara Castillo <claracastillochale@gmail.com>
Date: Mon, 1 Apr 2024 15:13:43 +0200
Subject: [PATCH] fix: preserve heights order when adding new toasts (#8)

* fix: preserve heights order when changing positions

* refactor: rename toast-position pipe to toast-filter
---
 .../pipes/{toast-position.pipe.ts => toast-filter.pipe.ts}  | 4 ++--
 libs/ngx-sonner/src/lib/state.ts                            | 6 +++++-
 libs/ngx-sonner/src/lib/toaster.component.ts                | 6 +++---
 3 files changed, 10 insertions(+), 6 deletions(-)
 rename libs/ngx-sonner/src/lib/pipes/{toast-position.pipe.ts => toast-filter.pipe.ts} (72%)

diff --git a/libs/ngx-sonner/src/lib/pipes/toast-position.pipe.ts b/libs/ngx-sonner/src/lib/pipes/toast-filter.pipe.ts
similarity index 72%
rename from libs/ngx-sonner/src/lib/pipes/toast-position.pipe.ts
rename to libs/ngx-sonner/src/lib/pipes/toast-filter.pipe.ts
index 51fac20..19be155 100644
--- a/libs/ngx-sonner/src/lib/pipes/toast-position.pipe.ts
+++ b/libs/ngx-sonner/src/lib/pipes/toast-filter.pipe.ts
@@ -1,8 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { Position, ToastT } from '../types';
 
-@Pipe({ name: 'toastPosition', standalone: true })
-export class ToastPositionPipe implements PipeTransform {
+@Pipe({ name: 'toastFilter', standalone: true })
+export class ToastFilterPipe implements PipeTransform {
   transform(toasts: ToastT[], index: number, position: Position): ToastT[] {
     return toasts.filter(
       toast => (!toast.position && index === 0) || toast.position === position
diff --git a/libs/ngx-sonner/src/lib/state.ts b/libs/ngx-sonner/src/lib/state.ts
index 6878506..5c9c08a 100644
--- a/libs/ngx-sonner/src/lib/state.ts
+++ b/libs/ngx-sonner/src/lib/state.ts
@@ -169,9 +169,13 @@ function createToastState() {
   }
 
   function addHeight(height: HeightT) {
-    heights.update(prev => [height, ...prev]);
+    heights.update(prev => [height, ...prev].sort(sortHeights));
   }
 
+  const sortHeights = (a: HeightT, b: HeightT) =>
+    toasts().findIndex(t => t.id === a.toastId) -
+    toasts().findIndex(t => t.id === b.toastId);
+
   function reset() {
     toasts.set([]);
     heights.set([]);
diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
index 5a7a577..7eeae8a 100644
--- a/libs/ngx-sonner/src/lib/toaster.component.ts
+++ b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -18,7 +18,7 @@ import {
 } from '@angular/core';
 import { IconComponent } from './icon.component';
 import { LoaderComponent } from './loader.component';
-import { ToastPositionPipe } from './pipes/toast-position.pipe';
+import { ToastFilterPipe } from './pipes/toast-filter.pipe';
 import { toastState } from './state';
 import { ToastComponent } from './toast.component';
 import { Position, Theme, ToasterProps } from './types';
@@ -41,7 +41,7 @@ const GAP = 14;
 @Component({
   selector: 'ngx-sonner-toaster',
   standalone: true,
-  imports: [ToastComponent, ToastPositionPipe, IconComponent, LoaderComponent],
+  imports: [ToastComponent, ToastFilterPipe, IconComponent, LoaderComponent],
   template: `
     @if (toasts().length > 0) {
       <section
@@ -67,7 +67,7 @@ const GAP = 14;
             (pointerup)="interacting.set(false)"
             [style]="toasterStyles()">
             @for (
-              toast of toasts() | toastPosition: $index : pos;
+              toast of toasts() | toastFilter: $index : pos;
               track toast.id
             ) {
               <ngx-sonner-toast