[base] Improve API consistency (mui#36970)

docs/data/base/components/button/UseButton.js

@@ -7,10 +7,10 @@ import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 const CustomButton = React.forwardRef(function CustomButton(props, ref) {
-  const { children } = props;
-  const { active, disabled, focusVisible, getRootProps } = useButton({
+  const { children, disabled } = props;
+  const { active, focusVisible, getRootProps } = useButton({
     ...props,
-    ref,
+    rootRef: ref,
   });
 
   const classes = {
@@ -28,6 +28,11 @@ const CustomButton = React.forwardRef(function CustomButton(props, ref) {
 
 CustomButton.propTypes = {
   children: PropTypes.node,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
 };
 
 export default function UseButton() {

docs/data/base/components/button/UseButton.tsx

@@ -9,10 +9,10 @@ const CustomButton = React.forwardRef(function CustomButton(
   props: ButtonProps,
   ref: React.ForwardedRef<any>,
 ) {
-  const { children } = props;
-  const { active, disabled, focusVisible, getRootProps } = useButton({
+  const { children, disabled } = props;
+  const { active, focusVisible, getRootProps } = useButton({
     ...props,
-    ref,
+    rootRef: ref,
   });
 
   const classes = {

docs/data/base/components/menu/UseMenu.js

@@ -31,7 +31,7 @@ Menu.propTypes = {
 const MenuItem = React.forwardRef(function MenuItem(props, ref) {
   const { children, onClick, ...other } = props;
 
-  const { getRootProps, disabled, focusVisible } = useMenuItem({ ref });
+  const { getRootProps, disabled, focusVisible } = useMenuItem({ rootRef: ref });
 
   const classes = {
     'focus-visible': focusVisible,

docs/data/base/components/menu/UseMenu.tsx

@@ -33,7 +33,7 @@ const MenuItem = React.forwardRef(function MenuItem(
 ) {
   const { children, onClick, ...other } = props;
 
-  const { getRootProps, disabled, focusVisible } = useMenuItem({ ref });
+  const { getRootProps, disabled, focusVisible } = useMenuItem({ rootRef: ref });
 
   const classes = {
     'focus-visible': focusVisible,

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

@@ -9,7 +9,9 @@
     "onFocusVisible": {
       "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
     },
-    "ref": { "type": { "name": "React.Ref<any>", "description": "React.Ref<any>" } },
+    "rootRef": {
+      "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" }
+    },
     "tabIndex": {
       "type": {
         "name": "NonNullable<React.HTMLAttributes<any>['tabIndex']>",
@@ -31,11 +33,6 @@
       "default": "false",
       "required": true
     },
-    "disabled": {
-      "type": { "name": "boolean", "description": "boolean" },
-      "default": "false",
-      "required": true
-    },
     "focusVisible": {
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false",
@@ -48,10 +45,10 @@
       },
       "required": true
     },
-    "ref": {
+    "rootRef": {
       "type": {
-        "name": "((instance: unknown) => void) | null",
-        "description": "((instance: unknown) => void) | null"
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
       },
       "required": true
     },

docs/pages/base/api/use-input.json

@@ -64,6 +64,13 @@
       },
       "required": true
     },
+    "inputRef": {
+      "type": {
+        "name": "React.RefCallback<HTMLInputElement> | null",
+        "description": "React.RefCallback<HTMLInputElement> | null"
+      },
+      "required": true
+    },
     "required": {
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false",

docs/pages/base/api/use-menu-item.json

@@ -1,7 +1,7 @@
 {
   "parameters": {
-    "ref": {
-      "type": { "name": "React.Ref<any>", "description": "React.Ref<any>" },
+    "rootRef": {
+      "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" },
       "required": true
     },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
@@ -26,10 +26,10 @@
     },
     "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "index": { "type": { "name": "number", "description": "number" }, "required": true },
-    "ref": {
+    "rootRef": {
       "type": {
-        "name": "((instance: unknown) => void) | null",
-        "description": "((instance: unknown) => void) | null"
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
       },
       "required": true
     },

docs/pages/base/api/use-menu.json

@@ -3,7 +3,7 @@
     "defaultOpen": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "listboxId": { "type": { "name": "string", "description": "string" } },
     "listboxRef": {
-      "type": { "name": "React.Ref<any>", "description": "React.Ref<any>" }
+      "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" }
     },
     "onOpenChange": {
       "type": { "name": "(open: boolean) => void", "description": "(open: boolean) => void" }
@@ -33,6 +33,13 @@
       "type": { "name": "string | null", "description": "string | null" },
       "required": true
     },
+    "listboxRef": {
+      "type": {
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
+      },
+      "required": true
+    },
     "menuItems": {
       "type": {
         "name": "Map<string, MenuItemMetadata>",

docs/pages/base/api/use-option.json

@@ -7,11 +7,8 @@
     },
     "value": { "type": { "name": "Value", "description": "Value" }, "required": true },
     "id": { "type": { "name": "string", "description": "string" } },
-    "optionRef": {
-      "type": {
-        "name": "React.Ref<HTMLElement>",
-        "description": "React.Ref<HTMLElement>"
-      }
+    "rootRef": {
+      "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" }
     }
   },
   "returnValue": {
@@ -24,10 +21,10 @@
     },
     "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "index": { "type": { "name": "number", "description": "number" }, "required": true },
-    "ref": {
+    "rootRef": {
       "type": {
-        "name": "React.RefCallback<HTMLElement>",
-        "description": "React.RefCallback<HTMLElement>"
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
       },
       "required": true
     },

docs/pages/base/api/use-select.json

@@ -58,6 +58,13 @@
       "type": { "name": "boolean", "description": "boolean" },
       "required": true
     },
+    "buttonRef": {
+      "type": {
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
+      },
+      "required": true
+    },
     "contextValue": {
       "type": {
         "name": "SelectProviderValue<Value>",
@@ -98,6 +105,13 @@
       "type": { "name": "Value | null", "description": "Value | null" },
       "required": true
     },
+    "listboxRef": {
+      "type": {
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
+      },
+      "required": true
+    },
     "open": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "options": { "type": { "name": "Value[]", "description": "Value[]" }, "required": true },
     "value": {

docs/pages/base/api/use-slider.json

@@ -1,9 +1,5 @@
 {
   "parameters": {
-    "ref": {
-      "type": { "name": "React.Ref<any>", "description": "React.Ref<any>" },
-      "required": true
-    },
     "aria-labelledby": { "type": { "name": "string", "description": "string" } },
     "defaultValue": { "type": { "name": "number | number[]", "description": "number | number[]" } },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
@@ -35,6 +31,9 @@
       },
       "default": "'horizontal'"
     },
+    "rootRef": {
+      "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" }
+    },
     "scale": {
       "type": {
         "name": "(value: number) => number",
@@ -101,6 +100,13 @@
       "required": true
     },
     "range": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "rootRef": {
+      "type": {
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
+      },
+      "required": true
+    },
     "trackLeap": { "type": { "name": "number", "description": "number" }, "required": true },
     "trackOffset": { "type": { "name": "number", "description": "number" }, "required": true },
     "values": { "type": { "name": "number[]", "description": "number[]" }, "required": true }

docs/pages/base/api/use-snackbar.json

@@ -15,7 +15,6 @@
       }
     },
     "open": { "type": { "name": "boolean", "description": "boolean" } },
-    "ref": { "type": { "name": "React.Ref<any>", "description": "React.Ref<any>" } },
     "resumeHideDuration": { "type": { "name": "number", "description": "number" } }
   },
   "returnValue": {

docs/pages/base/api/use-switch.json

@@ -36,6 +36,13 @@
       },
       "required": true
     },
+    "inputRef": {
+      "type": {
+        "name": "React.RefCallback<HTMLInputElement> | null",
+        "description": "React.RefCallback<HTMLInputElement> | null"
+      },
+      "required": true
+    },
     "readOnly": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
   },
   "name": "useSwitch",

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

@@ -11,7 +11,9 @@
     "onClick": {
       "type": { "name": "React.MouseEventHandler", "description": "React.MouseEventHandler" }
     },
-    "ref": { "type": { "name": "React.Ref<any>", "description": "React.Ref<any>" } },
+    "rootRef": {
+      "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" }
+    },
     "value": { "type": { "name": "number | string", "description": "number | string" } }
   },
   "returnValue": {
@@ -26,6 +28,13 @@
     },
     "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "index": { "type": { "name": "number", "description": "number" }, "required": true },
+    "rootRef": {
+      "type": {
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
+      },
+      "required": true
+    },
     "selected": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "setFocusVisible": {
       "type": {

docs/pages/base/api/use-tabs-list.json

@@ -1,7 +1,7 @@
 {
   "parameters": {
-    "ref": {
-      "type": { "name": "React.Ref<unknown>", "description": "React.Ref<unknown>" },
+    "rootRef": {
+      "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" },
       "required": true
     }
   },
@@ -41,6 +41,13 @@
       "default": "'horizontal'",
       "required": true
     },
+    "rootRef": {
+      "type": {
+        "name": "React.RefCallback<Element> | null",
+        "description": "React.RefCallback<Element> | null"
+      },
+      "required": true
+    },
     "selectedValue": {
       "type": { "name": "string | number | null", "description": "string | number | null" },
       "required": true

docs/pages/experiments/base/listbox.tsx

@@ -93,7 +93,7 @@ const Item = React.forwardRef(function Item(
   ref: React.Ref<HTMLElement>,
 ) {
   const { value: item, id } = props;
-  const { getRootProps, selected, highlighted } = useListItem({ item, ref });
+  const { getRootProps, selected, highlighted } = useListItem({ item, rootRef: ref });
 
   const itemProps = getRootProps();
 

docs/translations/api-docs/use-button/use-button.json

@@ -7,10 +7,9 @@
   },
   "returnValueDescriptions": {
     "active": "If <code>true</code>, the component is active (pressed).",
-    "disabled": "If <code>true</code>, the component is disabled.",
     "focusVisible": "If <code>true</code>, the component is being focused using keyboard.",
     "getRootProps": "Resolver for the root slot's props.",
-    "ref": "A ref to the component's root DOM element.",
+    "rootRef": "A ref to the component's root DOM element.",
     "setFocusVisible": "Callback for setting the <code>focusVisible</code> param."
   }
 }

docs/translations/api-docs/use-menu-item/use-menu-item.json

@@ -7,7 +7,7 @@
     "getRootProps": "Resolver for the root slot's props.",
     "highlighted": "If <code>true</code>, the component is being highlighted.",
     "index": "0-based index of the item in the menu.",
-    "ref": "The ref to the component's root DOM element.",
+    "rootRef": "The ref to the component's root DOM element.",
     "totalItemCount": "Total number of items in the menu."
   }
 }

docs/translations/api-docs/use-menu/use-menu.json

@@ -12,6 +12,7 @@
     "dispatch": "Action dispatcher for the menu component.\nAllows to programmatically control the menu.",
     "getListboxProps": "Resolver for the listbox component's props.",
     "highlightedValue": "The highlighted option in the menu listbox.",
+    "listboxRef": "The ref to the listbox DOM node.",
     "menuItems": "Items in the menu listbox.",
     "open": "If <code>true</code>, the menu is open."
   }

docs/translations/api-docs/use-select/use-select.json

@@ -19,13 +19,15 @@
   "returnValueDescriptions": {
     "buttonActive": "If <code>true</code>, the trigger button is active (pressed).",
     "buttonFocusVisible": "If <code>true</code>, the trigger button has a visible focus.",
+    "buttonRef": "Ref to the button slot DOM node.",
     "contextValue": "A value to be passed to the <code>SelectProvider</code> component.",
     "disabled": "If <code>true</code>, the select is disabled.",
     "dispatch": "Action dispatcher for the select component.\nAllows to programmatically control the select.",
     "getButtonProps": "Resolver for the button slot's props.",
     "getListboxProps": "Resolver for the listbox slot's props.",
     "getOptionMetadata": "A function that returns the metadata of an option with a given value.",
     "highlightedOption": "The value of the highlighted option.",
+    "listboxRef": "Ref to the listbox slot DOM node.",
     "open": "If <code>true</code>, the listbox is open.",
     "options": "Values of all the registered options.",
     "value": "The value of the selected option(s)."

docs/translations/api-docs/use-slider/use-slider.json

@@ -13,7 +13,7 @@
     "onChange": "Callback function that is fired when the slider's value changed.",
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.",
     "orientation": "The component orientation.",
-    "ref": "The ref attached to the root of the Slider.",
+    "rootRef": "The ref attached to the root of the Slider.",
     "scale": "A transformation function, to change the scale of the slider.",
     "step": "The granularity with which the slider can step through values. (A \"discrete\" slider.)\nThe <code>min</code> prop serves as the origin for the valid values.\nWe recommend (max - min) to be evenly divisible by the step.\n\nWhen step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.",
     "tabIndex": "Tab index attribute of the hidden <code>input</code> element.",
@@ -31,6 +31,7 @@
     "marks": "The marks of the slider. Marks indicate predetermined values to which the user can move the slider.",
     "open": "The thumb index for the current value when in hover state.",
     "range": "If <code>true</code>, the slider is a range slider when the <code>value</code> prop passed is an array.",
+    "rootRef": "Ref to the root slot's DOM node.",
     "trackLeap": "The track leap for the current value of the slider.",
     "trackOffset": "The track offset for the current value of the slider.",
     "values": "The possible values of the slider."

docs/translations/api-docs/use-switch/use-switch.json

@@ -13,6 +13,7 @@
     "disabled": "If <code>true</code>, the component will be disabled.",
     "focusVisible": "If <code>true</code>, it indicates that the component is being focused using keyboard.",
     "getInputProps": "Resolver for the input slot's props.",
+    "inputRef": "Ref to the input slot's DOM node.",
     "readOnly": "If <code>true</code>, the component will be read only."
   }
 }