<Dialog> render props should include focus states

[andrew-pledge-io]

Provide a general summary of the feature here

<Dialog> renders a <section> element and controls when it is focused.

It would be helpful if the className and children both accepted callbacks that included the focus state of the dialog, e.g. isFocused and isFocusVisible, like other react-aria components.

🤔 Expected Behavior?

children and className should both accept callbacks that receive the focused state.

😯 Current Behavior

<Dialog> render props only include a close callback: https://github.com/adobe/react-spectrum/blob/5cacbdbf88b8c6d7f5d3fb741c2b7ccddf8def7f/packages/react-aria-components/src/Dialog.tsx#L25-L27

Only children accepts a callback. className only accepts strings: https://github.com/adobe/react-spectrum/blob/5cacbdbf88b8c6d7f5d3fb741c2b7ccddf8def7f/packages/react-aria-components/src/Dialog.tsx#L29-L32

💁 Possible Solution

No response

🔦 Context

I'm using render props to conditionally apply focus styles in other react-aria components, however I can't do so when using <Dialog>.

I'm currently working around the problem by using native CSS pseudo-classes, which is fine but inconsistent.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response