[Snackbar] Add ClickAwayListenerProps property (mui#12735)

* [tests] Fix typo.

* [Snackbar] Add a ClickAwayListenerProps property. (mui#12727)

* let's merge

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

@@ -173,7 +173,7 @@ describe('<ClickAwayListener />', () => {
     });
   });
 
-  it('should hanlde null child', () => {
+  it('should handle null child', () => {
     const Child = () => null;
     const handleClickAway = spy();
     wrapper = mount(

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { SnackbarContentProps } from '../SnackbarContent';
 import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
+import { ClickAwayListenerProps } from '../ClickAwayListener';
 
 export interface SnackbarOrigin {
   horizontal: 'left' | 'center' | 'right';
@@ -16,6 +17,7 @@ export interface SnackbarProps
   action?: SnackbarContentProps['action'];
   anchorOrigin?: SnackbarOrigin;
   autoHideDuration?: number;
+  ClickAwayListenerProps?: Partial<ClickAwayListenerProps>;
   ContentProps?: Partial<SnackbarContentProps>;
   disableWindowBlurListener?: boolean;
   message?: SnackbarContentProps['message'];

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

@@ -210,6 +210,7 @@ class Snackbar extends React.Component {
       children,
       classes,
       className,
+      ClickAwayListenerProps,
       ContentProps,
       disableWindowBlurListener,
       message,
@@ -236,7 +237,7 @@ class Snackbar extends React.Component {
     }
 
     return (
-      <ClickAwayListener onClickAway={this.handleClickAway}>
+      <ClickAwayListener onClickAway={this.handleClickAway} {...ClickAwayListenerProps}>
         <div
           className={classNames(
             classes.root,
@@ -306,6 +307,10 @@ Snackbar.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * Properties applied to the `ClickAwayListener` element.
+   */
+  ClickAwayListenerProps: PropTypes.object,
   /**
    * Properties applied to the [`SnackbarContent`](/api/snackbar-content) element.
    */

pages/api/snackbar.md

@@ -20,6 +20,7 @@ title: Snackbar API
 | <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number |   | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
 | <span class="prop-name">children</span> | <span class="prop-type">element |   | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">ClickAwayListenerProps</span> | <span class="prop-type">object |   | Properties applied to the `ClickAwayListener` element. |
 | <span class="prop-name">ContentProps</span> | <span class="prop-type">object |   | Properties applied to the [`SnackbarContent`](/api/snackbar-content) element. |
 | <span class="prop-name">disableWindowBlurListener</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the `autoHideDuration` timer will expire even if the window is not focused. |
 | <span class="prop-name">key</span> | <span class="prop-type">any |   | When displaying multiple consecutive Snackbars from a parent rendering a single &lt;Snackbar/>, add the key property 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. |