From 781f4aa07aa5be3dbd6658220d6cd4150acaffa8 Mon Sep 17 00:00:00 2001
From: Debdut Chakraborty <debdutdeb@outlook.com>
Date: Thu, 18 Jul 2024 22:33:03 +0530
Subject: [PATCH] feat(fuselage-toastbar): Pause ToastBar timer while hovering
 (#1406)

Co-authored-by: dougfabris <devfabris@gmail.com>
---
 .changeset/eight-needles-push.md                 |  6 ++++++
 packages/fuselage-toastbar/package.json          |  3 +++
 packages/fuselage-toastbar/src/ToastBarTimed.tsx | 16 ++++++++--------
 .../src/components/ToastBar/ToastBar.tsx         |  4 ++++
 .../__snapshots__/ToastBar.spec.tsx.snap         | 10 +++++-----
 yarn.lock                                        | 10 ++++++++++
 6 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/eight-needles-push.md

diff --git a/.changeset/eight-needles-push.md b/.changeset/eight-needles-push.md
new file mode 100644
index 0000000000..dfe86dfa0b
--- /dev/null
+++ b/.changeset/eight-needles-push.md
@@ -0,0 +1,6 @@
+---
+"@rocket.chat/fuselage-toastbar": minor
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage-toastbar): Pause ToastBar timer while hovering
diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json
index 5cdb1c1e81..dd9271bea9 100644
--- a/packages/fuselage-toastbar/package.json
+++ b/packages/fuselage-toastbar/package.json
@@ -104,5 +104,8 @@
   },
   "volta": {
     "extends": "../../package.json"
+  },
+  "dependencies": {
+    "react-timing-hooks": "~4.0.2"
   }
 }
diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
index 9b9879d702..7d701244ee 100644
--- a/packages/fuselage-toastbar/src/ToastBarTimed.tsx
+++ b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -1,6 +1,6 @@
 import { ToastBar } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import { useEffect } from 'react';
+import { useCountdown } from 'react-timing-hooks';
 
 import type { ToastBarPayload } from './ToastBarContext';
 import { useToastBarDismiss } from './ToastBarContext';
@@ -13,21 +13,21 @@ const ToastBarTimed = ({
 }: ToastBarPayload): ReactElement => {
   const dismissToastMessage = useToastBarDismiss();
 
-  useEffect(() => {
-    const timeOut = setTimeout(() => {
-      dismissToastMessage(id);
-    }, time * 1000);
-
-    return () => clearTimeout(timeOut);
-  }, []);
+  const [, { isPaused, pause, resume }] = useCountdown(time, 0, {
+    onEnd: () => dismissToastMessage(id),
+    startOnMount: true,
+  });
 
   return (
     <ToastBar
       variant={type}
+      onPointerEnter={() => pause()}
+      onPointerLeave={() => resume()}
       children={message}
       onClose={dismissToastMessage}
       id={id}
       time={time}
+      isPaused={isPaused}
     />
   );
 };
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
index 8acc38371d..c8ae701fe1 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.tsx
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
@@ -12,6 +12,7 @@ export type ToastBarProps = {
   className?: string;
   children?: ReactNode;
   time?: number;
+  isPaused?: boolean;
   id?: string;
   onClose?: (id: string) => void;
   buttonLabel?: string;
@@ -22,6 +23,7 @@ export function ToastBar({
   className = '',
   variant = 'info',
   time = 5,
+  isPaused,
   id,
   onClose,
   buttonLabel = 'Dismiss alert',
@@ -59,6 +61,8 @@ export function ToastBar({
     &::after {
       width: 0%;
       animation: ${progressBar} ${time}s;
+      animation-fill-mode: forwards;
+      animation-play-state: ${isPaused ? 'paused' : 'running'};
     }
   `;
 
diff --git a/packages/fuselage/src/components/ToastBar/__snapshots__/ToastBar.spec.tsx.snap b/packages/fuselage/src/components/ToastBar/__snapshots__/ToastBar.spec.tsx.snap
index 96a0e264e8..b73a366641 100644
--- a/packages/fuselage/src/components/ToastBar/__snapshots__/ToastBar.spec.tsx.snap
+++ b/packages/fuselage/src/components/ToastBar/__snapshots__/ToastBar.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`[ToastBar Rendering] renders Default without crashing 1`] = `
         </div>
       </div>
       <div
-        class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
+        class="rcx-box rcx-box--full rcx-css-h9ngh8 rcx-toastbar_progressbar"
       />
     </div>
   </div>
@@ -57,7 +57,7 @@ exports[`[ToastBar Rendering] renders Error without crashing 1`] = `
         </div>
       </div>
       <div
-        class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
+        class="rcx-box rcx-box--full rcx-css-h9ngh8 rcx-toastbar_progressbar"
       />
     </div>
   </div>
@@ -89,7 +89,7 @@ exports[`[ToastBar Rendering] renders Success without crashing 1`] = `
         </div>
       </div>
       <div
-        class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
+        class="rcx-box rcx-box--full rcx-css-h9ngh8 rcx-toastbar_progressbar"
       />
     </div>
   </div>
@@ -119,7 +119,7 @@ exports[`[ToastBar Rendering] renders TinyText without crashing 1`] = `
         </div>
       </div>
       <div
-        class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
+        class="rcx-box rcx-box--full rcx-css-h9ngh8 rcx-toastbar_progressbar"
       />
     </div>
   </div>
@@ -167,7 +167,7 @@ exports[`[ToastBar Rendering] renders WithCloseButton without crashing 1`] = `
         </div>
       </div>
       <div
-        class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
+        class="rcx-box rcx-box--full rcx-css-h9ngh8 rcx-toastbar_progressbar"
       />
     </div>
   </div>
diff --git a/yarn.lock b/yarn.lock
index cd0d4c8768..5e0e9be1c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5763,6 +5763,7 @@ __metadata:
     lint-staged: "npm:~13.2.1"
     npm-run-all: "npm:^4.1.5"
     prettier: "npm:~2.8.7"
+    react-timing-hooks: "npm:~4.0.2"
     rimraf: "npm:~3.0.2"
     storybook-dark-mode: "npm:~1.1.2"
     ts-jest: "npm:~29.1.0"
@@ -23559,6 +23560,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-timing-hooks@npm:~4.0.2":
+  version: 4.0.2
+  resolution: "react-timing-hooks@npm:4.0.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/0d1c7b37e4d86932ad092ce248dd711521396ae36a91329bf6a8dfbdf904d7e45475946ead0e7991020a8546a0fb61d69c05d6bcbd417901b18932b83d688984
+  languageName: node
+  linkType: hard
+
 "react-virtuoso@npm:~3.1.5":
   version: 3.1.5
   resolution: "react-virtuoso@npm:3.1.5"