Revert "[Menu] Deprecate transition onX props (#22213)"

oliviertassinari · oliviertassinari · commit 80fc767b2fe6 · 2020-11-24T10:25:01.000+01:00
This reverts commit 076a5fb.
diff --git a/docs/pages/api-docs/menu.md b/docs/pages/api-docs/menu.md
@@ -35,16 +35,15 @@ 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> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired before the Menu enters. |
-| ~~<span class="prop-name">onEntered</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the Menu has entered. |
-| ~~<span class="prop-name">onEntering</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the Menu is entering. |
-| ~~<span class="prop-name">onExit</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired before the Menu exits. |
-| ~~<span class="prop-name">onExited</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the Menu has exited. |
-| ~~<span class="prop-name">onExiting</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the Menu is exiting. |
+| <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.
diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts
@@ -84,11 +84,6 @@ 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.
diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
@@ -9,7 +9,6 @@ import MenuList from '../MenuList';
 import * as ReactDOM from 'react-dom';
 import setRef from '../utils/setRef';
 import useTheme from '../styles/useTheme';
-import deprecatedPropType from '../utils/deprecatedPropType';
 
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -46,12 +45,11 @@ const Menu = React.forwardRef(function Menu(props, ref) {
     disableAutoFocusItem = false,
     MenuListProps = {},
     onClose,
-    onEntering: onEnteringProp,
+    onEntering,
     open,
     PaperProps = {},
     PopoverClasses,
     transitionDuration = 'auto',
-    TransitionProps: { onEntering, ...TransitionProps } = {},
     variant = 'selectedMenu',
     ...other
   } = props;
@@ -68,9 +66,7 @@ const Menu = React.forwardRef(function Menu(props, ref) {
     if (menuListActionsRef.current) {
       menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
     }
-    if (onEnteringProp) {
-      onEnteringProp(element, isAppearing);
-    }
+
     if (onEntering) {
       onEntering(element, isAppearing);
     }
@@ -139,7 +135,7 @@ const Menu = React.forwardRef(function Menu(props, ref) {
       getContentAnchorEl={getContentAnchorEl}
       classes={PopoverClasses}
       onClose={onClose}
-      TransitionProps={{ onEntering: handleEntering, ...TransitionProps }}
+      TransitionProps={{ onEntering: handleEntering }}
       anchorOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
       transformOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
       PaperProps={{
@@ -220,27 +216,27 @@ Menu.propTypes = {
   /**
    * Callback fired before the Menu enters.
    */
-  onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
+  onEnter: PropTypes.func,
   /**
    * Callback fired when the Menu has entered.
    */
-  onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
+  onEntered: PropTypes.func,
   /**
    * Callback fired when the Menu is entering.
    */
-  onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
+  onEntering: PropTypes.func,
   /**
    * Callback fired before the Menu exits.
    */
-  onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
+  onExit: PropTypes.func,
   /**
    * Callback fired when the Menu has exited.
    */
-  onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
+  onExited: PropTypes.func,
   /**
    * Callback fired when the Menu is exiting.
    */
-  onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
+  onExiting: PropTypes.func,
   /**
    * If `true`, the menu is visible.
    */
@@ -265,11 +261,6 @@ 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.
diff --git a/packages/material-ui/src/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { spy, stub } from 'sinon';
+import { spy } from 'sinon';
 import { expect } from 'chai';
 import { getClasses } from '@material-ui/core/test-utils';
 import createMount from 'test/utils/createMount';
@@ -38,15 +37,6 @@ describe('<Menu />', () => {
   }));
 
   describe('event callbacks', () => {
-    beforeEach(() => {
-      PropTypes.resetWarningCache();
-      stub(console, 'error');
-    });
-
-    afterEach(() => {
-      console.error.restore();
-    });
-
     describe('entering', () => {
       it('should fire callbacks', (done) => {
         const handleEnter = spy();
@@ -103,114 +93,6 @@ describe('<Menu />', () => {
         });
       });
     });
-
-    describe('prop: onEnter', () => {
-      it('issues a warning', () => {
-        PropTypes.checkPropTypes(
-          Menu.Naked.propTypes,
-          {
-            onEnter: () => [],
-          },
-          'prop',
-          'Menu',
-        );
-
-        expect(console.error.callCount).to.equal(2);
-        expect(console.error.firstCall.args[0]).to.equal(
-          'Warning: Failed prop type: The prop `onEnter` of `Menu` is deprecated. Use the `TransitionProps` prop instead.',
-        );
-      });
-    });
-
-    describe('prop: onEntering', () => {
-      it('issues a warning', () => {
-        PropTypes.checkPropTypes(
-          Menu.Naked.propTypes,
-          {
-            onEntering: () => [],
-          },
-          'prop',
-          'Menu',
-        );
-
-        expect(console.error.callCount).to.equal(2);
-        expect(console.error.firstCall.args[0]).to.equal(
-          'Warning: Failed prop type: The prop `onEntering` of `Menu` is deprecated. Use the `TransitionProps` prop instead.',
-        );
-      });
-    });
-
-    describe('prop: onEntered', () => {
-      it('issues a warning', () => {
-        PropTypes.checkPropTypes(
-          Menu.Naked.propTypes,
-          {
-            onEntered: () => [],
-          },
-          'prop',
-          'Menu',
-        );
-
-        expect(console.error.callCount).to.equal(2);
-        expect(console.error.firstCall.args[0]).to.equal(
-          'Warning: Failed prop type: The prop `onEntered` of `Menu` is deprecated. Use the `TransitionProps` prop instead.',
-        );
-      });
-    });
-
-    describe('prop: onExit', () => {
-      it('issues a warning', () => {
-        PropTypes.checkPropTypes(
-          Menu.Naked.propTypes,
-          {
-            onExit: () => [],
-          },
-          'prop',
-          'Menu',
-        );
-
-        expect(console.error.callCount).to.equal(2);
-        expect(console.error.firstCall.args[0]).to.equal(
-          'Warning: Failed prop type: The prop `onExit` of `Menu` is deprecated. Use the `TransitionProps` prop instead.',
-        );
-      });
-    });
-
-    describe('prop: onExiting', () => {
-      it('issues a warning', () => {
-        PropTypes.checkPropTypes(
-          Menu.Naked.propTypes,
-          {
-            onExiting: () => [],
-          },
-          'prop',
-          'Menu',
-        );
-
-        expect(console.error.callCount).to.equal(2);
-        expect(console.error.firstCall.args[0]).to.equal(
-          'Warning: Failed prop type: The prop `onExiting` of `Menu` is deprecated. Use the `TransitionProps` prop instead.',
-        );
-      });
-    });
-
-    describe('prop: onExited', () => {
-      it('issues a warning', () => {
-        PropTypes.checkPropTypes(
-          Menu.Naked.propTypes,
-          {
-            onExited: () => [],
-          },
-          'prop',
-          'Menu',
-        );
-
-        expect(console.error.callCount).to.equal(2);
-        expect(console.error.firstCall.args[0]).to.equal(
-          'Warning: Failed prop type: The prop `onExited` of `Menu` is deprecated. Use the `TransitionProps` prop instead.',
-        );
-      });
-    });
   });
 
   it('should pass `classes.paper` to the Popover', () => {
