[core] React 19 compatibility

docs/app/experiments/dialog.tsx

@@ -150,7 +150,7 @@ function ReactSpringDialogDemo({ animated, keepMounted, modal, dismissible }: De
   );
 }
 
-function ReactSpringTransition(props: { open: boolean; children?: React.ReactElement }) {
+function ReactSpringTransition(props: { open: boolean; children?: React.ReactElement<unknown> }) {
   const { open, children } = props;
 
   const api = useSpringRef();
@@ -179,6 +179,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/data/components/tooltip/UnstyledTooltipFollowCursor.js

@@ -6,7 +6,7 @@ import { styled } from '@mui/system';
 export default function UnstyledTooltipFollowCursor() {
   return (
     <div style={{ display: 'flex', gap: 12 }}>
-      <Tooltip.Root followCursorAxis="both">
+      <Tooltip.Root trackCursorAxis="both">
         <AnchorButton>Anchor</AnchorButton>
         <Tooltip.Positioner sideOffset={5}>
           <TooltipPopup>Tooltip</TooltipPopup>

docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx

@@ -6,7 +6,7 @@ import { styled } from '@mui/system';
 export default function UnstyledTooltipFollowCursor() {
   return (
     <div style={{ display: 'flex', gap: 12 }}>
-      <Tooltip.Root followCursorAxis="both">
+      <Tooltip.Root trackCursorAxis="both">
         <AnchorButton>Anchor</AnchorButton>
         <Tooltip.Positioner sideOffset={5}>
           <TooltipPopup>Tooltip</TooltipPopup>

docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx.preview

@@ -1,4 +1,4 @@
-<Tooltip.Root followCursorAxis="both">
+<Tooltip.Root trackCursorAxis="both">
   <AnchorButton>Anchor</AnchorButton>
   <Tooltip.Positioner sideOffset={5}>
     <TooltipPopup>Tooltip</TooltipPopup>

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/next.config.mjs

@@ -63,6 +63,7 @@ const nextConfig = {
     : {}),
   experimental: {
     esmExternals: true,
+    workerThreads: false,
   },
 };
 

docs/package.json

@@ -39,14 +39,14 @@
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "next": "^14.2.13",
+    "next": "canary",
     "postcss": "^8.4.47",
     "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.54",
     "@types/prop-types": "^15.7.13",
-    "@types/react": "^18.3.10",
-    "@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.9.0",

docs/src/blocks/Demo/DemoSourceCopy.tsx

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

docs/src/blocks/GoogleAnalytics.tsx

@@ -26,12 +26,12 @@ const GoogleAnalytics = React.memo(function GoogleAnalytics(props: GoogleAnalyti
     }
   }, []);
 
-  const timeout = React.useRef<NodeJS.Timeout>();
+  const timeout = React.useRef<ReturnType<typeof setTimeout> | null>(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;

docs/src/design-system/Tooltip.tsx

@@ -26,7 +26,7 @@ export function Tooltip(props: Tooltip.Props) {
 export namespace Tooltip {
   export interface Props {
     label: string;
-    children: React.ReactElement;
+    children: React.ReactElement<unknown>;
     side?: 'top' | 'right' | 'bottom' | 'left';
   }
 }

package.json

@@ -89,7 +89,7 @@
     "@types/lodash": "^4.17.9",
     "@types/mocha": "^10.0.8",
     "@types/node": "^18.19.54",
-    "@types/react": "^18.3.10",
+    "@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.54",
-    "@types/react": "^18.3.10",
-    "@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.14",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "latest",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.20",
     "@types/chai-dom": "^1.11.3",
     "@types/prop-types": "^15.7.13",
-    "@types/react": "^18.3.10",
-    "@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 { getInertValue } from '../../utils/getInertValue';
 
 export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckboxRoot.ReturnValue {
   const {
@@ -126,7 +127,7 @@ export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckbox
         type: 'checkbox',
         'aria-hidden': true,
         // @ts-ignore
-        inert: 'true',
+        inert: getInertValue(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>(null);
 
   const isTransitioningRef = React.useRef(false);
 

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

@@ -29,7 +29,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/Menu/Positioner/useMenuPositioner.ts

@@ -11,6 +11,7 @@ import type {
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnchorPositioning } from '../../utils/useAnchorPositioning';
 import type { GenericHTMLProps } from '../../utils/types';
+import { getInertValue } from '../../utils/getInertValue';
 
 export function useMenuPositioner(
   params: useMenuPositioner.Parameters,
@@ -43,7 +44,7 @@ export function useMenuPositioner(
           zIndex: 2147483647, // max z-index
         },
         'aria-hidden': !open || undefined,
-        inert: !open ? '' : undefined,
+        inert: getInertValue(!open),
       });
     },
     [positionerStyles, open, keepMounted, hidden],

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

@@ -883,7 +883,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/Positioner/usePopoverPositioner.tsx

@@ -9,6 +9,7 @@ import type {
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnchorPositioning } from '../../utils/useAnchorPositioning';
 import type { GenericHTMLProps } from '../../utils/types';
+import { getInertValue } from '../../utils/getInertValue';
 
 export function usePopoverPositioner(
   params: usePopoverPositioner.Parameters,
@@ -38,7 +39,7 @@ export function usePopoverPositioner(
         return mergeReactProps<'div'>(externalProps, {
           role: 'presentation',
           // @ts-ignore
-          inert: open ? undefined : 'true',
+          inert: getInertValue(open),
           style: {
             ...positionerStyles,
             ...hiddenStyles,

packages/mui-base/src/Popover/Root/PopoverRootContext.ts

@@ -12,7 +12,7 @@ export interface PopoverRootContext {
   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.ts

@@ -230,6 +230,6 @@ export namespace usePopoverRoot {
     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/PreviewCardContext.ts

@@ -20,7 +20,7 @@ export interface PreviewCardRootContext {
   getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
   floatingRootContext: FloatingRootContext;
   transitionStatus: TransitionStatus;
-  popupRef: React.RefObject<HTMLElement>;
+  popupRef: React.RefObject<HTMLElement | null>;
 }
 
 export const PreviewCardRootContext = React.createContext<PreviewCardRootContext | null>(null);

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

@@ -221,6 +221,6 @@ export namespace usePreviewCardRoot {
     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

@@ -38,7 +38,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>(null);
 
   const moveCountRef = React.useRef(0);
 
@@ -123,7 +123,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>(null);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';