From dbb756e662e08dbb81ab61338786d8926db9bb59 Mon Sep 17 00:00:00 2001
From: Jeremy Neal <hello@radglob.com>
Date: Mon, 5 Jun 2023 12:48:27 -0400
Subject: [PATCH 1/3] Use createRoot instead of ReactDOM.render for React 18
 compatibility.

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

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 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 0a49ece609140ff287a316572e6fc723f96f8747 Mon Sep 17 00:00:00 2001
From: Jeremy Neal <radglob@github.com>
Date: Mon, 5 Jun 2023 12:49:51 -0400
Subject: [PATCH 2/3] Create lucky-coins-guess.md

---
 .changeset/lucky-coins-guess.md | 5 +++++
 1 file changed, 5 insertions(+)
 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.

From a152bfd340bbf5074664265c3538c18634b62938 Mon Sep 17 00:00:00 2001
From: Jeremy Neal <hello@radglob.com>
Date: Wed, 5 Jul 2023 14:24:48 -0400
Subject: [PATCH 3/3] Updated snapshots.

---
 src/__tests__/__snapshots__/exports.test.ts.snap | 1 -
 1 file changed, 1 deletion(-)

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",