[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

.eslintrc.js

@@ -275,6 +275,7 @@ module.exports = {
       files: ['docs/**/*{.ts,.tsx,.js}'],
       excludedFiles: ['*.d.ts'],
       rules: {
+        'material-ui/no-hardcoded-labels': 'off',
         'no-restricted-imports': [
           'error',
           {

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/line-demo/LineWithPrediction.js

@@ -3,7 +3,7 @@ import { LineChart, AnimatedLine } from '@mui/x-charts/LineChart';
 import { useChartId, useDrawingArea, useXScale } from '@mui/x-charts/hooks';
 
 function CustomAnimatedLine(props) {
-  const { limit, sxBefore, sxAfter, ...other } = props;
+  const { limit, ...other } = props;
   const { top, bottom, height, left, width } = useDrawingArea();
   const scale = useXScale();
   const chartId = useChartId();
@@ -40,11 +40,11 @@ function CustomAnimatedLine(props) {
           height={top + height + bottom}
         />
       </clipPath>
-      <g clipPath={`url(#${clipIdleft})`}>
-        <AnimatedLine {...other} sx={sxBefore} />
+      <g clipPath={`url(#${clipIdleft})`} className="line-before">
+        <AnimatedLine {...other} />
       </g>
-      <g clipPath={`url(#${clipIdRight})`}>
-        <AnimatedLine {...other} sx={sxAfter} />
+      <g clipPath={`url(#${clipIdRight})`} className="line-after">
+        <AnimatedLine {...other} />
       </g>
     </React.Fragment>
   );
@@ -64,7 +64,8 @@ export default function LineWithPrediction() {
       height={200}
       width={400}
       slots={{ line: CustomAnimatedLine }}
-      slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } }}
+      slotProps={{ line: { limit: 5 } }}
+      sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
     />
   );
 }

docs/data/charts/line-demo/LineWithPrediction.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { LineChart, AnimatedLine, AnimatedLineProps } from '@mui/x-charts/LineChart';
 import { useChartId, useDrawingArea, useXScale } from '@mui/x-charts/hooks';
-import { SxProps, Theme } from '@mui/system';
 
 interface CustomAnimatedLineProps extends AnimatedLineProps {
   limit?: number;
-  sxBefore?: SxProps<Theme>;
-  sxAfter?: SxProps<Theme>;
 }
 
 function CustomAnimatedLine(props: CustomAnimatedLineProps) {
-  const { limit, sxBefore, sxAfter, ...other } = props;
+  const { limit, ...other } = props;
   const { top, bottom, height, left, width } = useDrawingArea();
   const scale = useXScale();
   const chartId = useChartId();
@@ -47,11 +44,11 @@ function CustomAnimatedLine(props: CustomAnimatedLineProps) {
           height={top + height + bottom}
         />
       </clipPath>
-      <g clipPath={`url(#${clipIdleft})`}>
-        <AnimatedLine {...other} sx={sxBefore} />
+      <g clipPath={`url(#${clipIdleft})`} className="line-before">
+        <AnimatedLine {...other} />
       </g>
-      <g clipPath={`url(#${clipIdRight})`}>
-        <AnimatedLine {...other} sx={sxAfter} />
+      <g clipPath={`url(#${clipIdRight})`} className="line-after">
+        <AnimatedLine {...other} />
       </g>
     </React.Fragment>
   );
@@ -71,7 +68,8 @@ export default function LineWithPrediction() {
       height={200}
       width={400}
       slots={{ line: CustomAnimatedLine }}
-      slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } as any }}
+      slotProps={{ line: { limit: 5 } as any }}
+      sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
     />
   );
 }

docs/data/charts/line-demo/LineWithPrediction.tsx.preview

@@ -10,5 +10,6 @@
   height={200}
   width={400}
   slots={{ line: CustomAnimatedLine }}
-  slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } as any }}
+  slotProps={{ line: { limit: 5 } as any }}
+  sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
 />

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/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.