Merge branch 'v7.x' into cherry-pick-15541

mui · Nov 25, 2024 · 195d6cc · 195d6cc
2 parents ef7e0b2 + 28cb5de
commit 195d6cc
Show file tree

Hide file tree

Showing 81 changed files with 827 additions and 551 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:
@@ -338,50 +345,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 @@ 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/charts-component-api-pages.ts → docs/data/chartsApiPages.ts b/docs/data/charts-component-api-pages.ts → docs/data/chartsApiPages.ts
@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const chartsApiPages: MuiPage[] = [
   {
     pathname: '/x/api/charts/animated-area',
     title: 'AnimatedArea',
@@ -230,4 +230,4 @@ const apiPages: MuiPage[] = [
     title: 'SparkLineChart',
   },
 ];
-export default apiPages;
+export default chartsApiPages;
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/data-grid-component-api-pages.ts → docs/data/dataGridApiPages.ts b/docs/data/data-grid-component-api-pages.ts → docs/data/dataGridApiPages.ts
@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const dataGridApiPages: MuiPage[] = [
   {
     pathname: '/x/api/data-grid/data-grid',
     title: 'DataGrid',
@@ -28,4 +28,4 @@ const apiPages: MuiPage[] = [
     title: 'GridToolbarQuickFilter',
   },
 ];
-export default apiPages;
+export default dataGridApiPages;
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/.../data/date-pickers-component-api-pages.ts → docs/data/datePickersApiPages.ts b/.../data/date-pickers-component-api-pages.ts → docs/data/datePickersApiPages.ts
@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const datePickersApiPages: MuiPage[] = [
   {
     pathname: '/x/api/date-pickers/date-calendar',
     title: 'DateCalendar',
@@ -233,4 +233,4 @@ const apiPages: MuiPage[] = [
     title: 'YearCalendar',
   },
 ];
-export default apiPages;
+export default datePickersApiPages;
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -1,8 +1,8 @@
 import type { MuiPage } from 'docs/src/MuiPage';
-import chartsComponentApi from './charts-component-api-pages';
-import dataGridComponentApi from './data-grid-component-api-pages';
-import pickersComponentApi from './date-pickers-component-api-pages';
-import treeViewComponentApi from './tree-view-component-api-pages';
+import chartsComponentApi from './chartsApiPages';
+import dataGridComponentApi from './dataGridApiPages';
+import pickersComponentApi from './datePickersApiPages';
+import treeViewComponentApi from './treeViewApiPages';
 
 const pages: MuiPage[] = [
   {

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/docs/data/tree-view-component-api-pages.ts → docs/data/treeViewApiPages.ts b/docs/data/tree-view-component-api-pages.ts → docs/data/treeViewApiPages.ts
@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const treeViewApiPages: MuiPage[] = [
   {
     pathname: '/x/api/tree-view/rich-tree-view',
     title: 'RichTreeView',
@@ -27,4 +27,4 @@ const apiPages: MuiPage[] = [
     title: 'TreeView',
   },
 ];
-export default apiPages;
+export default treeViewApiPages;
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "@mui/internal-markdown": "^1.0.17",
     "@mui/internal-test-utils": "^1.0.17",
     "@mui/material": "^5.16.7",
-    "@mui/monorepo": "github:mui/material-ui#010de4505361345951824d905d1508d6f258ba67",
+    "@mui/monorepo": "github:mui/material-ui#7aa841466a01b745012e59e9d201ed50807a022e",
     "@mui/utils": "^5.16.6",
     "@next/eslint-plugin-next": "14.2.15",
     "@octokit/plugin-retry": "^7.1.2",

diff --git a/packages/x-charts-pro/README.md b/packages/x-charts-pro/README.md
@@ -15,9 +15,9 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@mui/material": "^5.15.14 || ^6.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
@@ -15,9 +15,9 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@mui/material": "^5.15.14 || ^6.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
@@ -53,8 +53,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(