feat: add toast index to ToastRegion render props

packages/react-aria-components/src/Toast.tsx

@@ -48,7 +48,7 @@ export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderPr
   /** The queue of toasts to display. */
   queue: ToastQueue<T>,
   /** A function to render each toast, or children containing a `<ToastList>`. */
-  children: ReactNode | ((renderProps: {toast: QueuedToast<T>}) => ReactElement)
+  children: ReactNode | ((renderProps: {toast: QueuedToast<T>, index: number}) => ReactElement)
 }
 
 /**
@@ -106,7 +106,7 @@ export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function
 
 export interface ToastListProps<T> extends Omit<ToastRegionProps<T>, 'queue' | 'children'> {
   /** A function to render each toast. */
-  children: (renderProps: {toast: QueuedToast<T>}) => ReactElement
+  children: (renderProps: {toast: QueuedToast<T>; index: number}) => ReactElement
 }
 
 export const ToastList = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastList<T>(props: ToastListProps<T>, ref: ForwardedRef<HTMLOListElement>) {
@@ -126,9 +126,9 @@ export const ToastList = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
 
   return (
     <ol {...hoverProps} {...renderProps} ref={ref}>
-      {state.visibleToasts.map((toast) => (
+      {state.visibleToasts.map((toast, index) => (
         <li key={toast.key} style={{display: 'contents'}}>
-          {props.children({toast})}
+          {props.children({toast, index})}
         </li>
       ))}
     </ol>

packages/react-aria-components/test/Toast.test.js

@@ -250,6 +250,54 @@ describe('Toast', () => {
     expect(document.activeElement).toBe(button);
   });
 
+  it('should provide toast index', async () => {
+    const queue = new ToastQueue();
+    function ToastToggle() {
+      return (
+        <>
+          <ToastRegion queue={queue}>
+            {({toast, index}) => (
+              <Toast toast={toast}>
+                <ToastContent>
+                  <Text slot="title">{`${toast.content}: ${index}`}</Text>
+                </ToastContent>
+                <Button slot="close">x</Button>
+              </Toast>
+            )}
+          </ToastRegion>
+          <Button
+            onPress={() => {
+              if (queue.visibleToasts.length === 0){
+                queue.add('First toast');
+                queue.add('Second toast');
+                queue.add('Third toast');
+              } else {
+                queue.clear();
+              }
+            }}>
+            {close ? 'Hide' : 'Show'} Toasts
+          </Button>
+        </>
+      );
+    }
+
+    let {getByText, getAllByRole, queryByRole} = render(<ToastToggle />);
+    let button = getByRole('button');
+
+    await user.click(button);
+
+    act(() => jest.advanceTimersByTime(100));
+    let toasts = getAllByRole('alertdialog');
+    expect(toasts).toHaveLength(3);
+
+    expect(getByText('First toast: 0')).toBeVisible();
+    expect(getByText('Second toast: 1')).toBeVisible();
+    expect(getByText('Third toast: 2')).toBeVisible();
+
+    await user.click(button);
+    expect(queryByRole('alertdialog')).toBeNull();
+  });
+
   it('should support programmatically closing toasts', async () => {
     const queue = new ToastQueue();
     function ToastToggle() {