[Snackbar] remove transition onX props

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}