From 4a01caff242bfeaa2233e709e00726ed0df50d68 Mon Sep 17 00:00:00 2001
From: Tomas Tamagnone <59695245+tamatomas@users.noreply.github.com>
Date: Mon, 10 Apr 2023 12:13:54 -0300
Subject: [PATCH] Add pause on focus prop to Toaster

---
 src/components/toaster.tsx |  3 +++
 src/core/types.ts          |  1 +
 test/toast.test.tsx        | 42 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
index 16182fa..44c0bdd 100644
--- a/src/components/toaster.tsx
+++ b/src/components/toaster.tsx
@@ -90,6 +90,7 @@ export const Toaster: React.FC<ToasterProps> = ({
   children,
   containerStyle,
   containerClassName,
+  pauseOnFocus = false,
 }) => {
   const { toasts, handlers } = useToaster(toastOptions);
 
@@ -108,6 +109,8 @@ export const Toaster: React.FC<ToasterProps> = ({
       className={containerClassName}
       onMouseEnter={handlers.startPause}
       onMouseLeave={handlers.endPause}
+      onFocus={pauseOnFocus ? handlers.startPause : undefined}
+      onBlur={pauseOnFocus ? handlers.endPause : undefined}
     >
       {toasts.map((t) => {
         const toastPosition = t.position || position;
diff --git a/src/core/types.ts b/src/core/types.ts
index cd6f67a..d662fb7 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -80,6 +80,7 @@ export interface ToasterProps {
   containerStyle?: React.CSSProperties;
   containerClassName?: string;
   children?: (toast: Toast) => JSX.Element;
+  pauseOnFocus?: boolean;
 }
 
 export interface ToastWrapperProps {
diff --git a/test/toast.test.tsx b/test/toast.test.tsx
index 37dfec4..3915524 100644
--- a/test/toast.test.tsx
+++ b/test/toast.test.tsx
@@ -279,7 +279,7 @@ test('custom toaster renderer', async () => {
   expect(screen.queryByText(/custom/i)).not.toHaveClass('custom-toast');
 });
 
-test('pause toast', async () => {
+test('pause toast on hover', async () => {
   render(
     <>
       <Toaster>
@@ -317,3 +317,43 @@ test('pause toast', async () => {
 
   expect(toastElement).not.toBeInTheDocument();
 });
+
+test('pause toast on focus', async () => {
+  render(
+    <>
+      <Toaster pauseOnFocus>
+        {(t) => (
+          <div className="custom-toast">
+            <ToastIcon toast={t} />
+            {resolveValue(t.message, t)}
+            <button>Focus Me</button>
+          </div>
+        )}
+      </Toaster>
+    </>
+  );
+
+  act(() => {
+    toast.success('Title', {
+      duration: 1000,
+    });
+  });
+
+  waitTime(500);
+
+  const toastElement = screen.getByText(/focus me/i);
+
+  expect(toastElement).toBeInTheDocument();
+
+  fireEvent.focus(toastElement);
+
+  waitTime(10000);
+
+  expect(toastElement).toBeInTheDocument();
+
+  fireEvent.blur(toastElement);
+
+  waitTime(2000);
+
+  expect(toastElement).not.toBeInTheDocument();
+});