React 19 support (mui#15342)

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: flavien <flaviendelangle@gmail.com>
Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>

Author: 4 people

.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

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"
 },
 ```
 

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();

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"
 },
 ```
 

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"
 },
 ```
 

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"
 },
 ```
 

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"
 },
 ```
 

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": {

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"
 },
 ```
 

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": {