Merge branch 'master' into edwl/fluent-checkbox-radio-motion

Author: leddie24

apps/public-docsite-resources/src/components/pages/ColorsPage.tsx

@@ -48,7 +48,7 @@ class Content extends React.Component {
   }
 }
 
-ReactDOM.render(<Content />,document.getElementById('content'));`;
+createRoot(document.getElementById('content')).render(<Content />)`;
 
 export class ColorsPage extends React.Component<{}, IColorsPageState> {
   private _semanticSlotColorChangeTimeout: number;

apps/public-docsite-resources/src/docs/GettingStartedOverview.md

@@ -20,7 +20,7 @@ The library includes commonjs entry points under the `lib-commonjs` folder. To u
 
 ```tsx
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { Fabric, DefaultButton } from '@fluentui/react';
 
 const MyPage = () => (
@@ -29,7 +29,7 @@ const MyPage = () => (
   </Fabric>
 );
 
-ReactDOM.render(<MyPage />, document.body.firstChild);
+ReactDOMClient.createRoot(document.body.firstChild).render(<MyPage />);
 ```
 
 ## Notes on module vs path-based imports

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx

@@ -11,16 +11,16 @@ We recommend placing the `FluentProvider` at the root of your app so that everyt
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import { FluentProvider, webLightTheme } from '@fluentui/react-components';
 
 import App from './App';
 
-ReactDOM.render(
+const root = ReactDOMClient.createRoot(document.getElementById('root'));
+root.render(
   <FluentProvider theme={webLightTheme}>
     <App />
   </FluentProvider>,
-  document.getElementById('root'),
 );
 ```
 

apps/public-docsite/package.json

@@ -18,7 +18,8 @@
     "just": "just-scripts",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "start": "just-scripts dev"
+    "start": "just-scripts dev",
+    "type-check": "tsc -p . --noEmit --baseUrl ."
   },
   "license": "MIT",
   "devDependencies": {

apps/public-docsite/project.json

@@ -3,5 +3,13 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [],
-  "tags": ["v8"]
+  "tags": ["v8"],
+  "targets": {
+    "type-check": {
+      "dependsOn": ["prebundle"]
+    },
+    "prebundle": {
+      "dependsOn": ["^build"]
+    }
+  }
 }

apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md

@@ -8,10 +8,10 @@ The SVG icon components are primarily intended to be used directly, rather than
 
 ```tsx
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { ChevronDownIcon } from '@fluentui/react-icons-mdl2';
 
-ReactDOM.render(<ChevronDownIcon />, document.body.firstChild);
+ReactDOMClient.createRoot(document.body.firstChild).render(<ChevronDownIcon />);
 ```
 
 If you do need to make SVG icons available to reference by name (for example, in Fluent UI React components which take `iconProps`), this can be done using `registerIcons` as follows:

apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsUsage.md

@@ -23,24 +23,24 @@ Once you've initialized the icons, you can use the Icon component in your app li
 
 ```tsx
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { Icon } from '@fluentui/react/lib/Icon';
 
 const MyIcon = () => <Icon iconName="CompassNW" />;
 
-ReactDOM.render(<MyIcon />, document.body.firstChild);
+ReactDOMClient.createRoot(document.body.firstChild).render(<MyIcon />);
 ```
 
 Some components also include baked-in support for Icon via `iconProps`, which you can use to configure how the icon renders. Here's an example using IconButton:
 
 ```tsx
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { IconButton } from '@fluentui/react/lib/Button';
 
 const MyIconButton = () => <IconButton iconProps={{ iconName: 'Add' }} title="Add" ariaLabel="Add" />;
 
-ReactDOM.render(<MyIconButton />, document.body.firstChild);
+ReactDOMClient.createRoot(document.body.firstChild).render(<MyIconButton />);
 ```
 
 ### Fabric Core

apps/public-docsite/src/utilities/createSite.tsx

@@ -1,7 +1,7 @@
 // TODO: move to react-docsite-components once Site moves
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { ThemeProvider } from '@fluentui/react';
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import {
@@ -37,7 +37,8 @@ initializeIcons();
 // blog storage is now immutable, so new versions of fabric-core will be at a new url based on the build number
 addCSSToHeader(`${cdnUrl}/office-ui-fabric-core/11.1.0/css/fabric.min.css`);
 
-let rootElement: HTMLElement;
+let rootElement: HTMLElement | null;
+let root: ReactDOMClient.Root | null;
 
 type ComponentLike = React.ComponentProps<typeof Route>['component'];
 
@@ -109,19 +110,21 @@ export function createSite<TPlatforms extends string>(
 
     const renderSite = (props: {}) => <Site siteDefinition={siteDefinition} hasUHF={hasUHF} {...props} />;
 
-    ReactDOM.render(
+    root = ReactDOMClient.createRoot(rootElement!);
+    root.render(
       <ThemeProvider>
         <Router>
           <Route component={renderSite}>{_getSiteRoutes()}</Route>
         </Router>
       </ThemeProvider>,
-      rootElement,
     );
   }
 
   function _onUnload() {
-    if (rootElement) {
-      ReactDOM.unmountComponentAtNode(rootElement);
+    if (root && rootElement) {
+      root.unmount();
+      root = null;
+      rootElement = null;
     }
   }
 }

apps/theming-designer/src/components/Header.tsx

@@ -89,7 +89,8 @@ const Content = () => {
       </ThemeProvider>
     );
 }
-ReactDOM.render(<Content />,document.getElementById('content'));`;
+
+ReactDOM.createRoot(document.getElementById('content')).render(<Content />);`;
 
 export class Header extends React.Component<IHeaderProps, IHeaderState> {
   constructor(props: any) {

apps/theming-designer/src/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Fabric } from '@fluentui/react/lib/Fabric';
+import { createRoot } from 'react-dom/client';
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { ThemingDesigner } from './components/ThemingDesigner';
 
@@ -13,7 +12,7 @@ function start(): void {
     _rootDiv = document.createElement('div');
     document.body.appendChild(_rootDiv);
   }
-  ReactDOM.render(<ThemingDesigner />, _rootDiv);
+  createRoot(_rootDiv).render(<ThemingDesigner />);
 }
 
 // Start the application.