Skip to content

Commit 2da4d92

Browse files
github-actions[bot]arminmehflaviendelanglecherniavskiiLukasTy
authored
React 19 support (@arminmeh) (#15557)
Signed-off-by: Armin Mehinovic <[email protected]> Co-authored-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]> Co-authored-by: Armin Mehinovic <[email protected]>
1 parent d72dd79 commit 2da4d92

File tree

51 files changed

+337
-279
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+337
-279
lines changed

‎.circleci/config.yml

+30-35
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@ parameters:
1313
description: The name of the workflow to run
1414
type: string
1515
default: pipeline
16+
with-material-ui-6:
17+
description: Use material-ui v6 for additional checks and tests
18+
type: boolean
19+
default: false
20+
with-react-version:
21+
description: The version of react to be used for the additional tests
22+
type: string
23+
default: stable
1624
e2e-base-url:
1725
description: The base url for running end-to-end test
1826
type: string
@@ -90,11 +98,10 @@ commands:
9098
git --no-pager diff HEAD
9199
92100
- when:
93-
condition:
94-
equal: [material-ui-v6, << pipeline.parameters.workflow >>]
101+
condition: << pipeline.parameters.with-material-ui-6 >>
95102
steps:
96103
- run:
97-
name: Install @mui/material@next
104+
name: Install @mui/material v6
98105
command: pnpm use-material-ui-v6
99106

100107
jobs:
@@ -338,50 +345,38 @@ workflows:
338345
requires:
339346
- checkout
340347

341-
react-next:
348+
additional-tests:
342349
when:
343-
equal: [react-next, << pipeline.parameters.workflow >>]
344-
# triggers:
345-
# - schedule:
346-
# cron: '0 0 * * *'
347-
# filters:
348-
# branches:
349-
# only:
350-
# - master
350+
and:
351+
- equal: [additional, << pipeline.parameters.workflow >>]
352+
- or:
353+
- equal: [true, << pipeline.parameters.with-material-ui-6 >>]
354+
- not:
355+
equal: ['stable', << pipeline.parameters.with-react-version >>]
351356
jobs:
352357
- test_unit:
353358
<<: *default-context
354-
react-version: next
355-
name: test_unit-react@next
359+
name: test_unit_additional
360+
react-version: << pipeline.parameters.with-react-version >>
356361
- test_browser:
357362
<<: *default-context
358-
react-version: next
359-
name: test_browser-react@next
363+
name: test_browser_additional
364+
react-version: << pipeline.parameters.with-react-version >>
360365
- test_regressions:
361366
<<: *default-context
362-
react-version: next
363-
name: test_regressions-react@next
367+
name: test_regressions_additional
368+
react-version: << pipeline.parameters.with-react-version >>
364369
- test_e2e:
365370
<<: *default-context
366-
react-version: next
367-
name: test_e2e-react@next
371+
name: test_e2e_additional
372+
react-version: << pipeline.parameters.with-react-version >>
368373

369-
material-ui-v6:
374+
additional-checks:
370375
when:
371-
equal: [material-ui-v6, << pipeline.parameters.workflow >>]
376+
and:
377+
- equal: [additional, << pipeline.parameters.workflow >>]
378+
- equal: [true, << pipeline.parameters.with-material-ui-6 >>]
372379
jobs:
373-
- test_unit:
374-
<<: *default-context
375-
name: test_unit-material@next
376-
- test_browser:
377-
<<: *default-context
378-
name: test_browser-material@next
379-
- test_regressions:
380-
<<: *default-context
381-
name: test_regressions-material@next
382-
- test_e2e:
383-
<<: *default-context
384-
name: test_e2e-material@next
385380
- test_types:
386381
<<: *default-context
387-
name: test_types-material@next
382+
name: test_types_additional

‎docs/data/charts/getting-started/getting-started.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
4141

4242
```json
4343
"peerDependencies": {
44-
"react": "^17.0.0 || ^18.0.0",
45-
"react-dom": "^17.0.0 || ^18.0.0"
44+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
45+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
4646
},
4747
```
4848

‎docs/data/data-grid/custom-columns/cell-renderers/rating.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function EditRating(props: GridRenderEditCellParams<any, number>) {
4646
changedThroughKeyboard.current = false;
4747
};
4848

