fix(toast): resume timers if pointer left region due to region shrinking (#7771)

Author: reidbarber

packages/@react-aria/toast/src/useToastRegion.ts

@@ -49,6 +49,32 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
     onHoverEnd: state.resumeAll
   });
 
+  let prevToastCount = useRef(state.visibleToasts.length);
+  useEffect(() => {
+    // Resume timers if the user's pointer left the region due to a toast being removed and the region shrinking.
+    // Waits until the next pointermove after a toast is removed.
+    let onPointerMove = (e: PointerEvent) => {
+      if (!ref.current) {
+        document.removeEventListener('pointermove', onPointerMove);
+        return;
+      }
+      let regionRect = ref.current.getBoundingClientRect();
+      const isPointerOverRegion = e.clientX >= regionRect.left && e.clientX <= regionRect.right && e.clientY >= regionRect.top && e.clientY <= regionRect.bottom;
+      if (!isPointerOverRegion) {
+        state.resumeAll();
+      }
+      document.removeEventListener('pointermove', onPointerMove);
+    };
+
+    if (state.visibleToasts.length < prevToastCount.current && state.visibleToasts.length > 0) {
+      document.addEventListener('pointermove', onPointerMove);
+    }
+    prevToastCount.current = state.visibleToasts.length;
+    return () => {
+      document.removeEventListener('pointermove', onPointerMove);
+    };
+  }, [state.visibleToasts, ref, state]);
+
   // Manage focus within the toast region.
   // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.
   // We might be making an assumption with how this works if someone implements the priority queue differently, or

packages/@react-aria/toast/stories/Example.tsx

@@ -32,7 +32,7 @@ function ToastRegion() {
   let ref = useRef(null);
   let {regionProps} = useToastRegion({}, state, ref);
   return (
-    <div {...regionProps} ref={ref} style={{position: 'fixed', bottom: 0, right: 0}}>
+    <div {...regionProps} ref={ref} style={{position: 'fixed', bottom: 0, right: 0, display: 'flex', flexDirection: 'column', gap: 10}}>
       {state.visibleToasts.map(toast => (
         <Toast key={toast.key} toast={toast} />
       ))}

packages/@react-aria/toast/stories/useToast.stories.tsx

@@ -16,7 +16,14 @@ import {ToastContainer} from './Example';
 export default {
   title: 'useToast',
   args: {
-    maxVisibleToasts: 1
+    maxVisibleToasts: 1,
+    timeout: null
+  },
+  argTypes: {
+    timeout: {
+      control: 'radio',
+      options: [null, 5000]
+    }
   }
 };
 
@@ -25,9 +32,9 @@ let count = 0;
 export const Default = args => (
   <ToastContainer {...args}>
     {state => (<>
-      <button onClick={() => state.add('High ' + ++count, {priority: 10})}>Add high priority toast</button>
-      <button onClick={() => state.add('Medium ' + ++count, {priority: 5})}>Add medium priority toast</button>
-      <button onClick={() => state.add('Low ' + ++count, {priority: 1})}>Add low priority toast</button>
+      <button onClick={() => state.add('High ' + ++count, {priority: 10, timeout: args.timeout})}>Add high priority toast</button>
+      <button onClick={() => state.add('Medium ' + ++count, {priority: 5, timeout: args.timeout})}>Add medium priority toast</button>
+      <button onClick={() => state.add('Low ' + ++count, {priority: 1, timeout: args.timeout})}>Add low priority toast</button>
     </>)}
   </ToastContainer>
 );