From 3a701364aa77e24764a468de29602bc90142bbea Mon Sep 17 00:00:00 2001
From: Jeremy Neal <radglob@github.com>
Date: Wed, 5 Jul 2023 15:01:39 -0400
Subject: [PATCH] Use createRoot instead of ReactDOM.render for React 18
 compatibility. (#3367)

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

* Create lucky-coins-guess.md

* Updated snapshots.
---
 .changeset/lucky-coins-guess.md                   | 5 +++++
 src/Dialog/ConfirmationDialog.tsx                 | 9 ++++-----
 src/__tests__/ConfirmationDialog.test.tsx         | 8 --------
 src/__tests__/__snapshots__/exports.test.ts.snap  | 1 -
 src/drafts/MarkdownEditor/MarkdownEditor.test.tsx | 3 +--
 5 files changed, 10 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/lucky-coins-guess.md

diff --git a/.changeset/lucky-coins-guess.md b/.changeset/lucky-coins-guess.md
new file mode 100644
index 00000000000..6377f43d809
--- /dev/null
+++ b/.changeset/lucky-coins-guess.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Use createRoot instead of ReactDOM.render for React 18 compatibility.
diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
index 2fa2259849e..d659ab23e1c 100644
--- a/src/Dialog/ConfirmationDialog.tsx
+++ b/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,
     )
   })
 }
diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/__tests__/ConfirmationDialog.test.tsx
index 70eca67de79..602acbd9110 100644
--- a/src/__tests__/ConfirmationDialog.test.tsx
+++ b/src/__tests__/ConfirmationDialog.test.tsx
@@ -114,8 +114,6 @@ describe('ConfirmationDialog', () => {
   })
 
   it('supports nested `focusTrap`s', async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementationOnce(() => {})
-
     const {getByText} = HTMLRender(<ShorthandHookFromActionMenu />)
 
     fireEvent.click(getByText('Show menu'))
@@ -123,11 +121,5 @@ describe('ConfirmationDialog', () => {
 
     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()
   })
 })
diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap
index d2c37d8c0db..dc467fa5bb4 100644
--- a/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/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",
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
index 6b3ec1de86c..c74403cbc16 100644
--- a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
+++ b/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'