[core] Switch from buttonRef to ref usage

docs/src/pages/demos/autocomplete/IntegrationReactSelect.js

@@ -139,7 +139,7 @@ function Control(props) {
 function Option(props) {
   return (
     <MenuItem
-      buttonRef={props.innerRef}
+      ref={props.innerRef}
       selected={props.isFocused}
       component="div"
       style={{

docs/src/pages/demos/autocomplete/IntegrationReactSelect.tsx

@@ -156,7 +156,7 @@ function Control(props: ControlProps<OptionType>) {
 function Option(props: OptionProps<OptionType>) {
   return (
     <MenuItem
-      buttonRef={props.innerRef}
+      ref={props.innerRef}
       selected={props.isFocused}
       component="div"
       style={{

docs/src/pages/demos/menus/MenuListComposition.js

@@ -20,14 +20,14 @@ const useStyles = makeStyles(theme => ({
 function MenuListComposition() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
-  const anchorEl = React.useRef(null);
+  const anchorRef = React.useRef(null);
 
   function handleToggle() {
     setOpen(!open);
   }
 
   function handleClose(event) {
-    if (anchorEl.current && anchorEl.current.contains(event.target)) {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
       return;
     }
 
@@ -45,14 +45,14 @@ function MenuListComposition() {
       </Paper>
       <div>
         <Button
-          buttonRef={anchorEl}
+          ref={anchorRef}
           aria-owns={open ? 'menu-list-grow' : undefined}
           aria-haspopup="true"
           onClick={handleToggle}
         >
           Toggle Menu Grow
         </Button>
-        <Popper open={open} anchorEl={anchorEl.current} transition disablePortal>
+        <Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
           {({ TransitionProps, placement }) => (
             <Grow
               {...TransitionProps}

docs/src/pages/demos/menus/MenuListComposition.tsx

@@ -22,14 +22,14 @@ const useStyles = makeStyles((theme: Theme) =>
 function MenuListComposition() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
-  const anchorEl = React.useRef<null | HTMLElement>(null);
+  const anchorRef = React.useRef<HTMLButtonElement>(null);
 
   function handleToggle() {
     setOpen(!open);
   }
 
   function handleClose(event: React.MouseEvent<EventTarget>) {
-    if (anchorEl.current && anchorEl.current.contains(event.target as HTMLElement)) {
+    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
       return;
     }
 
@@ -47,14 +47,14 @@ function MenuListComposition() {
       </Paper>
       <div>
         <Button
-          buttonRef={anchorEl}
+          ref={anchorRef}
           aria-owns={open ? 'menu-list-grow' : undefined}
           aria-haspopup="true"
           onClick={handleToggle}
         >
           Toggle Menu Grow
         </Button>
-        <Popper open={open} anchorEl={anchorEl.current} transition disablePortal>
+        <Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
           {({ TransitionProps, placement }) => (
             <Grow
               {...TransitionProps}

docs/src/pages/utils/popover/AnchorPlayground.js

@@ -65,6 +65,8 @@ const inlineStyles = {
 };
 
 class AnchorPlayground extends React.Component {
+  anchorRef = React.createRef();
+
   state = {
     open: false,
     anchorOriginVertical: 'top',
@@ -144,13 +146,7 @@ class AnchorPlayground extends React.Component {
       <div>
         <Grid container justify="center">
           <Grid item className={classes.buttonWrapper}>
-            <Button
-              buttonRef={node => {
-                this.anchorEl = node;
-              }}
-              variant="contained"
-              onClick={this.handleClickButton}
-            >
+            <Button ref={this.anchorRef} variant="contained" onClick={this.handleClickButton}>
               Open Popover
             </Button>
             {anchorReference === 'anchorEl' && (
@@ -166,7 +162,7 @@ class AnchorPlayground extends React.Component {
         </Grid>
         <Popover
           open={open}
-          anchorEl={this.anchorEl}
+          anchorEl={this.anchorRef.current}
           anchorReference={anchorReference}
           anchorPosition={{ top: positionTop, left: positionLeft }}
           onClose={this.handleClose}

docs/src/pages/utils/popper/ScrollPlayground.js

@@ -104,6 +104,8 @@ const styles = theme => ({
 });
 
 class ScrollPlayground extends React.Component {
+  anchorRef = React.createRef();
+
   state = {
     arrow: false,
     arrowRef: null,
@@ -182,9 +184,7 @@ class ScrollPlayground extends React.Component {
             <Grid className={classes.scroll} container alignItems="center" justify="center">
               <div>
                 <Button
-                  buttonRef={node => {
-                    this.anchorEl = node;
-                  }}
+                  ref={this.anchorRef}
                   variant="contained"
                   onClick={this.handleClickButton}
                   aria-describedby={id}
@@ -198,7 +198,7 @@ class ScrollPlayground extends React.Component {
                 <Popper
                   id={id}
                   open={open}
-                  anchorEl={this.anchorEl}
+                  anchorEl={this.anchorRef.current}
                   placement={placement}
                   disablePortal={disablePortal}
                   className={classes.popper}

packages/material-ui-lab/src/SpeedDial/SpeedDial.js

@@ -155,7 +155,7 @@ class SpeedDial extends React.Component {
   render() {
     const {
       ariaLabel,
-      ButtonProps: { buttonRef: origDialButtonRef, ...ButtonProps } = {},
+      ButtonProps: { ref: origDialButtonRef, ...ButtonProps } = {},
       children: childrenProp,
       classes,
       className: classNameProp,
@@ -202,10 +202,10 @@ class SpeedDial extends React.Component {
       const delay = 30 * (open ? validChildCount : totalValidChildren - validChildCount);
       validChildCount += 1;
 
-      const { ButtonProps: { buttonRef: origButtonRef, ...ChildButtonProps } = {} } = child.props;
+      const { ButtonProps: { ref: origButtonRef, ...ChildButtonProps } = {} } = child.props;
       const NewChildButtonProps = {
         ...ChildButtonProps,
-        buttonRef: this.createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef),
+        ref: this.createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef),
       };
 
       return React.cloneElement(child, {
@@ -259,7 +259,7 @@ class SpeedDial extends React.Component {
             className={classes.fab}
             {...clickProp}
             {...ButtonProps}
-            buttonRef={ref => {
+            ref={ref => {
               this.actions[0] = ref;
               setRef(origDialButtonRef, ref);
             }}

packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js

@@ -234,7 +234,7 @@ describe('<SpeedDial />', () => {
         <SpeedDial
           {...defaultProps}
           ButtonProps={{
-            buttonRef: ref => {
+            ref: ref => {
               dialButtonRef = ref;
             },
           }}
@@ -246,7 +246,7 @@ describe('<SpeedDial />', () => {
             <SpeedDialAction
               key={i}
               ButtonProps={{
-                buttonRef: ref => {
+                ref: ref => {
                   actionRefs[i] = ref;
                 },
               }}

packages/material-ui/src/ButtonBase/ButtonBase.d.ts

@@ -10,7 +10,10 @@ import {
 export interface ButtonBaseTypeMap {
   props: {
     action?: (actions: ButtonBaseActions) => void;
-    buttonRef?: React.Ref<any> | React.RefObject<any>;
+    /**
+     * Prefer `ref` instead.
+     */
+    buttonRef?: React.Ref<unknown>;
     centerRipple?: boolean;
     disabled?: boolean;
     disableRipple?: boolean;

test/regressions/tests/Menu/LongMenu.js

@@ -34,12 +34,14 @@ const options = [
 const ITEM_HEIGHT = 48;
 
 class LongMenu extends React.Component {
+  buttonRef = React.createRef();
+
   state = {
     anchorEl: null,
   };
 
   componentDidMount() {
-    this.setState({ anchorEl: this.buttonRef });
+    this.setState({ anchorEl: this.buttonRef.current });
   }
 
   render() {
@@ -50,9 +52,7 @@ class LongMenu extends React.Component {
     return (
       <div className={classes.root}>
         <IconButton
-          buttonRef={ref => {
-            this.buttonRef = ref;
-          }}
+          ref={this.buttonRef}
           aria-label="More"
           aria-owns={open ? 'long-menu' : undefined}
           aria-haspopup="true"