<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:

react-spectrum/packages/react-aria-components/src/Dialog.tsx

Lines 25 to 27 in 5cacbdb

	interface DialogRenderProps {
	close: () => void
	}

Only children accepts a callback. className only accepts strings:

react-spectrum/packages/react-aria-components/src/Dialog.tsx

Lines 29 to 32 in 5cacbdb

	export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps {
	/** Children of the dialog. A function may be provided to access a function to close the dialog. */
	children?: ReactNode | ((opts: DialogRenderProps) => ReactNode)
	}

💁 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