[core] Improve React 19 support

.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
@@ -237,6 +273,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Tests real browsers
           command: pnpm test:karma
@@ -268,6 +305,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Run e2e tests
           command: pnpm test:e2e
@@ -292,6 +330,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Install ffmpeg
           command: apt update && apt upgrade -y && apt install ffmpeg -y
@@ -310,7 +349,6 @@ jobs:
           name: Run danger on PRs
           command: pnpm danger ci --fail-on-errors
 workflows:
-  version: 2
   pipeline:
     when:
       equal: [pipeline, << pipeline.parameters.workflow >>]
@@ -394,3 +432,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

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

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

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<any>(undefined);
   const [filterValueState, setFilterValueState] = React.useState<[string, string]>(
     item.value ?? '',
   );

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

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(() => {

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(() => {

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(() => {

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(() => {

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>

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>

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>

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>

docs/package.json

@@ -28,14 +28,14 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.0",
     "@mui/docs": "6.2.1",
-    "@mui/icons-material": "^5.16.11",
-    "@mui/joy": "^5.0.0-beta.48",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.11",
-    "@mui/material-nextjs": "^5.16.8",
-    "@mui/styles": "^5.16.11",
-    "@mui/system": "^5.16.8",
-    "@mui/utils": "^5.16.8",
+    "@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.49",
     "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.54.2",
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "react-router": "^6.28.1",
     "react-router-dom": "^6.28.1",
     "react-runner": "^1.0.5",
@@ -114,7 +114,7 @@
     "@types/moment-hijri": "^2.1.4",
     "@types/moment-jalaali": "^0.7.9",
     "@types/prop-types": "^15.7.14",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.0.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/stylis": "^4.2.7",
     "@types/webpack-bundle-analyzer": "^4.7.0",

docs/src/modules/components/PickersPlayground.tsx

@@ -220,7 +220,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>
   );

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(

package.json

@@ -90,13 +90,13 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^5.16.11",
+    "@mui/icons-material": "^5.16.13",
     "@mui/internal-babel-plugin-resolve-imports": "1.0.19",
     "@mui/internal-markdown": "^1.0.22",
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/monorepo": "github:mui/material-ui#0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60",
-    "@mui/utils": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/monorepo": "github:mui/material-ui#356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c",
+    "@mui/utils": "^5.16.13",
     "@next/eslint-plugin-next": "15.1.2",
     "@octokit/plugin-retry": "^7.1.2",
     "@octokit/rest": "^21.0.2",
@@ -110,8 +110,8 @@
     "@types/lodash": "^4.17.13",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.17.10",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/requestidlecallback": "^0.3.7",
     "@types/sinon": "^17.0.3",
     "@types/yargs": "^17.0.33",
@@ -178,8 +178,8 @@
     "prettier": "^3.4.2",
     "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.4",
@@ -197,7 +197,7 @@
     "yargs": "^17.7.2"
   },
   "resolutions": {
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "@types/node": "^20.17.10"
   },
   "packageManager": "[email protected]",

packages/x-charts-pro/package.json

@@ -67,8 +67,8 @@
     }
   },
   "devDependencies": {
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@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.14",

packages/x-charts-pro/tsconfig.json

@@ -8,7 +8,8 @@
       "mocha",
       "node"
     ],
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "skipLibCheck": true
   },
   "include": ["src/**/*", "../../test/utils/addChaiAssertions.ts"]
 }