Use createRoot instead of ReactDOM.render for React 18 compatibility.

.changeset/lucky-coins-guess.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Use createRoot instead of ReactDOM.render for React 18 compatibility.

src/Dialog/ConfirmationDialog.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import styled from 'styled-components'
 import Box from '../Box'
 import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
@@ -149,22 +149,21 @@ export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content
 async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
   const {content, ...confirmationDialogProps} = options
   return new Promise(resolve => {
-    const hostElement = document.createElement('div')
+    const root = createRoot(document.createElement('div'))
     const onClose: ConfirmationDialogProps['onClose'] = gesture => {
-      ReactDOM.unmountComponentAtNode(hostElement)
+      root.unmount()
       if (gesture === 'confirm') {
         resolve(true)
       } else {
         resolve(false)
       }
     }
-    ReactDOM.render(
+    root.render(
       <ThemeProvider {...themeProps}>
         <ConfirmationDialog {...confirmationDialogProps} onClose={onClose}>
           {content}
         </ConfirmationDialog>
       </ThemeProvider>,
-      hostElement,
     )
   })
 }

src/__tests__/ConfirmationDialog.test.tsx

@@ -129,8 +129,8 @@ describe('ConfirmationDialog', () => {
     // REACT_VERSION_LATEST should be treated as a constant for the test
     // environment
     if (REACT_VERSION_LATEST) {
-      expect(spy).toHaveBeenCalledTimes(1)
-      expect(spy).toHaveBeenCalledWith(
+      expect(spy).toHaveBeenCalledTimes(0)
+      expect(spy).not.toHaveBeenCalledWith(
         expect.stringContaining('Warning: ReactDOM.render is no longer supported in React 18'),
       )
     }

src/drafts/MarkdownEditor/MarkdownEditor.test.tsx

@@ -1,9 +1,8 @@
 import {DiffAddedIcon} from '@primer/octicons-react'
-import {fireEvent, render as _render, waitFor, within} from '@testing-library/react'
+import {fireEvent, render as _render, waitFor, within, act} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {UserEvent} from '@testing-library/user-event/dist/types/setup/setup'
 import React, {forwardRef, useRef, useState} from 'react'
-import {act} from 'react-dom/test-utils'
 import MarkdownEditor, {MarkdownEditorHandle, MarkdownEditorProps, Mentionable, Reference, SavedReply} from '.'
 import ThemeProvider from '../../ThemeProvider'