[Menu] maxHeight spec compliance

package.json

@@ -110,6 +110,7 @@
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
     "jsdom": "^11.1.0",
+    "jsdom-global": "^3.0.2",
     "json-loader": "^0.5.4",
     "karma": "^1.7.0",
     "karma-browserstack-launcher": "^1.3.0",

src/Dialog/Dialog.js

@@ -10,6 +10,7 @@ import Modal from '../internal/Modal';
 import Fade from '../transitions/Fade';
 import { duration } from '../styles/transitions';
 import Paper from '../Paper';
+import type { TransitionCallback } from '../internal/Transition';
 
 export const styleSheet = createStyleSheet('MuiDialog', theme => ({
   root: {
@@ -91,31 +92,31 @@ type Props = {
   /**
    * Callback fired before the dialog enters.
    */
-  onEnter?: Function,
+  onEnter?: TransitionCallback,
   /**
    * Callback fired when the dialog is entering.
    */
-  onEntering?: Function,
+  onEntering?: TransitionCallback,
   /**
    * Callback fired when the dialog has entered.
    */
-  onEntered?: Function, // eslint-disable-line react/sort-prop-types
+  onEntered?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fires when the escape key is released and the modal is in focus.
    */
   onEscapeKeyUp?: Function, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fired before the dialog exits.
    */
-  onExit?: Function,
+  onExit?: TransitionCallback,
   /**
    * Callback fired when the dialog is exiting.
    */
-  onExiting?: Function,
+  onExiting?: TransitionCallback,
   /**
    * Callback fired when the dialog has exited.
    */
-  onExited?: Function, // eslint-disable-line react/sort-prop-types
+  onExited?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fired when the dialog requests to be closed.
    */

src/Menu/Menu.js

@@ -9,6 +9,7 @@ import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import Popover from '../internal/Popover';
 import withStyles from '../styles/withStyles';
 import MenuList from './MenuList';
+import type { TransitionCallback } from '../internal/Transition';
 
 type DefaultProps = {
   open: boolean,
@@ -39,27 +40,27 @@ type Props = DefaultProps & {
   /**
    * Callback fired before the Menu enters.
    */
-  onEnter?: Function,
+  onEnter?: TransitionCallback,
   /**
    * Callback fired when the Menu is entering.
    */
-  onEntering?: Function,
+  onEntering?: TransitionCallback,
   /**
    * Callback fired when the Menu has entered.
    */
-  onEntered?: Function, // eslint-disable-line react/sort-prop-types
+  onEntered?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fired before the Menu exits.
    */
-  onExit?: Function,
+  onExit?: TransitionCallback,
   /**
    * Callback fired when the Menu is exiting.
    */
-  onExiting?: Function,
+  onExiting?: TransitionCallback,
   /**
    * Callback fired when the Menu has exited.
    */
-  onExited?: Function, // eslint-disable-line react/sort-prop-types
+  onExited?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback function fired when the menu is requested to be closed.
    *
@@ -78,7 +79,12 @@ type Props = DefaultProps & {
 
 export const styleSheet = createStyleSheet('MuiMenu', {
   root: {
-    maxHeight: 250,
+    /**
+     * specZ: The maximum height of a simple menu should be one or more rows less than the view
+     * height. This ensures a tappable area outside of the simple menu with which to dismiss
+     * the menu.
+     */
+    maxHeight: 'calc(100vh - 96px)',
   },
 });
 
@@ -90,7 +96,7 @@ class Menu extends Component<DefaultProps, Props, void> {
 
   menuList = undefined;
 
-  handleEnter = element => {
+  handleEnter = (element: HTMLElement) => {
     const list = findDOMNode(this.menuList);
 
     if (this.menuList && this.menuList.selectedItem) {
@@ -115,7 +121,7 @@ class Menu extends Component<DefaultProps, Props, void> {
     }
   };
 
-  handleListKeyDown = (event, key) => {
+  handleListKeyDown = (event: SyntheticUIEvent, key: string) => {
     if (key === 'tab') {
       event.preventDefault();
       const { onRequestClose } = this.props;
@@ -161,7 +167,6 @@ class Menu extends Component<DefaultProps, Props, void> {
         getContentAnchorEl={this.getContentAnchorEl}
         className={classNames(classes.root, className)}
         open={open}
-        enteredClassName={classes.entered}
         onEnter={this.handleEnter}
         onEntering={onEntering}
         onEntered={onEntered}

src/Menu/Menu.spec.js

@@ -43,15 +43,6 @@ describe('<Menu />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true, 'should be classes.root');
   });
 
-  it('should pass `classes.entered` to the Popover for the enteredClassName', () => {
-    const wrapper = shallow(<Menu />);
-    assert.strictEqual(
-      wrapper.props().enteredClassName,
-      classes.entered,
-      'should be classes.entered',
-    );
-  });
-
   it('should pass the instance function `getContentAnchorEl` to Popover', () => {
     const wrapper = shallow(<Menu />);
     assert.strictEqual(

src/Menu/MenuList.js

@@ -25,7 +25,7 @@ type Props = {
   /**
    * @ignore
    */
-  onKeyDown?: Function,
+  onKeyDown?: (event: SyntheticUIEvent, key: string) => void,
 };
 
 type State = {

src/Snackbar/Snackbar.js

@@ -10,6 +10,7 @@ import ClickAwayListener from '../internal/ClickAwayListener';
 import { capitalizeFirstLetter, createChainedFunction } from '../utils/helpers';
 import Slide from '../transitions/Slide';
 import SnackbarContent from './SnackbarContent';
+import type { TransitionCallback } from '../internal/Transition';
 
 export const styleSheet = createStyleSheet('MuiSnackbar', theme => {
   const gutter = theme.spacing.unit * 3;
@@ -127,27 +128,27 @@ type Props = DefaultProps & {
   /**
    * Callback fired before the transition is entering.
    */
-  onEnter?: Function,
+  onEnter?: TransitionCallback,
   /**
    * Callback fired when the transition is entering.
    */
-  onEntering?: Function,
+  onEntering?: TransitionCallback,
   /**
    * Callback fired when the transition has entered.
    */
-  onEntered?: Function,
+  onEntered?: TransitionCallback,
   /**
    * Callback fired before the transition is exiting.
    */
-  onExit?: Function,
+  onExit?: TransitionCallback,
   /**
    * Callback fired when the transition is exiting.
    */
-  onExiting?: Function,
+  onExiting?: TransitionCallback,
   /**
    * Callback fired when the transition has exited.
    */
-  onExited?: Function,
+  onExited?: TransitionCallback,
   /**
    * @ignore
    */

src/internal/Modal.js

@@ -18,6 +18,7 @@ import withStyles from '../styles/withStyles';
 import createModalManager from './modalManager';
 import Backdrop from './Backdrop';
 import Portal from './Portal';
+import type { TransitionCallback } from './Transition';
 
 /**
  * Modals don't open on the server so this won't break concurrency.
@@ -109,31 +110,31 @@ type Props = DefaultProps & {
   /**
    * Callback fired before the modal is entering.
    */
-  onEnter?: Function,
+  onEnter?: TransitionCallback,
   /**
    * Callback fired when the modal is entering.
    */
-  onEntering?: Function,
+  onEntering?: TransitionCallback,
   /**
    * Callback fired when the modal has entered.
    */
-  onEntered?: Function, // eslint-disable-line react/sort-prop-types
+  onEntered?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fires when the escape key is pressed and the modal is in focus.
    */
   onEscapeKeyUp?: Function, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fired before the modal is exiting.
    */
-  onExit?: Function,
+  onExit?: TransitionCallback,
   /**
    * Callback fired when the modal is exiting.
    */
-  onExiting?: Function,
+  onExiting?: TransitionCallback,
   /**
    * Callback fired when the modal has exited.
    */
-  onExited?: Function, // eslint-disable-line react/sort-prop-types
+  onExited?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fired when the modal requests to be closed.
    */

src/internal/Popover.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React, { Component } from 'react';
 import type { Element } from 'react';
@@ -10,6 +10,7 @@ import customPropTypes from '../utils/customPropTypes';
 import Modal from './Modal';
 import Transition from './Transition';
 import Paper from '../Paper';
+import type { TransitionCallback } from './Transition';
 
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -127,27 +128,27 @@ type Props = DefaultProps & {
   /**
    * Callback fired before the component is entering
    */
-  onEnter?: Function,
+  onEnter?: TransitionCallback,
   /**
    * Callback fired when the component is entering
    */
-  onEntering?: Function,
+  onEntering?: TransitionCallback,
   /**
    * Callback fired when the component has entered
    */
-  onEntered?: Function, // eslint-disable-line react/sort-prop-types
+  onEntered?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback fired before the component is exiting
    */
-  onExit?: Function,
+  onExit?: TransitionCallback,
   /**
    * Callback fired when the component is exiting
    */
-  onExiting?: Function,
+  onExiting?: TransitionCallback,
   /**
    * Callback fired when the component has exited
    */
-  onExited?: Function, // eslint-disable-line react/sort-prop-types
+  onExited?: TransitionCallback, // eslint-disable-line react/sort-prop-types
   /**
    * Callback function fired when the popover is requested to be closed.
    *
@@ -197,8 +198,8 @@ class Popover extends Component<DefaultProps, Props, void> {
 
   autoTransitionDuration = undefined;
 
-  handleEnter = element => {
-    element.style.opacity = 0;
+  handleEnter = (element: HTMLElement) => {
+    element.style.opacity = '0';
     element.style.transform = Popover.getScale(0.75);
 
     if (this.props.onEnter) {
@@ -229,16 +230,16 @@ class Popover extends Component<DefaultProps, Props, void> {
     ].join(',');
   };
 
-  handleEntering = element => {
-    element.style.opacity = 1;
+  handleEntering = (element: HTMLElement) => {
+    element.style.opacity = '1';
     element.style.transform = Popover.getScale(1);
 
     if (this.props.onEntering) {
-      this.props.onEntering();
+      this.props.onEntering(element);
     }
   };
 
-  handleExit = element => {
+  handleExit = (element: HTMLElement) => {
     let { transitionDuration } = this.props;
     const { transitions } = this.context.styleManager.theme;
 
@@ -257,11 +258,11 @@ class Popover extends Component<DefaultProps, Props, void> {
       }),
     ].join(',');
 
-    element.style.opacity = 0;
+    element.style.opacity = '0';
     element.style.transform = Popover.getScale(0.75);
 
     if (this.props.onExit) {
-      this.props.onExit();
+      this.props.onExit(element);
     }
   };
 

src/internal/Popover.spec.js

@@ -224,7 +224,7 @@ describe('<Popover />', () => {
       });
 
       it('should set the inline styles for the enter phase', () => {
-        assert.strictEqual(element.style.opacity, 0, 'should be transparent');
+        assert.strictEqual(element.style.opacity, '0', 'should be transparent');
         assert.strictEqual(
           element.style.transform,
           Popover.getScale(0.75),
@@ -263,7 +263,7 @@ describe('<Popover />', () => {
       });
 
       it('should set the inline styles for the entering phase', () => {
-        assert.strictEqual(element.style.opacity, 1, 'should be visible');
+        assert.strictEqual(element.style.opacity, '1', 'should be visible');
         assert.strictEqual(
           element.style.transform,
           Popover.getScale(1),
@@ -287,7 +287,7 @@ describe('<Popover />', () => {
       });
 
       it('should set the inline styles for the exit phase', () => {
-        assert.strictEqual(element.style.opacity, 0, 'should be transparent');
+        assert.strictEqual(element.style.opacity, '0', 'should be transparent');
         assert.strictEqual(
           element.style.transform,
           Popover.getScale(0.75),