From 8a84550f26b497417543d109eb6ff09dd119db12 Mon Sep 17 00:00:00 2001
From: Jeremy Neal <hello@radglob.com>
Date: Mon, 5 Jun 2023 09:55:38 -0400
Subject: [PATCH 1/3] Fix warning by using React 18 client API.

---
 src/Dialog/ConfirmationDialog.tsx                 | 8 ++++----
 src/__tests__/ConfirmationDialog.test.tsx         | 4 ++--
 src/drafts/MarkdownEditor/MarkdownEditor.test.tsx | 3 +--
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
index 2fa2259849e..ec6c11c0a62 100644
--- a/src/Dialog/ConfirmationDialog.tsx
+++ b/src/Dialog/ConfirmationDialog.tsx
@@ -1,5 +1,6 @@
 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 +150,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 32e604d21a6..bbf25f8ac9d 100644
--- a/src/__tests__/ConfirmationDialog.test.tsx
+++ b/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'),
       )
     }
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
index 3a87f7d5d55..f992f245480 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'
 

From 97abbc10912192e72eb8c254af99edddc5a1594c Mon Sep 17 00:00:00 2001
From: Jeremy Neal <radglob@github.com>
Date: Mon, 5 Jun 2023 11:36:35 -0400
Subject: [PATCH 2/3] Create mean-bananas-grow.md

---
 .changeset/mean-bananas-grow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/mean-bananas-grow.md

diff --git a/.changeset/mean-bananas-grow.md b/.changeset/mean-bananas-grow.md
new file mode 100644
index 00000000000..940e4881f47
--- /dev/null
+++ b/.changeset/mean-bananas-grow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+`ConfirmationDialog` uses `createRoot` instead of `ReactDOM.render`.

From f5f5cca806618ec7b15899be43c44c6bd68d8781 Mon Sep 17 00:00:00 2001
From: Jeremy Neal <hello@radglob.com>
Date: Mon, 5 Jun 2023 11:42:59 -0400
Subject: [PATCH 3/3] Fix linting error.

---
 src/Dialog/ConfirmationDialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
index ec6c11c0a62..d659ab23e1c 100644
--- a/src/Dialog/ConfirmationDialog.tsx
+++ b/src/Dialog/ConfirmationDialog.tsx
@@ -1,5 +1,4 @@
 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'