fix(toast): correctly handle custom ids what auto dismissing toasts

.changeset/violet-nails-pull.md

@@ -0,0 +1,5 @@
+---
+'@twilio-paste/toast': patch
+---
+
+Fixed a bug when setting an auto dismissing toast via the useToaster hook, that was supplied a custom id.

packages/paste-core/components/toast/__tests__/useToaster.spec.tsx

@@ -141,6 +141,24 @@ describe('useToaster', () => {
       // Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
 
       expect(result.current.toasts.length).toEqual(0);
+
+      // push a toast that has a custom id for auto dismissing
+      act(() => {
+        result.current.push({
+          message: 'hi',
+          variant: 'error',
+          id: 'custom_id',
+          dismissAfter: 1000,
+        });
+      });
+
+      expect(result.current.toasts.length).toEqual(1);
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      expect(result.current.toasts.length).toEqual(0);
     });
   });
 });

packages/paste-core/components/toast/src/useToaster.ts

@@ -23,7 +23,7 @@ export const useToaster = (): UseToasterReturnedProps => {
     // if you are setting a dismissAfter time, we need to grab a timeout id to use later if we need to clear the timeout
     // for that particular toast. We also need to make sure the time is an integer to prevent locking the browser
     if (newToast.dismissAfter != null && Number.isInteger(newToast.dismissAfter)) {
-      timeOutId = window.setTimeout(pop, newToast.dismissAfter, generatedID);
+      timeOutId = window.setTimeout(pop, newToast.dismissAfter, newToast.id || generatedID);
     }
     // We set a new toast to always setFocus. For all the existing toasts in the stack, we need to clear setFocus
     // without creating a new state object. If you create a new state object, you cause react spring to rerun