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

@@ -114,20 +114,12 @@ describe('ConfirmationDialog', () => {
   })
 
   it('supports nested `focusTrap`s', async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementationOnce(() => {})
-
     const {getByText} = HTMLRender(<ShorthandHookFromActionMenu />)
 
     fireEvent.click(getByText('Show menu'))
     fireEvent.click(getByText('Show dialog'))
 
     expect(getByText('Primary')).toEqual(document.activeElement)
     expect(getByText('Secondary')).not.toEqual(document.activeElement)
-
-    expect(spy).toHaveBeenCalledTimes(1)
-    expect(spy).toHaveBeenCalledWith(
-      expect.stringContaining('Warning: ReactDOM.render is no longer supported in React 18'),
-    )
-    spy.mockRestore()
   })
 })

src/__tests__/__snapshots__/exports.test.ts.snap

@@ -132,7 +132,6 @@ exports[`@primer/react/decprecated should not update exports without a semver ch
 
 exports[`@primer/react/drafts should not update exports without a semver change 1`] = `
 [
-  "Button",
   "Component",
   "Content",
   "DataTable",

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'