Refactor logic to prevent breaking changes in useToastState

packages/@react-spectrum/toast/src/toastContainer.css

@@ -21,6 +21,7 @@
   pointer-events: none;
   outline: none;
   margin-block-end: 8px;
+  flex-direction: column-reverse;
 
   .spectrum-Toast {
     margin: 8px;

packages/@react-stately/toast/src/useToastState.ts

@@ -134,19 +134,15 @@ export class ToastQueue<T> {
       }
     }
 
-    if (toast.priority) {
-      this.queue.splice(low, 0, toast);
-    } else {
-      this.queue.unshift(toast);
-    }
+    this.queue.splice(low, 0, toast);
 
     toast.animation = low < this.maxVisibleToasts ? 'entering' : 'queued';
     let i = this.maxVisibleToasts;
     while (i < this.queue.length) {
       this.queue[i++].animation = 'queued';
     }
 
-    this.updateVisibleToasts();
+    this.updateVisibleToasts({action: 'add'});
     return toastKey;
   }
 
@@ -159,30 +155,26 @@ export class ToastQueue<T> {
     if (index >= 0) {
       this.queue[index].onClose?.();
       this.queue.splice(index, 1);
+      this.visibleToasts.find(t => t.key === key).animation = 'exiting';
     }
 
-    this.updateVisibleToasts(index);
+    this.updateVisibleToasts({action: 'close', key});
   }
 
   /** Removes a toast from the visible toasts after an exiting animation. */
   remove(key: string) {
-    let index = this.queue.findIndex(t => t.key === key);
-    this.visibleToasts = this.visibleToasts.filter(t => t.key !== key);
-    this.updateVisibleToasts(index);
+    this.updateVisibleToasts({action: 'remove', key});
   }
 
-  private updateVisibleToasts(oldIndex = -1) {
+  private updateVisibleToasts(options: {action: 'add' | 'close' | 'remove', key?: string}) {
+    let {action, key} = options;
     let toasts = this.queue.slice(0, this.maxVisibleToasts);
-    if (this.hasExitAnimation) {
-      let prevToasts: QueuedToast<T>[] = this.visibleToasts
-          .filter(t => !toasts.some(t2 => t.key === t2.key))
-          .map(t => ({...t, animation: 'exiting'}));
 
-      if (oldIndex !== -1) {
-        toasts.splice(oldIndex, 0, prevToasts?.[0]);
-      }
-
-      this.visibleToasts = toasts;
+    if (action === 'remove') {
+      this.visibleToasts = this.visibleToasts.filter(t => t.key !== key);
+    } else if (action === 'close' && this.hasExitAnimation) {
+      // Cause a rerender to happen for exit animation
+      this.visibleToasts = this.visibleToasts.map(t => t);
     } else {
       this.visibleToasts = toasts;
     }

packages/@react-stately/toast/test/useToastState.test.js

@@ -58,8 +58,8 @@ describe('useToastState', () => {
 
     act(() => {result.current.add(secondToast.content, secondToast.props);});
     expect(result.current.visibleToasts.length).toBe(2);
-    expect(result.current.visibleToasts[0].content).toBe(secondToast.content);
-    expect(result.current.visibleToasts[1].content).toBe(newValue[0].content);
+    expect(result.current.visibleToasts[0].content).toBe(newValue[0].content);
+    expect(result.current.visibleToasts[1].content).toBe(secondToast.content);
   });
 
   it('should close a toast', () => {
@@ -91,11 +91,11 @@ describe('useToastState', () => {
 
     act(() => {result.current.add('Second Toast');});
     expect(result.current.visibleToasts.length).toBe(1);
-    expect(result.current.visibleToasts[0].content).toBe('Second Toast');
+    expect(result.current.visibleToasts[0].content).toBe(newValue[0].content);
 
     act(() => {result.current.close(result.current.visibleToasts[0].key);});
     expect(result.current.visibleToasts.length).toBe(1);
-    expect(result.current.visibleToasts[0].content).toBe(newValue[0].content);
+    expect(result.current.visibleToasts[0].content).toBe('Second Toast');
     expect(result.current.visibleToasts[0].animation).toBe('queued');
   });