fix: ensure Dialog has the data-rac attribute (#7189)

* Ensure `Dialog` has the `data-rac` attribute

* cleanup

Author: amitdahan

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
-import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType} from '@react-types/shared';
 import {HeadingContext} from './RSPContexts';
@@ -76,13 +76,6 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   }, ref);
   let state = useContext(OverlayTriggerStateContext);
 
-  let children = props.children;
-  if (typeof children === 'function') {
-    children = children({
-      close: state?.close || (() => {})
-    });
-  }
-
   if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
     // If aria-labelledby exists on props, we know it came from context.
     // Use that as a fallback in case there is no title slot.
@@ -93,14 +86,23 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
     }
   }
 
+  let renderProps = useRenderProps({
+    defaultClassName: 'react-aria-Dialog',
+    className: props.className,
+    style: props.style,
+    children: props.children,
+    values: {
+      close: state?.close || (() => {})
+    }
+  });
+
   return (
     <section
       {...filterDOMProps(props)}
       {...dialogProps}
+      {...renderProps}
       ref={ref}
-      slot={props.slot || undefined}
-      style={props.style}
-      className={props.className ?? 'react-aria-Dialog'}>
+      slot={props.slot || undefined}>
       <Provider
         values={[
           [HeadingContext, {
@@ -110,7 +112,7 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
             }
           }]
         ]}>
-        {children}
+        {renderProps.children}
       </Provider>
     </section>
   );

packages/react-aria-components/test/Dialog.test.js

@@ -30,6 +30,18 @@ describe('Dialog', () => {
     user = userEvent.setup({delay: null, pointerMap});
   });
 
+  it('should have a base default set of attributes', () => {
+    let {getByRole} = render(
+      <Dialog>
+        <Heading slot="title">Title</Heading>
+      </Dialog>
+    );
+
+    let dialog = getByRole('dialog');
+    expect(dialog).toHaveClass('react-aria-Dialog');
+    expect(dialog).toHaveAttribute('data-rac');
+  });
+
   it('works with modal', async () => {
     let {getByRole} = render(
       <DialogTrigger>
@@ -155,6 +167,7 @@ describe('Dialog', () => {
     let heading = getByRole('heading');
     expect(dialog).toHaveAttribute('aria-labelledby', heading.id);
     expect(dialog).toHaveAttribute('data-test', 'dialog');
+    expect(dialog).toHaveClass('react-aria-Dialog');
 
     let popover = dialog.closest('.react-aria-Popover');
     expect(popover).toHaveStyle('position: absolute');