[core] Handle refType in the proptypes generation

docs/pages/base-ui/api/button.json

@@ -1,11 +1,6 @@
 {
   "props": {
-    "action": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
-      }
-    },
+    "action": { "type": { "name": "custom", "description": "ref" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "focusableWhenDisabled": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": {

docs/pages/base-ui/api/tab.json

@@ -1,11 +1,6 @@
 {
   "props": {
-    "action": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
-      }
-    },
+    "action": { "type": { "name": "custom", "description": "ref" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "onChange": { "type": { "name": "func" } },
     "slotProps": {

docs/pages/joy-ui/api/button.json

@@ -1,11 +1,6 @@
 {
   "props": {
-    "action": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
-      }
-    },
+    "action": { "type": { "name": "custom", "description": "ref" } },
     "color": {
       "type": {
         "name": "union",

docs/pages/joy-ui/api/icon-button.json

@@ -1,11 +1,6 @@
 {
   "props": {
-    "action": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
-      }
-    },
+    "action": { "type": { "name": "custom", "description": "ref" } },
     "color": {
       "type": {
         "name": "union",

docs/pages/joy-ui/api/list-item-button.json

@@ -1,11 +1,6 @@
 {
   "props": {
-    "action": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
-      }
-    },
+    "action": { "type": { "name": "custom", "description": "ref" } },
     "autoFocus": { "type": { "name": "bool" }, "default": "false" },
     "children": { "type": { "name": "node" } },
     "color": {

docs/pages/joy-ui/api/select.json

@@ -1,11 +1,6 @@
 {
   "props": {
-    "action": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
-      }
-    },
+    "action": { "type": { "name": "custom", "description": "ref" } },
     "autoFocus": { "type": { "name": "bool" } },
     "color": {
       "type": {

docs/pages/joy-ui/api/tab.json

@@ -1,11 +1,6 @@
 {
   "props": {
-    "action": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
-      }
-    },
+    "action": { "type": { "name": "custom", "description": "ref" } },
     "color": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/button-base.json

@@ -20,12 +20,7 @@
       "additionalInfo": { "sx": true }
     },
     "TouchRippleProps": { "type": { "name": "object" } },
-    "touchRippleRef": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { pulsate: func, start: func, stop: func } }"
-      }
-    }
+    "touchRippleRef": { "type": { "name": "custom", "description": "ref" } }
   },
   "name": "ButtonBase",
   "imports": [

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`;
     }