[core] Improve React 19 support (mui#15769)

Signed-off-by: Armin Mehinovic <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jose Quintas <[email protected]> Co-authored-by: Lukas <[email protected]> Co-authored-by: flavien <[email protected]> Co-authored-by: Armin Mehinovic <[email protected]> Co-authored-by: Armin Mehinovic <[email protected]> Co-authored-by: Bilal Shafi <[email protected]>
LukasTy · Dec 31, 2024 · fb6cdef · fb6cdef
1 parent 6071413
commit fb6cdef
Show file tree

Hide file tree

Showing 131 changed files with 1,133 additions and 970 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -57,13 +57,27 @@ default-context: &default-context
   context:
     - org-global
 
+test-react-18-context: &test-react-18-context
+  <<: *default-context
+  react-version: ^18.0.0
+  filters:
+    branches:
+      only:
+        - master
+        - /^v.*\.x$/
+        - next
+
 commands:
   install_js:
     parameters:
       browsers:
         type: boolean
         default: false
         description: 'Set to true if you intend to any browser (for example with playwright).'
+      react-version:
+        type: string
+        default: << pipeline.parameters.react-version >>
+        description: The version of React to use.
 
     steps:
       - when:
@@ -81,14 +95,35 @@ commands:
                 # See https://stackoverflow.com/a/73411601
                 command: corepack enable --install-directory ~/bin
 
+      - when:
+          condition:
+            not:
+              equal: [stable, << parameters.react-version >>]
+          steps:
+            - run:
+                name: Change pnpm setting to not install peer dependencies
+                command: pnpm config set auto-install-peers false --location project
+
       - run:
           name: View install environment
           command: |
             node --version
             pnpm --version
-      - run:
-          name: Install js dependencies
-          command: pnpm install
+      - when:
+          condition:
+            not:
+              equal: [stable, << parameters.react-version >>]
+          steps:
+            - run:
+                name: Install js dependencies without frozen lockfile
+                command: pnpm install --no-frozen-lockfile
+      - when:
+          condition:
+            equal: [stable, << parameters.react-version >>]
+          steps:
+            - run:
+                name: Install js dependencies
+                command: pnpm install
 
       - run:
           name: Resolve React version
@@ -127,7 +162,8 @@ jobs:
     <<: *default-job
     steps:
       - checkout
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - run:
           name: Tests fake browser
           command: pnpm test:coverage
@@ -226,6 +262,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Tests real browsers
           command: pnpm test:karma
@@ -257,6 +294,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Run e2e tests
           command: pnpm test:e2e
@@ -281,6 +319,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Run visual regression tests
           command: xvfb-run pnpm test:regressions
@@ -296,7 +335,6 @@ jobs:
           name: Run danger on PRs
           command: pnpm danger ci --fail-on-errors
 workflows:
-  version: 2
   pipeline:
     when:
       equal: [pipeline, << pipeline.parameters.workflow >>]
@@ -380,3 +418,17 @@ workflows:
       - test_types:
           <<: *default-context
           name: test_types_additional
+  test-react-18:
+    jobs:
+      - test_unit:
+          <<: *test-react-18-context
+          name: test_unit_react_18
+      - test_browser:
+          <<: *test-react-18-context
+          name: test_browser_react_18
+      - test_regressions:
+          <<: *test-react-18-context
+          name: test_regressions_react_18
+      - test_e2e:
+          <<: *test-react-18-context
+          name: test_e2e_react_18
diff --git a/docs/data/charts/components/ScaleDemo.tsx b/docs/data/charts/components/ScaleDemo.tsx
@@ -21,7 +21,7 @@ const StyledText = styled('text')(({ theme }) => ({
   shapeRendering: 'crispEdges',
 }));
 
-function ValueHighlight(props: { svgRef: React.RefObject<SVGSVGElement> }) {
+function ValueHighlight(props: { svgRef: React.RefObject<SVGSVGElement | null> }) {
   const { svgRef } = props;
 
   // Get the drawing area bounding box

diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.js b/docs/data/data-grid/filtering/CustomMultiValueOperator.js
@@ -9,7 +9,7 @@ function InputNumberInterval(props) {
   const rootProps = useGridRootProps();
   const { item, applyValue, focusElementRef = null } = props;
 
-  const filterTimeout = React.useRef();
+  const filterTimeout = React.useRef(undefined);
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
 

diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
@@ -15,7 +15,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
   const rootProps = useGridRootProps();
   const { item, applyValue, focusElementRef = null } = props;
 
-  const filterTimeout = React.useRef<any>();
+  const filterTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const [filterValueState, setFilterValueState] = React.useState<[string, string]>(
     item.value ?? '',
   );

diff --git a/docs/data/data-grid/layout/MinMaxHeightGrid.tsx b/docs/data/data-grid/layout/MinMaxHeightGrid.tsx
@@ -53,7 +53,7 @@ export default function MinMaxHeightGrid() {
 function ContainerMeasurements({
   containerRef,
 }: {
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
 }) {
   const [containerHeight, setContainerHeight] = React.useState(0);
 

diff --git a/docs/data/data-grid/pagination/CursorPaginationGrid.js b/docs/data/data-grid/pagination/CursorPaginationGrid.js
@@ -48,7 +48,7 @@ export default function CursorPaginationGrid() {
     }
   };
 
-  const paginationMetaRef = React.useRef();
+  const paginationMetaRef = React.useRef(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {

diff --git a/docs/data/data-grid/pagination/CursorPaginationGrid.tsx b/docs/data/data-grid/pagination/CursorPaginationGrid.tsx
@@ -55,7 +55,7 @@ export default function CursorPaginationGrid() {
     }
   };
 
-  const paginationMetaRef = React.useRef<GridPaginationMeta>();
+  const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {

diff --git a/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.js b/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.js
@@ -23,7 +23,7 @@ export default function ServerPaginationGridNoRowCount() {
     pageInfo: { hasNextPage },
   } = useQuery(paginationModel);
 
-  const paginationMetaRef = React.useRef();
+  const paginationMetaRef = React.useRef(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {

diff --git a/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.tsx b/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.tsx
@@ -23,7 +23,7 @@ export default function ServerPaginationGridNoRowCount() {
     pageInfo: { hasNextPage },
   } = useQuery(paginationModel);
 
-  const paginationMetaRef = React.useRef<GridPaginationMeta>();
+  const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {

diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
@@ -45,6 +45,7 @@ function TransitionComponent(props) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>

diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
@@ -45,6 +45,7 @@ function TransitionComponent(props: TransitionProps) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>

diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
@@ -15,6 +15,7 @@ function TransitionComponent(props) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>

diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
@@ -15,6 +15,7 @@ function TransitionComponent(props: TransitionProps) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>

diff --git a/docs/package.json b/docs/package.json
@@ -28,14 +28,14 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
     "@mui/docs": "6.1.6",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/joy": "^5.0.0-beta.48",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.7",
-    "@mui/material-nextjs": "^5.16.6",
-    "@mui/styles": "^5.16.7",
-    "@mui/system": "^5.16.7",
-    "@mui/utils": "^5.16.6",
+    "@mui/icons-material": "^5.16.13",
+    "@mui/joy": "^5.0.0-beta.51",
+    "@mui/lab": "^5.0.0-alpha.175",
+    "@mui/material": "^5.16.13",
+    "@mui/material-nextjs": "^5.16.13",
+    "@mui/styles": "^5.16.13",
+    "@mui/system": "^5.16.13",
+    "@mui/utils": "^5.16.13",
     "@mui/x-charts": "workspace:*",
     "@mui/x-charts-vendor": "workspace:*",
     "@mui/x-data-grid": "workspace:*",
@@ -81,11 +81,11 @@
     "postcss": "^8.4.47",
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-docgen": "^5.4.3",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.53.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "react-router": "^6.27.0",
     "react-router-dom": "^6.27.0",
     "react-runner": "^1.0.5",
@@ -113,7 +113,7 @@
     "@types/moment-hijri": "^2.1.4",
     "@types/moment-jalaali": "^0.7.9",
     "@types/prop-types": "^15.7.13",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.0.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/stylis": "^4.2.6",
     "@types/webpack-bundle-analyzer": "^4.7.0",

diff --git a/docs/src/modules/components/PickersPlayground.tsx b/docs/src/modules/components/PickersPlayground.tsx
@@ -217,7 +217,7 @@ const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
   { label: 'Reset', getValue: () => [null, null] },
 ];
 
-function DisabledCheckboxTooltip({ children }: { children: React.ReactElement }) {
+function DisabledCheckboxTooltip({ children }: { children: React.ReactElement<any> }) {
   return (
     <Tooltip title="At least one view has to be provided to the components">{children}</Tooltip>
   );

diff --git a/docs/src/modules/utils/useCustomizationPlayground.tsx b/docs/src/modules/utils/useCustomizationPlayground.tsx
@@ -24,13 +24,13 @@ export type PickersSubcomponentType = {
   [k: string]: {
     examples: CustomizationItemsType;
     slots: string[];
-    moreInformation?: React.ReactElement | string;
+    moreInformation?: React.ReactElement<any> | string;
   };
 };
 
 export interface UseCustomizationPlaygroundProps {
   examples: PickersSubcomponentType;
-  children?: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement<any> | React.ReactElement<any>[];
   componentName: string;
 }
 export const customizationLabels: CustomizationLabelType = {
@@ -72,7 +72,7 @@ export type UseCustomizationPlaygroundReturnType = {
   handleTokenChange: HandleTokenChangeType;
   selectedTokens: StyleTokensType;
   selectedExample?: CustomizationItemType | null;
-  moreInformation?: React.ReactElement | string | null;
+  moreInformation?: React.ReactElement<any> | string | null;
 };
 
 export function withStyles(

diff --git a/package.json b/package.json
@@ -90,13 +90,13 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
+    "@mui/icons-material": "^5.16.13",
     "@mui/internal-babel-plugin-resolve-imports": "1.0.18",
     "@mui/internal-markdown": "^1.0.19",
     "@mui/internal-test-utils": "^1.0.17",
-    "@mui/material": "^5.16.7",
+    "@mui/material": "^5.16.13",
     "@mui/monorepo": "github:mui/material-ui#7aa841466a01b745012e59e9d201ed50807a022e",
-    "@mui/utils": "^5.16.6",
+    "@mui/utils": "^5.16.13",
     "@next/eslint-plugin-next": "14.2.15",
     "@octokit/plugin-retry": "^7.1.2",
     "@octokit/rest": "^21.0.2",
@@ -110,8 +110,8 @@
     "@types/lodash": "^4.17.10",
     "@types/mocha": "^10.0.9",
     "@types/node": "^20.16.11",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/react-test-renderer": "^18.3.0",
     "@types/requestidlecallback": "^0.3.7",
     "@types/sinon": "^17.0.3",
@@ -179,8 +179,8 @@
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "remark": "^15.0.1",
     "rimraf": "^6.0.1",
     "serve": "^14.2.3",
@@ -198,7 +198,7 @@
     "yargs": "^17.7.2"
   },
   "resolutions": {
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "@types/node": "^20.16.11"
   },
   "packageManager": "[email protected]",

diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
@@ -67,8 +67,8 @@
     }
   },
   "devDependencies": {
-    "@mui/material": "^5.16.7",
-    "@mui/system": "^5.16.7",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@react-spring/core": "^9.7.5",
     "@react-spring/shared": "^9.7.5",
     "@types/prop-types": "^15.7.13",

diff --git a/packages/x-charts-pro/tsconfig.json b/packages/x-charts-pro/tsconfig.json
@@ -8,7 +8,8 @@
       "mocha",
       "node"
     ],
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "skipLibCheck": true
   },
   "include": ["src/**/*", "../../test/utils/addChaiAssertions.ts"]
 }
diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
@@ -66,8 +66,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.17",
-    "@mui/material": "^5.16.7",
-    "@mui/system": "^5.16.7",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@react-spring/core": "^9.7.5",
     "@react-spring/shared": "^9.7.5",
     "@types/prop-types": "^15.7.13",

diff --git a/packages/x-charts/src/LineChart/AnimatedArea.tsx b/packages/x-charts/src/LineChart/AnimatedArea.tsx
@@ -58,6 +58,7 @@ function AnimatedArea(props: AnimatedAreaProps) {
   return (
     <AppearingMask skipAnimation={skipAnimation} id={`${ownerState.id}-area-clip`}>
       {transitionChange((style, interpolator) => (
+        // @ts-expect-error
         <AreaElementPath {...other} ownerState={ownerState} d={style.value.to(interpolator)} />
       ))}
     </AppearingMask>