[Snackbar] remove transition onX props

Author: mbrookes

docs/pages/api-docs/snackbar.md

@@ -39,12 +39,6 @@ The `MuiSnackbar` name can be used for providing [default props](/customization/
 | <span class="prop-name">key</span> | <span class="prop-type">any</span> |  | When displaying multiple consecutive Snackbars from a parent rendering a single &lt;Snackbar/>, add the key prop to ensure independent treatment of each message. e.g. &lt;Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled. |
 | <span class="prop-name">message</span> | <span class="prop-type">node</span> |  | The message to display. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed. Typically `onClose` is used to set state in the parent component, which is used to control the `Snackbar` `open` prop. The `reason` parameter can optionally be used to control the response to `onClose`, for example ignoring `clickaway`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. |
-| <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> |  | Callback fired before the transition is entering. |
-| <span class="prop-name">onEntered</span> | <span class="prop-type">func</span> |  | Callback fired when the transition has entered. |
-| <span class="prop-name">onEntering</span> | <span class="prop-type">func</span> |  | Callback fired when the transition is entering. |
-| <span class="prop-name">onExit</span> | <span class="prop-type">func</span> |  | Callback fired before the transition is exiting. |
-| <span class="prop-name">onExited</span> | <span class="prop-type">func</span> |  | Callback fired when the transition has exited. |
-| <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> |  | Callback fired when the transition is exiting. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | If `true`, `Snackbar` is open. |
 | <span class="prop-name">resumeHideDuration</span> | <span class="prop-type">number</span> |  | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` prop isn't specified, it does nothing. If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |

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

@@ -256,14 +256,36 @@ This change affects almost all components where you're using the `component` pro
 ### Snackbar
 
 - The notification now displays at the bottom left on large screens.
-  It better matches the behavior of Gmail, Google Keep, material.io, etc.
+  This better matches the behavior of Gmail, Google Keep, material.io, etc.
   You can restore the previous behavior with:
 
   ```diff
   -<Snackbar />
   +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
   ```
 
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+````diff
+<Snackbar
+-  onEnter={onEnter}
+-  onEntered={onEntered},
+-  onEntering={onEntered},
+-  onExit={onEntered},
+-  onExited={onEntered},
+-  onExiting={onEntered}
+/>
+<Snackbar
++  TransitionProps={{
++    onEnter,
++    onEntered,
++    onEntering,
++    onExit,
++    onExited,
++    onExiting,
++ }}
+/>
+
   ### Skeleton
 
 - Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
@@ -275,7 +297,7 @@ This change affects almost all components where you're using the `component` pro
   +<Skeleton variant="circular" />
   +<Skeleton variant="rectangular" />
   -<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />
-  ```
+````
 
 ### TablePagination
 

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

@@ -71,30 +71,6 @@ export interface SnackbarProps
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
    */
   onClose?: (event: React.SyntheticEvent<any>, reason: SnackbarCloseReason) => void;
-  /**
-   * Callback fired before the transition is entering.
-   */
-  onEnter?: TransitionHandlerProps['onEnter'];
-  /**
-   * Callback fired when the transition has entered.
-   */
-  onEntered?: TransitionHandlerProps['onEntered'];
-  /**
-   * Callback fired when the transition is entering.
-   */
-  onEntering?: TransitionHandlerProps['onEntering'];
-  /**
-   * Callback fired before the transition is exiting.
-   */
-  onExit?: TransitionHandlerProps['onExit'];
-  /**
-   * Callback fired when the transition has exited.
-   */
-  onExited?: TransitionHandlerProps['onExited'];
-  /**
-   * Callback fired when the transition is exiting.
-   */
-  onExiting?: TransitionHandlerProps['onExiting'];
   /**
    * If `true`, `Snackbar` is open.
    */

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

@@ -108,12 +108,6 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     disableWindowBlurListener = false,
     message,
     onClose,
-    onEnter,
-    onEntered,
-    onEntering,
-    onExit,
-    onExited,
-    onExiting,
     onMouseEnter,
     onMouseLeave,
     open,
@@ -218,6 +212,13 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     return null;
   }
 
+  if (TransitionProps !== undefined && TransitionProps.onEnter !== undefined) {
+    TransitionProps.onEnter = createChainedFunction(handleEnter, TransitionProps.onEnter);
+  }
+  if (TransitionProps !== undefined && TransitionProps.onExited !== undefined) {
+    TransitionProps.onExited = createChainedFunction(handleExited, TransitionProps.onExited);
+  }
+
   return (
     <ClickAwayListener onClickAway={handleClickAway} {...ClickAwayListenerProps}>
       <div
@@ -234,12 +235,6 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
         <TransitionComponent
           appear
           in={open}
-          onEnter={createChainedFunction(handleEnter, onEnter)}
-          onEntered={onEntered}
-          onEntering={onEntering}
-          onExit={onExit}
-          onExited={createChainedFunction(handleExited, onExited)}
-          onExiting={onExiting}
           timeout={transitionDuration}
           direction={vertical === 'top' ? 'down' : 'up'}
           {...TransitionProps}
@@ -323,30 +318,6 @@ Snackbar.propTypes = {
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
    */
   onClose: PropTypes.func,
-  /**
-   * Callback fired before the transition is entering.
-   */
-  onEnter: PropTypes.func,
-  /**
-   * Callback fired when the transition has entered.
-   */
-  onEntered: PropTypes.func,
-  /**
-   * Callback fired when the transition is entering.
-   */
-  onEntering: PropTypes.func,
-  /**
-   * Callback fired before the transition is exiting.
-   */
-  onExit: PropTypes.func,
-  /**
-   * Callback fired when the transition has exited.
-   */
-  onExited: PropTypes.func,
-  /**
-   * Callback fired when the transition is exiting.
-   */
-  onExiting: PropTypes.func,
   /**
    * @ignore
    */

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

@@ -76,7 +76,7 @@ describe('<Snackbar />', () => {
         <Snackbar
           open={false}
           onClose={handleClose}
-          onExited={handleExited}
+          TransitionProps={{ onExited: handleExited }}
           message="message"
           autoHideDuration={duration}
           transitionDuration={duration / 2}