[core] React 19 compatibility

docs/app/experiments/dialog.tsx

@@ -180,6 +180,7 @@ function ReactSpringTransition(props: { open: boolean; children?: React.ReactEle
   }, [api, open, mounted, setMounted]);
 
   return mounted ? (
+    /* @ts-ignore */
     <springAnimated.div style={springs} className={classes.springWrapper}>
       {children}
     </springAnimated.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/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

docs/package.json

@@ -39,14 +39,14 @@
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "next": "^14.2.7",
+    "next": "canary",
     "postcss": "^8.4.44",
     "postcss-import": "^16.1.0",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "rc",
+    "react-dom": "rc",
     "react-error-boundary": "^4.0.13",
-    "react-is": "^18.3.1",
+    "react-is": "rc",
     "react-router-dom": "^6.23.1",
     "react-runner": "^1.0.5",
     "react-simple-code-editor": "^0.13.1",
@@ -70,8 +70,8 @@
     "@types/hast": "^3.0.4",
     "@types/node": "^18.19.48",
     "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@types/unist": "^3.0.3",
     "chai": "^4.5.0",
     "framer-motion": "^11.2.10",

docs/src/blocks/Demo/DemoSourceCopy.tsx

@@ -44,6 +44,6 @@ export namespace DemoSourceCopy {
   export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     onCopied?: () => void;
     onError?: (error: unknown) => void;
-    render?: React.ReactElement;
+    render?: React.ReactElement<any>;
   }
 }

docs/src/blocks/GoogleAnalytics.tsx

@@ -27,12 +27,12 @@ const GoogleAnalytics = React.memo(function GoogleAnalytics(props: GoogleAnalyti
     }
   }, []);
 
-  const timeout = React.useRef<NodeJS.Timeout>();
+  const timeout = React.useRef<NodeJS.Timeout>(null);
 
   React.useEffect(() => {
     // Wait for the title to be updated.
     // React fires useEffect twice in dev mode
-    clearTimeout(timeout.current);
+    clearTimeout(timeout.current ?? undefined);
     timeout.current = setTimeout(() => {
       // Remove hash as it's never sent to the server
       // https://github.com/vercel/next.js/issues/25202

docs/src/design-system/ToggleButtonGroup.tsx

@@ -47,4 +47,4 @@ export const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup<
   );
 }) as <Option extends { value: string; label: string }>(
   props: ToggleButtonGroupProps<Option> & { ref?: React.Ref<HTMLDivElement> },
-) => JSX.Element;
+) => React.JSX.Element;

package.json

@@ -89,7 +89,7 @@
     "@types/lodash": "^4.17.7",
     "@types/mocha": "^10.0.7",
     "@types/node": "^18.19.48",
