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 & {content async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise { 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( {content} , - 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() 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'