react 18 root test

apps/chart-docsite/src/DocsComponents/FluentDocsContainer.tsx

@@ -11,7 +11,10 @@ interface FluentDocsContainerProps {
 /**
  * A container that wraps storybook's native docs container to add extra components to the docs experience
  */
-export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
+export const FluentDocsContainer: React.FC<React.PropsWithChildren<FluentDocsContainerProps>> = ({
+  children,
+  context,
+}) => {
   return (
     <>
       {/** TODO add table of contents */}

apps/react-18-tests-v8/package.json

@@ -25,9 +25,9 @@
     "@fluentui/react": "*",
     "@fluentui/react-hooks": "*",
     "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "@types/react-dom": "18.3.5",
     "tslib": "^2.1.0"
   }
 }

apps/react-18-tests-v9/package.json

@@ -21,9 +21,9 @@
   "dependencies": {
     "@cypress/react": "9.0.1",
     "@fluentui/react-components": "*",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.5",
     "@types/react-test-renderer": "18.3.1",

apps/vr-tests/src/stories/ThemeProvider/ThemeProviderLoadTheme.stories.tsx

@@ -21,10 +21,12 @@ export default {
   ],
 };
 
-const LoadThemeTestButton: React.FunctionComponent<{
-  buttonAs?: React.ElementType;
-  buttonProps?: any;
-}> = props => {
+const LoadThemeTestButton: React.FunctionComponent<
+  React.PropsWithChildren<{
+    buttonAs?: React.ElementType;
+    buttonProps?: any;
+  }>
+> = props => {
   const [isThemeCustomized, setIsThemeCustomized] = React.useState(false);
 
   // toggle between default theme and customized theme

change/@fluentui-react-aria-8f78fc18-0062-4b31-943b-49d1f8fb792c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-aria",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-datepicker-compat-40e91e26-ec95-4c11-8598-3e6bf2be277d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-237cafe3-9fa1-45dc-b20f-602b7de1fd4c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "\u0002chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-70c3f806-65d7-4b1f-aaba-3a92ade08fee.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-jsx-runtime-12473640-484d-4699-a36c-5d9e9c7a1622.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-jsx-runtime",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-625c3222-142a-430e-b5de-4b0d6ecd800c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v0-v9-e5bd1559-048d-4423-8339-c1ef4cd8aa29.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v8-v9-0dbfdec5-c535-461c-979a-dedf2e792f13.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-bbf27d86-dd78-4b8e-907f-f1ba2d458f88.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-motion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-search-f1e14f72-5b28-44d0-bb5e-7cc3260e00a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-search",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-b21a0221-810f-4b38-b928-13e54251c56b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-536a8e63-1156-4ebc-8595-e72351ff0d29.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tag-picker-e9aa92f6-cda0-4905-8d4d-13d63785c30b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-ba1e922d-1d50-4b25-97af-f776b995023a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-199bf58f-2421-486a-bcf1-535db8cb98cf.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-852e0ed2-030e-44aa-b7f5-c16ea6283aa2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-virtualizer-672c17bd-9097-418a-af72-9283de7b72dd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -108,11 +108,11 @@
     "@swc/core": "1.5.7",
     "@swc/helpers": "0.5.1",
     "@swc/jest": "0.2.36",
-    "@testing-library/dom": "8.11.3",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
     "@testing-library/react-hooks": "8.0.1",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/user-event": "14.6.1",
     "@tsconfig/node18": "1.0.3",
     "@types/babel__core": "7.20.5",
     "@types/babel__helper-plugin-utils": "7.10.3",
@@ -156,10 +156,10 @@
     "@types/node": "20.12.12",
     "@types/prettier": "2.7.2",
     "@types/progress": "2.0.5",
-    "@types/react": "17.0.44",
-    "@types/react-dom": "17.0.15",
-    "@types/react-is": "17.0.3",
-    "@types/react-test-renderer": "17.0.2",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.5",
+    "@types/react-is": "18.3.1",
+    "@types/react-test-renderer": "18.3.1",
     "@types/react-transition-group": "4.4.6",
     "@types/react-window": "^1.8.2",
     "@types/request-promise-native": "1.0.18",
@@ -295,13 +295,13 @@
     "progress": "2.0.3",
     "puppeteer": "19.6.0",
     "raw-loader": "4.0.2",
-    "react": "17.0.2",
+    "react": "18.3.1",
     "react-app-polyfill": "2.0.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.3.1",
     "react-hot-loader": "4.13.0",
-    "react-is": "17.0.2",
+    "react-is": "18.3.1",
     "react-shadow": "20.3.0",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.3.1",
     "react-vis": "1.12.1",
     "react-window": "^1.8.6",
     "read-pkg-up": "7.0.1",
@@ -383,8 +383,7 @@
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",
     "puppeteer": "19.6.0",
-    "ws": "8.17.1",
-    "**/@mdx-js/react/@types/react": "^17"
+    "ws": "8.17.1"
   },
   "nx": {
     "includedScripts": []

packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx

@@ -78,7 +78,9 @@ export const ResponsiveContainer: React.FC<IResponsiveContainerProps> = props =>
           // Keep components styles
           ...child.props.styles,
           root: {
-            ...child.props.styles?.root,
+            ...(typeof child.props.styles !== 'function' && typeof child.props.styles?.root === 'object'
+              ? child.props?.styles?.root
+              : {}),
             // Ensure the child element fills the parent container
             // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
             width: calculatedWidth,

packages/charts/react-charting/src/utilities/locale-util.ts

@@ -1,5 +1,5 @@
 type LocaleStringDataProps = number | string | Date | undefined;
-export const convertToLocaleString = (data: LocaleStringDataProps, culture?: string): LocaleStringDataProps => {
+export const convertToLocaleString = (data: LocaleStringDataProps, culture?: string): string | number | undefined => {
   if (!data) {
     return data;
   }

packages/charts/react-charting/tsconfig.json

@@ -17,8 +17,8 @@
     "preserveConstEnums": true,
     "skipLibCheck": true,
     "lib": ["es5", "dom"],
-    "typeRoots": ["../../../node_modules/@types", "../../../typings"],
-    "types": ["jest", "custom-global", "@testing-library/jest-dom"],
+    "typeRoots": ["../../../node_modules/@types", "../../../typings", "../../../node_modules/@testing-library"],
+    "types": ["jest", "custom-global", "jest-dom"],
     "isolatedModules": true
   },
   "include": ["src"]

packages/fluentui/code-sandbox/src/SandboxApp.tsx

@@ -55,7 +55,7 @@ const themes = {
   teamsHighContrastTheme,
 };
 
-export const SandboxApp: React.FunctionComponent = props => {
+export const SandboxApp: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => {
   const { children } = props;
   const [theme, setTheme] = React.useState(items[0].value);
 

packages/fluentui/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx

@@ -22,7 +22,7 @@ const copyIcon = (
   </svg>
 );
 
-export const CodeSnippetLabel: React.FunctionComponent<CopySnippetLabelProps> = props => {
+export const CodeSnippetLabel: React.FunctionComponent<React.PropsWithChildren<CopySnippetLabelProps>> = props => {
   const { copyable, label, mode, value } = props;
   const hasLabel = label !== false;
 

packages/fluentui/docs-components/src/knobs/KnobProvider.tsx

@@ -14,7 +14,7 @@ type KnobProviderProps = {
   components?: Partial<KnobComponents>;
 };
 
-export const KnobProvider: React.FunctionComponent<KnobProviderProps> = props => {
+export const KnobProvider: React.FunctionComponent<React.PropsWithChildren<KnobProviderProps>> = props => {
   const { children, components } = props;
 
   const [knobs, setKnobs] = React.useState<KnobSet>({});

packages/fluentui/docs-components/src/knobs/LogInspector.tsx

@@ -6,7 +6,7 @@ type LogInspectorProps = {
   silent?: boolean;
 };
 
-export const LogInspector: React.FunctionComponent<LogInspectorProps> = props => {
+export const LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>> = props => {
   const { components } = React.useContext(KnobContext);
 
   const { clearLog } = React.useContext(LogContextFunctions);

packages/fluentui/docs-components/src/knobs/defaultComponents.tsx

@@ -8,7 +8,7 @@ import {
 } from './types';
 import { parseValue } from './utils/parseRangeValue';
 
-const KnobField: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobField: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <div
     style={{
       borderBottom: '1px solid rgb(234, 234, 234)',
@@ -22,7 +22,7 @@ const KnobField: React.FunctionComponent<KnobComponentProps> = props => (
   </div>
 );
 
-const KnobControl: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobControl: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <span
     style={{
       verticalAlign: 'middle',
@@ -34,13 +34,13 @@ const KnobControl: React.FunctionComponent<KnobComponentProps> = props => (
   </span>
 );
 
-const KnobLabel: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobLabel: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <label htmlFor={`knob_${props.name}`} style={{ marginRight: 5 }}>
     {props.content || <code>{props.name}</code>}
   </label>
 );
 
-const KnobBoolean: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobBoolean: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     checked={props.value}
@@ -52,7 +52,7 @@ const KnobBoolean: React.FunctionComponent<KnobComponentProps> = props => (
   />
 );
 
-const KnobNumber: React.FunctionComponent<KnobNumberKnobComponentProps> = props => (
+const KnobNumber: React.FunctionComponent<React.PropsWithChildren<KnobNumberKnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -76,7 +76,7 @@ const KnobNumber: React.FunctionComponent<KnobNumberKnobComponentProps> = props
   />
 );
 
-const KnobSelect: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobSelect: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <select
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -94,7 +94,7 @@ const KnobSelect: React.FunctionComponent<KnobComponentProps> = props => (
   </select>
 );
 
-const KnobRange: React.FunctionComponent<KnobRangeKnobComponentProps> = props => (
+const KnobRange: React.FunctionComponent<React.PropsWithChildren<KnobRangeKnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     type="range"
@@ -109,7 +109,7 @@ const KnobRange: React.FunctionComponent<KnobRangeKnobComponentProps> = props =>
   />
 );
 
-const KnobString: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobString: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -120,7 +120,7 @@ const KnobString: React.FunctionComponent<KnobComponentProps> = props => (
   />
 );
 
-const LogInspector: React.FunctionComponent<LogInspectorProps> = props => (
+const LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>> = props => (
   <>
     <div style={{ display: 'flex', padding: 5 }}>
       <div style={{ flexGrow: 1 }}>