[docs] Update to React 18 (#33196)

mui · Jul 8, 2022 · 0cdce27 · 0cdce27
1 parent dcb9db3
commit 0cdce27
Show file tree

Hide file tree

Showing 30 changed files with 380 additions and 333 deletions.
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -21,9 +21,9 @@
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.17.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
     "react-jss": "^10.9.0",
     "react-redux": "^7.2.8",
     "redux": "^4.2.0",

diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js
@@ -148,6 +148,7 @@ export default function Virtualize() {
       groupBy={(option) => option[0].toUpperCase()}
       renderInput={(params) => <TextField {...params} label="10,000 options" />}
       renderOption={(props, option) => [props, option]}
+      // TODO: Post React 18 update - validate this conversion, look like a hidden bug
       renderGroup={(params) => params}
     />
   );

diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx
@@ -146,8 +146,9 @@ export default function Virtualize() {
       options={OPTIONS}
       groupBy={(option) => option[0].toUpperCase()}
       renderInput={(params) => <TextField {...params} label="10,000 options" />}
-      renderOption={(props, option) => [props, option]}
-      renderGroup={(params) => params}
+      renderOption={(props, option) => [props, option] as React.ReactNode}
+      // TODO: Post React 18 update - validate this conversion, look like a hidden bug
+      renderGroup={(params) => params as unknown as React.ReactNode}
     />
   );
 }
diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx.preview b/docs/data/material/components/autocomplete/Virtualize.tsx.preview
@@ -7,6 +7,7 @@
   options={OPTIONS}
   groupBy={(option) => option[0].toUpperCase()}
   renderInput={(params) => <TextField {...params} label="10,000 options" />}
-  renderOption={(props, option) => [props, option]}
-  renderGroup={(params) => params}
+  renderOption={(props, option) => [props, option] as React.ReactNode}
+  // TODO: Post React 18 update - validate this conversion, look like a hidden bug
+  renderGroup={(params) => params as unknown as React.ReactNode}
 />
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -65,12 +65,6 @@ module.exports = {
     ) {
       const [nextExternals, ...externals] = config.externals;
 
-      if (externals.length > 0) {
-        // currently not the case but other next plugins might introduce additional
-        // rules for externals. We would need to handle those in the callback
-        throw new Error('There are other externals in the webpack config.');
-      }
-
       config.externals = [
         (ctx, callback) => {
           const { request } = ctx;
@@ -89,6 +83,7 @@ module.exports = {
           }
           return nextExternals(ctx, callback);
         },
+        ...externals,
       ];
     }
 

diff --git a/docs/package.json b/docs/package.json
@@ -43,18 +43,18 @@
     "@mui/styles": "^5.8.7",
     "@mui/system": "^5.8.7",
     "@mui/types": "^7.1.4",
-    "@mui/x-data-grid": "^5.8.0",
-    "@mui/x-data-grid-generator": "^5.8.0",
-    "@mui/x-data-grid-pro": "^5.8.0",
+    "@mui/x-data-grid": "^5.13.0",
+    "@mui/x-data-grid-generator": "^5.13.0",
+    "@mui/x-data-grid-pro": "^5.13.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.3",
     "@mui/x-date-pickers-pro": "^5.0.0-alpha.3",
-    "@mui/x-license-pro": "^5.7.0",
+    "@mui/x-license-pro": "^5.12.3",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.2.0",
     "@types/css-mediaquery": "^0.1.1",
     "@types/json2mq": "^0.2.0",
     "@types/markdown-to-jsx": "^7.0.1",
-    "@types/react-dom": "^17.0.17",
+    "@types/react-dom": "^18.0.5",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/react-swipeable-views-utils": "^0.13.3",
     "@types/react-virtualized": "^9.21.21",
@@ -92,19 +92,19 @@
     "lz-string": "^1.4.4",
     "markdown-to-jsx": "^7.1.7",
     "material-ui-popup-state": "^2.0.1",
-    "next": "12.1.5",
+    "next": "12.2.0",
     "notistack": "2.0.5",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.14",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-docgen": "^5.4.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-final-form": "^6.5.9",
     "react-imask": "^6.4.2",
     "react-intersection-observer": "^9.3.5",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-number-format": "^4.9.3",
     "react-router-dom": "^6.3.0",
     "react-spring": "^8.0.27",

diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx
@@ -8,7 +8,7 @@ import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Frame from 'docs/src/components/action/Frame';
 import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
@@ -41,16 +41,16 @@ function SettingsPanel(props: GridToolbarContainerProps) {
   const [typeState, setType] = React.useState<GridDataType>(type);
   const [selectedPaginationValue, setSelectedPaginationValue] = React.useState<number>(-1);
 
-  const handleSizeChange = React.useCallback((event) => {
+  const handleSizeChange = React.useCallback((event: SelectChangeEvent<string>) => {
     setSize(Number(event.target.value));
   }, []);
 
-  const handleDatasetChange = React.useCallback((event) => {
-    setType(event.target.value);
+  const handleDatasetChange = React.useCallback((event: SelectChangeEvent<GridDataType>) => {
+    setType(event.target.value as GridDataType);
   }, []);
 
-  const handlePaginationChange = React.useCallback((event) => {
-    setSelectedPaginationValue(event.target.value);
+  const handlePaginationChange = React.useCallback((event: SelectChangeEvent<number>) => {
+    setSelectedPaginationValue(Number(event.target.value));
   }, []);
 
   const handleApplyChanges = React.useCallback(() => {
@@ -89,7 +89,7 @@ function SettingsPanel(props: GridToolbarContainerProps) {
       </FormControl>
       <FormControl variant="filled" size="small">
         <InputLabel>Rows</InputLabel>
-        <Select value={sizeState} onChange={handleSizeChange} disableUnderline>
+        <Select value={String(sizeState)} onChange={handleSizeChange} disableUnderline>
           <MenuItem value={100}>100</MenuItem>
           <MenuItem value={1000}>{Number(1000).toLocaleString()}</MenuItem>
           <MenuItem value={10000}>{Number(10000).toLocaleString()}</MenuItem>

diff --git a/docs/src/components/x-grid/EditProgress.tsx b/docs/src/components/x-grid/EditProgress.tsx
@@ -19,7 +19,7 @@ export default function EditProgress(props: GridRenderEditCellParams) {
   const [valueState, setValueState] = React.useState(Number(value));
 
   const updateCellEditProps = React.useCallback(
-    (newValue) => {
+    (newValue: number | number[]) => {
       api.setEditCellValue({ id, field, value: newValue });
     },
     [api, field, id],

diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -106,7 +106,7 @@ interface JoyUsageDemoProps<ComponentProps> {
     /**
      * Name of the prop
      */
-    propName: keyof ComponentProps;
+    propName: Extract<keyof ComponentProps, string>;
     /**
      * The controller to be used:
      * - `switch`: render the switch component for boolean
@@ -244,7 +244,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
             if (knob === 'switch') {
               return (
                 <Switch
-                  key={propName as string}
+                  key={propName}
                   checked={Boolean(resolvedValue)}
                   onChange={(event) =>
                     setProps((latestProps) => ({
@@ -268,10 +268,11 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
               );
             }
             if (knob === 'radio') {
+              const labelId = `${componentName}-${propName}`;
               return (
-                <Box key={propName as string}>
+                <Box key={propName}>
                   <Typography
-                    id={`${componentName}-${propName}`}
+                    id={labelId}
                     fontSize="xs"
                     fontWeight="md"
                     sx={{ mb: 1, textTransform: 'capitalize' }}
@@ -280,8 +281,8 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                   </Typography>
                   <RadioGroup
                     row
-                    name={`${componentName}-${propName}`}
-                    aria-labelledby={`${componentName}-${propName}`}
+                    name={labelId}
+                    aria-labelledby={labelId}
                     value={resolvedValue}
                     onChange={(event) =>
                       setProps((latestProps) => ({
@@ -319,7 +320,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
             }
             if (knob === 'color') {
               return (
-                <Box key={propName as string} sx={{ mb: 1 }}>
+                <Box key={propName} sx={{ mb: 1 }}>
                   <Typography id={`${componentName}-color`} fontSize="xs" fontWeight="lg" mb={1}>
                     Color
                   </Typography>
@@ -398,20 +399,21 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
               );
             }
             if (knob === 'select') {
+              const selectId = `${componentName}-${propName}`;
               return (
-                <Box key={propName as string}>
+                <Box key={propName}>
                   <Typography
                     component="label"
                     fontSize="xs"
                     fontWeight="lg"
                     mb={1}
-                    htmlFor={`${componentName}-${propName}`}
+                    htmlFor={selectId}
                     sx={{ textTransform: 'capitalize' }}
                   >
                     {propName}
                   </Typography>
                   <Select
-                    id={`${componentName}-${propName}`}
+                    id={selectId}
                     value={(resolvedValue || 'none') as string}
                     onChange={(event) =>
                       setProps((latestProps) => ({
@@ -433,7 +435,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
             if (knob === 'input') {
               return (
                 <TextField
-                  key={propName as string}
+                  key={propName}
                   label={propName}
                   size="sm"
                   value={resolvedValue || ''}

diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx
@@ -20,7 +20,7 @@ const Anchor = styled('a')({});
 
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
-    Omit<NextLinkProps, 'href' | 'as' | 'passHref'> {
+    Omit<NextLinkProps, 'href' | 'as' | 'passHref' | 'onMouseEnter' | 'onClick'> {
   to: NextLinkProps['href'];
   linkAs?: NextLinkProps['as'];
 }

diff --git a/package.json b/package.json
@@ -84,12 +84,12 @@
     "@babel/register": "^7.17.0",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@eps1lon/enzyme-adapter-react-17": "^0.1.0",
+    "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@octokit/rest": "^18.12.0",
     "@playwright/test": "1.17.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@testing-library/dom": "^8.14.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.3.0",
     "@types/chai": "^4.3.1",
     "@types/chai-dom": "^0.0.13",
     "@types/enzyme": "^3.10.12",
@@ -99,7 +99,8 @@
     "@types/lodash": "^4.14.182",
     "@types/mocha": "^9.1.1",
     "@types/prettier": "^2.6.3",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.14",
+    "@types/react-is": "^17.0.3",
     "@types/sinon": "^10.0.12",
     "@types/stylis": "^4.0.2",
     "@types/webpack": "^5.28.0",
@@ -163,10 +164,11 @@
     "prettier": "^2.6.2",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "raw-loader": "4.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "remark": "^13.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.7",
@@ -208,10 +210,10 @@
     "**/@babel/preset-react": "^7.16.7",
     "**/@babel/preset-typescript": "^7.16.7",
     "**/@babel/runtime": "^7.17.2",
-    "**/@types/react": "^17.0.45",
-    "**/@types/react-dom": "^17.0.17",
+    "**/@types/react": "^18.0.9",
+    "**/@types/react-is": "^17.0.3",
     "**/cross-fetch": "^3.1.5",
-    "**/react-is": "^17.0.2"
+    "**/react-is": "^18.2.0"
   },
   "nyc": {
     "include": [

diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
@@ -58,7 +58,7 @@
     "@popperjs/core": "^2.11.5",
     "clsx": "^1.2.0",
     "prop-types": "^15.8.1",
-    "react-is": "^17.0.2"
+    "react-is": "^18.2.0"
   },
   "sideEffects": false,
   "publishConfig": {

diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
@@ -64,7 +64,7 @@
     "clsx": "^1.2.0",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
-    "react-is": "^17.0.2"
+    "react-is": "^18.2.0"
   },
   "sideEffects": false,
   "publishConfig": {

diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
@@ -66,7 +66,7 @@
     "@mui/utils": "^5.8.6",
     "clsx": "^1.2.0",
     "prop-types": "^15.8.1",
-    "react-is": "^17.0.2"
+    "react-is": "^18.2.0"
   },
   "devDependencies": {
     "@mui/types": "^7.1.4"

diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json
@@ -69,7 +69,7 @@
     "clsx": "^1.2.0",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-transition-group": "^4.4.2"
   },
   "sideEffects": false,

diff --git a/packages/mui-material-next/src/Button/Button.spec.tsx b/packages/mui-material-next/src/Button/Button.spec.tsx
@@ -9,7 +9,7 @@ const TestOverride = React.forwardRef<HTMLDivElement, { x?: number }>((props, re
   <div ref={ref} />
 ));
 
-const FakeIcon = () => <div>Icon</div>;
+const FakeIcon = <div>Icon</div>;
 
 const ButtonTest = () => (
   <div>

diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
@@ -69,7 +69,7 @@
     "clsx": "^1.2.0",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-transition-group": "^4.4.2"
   },
   "sideEffects": false,