[Snackbar] Remove transition onX props

docs/pages/api-docs/snackbar.md

@@ -39,17 +39,11 @@ 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. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
-| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</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">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. |
 
 The `ref` is forwarded to the root element.
 

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

@@ -256,14 +256,37 @@ 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:
@@ -274,7 +297,7 @@ This change affects almost all components where you're using the `component` pro
   -<Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname',  }} />
   +<Skeleton variant="circular" />
   +<Skeleton variant="rectangular" />
-  -<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />
+  +<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />
   ```
 
 ### TablePagination
@@ -291,6 +314,7 @@ This change affects almost all components where you're using the `component` pro
 ### Tabs
 
 - TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
   ```diff
   -<Tabs onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} />
   +<Tabs onChange={(event: React.SyntheticEvent, value: unknown) => {}} />

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

@@ -6,7 +6,6 @@ import { duration } from '../styles/transitions';
 import ClickAwayListener from '../ClickAwayListener';
 import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
-import createChainedFunction from '../utils/createChainedFunction';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
 
@@ -108,12 +107,6 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     disableWindowBlurListener = false,
     message,
     onClose,
-    onEnter,
-    onEntered,
-    onEntering,
-    onExit,
-    onExited,
-    onExiting,
     onMouseEnter,
     onMouseLeave,
     open,
@@ -123,7 +116,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
       enter: duration.enteringScreen,
       exit: duration.leavingScreen,
     },
-    TransitionProps,
+    TransitionProps: { onEnter, onExited, ...TransitionProps } = {},
     ...other
   } = props;
 
@@ -191,12 +184,20 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     }
   };
 
-  const handleExited = () => {
+  const handleExited = (node) => {
     setExited(true);
+
+    if (onExited) {
+      onExited(node);
+    }
   };
 
-  const handleEnter = () => {
+  const handleEnter = (node, isAppearing) => {
     setExited(false);
+
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
   };
 
   React.useEffect(() => {
@@ -234,14 +235,10 @@ 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'}
+          onEnter={handleEnter}
+          onExited={handleExited}
           {...TransitionProps}
         >
           {children || <SnackbarContent message={message} action={action} {...ContentProps} />}
@@ -323,30 +320,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}