From 354e0acaa311ec72778e372a1c1d45af34f001a1 Mon Sep 17 00:00:00 2001
From: Debdut Chakraborty <debdutdeb@outlook.com>
Date: Tue, 25 Jun 2024 00:54:06 +0530
Subject: [PATCH 01/11] chore: don't close toast when hovering

---
 .../fuselage-toastbar/src/ToastBarTimed.tsx   | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
index 9b9879d702..6dde5ea2b1 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 { useEffect, useState } from 'react';
 
 import type { ToastBarPayload } from './ToastBarContext';
 import { useToastBarDismiss } from './ToastBarContext';
@@ -13,17 +13,37 @@ const ToastBarTimed = ({
 }: ToastBarPayload): ReactElement => {
   const dismissToastMessage = useToastBarDismiss();
 
+  const [hovering, setHovering] = useState(false);
+
+  const [timedOut, setTimedOut] = useState(false);
+
   useEffect(() => {
     const timeOut = setTimeout(() => {
+      if (hovering) {
+        setTimedOut(true);
+        return;
+      }
+
       dismissToastMessage(id);
     }, time * 1000);
 
     return () => clearTimeout(timeOut);
-  }, []);
+  }, [hovering]);
+
+  const onMouseLeave = () => {
+    if (timedOut) {
+      dismissToastMessage(id);
+      return;
+    }
+
+    setHovering(false);
+  };
 
   return (
     <ToastBar
       variant={type}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={onMouseLeave}
       children={message}
       onClose={dismissToastMessage}
       id={id}

From 9b393b0e0aba04ce56380373ca52fd8f22cec846 Mon Sep 17 00:00:00 2001
From: Debdut Chakraborty <debdutdeb@outlook.com>
Date: Tue, 25 Jun 2024 11:00:48 +0530
Subject: [PATCH 02/11] css: pause progressbar on hover

---
 .../fuselage/src/components/ToastBar/ToastBar.styles.scss     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss b/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
index b4c00461d4..d9e1c94491 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
@@ -112,4 +112,8 @@ $toastbar-progressbar-background-color: theme(
       background-color: $toastbar-progressbar-background-color;
     }
   }
+
+  &:hover &_progressbar::after {
+    animation-play-state: paused;
+  }
 }

From 43296528d6415891c9df275e7eff4955b7055810 Mon Sep 17 00:00:00 2001
From: Debdut Chakraborty <debdutdeb@outlook.com>
Date: Tue, 25 Jun 2024 12:06:08 +0530
Subject: [PATCH 03/11] try using setInterval