-    "@types/react": "^18.3.5",
+    "@types/react": "npm:types-react@rc",
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
@@ -185,8 +185,8 @@
     "@definitelytyped/typescript-versions": "^0.1.4",
     "@definitelytyped/utils": "^0.1.7",
     "@types/node": "^18.19.48",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "18.3.0"
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   },
   "nyc": {
     "include": [

packages/mui-base/package.json

@@ -53,27 +53,27 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "1.0.12",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "latest",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.19",
     "@types/chai-dom": "^1.11.3",
     "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@types/sinon": "^17.0.3",
     "@types/use-sync-external-store": "^0.0.6",
     "chai": "^4.5.0",
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "rc",
+    "react-dom": "rc",
     "sinon": "^17.0.1",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17 || ^18 || ^19",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx

@@ -10,7 +10,7 @@ describe('<AlertDialog.Backdrop />', () => {
     refInstanceof: window.HTMLDivElement,
     render: (node) => {
       return render(
-        <AlertDialog.Root open modal={false} animated={false}>
+        <AlertDialog.Root open animated={false}>
           {node}
         </AlertDialog.Root>,
       );

packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts

@@ -10,6 +10,7 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 import { useFieldControlValidation } from '../../Field/Control/useFieldControlValidation';
 import { useField } from '../../Field/useField';
+import { isReactVersionAtLeast } from '../../utils/reactVersion';
 
 export function useCheckboxRoot(params: UseCheckboxRootParameters): UseCheckboxRootReturnValue {
   const {
@@ -133,7 +134,7 @@ export function useCheckboxRoot(params: UseCheckboxRootParameters): UseCheckboxR
         type: 'checkbox',
         'aria-hidden': true,
         // @ts-ignore
-        inert: 'true',
+        inert: isReactVersionAtLeast(19) ? true : 'true',
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
           if (event.nativeEvent.defaultPrevented) {

packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts

@@ -53,8 +53,8 @@ export function useCollapsibleContent(
 
   const [height, setHeight] = React.useState(0);
 
-  const latestAnimationNameRef = React.useRef<string | undefined>('none');
-  const originalTransitionDurationStyleRef = React.useRef<string | undefined>();
+  const latestAnimationNameRef = React.useRef<string>('none');
+  const originalTransitionDurationStyleRef = React.useRef<string>(null);
 
   const isTransitioningRef = React.useRef(false);
 

packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx

@@ -28,7 +28,7 @@ export function useDialogPopup(parameters: UseDialogPopupParameters): UseDialogP
     onOpenChange,
   });
 
-  const popupRef = React.useRef<HTMLElement | null>(null);
+  const popupRef = React.useRef<HTMLElement>(null);
 
   const dismiss = useDismiss(context, {
     outsidePressEvent: 'mousedown',

packages/mui-base/src/Field/Validity/FieldValidity.test.tsx

@@ -23,7 +23,7 @@ describe('<Field.Validity />', () => {
     fireEvent.change(input, { target: { value: 'test' } });
     fireEvent.blur(input);
 
-    const [data] = handleValidity.args[8];
+    const [data] = handleValidity.lastCall.args;
 
     expect(data.value).to.equal('test');
     expect(data.validity.valueMissing).to.equal(false);
@@ -44,8 +44,8 @@ describe('<Field.Validity />', () => {
     fireEvent.focus(input);
     fireEvent.blur(input);
 
-    expect(handleValidity.args[6][0].error).to.equal('error');
-    expect(handleValidity.args[6][0].errors).to.deep.equal(['error']);
+    expect(handleValidity.lastCall.args[0].error).to.equal('error');
+    expect(handleValidity.lastCall.args[0].errors).to.deep.equal(['error']);
   });
 
   it('should correctly pass errors when validate function returns an array of strings', () => {
@@ -63,7 +63,7 @@ describe('<Field.Validity />', () => {
     fireEvent.focus(input);
     fireEvent.blur(input);
 
-    expect(handleValidity.args[6][0].error).to.equal('1');
-    expect(handleValidity.args[6][0].errors).to.deep.equal(['1', '2']);
+    expect(handleValidity.lastCall.args[0].error).to.equal('1');
+    expect(handleValidity.lastCall.args[0].errors).to.deep.equal(['1', '2']);
   });
 });

packages/mui-base/src/NoSsr/NoSsr.tsx

@@ -22,7 +22,7 @@ import { NoSsrProps } from './NoSsr.types';
  *
  * - [NoSsr API](https://base-ui.netlify.app/components/react-no-ssr/#api-reference-NoSsr)
  */
-function NoSsr(props: NoSsrProps): JSX.Element {
+function NoSsr(props: NoSsrProps): React.JSX.Element {
   const { children, defer = false, fallback = null } = props;
   const [mountedState, setMountedState] = React.useState(false);
 

packages/mui-base/src/NumberField/Root/useNumberFieldRoot.ts

@@ -882,7 +882,7 @@ export namespace UseNumberFieldRoot {
     isScrubbing: boolean;
     inputRef: ((instance: HTMLInputElement | null) => void) | null;
     scrubHandleRef: React.RefObject<ScrubHandle | null>;
-    scrubAreaRef: React.RefObject<HTMLSpanElement>;
-    scrubAreaCursorRef: React.RefObject<HTMLSpanElement>;
+    scrubAreaRef: React.RefObject<HTMLSpanElement | null>;
+    scrubAreaCursorRef: React.RefObject<HTMLSpanElement | null>;
   }
 }

packages/mui-base/src/NumberField/Root/useScrub.types.ts

@@ -2,7 +2,7 @@ export interface ScrubParams {
   disabled: boolean;
   readOnly: boolean;
   value: number | null;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   incrementValue: (amount: number, dir: 1 | -1, currentValue?: number | null) => void;
   getStepAmount: () => number | undefined;
 }

packages/mui-base/src/Popover/Root/PopoverRoot.types.ts

@@ -11,7 +11,7 @@ export interface PopoverRootContextValue {
   setTriggerElement: (el: Element | null) => void;
   positionerElement: HTMLElement | null;
   setPositionerElement: (el: HTMLElement | null) => void;
-  popupRef: React.RefObject<HTMLElement>;
+  popupRef: React.RefObject<HTMLElement | null>;
   delay: number;
   closeDelay: number;
   delayType: 'rest' | 'hover';

packages/mui-base/src/Popover/Root/usePopoverRoot.types.ts

@@ -73,5 +73,5 @@ export interface UsePopoverRootReturnValue {
   setTriggerElement: React.Dispatch<React.SetStateAction<Element | null>>;
   positionerElement: HTMLElement | null;
   setPositionerElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  popupRef: React.RefObject<HTMLElement>;
+  popupRef: React.RefObject<HTMLElement | null>;
 }

packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.types.ts

@@ -19,7 +19,7 @@ export interface PreviewCardRootContextValue {
   getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
   floatingRootContext: FloatingRootContext;
   transitionStatus: TransitionStatus;
-  popupRef: React.RefObject<HTMLElement>;
+  popupRef: React.RefObject<HTMLElement | null>;
 }
 
 export type PreviewCardRootOwnerState = {};

packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.types.ts

@@ -69,5 +69,5 @@ export interface UsePreviewCardRootReturnValue {
   setTriggerElement: React.Dispatch<React.SetStateAction<Element | null>>;
   positionerElement: HTMLElement | null;
   setPositionerElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  popupRef: React.RefObject<HTMLDivElement>;
+  popupRef: React.RefObject<HTMLDivElement | null>;
 }

packages/mui-base/src/Slider/Control/useSliderControl.ts

@@ -37,7 +37,7 @@ export function useSliderControl(
   const handleRootRef = useForkRef(externalRef, registerSliderControl, controlRef);
 
   // A number that uniquely identifies the current finger in the touch session.
-  const touchIdRef = React.useRef<number>();
+  const touchIdRef = React.useRef<number>(null);
 
   const moveCountRef = React.useRef(0);
 
@@ -122,7 +122,7 @@ export function useSliderControl(
       onValueCommitted(newFingerValue.newValue, nativeEvent);
     }
 
-    touchIdRef.current = undefined;
+    touchIdRef.current = null;
 
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();

packages/mui-base/src/Slider/Root/SliderRoot.types.ts

@@ -4,8 +4,8 @@ import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
 
 export interface SliderThumbMetadata {
   inputId: string;
-  ref: React.RefObject<HTMLElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
+  ref: React.RefObject<HTMLElement | null>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
 }
 
 export type SliderContextValue = Omit<

packages/mui-base/src/Slider/Root/useSliderRoot.ts

@@ -294,7 +294,7 @@ function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
 
   const isRtl = direction === 'rtl';
 
-  const previousIndexRef = React.useRef<number>();
+  const previousIndexRef = React.useRef<number>(null);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

packages/mui-base/src/Slider/Thumb/SliderThumb.tsx

@@ -8,6 +8,7 @@ import { useForkRef } from '../../utils/useForkRef';
 import { useSliderContext } from '../Root/SliderProvider';
 import { SliderThumbProps } from './SliderThumb.types';
 import { useSliderThumb } from './useSliderThumb';
+import { isReactVersionAtLeast } from '../../utils/reactVersion';
 
 function defaultRender(
   props: React.ComponentPropsWithRef<'span'>,
@@ -70,7 +71,12 @@ const SliderThumb = React.forwardRef(function SliderThumb(
     values,
   } = useSliderContext();
 
-  const mergedRef = useForkRef(typeof render === 'function' ? null : render.ref, forwardedRef);
+  let renderPropRef = null;
+  if (typeof render !== 'function') {
+    renderPropRef = isReactVersionAtLeast(19) ? (render.props as any).ref : render.ref;
+  }
+
+  const mergedRef = useForkRef(renderPropRef, forwardedRef);
 
   const { getRootProps, getThumbInputProps, disabled, index } = useSliderThumb({
     active: activeIndex,
@@ -114,13 +120,13 @@ const SliderThumb = React.forwardRef(function SliderThumb(
     return render(thumbProps, inputProps, ownerState);
   }
 
-  const { children: renderPropsChildren, ...otherRenderProps } = render.props;
+  const { children: renderPropsChildren, ...otherRenderProps } =
+    render.props as React.PropsWithChildren<unknown>;
 
   const children = thumbProps.children ?? renderPropsChildren;
 
-  return React.cloneElement(
-    render,
-    mergeReactProps(otherRenderProps, {
+  return React.cloneElement(render, {
+    ...mergeReactProps(otherRenderProps, {
       ...thumbProps,
       children: (
         <React.Fragment>
@@ -129,7 +135,9 @@ const SliderThumb = React.forwardRef(function SliderThumb(
         </React.Fragment>
       ),
     }),
-  );
+    // @ts-ignore
+    ref: thumbProps.ref,
+  });
 });
 
 SliderThumb.propTypes /* remove-proptypes */ = {

packages/mui-base/src/Tabs/Root/useTabsRoot.ts

@@ -13,7 +13,7 @@ import { useControlled } from '../../utils/useControlled';
 export interface TabMetadata {
   disabled: boolean;
   id: string | undefined;
-  ref: React.RefObject<HTMLElement>;
+  ref: React.RefObject<HTMLElement | null>;
 }
 
 type IdLookupFunction = (id: any) => string | undefined;

packages/mui-base/src/Tabs/TabsList/TabsListContext.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 export type TabsListContextValue = {
   activateOnFocus: boolean;
   getTabElement: (value: any) => HTMLElement | null;
-  tabsListRef: React.RefObject<HTMLElement>;
+  tabsListRef: React.RefObject<HTMLElement | null>;
 };
 
 export const TabsListContext = React.createContext<TabsListContextValue | undefined>(undefined);

packages/mui-base/src/Tabs/TabsList/useTabsList.ts

@@ -62,7 +62,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
     listOrientation = direction === 'rtl' ? 'horizontal-rtl' : 'horizontal-ltr';
   }
 
-  const tabsListRef = React.useRef<HTMLElement | null>(null);
+  const tabsListRef = React.useRef<HTMLElement>(null);
   const detectActivationDirection = useActivationDirectionDetector(
     value,
     orientation,
@@ -194,7 +194,7 @@ function getInset(tab: HTMLElement, tabsList: HTMLElement) {
 function useActivationDirectionDetector(
   value: any,
   orientation: TabsOrientation,
-  tabsListRef: React.RefObject<HTMLElement>,
+  tabsListRef: React.RefObject<HTMLElement | null>,
   getTabElement: (tabValue: any) => HTMLElement | null,
 ): (newValue: any) => TabActivationDirection {
   const previousTabEdge = React.useRef<number | null>(null);

packages/mui-base/src/Tooltip/Root/TooltipRoot.types.ts

@@ -10,7 +10,7 @@ export interface TooltipRootContextValue {
   setTriggerElement: (el: Element | null) => void;
   positionerElement: HTMLElement | null;
   setPositionerElement: (el: HTMLElement | null) => void;
-  popupRef: React.RefObject<HTMLElement>;
+  popupRef: React.RefObject<HTMLElement | null>;
   delay: number;
   closeDelay: number;
   delayType: 'rest' | 'hover';