[core] Upgrade dependencies and build for the supported targets

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["./scripts/material-ui-babel-preset-es2015", "stage-1", "react"],
+  "presets": ["./scripts/material-ui-babel-preset-env", "stage-1", "react"],
   "plugins": [
     "transform-object-assign"
   ],

docs/.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "stage-1", "react"],
+  "presets": ["../scripts/material-ui-babel-preset-env", "stage-1", "react"],
   "plugins": [
     "transform-object-assign"
   ],

package.json

@@ -52,7 +52,7 @@
     "react-dom": "^15.3.0 || ^16.0.0-beta.1"
   },
   "dependencies": {
-    "babel-runtime": "^6.23.0",
+    "babel-runtime": "^6.25.0",
     "brcast": "^2.0.1",
     "classnames": "^2.2.5",
     "deepmerge": "^1.5.0",
@@ -66,7 +66,7 @@
     "react-event-listener": "^0.4.5",
     "react-jss": "^7.0.2",
     "react-scrollbar-size": "^2.0.0",
-    "react-transition-group": "^1.2.0",
+    "react-transition-group": "^2.2.0",
     "recompose": "^0.24.0",
     "scroll": "^2.0.0",
     "warning": "^3.0.0"
@@ -88,6 +88,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
@@ -99,7 +100,7 @@
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-flowtype": "^2.35.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^5.1.1",
@@ -137,12 +138,12 @@
     "recast": "^0.12.6",
     "recursive-readdir-sync": "^1.0.6",
     "rimraf": "^2.6.1",
-    "sinon": "^2.3.8",
+    "sinon": "^2.4.1",
     "size-limit": "^0.7.1",
     "url-loader": "^0.5.9",
     "vrtest": "^0.2.0",
     "webfontloader": "^1.6.28",
-    "webpack": "^3.3.0"
+    "webpack": "^3.4.1"
   },
   "nyc": {
     "include": [

scripts/material-ui-babel-preset-env.js

@@ -0,0 +1,24 @@
+// @flow
+
+const env = require('babel-preset-env');
+
+const ENV = process.env.BABEL_ENV;
+
+module.exports = {
+  presets: [
+    [
+      env,
+      {
+        targets: {
+          ie: 11,
+          edge: 14,
+          firefox: 45,
+          chrome: 49,
+          safari: 10,
+          node: '6.11',
+        },
+        modules: ENV === 'modules' ? false : 'commonjs',
+      },
+    ],
+  ],
+};

src/internal/Ripple.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import Transition from 'react-transition-group/Transition';
 
 /**
  * @ignore - internal component.
@@ -16,41 +17,16 @@ class Ripple extends Component {
     rippleVisible: false,
   };
 
-  componentWillUnmount() {
-    clearTimeout(this.leaveTimer);
-  }
-
-  componentWillEnter(callback) {
-    this.start(callback);
-  }
-
-  componentWillLeave(callback) {
-    this.stop(() => {
-      this.leaveTimer = setTimeout(() => {
-        callback();
-      }, 550);
+  handleEnter = () => {
+    this.setState({
+      rippleVisible: true,
     });
-  }
-
-  ripple = null;
-  leaveTimer = null;
-
-  start = callback => {
-    this.setState(
-      {
-        rippleVisible: true,
-      },
-      callback,
-    );
   };
 
-  stop = callback => {
-    this.setState(
-      {
-        rippleLeaving: true,
-      },
-      callback,
-    );
+  handleExit = () => {
+    this.setState({
+      rippleLeaving: true,
+    });
   };
 
   getRippleStyles = props => {
@@ -65,7 +41,15 @@ class Ripple extends Component {
   };
 
   render() {
-    const { classes, className: classNameProp, pulsate } = this.props;
+    const {
+      classes,
+      className: classNameProp,
+      pulsate,
+      rippleX,
+      rippleY,
+      rippleSize,
+      ...other
+    } = this.props;
     const { rippleVisible, rippleLeaving } = this.state;
 
     const className = classNames(
@@ -83,9 +67,11 @@ class Ripple extends Component {
     });
 
     return (
-      <span className={className}>
-        <span className={rippleClassName} style={this.getRippleStyles(this.props)} />
-      </span>
+      <Transition onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
+        <span className={className}>
+          <span className={rippleClassName} style={this.getRippleStyles(this.props)} />
+        </span>
+      </Transition>
     );
   }
 }