Toast works differently with animations now

[kolorfilm]

I used@react-aria/toast the beta 3.0.0-beta.19 and @react-stately/toast 3.0.0-beta.7 and did an animation like this in my component:

<StyledToast
      data-testid="toast"
      type={content.type}
      data-animation={props.toast.animation}
      onAnimationEnd={() => {
        if (props.toast.animation === 'exiting') {
          state.remove(props.toast.key);
        }
      }}
      ref={ref}
      {...toastProps}
    >

It seems that animation + remove isn't available anymore with 3.0.0 (final version).

Any ideas what is the new way to do that? Thanks!

[snowystinger]

You should be able to reference https://react-spectrum.adobe.com/react-aria/Toast.html#animations to handle animations. You may find it easier to use RAC instead of directly using the hooks. However, this + the implementation of our RAC Toast components can serve as a guide if you want to go that route.

It may also be helpful to check out the changes we made to our components in the PR which introduced this change. https://github.com/adobe/react-spectrum/pull/7631/files#diff-a30934ef517706f5ce49b1803db6d1bad0acf3e1f013517cae32e1018b801b16L111

The main takeaway is that you no longer need to call that state.remove, and for animations you'll want to use wrapUpdate

let us know if you run into any issues.
@reidbarber please correct me if I mispoke here

[kolorfilm]

@snowystinger thanks for your feedback.

I managed to migrate it to use CSS view transitions instead and it works perfectly. 🚀 I know it is not your business, but probably it makes sense to write it in a bit more detail here. It was a hassle to figure it that the ::view-transition-... handler need to be global. That was my mistake. 😅

Anyway thanks for your detailed feedback. The reason why we using not RAC is because we want totally custom Toasts.

Thanks guys!

[snowystinger]

Yep, more documentation around it would be super helpful. would you like to contribute it?
There's a little more information here on our decision #7631 (comment)

[kolorfilm]

@snowystinger sure I can try. 😊 Where I can find the docu file?

[snowystinger]

Bottom of every docs page should have a link to editing that file. For useToast, it takes you here https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/toast/docs/useToast.mdx

[mikrojane]

With the newly released useToast and ToastQueue, is it expected that the animation attached to the ::view-transition-old(.toast):only-child should be visible when the Toast is auto-dismissed via the timeout option?

I'm not sure if I'm missing something in my implementation – I am observing the animation effects when it first renders, and when it is dismissed with a call to close(), but it just disappears without an effect when auto-dismissed.

[snowystinger]

I ran the docs locally and added auto-dismiss. They fade and slide out as expected.
Same in a codesandbox with styles/example copied from the docs
https://codesandbox.io/p/sandbox/mynf6l

Am I missing a step somewhere? or am I missing what you're saying is broken and it's present here?

[mikrojane]

Thank you for the sandbox – that is very helpful!

The difference with my implementation is that I'm using the hooks, not the RACs. I've forked the sandbox and reproduced the issue I'm experiencing with a simplified implementation of my own Toast component:

https://codesandbox.io/p/devbox/frosty-morning-7yzl93

It's possible I'm missing something in here, and I will start comparing closely with Toast.tsx on Monday, unless you can point me at something obviously wrong.

Thanks again ❤️

[snowystinger]

Got it working. https://codesandbox.io/p/sandbox/stupefied-snow-jqzz7c
I think you were just using the wrong state. Instead of passing the state from ToastRegion along to Toast, you were creating a new state inside Toast from useToastQueue. I changed a few other things though, so may want to compare still.

[mikrojane]

Amazing! 🤩 Thank you!

It was just the state instance that was the source of the issue. Does that mean that state should be a part of AriaToastProps?

[snowystinger]

No, we pass it along via a context, so don't want to surface that to end users accidentally.
It's the same as with any kind of our paired components where the parent controls the state, for example, RadioGroup and Radio, or ListBox and ListBoxItem, the state just needs to be passed down somehow. Your implementation may pass it through the component, another might use context, another might use some other method that I haven't thought of.