[core] Handle refType in the proptypes generation

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

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { refType } from '@mui/utils';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { unstable_composeClasses as composeClasses } from '../composeClasses';
@@ -97,14 +98,7 @@ Button.propTypes /* remove-proptypes */ = {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
    */
-  action: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        focusVisible: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  action: refType,
   /**
    * @ignore
    */

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

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { refType } from '@mui/utils';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { isHostComponent } from '../utils/isHostComponent';
@@ -244,12 +245,7 @@ Input.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.object,
-    }),
-  ]),
+  inputRef: refType,
   /**
    * Maximum number of rows to display when multiline option is set to true.
    */

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

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '../composeClasses';
 import { getTabUtilityClass } from './tabClasses';
 import { TabProps, TabTypeMap, TabRootSlotProps, TabOwnerState } from './Tab.types';
@@ -87,14 +87,7 @@ Tab.propTypes /* remove-proptypes */ = {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
    */
-  action: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        focusVisible: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  action: refType,
   /**
    * @ignore
    */

packages/mui-joy/src/Button/Button.tsx

@@ -4,7 +4,11 @@ import PropTypes from 'prop-types';
 import { useButton } from '@mui/base/useButton';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { Interpolation } from '@mui/system';
-import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
+import {
+  unstable_capitalize as capitalize,
+  unstable_useForkRef as useForkRef,
+  refType,
+} from '@mui/utils';
 import { styled, Theme, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
@@ -325,14 +329,7 @@ Button.propTypes /* remove-proptypes */ = {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
    */
-  action: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        focusVisible: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  action: refType,
   /**
    * @ignore
    */

packages/mui-joy/src/IconButton/IconButton.tsx

@@ -1,7 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
+import {
+  unstable_capitalize as capitalize,
+  unstable_useForkRef as useForkRef,
+  refType,
+} from '@mui/utils';
 import { useButton } from '@mui/base/useButton';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
@@ -201,14 +205,7 @@ IconButton.propTypes /* remove-proptypes */ = {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
    */
-  action: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        focusVisible: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  action: refType,
   /**
    * @ignore
    */

packages/mui-joy/src/ListItemButton/ListItemButton.tsx

@@ -2,7 +2,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
+import {
+  unstable_capitalize as capitalize,
+  unstable_useForkRef as useForkRef,
+  refType,
+} from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useButton } from '@mui/base/useButton';
 import { styled, useThemeProps } from '../styles';
@@ -213,14 +217,7 @@ ListItemButton.propTypes /* remove-proptypes */ = {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
    */
-  action: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        focusVisible: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  action: refType,
   /**
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.

packages/mui-joy/src/Select/Select.tsx

@@ -3,7 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { OverrideProps, DefaultComponentProps } from '@mui/types';
-import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
+import {
+  unstable_capitalize as capitalize,
+  unstable_useForkRef as useForkRef,
+  refType,
+} from '@mui/utils';
 import { Popper, PopperProps } from '@mui/base/Popper';
 import { useSelect, SelectProvider } from '@mui/base/useSelect';
 import { SelectOption } from '@mui/base/useOption';
@@ -625,14 +629,7 @@ Select.propTypes /* remove-proptypes */ = {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
    */
-  action: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        focusVisible: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  action: refType,
   /**
    * If `true`, the select element is focused during the first mount
    * @default false

packages/mui-joy/src/Tab/Tab.tsx

@@ -2,7 +2,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
-import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
+import {
+  unstable_capitalize as capitalize,
+  unstable_useForkRef as useForkRef,
+  refType,
+} from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useTab } from '@mui/base/useTab';
 import { StyledListItemButton } from '../ListItemButton/ListItemButton';
@@ -215,14 +219,7 @@ Tab.propTypes /* remove-proptypes */ = {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
    */
-  action: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        focusVisible: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  action: refType,
   /**
    * @ignore
    */

packages/mui-material-next/src/ButtonBase/ButtonBase.tsx

@@ -299,15 +299,7 @@ ButtonBase.propTypes /* remove-proptypes */ = {
   /**
    * A ref that points to the `TouchRipple` element.
    */
-  touchRippleRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        start: PropTypes.func.isRequired,
-        stop: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  touchRippleRef: refType,
   /**
    * Type attribute applied to the root component.
    * @default 'button'

packages/mui-material/src/ButtonBase/ButtonBase.js

@@ -521,16 +521,7 @@ ButtonBase.propTypes /* remove-proptypes */ = {
   /**
    * A ref that points to the `TouchRipple` element.
    */
-  touchRippleRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        pulsate: PropTypes.func.isRequired,
-        start: PropTypes.func.isRequired,
-        stop: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
+  touchRippleRef: refType,
   /**
    * @ignore
    */

packages/typescript-to-proptypes/src/createType.ts

@@ -15,6 +15,7 @@ import {
   StringType,
   ObjectType,
   NumericType,
+  ReactRefType,
 } from './models';
 
 export function createAnyType(init: { jsDoc: string | undefined }): AnyType {
@@ -64,6 +65,13 @@ export function createElementType(init: {
   };
 }
 
+export function createReactRefType(init: { jsDoc: string | undefined }): ReactRefType {
+  return {
+    type: 'ReactRefNode',
+    jsDoc: init.jsDoc,
+  };
+}
+
 export function createFunctionType(init: { jsDoc: string | undefined }): FunctionType {
   return {
     type: 'FunctionNode',

packages/typescript-to-proptypes/src/generatePropTypes.ts

@@ -155,6 +155,10 @@ export function generatePropTypes(
       return `${importedName}.bool`;
     }
 
+    if (propType.type === 'ReactRefNode') {
+      return 'refType';
+    }
+
     if (propType.type === 'NumericNode') {
       return `${importedName}.number`;
     }

packages/typescript-to-proptypes/src/getPropTypesFromFile.ts

@@ -19,6 +19,7 @@ import {
   createNumericType,
   createObjectType,
   createStringType,
+  createReactRefType,
 } from './createType';
 import { PropTypeDefinition, PropTypesComponent, PropType } from './models';
 
@@ -291,6 +292,23 @@ function checkSymbol({
     ts.isTypeReferenceNode(declaration.type)
   ) {
     const name = declaration.type.typeName.getText();
+
+    if (name === 'React.Ref') {
+      return {
+        $$id: project.createPropTypeId(symbol),
+        name: symbol.getName(),
+        jsDoc,
+        filenames: symbolFilenames,
+        propType: createUnionType({
+          jsDoc,
+          types: [
+            createUndefinedType({ jsDoc: undefined }),
+            createReactRefType({ jsDoc: undefined }),
+          ],
+        }),
+      };
+    }
+
     if (
       name === 'React.ElementType' ||
       name === 'React.JSXElementConstructor' ||