How to let other component capture click while Dialog is open?

[QzCurious]

This question is similar to #1720.

Current Behavior

My app might pop a toast at any time. And the toast could be closed by click on it.
However, if a Dialog is opening, the Dialog is preventing my toast to be closed.

Here is the simulation:

bandicam.2023-01-07.17-17-17-477.mp4

What I had tried

1. modal={false} so that my toast can capture to click. But when I click toast, the Dialog is closed too.
2. As answer on How to get rid of the pointer-event none when opening a dialog. #1720. By applying pointer-event: auto to my toast. I can capture the click. But the Dialog is closed too.

What I Want

How can I make the click once per element. That is, first click close toast and second click close Dialog.

CodeSandbox

This example code is a tweak version from the documentation.

The tweaks:
I've only add a div with onClick to simulate the behavior.

[benoitgrelard]

With 2. you are mostly there, all you'd need to do is make sure you don't close when interacting outside the dialog if the interaction is inside the toast region. You can use a data attribute or classname or anything you want to check the origin of the event, and call event.preventDefault() in onPointerDownOutside when that matches.

[QzCurious]

onPointerDownOutside hits me that the closing behavior is determined by click outside of <Dialog.Content />.