Convert named imports

docs/data/joy/getting-started/templates/order-dashboard/useScript.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 
 export type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
 
@@ -19,7 +19,7 @@ function getScriptNode(src: string) {
 }
 
 function useScript(src: string): UseScriptStatus {
-  const [status, setStatus] = useState<UseScriptStatus>(() => {
+  const [status, setStatus] = React.useState<UseScriptStatus>(() => {
     if (typeof window === 'undefined') {
       // SSR Handling - always return 'loading'
       return 'loading';
@@ -28,7 +28,7 @@ function useScript(src: string): UseScriptStatus {
     return cachedScriptStatuses[src] ?? 'loading';
   });
 
-  useEffect(() => {
+  React.useEffect(() => {
     const cachedScriptStatus = cachedScriptStatuses[src];
     if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
       // If the script is already cached, set its status immediately

docs/src/modules/components/AppSearch.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createPortal } from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import * as ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
@@ -309,7 +309,7 @@ export default function AppSearch() {
         </Shortcut>
       </SearchButton>
       {isOpen &&
-        createPortal(
+        ReactDOM.createPortal(
           <DocSearchModal
             initialQuery={initialQuery}
             appId={'TZGZ85B9TB'}

examples/base-cra-ts/src/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import App from './App';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement!);
+const root = ReactDOM.createRoot(rootElement!);
 
 root.render(<App />);

examples/joy-cra-ts/src/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import App from './App';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement!);
+const root = ReactDOM.createRoot(rootElement!);
 
 root.render(<App />);

examples/material-cra-tailwind-ts/src/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement!);
+const root = ReactDOM.createRoot(rootElement!);
 
 // All `Portal`-related components need to have the the main app wrapper element as a container
 // so that the are in the subtree under the element used in the `important` option of the Tailwind's config.

examples/material-cra-ts/src/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import App from './App';
 import theme from './theme';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement!);
+const root = ReactDOM.createRoot(rootElement!);
 
 root.render(
   <ThemeProvider theme={theme}>

examples/material-cra/src/index.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import App from './App';
 import theme from './theme';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement);
+const root = ReactDOM.createRoot(rootElement);
 
 root.render(
   <ThemeProvider theme={theme}>

examples/material-remix-ts/app/entry.client.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { startTransition } from 'react';
-import { hydrateRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import { RemixBrowser } from 'remix';
 import { CacheProvider } from '@emotion/react';
 import { ThemeProvider } from '@mui/material/styles';
@@ -14,7 +12,7 @@ interface ClientCacheProviderProps {
   children: React.ReactNode;
 }
 function ClientCacheProvider({ children }: ClientCacheProviderProps) {
-  const [cache, setCache] = useState(createEmotionCache());
+  const [cache, setCache] = React.useState(createEmotionCache());
 
   const clientStyleContextValue = React.useMemo(
     () => ({
@@ -33,8 +31,8 @@ function ClientCacheProvider({ children }: ClientCacheProviderProps) {
 }
 
 const hydrate = () => {
-  startTransition(() => {
-    hydrateRoot(
+  React.startTransition(() => {
+    ReactDOM.hydrateRoot(
       document,
       <ClientCacheProvider>
         <ThemeProvider theme={theme}>

examples/material-remix-ts/app/entry.server.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { renderToString } from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { RemixServer } from 'remix';
 import type { EntryContext } from 'remix';
 import createEmotionCache from './src/createEmotionCache';
@@ -31,7 +31,7 @@ export default function handleRequest(
   }
 
   // Render the component to a string.
-  const html = renderToString(<MuiRemixServer />);
+  const html = ReactDOMServer.renderToString(<MuiRemixServer />);
 
   // Grab the CSS from emotion
   const { styles } = extractCriticalToChunks(html);

examples/material-remix-ts/app/src/ClientStyleContext.tsx

@@ -1,9 +1,9 @@
-import { createContext } from 'react';
+import * as React from 'react';
 
 export interface ClientStyleContextData {
   reset: () => void;
 }
 
-export default createContext<ClientStyleContextData>({
+export default React.createContext<ClientStyleContextData>({
   reset: () => {},
 });

packages/mui-base/src/TextareaAutosize/TextareaAutosize.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { flushSync } from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import {
   unstable_debounce as debounce,
   unstable_useForkRef as useForkRef,
@@ -145,7 +145,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
     // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
     // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
     // Related issue - https://github.com/facebook/react/issues/24331
-    flushSync(() => {
+    ReactDOM.flushSync(() => {
       setState((prevState) => {
         return updateState(prevState, newState);
       });

packages/mui-lab/src/Masonry/Masonry.js

@@ -1,5 +1,5 @@
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { flushSync } from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import { styled, useThemeProps } from '@mui/material/styles';
 import {
   createUnarySpacing,
@@ -265,7 +265,7 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
       // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
       // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
       // Related issue - https://github.com/facebook/react/issues/24331
-      flushSync(() => {
+      ReactDOM.flushSync(() => {
         setMaxColumnHeight(Math.max(...columnHeights));
         setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
       });

packages/mui-material/src/Dialog/DialogContext.ts

@@ -1,10 +1,10 @@
-import { createContext } from 'react';
+import * as React from 'react';
 
 interface DialogContextValue {
   titleId?: string;
 }
 
-const DialogContext = createContext<DialogContextValue>({});
+const DialogContext = React.createContext<DialogContextValue>({});
 
 if (process.env.NODE_ENV !== 'production') {
   DialogContext.displayName = 'DialogContext';

packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { flushSync } from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { useThemeProps } from '@mui/system';
@@ -239,7 +239,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     }
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    flushSync(() => {
+    ReactDOM.flushSync(() => {
       setMaybeSwiping(false);
     });
 
@@ -308,7 +308,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
       // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
       // so do this change on first touchmove instead of touchstart
       if (force || !(disableDiscovery && allowSwipeInChildren)) {
-        flushSync(() => {
+        ReactDOM.flushSync(() => {
           setMaybeSwiping(true);
         });
       }

test/e2e/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import * as DomTestingLibrary from '@testing-library/dom';
 import TestViewer from './TestViewer';
@@ -108,7 +108,7 @@ if (typeof ReactDOM.unstable_createRoot === 'function') {
   const root = ReactDOM.unstable_createRoot(container);
   root.render(children);
 } else {
-  const root = createRoot(container);
+  const root = ReactDOMClient.createRoot(container);
   root.render(children);
 }