diff --git a/.eslintrc.js b/.eslintrc.js
index cf70ab517d563d..3a2d667698d469 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -27,12 +27,13 @@ module.exports = {
     },
   },
   rules: {
-    'linebreak-style': 'off', // Don't play nicely with Windows.
-    'arrow-body-style': 'off', // Not our taste?
+    'linebreak-style': 'off', // Don't play nicely with Windows
+    'arrow-body-style': 'off', // Incompatible with prettier
     'arrow-parens': 'off', // Incompatible with prettier
     'object-curly-newline': 'off', // Incompatible with prettier
     'function-paren-newline': 'off', // Incompatible with prettier
     indent: 'off', // Incompatible with prettier
+    'implicit-arrow-linebreak': 'off', // Incompatible with prettier
     'space-before-function-paren': 'off', // Incompatible with prettier
     'no-confusing-arrow': 'off', // Incompatible with prettier
     'no-mixed-operators': 'off', // Incompatible with prettier
@@ -46,18 +47,15 @@ module.exports = {
       },
     ], // airbnb is allowing some edge cases
     'no-console': 'error', // airbnb is using warn
+    'prefer-destructuring': 'off', // airbnb is using error. destructuring harm grep potential.
     'no-alert': 'error', // airbnb is using warn
-    'no-param-reassign': 'off', // Not our taste?
+    'no-param-reassign': 'off', // airbnb use error
     'no-prototype-builtins': 'off', // airbnb use error
-    'object-curly-spacing': 'off', // use babel plugin rule
-    'no-restricted-properties': 'off', // To remove once react-docgen support ** operator.
-    'prefer-destructuring': 'off', // To remove once react-docgen support ** operator.
+    'operator-linebreak': 'off', // airbnb use error
 
-    'babel/object-curly-spacing': ['error', 'always'],
-
-    'import/unambiguous': 'off', // scripts
-    'import/namespace': ['error', { allowComputed: true }],
+    // It would be better to enable this rule, but it might slow us down.
     'import/no-extraneous-dependencies': 'off',
