[Toast] Add onPause / onResume props

[nielsvdpol]

trafficstars

Feature request

Add onPause / onResume props to Toast component so that when a progress bar is used, the animation can be paused.

Ps. Couldn't find feature request jjenzz talked about in this issue: https://github.com/radix-ui/primitives/issues/1362#issuecomment-1126935808

[la55u]

or something like pauseOnHover maybe?

[kylemh]

I saw in #1520 this was discussed as something unlikely to be done. I saw that #1477 doesn't quite resolve this, but maybe that means we're allowed to work on this? May I open a PR to sort it out?

[jjenzz]

@kylemh which part are you requesting to work on? benoit has asked in #1477 that the props be moved onto Toast.Root so when that feedback is addressed, you should be able to provide timer ui for your toasts.

[kylemh]

I'm hoping to address this issue (pause timers if a user is focused or has cursor hovering over a toast in the provider area).

Thinking about it more now that you've commented, I'm left wondering if global may actually be ideal. If a user is pausing one toast in a provider only showing one toast, global seems overkill; however, if we render multiple toasts, it wouldn't make sense to pause one toast and not the others. I realize the timers exist individually for each toast, but I think it makes sense to pause/play all of them.

Basically, I'd like to recreate Vercel's toast UI, but with some tweaks: https://vercel.com/design/toast

• Multiple toasts can render and create a stack
• There is a progress UI on the foreground toast to reflect the timer.
• If focus is on any toast or if the cursor is hovering any toast, the timer should be paused. (why this PR is needed)

[jjenzz]

If focus is on any toast or if the cursor is hovering any toast, the timer should be paused. (why this PR is needed)

the toast does already do that. please raise a reproducible GH issue separately if you are experiencing issues there tho.

this ticket is for exposing onPause and onResume props so that consumers can hook onto this behaviour when it happens, in order to render timer UIs.

however, if we render multiple toasts, it wouldn't make sense to pause one toast and not the others

agreed. this is how it behaves. the viewport will pause all toasts when pointer or focus enters the viewport.

[kylemh]

amazing! 🎉

Pauses closing on hover, focus and window blur.

Should've seen that in the docs. Ignore me.