49-
const handleRef = (element: HTMLElement | undefined) => {
49+
const handleRef = (element: HTMLElement | null) => {
5050
if (element) {
5151
if (value !== 0) {
5252
element.querySelector<HTMLElement>(`input[value="${value}"]`)!.focus();

‎docs/data/data-grid/getting-started/getting-started.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
3535

3636
```json
3737
"peerDependencies": {
38-
"react": "^17.0.0 || ^18.0.0",
39-
"react-dom": "^17.0.0 || ^18.0.0"
38+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
39+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
4040
},
4141
```
4242

‎docs/data/date-pickers/getting-started/getting-started.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ yarn add @mui/material @emotion/react @emotion/styled
5858

5959
```json
6060
"peerDependencies": {
61-
"react": "^17.0.0 || ^18.0.0",
62-
"react-dom": "^17.0.0 || ^18.0.0"
61+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
62+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
6363
},
6464
```
6565

‎docs/data/tree-view/getting-started/getting-started.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
4444

4545
```json
4646
"peerDependencies": {
47-
"react": "^17.0.0 || ^18.0.0",
48-
"react-dom": "^17.0.0 || ^18.0.0"
47+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
48+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
4949
},
5050
```
5151

‎packages/x-charts-pro/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ This component has the following peer dependencies that you will need to install
1515

1616
```json
1717
"peerDependencies": {
18-
"@mui/material": "^5.15.14",
19-
"react": "^17.0.0 || ^18.0.0",
20-
"react-dom": "^17.0.0 || ^18.0.0"
18+
"@mui/material": "^5.15.14 || ^6.0.0",
19+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
20+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
2121
},
2222
```
2323

‎packages/x-charts-pro/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@
5555
"@emotion/styled": "^11.8.1",
5656
"@mui/material": "^5.15.14 || ^6.0.0",
5757
"@mui/system": "^5.15.14 || ^6.0.0",
58-
"react": "^17.0.0 || ^18.0.0",
59-
"react-dom": "^17.0.0 || ^18.0.0"
58+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
59+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
6060
},
6161
"peerDependenciesMeta": {
6262
"@emotion/react": {

‎packages/x-charts/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ This component has the following peer dependencies that you will need to install
1515

1616
```json
1717
"peerDependencies": {
18-
"@mui/material": "^5.15.14",
19-
"react": "^17.0.0 || ^18.0.0",
20-
"react-dom": "^17.0.0 || ^18.0.0"
18+
"@mui/material": "^5.15.14 || ^6.0.0",
19+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
20+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
2121
},
2222
```
2323

‎packages/x-charts/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
"@emotion/styled": "^11.8.1",
5454
"@mui/material": "^5.15.14 || ^6.0.0",
5555
"@mui/system": "^5.15.14 || ^6.0.0",
56-
"react": "^17.0.0 || ^18.0.0",
57-
"react-dom": "^17.0.0 || ^18.0.0"
56+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
57+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
5858
},
5959
"peerDependenciesMeta": {
6060
"@emotion/react": {

‎packages/x-charts/src/context/AnimationProvider/useSkipAnimation.test.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
3-
import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
3+
import { ErrorBoundary, createRenderer, screen, reactMajor } from '@mui/internal-test-utils';
44
import { useSkipAnimation } from './useSkipAnimation';
55
import { AnimationProvider } from './AnimationProvider';
66

@@ -37,17 +37,22 @@ describe('useSkipAnimation', () => {
3737

3838
const errorRef = React.createRef<any>();
3939

40+
const errorMessage1 = 'MUI X: Could not find the animation ref context.';
41+
const errorMessage2 =
42+
'It looks like you rendered your component outside of a ChartsContainer parent component.';
43+
const errorMessage3 = 'The above error occurred in the <UseSkipAnimation> component:';
44+
const expextedError =
45+
reactMajor < 19
46+
? [errorMessage1, errorMessage2, errorMessage3]
47+
: `${errorMessage1}\n${errorMessage2}`;
48+
4049
expect(() =>
4150
render(
4251
<ErrorBoundary ref={errorRef}>
4352
<UseSkipAnimation />
4453
</ErrorBoundary>,
4554
),
46-
).toErrorDev([
47-
'MUI X: Could not find the animation ref context.',
48-
'It looks like you rendered your component outside of a ChartsContainer parent component.',
49-
'The above error occurred in the <UseSkipAnimation> component:',
50-
]);
55+
).toErrorDev(expextedError);
5156

5257
expect((errorRef.current as any).errors).to.have.length(1);
5358
expect((errorRef.current as any).errors[0].toString()).to.include(

‎packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
3-
import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
3+
import { ErrorBoundary, createRenderer, screen, reactMajor } from '@mui/internal-test-utils';
44
import { useHighlighted } from './useHighlighted';
55
import { HighlightedProvider } from './HighlightedProvider';
66
import { SeriesProvider } from '../SeriesProvider';
@@ -23,17 +23,22 @@ describe('useHighlighted', () => {
2323

2424
const errorRef = React.createRef<any>();
2525

26+
const errorMessage1 = 'MUI X: Could not find the highlighted ref context.';
27+
const errorMessage2 =
28+
'It looks like you rendered your component outside of a ChartsContainer parent component.';
29+
const errorMessage3 = 'The above error occurred in the <UseHighlighted> component:';
30+
const expextedError =
31+
reactMajor < 19
32+
? [errorMessage1, errorMessage2, errorMessage3]
33+
: `${errorMessage1}\n${errorMessage2}`;
34+
2635
expect(() =>
2736
render(
2837
<ErrorBoundary ref={errorRef}>
2938
<UseHighlighted />
3039
</ErrorBoundary>,
3140
),
32-
).toErrorDev([
33-
'MUI X: Could not find the highlighted ref context.',
34-
'It looks like you rendered your component outside of a ChartsContainer parent component.',
35-
'The above error occurred in the <UseHighlighted> component:',
36-
]);
41+
).toErrorDev(expextedError);
3742

3843
expect((errorRef.current as any).errors).to.have.length(1);
3944
expect((errorRef.current as any).errors[0].toString()).to.include(

‎packages/x-charts/src/hooks/useSeries.test.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
3-
import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
3+
import { ErrorBoundary, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
44
import { useSeries } from './useSeries';
55
import { SeriesProvider } from '../context/SeriesProvider';
66
import { PluginProvider } from '../internals';
@@ -22,17 +22,22 @@ describe('useSeries', () => {
2222

2323
const errorRef = React.createRef<any>();
2424

25+
const errorMessage1 = 'MUI X: Could not find the series ref context.';
26+
const errorMessage2 =
27+
'It looks like you rendered your component outside of a ChartsContainer parent component.';
28+
const errorMessage3 = 'The above error occurred in the <UseSeries> component:';
29+
const expextedError =
30+
reactMajor < 19
31+
? [errorMessage1, errorMessage2, errorMessage3]
32+
: `${errorMessage1}\n${errorMessage2}`;
33+
2534
expect(() =>
2635
render(
2736
<ErrorBoundary ref={errorRef}>
2837
<UseSeries />
2938
</ErrorBoundary>,
3039
),
31-
).toErrorDev([
32-
'MUI X: Could not find the series ref context.',
33-
'It looks like you rendered your component outside of a ChartsContainer parent component.',
34-
'The above error occurred in the <UseSeries> component:',
35-
]);
40+
).toErrorDev(expextedError);
3641

3742
expect((errorRef.current as any).errors).to.have.length(1);
3843
expect((errorRef.current as any).errors[0].toString()).to.include(

‎packages/x-charts/src/hooks/useSvgRef.test.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
3-
import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
3+
import { ErrorBoundary, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
44
import { useSvgRef } from './useSvgRef';
55
import { DrawingProvider } from '../context/DrawingProvider';
66

@@ -21,17 +21,22 @@ describe('useSvgRef', () => {
2121

2222
const errorRef = React.createRef<any>();
2323

24+
const errorMessage1 = 'MUI X: Could not find the svg ref context.';
25+
const errorMessage2 =
26+
'It looks like you rendered your component outside of a ChartsContainer parent component.';
27+
const errorMessage3 = 'The above error occurred in the <UseSvgRef> component:';
28+
const expextedError =
29+
reactMajor < 19
30+
? [errorMessage1, errorMessage2, errorMessage3]
31+
: `${errorMessage1}\n${errorMessage2}`;
32+
2433
expect(() =>
2534
render(
2635
<ErrorBoundary ref={errorRef}>
2736
<UseSvgRef />
2837
</ErrorBoundary>,
2938
),
30-
).toErrorDev([
31-
'MUI X: Could not find the svg ref context.',
32-
'It looks like you rendered your component outside of a ChartsContainer parent component.',
33-
'The above error occurred in the <UseSvgRef> component:',
34-
]);
39+
).toErrorDev(expextedError);
3540

3641
expect((errorRef.current as any).errors).to.have.length(1);
3742
expect((errorRef.current as any).errors[0].toString()).to.include(

‎packages/x-data-grid-generator/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"@emotion/styled": "^11.8.1",
5151
"@mui/icons-material": "^5.4.1 || ^6.0.0",
5252
"@mui/material": "^5.15.14 || ^6.0.0",
53-
"react": "^17.0.0 || ^18.0.0"
53+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
5454
},
5555
"peerDependenciesMeta": {
5656
"@emotion/react": {

‎packages/x-data-grid-generator/src/renderer/renderEditRating.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function EditRating(props: GridRenderEditCellParams<any, number>) {
1818
changedThroughKeyboard.current = false;
1919
};
2020

21-
const handleRef = (element: HTMLElement | undefined) => {
21+
const handleRef = (element: HTMLElement | null) => {
2222
if (element) {
2323
if (value !== 0) {
2424
element.querySelector<HTMLElement>(`input[value="${value}"]`)!.focus();

‎packages/x-data-grid-premium/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ This component has the following peer dependencies that you will need to install
1515

1616
```json
1717
"peerDependencies": {
18-
"@mui/material": "^5.15.14",
19-
"react": "^17.0.0 || ^18.0.0",
20-
"react-dom": "^17.0.0 || ^18.0.0"
18+
"@mui/material": "^5.15.14 || ^6.0.0",
19+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
20+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
2121
},
2222
```
2323

‎packages/x-data-grid-premium/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
"@emotion/styled": "^11.8.1",
6161
"@mui/material": "^5.15.14 || ^6.0.0",
6262
"@mui/system": "^5.15.14 || ^6.0.0",
63-
"react": "^17.0.0 || ^18.0.0",
64-
"react-dom": "^17.0.0 || ^18.0.0"
63+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
64+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
6565
},
6666
"peerDependenciesMeta": {
6767
"@emotion/react": {

0 commit comments

Comments
 (0)