+    'import/namespace': ['error', { allowComputed: true }],
     'import/order': [
       'error',
       {
@@ -70,6 +68,7 @@ module.exports = {
     'react/jsx-closing-bracket-location': 'off', // Incompatible with prettier
     'react/jsx-wrap-multilines': 'off', // Incompatible with prettier
     'react/jsx-indent-props': 'off', // Incompatible with prettier
+    'react/jsx-one-expression-per-line': 'off', // Incompatible with prettier
     'react/jsx-handler-names': [
       'error',
       {
@@ -78,16 +77,15 @@ module.exports = {
         eventHandlerPropPrefix: 'on',
       },
     ],
-    'react/require-default-props': 'off', // airbnb use error
+    'react/jsx-curly-brace-presence': 'off', // airbnb use error, it's buggy
     'react/forbid-prop-types': 'off', // airbnb use error
+    'react/require-default-props': 'off', // airbnb use error, it's buggy
+    'react/destructuring-assignment': 'off', // airbnb use error
     'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
     'react/no-danger': 'error', // airbnb is using warn
-    'react/no-direct-mutation-state': 'error', // airbnb is disabling this rule
-    'react/no-find-dom-node': 'off', // I don't know
-    'react/no-unused-prop-types': 'off', // Is still buggy
-    'react/sort-prop-types': 'error', // airbnb do nothing here.
-    'react/default-props-match-prop-types': 'off', // Buggy
-    'react/jsx-curly-brace-presence': 'off', // Buggy
+    'react/no-direct-mutation-state': 'error', // airbnb is using off
+    'react/no-find-dom-node': 'off', // airbnb use error
+    'react/sort-prop-types': 'error', // airbnb use off
 
     'material-ui/docgen-ignore-before-comment': 'error',
 
diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
index 7b7c5e59d7534b..c92efa4e57ded6 100644
--- a/docs/src/modules/components/AppDrawerNavItem.js
+++ b/docs/src/modules/components/AppDrawerNavItem.js
@@ -57,7 +57,7 @@ class AppDrawerNavItem extends React.Component {
   }
 
   handleClick = () => {
-    this.setState({ open: !this.state.open });
+    this.setState(state => ({ open: !state.open }));
   };
 
   render() {
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index dee308426850a9..beceae5af8ad28 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -153,6 +153,8 @@ const styles = theme => ({
 });
 
 class AppSearch extends React.Component {
+  input = null;
+
   handleKeyDown = event => {
     if (
       ['/', 's'].indexOf(keycode(event)) !== -1 &&
@@ -164,8 +166,6 @@ class AppSearch extends React.Component {
     }
   };
 
-  input = null;
-
   render() {
     const { classes, width } = this.props;
 
diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js
index edc6f5c0944076..88be91e0945d08 100644
--- a/docs/src/modules/components/AppWrapper.js
+++ b/docs/src/modules/components/AppWrapper.js
@@ -30,6 +30,28 @@ function uiThemeSideEffect(uiTheme) {
 class AppWrapper extends React.Component {
   state = {};
 
+  componentDidMount() {
+    uiThemeSideEffect(this.props.uiTheme);
+
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles);
+    }
+
+    if (
+      'serviceWorker' in navigator &&
+      process.env.NODE_ENV === 'production' &&
+      window.location.host === 'material-ui.com'
+    ) {
+      navigator.serviceWorker.register('/sw.js');
+    }
+  }
+
+  componentDidUpdate() {
+    uiThemeSideEffect(this.props.uiTheme);
+  }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     if (typeof prevState.pageContext === 'undefined') {
       return {
@@ -53,28 +75,6 @@ class AppWrapper extends React.Component {
     return null;
   }
 
-  componentDidMount() {
-    uiThemeSideEffect(this.props.uiTheme);
-
-    // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector('#jss-server-side');
-    if (jssStyles && jssStyles.parentNode) {
-      jssStyles.parentNode.removeChild(jssStyles);
-    }
-
-    if (
-      'serviceWorker' in navigator &&
-      process.env.NODE_ENV === 'production' &&
-      window.location.host === 'material-ui.com'
-    ) {
-      navigator.serviceWorker.register('/sw.js');
-    }
-  }
-
-  componentDidUpdate() {
-    uiThemeSideEffect(this.props.uiTheme);
-  }
-
   render() {
     const { children } = this.props;
     const { pageContext } = this.state;
@@ -97,6 +97,7 @@ class AppWrapper extends React.Component {
 
 AppWrapper.propTypes = {
   children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
   pageContext: PropTypes.object,
   uiTheme: PropTypes.object.isRequired,
 };
diff --git a/docs/src/modules/components/Carbon.js b/docs/src/modules/components/Carbon.js
index 883a0ab1c80d96..029c882f47b0d6 100644
--- a/docs/src/modules/components/Carbon.js
+++ b/docs/src/modules/components/Carbon.js
@@ -89,6 +89,8 @@ const styles = theme => ({
 });
 
 class Carbon extends React.Component {
+  timerAdblock = null;
+
   state = {
     adblock: null,
   };
@@ -114,8 +116,6 @@ class Carbon extends React.Component {
     clearTimeout(this.timerAdblock);
   }
 
-  timerAdblock = null;
-
   checkAdblock = (attempt = 1) => {
     if (document.querySelector('#carbonads')) {
       this.setState({
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 4f97c7733d0165..5d5090b365255d 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -133,9 +133,9 @@ class Demo extends React.Component {
   };
 
   handleClickCodeOpen = () => {
-    this.setState({
-      codeOpen: !this.state.codeOpen,
-    });
+    this.setState(state => ({
+      codeOpen: !state.codeOpen,
+    }));
   };
 
   handleClickCodeSandbox = () => {
diff --git a/docs/src/modules/components/GoogleTag.js b/docs/src/modules/components/GoogleTag.js
index de78ac354173d8..ed141b766df83f 100644
--- a/docs/src/modules/components/GoogleTag.js
+++ b/docs/src/modules/components/GoogleTag.js
@@ -2,6 +2,8 @@ import React from 'react';
 import config from 'docs/src/config';
 
 class GoogleTag extends React.Component {
+  googleTimer = null;
+
   componentDidMount() {
     // Wait for the title to be updated.
     this.googleTimer = setTimeout(() => {
@@ -15,8 +17,6 @@ class GoogleTag extends React.Component {
     clearTimeout(this.googleTimer);
   }
 
-  googleTimer = null;
-
   render() {
     return null;
   }
diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index b510f43c5789d5..01eb9ffedde123 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -38,6 +38,8 @@ async function getMessages() {
 }
 
 class Notifications extends React.Component {
+  mounted = false;
+
   state = {
     open: false,
     message: {},
@@ -55,12 +57,6 @@ class Notifications extends React.Component {
     this.handleMessage();
   }
 
-  componentWillUnmout() {
-    this.mounted = false;
-  }
-
-  mounted = false;
-
   handleMessage = () => {
     const lastSeen = getLastSeenNotification();
     const unseenMessages = messages.filter(message => message.id > lastSeen);
@@ -74,6 +70,10 @@ class Notifications extends React.Component {
     document.cookie = `lastSeenNotification=${this.state.message.id};path=/;max-age=31536000`;
   };
 
+  componentWillUnmout() {
+    this.mounted = false;
+  }
+
   render() {
     const { message, open } = this.state;
 
diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
index da4df01b2cf03b..763cf600ace49c 100644
--- a/docs/src/modules/components/withRoot.js
+++ b/docs/src/modules/components/withRoot.js
@@ -262,6 +262,8 @@ function findActivePage(currentPages, router) {
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
+    redux = null;
+
     constructor(props) {
       super(props);
 
@@ -284,8 +286,6 @@ function withRoot(Component) {
       };
     }
 
-    redux = null;
-
     render() {
       const { pageContext, ...other } = this.props;
 
diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
index e3ce2054bd6745..9a4729e7db198b 100644
--- a/docs/src/modules/utils/generateMarkdown.js
+++ b/docs/src/modules/utils/generateMarkdown.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/forbid-foreign-prop-types */
+
 import { parse as parseDoctrine } from 'doctrine';
 import recast from 'recast';
 import { pageToTitle } from './helpers';
diff --git a/docs/src/pages/customization/css-in-js/JssRegistry.js b/docs/src/pages/customization/css-in-js/JssRegistry.js
index 8e6c6eb1bd960e..667b3871aa6dd7 100644
--- a/docs/src/pages/customization/css-in-js/JssRegistry.js
+++ b/docs/src/pages/customization/css-in-js/JssRegistry.js
@@ -8,6 +8,8 @@ const sheetsRegistry = new SheetsRegistry();
 const theme = createMuiTheme();
 
 class JssRegistry extends React.Component {
+  timer = null;
+
   state = {
     length: 0,
   };
@@ -24,8 +26,6 @@ class JssRegistry extends React.Component {
     clearTimeout(this.timer);
   }
 
-  timer = null;
-
   update() {
     if (this.state.length !== sheetsRegistry.registry.length) {
       this.setState({
diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
index 663dd4c9299c9b..b16eef6fa24597 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
@@ -137,10 +137,11 @@ class DownshiftMultiple extends React.Component {
   };
 
   handleDelete = item => () => {
-    const selectedItem = [...this.state.selectedItem];
-    selectedItem.splice(selectedItem.indexOf(item), 1);
-
-    this.setState({ selectedItem });
+    this.setState(state => {
+      const selectedItem = [...state.selectedItem];
+      selectedItem.splice(selectedItem.indexOf(item), 1);
+      return { selectedItem };
+    });
   };
 
   render() {
diff --git a/docs/src/pages/demos/cards/RecipeReviewCard.js b/docs/src/pages/demos/cards/RecipeReviewCard.js
index 771cf2a68f7dce..3f8b940d5fb8c5 100644
--- a/docs/src/pages/demos/cards/RecipeReviewCard.js
+++ b/docs/src/pages/demos/cards/RecipeReviewCard.js
@@ -47,7 +47,7 @@ class RecipeReviewCard extends React.Component {
   state = { expanded: false };
 
   handleExpandClick = () => {
-    this.setState({ expanded: !this.state.expanded });
+    this.setState(state => ({ expanded: !state.expanded }));
   };
 
   render() {
diff --git a/docs/src/pages/demos/chips/ChipsArray.js b/docs/src/pages/demos/chips/ChipsArray.js
index 8275f47dd9f0f0..b2fe078221c023 100644
--- a/docs/src/pages/demos/chips/ChipsArray.js
+++ b/docs/src/pages/demos/chips/ChipsArray.js
@@ -35,10 +35,12 @@ class ChipsArray extends React.Component {
       return;
     }
 
-    const chipData = [...this.state.chipData];
-    const chipToDelete = chipData.indexOf(data);
-    chipData.splice(chipToDelete, 1);
-    this.setState({ chipData });
+    this.setState(state => {
+      const chipData = [...state.chipData];
+      const chipToDelete = chipData.indexOf(data);
+      chipData.splice(chipToDelete, 1);
+      return { chipData };
+    });
   };
 
   render() {
diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
index 9ff25bf78dfc5c..26a6996c17aa8e 100644
--- a/docs/src/pages/demos/dialogs/ConfirmationDialog.js
+++ b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
@@ -32,7 +32,9 @@ const options = [
   'Umbriel',
 ];
 
-class ConfirmationDialog extends React.Component {
+class ConfirmationDialogRaw extends React.Component {
+  radioGroup = null;
+
   constructor(props) {
     super(props);
 
@@ -48,8 +50,6 @@ class ConfirmationDialog extends React.Component {
     }
   }
 
-  radioGroup = null;
-
   handleEntering = () => {
     this.radioGroup.focus();
   };
@@ -107,7 +107,7 @@ class ConfirmationDialog extends React.Component {
   }
 }
 
-ConfirmationDialog.propTypes = {
+ConfirmationDialogRaw.propTypes = {
   onClose: PropTypes.func,
   value: PropTypes.string,
 };
@@ -118,20 +118,20 @@ const styles = theme => ({
     maxWidth: 360,
     backgroundColor: theme.palette.background.paper,
   },
-  dialog: {
+  paper: {
     width: '80%',
     maxHeight: 435,
   },
 });
 
-class ConfirmationDialogDemo extends React.Component {
+class ConfirmationDialog extends React.Component {
+  button = null;
+
   state = {
     open: false,
     value: 'Dione',
   };
 
-  button = undefined;
-
   handleClickListItem = () => {
     this.setState({ open: true });
   };
@@ -161,9 +161,9 @@ class ConfirmationDialogDemo extends React.Component {
           <ListItem button divider disabled>
             <ListItemText primary="Default notification ringtone" secondary="Tethys" />
           </ListItem>
-          <ConfirmationDialog
+          <ConfirmationDialogRaw
             classes={{
-              paper: classes.dialog,
+              paper: classes.paper,
             }}
             open={this.state.open}
             onClose={this.handleClose}
@@ -175,8 +175,8 @@ class ConfirmationDialogDemo extends React.Component {
   }
 }
 
-ConfirmationDialogDemo.propTypes = {
+ConfirmationDialog.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(ConfirmationDialogDemo);
+export default withStyles(styles)(ConfirmationDialog);
diff --git a/docs/src/pages/demos/drawers/ResponsiveDrawer.js b/docs/src/pages/demos/drawers/ResponsiveDrawer.js
index d648227ad98843..a5319285429f19 100644
--- a/docs/src/pages/demos/drawers/ResponsiveDrawer.js
+++ b/docs/src/pages/demos/drawers/ResponsiveDrawer.js
@@ -56,7 +56,7 @@ class ResponsiveDrawer extends React.Component {
   };
 
   handleDrawerToggle = () => {
-    this.setState({ mobileOpen: !this.state.mobileOpen });
+    this.setState(state => ({ mobileOpen: !state.mobileOpen }));
   };
 
   render() {
diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js
index ab7be4ed8157d5..2321f470dc5bb4 100644
--- a/docs/src/pages/demos/lists/NestedList.js
+++ b/docs/src/pages/demos/lists/NestedList.js
@@ -29,7 +29,7 @@ class NestedList extends React.Component {
   state = { open: true };
 
   handleClick = () => {
-    this.setState({ open: !this.state.open });
+    this.setState(state => ({ open: !state.open }));
   };
 
   render() {
diff --git a/docs/src/pages/demos/menus/MenuListComposition.js b/docs/src/pages/demos/menus/MenuListComposition.js
index 86d194dc049f5f..62e3fcfb1d5efb 100644
--- a/docs/src/pages/demos/menus/MenuListComposition.js
+++ b/docs/src/pages/demos/menus/MenuListComposition.js
@@ -30,7 +30,7 @@ class MenuListComposition extends React.Component {
   };
 
   handleToggle = () => {
-    this.setState({ open: !this.state.open });
+    this.setState(state => ({ open: !state.open }));
   };
 
   handleClose = event => {
diff --git a/docs/src/pages/demos/menus/SimpleListMenu.js b/docs/src/pages/demos/menus/SimpleListMenu.js
index bca03cfd070ec7..d48d1bd15d7fca 100644
--- a/docs/src/pages/demos/menus/SimpleListMenu.js
+++ b/docs/src/pages/demos/menus/SimpleListMenu.js
@@ -23,13 +23,13 @@ const options = [
 ];
 
 class SimpleListMenu extends React.Component {
+  button = null;
+
   state = {
     anchorEl: null,
     selectedIndex: 1,
   };
 
-  button = undefined;
-
   handleClickListItem = event => {
     this.setState({ anchorEl: event.currentTarget });
   };
diff --git a/docs/src/pages/demos/progress/CircularDeterminate.js b/docs/src/pages/demos/progress/CircularDeterminate.js
index 84c90bb6e841fb..72eddb68e16032 100644
--- a/docs/src/pages/demos/progress/CircularDeterminate.js
+++ b/docs/src/pages/demos/progress/CircularDeterminate.js
@@ -10,6 +10,8 @@ const styles = theme => ({
 });
 
 class CircularDeterminate extends React.Component {
+  timer = null;
+
   state = {
     completed: 0,
   };
@@ -22,8 +24,6 @@ class CircularDeterminate extends React.Component {
     clearInterval(this.timer);
   }
 
-  timer;
-
   progress = () => {
     const { completed } = this.state;
     this.setState({ completed: completed >= 100 ? 0 : completed + 1 });
diff --git a/docs/src/pages/demos/progress/CircularIntegration.js b/docs/src/pages/demos/progress/CircularIntegration.js
index cfe5be2cde8b14..a33c7df6b6cbc0 100644
--- a/docs/src/pages/demos/progress/CircularIntegration.js
+++ b/docs/src/pages/demos/progress/CircularIntegration.js
@@ -41,6 +41,8 @@ const styles = theme => ({
 });
 
 class CircularIntegration extends React.Component {
+  timer = null;
+
   state = {
     loading: false,
     success: false,
@@ -69,8 +71,6 @@ class CircularIntegration extends React.Component {
     }
   };
 
-  timer = undefined;
-
   render() {
     const { loading, success } = this.state;
     const { classes } = this.props;
diff --git a/docs/src/pages/demos/progress/CircularStatic.js b/docs/src/pages/demos/progress/CircularStatic.js
index 72d1594c3039df..58ae7a9c5c8c4e 100644
--- a/docs/src/pages/demos/progress/CircularStatic.js
+++ b/docs/src/pages/demos/progress/CircularStatic.js
@@ -10,6 +10,8 @@ const styles = theme => ({
 });
 
 class CircularStatic extends React.Component {
+  timer = null;
+
   state = {
     completed: 0,
   };
@@ -22,8 +24,6 @@ class CircularStatic extends React.Component {
     clearInterval(this.timer);
   }
 
-  timer;
-
   progress = () => {
     const { completed } = this.state;
     this.setState({ completed: completed >= 100 ? 0 : completed + 10 });
diff --git a/docs/src/pages/demos/progress/DelayingAppearance.js b/docs/src/pages/demos/progress/DelayingAppearance.js
index f57d705c88b2f2..c73db3c5eb302d 100644
--- a/docs/src/pages/demos/progress/DelayingAppearance.js
+++ b/docs/src/pages/demos/progress/DelayingAppearance.js
@@ -21,6 +21,8 @@ const styles = theme => ({
 });
 
 class DelayingAppearance extends React.Component {
+  timer = null;
+
   state = {
     loading: false,
     query: 'idle',
@@ -30,12 +32,10 @@ class DelayingAppearance extends React.Component {
     clearTimeout(this.timer);
   }
 
-  timer = null;
-
   handleClickLoading = () => {
-    this.setState({
-      loading: !this.state.loading,
-    });
+    this.setState(state => ({
+      loading: !state.loading,
+    }));
   };
 
   handleClickQuery = () => {
diff --git a/docs/src/pages/demos/progress/LinearBuffer.js b/docs/src/pages/demos/progress/LinearBuffer.js
index 7bcf4ea7ca414f..e74e372d441196 100644
--- a/docs/src/pages/demos/progress/LinearBuffer.js
+++ b/docs/src/pages/demos/progress/LinearBuffer.js
@@ -10,6 +10,8 @@ const styles = {
 };
 
 class LinearBuffer extends React.Component {
+  timer = null;
+
   state = {
     completed: 0,
     buffer: 10,
@@ -23,8 +25,6 @@ class LinearBuffer extends React.Component {
     clearInterval(this.timer);
   }
 
-  timer = null;
-
   progress = () => {
     const { completed } = this.state;
     if (completed > 100) {
diff --git a/docs/src/pages/demos/progress/LinearDeterminate.js b/docs/src/pages/demos/progress/LinearDeterminate.js
index 2a0625cba93f61..d9965ca952cc96 100644
--- a/docs/src/pages/demos/progress/LinearDeterminate.js
+++ b/docs/src/pages/demos/progress/LinearDeterminate.js
@@ -10,6 +10,8 @@ const styles = {
 };
 
 class LinearDeterminate extends React.Component {
+  timer = null;
+
   state = {
     completed: 0,
   };
@@ -22,8 +24,6 @@ class LinearDeterminate extends React.Component {
     clearInterval(this.timer);
   }
 
-  timer = null;
-
   progress = () => {
     const { completed } = this.state;
     if (completed === 100) {
diff --git a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js
index 772f016c93e0b7..dc77ed157038bd 100644
--- a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js
+++ b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js
@@ -14,13 +14,13 @@ const styles = theme => ({
 });
 
 class ConsecutiveSnackbars extends React.Component {
+  queue = [];
+
   state = {
     open: false,
     messageInfo: {},
   };
 
-  queue = [];
-
   handleClick = message => () => {
     this.queue.push({
       message,
diff --git a/docs/src/pages/demos/steppers/DotsMobileStepper.js b/docs/src/pages/demos/steppers/DotsMobileStepper.js
index b14062bf370fba..9dd06c28d68c44 100644
--- a/docs/src/pages/demos/steppers/DotsMobileStepper.js
+++ b/docs/src/pages/demos/steppers/DotsMobileStepper.js
@@ -19,15 +19,15 @@ class DotsMobileStepper extends React.Component {
   };
 
   handleNext = () => {
-    this.setState({
-      activeStep: this.state.activeStep + 1,
-    });
+    this.setState(state => ({
+      activeStep: state.activeStep + 1,
+    }));
   };
 
   handleBack = () => {
-    this.setState({
-      activeStep: this.state.activeStep - 1,
-    });
+    this.setState(state => ({
+      activeStep: state.activeStep - 1,
+    }));
   };
 
   render() {
diff --git a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js
index 01c6fe3352a89e..d4c84d028f4cc9 100644
--- a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js
+++ b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js
@@ -38,10 +38,6 @@ function getStepContent(step) {
 }
 
 class HorizontalLinearStepper extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-  };
-
   state = {
     activeStep: 0,
     skipped: new Set(),
@@ -51,10 +47,6 @@ class HorizontalLinearStepper extends React.Component {
     return step === 1;
   };
 
-  isStepSkipped(step) {
-    return this.state.skipped.has(step);
-  }
-
   handleNext = () => {
     const { activeStep } = this.state;
     let { skipped } = this.state;
@@ -82,11 +74,14 @@ class HorizontalLinearStepper extends React.Component {
       // it should never occur unless someone's actively trying to break something.
       throw new Error("You can't skip a step that isn't optional.");
     }
-    const skipped = new Set(this.state.skipped.values());
-    skipped.add(activeStep);
-    this.setState({
-      activeStep: this.state.activeStep + 1,
-      skipped,
+
+    this.setState(state => {
+      const skipped = new Set(state.skipped.values());
+      skipped.add(activeStep);
+      return {
+        activeStep: state.activeStep + 1,
+        skipped,
+      };
     });
   };
 
@@ -96,6 +91,10 @@ class HorizontalLinearStepper extends React.Component {
     });
   };
 
+  isStepSkipped(step) {
+    return this.state.skipped.has(step);
+  }
+
   render() {
     const { classes } = this.props;
     const steps = getSteps();
@@ -168,4 +167,8 @@ class HorizontalLinearStepper extends React.Component {
   }
 }
 
+HorizontalLinearStepper.propTypes = {
+  classes: PropTypes.object,
+};
+
 export default withStyles(styles)(HorizontalLinearStepper);
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js
index 7d914ace2f42a9..ca56f0393f574f 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js
@@ -54,30 +54,10 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component {
     return getSteps().length;
   };
 
-  isStepComplete(step) {
-    return this.state.completed.has(step);
-  }
-
-  completedSteps() {
-    return this.state.completed.size;
-  }
-
-  allStepsCompleted() {
-    return this.completedSteps() === this.totalSteps() - this.skippedSteps();
-  }
-
-  isLastStep() {
-    return this.state.activeStep === this.totalSteps() - 1;
-  }
-
   isStepOptional = step => {
     return step === 1;
   };
 
-  isStepSkipped(step) {
-    return this.state.skipped.has(step);
-  }
-
   handleSkip = () => {
     const { activeStep } = this.state;
     if (!this.isStepOptional(activeStep)) {
@@ -85,18 +65,17 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component {
       // it should never occur unless someone's actively trying to break something.
       throw new Error("You can't skip a step that isn't optional.");
     }
-    const skipped = new Set(this.state.skipped);
-    skipped.add(activeStep);
-    this.setState({
-      activeStep: this.state.activeStep + 1,
-      skipped,
+
+    this.setState(state => {
+      const skipped = new Set(state.skipped.values());
+      skipped.add(activeStep);
+      return {
+        activeStep: state.activeStep + 1,
+        skipped,
+      };
     });
   };
 
-  skippedSteps() {
-    return this.state.skipped.size;
-  }
-
   handleNext = () => {
     let activeStep;
 
@@ -114,9 +93,9 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component {
   };
 
   handleBack = () => {
-    this.setState({
-      activeStep: this.state.activeStep - 1,
-    });
+    this.setState(state => ({
+      activeStep: state.activeStep - 1,
+    }));
   };
 
   handleStep = step => () => {
@@ -126,11 +105,13 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component {
   };
 
   handleComplete = () => {
+    // eslint-disable-next-line react/no-access-state-in-setstate
     const completed = new Set(this.state.completed);
     completed.add(this.state.activeStep);
     this.setState({
       completed,
     });
+
     /**
      * Sigh... it would be much nicer to replace the following if conditional with
      * `if (!this.allStepsComplete())` however state is not set when we do this,
@@ -149,6 +130,30 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component {
     });
   };
 
+  skippedSteps() {
+    return this.state.skipped.size;
+  }
+
+  isStepSkipped(step) {
+    return this.state.skipped.has(step);
+  }
+
+  isStepComplete(step) {
+    return this.state.completed.has(step);
+  }
+
+  completedSteps() {
+    return this.state.completed.size;
+  }
+
+  allStepsCompleted() {
+    return this.completedSteps() === this.totalSteps() - this.skippedSteps();
+  }
+
+  isLastStep() {
+    return this.state.activeStep === this.totalSteps() - 1;
+  }
+
   render() {
     const { classes } = this.props;
     const steps = getSteps();
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js
index e1a69cae762878..8b39ae66d242b1 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js
@@ -46,22 +46,10 @@ class HorizontalNonLinearStepper extends React.Component {
     completed: {},
   };
 
-  completedSteps() {
-    return Object.keys(this.state.completed).length;
-  }
-
   totalSteps = () => {
     return getSteps().length;
   };
 
-  isLastStep() {
-    return this.state.activeStep === this.totalSteps() - 1;
-  }
-
-  allStepsCompleted() {
-    return this.completedSteps() === this.totalSteps();
-  }
-
   handleNext = () => {
     let activeStep;
 
@@ -107,6 +95,18 @@ class HorizontalNonLinearStepper extends React.Component {
     });
   };
 
+  completedSteps() {
+    return Object.keys(this.state.completed).length;
+  }
+
+  isLastStep() {
+    return this.state.activeStep === this.totalSteps() - 1;
+  }
+
+  allStepsCompleted() {
+    return this.completedSteps() === this.totalSteps();
+  }
+
   render() {
     const { classes } = this.props;
     const steps = getSteps();
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js
index 09b540032f3884..0613f1e90959a6 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js
@@ -38,10 +38,6 @@ function getStepContent(step) {
 }
 
 class HorizontalNonLinearStepperWithError extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-  };
-
   state = {
     activeStep: 0,
     skipped: new Set(),
@@ -51,10 +47,6 @@ class HorizontalNonLinearStepperWithError extends React.Component {
     return step === 1;
   };
 
-  isStepSkipped(step) {
-    return this.state.skipped.has(step);
-  }
-
   isStepFailed = step => {
     return step === 1;
   };
@@ -86,11 +78,14 @@ class HorizontalNonLinearStepperWithError extends React.Component {
       // it should never occur unless someone's actively trying to break something.
       throw new Error("You can't skip a step that isn't optional.");
     }
-    const skipped = new Set(this.state.skipped.values());
-    skipped.add(activeStep);
-    this.setState({
-      activeStep: this.state.activeStep + 1,
-      skipped,
+
+    this.setState(state => {
+      const skipped = new Set(state.skipped.values());
+      skipped.add(activeStep);
+      return {
+        activeStep: state.activeStep + 1,
+        skipped,
+      };
     });
   };
 
@@ -100,6 +95,10 @@ class HorizontalNonLinearStepperWithError extends React.Component {
     });
   };
 
+  isStepSkipped(step) {
+    return this.state.skipped.has(step);
+  }
+
   render() {
     const { classes } = this.props;
     const steps = getSteps();
@@ -179,4 +178,8 @@ class HorizontalNonLinearStepperWithError extends React.Component {
   }
 }
 
+HorizontalNonLinearStepperWithError.propTypes = {
+  classes: PropTypes.object,
+};
+
 export default withStyles(styles)(HorizontalNonLinearStepperWithError);
diff --git a/docs/src/pages/demos/steppers/ProgressMobileStepper.js b/docs/src/pages/demos/steppers/ProgressMobileStepper.js
index acb7f4beb31669..7f80735c59c218 100644
--- a/docs/src/pages/demos/steppers/ProgressMobileStepper.js
+++ b/docs/src/pages/demos/steppers/ProgressMobileStepper.js
@@ -19,15 +19,15 @@ class ProgressMobileStepper extends React.Component {
   };
 
   handleNext = () => {
-    this.setState({
-      activeStep: this.state.activeStep + 1,
-    });
+    this.setState(state => ({
+      activeStep: state.activeStep + 1,
+    }));
   };
 
   handleBack = () => {
-    this.setState({
-      activeStep: this.state.activeStep - 1,
-    });
+    this.setState(state => ({
+      activeStep: state.activeStep - 1,
+    }));
   };
 
   render() {
diff --git a/docs/src/pages/demos/steppers/VerticalLinearStepper.js b/docs/src/pages/demos/steppers/VerticalLinearStepper.js
index 0827a032036bff..f4e8bc4a574378 100644
--- a/docs/src/pages/demos/steppers/VerticalLinearStepper.js
+++ b/docs/src/pages/demos/steppers/VerticalLinearStepper.js
@@ -53,15 +53,15 @@ class VerticalLinearStepper extends React.Component {
   };
 
   handleNext = () => {
-    this.setState({
-      activeStep: this.state.activeStep + 1,
-    });
+    this.setState(state => ({
+      activeStep: state.activeStep + 1,
+    }));
   };
 
   handleBack = () => {
-    this.setState({
-      activeStep: this.state.activeStep - 1,
-    });
+    this.setState(state => ({
+      activeStep: state.activeStep - 1,
+    }));
   };
 
   handleReset = () => {
diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
index a51434f0ca6b55..eb320694a1110c 100644
--- a/docs/src/pages/demos/tables/EnhancedTable.js
+++ b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -222,7 +222,7 @@ class EnhancedTable extends React.Component {
 
   handleSelectAllClick = (event, checked) => {
     if (checked) {
-      this.setState({ selected: this.state.data.map(n => n.id) });
+      this.setState(state => ({ selected: state.data.map(n => n.id) }));
       return;
     }
     this.setState({ selected: [] });
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.js b/docs/src/pages/demos/text-fields/InputAdornments.js
index 2ecd4e965db6ce..ed150111d00469 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.js
+++ b/docs/src/pages/demos/text-fields/InputAdornments.js
@@ -62,7 +62,7 @@ class InputAdornments extends React.Component {
   };
 
   handleClickShowPassword = () => {
-    this.setState({ showPassword: !this.state.showPassword });
+    this.setState(state => ({ showPassword: !state.showPassword }));
   };
 
   render() {
diff --git a/docs/src/pages/lab/slider/DisabledSlider.js b/docs/src/pages/lab/slider/DisabledSlider.js
index f2f1096b9d7e2e..e300209d20b2af 100644
--- a/docs/src/pages/lab/slider/DisabledSlider.js
+++ b/docs/src/pages/lab/slider/DisabledSlider.js
@@ -4,14 +4,16 @@ import { withStyles } from '@material-ui/core/styles';
 import Slider from '@material-ui/lab/Slider';
 
 const styles = {
-  container: {
+  root: {
     width: 300,
   },
 };
 
-function DisabledSlider({ classes }) {
+function DisabledSlider(props) {
+  const { classes } = props;
+
   return (
-    <div className={classes.container}>
+    <div className={classes.root}>
       <Slider value={0} disabled />
       <Slider value={50} disabled />
       <Slider value={100} disabled />
diff --git a/docs/src/pages/lab/slider/ReverseSlider.js b/docs/src/pages/lab/slider/ReverseSlider.js
index a87e05b1e3c1d4..6bf3ead624b9b2 100644
--- a/docs/src/pages/lab/slider/ReverseSlider.js
+++ b/docs/src/pages/lab/slider/ReverseSlider.js
@@ -4,21 +4,26 @@ import { withStyles } from '@material-ui/core/styles';
 import Slider from '@material-ui/lab/Slider';
 
 const styles = {
-  container: {
+  root: {
     width: 300,
   },
 };
 
 class ReverseSlider extends React.Component {
-  state = { value: 50 };
+  state = {
+    value: 50,
+  };
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
 
-  handleChange = (event, value) => this.setState({ value });
   render() {
     const { classes } = this.props;
     const { value } = this.state;
 
     return (
-      <div className={classes.container}>
+      <div className={classes.root}>
         <Slider value={value} onChange={this.handleChange} />
         <Slider value={value} onChange={this.handleChange} reverse />
       </div>
diff --git a/docs/src/pages/lab/slider/SimpleSlider.js b/docs/src/pages/lab/slider/SimpleSlider.js
index 491ee41acf9968..b564e5a9116611 100644
--- a/docs/src/pages/lab/slider/SimpleSlider.js
+++ b/docs/src/pages/lab/slider/SimpleSlider.js
@@ -5,22 +5,26 @@ import Typography from '@material-ui/core/Typography';
 import Slider from '@material-ui/lab/Slider';
 
 const styles = {
-  container: {
+  root: {
     width: 300,
   },
 };
 
 class SimpleSlider extends React.Component {
-  state = { value: 50 };
+  state = {
+    value: 50,
+  };
 
-  handleChange = (event, value) => this.setState({ value });
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
 
   render() {
     const { classes } = this.props;
     const { value } = this.state;
 
     return (
-      <div className={classes.container}>
+      <div className={classes.root}>
         <Typography id="label">Slider label</Typography>
         <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
       </div>
diff --git a/docs/src/pages/lab/slider/StepSlider.js b/docs/src/pages/lab/slider/StepSlider.js
index 9777c822c0d3a5..593b5800c9a108 100644
--- a/docs/src/pages/lab/slider/StepSlider.js
+++ b/docs/src/pages/lab/slider/StepSlider.js
@@ -4,22 +4,26 @@ import { withStyles } from '@material-ui/core/styles';
 import Slider from '@material-ui/lab/Slider';
 
 const styles = {
-  container: {
+  root: {
     width: 300,
   },
 };
 
 class StepSlider extends React.Component {
-  state = { value: 3 };
+  state = {
+    value: 3,
+  };
 
-  handleChange = (event, value) => this.setState({ value });
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
 
   render() {
     const { classes } = this.props;
     const { value } = this.state;
 
     return (
-      <div className={classes.container}>
+      <div className={classes.root}>
         <Slider value={value} min={0} max={6} step={1} onChange={this.handleChange} />
       </div>
     );
diff --git a/docs/src/pages/lab/slider/VerticalSlider.js b/docs/src/pages/lab/slider/VerticalSlider.js
index 08c5d6d9658779..42fd8d6905a700 100644
--- a/docs/src/pages/lab/slider/VerticalSlider.js
+++ b/docs/src/pages/lab/slider/VerticalSlider.js
@@ -4,21 +4,27 @@ import { withStyles } from '@material-ui/core/styles';
 import Slider from '@material-ui/lab/Slider';
 
 const styles = {
-  container: {
+  root: {
     display: 'flex',
     height: 300,
   },
 };
 
 class VerticalSlider extends React.Component {
-  state = { value: 50 };
-  handleChange = (event, value) => this.setState({ value });
+  state = {
+    value: 50,
+  };
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
   render() {
     const { classes } = this.props;
     const { value } = this.state;
 
     return (
-      <div className={classes.container}>
+      <div className={classes.root}>
         <Slider value={value} onChange={this.handleChange} vertical />
         <Slider value={value} onChange={this.handleChange} vertical reverse />
       </div>
diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md
index 877122c2b6e515..94dfeb4f30755d 100644
--- a/docs/src/pages/lab/slider/slider.md
+++ b/docs/src/pages/lab/slider/slider.md
@@ -7,16 +7,21 @@ components: Slider
 A [slider](https://material.io/guidelines/components/sliders.html) is an interface for users to input a value in a range. Sliders can be continuous or discrete and can be enabled or disabled.
 
 ## Simple slider
+
 {{"demo": "pages/lab/slider/SimpleSlider.js"}}
 
 ## Slider with steps
+
 {{"demo": "pages/lab/slider/StepSlider.js"}}
 
 ## Disabled slider
+
 {{"demo": "pages/lab/slider/DisabledSlider.js"}}
 
 ## Vertical slider
+
 {{"demo": "pages/lab/slider/VerticalSlider.js"}}
 
 ## Reverse slider
-{{"demo": "pages/lab/slider/ReverseSlider.js"}}
\ No newline at end of file
+
+{{"demo": "pages/lab/slider/ReverseSlider.js"}}
diff --git a/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js b/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js
index 4b66f462dc58ff..cd42b725909601 100644
--- a/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js
+++ b/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js
@@ -38,16 +38,16 @@ class OpenIconSpeedDial extends React.Component {
   };
 
   handleVisibility = () => {
-    this.setState({
+    this.setState(state => ({
       open: false,
-      hidden: !this.state.hidden,
-    });
+      hidden: !state.hidden,
+    }));
   };
 
   handleClick = () => {
-    this.setState({
-      open: !this.state.open,
-    });
+    this.setState(state => ({
+      open: !state.open,
+    }));
   };
 
   handleOpen = () => {
diff --git a/docs/src/pages/lab/speed-dial/SpeedDials.js b/docs/src/pages/lab/speed-dial/SpeedDials.js
index a8f3f90720e018..f296b1d530f2cb 100644
--- a/docs/src/pages/lab/speed-dial/SpeedDials.js
+++ b/docs/src/pages/lab/speed-dial/SpeedDials.js
@@ -37,16 +37,16 @@ class SpeedDials extends React.Component {
   };
 
   handleVisibility = () => {
-    this.setState({
+    this.setState(state => ({
       open: false,
-      hidden: !this.state.hidden,
-    });
+      hidden: !state.hidden,
+    }));
   };
 
   handleClick = () => {
-    this.setState({
-      open: !this.state.open,
-    });
+    this.setState(state => ({
+      open: !state.open,
+    }));
   };
 
   handleOpen = () => {
diff --git a/docs/src/pages/style/typography/Types.js b/docs/src/pages/style/typography/Types.js
index 6efac84f640758..fa1bf03045f87e 100644
--- a/docs/src/pages/style/typography/Types.js
+++ b/docs/src/pages/style/typography/Types.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import withTheme from '@material-ui/core/styles/withTheme';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -10,9 +10,11 @@ const styles = {
   },
 };
 
-function Types() {
+function Types(props) {
+  const { classes } = props;
+
   return (
-    <div style={styles.root}>
+    <div className={classes.root}>
       <Typography variant="display4" gutterBottom>
         Display 4
       </Typography>
@@ -57,7 +59,7 @@ function Types() {
 }
 
 Types.propTypes = {
-  theme: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
 };
 
-export default withTheme()(Types);
+export default withStyles(styles)(Types);
diff --git a/docs/src/pages/utils/popovers/AnchorPlayground.js b/docs/src/pages/utils/popovers/AnchorPlayground.js
index 529e17bd42aa99..9398a1227730a4 100644
--- a/docs/src/pages/utils/popovers/AnchorPlayground.js
+++ b/docs/src/pages/utils/popovers/AnchorPlayground.js
@@ -65,6 +65,8 @@ const inlineStyles = {
 };
 
 class AnchorPlayground extends React.Component {
+  anchorEl = null;
+
   state = {
     open: false,
     anchorOriginVertical: 'top',
@@ -100,8 +102,6 @@ class AnchorPlayground extends React.Component {
     });
   };
 
-  anchorEl = null;
-
   render() {
     const { classes } = this.props;
     const {
diff --git a/docs/src/pages/utils/portal/SimplePortal.js b/docs/src/pages/utils/portal/SimplePortal.js
index 18a678490a0125..c08f64d0929b5d 100644
--- a/docs/src/pages/utils/portal/SimplePortal.js
+++ b/docs/src/pages/utils/portal/SimplePortal.js
@@ -15,16 +15,16 @@ const styles = theme => ({
 });
 
 class SimplePortal extends React.Component {
+  container = null;
+
   state = {
     show: false,
   };
 
   handleClick = () => {
-    this.setState({ show: !this.state.show });
+    this.setState(state => ({ show: !state.show }));
   };
 
-  container = null;
-
   render() {
     const { classes } = this.props;
     const { show } = this.state;
diff --git a/docs/src/pages/utils/transitions/SimpleCollapse.js b/docs/src/pages/utils/transitions/SimpleCollapse.js
index 807a0ed82c6ebc..433fae0e662073 100644
--- a/docs/src/pages/utils/transitions/SimpleCollapse.js
+++ b/docs/src/pages/utils/transitions/SimpleCollapse.js
@@ -32,7 +32,7 @@ class SimpleCollapse extends React.Component {
   };
 
   handleChange = () => {
-    this.setState({ checked: !this.state.checked });
+    this.setState(state => ({ checked: !state.checked }));
   };
 
   render() {
diff --git a/docs/src/pages/utils/transitions/SimpleFade.js b/docs/src/pages/utils/transitions/SimpleFade.js
index 5d092dd79a4799..9fa64ed007ffde 100644
--- a/docs/src/pages/utils/transitions/SimpleFade.js
+++ b/docs/src/pages/utils/transitions/SimpleFade.js
@@ -29,7 +29,7 @@ class SimpleFade extends React.Component {
   };
 
   handleChange = () => {
-    this.setState({ checked: !this.state.checked });
+    this.setState(state => ({ checked: !state.checked }));
   };
 
   render() {
diff --git a/docs/src/pages/utils/transitions/SimpleGrow.js b/docs/src/pages/utils/transitions/SimpleGrow.js
index decdd844201224..0674c42ab56608 100644
--- a/docs/src/pages/utils/transitions/SimpleGrow.js
+++ b/docs/src/pages/utils/transitions/SimpleGrow.js
@@ -32,7 +32,7 @@ class SimpleGrow extends React.Component {
   };
 
   handleChange = () => {
-    this.setState({ checked: !this.state.checked });
+    this.setState(state => ({ checked: !state.checked }));
   };
 
   render() {
diff --git a/docs/src/pages/utils/transitions/SimpleSlide.js b/docs/src/pages/utils/transitions/SimpleSlide.js
index 424f29a73c67ff..b0ee2e3c107a2c 100644
--- a/docs/src/pages/utils/transitions/SimpleSlide.js
+++ b/docs/src/pages/utils/transitions/SimpleSlide.js
@@ -34,7 +34,7 @@ class SimpleSlide extends React.Component {
   };
 
   handleChange = () => {
-    this.setState({ checked: !this.state.checked });
+    this.setState(state => ({ checked: !state.checked }));
   };
 
   render() {
diff --git a/docs/src/pages/utils/transitions/SimpleZoom.js b/docs/src/pages/utils/transitions/SimpleZoom.js
index cd0331a4e170c5..c51328de47817e 100644
--- a/docs/src/pages/utils/transitions/SimpleZoom.js
+++ b/docs/src/pages/utils/transitions/SimpleZoom.js
@@ -32,7 +32,7 @@ class SimpleZoom extends React.Component {
   };
 
   handleChange = () => {
-    this.setState({ checked: !this.state.checked });
+    this.setState(state => ({ checked: !state.checked }));
   };
 
   render() {
diff --git a/examples/gatsby/src/withRoot.js b/examples/gatsby/src/withRoot.js
index 978b2d9e0de4d2..15fcda5f4f8859 100644
--- a/examples/gatsby/src/withRoot.js
+++ b/examples/gatsby/src/withRoot.js
@@ -6,6 +6,8 @@ import getPageContext from './getPageContext';
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
+    pageContext = null;
+
     constructor(props) {
       super(props);
 
@@ -20,8 +22,6 @@ function withRoot(Component) {
       }
     }
 
-    pageContext = null;
-
     render() {
       // MuiThemeProvider makes the theme available down the React tree thanks to React context.
       return (
diff --git a/examples/nextjs/src/withRoot.js b/examples/nextjs/src/withRoot.js
index 6991e050f3a178..579b728752e038 100644
--- a/examples/nextjs/src/withRoot.js
+++ b/examples/nextjs/src/withRoot.js
@@ -6,6 +6,8 @@ import getPageContext from './getPageContext';
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
+    pageContext = null;
+
     constructor(props) {
       super(props);
 
@@ -20,8 +22,6 @@ function withRoot(Component) {
       }
     }
 
-    pageContext = null;
-
     render() {
       // MuiThemeProvider makes the theme available down the React tree thanks to React context.
       return (
diff --git a/package.json b/package.json
index ecf90b649a03c0..89809b416828ba 100644
--- a/package.json
+++ b/package.json
@@ -85,11 +85,11 @@
     "clipboard-copy": "^2.0.0",
     "cross-env": "^5.1.1",
     "doctrine": "^2.0.0",
-    "downshift": "^1.22.1",
+    "downshift": "^2.0.0",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
-    "eslint": "^4.11.0",
-    "eslint-config-airbnb": "^16.1.0",
+    "eslint": "^5.0.0",
+    "eslint-config-airbnb": "^17.0.0",
     "eslint-import-resolver-webpack": "^0.10.0",
     "eslint-plugin-babel": "^5.0.0",
     "eslint-plugin-flowtype": "^2.40.1",
@@ -142,14 +142,14 @@
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
     "rimraf": "^2.6.2",
-    "rollup": "^0.59.4",
+    "rollup": "^0.61.0",
     "rollup-plugin-babel": "^4.0.0-beta.4",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-globals": "^1.2.1",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-size-snapshot": "^0.5.1",
     "rollup-plugin-uglify": "^4.0.0",
-    "sinon": "^5.0.3",
+    "sinon": "^5.0.0",
     "size-limit": "^0.18.0",
     "typescript": "^2.6.1",
     "url-loader": "^1.0.1",
diff --git a/packages/material-ui-codemod/src/v0.15.0/import-path.js b/packages/material-ui-codemod/src/v0.15.0/import-path.js
index 54e7d336be5a16..64cfa1138cd087 100644
--- a/packages/material-ui-codemod/src/v0.15.0/import-path.js
+++ b/packages/material-ui-codemod/src/v0.15.0/import-path.js
@@ -62,7 +62,9 @@ const pathBasePackage = ['material-ui/lib/', 'material-ui/'];
 function getPathsBase(path) {
   if (path.indexOf(pathBaseSource[0]) === 0) {
     return pathBaseSource;
-  } else if (path.indexOf(pathBasePackage[0]) === 0) {
+  }
+
+  if (path.indexOf(pathBasePackage[0]) === 0) {
     return pathBasePackage;
   }
 
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index d80f61234e8f07..5b9249d08b08c6 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -207,18 +207,6 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
 class Slider extends React.Component {
   state = { currentState: 'initial' };
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.disabled) {
-      return { currentState: 'disabled' };
-    }
-
-    if (!nextProps.disabled && prevState.currentState === 'disabled') {
-      return { currentState: 'normal' };
-    }
-
-    return null;
-  }
-
   componentDidMount() {
     if (this.container) {
       this.container.addEventListener('touchstart', preventPageScrolling, { passive: false });
@@ -229,51 +217,16 @@ class Slider extends React.Component {
     this.container.removeEventListener('touchstart', preventPageScrolling, { passive: false });
   }
 
-  emitChange(event, rawValue, callback) {
-    const { step, value: previousValue, onChange, disabled } = this.props;
-    let value = rawValue;
-
-    if (disabled) {
-      return;
-    }
-
-    if (step) {
-      value = roundToStep(rawValue, step);
-    } else {
-      value = Number(rawValue.toFixed(3));
-    }
-
-    if (typeof onChange === 'function' && value !== previousValue) {
-      onChange(event, value);
-
-      if (typeof callback === 'function') {
-        callback();
-      }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.disabled) {
+      return { currentState: 'disabled' };
     }
-  }
-
-  calculateTrackAfterStyles(percent) {
-    const { currentState } = this.state;
 
-    switch (currentState) {
-      case 'activated':
-        return `calc(100% - ${percent === 0 ? 7 : 5}px)`;
-      case 'disabled':
-        return `calc(${100 - percent}% - 6px)`;
-      default:
-        return 'calc(100% - 5px)';
+    if (!nextProps.disabled && prevState.currentState === 'disabled') {
+      return { currentState: 'normal' };
     }
-  }
-
-  calculateTrackBeforeStyles(percent) {
-    const { currentState } = this.state;
 
-    switch (currentState) {
-      case 'disabled':
-        return `calc(${percent}% - 6px)`;
-      default:
-        return `${percent}%`;
-    }
+    return null;
   }
 
   handleKeyDown = event => {
@@ -378,6 +331,53 @@ class Slider extends React.Component {
     this.emitChange(event, value);
   };
 
+  emitChange(event, rawValue, callback) {
+    const { step, value: previousValue, onChange, disabled } = this.props;
+    let value = rawValue;
+
+    if (disabled) {
+      return;
+    }
+
+    if (step) {
+      value = roundToStep(rawValue, step);
+    } else {
+      value = Number(rawValue.toFixed(3));
+    }
+
+    if (typeof onChange === 'function' && value !== previousValue) {
+      onChange(event, value);
+
+      if (typeof callback === 'function') {
+        callback();
+      }
+    }
+  }
+
+  calculateTrackAfterStyles(percent) {
+    const { currentState } = this.state;
+
+    switch (currentState) {
+      case 'activated':
+        return `calc(100% - ${percent === 0 ? 7 : 5}px)`;
+      case 'disabled':
+        return `calc(${100 - percent}% - 6px)`;
+      default:
+        return 'calc(100% - 5px)';
+    }
+  }
+
+  calculateTrackBeforeStyles(percent) {
+    const { currentState } = this.state;
+
+    switch (currentState) {
+      case 'disabled':
+        return `calc(${percent}% - 6px)`;
+      default:
+        return `${percent}%`;
+    }
+  }
+
   playJumpAnimation() {
     this.setState({ currentState: 'jumped' }, () => {
       setTimeout(() => {
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
index e3895a0819e5ec..dc96c98f997baa 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -55,29 +55,47 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
  * It contains a load of style reset and some focus/ripple logic.
  */
 class ButtonBase extends React.Component {
-  state = {};
+  ripple = null;
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (typeof prevState.focusVisible === 'undefined') {
-      return {
-        focusVisible: false,
-        lastDisabled: nextProps.disabled,
-      };
+  keyDown = false; // Used to help track keyboard activation keyDown
+
+  button = null;
+
+  focusVisibleTimeout = null;
+
+  focusVisibleCheckTime = 50;
+
+  focusVisibleMaxCheckTimes = 5;
+
+  handleMouseDown = createRippleHandler(this, 'MouseDown', 'start', () => {
+    clearTimeout(this.focusVisibleTimeout);
+    if (this.state.focusVisible) {
+      this.setState({ focusVisible: false });
     }
+  });
 
-    // The blur won't fire when the disabled state is set on a focused input.
-    // We need to book keep the focused state manually.
-    if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) {
-      return {
-        focusVisible: false,
-        lastDisabled: nextProps.disabled,
-      };
+  handleMouseUp = createRippleHandler(this, 'MouseUp', 'stop');
+
+  handleMouseLeave = createRippleHandler(this, 'MouseLeave', 'stop', event => {
+    if (this.state.focusVisible) {
+      event.preventDefault();
     }
+  });
 
-    return {
-      lastDisabled: nextProps.disabled,
-    };
-  }
+  handleTouchStart = createRippleHandler(this, 'TouchStart', 'start');
+
+  handleTouchEnd = createRippleHandler(this, 'TouchEnd', 'stop');
+
+  handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop');
+
+  handleBlur = createRippleHandler(this, 'Blur', 'stop', () => {
+    clearTimeout(this.focusVisibleTimeout);
+    if (this.state.focusVisible) {
+      this.setState({ focusVisible: false });
+    }
+  });
+
+  state = {};
 
   componentDidMount() {
     this.button = ReactDOM.findDOMNode(this);
@@ -109,6 +127,10 @@ class ButtonBase extends React.Component {
     clearTimeout(this.focusVisibleTimeout);
   }
 
+  onRippleRef = node => {
+    this.ripple = node;
+  };
+
   onFocusVisibleHandler = event => {
     this.keyDown = false;
     this.setState({ focusVisible: true });
@@ -118,16 +140,27 @@ class ButtonBase extends React.Component {
     }
   };
 
-  onRippleRef = node => {
-    this.ripple = node;
-  };
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof prevState.focusVisible === 'undefined') {
+      return {
+        focusVisible: false,
+        lastDisabled: nextProps.disabled,
+      };
+    }
 
-  ripple = null;
-  keyDown = false; // Used to help track keyboard activation keyDown
-  button = null;
-  focusVisibleTimeout = null;
-  focusVisibleCheckTime = 50;
-  focusVisibleMaxCheckTimes = 5;
+    // The blur won't fire when the disabled state is set on a focused input.
+    // We need to book keep the focused state manually.
+    if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) {
+      return {
+        focusVisible: false,
+        lastDisabled: nextProps.disabled,
+      };
+    }
+
+    return {
+      lastDisabled: nextProps.disabled,
+    };
+  }
 
   handleKeyDown = event => {
     const { component, focusRipple, onKeyDown, onClick } = this.props;
@@ -179,34 +212,6 @@ class ButtonBase extends React.Component {
     }
   };
 
-  handleMouseDown = createRippleHandler(this, 'MouseDown', 'start', () => {
-    clearTimeout(this.focusVisibleTimeout);
-    if (this.state.focusVisible) {
-      this.setState({ focusVisible: false });
-    }
-  });
-
-  handleMouseUp = createRippleHandler(this, 'MouseUp', 'stop');
-
-  handleMouseLeave = createRippleHandler(this, 'MouseLeave', 'stop', event => {
-    if (this.state.focusVisible) {
-      event.preventDefault();
-    }
-  });
-
-  handleTouchStart = createRippleHandler(this, 'TouchStart', 'start');
-
-  handleTouchEnd = createRippleHandler(this, 'TouchEnd', 'stop');
-
-  handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop');
-
-  handleBlur = createRippleHandler(this, 'Blur', 'stop', () => {
-    clearTimeout(this.focusVisibleTimeout);
-    if (this.state.focusVisible) {
-      this.setState({ focusVisible: false });
-    }
-  });
-
   handleFocus = event => {
     if (this.props.disabled) {
       return;
diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js
index 24cbb84ebe7b1b..efe6303e7a7502 100644
--- a/packages/material-ui/src/ButtonBase/TouchRipple.js
+++ b/packages/material-ui/src/ButtonBase/TouchRipple.js
@@ -88,7 +88,18 @@ export const styles = theme => ({
 });
 
 class TouchRipple extends React.PureComponent {
+  // Used to filter out mouse emulated events on mobile.
+  ignoringMouseDown = false;
+
+  // We use a timer in order to only show the ripples for touch "click" like events.
+  // We don't want to display the ripple for touch scroll events.
+  startTimer = null;
+
+  // This is the hook called once the previous timeout is ready.
+  startTimerCommit = null;
+
   state = {
+    // eslint-disable-next-line react/no-unused-state
     nextKey: 0,
     ripples: [],
   };
@@ -97,14 +108,6 @@ class TouchRipple extends React.PureComponent {
     clearTimeout(this.startTimer);
   }
 
-  // Used to filter out mouse emulated events on mobile.
-  ignoringMouseDown = false;
-  // We use a timer in order to only show the ripples for touch "click" like events.
-  // We don't want to display the ripple for touch scroll events.
-  startTimer = null;
-  // This is the hook called once the previous timeout is ready.
-  startTimerCommit = null;
-
   pulsate = () => {
     this.start({}, { pulsate: true });
   };
@@ -155,7 +158,7 @@ class TouchRipple extends React.PureComponent {
     }
 
     if (center) {
-      rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3);
+      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
 
       // For some reason the animation is broken on Mobile Chrome if the size if even.
       if (rippleSize % 2 === 0) {
@@ -166,7 +169,7 @@ class TouchRipple extends React.PureComponent {
         Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
       const sizeY =
         Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
-      rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
+      rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
     }
 
     // Touche devices
@@ -189,32 +192,27 @@ class TouchRipple extends React.PureComponent {
 
   startCommit = params => {
     const { pulsate, rippleX, rippleY, rippleSize, cb } = params;
-    let ripples = this.state.ripples;
-
-    // Add a ripple to the ripples array.
-    ripples = [
-      ...ripples,
-      <Ripple
-        key={this.state.nextKey}
-        classes={this.props.classes}
-        timeout={{
-          exit: DURATION,
-          enter: DURATION,
-        }}
-        pulsate={pulsate}
-        rippleX={rippleX}
-        rippleY={rippleY}
-        rippleSize={rippleSize}
-      />,
-    ];
 
-    this.setState(
-      {
-        nextKey: this.state.nextKey + 1,
-        ripples,
-      },
-      cb,
-    );
+    this.setState(state => {
+      return {
+        nextKey: state.nextKey + 1,
+        ripples: [
+          ...state.ripples,
+          <Ripple
+            key={state.nextKey}
+            classes={this.props.classes}
+            timeout={{
+              exit: DURATION,
+              enter: DURATION,
+            }}
+            pulsate={pulsate}
+            rippleX={rippleX}
+            rippleY={rippleY}
+            rippleSize={rippleSize}
+          />,
+        ],
+      };
+    }, cb);
   };
 
   stop = (event, cb) => {
diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
index e79a3533c54a54..a73e00dd594804 100644
--- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
+++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
@@ -11,6 +11,10 @@ import ownerDocument from '../utils/ownerDocument';
  * For instance, if you need to hide a menu when people click anywhere else on your page.
  */
 class ClickAwayListener extends React.Component {
+  node = null;
+
+  mounted = null;
+
   componentDidMount() {
     this.node = ReactDOM.findDOMNode(this);
     this.mounted = true;
@@ -20,9 +24,6 @@ class ClickAwayListener extends React.Component {
     this.mounted = false;
   }
 
-  node = null;
-  mounted = null;
-
   handleClickAway = event => {
     // Ignore events that have been `event.preventDefault()` marked.
     if (event.defaultPrevented) {
diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
index bbc5ff661ded43..3c0244b21139fa 100644
--- a/packages/material-ui/src/Collapse/Collapse.js
+++ b/packages/material-ui/src/Collapse/Collapse.js
@@ -32,14 +32,16 @@ export const styles = theme => ({
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 class Collapse extends React.Component {
+  wrapper = null;
+
+  autoTransitionDuration = null;
+
+  timer = null;
+
   componentWillUnmount() {
     clearTimeout(this.timer);
   }
 
-  wrapper = null;
-  autoTransitionDuration = undefined;
-  timer = null;
-
   handleEnter = node => {
     node.style.height = this.props.collapsedHeight;
 
diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js
index 97730441a366e1..dd5fd1187f1c7a 100644
--- a/packages/material-ui/src/CssBaseline/CssBaseline.js
+++ b/packages/material-ui/src/CssBaseline/CssBaseline.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/no-unused-prop-types */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '../styles';
diff --git a/packages/material-ui/src/DialogActions/DialogActions.test.js b/packages/material-ui/src/DialogActions/DialogActions.test.js
index 75fbdf46f47993..8fb16efa6fc2a6 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.test.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.test.js
@@ -37,7 +37,9 @@ describe('<DialogActions />', () => {
   it('should render children with the button class wrapped in a div with the action class', () => {
     const wrapper = shallow(
       <DialogActions>
-        <button className="woofDialogActions">Hello</button>
+        <button type="submit" className="woofDialogActions">
+          Hello
+        </button>
       </DialogActions>,
     );
     const button = wrapper.childAt(0);
@@ -50,8 +52,12 @@ describe('<DialogActions />', () => {
     const showButton = true;
     const wrapper = shallow(
       <DialogActions>
-        {showButton ? <button className="woofDialogActions">Hello</button> : null}
-        {!showButton ? <button>false button</button> : null}
+        {showButton ? (
+          <button type="submit" className="woofDialogActions">
+            Hello
+          </button>
+        ) : null}
+        {!showButton ? <button type="submit">false button</button> : null}
       </DialogActions>,
     );
 
diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js
index 52b1c64ad07e8c..7761c61325e7d4 100644
--- a/packages/material-ui/src/Drawer/Drawer.js
+++ b/packages/material-ui/src/Drawer/Drawer.js
@@ -89,15 +89,15 @@ export const styles = theme => ({
  * when `variant="temporary"` is set.
  */
 class Drawer extends React.Component {
-  componentDidMount() {
-    this.mounted = true;
-  }
-
   // Let's assume that the Drawer will always be rendered on user space.
-  // We use that state is order to skip the appear transition during the
+  // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   mounted = false;
 
+  componentDidMount() {
+    this.mounted = true;
+  }
+
   render() {
     const {
       anchor: anchorProp,
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
index 8d327bb8236f20..d439da8170d18c 100644
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -77,6 +77,8 @@ export const styles = theme => {
 };
 
 class ExpansionPanel extends React.Component {
+  isControlled = null;
+
   constructor(props) {
     super(props);
 
@@ -89,8 +91,6 @@ class ExpansionPanel extends React.Component {
 
   state = {};
 
-  isControlled = null;
-
   handleChange = event => {
     const expanded = this.isControlled ? this.props.expanded : this.state.expanded;
 
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js
index 4489d883e50cc8..32621fab6cf824 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js
@@ -39,7 +39,9 @@ describe('<ExpansionPanelActions />', () => {
   it('should render children with the button class wrapped in a div with the action class', () => {
     const wrapper = shallow(
       <ExpansionPanelActions>
-        <button className="woofExpansionPanelActions">Hello</button>
+        <button type="submit" className="woofExpansionPanelActions">
+          Hello
+        </button>
       </ExpansionPanelActions>,
     );
     const button = wrapper.childAt(0);
@@ -55,7 +57,7 @@ describe('<ExpansionPanelActions />', () => {
   it('should render a valid children', () => {
     const wrapper = shallow(
       <ExpansionPanelActions>
-        <button>Hello</button>
+        <button type="submit">Hello</button>
         {null}
       </ExpansionPanelActions>,
     );
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
index 2a82910c86d73c..97a971fc318c6c 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -31,6 +31,12 @@ export const styles = {
 };
 
 class GridListTile extends React.Component {
+  imgElement = null;
+
+  handleResize = debounce(() => {
+    this.fit();
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
   componentDidMount() {
     this.ensureImageCover();
   }
@@ -43,12 +49,6 @@ class GridListTile extends React.Component {
     this.handleResize.clear();
   }
 
-  imgElement = null;
-
-  handleResize = debounce(() => {
-    this.fit();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   fit = () => {
     const imgElement = this.imgElement;
 
diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js
index befede91acb004..cb6464636ea6ab 100644
--- a/packages/material-ui/src/Grow/Grow.js
+++ b/packages/material-ui/src/Grow/Grow.js
@@ -7,7 +7,7 @@ import withTheme from '../styles/withTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 
 function getScale(value) {
-  return `scale(${value}, ${Math.pow(value, 2)})`;
+  return `scale(${value}, ${value ** 2})`;
 }
 
 const styles = {
@@ -26,13 +26,14 @@ const styles = {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 class Grow extends React.Component {
+  autoTimeout = null;
+
+  timer = null;
+
   componentWillUnmount() {
     clearTimeout(this.timer);
   }
 
-  autoTimeout = undefined;
-  timer = null;
-
   handleEnter = node => {
     const { theme, timeout } = this.props;
     reflow(node); // So the animation always start from the start.
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index 9ca693ca4e3bd2..6483dd5665e129 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -217,6 +217,10 @@ function formControlState(props, context) {
 }
 
 class Input extends React.Component {
+  isControlled = this.props.value != null;
+
+  input = null; // Holds the input reference
+
   constructor(props, context) {
     super(props, context);
 
@@ -285,9 +289,6 @@ class Input extends React.Component {
     } // else performed in the onChange
   }
 
-  isControlled = this.props.value != null;
-  input = null; // Holds the input reference
-
   handleFocus = event => {
     // Fix a bug with IE11 where the focus/blur events are triggered
     // while the input is disabled.
diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js
index 9ec321ed76ff06..acea9db73d44eb 100644
--- a/packages/material-ui/src/Input/Textarea.js
+++ b/packages/material-ui/src/Input/Textarea.js
@@ -42,6 +42,18 @@ export const styles = {
  * @ignore - internal component.
  */
 class Textarea extends React.Component {
+  shadow = null;
+
+  singlelineShadow = null;
+
+  input = null;
+
+  value = null;
+
+  handleResize = debounce(() => {
+    this.syncHeightWithShadow();
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
   constructor(props) {
     super(props);
 
@@ -69,14 +81,40 @@ class Textarea extends React.Component {
     this.handleResize.clear();
   }
 
-  shadow = null;
-  singlelineShadow = null;
-  input = null;
-  value = null;
+  handleRefInput = node => {
+    this.input = node;
 
-  handleResize = debounce(() => {
-    this.syncHeightWithShadow();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
+    const { textareaRef } = this.props;
+    if (textareaRef) {
+      if (typeof textareaRef === 'function') {
+        textareaRef(node);
+      } else {
+        textareaRef.current = node;
+      }
+    }
+  };
+
+  handleRefSinglelineShadow = node => {
+    this.singlelineShadow = node;
+  };
+
+  handleRefShadow = node => {
+    this.shadow = node;
+  };
+
+  handleChange = event => {
+    this.value = event.target.value;
+
+    if (typeof this.props.value === 'undefined' && this.shadow) {
+      // The component is not controlled, we need to update the shallow value.
+      this.shadow.value = this.value;
+      this.syncHeightWithShadow();
+    }
+
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
+  };
 
   syncHeightWithShadow() {
     const props = this.props;
@@ -113,41 +151,6 @@ class Textarea extends React.Component {
     }
   }
 
-  handleRefInput = node => {
-    this.input = node;
-
-    const { textareaRef } = this.props;
-    if (textareaRef) {
-      if (typeof textareaRef === 'function') {
-        textareaRef(node);
-      } else {
-        textareaRef.current = node;
-      }
-    }
-  };
-
-  handleRefSinglelineShadow = node => {
-    this.singlelineShadow = node;
-  };
-
-  handleRefShadow = node => {
-    this.shadow = node;
-  };
-
-  handleChange = event => {
-    this.value = event.target.value;
-
-    if (typeof this.props.value === 'undefined' && this.shadow) {
-      // The component is not controlled, we need to update the shallow value.
-      this.shadow.value = this.value;
-      this.syncHeightWithShadow();
-    }
-
-    if (this.props.onChange) {
-      this.props.onChange(event);
-    }
-  };
-
   render() {
     const {
       classes,
diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
index a5e9d0cbfda9cb..7342cc9ab71a68 100644
--- a/packages/material-ui/src/Menu/Menu.js
+++ b/packages/material-ui/src/Menu/Menu.js
@@ -30,6 +30,8 @@ export const styles = {
 };
 
 class Menu extends React.Component {
+  menuList = null;
+
   componentDidMount() {
     if (this.props.open) {
       this.focus();
@@ -44,8 +46,6 @@ class Menu extends React.Component {
     return ReactDOM.findDOMNode(this.menuList.selectedItem);
   };
 
-  menuList = undefined;
-
   focus = () => {
     if (this.menuList && this.menuList.selectedItem) {
       ReactDOM.findDOMNode(this.menuList.selectedItem).focus();
diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js
index 50ff7a305a4ffc..a32ffbf2617150 100644
--- a/packages/material-ui/src/MenuList/MenuList.js
+++ b/packages/material-ui/src/MenuList/MenuList.js
@@ -8,8 +8,14 @@ import ownerDocument from '../utils/ownerDocument';
 import List from '../List';
 
 class MenuList extends React.Component {
+  list = null;
+
+  selectedItem = null;
+
+  blurTimer = null;
+
   state = {
-    currentTabIndex: undefined,
+    currentTabIndex: null,
   };
 
   componentDidMount() {
@@ -24,10 +30,6 @@ class MenuList extends React.Component {
     this.setState({ currentTabIndex: index });
   }
 
-  list = undefined;
-  selectedItem = undefined;
-  blurTimer = undefined;
-
   handleBlur = event => {
     this.blurTimer = setTimeout(() => {
       if (this.list) {
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
index 81de306ba3935d..439191844e2347 100644
--- a/packages/material-ui/src/Modal/Modal.js
+++ b/packages/material-ui/src/Modal/Modal.js
@@ -44,6 +44,12 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
 }
 
 class Modal extends React.Component {
+  dialogElement = null;
+
+  mounted = false;
+
+  mountNode = null;
+
   constructor(props) {
     super(props);
 
@@ -52,21 +58,6 @@ class Modal extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(nextProps) {
-    if (nextProps.open) {
-      return {
-        exited: false,
-      };
-    } else if (!getHasTransition(nextProps)) {
-      // Otherwise let handleExited take care of marking exited.
-      return {
-        exited: true,
-      };
-    }
-
-    return null;
-  }
-
   componentDidMount() {
     this.mounted = true;
     if (this.props.open) {
@@ -95,9 +86,22 @@ class Modal extends React.Component {
     }
   }
 
-  dialogElement = null;
-  mounted = false;
-  mountNode = null;
+  static getDerivedStateFromProps(nextProps) {
+    if (nextProps.open) {
+      return {
+        exited: false,
+      };
+    }
+
+    if (!getHasTransition(nextProps)) {
+      // Otherwise let handleExited take care of marking exited.
+      return {
+        exited: true,
+      };
+    }
+
+    return null;
+  }
 
   handleRendered = () => {
     this.autoFocus();
@@ -161,6 +165,18 @@ class Modal extends React.Component {
     this.lastFocus = ownerDocument(this.mountNode).activeElement;
   };
 
+  enforceFocus = () => {
+    if (this.props.disableEnforceFocus || !this.mounted || !this.isTopModal()) {
+      return;
+    }
+
+    const currentActiveElement = ownerDocument(this.mountNode).activeElement;
+
+    if (this.dialogElement && !this.dialogElement.contains(currentActiveElement)) {
+      this.dialogElement.focus();
+    }
+  };
+
   autoFocus() {
     if (this.props.disableAutoFocus) {
       return;
@@ -204,18 +220,6 @@ class Modal extends React.Component {
     }
   }
 
-  enforceFocus = () => {
-    if (this.props.disableEnforceFocus || !this.mounted || !this.isTopModal()) {
-      return;
-    }
-
-    const currentActiveElement = ownerDocument(this.mountNode).activeElement;
-
-    if (this.dialogElement && !this.dialogElement.contains(currentActiveElement)) {
-      this.dialogElement.focus();
-    }
-  };
-
   isTopModal() {
     return this.props.manager.isTopModal(this);
   }
diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
index 399c669b8ae04d..e10c5bdd55904a 100644
--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -82,6 +82,17 @@ export const styles = {
 };
 
 class Popover extends React.Component {
+  transitionEl = null;
+
+  handleGetOffsetTop = getOffsetTop;
+
+  handleGetOffsetLeft = getOffsetLeft;
+
+  handleResize = debounce(() => {
+    const element = ReactDOM.findDOMNode(this.transitionEl);
+    this.setPositioningStyles(element);
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
   componentDidMount() {
     if (this.props.action) {
       this.props.action({
@@ -247,12 +258,6 @@ class Popover extends React.Component {
     };
   }
 
-  transitionEl = undefined;
-
-  handleGetOffsetTop = getOffsetTop;
-
-  handleGetOffsetLeft = getOffsetLeft;
-
   handleEnter = element => {
     if (this.props.onEnter) {
       this.props.onEnter(element);
@@ -261,11 +266,6 @@ class Popover extends React.Component {
     this.setPositioningStyles(element);
   };
 
-  handleResize = debounce(() => {
-    const element = ReactDOM.findDOMNode(this.transitionEl);
-    this.setPositioningStyles(element);
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   render() {
     const {
       action,
@@ -378,8 +378,8 @@ Popover.propTypes = {
    * the application's client area.
    */
   anchorPosition: PropTypes.shape({
-    top: PropTypes.number,
     left: PropTypes.number,
+    top: PropTypes.number,
   }),
   /*
    * This determines which anchor prop to refer to to set
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 71071df5f57f7f..6e77209b236d24 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -9,6 +9,12 @@ import { isFilled } from '../Input/Input';
  * @ignore - internal component.
  */
 class SelectInput extends React.Component {
+  ignoreNextBlur = false;
+
+  displayNode = null;
+
+  isOpenControlled = this.props.open !== undefined;
+
   state = {
     menuMinWidth: null,
     open: false,
@@ -28,25 +34,22 @@ class SelectInput extends React.Component {
     }
   }
 
-  ignoreNextBlur = false;
-  displayNode = null;
-  isOpenControlled = this.props.open !== undefined;
-
-  update = this.isOpenControlled
-    ? ({ event, open }) => {
-        if (open) {
-          this.props.onOpen(event);
-        } else {
-          this.props.onClose(event);
-        }
+  update = ({ event, open }) => {
+    if (this.isOpenControlled) {
+      if (open) {
+        this.props.onOpen(event);
+      } else {
+        this.props.onClose(event);
       }
-    : ({ open }) => {
-        this.setState({
-          // Perfom the layout computation outside of the render method.
-          menuMinWidth: this.props.autoWidth ? null : this.displayNode.clientWidth,
-          open,
-        });
-      };
+      return;
+    }
+
+    this.setState({
+      // Perfom the layout computation outside of the render method.
+      menuMinWidth: this.props.autoWidth ? null : this.displayNode.clientWidth,
+      open,
+    });
+  };
 
   handleClick = event => {
     // Opening the menu is going to blur the. It will be focused back when closed.
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
index 5ae681767f59f4..52b5f3fbc1d0af 100644
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -45,9 +45,13 @@ function getTranslateValue(props, node) {
 
   if (direction === 'left') {
     return `translateX(100vw) translateX(-${rect.left - offsetX}px)`;
-  } else if (direction === 'right') {
+  }
+
+  if (direction === 'right') {
     return `translateX(-${rect.left + rect.width + GUTTER - offsetX}px)`;
-  } else if (direction === 'up') {
+  }
+
+  if (direction === 'up') {
     return `translateY(100vh) translateY(-${rect.top - offsetY}px)`;
   }
 
@@ -69,6 +73,22 @@ export function setTranslateValue(props, node) {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 class Slide extends React.Component {
+  mounted = false;
+
+  transition = null;
+
+  handleResize = debounce(() => {
+    // Skip configuration where the position is screen size invariant.
+    if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
+      return;
+    }
+
+    const node = ReactDOM.findDOMNode(this.transition);
+    if (node) {
+      setTranslateValue(this.props, node);
+    }
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
   componentDidMount() {
     // state.mounted handle SSR, once the component is mounted, we need
     // to properly hide it.
@@ -93,29 +113,6 @@ class Slide extends React.Component {
     this.handleResize.clear();
   }
 
-  mounted = false;
-  transition = null;
-
-  updatePosition() {
-    const node = ReactDOM.findDOMNode(this.transition);
-    if (node) {
-      node.style.visibility = 'inherit';
-      setTranslateValue(this.props, node);
-    }
-  }
-
-  handleResize = debounce(() => {
-    // Skip configuration where the position is screen size invariant.
-    if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
-      return;
-    }
-
-    const node = ReactDOM.findDOMNode(this.transition);
-    if (node) {
-      setTranslateValue(this.props, node);
-    }
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   handleEnter = node => {
     setTranslateValue(this.props, node);
     reflow(node);
@@ -177,6 +174,14 @@ class Slide extends React.Component {
     }
   };
 
+  updatePosition() {
+    const node = ReactDOM.findDOMNode(this.transition);
+    if (node) {
+      node.style.visibility = 'inherit';
+      setTranslateValue(this.props, node);
+    }
+  }
+
   render() {
     const {
       children,
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index bc48782c46d9ea..09c689489226c0 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -92,23 +92,9 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
 }
 
 class Snackbar extends React.Component {
-  state = {};
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (typeof prevState.exited === 'undefined') {
-      return {
-        exited: !nextProps.open,
-      };
-    }
-
-    if (nextProps.open) {
-      return {
-        exited: false,
-      };
-    }
+  timerAutoHide = null;
 
-    return null;
-  }
+  state = {};
 
   componentDidMount() {
     if (this.props.open) {
@@ -130,6 +116,22 @@ class Snackbar extends React.Component {
     clearTimeout(this.timerAutoHide);
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof prevState.exited === 'undefined') {
+      return {
+        exited: !nextProps.open,
+      };
+    }
+
+    if (nextProps.open) {
+      return {
+        exited: false,
+      };
+    }
+
+    return null;
+  }
+
   // Timer that controls delay before snackbar auto hides
   setAutoHideTimer(autoHideDuration = null) {
     if (!this.props.onClose || this.props.autoHideDuration == null) {
@@ -146,8 +148,6 @@ class Snackbar extends React.Component {
     }, autoHideDuration || this.props.autoHideDuration || 0);
   }
 
-  timerAutoHide = null;
-
   handleMouseEnter = event => {
     if (this.props.onMouseEnter) {
       this.props.onMouseEnter(event);
diff --git a/packages/material-ui/src/StepContent/StepContent.test.js b/packages/material-ui/src/StepContent/StepContent.test.js
index aa600c20cbcba2..5376a839ab3e66 100644
--- a/packages/material-ui/src/StepContent/StepContent.test.js
+++ b/packages/material-ui/src/StepContent/StepContent.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { assert } from 'chai';
 import { createShallow, createMount } from '../test-utils';
-import StepContent from '../StepContent';
 import Collapse from '../Collapse';
+import StepContent from './StepContent';
 
 describe('<StepContent />', () => {
   let shallow;
diff --git a/packages/material-ui/src/StepIcon/StepIcon.test.js b/packages/material-ui/src/StepIcon/StepIcon.test.js
index 6d3679b9f3bb33..a103f5b89206db 100644
--- a/packages/material-ui/src/StepIcon/StepIcon.test.js
+++ b/packages/material-ui/src/StepIcon/StepIcon.test.js
@@ -3,8 +3,8 @@ import { assert } from 'chai';
 import CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
 import { createShallow, createMount } from '../test-utils';
-import StepIcon from '../StepIcon';
 import StepPositionIcon from './StepPositionIcon';
+import StepIcon from './StepIcon';
 
 describe('<StepIcon />', () => {
   let shallow;
diff --git a/packages/material-ui/src/StepLabel/StepLabel.test.js b/packages/material-ui/src/StepLabel/StepLabel.test.js
index a262854e7a94e7..f4238c35548278 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.test.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.test.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { assert } from 'chai';
 import { createShallow, createMount, getClasses } from '../test-utils';
 import Typography from '../Typography';
-import StepLabel from '../StepLabel';
 import StepIcon from '../StepIcon';
+import StepLabel from './StepLabel';
 
 describe('<StepLabel />', () => {
   let shallow;
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index e52a34fbfadfb0..fc82f4176c2cab 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
@@ -30,27 +30,17 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
 }
 
 class SwipeableDrawer extends React.Component {
-  state = {};
+  backdrop = null;
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (typeof prevState.maybeSwiping === 'undefined') {
-      return {
-        maybeSwiping: false,
-        open: nextProps.open,
-      };
-    }
+  paper = null;
 
-    if (!nextProps.open && prevState.open) {
-      return {
-        maybeSwiping: false,
-        open: nextProps.open,
-      };
-    }
+  isSwiping = null;
 
-    return {
-      open: nextProps.open,
-    };
-  }
+  startX = null;
+
+  startY = null;
+
+  state = {};
 
   componentDidMount() {
     if (this.props.variant === 'temporary') {
@@ -81,6 +71,26 @@ class SwipeableDrawer extends React.Component {
     }
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof prevState.maybeSwiping === 'undefined') {
+      return {
+        maybeSwiping: false,
+        open: nextProps.open,
+      };
+    }
+
+    if (!nextProps.open && prevState.open) {
+      return {
+        maybeSwiping: false,
+        open: nextProps.open,
+      };
+    }
+
+    return {
+      open: nextProps.open,
+    };
+  }
+
   getMaxTranslate() {
     return isHorizontal(this.props) ? this.paper.clientWidth : this.paper.clientHeight;
   }
@@ -298,11 +308,13 @@ class SwipeableDrawer extends React.Component {
     this.isSwiping = null;
   };
 
-  backdrop = null;
-  paper = null;
-  isSwiping = null;
-  startX = null;
-  startY = null;
+  handleBackdropRef = node => {
+    this.backdrop = node ? ReactDOM.findDOMNode(node) : null;
+  };
+
+  handlePaperRef = node => {
+    this.paper = node ? ReactDOM.findDOMNode(node) : null;
+  };
 
   listenTouchStart() {
     document.body.addEventListener('touchstart', this.handleBodyTouchStart);
@@ -318,14 +330,6 @@ class SwipeableDrawer extends React.Component {
     document.body.removeEventListener('touchcancel', this.handleBodyTouchEnd);
   }
 
-  handleBackdropRef = node => {
-    this.backdrop = node ? ReactDOM.findDOMNode(node) : null;
-  };
-
-  handlePaperRef = node => {
-    this.paper = node ? ReactDOM.findDOMNode(node) : null;
-  };
-
   render() {
     const {
       disableBackdropTransition,
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index fdbaf42a4dcb30..bdea8c4d5511d3 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -91,6 +91,8 @@ export const styles = theme => ({
 });
 
 class Tab extends React.Component {
+  label = null;
+
   state = {
     labelWrapped: false,
   };
@@ -122,8 +124,6 @@ class Tab extends React.Component {
     }
   };
 
-  label = undefined;
-
   checkTextWrap = () => {
     if (this.label) {
       const labelWrapped = this.label.getClientRects().length > 1;
diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js
index d63b3c24c03283..48f4e9c4fd7340 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.test.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.test.js
@@ -7,9 +7,9 @@ import Select from '../Select';
 import IconButton from '../IconButton';
 import TableFooter from '../TableFooter';
 import TableCell from '../TableCell';
-import TablePagination from '../TablePagination';
 import Typography from '../Typography';
 import TableRow from '../TableRow';
+import TablePagination from './TablePagination';
 
 describe('<TablePagination />', () => {
   const noop = () => {};
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js
index 68b31343da797f..8906bf42bcb115 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.js
@@ -18,6 +18,17 @@ const styles = {
  * It has been moved into the core in order to minimize the bundle size.
  */
 class ScrollbarSize extends React.Component {
+  handleResize = debounce(() => {
+    const { onChange } = this.props;
+
+    const prevHeight = this.scrollbarHeight;
+    const prevWidth = this.scrollbarWidth;
+    this.setMeasurements();
+    if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
+      onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth });
+    }
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
   componentDidMount() {
     this.setMeasurements();
     this.props.onLoad({
@@ -39,17 +50,6 @@ class ScrollbarSize extends React.Component {
     this.scrollbarWidth = this.node.offsetWidth - this.node.clientWidth;
   };
 
-  handleResize = debounce(() => {
-    const { onChange } = this.props;
-
-    const prevHeight = this.scrollbarHeight;
-    const prevWidth = this.scrollbarWidth;
-    this.setMeasurements();
-    if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
-      onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth });
-    }
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   render() {
     const { onChange } = this.props;
 
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index 39214efc861fbc..c689a90d8e572b 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -48,6 +48,19 @@ export const styles = theme => ({
 });
 
 class Tabs extends React.Component {
+  tabs = null;
+
+  valueToIndex = new Map();
+
+  handleResize = debounce(() => {
+    this.updateIndicatorState(this.props);
+    this.updateScrollButtonState();
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
+  handleTabsScroll = debounce(() => {
+    this.updateScrollButtonState();
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
   state = {
     indicatorStyle: {},
     scrollerStyle: {
@@ -153,14 +166,6 @@ class Tabs extends React.Component {
     return { tabsMeta, tabMeta };
   };
 
-  tabs = undefined;
-  valueToIndex = new Map();
-
-  handleResize = debounce(() => {
-    this.updateIndicatorState(this.props);
-    this.updateScrollButtonState();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   handleLeftScrollClick = () => {
     if (this.tabs) {
       this.moveTabsScroll(-this.tabs.clientWidth);
@@ -181,10 +186,6 @@ class Tabs extends React.Component {
     });
   };
 
-  handleTabsScroll = debounce(() => {
-    this.updateScrollButtonState();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   moveTabsScroll = delta => {
     const { theme } = this.props;
 
@@ -197,36 +198,6 @@ class Tabs extends React.Component {
     }
   };
 
-  updateIndicatorState(props) {
-    const { theme, value } = props;
-
-    const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction);
-    let left = 0;
-
-    if (tabMeta && tabsMeta) {
-      const correction =
-        theme.direction === 'rtl'
-          ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth
-          : tabsMeta.scrollLeft;
-      left = tabMeta.left - tabsMeta.left + correction;
-    }
-
-    const indicatorStyle = {
-      left,
-      // May be wrong until the font is loaded.
-      width: tabMeta ? tabMeta.width : 0,
-    };
-
-    if (
-      (indicatorStyle.left !== this.state.indicatorStyle.left ||
-        indicatorStyle.width !== this.state.indicatorStyle.width) &&
-      !isNaN(indicatorStyle.left) &&
-      !isNaN(indicatorStyle.width)
-    ) {
-      this.setState({ indicatorStyle });
-    }
-  }
-
   scrollSelectedIntoView = () => {
     const { theme, value } = this.props;
     const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction);
@@ -268,6 +239,36 @@ class Tabs extends React.Component {
     }
   };
 
+  updateIndicatorState(props) {
+    const { theme, value } = props;
+
+    const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction);
+    let left = 0;
+
+    if (tabMeta && tabsMeta) {
+      const correction =
+        theme.direction === 'rtl'
+          ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth
+          : tabsMeta.scrollLeft;
+      left = tabMeta.left - tabsMeta.left + correction;
+    }
+
+    const indicatorStyle = {
+      left,
+      // May be wrong until the font is loaded.
+      width: tabMeta ? tabMeta.width : 0,
+    };
+
+    if (
+      (indicatorStyle.left !== this.state.indicatorStyle.left ||
+        indicatorStyle.width !== this.state.indicatorStyle.width) &&
+      !isNaN(indicatorStyle.left) &&
+      !isNaN(indicatorStyle.width)
+    ) {
+      this.setState({ indicatorStyle });
+    }
+  }
+
   render() {
     const {
       action,
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 6e7d1ede3dd6b5..23ad7057fefeb8 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -97,6 +97,28 @@ function flipPlacement(placement) {
 }
 
 class Tooltip extends React.Component {
+  enterTimer = null;
+
+  leaveTimer = null;
+
+  touchTimer = null;
+
+  closeTimer = null;
+
+  isControlled = null;
+
+  popper = null;
+
+  children = null;
+
+  ignoreNonTouchEvents = false;
+
+  handleResize = debounce(() => {
+    if (this.popper) {
+      this.popper._popper.scheduleUpdate();
+    }
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
   constructor(props) {
     super(props);
 
@@ -132,21 +154,6 @@ class Tooltip extends React.Component {
     this.handleResize.clear();
   }
 
-  enterTimer = null;
-  leaveTimer = null;
-  touchTimer = null;
-  closeTimer = null;
-  isControlled = null;
-  popper = null;
-  children = null;
-  ignoreNonTouchEvents = false;
-
-  handleResize = debounce(() => {
-    if (this.popper) {
-      this.popper._popper.scheduleUpdate();
-    }
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   handleEnter = event => {
     const { children, enterDelay } = this.props;
     const childrenProps = children.props;
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index ce302b635cbb11..ceddcaaf58adba 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -140,7 +140,7 @@ describe('<Tooltip />', () => {
   it('should respond to external events', () => {
     const wrapper = shallow(
       <Tooltip placement="top" title="Hello World">
-        <button>Hello World</button>
+        <button type="submit">Hello World</button>
       </Tooltip>,
     );
     const children = getTargetChildren(wrapper);
@@ -163,7 +163,7 @@ describe('<Tooltip />', () => {
         onOpen={handleRequestOpen}
         onClose={handleClose}
       >
-        <button>Hello World</button>
+        <button type="submit">Hello World</button>
       </Tooltip>,
     );
     const children = getTargetChildren(wrapper);
@@ -191,7 +191,7 @@ describe('<Tooltip />', () => {
     it('should not respond to quick events', () => {
       const wrapper = shallow(
         <Tooltip title="Hello World">
-          <button>Hello World</button>
+          <button type="submit">Hello World</button>
         </Tooltip>,
       );
       const children = getTargetChildren(wrapper);
@@ -205,7 +205,7 @@ describe('<Tooltip />', () => {
     it('should open on long press', () => {
       const wrapper = shallow(
         <Tooltip title="Hello World">
-          <button>Hello World</button>
+          <button type="submit">Hello World</button>
         </Tooltip>,
       );
       const children = getTargetChildren(wrapper);
@@ -224,7 +224,7 @@ describe('<Tooltip />', () => {
     it('should mount without any issue', () => {
       mount(
         <Tooltip title="Hello World" PopperProps={{ component: Hack }}>
-          <button>Hello World</button>
+          <button type="submit">Hello World</button>
         </Tooltip>,
       );
     });
@@ -244,7 +244,7 @@ describe('<Tooltip />', () => {
     it('should take the enterDelay into account', () => {
       const wrapper = shallow(
         <Tooltip enterDelay={111} title="Hello World">
-          <button>Hello World</button>
+          <button type="submit">Hello World</button>
         </Tooltip>,
       );
       const children = getTargetChildren(wrapper);
@@ -257,7 +257,7 @@ describe('<Tooltip />', () => {
     it('should take the leaveDelay into account', () => {
       const wrapper = shallow(
         <Tooltip leaveDelay={111} title="Hello World">
-          <button>Hello World</button>
+          <button type="submit">Hello World</button>
         </Tooltip>,
       );
       const children = getTargetChildren(wrapper);
@@ -277,7 +277,9 @@ describe('<Tooltip />', () => {
           const handler = spy();
           const wrapper = shallow(
             <Tooltip title="Hello World">
-              <button {...{ [name]: handler }}>Hello World</button>
+              <button type="submit" {...{ [name]: handler }}>
+                Hello World
+              </button>
             </Tooltip>,
           );
           const children = getTargetChildren(wrapper);
@@ -329,7 +331,9 @@ describe('<Tooltip />', () => {
     it('should raise a warning when we can listen to events', () => {
       mount(
         <Tooltip title="Hello World">
-          <button disabled>Hello World</button>
+          <button type="submit" disabled>
+            Hello World
+          </button>
         </Tooltip>,
       );
       assert.strictEqual(consoleErrorMock.callCount(), 1, 'should call console.error');
diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
index 804d64a57e78f6..cd5e0565133bb0 100644
--- a/packages/material-ui/src/internal/SwitchBase.js
+++ b/packages/material-ui/src/internal/SwitchBase.js
@@ -32,6 +32,10 @@ export const styles = {
 };
 
 class SwitchBase extends React.Component {
+  input = null;
+
+  isControlled = null;
+
   constructor(props) {
     super(props);
 
@@ -44,9 +48,6 @@ class SwitchBase extends React.Component {
 
   state = {};
 
-  input = null;
-  isControlled = null;
-
   handleFocus = event => {
     if (this.props.onFocus) {
       this.props.onFocus(event);
diff --git a/packages/material-ui/src/styles/MuiThemeProvider.js b/packages/material-ui/src/styles/MuiThemeProvider.js
index 7a66597786cd9c..bd585729d0143e 100644
--- a/packages/material-ui/src/styles/MuiThemeProvider.js
+++ b/packages/material-ui/src/styles/MuiThemeProvider.js
@@ -11,6 +11,13 @@ import exactProp from '../utils/exactProp';
  * This component should preferably be used at **the root of your component tree**.
  */
 class MuiThemeProvider extends React.Component {
+  broadcast = createBroadcast();
+
+  unsubscribeId = null;
+
+  // We are not using the React state in order to avoid unnecessary rerender.
+  outerTheme = null;
+
   constructor(props, context) {
     super(props, context);
 
@@ -60,11 +67,6 @@ class MuiThemeProvider extends React.Component {
     }
   }
 
-  broadcast = createBroadcast();
-  unsubscribeId = null;
-  // We are not using the React state in order to avoid unnecessary rerender.
-  outerTheme = null;
-
   // Simple merge between the outer theme and the local theme
   mergeOuterLocalTheme(localTheme) {
     // To support composition of theme.
diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js
index c98935fe476694..68aa9a2fc9c22e 100644
--- a/packages/material-ui/src/styles/colorManipulator.js
+++ b/packages/material-ui/src/styles/colorManipulator.js
@@ -132,7 +132,7 @@ export function getLuminance(color: string) {
   if (decomposedColor.type.indexOf('rgb') !== -1) {
     const rgb = decomposedColor.values.map(val => {
       val /= 255; // normalized
-      return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+      return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
     });
     // Truncate at 3 digits
     return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js
index 4d353cd2dc12d8..ee90d0d3d38ac5 100644
--- a/packages/material-ui/src/styles/createPalette.test.js
+++ b/packages/material-ui/src/styles/createPalette.test.js
@@ -2,9 +2,9 @@
 
 import { assert } from 'chai';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
-import createPalette, { dark, light } from './createPalette';
 import { indigo, pink, deepOrange, green, red } from '../colors';
-import { lighten, darken } from '../styles/colorManipulator';
+import { lighten, darken } from './colorManipulator';
+import createPalette, { dark, light } from './createPalette';
 
 describe('createPalette()', () => {
   before(() => {
diff --git a/packages/material-ui/src/styles/withStyles.js b/packages/material-ui/src/styles/withStyles.js
index 6cae7524736507..c2b64c647d9a01 100644
--- a/packages/material-ui/src/styles/withStyles.js
+++ b/packages/material-ui/src/styles/withStyles.js
@@ -69,6 +69,20 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
   );
 
   class WithStyles extends React.Component {
+    disableStylesGeneration = false;
+
+    jss = null;
+
+    sheetOptions = null;
+
+    sheetsManager = sheetsManager;
+
+    stylesCreatorSaved = null;
+
+    theme = null;
+
+    unsubscribeId = null;
+
     constructor(props, context) {
       super(props, context);
 
@@ -259,14 +273,6 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
       }
     }
 
-    disableStylesGeneration = false;
-    jss = null;
-    sheetOptions = null;
-    sheetsManager = sheetsManager;
-    stylesCreatorSaved = null;
-    theme = null;
-    unsubscribeId = null;
-
     render() {
       const { classes, innerRef, ...other } = this.props;
 
diff --git a/packages/material-ui/src/styles/withStyles.test.js b/packages/material-ui/src/styles/withStyles.test.js
index 83c769ba9478de..f0a263b588a0c4 100644
--- a/packages/material-ui/src/styles/withStyles.test.js
+++ b/packages/material-ui/src/styles/withStyles.test.js
@@ -14,7 +14,7 @@ import createGenerateClassName from './createGenerateClassName';
 import { createShallow, createMount, getClasses } from '../test-utils';
 
 // eslint-disable-next-line react/prefer-stateless-function
-class Empty extends React.Component<{ classes: Object, theme?: Object }> {
+class Empty extends React.Component<{}> {
   render() {
     return <div />;
   }
diff --git a/packages/material-ui/src/styles/withTheme.js b/packages/material-ui/src/styles/withTheme.js
index 17591de6c3ebd4..bedd447f25fd11 100644
--- a/packages/material-ui/src/styles/withTheme.js
+++ b/packages/material-ui/src/styles/withTheme.js
@@ -18,6 +18,8 @@ function getDefaultTheme() {
 // Provide the theme object as a property to the input component.
 const withTheme = () => Component => {
   class WithTheme extends React.Component {
+    unsubscribeId = null;
+
     constructor(props, context) {
       super(props, context);
 
@@ -41,8 +43,6 @@ const withTheme = () => Component => {
       }
     }
 
-    unsubscribeId = null;
-
     render() {
       return <Component theme={this.state.theme} {...this.props} />;
     }
diff --git a/packages/material-ui/src/test-utils/until.test.js b/packages/material-ui/src/test-utils/until.test.js
index 2b98857365cc11..7cd99e3b73957d 100644
--- a/packages/material-ui/src/test-utils/until.test.js
+++ b/packages/material-ui/src/test-utils/until.test.js
@@ -102,8 +102,12 @@ describe('until', () => {
   // eslint-disable-next-line react/no-multi-comp
   class Bar extends React.Component<{}> {
     static childContextTypes = { quux: PropTypes.bool };
+
     getChildContext = () => ({ quux: true });
-    render = () => <Foo />;
+
+    render() {
+      return <Foo />;
+    }
   }
 
   it('context propagation passes down context from an intermediary component', () => {
diff --git a/packages/material-ui/src/utils/ownerWindow.js b/packages/material-ui/src/utils/ownerWindow.js
index e40c3d828978b6..4cb952a4c1a3b7 100644
--- a/packages/material-ui/src/utils/ownerWindow.js
+++ b/packages/material-ui/src/utils/ownerWindow.js
@@ -1,6 +1,6 @@
 // @flow
 
-import ownerDocument from '../utils/ownerDocument';
+import ownerDocument from './ownerDocument';
 
 function ownerWindow(node: Node, fallback: window = window) {
   const doc: Document = ownerDocument(node);
diff --git a/packages/material-ui/src/utils/reactHelpers.test.js b/packages/material-ui/src/utils/reactHelpers.test.js
index e7d58cf6fccd8c..14b92f80f3f00b 100644
--- a/packages/material-ui/src/utils/reactHelpers.test.js
+++ b/packages/material-ui/src/utils/reactHelpers.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { assert } from 'chai';
 import { isMuiComponent, isMuiElement } from './reactHelpers';
-import { Input, ListItemAvatar, ListItemSecondaryAction, SvgIcon } from '../';
+import { Input, ListItemAvatar, ListItemSecondaryAction, SvgIcon } from '..';
 
 describe('utils/reactHelpers.js', () => {
   describe('isMuiElement', () => {
diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js
index 380a0675d2f1d9..127c8b4f5a0487 100644
--- a/packages/material-ui/src/withWidth/withWidth.js
+++ b/packages/material-ui/src/withWidth/withWidth.js
@@ -35,6 +35,15 @@ const withWidth = (options = {}) => Component => {
   } = options;
 
   class WithWidth extends React.Component {
+    handleResize = debounce(() => {
+      const width = this.getWidth();
+      if (width !== this.state.width) {
+        this.setState({
+          width,
+        });
+      }
+    }, resizeInterval);
+
     constructor(props) {
       super(props);
 
@@ -88,15 +97,6 @@ const withWidth = (options = {}) => Component => {
       return width;
     }
 
-    handleResize = debounce(() => {
-      const width = this.getWidth();
-      if (width !== this.state.width) {
-        this.setState({
-          width,
-        });
-      }
-    }, resizeInterval);
-
     render() {
       const { initialWidth, theme, width, ...other } = this.props;
 
diff --git a/pages/api/popover.md b/pages/api/popover.md
index a0056cd09569c8..d48069bec32b10 100644
--- a/pages/api/popover.md
+++ b/pages/api/popover.md
@@ -15,7 +15,7 @@ filename: /packages/material-ui/src/Popover/Popover.js
 | <span class="prop-name">action</span> | <span class="prop-type">func |   | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all posible actions that can be triggered programmatically. |
 | <span class="prop-name">anchorEl</span> | <span class="prop-type">union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |   | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. |
 | <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | <span class="prop-default">{  vertical: 'top',  horizontal: 'left',}</span> | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.<br>Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
-| <span class="prop-name">anchorPosition</span> | <span class="prop-type">{top?: number, left?: number} |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. |
+| <span class="prop-name">anchorPosition</span> | <span class="prop-type">{left?: number, top?: number} |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. |
 | <span class="prop-name">anchorReference</span> | <span class="prop-type">enum:&nbsp;'anchorEl'&nbsp;&#124;<br>&nbsp;'anchorPosition'&nbsp;&#124;<br>&nbsp;'none'<br> | <span class="prop-default">'anchorEl'</span> |  |
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The content of the component. |
 | <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. |
diff --git a/test/regressions/tests/Input/Inputs.js b/test/regressions/tests/Input/Inputs.js
index 33e8289a997fde..b87aa83aa10aca 100644
--- a/test/regressions/tests/Input/Inputs.js
+++ b/test/regressions/tests/Input/Inputs.js
@@ -19,12 +19,12 @@ const styles = {
 };
 
 class Inputs extends React.Component {
+  focusInput = null;
+
   componentDidMount() {
     this.focusInput.focus();
   }
 
-  focusInput = null;
-
   render() {
     const { classes } = this.props;
 
diff --git a/yarn.lock b/yarn.lock
index 2ab0ed02aed6d4..e529110961aa69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1254,21 +1254,17 @@ acorn-globals@^4.1.0:
   dependencies:
     acorn "^5.0.0"
 
-acorn-jsx@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+acorn-jsx@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-4.1.1.tgz#e8e41e48ea2fe0c896740610ab6a4ffd8add225e"
   dependencies:
-    acorn "^3.0.4"
-
-acorn@^3.0.4:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+    acorn "^5.0.3"
 
 acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.2:
+acorn@^5.0.0, acorn@^5.0.3, acorn@^5.3.0, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.0, acorn@^5.6.2:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
 
@@ -1297,7 +1293,7 @@ agent-base@4, agent-base@^4.1.0, agent-base@^4.2.0:
   dependencies:
     es6-promisify "^5.0.0"
 
-ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
+ajv-keywords@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
@@ -1305,7 +1301,7 @@ ajv-keywords@^3.0.0, ajv-keywords@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
 
-ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0:
+ajv@^5.1.0, ajv@^5.1.5:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -1314,7 +1310,7 @@ ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.0.1, ajv@^6.1.0:
+ajv@^6.0.1, ajv@^6.1.0, ajv@^6.5.0:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.1.tgz#88ebc1263c7133937d108b80c5572e64e1d9322d"
   dependencies:
@@ -1667,7 +1663,7 @@ axobject-query@^0.1.0:
   dependencies:
     ast-types-flow "0.0.7"
 
-babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   dependencies:
@@ -3188,7 +3184,7 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@1.6.2, concat-stream@^1.5.0, concat-stream@^1.6.0:
+concat-stream@1.6.2, concat-stream@^1.5.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   dependencies:
@@ -3360,7 +3356,7 @@ cross-spawn-async@^1.0.1:
     lru-cache "^2.6.5"
     which "^1.1.1"
 
-cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0:
+cross-spawn@5.1.0, cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   dependencies:
@@ -3867,9 +3863,11 @@ double-ended-queue@^2.1.0-0:
   version "2.1.0-0"
   resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c"
 
-downshift@^1.22.1:
-  version "1.31.16"
-  resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.16.tgz#acd81631539502d4112d01bd573654419fd9f640"
+downshift@^2.0.0:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-2.0.10.tgz#598b93c5598c4c45caf8c46479fdfde587da7860"
+  dependencies:
+    prop-types "^15.6.0"
 
 duplexer2@~0.1.4:
   version "0.1.4"
@@ -4091,7 +4089,7 @@ error-stack-parser@^2.0.0:
   dependencies:
     stackframe "^1.0.4"
 
-es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
+es-abstract@^1.10.0, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
   dependencies:
@@ -4200,17 +4198,21 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-config-airbnb-base@^12.1.0:
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz#386441e54a12ccd957b0a92564a4bafebd747944"
+eslint-config-airbnb-base@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.0.0.tgz#2ee6279c4891128e49d6445b24aa13c2d1a21450"
   dependencies:
     eslint-restricted-globals "^0.1.1"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
 
-eslint-config-airbnb@^16.1.0:
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-16.1.0.tgz#2546bfb02cc9fe92284bf1723ccf2e87bc45ca46"
+eslint-config-airbnb@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.0.0.tgz#1bb8c4255483320bb68c3b614f71ae6058b0b2db"
   dependencies:
-    eslint-config-airbnb-base "^12.1.0"
+    eslint-config-airbnb-base "^13.0.0"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
 
 eslint-import-resolver-node@^0.3.1:
   version "0.3.2"
@@ -4328,59 +4330,66 @@ eslint-scope@^3.7.1, eslint-scope@~3.7.1:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-scope@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
 
-eslint@^4.11.0:
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300"
+eslint@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.0.0.tgz#3576704f7377aca072da69c00862277c5fe57153"
   dependencies:
-    ajv "^5.3.0"
-    babel-code-frame "^6.22.0"
+    ajv "^6.5.0"
+    babel-code-frame "^6.26.0"
     chalk "^2.1.0"
-    concat-stream "^1.6.0"
-    cross-spawn "^5.1.0"
+    cross-spawn "^6.0.5"
     debug "^3.1.0"
     doctrine "^2.1.0"
-    eslint-scope "^3.7.1"
+    eslint-scope "^4.0.0"
     eslint-visitor-keys "^1.0.0"
-    espree "^3.5.4"
-    esquery "^1.0.0"
+    espree "^4.0.0"
+    esquery "^1.0.1"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     functional-red-black-tree "^1.0.1"
     glob "^7.1.2"
-    globals "^11.0.1"
+    globals "^11.5.0"
     ignore "^3.3.3"
     imurmurhash "^0.1.4"
-    inquirer "^3.0.6"
-    is-resolvable "^1.0.0"
-    js-yaml "^3.9.1"
+    inquirer "^5.2.0"
+    is-resolvable "^1.1.0"
+    js-yaml "^3.11.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.3.0"
-    lodash "^4.17.4"
-    minimatch "^3.0.2"
+    lodash "^4.17.5"
+    minimatch "^3.0.4"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
     optionator "^0.8.2"
     path-is-inside "^1.0.2"
     pluralize "^7.0.0"
     progress "^2.0.0"
-    regexpp "^1.0.1"
+    regexpp "^1.1.0"
     require-uncached "^1.0.3"
-    semver "^5.3.0"
+    semver "^5.5.0"
+    string.prototype.matchall "^2.0.0"
     strip-ansi "^4.0.0"
-    strip-json-comments "~2.0.1"
-    table "4.0.2"
-    text-table "~0.2.0"
+    strip-json-comments "^2.0.1"
+    table "^4.0.3"
+    text-table "^0.2.0"
 
-espree@^3.5.4:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+espree@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-4.0.0.tgz#253998f20a0f82db5d866385799d912a83a36634"
   dependencies:
-    acorn "^5.5.0"
-    acorn-jsx "^3.0.0"
+    acorn "^5.6.0"
+    acorn-jsx "^4.1.1"
 
 esprima@3.x.x, esprima@^3.1.3:
   version "3.1.3"
@@ -4398,7 +4407,7 @@ esprima@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
 
-esquery@^1.0.0:
+esquery@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
   dependencies:
@@ -4555,7 +4564,7 @@ extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
-external-editor@^2.0.4:
+external-editor@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
   dependencies:
@@ -5139,14 +5148,14 @@ global@~4.3.0:
     min-document "^2.19.0"
     process "~0.5.1"
 
-globals@^11.0.1, globals@^11.3.0:
-  version "11.6.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.6.0.tgz#7e4d12ffd6b8d174851ff5a246bfb2b8b002a6c7"
-
-globals@^11.1.0:
+globals@^11.1.0, globals@^11.5.0:
   version "11.7.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673"
 
+globals@^11.3.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.6.0.tgz#7e4d12ffd6b8d174851ff5a246bfb2b8b002a6c7"
+
 globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -5702,21 +5711,20 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-inquirer@^3.0.6:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+inquirer@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
   dependencies:
     ansi-escapes "^3.0.0"
     chalk "^2.0.0"
     cli-cursor "^2.1.0"
     cli-width "^2.0.0"
-    external-editor "^2.0.4"
+    external-editor "^2.1.0"
     figures "^2.0.0"
     lodash "^4.3.0"
     mute-stream "0.0.7"
     run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
+    rxjs "^5.5.2"
     string-width "^2.1.0"
     strip-ansi "^4.0.0"
     through "^2.3.6"
@@ -6022,7 +6030,7 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
-is-resolvable@^1.0.0:
+is-resolvable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
 
@@ -6214,7 +6222,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@^3.11.0, js-yaml@^3.9.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
   dependencies:
@@ -9101,7 +9109,13 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexpp@^1.0.1:
+regexp.prototype.flags@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
+  dependencies:
+    define-properties "^1.1.2"
+
+regexpp@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
 
@@ -9427,9 +9441,9 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.5.2"
     micromatch "^2.3.11"
 
-rollup@^0.59.4:
-  version "0.59.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.59.4.tgz#6f80f7017c22667ff1bf3e62adf8624a44cc44aa"
+rollup@^0.61.0:
+  version "0.61.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.61.2.tgz#30a953736964683a5b8ea952b137a393d84e6302"
   dependencies:
     "@types/estree" "0.0.39"
     "@types/node" "*"
@@ -9457,15 +9471,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rx-lite-aggregates@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+rxjs@^5.5.2:
+  version "5.5.11"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.11.tgz#f733027ca43e3bec6b994473be4ab98ad43ced87"
   dependencies:
-    rx-lite "*"
-
-rx-lite@*, rx-lite@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+    symbol-observable "1.0.1"
 
 safe-buffer@5.1.1:
   version "5.1.1"
@@ -9649,7 +9659,7 @@ signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-sinon@^5.0.3:
+sinon@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-5.1.1.tgz#19c59810ffb733ea6e76a28b94a71fc4c2f523b8"
   dependencies:
@@ -10023,6 +10033,16 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string.prototype.matchall@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-2.0.0.tgz#2af8fe3d2d6dc53ca2a59bd376b089c3c152b3c8"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.10.0"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    regexp.prototype.flags "^1.2.0"
+
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -10067,7 +10087,7 @@ strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
 
-strip-json-comments@~2.0.1:
+strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
@@ -10132,6 +10152,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+
 symbol-observable@1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
@@ -10144,18 +10168,7 @@ symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
-table@4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
-  dependencies:
-    ajv "^5.2.3"
-    ajv-keywords "^2.1.0"
-    chalk "^2.1.0"
-    lodash "^4.17.4"
-    slice-ansi "1.0.0"
-    string-width "^2.1.1"
-
-table@^4.0.2:
+table@^4.0.2, table@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
   dependencies:
@@ -10224,7 +10237,7 @@ text-encoding@^0.6.4:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"
 
-text-table@~0.2.0:
+text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"