React 19 support (#15342)

Signed-off-by: Armin Mehinovic <[email protected]> Co-authored-by: flavien <[email protected]> Co-authored-by: Andrew Cherniavskii <[email protected]> Co-authored-by: Lukas Tyla <[email protected]>
mui · Nov 22, 2024 · cac5df0 · cac5df0
1 parent 53d9437
commit cac5df0
Show file tree

Hide file tree

Showing 52 changed files with 315 additions and 267 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -13,6 +13,14 @@ parameters:
     description: The name of the workflow to run
     type: string
     default: pipeline
+  with-material-ui-6:
+    description: Use material-ui v6 for additional checks and tests
+    type: boolean
+    default: false
+  with-react-version:
+    description: The version of react to be used for the additional tests
+    type: string
+    default: stable
   e2e-base-url:
     description: The base url for running end-to-end test
     type: string
@@ -90,11 +98,10 @@ commands:
             git --no-pager diff HEAD
 
       - when:
-          condition:
-            equal: [material-ui-v6, << pipeline.parameters.workflow >>]
+          condition: << pipeline.parameters.with-material-ui-6 >>
           steps:
             - run:
-                name: Install @mui/material@next
+                name: Install @mui/material v6
                 command: pnpm use-material-ui-v6
 
 jobs:
@@ -349,50 +356,38 @@ workflows:
           requires:
             - checkout
 
-  react-next:
+  additional-tests:
     when:
-      equal: [react-next, << pipeline.parameters.workflow >>]
-    # triggers:
-    #   - schedule:
-    #       cron: '0 0 * * *'
-    #       filters:
-    #         branches:
-    #           only:
-    #             - master
+      and:
+        - equal: [additional, << pipeline.parameters.workflow >>]
+        - or:
+            - equal: [true, << pipeline.parameters.with-material-ui-6 >>]
+            - not:
+                equal: ['stable', << pipeline.parameters.with-react-version >>]
     jobs:
       - test_unit:
           <<: *default-context
-          react-version: next
-          name: test_unit-react@next
+          name: test_unit_additional
+          react-version: << pipeline.parameters.with-react-version >>
       - test_browser:
           <<: *default-context
-          react-version: next
-          name: test_browser-react@next
+          name: test_browser_additional
+          react-version: << pipeline.parameters.with-react-version >>
       - test_regressions:
           <<: *default-context
-          react-version: next
-          name: test_regressions-react@next
+          name: test_regressions_additional
+          react-version: << pipeline.parameters.with-react-version >>
       - test_e2e:
           <<: *default-context
-          react-version: next
-          name: test_e2e-react@next
+          name: test_e2e_additional
+          react-version: << pipeline.parameters.with-react-version >>
 
-  material-ui-v6:
+  additional-checks:
     when:
-      equal: [material-ui-v6, << pipeline.parameters.workflow >>]
+      and:
+        - equal: [additional, << pipeline.parameters.workflow >>]
+        - equal: [true, << pipeline.parameters.with-material-ui-6 >>]
     jobs:
-      - test_unit:
-          <<: *default-context
-          name: test_unit-material@next
-      - test_browser:
-          <<: *default-context
-          name: test_browser-material@next
-      - test_regressions:
-          <<: *default-context
-          name: test_regressions-material@next
-      - test_e2e:
-          <<: *default-context
-          name: test_e2e-material@next
       - test_types:
           <<: *default-context
-          name: test_types-material@next
+          name: test_types_additional
diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md
@@ -41,8 +41,8 @@ yarn add @mui/material @emotion/react @emotion/styled
 
 ```json
 "peerDependencies": {
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/docs/data/data-grid/custom-columns/cell-renderers/rating.tsx b/docs/data/data-grid/custom-columns/cell-renderers/rating.tsx
@@ -46,7 +46,7 @@ function EditRating(props: GridRenderEditCellParams<any, number>) {
     changedThroughKeyboard.current = false;
   };
 
-  const handleRef = (element: HTMLElement | undefined) => {
+  const handleRef = (element: HTMLElement | null) => {
     if (element) {
       if (value !== 0) {
         element.querySelector<HTMLElement>(`input[value="${value}"]`)!.focus();

diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md
@@ -35,8 +35,8 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 
 ```json
 "peerDependencies": {
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
@@ -58,8 +58,8 @@ yarn add @mui/material @emotion/react @emotion/styled
 
 ```json
 "peerDependencies": {
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
@@ -44,8 +44,8 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 
 ```json
 "peerDependencies": {
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/packages/x-charts-pro/README.md b/packages/x-charts-pro/README.md
@@ -16,8 +16,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
@@ -55,8 +55,8 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

diff --git a/packages/x-charts/README.md b/packages/x-charts/README.md
@@ -16,8 +16,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
@@ -55,8 +55,8 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

diff --git a/packages/x-charts/src/context/AnimationProvider/useSkipAnimation.test.tsx b/packages/x-charts/src/context/AnimationProvider/useSkipAnimation.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen, reactMajor } from '@mui/internal-test-utils';
 import { useSkipAnimation } from './useSkipAnimation';
 import { AnimationProvider } from './AnimationProvider';
 
@@ -37,17 +37,22 @@ describe('useSkipAnimation', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the animation ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseSkipAnimation> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseSkipAnimation />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the animation ref context.',
-      'It looks like you rendered your component outside of a ChartsContainer parent component.',
-      'The above error occurred in the <UseSkipAnimation> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen, reactMajor } from '@mui/internal-test-utils';
 import { useHighlighted } from './useHighlighted';
 import { HighlightedProvider } from './HighlightedProvider';
 import { SeriesProvider } from '../SeriesProvider';
@@ -23,17 +23,22 @@ describe('useHighlighted', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the highlighted ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseHighlighted> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseHighlighted />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the highlighted ref context.',
-      'It looks like you rendered your component outside of a ChartsContainer parent component.',
-      'The above error occurred in the <UseHighlighted> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-charts/src/hooks/useSeries.test.tsx b/packages/x-charts/src/hooks/useSeries.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
 import { useSeries } from './useSeries';
 import { SeriesProvider } from '../context/SeriesProvider';
 import { PluginProvider } from '../internals';
@@ -22,17 +22,22 @@ describe('useSeries', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the series ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseSeries> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseSeries />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the series ref context.',
-      'It looks like you rendered your component outside of a ChartsContainer parent component.',
-      'The above error occurred in the <UseSeries> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-charts/src/hooks/useSvgRef.test.tsx b/packages/x-charts/src/hooks/useSvgRef.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
 import { useSvgRef } from './useSvgRef';
 import { SvgRefProvider, useSurfaceRef } from '../context/SvgRefProvider';
 
@@ -30,17 +30,22 @@ describe('useSvgRef', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the svg ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseSvgRef> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseSvgRef />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the svg ref context.',
-      'It looks like you rendered your component outside of a ChartsContainer parent component.',
-      'The above error occurred in the <UseSvgRef> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json
@@ -50,7 +50,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.4.1 || ^6.0.0",
     "@mui/material": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

diff --git a/packages/x-data-grid-generator/src/renderer/renderEditRating.tsx b/packages/x-data-grid-generator/src/renderer/renderEditRating.tsx
@@ -18,7 +18,7 @@ function EditRating(props: GridRenderEditCellParams<any, number>) {
     changedThroughKeyboard.current = false;
   };
 
-  const handleRef = (element: HTMLElement | undefined) => {
+  const handleRef = (element: HTMLElement | null) => {
     if (element) {
       if (value !== 0) {
         element.querySelector<HTMLElement>(`input[value="${value}"]`)!.focus();

diff --git a/packages/x-data-grid-premium/README.md b/packages/x-data-grid-premium/README.md
@@ -16,8 +16,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
@@ -60,8 +60,8 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {