[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
@@ -226,6 +262,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Tests real browsers
           command: pnpm test:karma
@@ -257,6 +294,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Run e2e tests
           command: pnpm test:e2e
@@ -281,6 +319,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Run visual regression tests
           command: xvfb-run pnpm test:regressions
@@ -296,7 +335,6 @@ jobs:
           name: Run danger on PRs
           command: pnpm danger ci --fail-on-errors
 workflows:
-  version: 2
   pipeline:
     when:
       equal: [pipeline, << pipeline.parameters.workflow >>]
@@ -380,3 +418,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/charts/tooltip/ItemTooltipFixedY.js

@@ -12,7 +12,7 @@ export function ItemTooltipFixedY() {
   const svgRef = useSvgRef(); // Get the ref of the <svg/> component.
   const drawingArea = useDrawingArea(); // Get the dimensions of the chart inside the <svg/>.
 
-  if (!tooltipData || !mousePosition) {
+  if (!tooltipData || !mousePosition || !svgRef.current) {
     // No data to display
     return null;
   }

docs/data/charts/tooltip/ItemTooltipFixedY.tsx

@@ -12,7 +12,7 @@ export function ItemTooltipFixedY() {
   const svgRef = useSvgRef(); // Get the ref of the <svg/> component.
   const drawingArea = useDrawingArea(); // Get the dimensions of the chart inside the <svg/>.
 
-  if (!tooltipData || !mousePosition) {
+  if (!tooltipData || !mousePosition || !svgRef.current) {
     // No data to display
     return null;
   }

docs/data/charts/tooltip/ItemTooltipTopElement.js

@@ -29,7 +29,8 @@ export function ItemTooltipTopElement() {
   if (
     tooltipData.identifier.type !== 'bar' ||
     tooltipData.identifier.dataIndex === undefined ||
-    tooltipData.value === null
+    tooltipData.value === null ||
+    svgRef.current === null
   ) {
     // This demo is only about bar charts
     return null;

docs/data/charts/tooltip/ItemTooltipTopElement.tsx

@@ -29,7 +29,8 @@ export function ItemTooltipTopElement() {
   if (
     tooltipData.identifier.type !== 'bar' ||
     tooltipData.identifier.dataIndex === undefined ||
-    tooltipData.value === null
+    tooltipData.value === null ||
+    svgRef.current === null
   ) {
     // This demo is only about bar charts
     return null;

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<ReturnType<typeof setTimeout>>(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.13.0",
     "@mui/docs": "6.1.6",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/joy": "^5.0.0-beta.48",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.7",
-    "@mui/material-nextjs": "^5.16.6",
-    "@mui/styles": "^5.16.7",
-    "@mui/system": "^5.16.7",
-    "@mui/utils": "^5.16.6",
+    "@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.47",
     "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.53.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "react-router": "^6.27.0",
     "react-router-dom": "^6.27.0",
     "react-runner": "^1.0.5",
@@ -113,7 +113,7 @@
     "@types/moment-hijri": "^2.1.4",
     "@types/moment-jalaali": "^0.7.9",
     "@types/prop-types": "^15.7.13",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.0.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/stylis": "^4.2.6",
     "@types/webpack-bundle-analyzer": "^4.7.0",

docs/src/modules/components/PickersPlayground.tsx

@@ -217,7 +217,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(