From fbe0c0d20c9ee65d95cf30b4686df58abf03b94f Mon Sep 17 00:00:00 2001
From: Gianmarco Rengucci <rengucci.gianmarco@gmail.com>
Date: Sun, 13 Oct 2024 18:39:25 +0200
Subject: [PATCH] feat: allow ref forwarding for `Toaster` (#491)

---
 src/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index e912cd2..35b516a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import ReactDOM from 'react-dom';
 
 import { getAsset, Loader, LoadingWrapper } from './assets';
@@ -466,7 +466,7 @@ function useSonner() {
   };
 }
 
-const Toaster = (props: ToasterProps) => {
+const Toaster = forwardRef<HTMLElement, ToasterProps>(function Toaster(props, ref) {
   const {
     invert,
     position = 'bottom-right',
@@ -624,7 +624,7 @@ const Toaster = (props: ToasterProps) => {
 
   return (
     // Remove item from normal navigation flow, only available via hotkey
-    <section aria-label={`${containerAriaLabel} ${hotkeyLabel}`} tabIndex={-1}>
+    <section aria-label={`${containerAriaLabel} ${hotkeyLabel}`} tabIndex={-1} ref={ref}>
       {possiblePositions.map((position, index) => {
         const [y, x] = position.split('-');
         return (
@@ -723,6 +723,6 @@ const Toaster = (props: ToasterProps) => {
       })}
     </section>
   );
-};
+});
 export { toast, Toaster, type ExternalToast, type ToastT, type ToasterProps, useSonner };
 export { type ToastClassnames, type ToastToDismiss, type Action } from './types';