[Menu] Remove transition onX props

docs/pages/api-docs/menu.md

@@ -35,15 +35,10 @@ The `MuiMenu` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">disableAutoFocusItem</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | When opening the menu will not focus the active item but the `[role="menu"]` unless `autoFocus` is also set to `false`. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications. |
 | <span class="prop-name">MenuListProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`MenuList`](/api/menu-list/) element. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`. |
-| <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> |  | Callback fired before the Menu enters. |
-| <span class="prop-name">onEntered</span> | <span class="prop-type">func</span> |  | Callback fired when the Menu has entered. |
-| <span class="prop-name">onEntering</span> | <span class="prop-type">func</span> |  | Callback fired when the Menu is entering. |
-| <span class="prop-name">onExit</span> | <span class="prop-type">func</span> |  | Callback fired before the Menu exits. |
-| <span class="prop-name">onExited</span> | <span class="prop-type">func</span> |  | Callback fired when the Menu has exited. |
-| <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> |  | Callback fired when the Menu is exiting. |
 | <span class="prop-name required">open<abbr title="required">*</abbr></span> | <span class="prop-type">bool</span> |  | If `true`, the menu is visible. |
 | <span class="prop-name">PopoverClasses</span> | <span class="prop-type">object</span> |  | `classes` prop applied to the [`Popover`](/api/popover/) element. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">'auto'</span> | The length of the transition in `ms`, or 'auto' |
+| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the transition element. By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'menu'<br>&#124;&nbsp;'selectedMenu'</span> | <span class="prop-default">'selectedMenu'</span> | The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element. |
 
 The `ref` is forwarded to the root element.

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -253,6 +253,29 @@ This change affects almost all components where you're using the `component` pro
   +<Grid justifyContent="center">
   ```
 
+### Menu
+
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+  ```diff
+  <Menu
+  -  onEnter={onEnter}
+  -  onEntered={onEntered},
+  -  onEntering={onEntered},
+  -  onExit={onEntered},
+  -  onExited={onEntered},
+  -  onExiting={onEntered}
+  +  TransitionProps={{
+  +    onEnter,
+  +    onEntered,
+  +    onEntering,
+  +    onExit,
+  +    onExited,
+  +    onExiting,
+  +  }}
+  >
+  ```
+
 ### Pagination
 
 - Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:

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

@@ -40,30 +40,6 @@ export interface MenuProps
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`.
    */
   onClose?: PopoverProps['onClose'];
-  /**
-   * Callback fired before the Menu enters.
-   */
-  onEnter?: PopoverProps['onEnter'];
-  /**
-   * Callback fired when the Menu has entered.
-   */
-  onEntered?: PopoverProps['onEntered'];
-  /**
-   * Callback fired when the Menu is entering.
-   */
-  onEntering?: PopoverProps['onEntering'];
-  /**
-   * Callback fired before the Menu exits.
-   */
-  onExit?: PopoverProps['onExit'];
-  /**
-   * Callback fired when the Menu has exited.
-   */
-  onExited?: PopoverProps['onExited'];
-  /**
-   * Callback fired when the Menu is exiting.
-   */
-  onExiting?: PopoverProps['onExiting'];
   /**
    * If `true`, the menu is visible.
    */
@@ -76,6 +52,11 @@ export interface MenuProps
    * The length of the transition in `ms`, or 'auto'
    */
   transitionDuration?: TransitionProps['timeout'] | 'auto';
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+   */
+  TransitionProps?: TransitionProps;
   /**
    * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
    * and the vertical alignment relative to the anchor element.

packages/material-ui/src/Menu/Menu.js

@@ -44,12 +44,12 @@ const Menu = React.forwardRef(function Menu(props, ref) {
     disableAutoFocusItem = false,
     MenuListProps = {},
     onClose,
-    onEntering,
     open,
     PaperProps = {},
     PopoverClasses,
     transitionDuration = 'auto',
     variant = 'selectedMenu',
+    TransitionProps: { onEntering, ...TransitionProps } = {},
     ...other
   } = props;
   const theme = useTheme();
@@ -133,7 +133,6 @@ const Menu = React.forwardRef(function Menu(props, ref) {
       getContentAnchorEl={getContentAnchorEl}
       classes={PopoverClasses}
       onClose={onClose}
-      TransitionProps={{ onEntering: handleEntering }}
       anchorOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
       transformOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
       PaperProps={{
@@ -146,6 +145,7 @@ const Menu = React.forwardRef(function Menu(props, ref) {
       open={open}
       ref={ref}
       transitionDuration={transitionDuration}
+      TransitionProps={{ onEntering: handleEntering, ...TransitionProps }}
       {...other}
     >
       <MenuList
@@ -211,30 +211,6 @@ Menu.propTypes = {
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`.
    */
   onClose: PropTypes.func,
-  /**
-   * Callback fired before the Menu enters.
-   */
-  onEnter: PropTypes.func,
-  /**
-   * Callback fired when the Menu has entered.
-   */
-  onEntered: PropTypes.func,
-  /**
-   * Callback fired when the Menu is entering.
-   */
-  onEntering: PropTypes.func,
-  /**
-   * Callback fired before the Menu exits.
-   */
-  onExit: PropTypes.func,
-  /**
-   * Callback fired when the Menu has exited.
-   */
-  onExited: PropTypes.func,
-  /**
-   * Callback fired when the Menu is exiting.
-   */
-  onExiting: PropTypes.func,
   /**
    * If `true`, the menu is visible.
    */
@@ -259,6 +235,11 @@ Menu.propTypes = {
       exit: PropTypes.number,
     }),
   ]),
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+   */
+  TransitionProps: PropTypes.object,
   /**
    * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
    * and the vertical alignment relative to the anchor element.

packages/material-ui/src/Menu/Menu.test.js

@@ -162,7 +162,7 @@ describe('<Menu />', () => {
     expect(false).to.equal(menuEl.contains(document.activeElement));
   });
 
-  it('should call onEntering with element if exists', () => {
+  it('should call TransitionProps.onEntering with element if exists', () => {
     const onEnteringSpy = spy();
     const wrapper = mount(
       <Menu {...defaultProps} TransitionProps={{ onEntering: onEnteringSpy }} />,
@@ -176,7 +176,7 @@ describe('<Menu />', () => {
     expect(onEnteringSpy.calledWith(elementForHandleEnter)).to.equal(true);
   });
 
-  it('should call props.onEntering, disableAutoFocusItem', () => {
+  it('should call TransitionProps.onEntering, disableAutoFocusItem', () => {
     const onEnteringSpy = spy();
     const wrapper = mount(
       <Menu