feat: add data-toast-id attribute to toast element

src/index.tsx

@@ -272,6 +272,7 @@ const Toast = (props: ToastProps) => {
         toast?.classNames?.[toastType],
       )}
       data-sonner-toast=""
+      data-toast-id={String(toast.id)}
       data-rich-colors={toast.richColors ?? defaultRichColors}
       data-styled={!Boolean(toast.jsx || toast.unstyled || unstyled)}
       data-mounted={mounted}

test/src/app/page.tsx

@@ -343,6 +343,13 @@ export default function Home({ searchParams }: any) {
       <button data-testid="toast-global" className="button" onClick={() => toast('Global Toaster Toast')}>
         Render Toast in Global Toaster
       </button>
+      <button
+        data-testid="custom-id-toast"
+        className="button"
+        onClick={() => toast('Toast with custom id', { id: 'my-custom-id' })}
+      >
+        Toast with custom ID
+      </button>
       <button
         data-testid="testid-toast-button"
         className="button"

test/tests/basic.spec.ts

@@ -331,6 +331,16 @@ test.describe('Basic functionality', () => {
     await expect(toast).not.toHaveAttribute('data-testid');
   });
 
+  test('toast renders with data-toast-id attribute', async ({ page }) => {
+    await page.getByTestId('default-button').click();
+    await expect(page.locator('[data-sonner-toast]')).toHaveAttribute('data-toast-id', /.+/);
+  });
+
+  test('toast renders correct data-toast-id when custom id is provided', async ({ page }) => {
+    await page.getByTestId('custom-id-toast').click();
+    await expect(page.locator('[data-sonner-toast][data-toast-id="my-custom-id"]')).toHaveCount(1);
+  });
+
   test('promise toast with testId maintains testId through state changes', async ({ page }) => {
     await page.getByTestId('testid-promise-toast-button').click();
     await expect(page.getByTestId('promise-test-toast')).toBeVisible();