---
 .../fuselage-toastbar/src/ToastBarTimed.tsx   | 26 +++++++------------
 .../src/components/ToastBar/ToastBar.tsx      |  1 +
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
index 6dde5ea2b1..414672e270 100644
--- a/packages/fuselage-toastbar/src/ToastBarTimed.tsx
+++ b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -15,35 +15,29 @@ const ToastBarTimed = ({
 
   const [hovering, setHovering] = useState(false);
 
-  const [timedOut, setTimedOut] = useState(false);
+  const visibleFor = time * 1000;
 
   useEffect(() => {
-    const timeOut = setTimeout(() => {
+    const start = Date.now();
+
+    const interval = setInterval(() => {
       if (hovering) {
-        setTimedOut(true);
         return;
       }
 
-      dismissToastMessage(id);
-    }, time * 1000);
+      if (Date.now() - start >= visibleFor) {
+        dismissToastMessage(id);
+      }
+    }, 100);
 
-    return () => clearTimeout(timeOut);
+    return () => clearTimeout(interval);
   }, [hovering]);
 
-  const onMouseLeave = () => {
-    if (timedOut) {
-      dismissToastMessage(id);
-      return;
-    }
-
-    setHovering(false);
-  };
-
   return (
     <ToastBar
       variant={type}
       onMouseEnter={() => setHovering(true)}
-      onMouseLeave={onMouseLeave}
+      onMouseLeave={() => setHovering(false)}
       children={message}
       onClose={dismissToastMessage}
       id={id}
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
index 8acc38371d..7d0179e9ea 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.tsx
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
@@ -59,6 +59,7 @@ export function ToastBar({
     &::after {
       width: 0%;
       animation: ${progressBar} ${time}s;
+      animation-fill-mode: forwards;
     }
   `;
 

From d5ffa85397569ecd3081fcfcdc4b3c321d24a356 Mon Sep 17 00:00:00 2001
From: Debdut Chakraborty <debdutdeb@outlook.com>
Date: Tue, 25 Jun 2024 12:18:35 +0530
Subject: [PATCH 04/11] clear interval now

---
 packages/fuselage-toastbar/src/ToastBarTimed.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
index 414672e270..87845f8aa9 100644
--- a/packages/fuselage-toastbar/src/ToastBarTimed.tsx
+++ b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -30,7 +30,7 @@ const ToastBarTimed = ({
       }
     }, 100);
 
-    return () => clearTimeout(interval);
+    return () => clearInterval(interval);
   }, [hovering]);
 
   return (

From c267fba26d5d1671e36f040e6759bd39f7975329 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Mon, 8 Jul 2024 17:47:52 -0300
Subject: [PATCH 05/11] fix: review

---
 .../fuselage-toastbar/src/ToastBarTimed.tsx   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
index 87845f8aa9..8b4bff5a6d 100644
--- a/packages/fuselage-toastbar/src/ToastBarTimed.tsx
+++ b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -11,33 +11,30 @@ const ToastBarTimed = ({
   id,
   message,
 }: ToastBarPayload): ReactElement => {
+  const timeInSeconds = time * 1000;
+  const [shouldPause, setShouldPause] = useState(false);
   const dismissToastMessage = useToastBarDismiss();
 
-  const [hovering, setHovering] = useState(false);
-
-  const visibleFor = time * 1000;
-
   useEffect(() => {
-    const start = Date.now();
-
+    const initialTime = Date.now();
     const interval = setInterval(() => {
-      if (hovering) {
+      if (shouldPause) {
         return;
       }
 
-      if (Date.now() - start >= visibleFor) {
+      if (Date.now() - initialTime >= timeInSeconds) {
         dismissToastMessage(id);
       }
-    }, 100);
+    }, timeInSeconds);
 
     return () => clearInterval(interval);
-  }, [hovering]);
+  }, [shouldPause]);
 
   return (
     <ToastBar
       variant={type}
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}
+      onMouseEnter={() => setShouldPause(true)}
+      onMouseLeave={() => setShouldPause(false)}
       children={message}
       onClose={dismissToastMessage}
       id={id}

From 71df4eb241c9649e7da399bd43b016bc1bc55e63 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Tue, 9 Jul 2024 14:02:17 -0300
Subject: [PATCH 06/11] chore: update snapshots

---
 .../ToastBar/__snapshots__/ToastBar.spec.tsx.snap      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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..7841c423d3 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-1ej4z39 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-1ej4z39 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-1ej4z39 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-1ej4z39 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-1ej4z39 rcx-toastbar_progressbar"
       />
     </div>
   </div>

From 6448a7a57f6c653db6068c0eda0199499debf978 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Tue, 9 Jul 2024 14:04:07 -0300
Subject: [PATCH 07/11] chore: changeset

---
 .changeset/eight-needles-push.md | 6 ++++++
 1 file changed, 6 insertions(+)
 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..4f87dcb919
--- /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 when hovering

From 07e6b55cf3caf148ede09bf4c9c746683ce30a23 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Tue, 9 Jul 2024 14:05:33 -0300
Subject: [PATCH 08/11] chore: update changeset

---
 .changeset/eight-needles-push.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/eight-needles-push.md b/.changeset/eight-needles-push.md
index 4f87dcb919..dfe86dfa0b 100644
--- a/.changeset/eight-needles-push.md
+++ b/.changeset/eight-needles-push.md
@@ -3,4 +3,4 @@
 "@rocket.chat/fuselage": minor
 ---
 
-feat(fuselage-toastbar): Pause ToastBar timer when hovering
+feat(fuselage-toastbar): Pause ToastBar timer while hovering

From 60f57862d805c9659186f8819e799c3d72b1ece6 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 18 Jul 2024 11:37:44 -0300
Subject: [PATCH 09/11] feat: add react-timing-hooks

---
 packages/fuselage-toastbar/package.json |  3 +++
 yarn.lock                               | 10 ++++++++++
 2 files changed, 13 insertions(+)

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/yarn.lock b/yarn.lock
index 6dae356fa7..86fa32819f 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"

From 85fd8d43a3ba690fa515490b412cd55ded0646e7 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 18 Jul 2024 11:43:30 -0300
Subject: [PATCH 10/11] fix: review

---
 .../fuselage-toastbar/src/ToastBarTimed.tsx   | 27 ++++++-------------
 .../components/ToastBar/ToastBar.styles.scss  |  4 ---
 .../src/components/ToastBar/ToastBar.tsx      |  3 +++
 3 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
index 8b4bff5a6d..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, useState } from 'react';
+import { useCountdown } from 'react-timing-hooks';
 
 import type { ToastBarPayload } from './ToastBarContext';
 import { useToastBarDismiss } from './ToastBarContext';
@@ -11,34 +11,23 @@ const ToastBarTimed = ({
   id,
   message,
 }: ToastBarPayload): ReactElement => {
-  const timeInSeconds = time * 1000;
-  const [shouldPause, setShouldPause] = useState(false);
   const dismissToastMessage = useToastBarDismiss();
 
-  useEffect(() => {
-    const initialTime = Date.now();
-    const interval = setInterval(() => {
-      if (shouldPause) {
-        return;
-      }
-
-      if (Date.now() - initialTime >= timeInSeconds) {
-        dismissToastMessage(id);
-      }
-    }, timeInSeconds);
-
-    return () => clearInterval(interval);
-  }, [shouldPause]);
+  const [, { isPaused, pause, resume }] = useCountdown(time, 0, {
+    onEnd: () => dismissToastMessage(id),
+    startOnMount: true,
+  });
 
   return (
     <ToastBar
       variant={type}
-      onMouseEnter={() => setShouldPause(true)}
-      onMouseLeave={() => setShouldPause(false)}
+      onPointerEnter={() => pause()}
+      onPointerLeave={() => resume()}
       children={message}
       onClose={dismissToastMessage}
       id={id}
       time={time}
+      isPaused={isPaused}
     />
   );
 };
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss b/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
index d9e1c94491..b4c00461d4 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
@@ -112,8 +112,4 @@ $toastbar-progressbar-background-color: theme(
       background-color: $toastbar-progressbar-background-color;
     }
   }
-
-  &:hover &_progressbar::after {
-    animation-play-state: paused;
-  }
 }
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
index 7d0179e9ea..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',
@@ -60,6 +62,7 @@ export function ToastBar({
       width: 0%;
       animation: ${progressBar} ${time}s;
       animation-fill-mode: forwards;
+      animation-play-state: ${isPaused ? 'paused' : 'running'};
     }
   `;
 

From 2bc9b1d7a6fcd81d196855e23adc9e7ec00300b3 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 18 Jul 2024 13:41:36 -0300
Subject: [PATCH 11/11] chore: update snapshots

---
 .../ToastBar/__snapshots__/ToastBar.spec.tsx.snap      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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 7841c423d3..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-1ej4z39 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-1ej4z39 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-1ej4z39 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-1ej4z39 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-1ej4z39 rcx-toastbar_progressbar"
+        class="rcx-box rcx-box--full rcx-css-h9ngh8 rcx-toastbar_progressbar"
       />
     </div>
   </div>