[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/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;

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: 'use' in React ? true : '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/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'>,
@@ -72,7 +73,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
 
   let renderPropRef = null;
   if (typeof render !== 'function') {
-    renderPropRef = 'use' in React ? (render.props as any).ref : render.ref;
+    renderPropRef = isReactVersionAtLeast(19) ? (render.props as any).ref : render.ref;
   }
 
   const mergedRef = useForkRef(renderPropRef, forwardedRef);

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

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

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

packages/mui-base/src/useCompound/useCompound.test.tsx

@@ -256,7 +256,7 @@ describe('compound components', () => {
 
       function Child() {
         const ref = React.useRef<HTMLLIElement>(null);
-        const { id } = useCompoundItem<string, { ref: React.RefObject<HTMLLIElement> }>(
+        const { id } = useCompoundItem<string, { ref: React.RefObject<HTMLLIElement | null> }>(
           idGenerator,
           React.useMemo(() => ({ ref }), []),
         );

packages/mui-base/src/useCompound/useCompoundParent.ts

@@ -47,7 +47,10 @@ if (process.env.NODE_ENV !== 'production') {
   CompoundComponentContext.displayName = 'CompoundComponentContext';
 }
 
-export interface UseCompoundParentReturnValue<Key, Subitem extends { ref: React.RefObject<Node> }> {
+export interface UseCompoundParentReturnValue<
+  Key,
+  Subitem extends { ref: React.RefObject<Node | null> },
+> {
   /**
    * The value for the CompoundComponentContext provider.
    */
@@ -63,7 +66,7 @@ export interface UseCompoundParentReturnValue<Key, Subitem extends { ref: React.
 /**
  * Sorts the subitems by their position in the DOM.
  */
-function sortSubitems<Key, Subitem extends { ref: React.RefObject<Node> }>(
+function sortSubitems<Key, Subitem extends { ref: React.RefObject<Node | null> }>(
   subitems: Map<Key, Subitem>,
 ) {
   const subitemsArray = Array.from(subitems.keys()).map((key) => {
@@ -100,7 +103,7 @@ function sortSubitems<Key, Subitem extends { ref: React.RefObject<Node> }>(
  */
 export function useCompoundParent<
   Key,
-  Subitem extends { ref: React.RefObject<Node> },
+  Subitem extends { ref: React.RefObject<Node | null> },
 >(): UseCompoundParentReturnValue<Key, Subitem> {
   const [subitems, setSubitems] = React.useState(new Map<Key, Subitem>());
   const subitemKeys = React.useRef(new Set<Key>());

packages/mui-base/src/utils/evaluateRenderProp.ts

@@ -6,7 +6,7 @@ export function evaluateRenderProp<ElementType extends React.ElementType, OwnerS
   render: BaseUIComponentProps<ElementType, OwnerState>['render'],
   props: React.HTMLAttributes<any> & React.RefAttributes<any>,
   ownerState: OwnerState,
-): React.ReactElement {
+): React.ReactElement<any> {
   return typeof render === 'function'
     ? render(props, ownerState)
     : React.cloneElement(render, { ...mergeReactProps(render.props, props), ref: props.ref });

packages/mui-base/src/utils/reactVersion.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+let version = 17;
+
+if ('use' in React) {
+  version = 19;
+}
+
+if ('useId' in React) {
+  version = 18;
+}
+
+export const reactVersion = version;
+
+type SupportedVersions = 17 | 18 | 19;
+
+export function isReactVersion(reactVersionToCheck: SupportedVersions): boolean {
+  return reactVersion === reactVersionToCheck;
+}
+
+export function isReactVersionAtLeast(reactVersionToCheck: SupportedVersions): boolean {
+  return reactVersion >= reactVersionToCheck;
+}

packages/mui-base/src/utils/useAnimatedElement.ts

@@ -4,7 +4,7 @@ import { useTransitionStatus } from './useTransitionStatus';
 
 interface UseAnimatedElementParameters {
   open: boolean;
-  ref: React.RefObject<HTMLElement>;
+  ref: React.RefObject<HTMLElement | null>;
   enabled: boolean;
 }
 

packages/mui-base/src/utils/useAnimationsFinished.ts

@@ -6,7 +6,7 @@ import { useEventCallback } from './useEventCallback';
  * Executes a function once all animations have finished on the provided element.
  * @ignore - internal hook.
  */
-export function useAnimationsFinished(ref: React.RefObject<HTMLElement>) {
+export function useAnimationsFinished(ref: React.RefObject<HTMLElement | null>) {
   const frameRef = React.useRef(-1);
 
   const cancelFrames = useEventCallback(() => {

packages/mui-base/src/utils/useComponentRenderer.ts

@@ -79,7 +79,7 @@ export function useComponentRenderer<
 
   let resolvedRenderProp:
     | ComponentRenderFn<React.HTMLAttributes<any>, OwnerState>
-    | React.ReactElement;
+    | React.ReactElement<any>;
 
   if (typeof renderProp === 'string') {
     resolvedRenderProp = defaultRenderFunctions[renderProp];

packages/mui-base/src/utils/useRenderPropForkRef.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from './types';
 import { useForkRef } from './useForkRef';
+import { isReactVersionAtLeast } from './reactVersion';
 
 /**
  * Merges the rendering element's `ref` in addition to the other `ref`s.
@@ -11,8 +12,7 @@ export function useRenderPropForkRef<ElementType extends React.ElementType, Owne
   ...refs: Array<React.Ref<any>>
 ): React.RefCallback<any> | null {
   let childRef;
-  if ('use' in React) {
-    // React 19
+  if (isReactVersionAtLeast(19)) {
     childRef = typeof render !== 'function' ? render.props.ref : null;
   } else {
     childRef = typeof render !== 'function' ? render.ref : null;

packages/mui-base/test/conformanceTests/className.tsx

@@ -4,7 +4,7 @@ import { type BaseUiConformanceTestsOptions } from '../describeConformance';
 import { throwMissingPropError } from './utils';
 
 export function testClassName(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => BaseUiConformanceTestsOptions,
 ) {
   describe('prop: className', () => {

packages/mui-base/test/conformanceTests/propForwarding.tsx

@@ -5,7 +5,7 @@ import { throwMissingPropError } from './utils';
 import { type BaseUiConformanceTestsOptions } from '../describeConformance';
 
 export function testPropForwarding(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => BaseUiConformanceTestsOptions,
 ) {
   const { render, testRenderPropWith: Element = 'div' } = getOptions();

packages/mui-base/test/conformanceTests/refForwarding.tsx

@@ -4,7 +4,7 @@ import { type BaseUiConformanceTestsOptions } from '../describeConformance';
 import { throwMissingPropError } from './utils';
 
 async function verifyRef(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   render: BaseUiConformanceTestsOptions['render'],
   onRef: (instance: unknown, element: HTMLElement | null) => void,
 ) {