[core] Only use debounce client-side

.size-limit.js

@@ -16,13 +16,13 @@ module.exports = [
     name: 'The initial cost paid for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '17.7 KB',
+    limit: '17.8 KB',
   },
   {
     name: 'The size of all the material-ui modules.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '93.4 KB',
+    limit: '92.8 KB',
   },
   {
     name: 'The main docs bundle',

docs/src/pages/guides/server-rendering/server-rendering.md

@@ -66,7 +66,7 @@ We then get the CSS from our `sheetsRegistry` using `sheetsRegistry.toString()`.
 
 ```jsx
 import ReactDOMServer from 'react-dom/server'
-import { SheetsRegistry } from 'react-jss/lib/jss';
+import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import {
   MuiThemeProvider,

docs/src/pages/premium-themes/PremiumThemes.js

@@ -63,11 +63,12 @@ function PremiumThemes(props) {
   return (
     <Grid container spacing={16}>
       {themes.map(theme => (
-        <Grid key={theme.name} item xs={12} sm={6}>
+        <Grid key={theme.name} item xs={12} md={6}>
           <Card className={classes.card}>
             <CardMedia
               component="a"
               href={theme.href}
+              rel="noopener nofollow"
               className={classes.media}
               image={theme.src}
               title={theme.name}
@@ -89,7 +90,13 @@ function PremiumThemes(props) {
               <Typography component="p">{theme.description}</Typography>
             </CardContent>
             <CardActions>
-              <Button component="a" href={theme.href} size="small" color="primary">
+              <Button
+                component="a"
+                rel="noopener nofollow"
+                href={theme.href}
+                size="small"
+                color="primary"
+              >
                 Learn More
               </Button>
             </CardActions>

examples/ssr/server.js

@@ -1,7 +1,7 @@
 import express from 'express';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { SheetsRegistry } from 'react-jss/lib/jss';
+import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import {
   MuiThemeProvider,

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

@@ -7,7 +7,7 @@ import ReactDOMServer from 'react-dom/server';
 import styledEmotion from 'react-emotion';
 import { renderStylesToString } from 'emotion-server';
 import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import ButtonBase from '@material-ui/core/ButtonBase/ButtonBase';
+import ButtonBase from '@material-ui/core/ButtonBase';
 
 const theme = createMuiTheme();
 

packages/material-ui-benchmark/src/server.js

@@ -3,7 +3,7 @@
 import express from 'express';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { SheetsRegistry } from 'react-jss/lib/jss';
+import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import {
   MuiThemeProvider,

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

@@ -35,12 +35,12 @@ export const styles = {
 };
 
 class GridListTile extends React.Component {
-  handleResize = debounce(() => {
-    this.fit();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   componentDidMount() {
     this.ensureImageCover();
+
+    this.handleResize = debounce(() => {
+      this.fit();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate() {

packages/material-ui/src/InputBase/Textarea.js

@@ -43,10 +43,6 @@ export const styles = {
  * @ignore - internal component.
  */
 class Textarea extends React.Component {
-  handleResize = debounce(() => {
-    this.syncHeightWithShadow();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   constructor(props) {
     super();
     this.isControlled = props.value != null;
@@ -60,6 +56,10 @@ class Textarea extends React.Component {
 
   componentDidMount() {
     this.syncHeightWithShadow();
+
+    this.handleResize = debounce(() => {
+      this.syncHeightWithShadow();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate() {

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

@@ -87,16 +87,15 @@ class Popover extends React.Component {
 
   handleGetOffsetLeft = getOffsetLeft;
 
-  handleResize = debounce(() => {
-    this.setPositioningStyles(this.paperRef);
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   componentDidMount() {
     if (this.props.action) {
       this.props.action({
         updatePosition: this.handleResize,
       });
     }
+    this.handleResize = debounce(() => {
+      this.setPositioningStyles(this.paperRef);
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentWillUnmount = () => {

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

@@ -75,17 +75,6 @@ export function setTranslateValue(props, node) {
 class Slide extends React.Component {
   mounted = false;
 
-  handleResize = debounce(() => {
-    // Skip configuration where the position is screen size invariant.
-    if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
-      return;
-    }
-
-    if (this.transitionRef) {
-      setTranslateValue(this.props, this.transitionRef);
-    }
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   componentDidMount() {
     this.mounted = true;
 
@@ -96,6 +85,17 @@ class Slide extends React.Component {
       // otherwise component will be shown when in=false.
       this.updatePosition();
     }
+
+    this.handleResize = debounce(() => {
+      // Skip configuration where the position is screen size invariant.
+      if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
+        return;
+      }
+
+      if (this.transitionRef) {
+        setTranslateValue(this.props, this.transitionRef);
+      }
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate(prevProps) {

packages/material-ui/src/Tabs/ScrollbarSize.js

@@ -18,23 +18,23 @@ 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({
       scrollbarHeight: this.scrollbarHeight,
       scrollbarWidth: this.scrollbarWidth,
     });
+
+    this.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.
   }
 
   componentWillUnmount() {

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

@@ -59,15 +59,6 @@ export const styles = theme => ({
 class Tabs extends React.Component {
   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: {
@@ -89,6 +80,15 @@ class Tabs extends React.Component {
         updateIndicator: this.handleResize,
       });
     }
+
+    this.handleResize = debounce(() => {
+      this.updateIndicatorState(this.props);
+      this.updateScrollButtonState();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
+
+    this.handleTabsScroll = debounce(() => {
+      this.updateScrollButtonState();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate(prevProps, prevState) {

packages/material-ui/src/styles/createTypography.js

@@ -27,13 +27,15 @@ export default function createTypography(palette, typography) {
     htmlFontSize = 16,
     // eslint-disable-next-line no-underscore-dangle
     useNextVariants = Boolean(global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__),
+    // Private option to prevent noise in the console from the default theme.
+    suppressWarning = false,
     // Apply the CSS properties to all the variants.
     allVariants,
     ...other
   } = typeof typography === 'function' ? typography(palette) : typography;
 
   warning(
-    useNextVariants,
+    useNextVariants || suppressWarning,
     'Material-UI: you are using the deprecated typography variants ' +
       'that will be removed in the next major release.' +
       '\nPlease read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2',

packages/material-ui/src/styles/withStyles.js

@@ -48,7 +48,11 @@ function getDefaultTheme() {
     return defaultTheme;
   }
 
-  defaultTheme = createMuiTheme();
+  defaultTheme = createMuiTheme({
+    typography: {
+      suppressWarning: true,
+    },
+  });
   return defaultTheme;
 }
 

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

@@ -35,15 +35,6 @@ 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);
 
@@ -59,6 +50,15 @@ const withWidth = (options = {}) => Component => {
           width,
         });
       }
+
+      this.handleResize = debounce(() => {
+        const width = this.getWidth();
+        if (width !== this.state.width) {
+          this.setState({
+            width,
+          });
+        }
+      }, resizeInterval);
     }
 
     componentWillUnmount() {