material-ui - npm Package Compare versions

Comparing version 1.0.0-beta.44 to 1.0.0-beta.45

ButtonBase/ButtonBase.d.ts

@@ -16,7 +16,7 @@ import * as React from 'react';
   focusVisibleClassName?: string;
-  onKeyboardFocus?: React.FocusEventHandler<any>;
+  onFocusVisible?: React.FocusEventHandler<any>;
   TouchRippleProps?: Partial<TouchRippleProps>;
 }
 
-export type ButtonBaseClassKey = 'root' | 'disabled';
+export type ButtonBaseClassKey = 'root' | 'disabled' | 'focusVisible';
 
@@ -23,0 +23,0 @@ declare const ButtonBase: React.ComponentType<ButtonBaseProps>;

ButtonBase/ButtonBase.js

@@ -70,3 +70,3 @@ 'use strict';
 
-var _keyboardFocus = require('../utils/keyboardFocus');
+var _focusVisible = require('../utils/focusVisible');
 
@@ -92,2 +92,3 @@ var _TouchRipple = require('./TouchRipple');
     backgroundColor: 'transparent', // Reset default value
+    // We disable the focus ring for mouse, touch and keyboard users.
     outline: 'none',
@@ -138,12 +139,12 @@ border: 0,
 
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ButtonBase.__proto__ || (0, _getPrototypeOf2.default)(ButtonBase)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onKeyboardFocusHandler = function (event) {
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ButtonBase.__proto__ || (0, _getPrototypeOf2.default)(ButtonBase)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onFocusVisibleHandler = function (event) {
       _this.keyDown = false;
       _this.setState({ focusVisible: true });
 
-      if (_this.props.onKeyboardFocus) {
-        _this.props.onKeyboardFocus(event);
+      if (_this.props.onFocusVisible) {
+        _this.props.onFocusVisible(event);
       }
     }, _this.onRippleRef = function (node) {
       _this.ripple = node;
-    }, _this.ripple = null, _this.keyDown = false, _this.button = null, _this.keyboardFocusTimeout = null, _this.keyboardFocusCheckTime = 50, _this.keyboardFocusMaxCheckTimes = 5, _this.handleKeyDown = function (event) {
+    }, _this.ripple = null, _this.keyDown = false, _this.button = null, _this.focusVisibleTimeout = null, _this.focusVisibleCheckTime = 50, _this.focusVisibleMaxCheckTimes = 5, _this.handleKeyDown = function (event) {
       var _this$props = _this.props,
@@ -189,3 +190,3 @@ component = _this$props.component,
     }, _this.handleMouseDown = (0, _createRippleHandler2.default)(_this, 'MouseDown', 'start', function () {
-      clearTimeout(_this.keyboardFocusTimeout);
+      clearTimeout(_this.focusVisibleTimeout);
       if (_this.state.focusVisible) {
@@ -199,3 +200,3 @@ _this.setState({ focusVisible: false });
     }), _this.handleTouchStart = (0, _createRippleHandler2.default)(_this, 'TouchStart', 'start'), _this.handleTouchEnd = (0, _createRippleHandler2.default)(_this, 'TouchEnd', 'stop'), _this.handleTouchMove = (0, _createRippleHandler2.default)(_this, 'TouchMove', 'stop'), _this.handleBlur = (0, _createRippleHandler2.default)(_this, 'Blur', 'stop', function () {
-      clearTimeout(_this.keyboardFocusTimeout);
+      clearTimeout(_this.focusVisibleTimeout);
       if (_this.state.focusVisible) {
@@ -215,4 +216,4 @@ _this.setState({ focusVisible: false });
       event.persist();
-      (0, _keyboardFocus.detectKeyboardFocus)(_this, _this.button, function () {
-        _this.onKeyboardFocusHandler(event);
+      (0, _focusVisible.detectFocusVisible)(_this, _this.button, function () {
+        _this.onFocusVisibleHandler(event);
       });
@@ -230,3 +231,3 @@
       this.button = _reactDom2.default.findDOMNode(this);
-      (0, _keyboardFocus.listenForFocusKeys)((0, _ownerWindow2.default)(this.button));
+      (0, _focusVisible.listenForFocusKeys)((0, _ownerWindow2.default)(this.button));
     }
@@ -244,3 +245,3 @@ }, {
       this.button = null;
-      clearTimeout(this.keyboardFocusTimeout);
+      clearTimeout(this.focusVisibleTimeout);
     } // Used to help track keyboard activation keyDown
@@ -266,3 +267,3 @@
           onFocus = _props.onFocus,
-          onKeyboardFocus = _props.onKeyboardFocus,
+          onFocusVisible = _props.onFocusVisible,
           onKeyDown = _props.onKeyDown,
@@ -279,3 +280,3 @@ onKeyUp = _props.onKeyUp,
           type = _props.type,
-          other = (0, _objectWithoutProperties3.default)(_props, ['buttonRef', 'centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'focusVisibleClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'tabIndex', 'TouchRippleProps', 'type']);
+          other = (0, _objectWithoutProperties3.default)(_props, ['buttonRef', 'centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'focusVisibleClassName', 'onBlur', 'onFocus', 'onFocusVisible', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'tabIndex', 'TouchRippleProps', 'type']);
 
@@ -416,3 +417,3 @@
    */
-  onKeyboardFocus: _propTypes2.default.func,
+  onFocusVisible: _propTypes2.default.func,
   /**
@@ -419,0 +420,0 @@ * @ignore

Chip/Chip.js

@@ -92,3 +92,4 @@ 'use strict';
       cursor: 'default',
-      outline: 'none', // No outline on focused element in Chrome (as triggered by tabIndex prop)
+      // We disable the focus ring for mouse, touch and keyboard users.
+      outline: 'none',
       border: 'none', // Remove `button` border
@@ -95,0 +96,0 @@ padding: 0 // Remove `button` padding

Dialog/Dialog.d.ts

@@ -14,4 +14,5 @@ import * as React from 'react';
   PaperProps?: Partial<PaperProps>;
-  transition?: React.ReactType;
+  TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'];
+  TransitionProps?: TransitionProps;
 }
@@ -18,0 +19,0 @@

Dialog/Dialog.js

@@ -68,5 +68,4 @@ 'use strict';
       overflowY: 'auto', // Fix IE11 issue, to remove at some point.
-      '&:focus': {
-        outline: 'none'
-      }
+      // We disable the focus ring for mouse, touch and keyboard users.
+      outline: 'none'
     },
@@ -124,5 +123,6 @@ paperWidthXs: {
       PaperProps = props.PaperProps,
-      TransitionProp = props.transition,
+      TransitionComponent = props.TransitionComponent,
       transitionDuration = props.transitionDuration,
-      other = (0, _objectWithoutProperties3.default)(props, ['BackdropProps', 'children', 'classes', 'className', 'disableBackdropClick', 'disableEscapeKeyDown', 'fullScreen', 'fullWidth', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'transition', 'transitionDuration']);
+      TransitionProps = props.TransitionProps,
+      other = (0, _objectWithoutProperties3.default)(props, ['BackdropProps', 'children', 'classes', 'className', 'disableBackdropClick', 'disableEscapeKeyDown', 'fullScreen', 'fullWidth', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -146,4 +146,4 @@
     _react2.default.createElement(
-      TransitionProp,
-      {
+      TransitionComponent,
+      (0, _extends3.default)({
         appear: true,
@@ -158,3 +158,3 @@ 'in': open,
         onExited: onExited
-      },
+      }, TransitionProps),
       _react2.default.createElement(
@@ -262,3 +262,3 @@ _Paper2.default,
    */
-  transition: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  TransitionComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
   /**
@@ -268,3 +268,7 @@ * The duration for the transition, in milliseconds.
    */
-  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })])
+  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: _propTypes2.default.object
 } : {};
@@ -278,3 +282,3 @@
   maxWidth: 'sm',
-  transition: _Fade2.default,
+  TransitionComponent: _Fade2.default,
   transitionDuration: { enter: _transitions.duration.enteringScreen, exit: _transitions.duration.leavingScreen }
@@ -281,0 +285,0 @@ };

Drawer/Drawer.js

@@ -111,5 +111,3 @@ 'use strict';
       // :focus-ring CSS pseudo-class will help.
-      '&:focus': {
-        outline: 'none'
-      }
+      outline: 'none'
     },
@@ -116,0 +114,0 @@ paperAnchorLeft: {

es/ButtonBase/ButtonBase.d.ts

@@ -16,7 +16,7 @@ import * as React from 'react';
   focusVisibleClassName?: string;
-  onKeyboardFocus?: React.FocusEventHandler<any>;
+  onFocusVisible?: React.FocusEventHandler<any>;
   TouchRippleProps?: Partial<TouchRippleProps>;
 }
 
-export type ButtonBaseClassKey = 'root' | 'disabled';
+export type ButtonBaseClassKey = 'root' | 'disabled' | 'focusVisible';
 
@@ -23,0 +23,0 @@ declare const ButtonBase: React.ComponentType<ButtonBaseProps>;

es/ButtonBase/ButtonBase.js

@@ -11,3 +11,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import withStyles from '../styles/withStyles';
-import { listenForFocusKeys, detectKeyboardFocus } from '../utils/keyboardFocus';
+import { listenForFocusKeys, detectFocusVisible } from '../utils/focusVisible';
 import TouchRipple from './TouchRipple';
@@ -25,2 +25,3 @@ import createRippleHandler from './createRippleHandler';
     backgroundColor: 'transparent', // Reset default value
+    // We disable the focus ring for mouse, touch and keyboard users.
     outline: 'none',
@@ -60,12 +61,12 @@ border: 0,
 
-    return _temp = super(...args), this.state = {}, this.onKeyboardFocusHandler = event => {
+    return _temp = super(...args), this.state = {}, this.onFocusVisibleHandler = event => {
       this.keyDown = false;
       this.setState({ focusVisible: true });
 
-      if (this.props.onKeyboardFocus) {
-        this.props.onKeyboardFocus(event);
+      if (this.props.onFocusVisible) {
+        this.props.onFocusVisible(event);
       }
     }, this.onRippleRef = node => {
       this.ripple = node;
-    }, this.ripple = null, this.keyDown = false, this.button = null, this.keyboardFocusTimeout = null, this.keyboardFocusCheckTime = 50, this.keyboardFocusMaxCheckTimes = 5, this.handleKeyDown = event => {
+    }, this.ripple = null, this.keyDown = false, this.button = null, this.focusVisibleTimeout = null, this.focusVisibleCheckTime = 50, this.focusVisibleMaxCheckTimes = 5, this.handleKeyDown = event => {
       const { component, focusRipple, onKeyDown, onClick } = this.props;
@@ -104,3 +105,3 @@ const key = keycode(event);
     }, this.handleMouseDown = createRippleHandler(this, 'MouseDown', 'start', () => {
-      clearTimeout(this.keyboardFocusTimeout);
+      clearTimeout(this.focusVisibleTimeout);
       if (this.state.focusVisible) {
@@ -114,3 +115,3 @@ this.setState({ focusVisible: false });
     }), this.handleTouchStart = createRippleHandler(this, 'TouchStart', 'start'), this.handleTouchEnd = createRippleHandler(this, 'TouchEnd', 'stop'), this.handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop'), this.handleBlur = createRippleHandler(this, 'Blur', 'stop', () => {
-      clearTimeout(this.keyboardFocusTimeout);
+      clearTimeout(this.focusVisibleTimeout);
       if (this.state.focusVisible) {
@@ -130,4 +131,4 @@ this.setState({ focusVisible: false });
       event.persist();
-      detectKeyboardFocus(this, this.button, () => {
-        this.onKeyboardFocusHandler(event);
+      detectFocusVisible(this, this.button, () => {
+        this.onFocusVisibleHandler(event);
       });
@@ -176,3 +177,3 @@
     this.button = null;
-    clearTimeout(this.keyboardFocusTimeout);
+    clearTimeout(this.focusVisibleTimeout);
   } // Used to help track keyboard activation keyDown
@@ -196,3 +197,3 @@
       onFocus,
-      onKeyboardFocus,
+      onFocusVisible,
       onKeyDown,
@@ -210,3 +211,3 @@ onKeyUp,
     } = _props,
-          other = _objectWithoutProperties(_props, ['buttonRef', 'centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'focusVisibleClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'tabIndex', 'TouchRippleProps', 'type']);
+          other = _objectWithoutProperties(_props, ['buttonRef', 'centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'focusVisibleClassName', 'onBlur', 'onFocus', 'onFocusVisible', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'tabIndex', 'TouchRippleProps', 'type']);
 
@@ -325,3 +326,3 @@ const className = classNames(classes.root, {
    */
-  onKeyboardFocus: PropTypes.func,
+  onFocusVisible: PropTypes.func,
   /**
@@ -328,0 +329,0 @@ * @ignore

es/Chip/Chip.js

@@ -32,3 +32,4 @@ import _extends from 'babel-runtime/helpers/extends';
       cursor: 'default',
-      outline: 'none', // No outline on focused element in Chrome (as triggered by tabIndex prop)
+      // We disable the focus ring for mouse, touch and keyboard users.
+      outline: 'none',
       border: 'none', // Remove `button` border
@@ -35,0 +36,0 @@ padding: 0 // Remove `button` padding

es/Dialog/Dialog.d.ts

@@ -14,4 +14,5 @@ import * as React from 'react';
   PaperProps?: Partial<PaperProps>;
-  transition?: React.ReactType;
+  TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'];
+  TransitionProps?: TransitionProps;
 }
@@ -18,0 +19,0 @@

es/Dialog/Dialog.js

@@ -28,5 +28,4 @@ import _extends from 'babel-runtime/helpers/extends';
     overflowY: 'auto', // Fix IE11 issue, to remove at some point.
-    '&:focus': {
-      outline: 'none'
-    }
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 'none'
   },
@@ -80,6 +79,7 @@ paperWidthXs: {
     PaperProps,
-    transition: TransitionProp,
-    transitionDuration
+    TransitionComponent,
+    transitionDuration,
+    TransitionProps
   } = props,
-        other = _objectWithoutProperties(props, ['BackdropProps', 'children', 'classes', 'className', 'disableBackdropClick', 'disableEscapeKeyDown', 'fullScreen', 'fullWidth', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'transition', 'transitionDuration']);
+        other = _objectWithoutProperties(props, ['BackdropProps', 'children', 'classes', 'className', 'disableBackdropClick', 'disableEscapeKeyDown', 'fullScreen', 'fullWidth', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -102,4 +102,4 @@ return React.createElement(
     React.createElement(
-      TransitionProp,
-      {
+      TransitionComponent,
+      _extends({
         appear: true,
@@ -114,3 +114,3 @@ 'in': open,
         onExited: onExited
-      },
+      }, TransitionProps),
       React.createElement(
@@ -222,3 +222,3 @@ Paper,
    */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
@@ -228,3 +228,7 @@ * The duration for the transition, in milliseconds.
    */
-  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })])
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: PropTypes.object
 } : {};
@@ -238,3 +242,3 @@
   maxWidth: 'sm',
-  transition: Fade,
+  TransitionComponent: Fade,
   transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen }
@@ -241,0 +245,0 @@ };

es/Drawer/Drawer.js

@@ -46,5 +46,3 @@ import _extends from 'babel-runtime/helpers/extends';
     // :focus-ring CSS pseudo-class will help.
-    '&:focus': {
-      outline: 'none'
-    }
+    outline: 'none'
   },
@@ -51,0 +49,0 @@ paperAnchorLeft: {

es/ExpansionPanel/ExpansionPanelSummary.js

@@ -122,3 +122,3 @@ import _extends from 'babel-runtime/helpers/extends';
       }, other, {
-        onKeyboardFocus: this.handleFocus,
+        onFocusVisible: this.handleFocus,
         onBlur: this.handleBlur,
@@ -125,0 +125,0 @@ onClick: this.handleChange

es/Icon/Icon.js

@@ -29,7 +29,7 @@ import _extends from 'babel-runtime/helpers/extends';
   },
+  colorError: {
+    color: theme.palette.error.main
+  },
   colorDisabled: {
     color: theme.palette.action.disabled
-  },
-  colorError: {
-    color: theme.palette.error.main
   }
@@ -70,3 +70,3 @@ });
    */
-  color: PropTypes.oneOf(['inherit', 'secondary', 'action', 'disabled', 'error', 'primary'])
+  color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled'])
 } : {};
@@ -73,0 +73,0 @@

es/Input/InputLabel.js

@@ -28,3 +28,4 @@ import _extends from 'babel-runtime/helpers/extends';
     transform: 'translate(0, 1.5px) scale(0.75)',
-    transformOrigin: 'top left'
+    transformOrigin: 'top left',
+    width: '133.33%'
   },
@@ -31,0 +32,0 @@ animated: {

es/List/ListItemIcon.js

@@ -10,5 +10,3 @@ import _extends from 'babel-runtime/helpers/extends';
   root: {
-    height: 24,
     marginRight: theme.spacing.unit * 2,
-    width: 24,
     color: theme.palette.action.active,
@@ -15,0 +13,0 @@ flexShrink: 0

es/Popover/Popover.d.ts

@@ -34,4 +34,5 @@ import * as React from 'react';
   transformOrigin?: PopoverOrigin;
-  transition?: React.ReactType;
+  TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'] | 'auto';
+  TransitionProps?: TransitionProps;
 }
@@ -38,0 +39,0 @@

es/Popover/Popover.js

@@ -80,5 +80,4 @@ import _extends from 'babel-runtime/helpers/extends';
     maxHeight: 'calc(100vh - 32px)',
-    '&:focus': {
-      outline: 'none'
-    }
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 'none'
   }
@@ -267,6 +266,7 @@ };
       transformOrigin,
-      transition: TransitionProp,
-      transitionDuration
+      TransitionComponent,
+      transitionDuration,
+      TransitionProps
     } = _props,
-          other = _objectWithoutProperties(_props, ['action', 'anchorEl', 'anchorOrigin', 'anchorPosition', 'anchorReference', 'children', 'classes', 'container', 'elevation', 'getContentAnchorEl', 'marginThreshold', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'role', 'transformOrigin', 'transition', 'transitionDuration']);
+          other = _objectWithoutProperties(_props, ['action', 'anchorEl', 'anchorOrigin', 'anchorPosition', 'anchorReference', 'children', 'classes', 'container', 'elevation', 'getContentAnchorEl', 'marginThreshold', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'role', 'transformOrigin', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -278,8 +278,2 @@ // If the container prop is provided, use that
 
-    const transitionProps = {};
-    // The provided transition might not support the auto timeout value.
-    if (TransitionProp === Grow) {
-      transitionProps.timeout = transitionDuration;
-    }
-
     return React.createElement(
@@ -289,3 +283,3 @@ Modal,
       React.createElement(
-        TransitionProp,
+        TransitionComponent,
         _extends({
@@ -304,3 +298,3 @@ appear: true,
           }
-        }, transitionProps),
+        }, TransitionProps),
         React.createElement(
@@ -453,7 +447,11 @@ Paper,
    */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * Set to 'auto' to automatically calculate transition time based on height.
    */
-  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto'])])
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto'])]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: PropTypes.object
 } : {};
@@ -473,3 +471,3 @@
   },
-  transition: Grow,
+  TransitionComponent: Grow,
   transitionDuration: 'auto'
@@ -476,0 +474,0 @@ };

es/Progress/CircularProgress.js

@@ -80,15 +80,4 @@ import _extends from 'babel-runtime/helpers/extends';
 function CircularProgress(props) {
-  const {
-    classes,
-    className,
-    color,
-    max,
-    min,
-    size,
-    style,
-    thickness,
-    value,
-    variant
-  } = props,
-        other = _objectWithoutProperties(props, ['classes', 'className', 'color', 'max', 'min', 'size', 'style', 'thickness', 'value', 'variant']);
+  const { classes, className, color, size, style, thickness, value, variant } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'color', 'size', 'style', 'thickness', 'value', 'variant']);
 
@@ -100,13 +89,12 @@ const circleStyle = {};
   if (variant === 'determinate' || variant === 'static') {
-    const relVal = getRelativeValue(value, min, max) * 100;
     const circumference = 2 * Math.PI * (SIZE / 2 - 5);
     circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(relVal);
+    rootProps['aria-valuenow'] = Math.round(value);
 
     if (variant === 'static') {
-      circleStyle.strokeDashoffset = `${((100 - relVal) / 100 * circumference).toFixed(3)}px`;
+      circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
       rootStyle.transform = 'rotate(-90deg)';
     } else {
-      circleStyle.strokeDashoffset = `${(easeIn((100 - relVal) / 100) * circumference).toFixed(3)}px`;
-      rootStyle.transform = `rotate(${(easeOut(relVal / 70) * 270).toFixed(3)}deg)`;
+      circleStyle.strokeDashoffset = `${(easeIn((100 - value) / 100) * circumference).toFixed(3)}px`;
+      rootStyle.transform = `rotate(${(easeOut(value / 70) * 270).toFixed(3)}deg)`;
     }
@@ -128,4 +116,3 @@ }
         className: classNames(classes.svg, {
-          [classes.svgIndeterminate]: variant === 'indeterminate',
-          [classes.svgStatic]: variant === 'static'
+          [classes.svgIndeterminate]: variant === 'indeterminate'
         }),
@@ -163,10 +150,2 @@ viewBox: `0 0 ${SIZE} ${SIZE}`
   /**
-   * The max value of progress in determinate variant.
-   */
-  max: PropTypes.number,
-  /**
-   * The min value of progress in determinate variant.
-   */
-  min: PropTypes.number,
-  /**
    * The size of the circle.
@@ -197,4 +176,2 @@ */
   color: 'primary',
-  max: 100,
-  min: 0,
   size: 40,
@@ -201,0 +178,0 @@ thickness: 3.6,

es/Select/Select.d.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
   displayEmpty?: boolean;
+  IconComponent?: React.ReactType;
   input?: React.ReactNode;
@@ -14,0 +15,0 @@ MenuProps?: Partial<MenuProps>;

es/Select/Select.js

@@ -9,2 +9,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import withStyles from '../styles/withStyles';
+import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import Input from '../Input'; // Import to enforce the CSS injection order
@@ -70,2 +71,3 @@
     displayEmpty,
+    IconComponent,
     input,
@@ -82,3 +84,3 @@ inputProps,
   } = props,
-        other = _objectWithoutProperties(props, ['autoWidth', 'children', 'classes', 'displayEmpty', 'input', 'inputProps', 'MenuProps', 'multiple', 'native', 'onClose', 'onOpen', 'open', 'renderValue', 'SelectDisplayProps']);
+        other = _objectWithoutProperties(props, ['autoWidth', 'children', 'classes', 'displayEmpty', 'IconComponent', 'input', 'inputProps', 'MenuProps', 'multiple', 'native', 'onClose', 'onOpen', 'open', 'renderValue', 'SelectDisplayProps']);
 
@@ -94,2 +96,3 @@ return React.cloneElement(input, _extends({
       displayEmpty,
+      IconComponent,
       MenuProps,
@@ -128,2 +131,6 @@ multiple,
   /**
+   * The icon that displays the arrow.
+   */
+  IconComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
    * An `Input` element; does not have to be a material-ui specific `Input`.
@@ -199,2 +206,3 @@ */
   displayEmpty: false,
+  IconComponent: ArrowDropDownIcon,
   input: React.createElement(Input, null),
@@ -201,0 +209,0 @@ multiple: false,

es/Select/SelectInput.d.ts

@@ -9,2 +9,3 @@ import * as React from 'react';
   disabled?: boolean;
+  IconComponent?: React.ReactType;
   inputRef?: (
@@ -11,0 +12,0 @@ ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps['value'] },

es/Select/SelectInput.js

@@ -8,3 +8,2 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import warning from 'warning';
-import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import Menu from '../Menu/Menu';
@@ -150,2 +149,3 @@ import { isFilled } from '../Input/Input';
       displayEmpty,
+      IconComponent,
       inputRef,
@@ -169,3 +169,3 @@ MenuProps = {},
     } = _props,
-          other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'classes', 'className', 'disabled', 'displayEmpty', 'inputRef', 'MenuProps', 'multiple', 'name', 'native', 'onBlur', 'onChange', 'onClose', 'onFocus', 'onOpen', 'open', 'readOnly', 'renderValue', 'SelectDisplayProps', 'tabIndex', 'type', 'value']);
+          other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'classes', 'className', 'disabled', 'displayEmpty', 'IconComponent', 'inputRef', 'MenuProps', 'multiple', 'name', 'native', 'onBlur', 'onChange', 'onClose', 'onFocus', 'onOpen', 'open', 'readOnly', 'renderValue', 'SelectDisplayProps', 'tabIndex', 'type', 'value']);
     const open = this.isOpenControlled && this.displayNode ? openProp : this.state.open;
@@ -198,3 +198,3 @@
         ),
-        React.createElement(ArrowDropDownIcon, { className: classes.icon })
+        React.createElement(IconComponent, { className: classes.icon })
       );
@@ -295,3 +295,3 @@ }
       }, other)),
-      React.createElement(ArrowDropDownIcon, { className: classes.icon }),
+      React.createElement(IconComponent, { className: classes.icon }),
       React.createElement(
@@ -353,2 +353,6 @@ Menu,
   /**
+   * The icon that displays the arrow.
+   */
+  IconComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
    * Use that property to pass a ref callback to the native select element.
@@ -355,0 +359,0 @@ */

es/Snackbar/Snackbar.d.ts

 import * as React from 'react';
 import { StandardProps } from '..';
-import { SnackbarContentProps } from '.';
+import { ContentProps } from '.';
 import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
@@ -19,2 +19,3 @@
   autoHideDuration?: number;
+  ContentProps?: Partial<ContentProps>;
   disableWindowBlurListener?: boolean;
@@ -27,5 +28,5 @@ message?: React.ReactElement<any>;
   resumeHideDuration?: number;
-  SnackbarContentProps?: Partial<SnackbarContentProps>;
   transition?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'];
+  TransitionProps?: TransitionProps;
 }
@@ -32,0 +33,0 @@

es/Snackbar/Snackbar.js

@@ -172,2 +172,3 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
       className,
+      ContentProps,
       disableWindowBlurListener,
@@ -186,7 +187,7 @@ message,
       resumeHideDuration,
-      SnackbarContentProps,
-      transition: TransitionProp,
-      transitionDuration
+      TransitionComponent,
+      transitionDuration,
+      TransitionProps
     } = _props,
-          other = _objectWithoutProperties(_props, ['action', 'anchorOrigin', 'autoHideDuration', 'children', 'classes', 'className', 'disableWindowBlurListener', 'message', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'onMouseEnter', 'onMouseLeave', 'open', 'resumeHideDuration', 'SnackbarContentProps', 'transition', 'transitionDuration']);
+          other = _objectWithoutProperties(_props, ['action', 'anchorOrigin', 'autoHideDuration', 'children', 'classes', 'className', 'ContentProps', 'disableWindowBlurListener', 'message', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'onMouseEnter', 'onMouseLeave', 'open', 'resumeHideDuration', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -198,9 +199,2 @@ // So we only render active snackbars.
 
-    const transitionProps = {};
-
-    // The provided transition might not support the direction property.
-    if (TransitionProp === Slide) {
-      transitionProps.direction = vertical === 'top' ? 'down' : 'up';
-    }
-
     return React.createElement(
@@ -222,3 +216,3 @@ ClickAwayListener,
         React.createElement(
-          TransitionProp,
+          TransitionComponent,
           _extends({
@@ -233,5 +227,6 @@ appear: true,
             onExiting: onExiting,
-            timeout: transitionDuration
-          }, transitionProps),
-          children || React.createElement(SnackbarContent, _extends({ message: message, action: action }, SnackbarContentProps))
+            timeout: transitionDuration,
+            direction: vertical === 'top' ? 'down' : 'up'
+          }, TransitionProps),
+          children || React.createElement(SnackbarContent, _extends({ message: message, action: action }, ContentProps))
         )
@@ -276,2 +271,6 @@ )
   /**
+   * Properties applied to the `SnackbarContent` element.
+   */
+  ContentProps: PropTypes.object,
+  /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
@@ -346,9 +345,5 @@ */
   /**
-   * Properties applied to the `SnackbarContent` element.
-   */
-  SnackbarContentProps: PropTypes.object,
-  /**
    * Transition component.
    */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
@@ -358,3 +353,7 @@ * The duration for the transition, in milliseconds.
    */
-  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })])
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: PropTypes.object
 } : {};
@@ -368,3 +367,3 @@
   disableWindowBlurListener: false,
-  transition: Slide,
+  TransitionComponent: Slide,
   transitionDuration: {
@@ -371,0 +370,0 @@ enter: duration.enteringScreen,

es/Snackbar/SnackbarContent.d.ts

@@ -5,3 +5,3 @@ import * as React from 'react';
 
-export interface SnackbarContentProps extends StandardProps<PaperProps, SnackbarContentClassKey> {
+export interface ContentProps extends StandardProps<PaperProps, SnackbarContentClassKey> {
   action?: React.ReactElement<any>;
@@ -13,4 +13,4 @@ message: React.ReactElement<any> | string;
 
-declare const SnackbarContent: React.ComponentType<SnackbarContentProps>;
+declare const SnackbarContent: React.ComponentType<ContentProps>;
 
 export default SnackbarContent;

es/Stepper/StepButton.d.ts

@@ -6,3 +6,3 @@ import * as React from 'react';
 
-export type StepButtonIcon = React.ReactElement<any> | string | number;
+export type StepButtonIcon = React.ReactElement<any> | string | number | null;
 
@@ -9,0 +9,0 @@ export interface StepButtonProps extends StandardProps<ButtonBaseProps, StepButtonClasskey> {

es/Stepper/StepContent.d.ts

@@ -15,4 +15,5 @@ import * as React from 'react';
   orientation?: Orientation;
-  transition?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<TransitionProps>;
   transitionDuration?: TransitionProps['timeout'] | 'auto';
+  TransitionProps?: TransitionProps;
 }
@@ -19,0 +20,0 @@

es/Stepper/StepContent.js

@@ -35,6 +35,7 @@ import _extends from 'babel-runtime/helpers/extends';
     orientation,
-    transition: Transition,
-    transitionDuration
+    TransitionComponent,
+    transitionDuration,
+    TransitionProps
   } = props,
-        other = _objectWithoutProperties(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'last', 'optional', 'orientation', 'transition', 'transitionDuration']);
+        other = _objectWithoutProperties(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'last', 'optional', 'orientation', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -47,4 +48,4 @@ process.env.NODE_ENV !== "production" ? warning(orientation === 'vertical', 'Material-UI: <StepContent /> is only designed for use with the vertical stepper.') : void 0;
     React.createElement(
-      Transition,
-      {
+      TransitionComponent,
+      _extends({
         'in': active,
@@ -54,3 +55,3 @@ className: classes.transition,
         unmountOnExit: true
-      },
+      }, TransitionProps),
       children
@@ -104,3 +105,3 @@ )
    */
-  transition: PropTypes.func,
+  TransitionComponent: PropTypes.func,
   /**
@@ -112,7 +113,11 @@ * Adjust the duration of the content expand transition.
    */
-  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto'])])
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto'])]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: PropTypes.object
 } : {};
 
 StepContent.defaultProps = {
-  transition: Collapse,
+  TransitionComponent: Collapse,
   transitionDuration: 'auto'
@@ -119,0 +124,0 @@ };

es/styles/withStyles.js

@@ -103,2 +103,11 @@ import _Object$keys from 'babel-runtime/core-js/object/keys';
       this.attach(this.theme);
+
+      this.cacheClasses = {
+        // Cache for the finalized classes value.
+        value: null,
+        // Cache for the last used classes prop pointer.
+        lastProp: null,
+        // Cache for the last used rendered classes pointer.
+        lastJSS: {}
+      };
     }
@@ -144,2 +153,42 @@
 
+    getClasses() {
+      // Tracks if either the rendered classes or classes prop has changed,
+      // requiring the generation of a new finalized classes object.
+      let generate = false;
+
+      if (!this.disableStylesGeneration) {
+        const sheetManager = this.sheetsManager.get(this.stylesCreatorSaved);
+        const sheetsManagerTheme = sheetManager.get(this.theme);
+        if (sheetsManagerTheme.sheet.classes !== this.cacheClasses.lastJSS) {
+          this.cacheClasses.lastJSS = sheetsManagerTheme.sheet.classes;
+          generate = true;
+        }
+      }
+
+      if (this.props.classes !== this.cacheClasses.lastProp) {
+        this.cacheClasses.lastProp = this.props.classes;
+        generate = true;
+      }
+
+      if (generate) {
+        if (this.props.classes) {
+          this.cacheClasses.value = _extends({}, this.cacheClasses.lastJSS, _Object$keys(this.props.classes).reduce((accumulator, key) => {
+            process.env.NODE_ENV !== "production" ? warning(this.cacheClasses.lastJSS[key] || this.disableStylesGeneration, [`Material-UI: the key \`${key}\` ` + `provided to the classes property is not implemented in ${getDisplayName(Component)}.`, `You can only override one of the following: ${_Object$keys(this.cacheClasses.lastJSS).join(',')}`].join('\n')) : void 0;
+
+            process.env.NODE_ENV !== "production" ? warning(!this.props.classes[key] || typeof this.props.classes[key] === 'string', [`Material-UI: the key \`${key}\` ` + `provided to the classes property is not valid for ${getDisplayName(Component)}.`, `You need to provide a non empty string instead of: ${this.props.classes[key]}.`].join('\n')) : void 0;
+
+            if (this.props.classes[key]) {
+              accumulator[key] = `${this.cacheClasses.lastJSS[key]} ${this.props.classes[key]}`;
+            }
+
+            return accumulator;
+          }, {}));
+        } else {
+          this.cacheClasses.value = this.cacheClasses.lastJSS;
+        }
+      }
+
+      return this.cacheClasses.value;
+    }
+
     attach(theme) {
@@ -220,30 +269,5 @@ if (this.disableStylesGeneration) {
       const _props = this.props,
-            { classes: classesProp, innerRef } = _props,
+            { classes, innerRef } = _props,
             other = _objectWithoutProperties(_props, ['classes', 'innerRef']);
 
-      let classes;
-      let renderedClasses = {};
-
-      if (!this.disableStylesGeneration) {
-        const sheetManager = this.sheetsManager.get(this.stylesCreatorSaved);
-        const sheetsManagerTheme = sheetManager.get(this.theme);
-        renderedClasses = sheetsManagerTheme.sheet.classes;
-      }
-
-      if (classesProp) {
-        classes = _extends({}, renderedClasses, _Object$keys(classesProp).reduce((accumulator, key) => {
-          process.env.NODE_ENV !== "production" ? warning(renderedClasses[key] || this.disableStylesGeneration, [`Material-UI: the key \`${key}\` ` + `provided to the classes property is not implemented in ${getDisplayName(Component)}.`, `You can only override one of the following: ${_Object$keys(renderedClasses).join(',')}`].join('\n')) : void 0;
-
-          process.env.NODE_ENV !== "production" ? warning(!classesProp[key] || typeof classesProp[key] === 'string', [`Material-UI: the key \`${key}\` ` + `provided to the classes property is not valid for ${getDisplayName(Component)}.`, `You need to provide a non empty string instead of: ${classesProp[key]}.`].join('\n')) : void 0;
-
-          if (classesProp[key]) {
-            accumulator[key] = `${renderedClasses[key]} ${classesProp[key]}`;
-          }
-
-          return accumulator;
-        }, {}));
-      } else {
-        classes = renderedClasses;
-      }
-
       const more = getThemeProps({ theme: this.theme, name });
@@ -257,3 +281,3 @@
 
-      return React.createElement(Component, _extends({}, more, { classes: classes, ref: innerRef }, other));
+      return React.createElement(Component, _extends({}, more, { classes: this.getClasses(), ref: innerRef }, other));
     }
@@ -260,0 +284,0 @@ }

es/SvgIcon/SvgIcon.js

@@ -31,7 +31,7 @@ import _extends from 'babel-runtime/helpers/extends';
   },
+  colorError: {
+    color: theme.palette.error.main
+  },
   colorDisabled: {
     color: theme.palette.action.disabled
-  },
-  colorError: {
-    color: theme.palette.error.main
   }
@@ -91,3 +91,3 @@ });
    */
-  color: PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']),
+  color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
   /**
@@ -94,0 +94,0 @@ * Applies a color attribute to the SVG element.

es/Table/TableBody.d.ts

 import * as React from 'react';
+import { StandardProps } from '..';
 
-export interface TableBodyProps extends TableBodyBaseProps {
+export interface TableBodyProps extends StandardProps<TableBodyBaseProps, TableBodyClassKey> {
   component?: React.ReactType<TableBodyBaseProps>;
 }
 
+export type TableBodyClassKey = 'root';
+
 export type TableBodyBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
@@ -8,0 +11,0 @@

es/Table/TableHead.d.ts

 import * as React from 'react';
+import { StandardProps } from '..';
 
-export interface TableHeadProps extends TableHeadBaseProps {
+export interface TableHeadProps extends StandardProps<TableHeadBaseProps, TableHeadClassKey> {
   component?: React.ReactType<TableHeadBaseProps>;
 }
 
+export type TableHeadClassKey = 'root';
+
 export type TableHeadBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
@@ -8,0 +11,0 @@

es/Table/TablePagination.d.ts

@@ -16,3 +16,3 @@ import * as React from 'react';
   extends StandardProps<TablePaginationBaseProps, TablePaginationClassKey> {
-  Actions?: React.ReactType<TablePaginationBaseProps>;
+  ActionsComponent?: React.ReactType<TablePaginationBaseProps>;
   backIconButtonProps?: Partial<IconButtonProps>;
@@ -38,2 +38,3 @@ component?: React.ReactType<TablePaginationBaseProps>;
   | 'spacer'
+  | 'menuItem'
   | 'caption'
@@ -40,0 +41,0 @@ | 'input'

es/Table/TablePagination.js

@@ -32,2 +32,3 @@ import _extends from 'babel-runtime/helpers/extends';
   },
+  menuItem: {},
   caption: {
@@ -76,3 +77,3 @@ flexShrink: 0
           {
-      Actions,
+      ActionsComponent,
       backIconButtonProps,
@@ -93,3 +94,3 @@ classes,
     } = _props,
-          other = _objectWithoutProperties(_props, ['Actions', 'backIconButtonProps', 'classes', 'colSpan', 'component', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'nextIconButtonProps', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions', 'SelectProps']);
+          other = _objectWithoutProperties(_props, ['ActionsComponent', 'backIconButtonProps', 'classes', 'colSpan', 'component', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'nextIconButtonProps', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions', 'SelectProps']);
 
@@ -128,3 +129,7 @@ let colSpan;
             MenuItem,
-            { key: rowsPerPageOption, value: rowsPerPageOption },
+            {
+              className: classes.menuItem,
+              key: rowsPerPageOption,
+              value: rowsPerPageOption
+            },
             rowsPerPageOption
@@ -143,3 +148,3 @@ ))
         ),
-        React.createElement(Actions, {
+        React.createElement(ActionsComponent, {
           className: classes.actions,
@@ -163,3 +168,3 @@ backIconButtonProps: backIconButtonProps,
    */
-  Actions: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  ActionsComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
@@ -232,3 +237,3 @@ * Properties applied to the back arrow `IconButton` component.
 TablePagination.defaultProps = {
-  Actions: TablePaginationActions,
+  ActionsComponent: TablePaginationActions,
   component: TableCell,
@@ -235,0 +240,0 @@ labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,

es/Table/TableRow.js

@@ -14,5 +14,4 @@ import _extends from 'babel-runtime/helpers/extends';
     verticalAlign: 'middle',
-    '&:focus': {
-      outline: 'none'
-    },
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 'none',
     '&$selected': {
@@ -64,3 +63,3 @@ backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' // grey[100]
   /**
-   * Should be valid `<tr>` children such as `TableCell`.
+   * Should be valid <tr> children such as `TableCell`.
    */
@@ -67,0 +66,0 @@ children: PropTypes.node,

es/Tabs/Tabs.d.ts

@@ -13,4 +13,4 @@ import * as React from 'react';
   scrollable?: boolean;
+  ScrollButtonComponent?: React.ReactType;
   scrollButtons?: 'auto' | 'on' | 'off';
-  TabScrollButton?: React.ReactType;
   textColor?: 'secondary' | 'primary' | 'inherit' | string;
@@ -17,0 +17,0 @@ value: any;

es/Tabs/Tabs.js

@@ -64,9 +64,3 @@ import _extends from 'babel-runtime/helpers/extends';
     }, this.getConditionalElements = () => {
-      const {
-        classes,
-        scrollable,
-        scrollButtons,
-        TabScrollButton: TabScrollButtonProp,
-        theme
-      } = this.props;
+      const { classes, scrollable, ScrollButtonComponent, scrollButtons, theme } = this.props;
       const conditionalElements = {};
@@ -80,3 +74,3 @@ conditionalElements.scrollbarSizeListener = scrollable ? React.createElement(ScrollbarSize, {
 
-      conditionalElements.scrollButtonLeft = showScrollButtons ? React.createElement(TabScrollButtonProp, {
+      conditionalElements.scrollButtonLeft = showScrollButtons ? React.createElement(ScrollButtonComponent, {
         direction: theme && theme.direction === 'rtl' ? 'right' : 'left',
@@ -90,3 +84,3 @@ onClick: this.handleLeftScrollClick,
 
-      conditionalElements.scrollButtonRight = showScrollButtons ? React.createElement(TabScrollButtonProp, {
+      conditionalElements.scrollButtonRight = showScrollButtons ? React.createElement(ScrollButtonComponent, {
         direction: theme && theme.direction === 'rtl' ? 'left' : 'right',
@@ -257,4 +251,4 @@ onClick: this.handleRightScrollClick,
       scrollable,
+      ScrollButtonComponent,
       scrollButtons,
-      TabScrollButton: TabScrollButtonProp,
       textColor,
@@ -264,3 +258,3 @@ theme,
     } = _props,
-          other = _objectWithoutProperties(_props, ['action', 'centered', 'children', 'classes', 'className', 'fullWidth', 'indicatorColor', 'onChange', 'scrollable', 'scrollButtons', 'TabScrollButton', 'textColor', 'theme', 'value']);
+          other = _objectWithoutProperties(_props, ['action', 'centered', 'children', 'classes', 'className', 'fullWidth', 'indicatorColor', 'onChange', 'scrollable', 'ScrollButtonComponent', 'scrollButtons', 'textColor', 'theme', 'value']);
 
@@ -390,2 +384,6 @@ process.env.NODE_ENV !== "production" ? warning(!centered || !scrollable, 'Material-UI: you can not use the `centered={true}` and `scrollable={true}` properties ' + 'at the same time on a `Tabs` component.') : void 0;
   /**
+   * The component used to render the scroll buttons.
+   */
+  ScrollButtonComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
    * Determine behavior of scroll buttons when tabs are set to scroll
@@ -398,6 +396,2 @@ * `auto` will only present them on medium and larger viewports
   /**
-   * The component used to render the scroll buttons.
-   */
-  TabScrollButton: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  /**
    * Determines the color of the `Tab`.
@@ -422,4 +416,4 @@ */
   scrollable: false,
+  ScrollButtonComponent: TabScrollButton,
   scrollButtons: 'auto',
-  TabScrollButton,
   textColor: 'inherit'
@@ -426,0 +420,0 @@ };

ExpansionPanel/ExpansionPanelSummary.js

@@ -190,3 +190,3 @@ 'use strict';
         }, other, {
-          onKeyboardFocus: this.handleFocus,
+          onFocusVisible: this.handleFocus,
           onBlur: this.handleBlur,
@@ -193,0 +193,0 @@ onClick: this.handleChange

Icon/Icon.js

@@ -61,7 +61,7 @@ 'use strict';
     },
+    colorError: {
+      color: theme.palette.error.main
+    },
     colorDisabled: {
       color: theme.palette.action.disabled
-    },
-    colorError: {
-      color: theme.palette.error.main
     }
@@ -105,3 +105,3 @@ };
    */
-  color: _propTypes2.default.oneOf(['inherit', 'secondary', 'action', 'disabled', 'error', 'primary'])
+  color: _propTypes2.default.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled'])
 } : {};
@@ -108,0 +108,0 @@

index.es.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v1.0.0-beta.44
+/** @license Material-UI v1.0.0-beta.45
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v1.0.0-beta.44
+/** @license Material-UI v1.0.0-beta.45
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

Input/InputLabel.js

@@ -58,3 +58,4 @@ 'use strict';
       transform: 'translate(0, 1.5px) scale(0.75)',
-      transformOrigin: 'top left'
+      transformOrigin: 'top left',
+      width: '133.33%'
     },
@@ -61,0 +62,0 @@ animated: {

List/ListItemIcon.js

@@ -37,5 +37,3 @@ 'use strict';
     root: {
-      height: 24,
       marginRight: theme.spacing.unit * 2,
-      width: 24,
       color: theme.palette.action.active,
@@ -42,0 +40,0 @@ flexShrink: 0

package.json

@@ -5,3 +5,3 @@ {
   "author": "Material-UI Team",
-  "version": "1.0.0-beta.44",
+  "version": "1.0.0-beta.45",
   "description": "React components that implement Google's Material Design.",
@@ -46,6 +46,7 @@ "keywords": [
     "normalize-scroll-left": "^0.1.2",
+    "npm": "^6.0.0",
     "prop-types": "^15.6.0",
     "react-event-listener": "^0.5.1",
     "react-jss": "^8.1.0",
-    "react-lifecycles-compat": "^2.0.0",
+    "react-lifecycles-compat": "^3.0.0",
     "react-popper": "^0.10.0",
@@ -52,0 +53,0 @@ "react-scrollbar-size": "^2.0.2",

Popover/Popover.d.ts

@@ -34,4 +34,5 @@ import * as React from 'react';
   transformOrigin?: PopoverOrigin;
-  transition?: React.ReactType;
+  TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'] | 'auto';
+  TransitionProps?: TransitionProps;
 }
@@ -38,0 +39,0 @@

Popover/Popover.js

@@ -151,5 +151,4 @@ 'use strict';
     maxHeight: 'calc(100vh - 32px)',
-    '&:focus': {
-      outline: 'none'
-    }
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 'none'
   }
@@ -375,5 +374,6 @@ };
           transformOrigin = _props3.transformOrigin,
-          TransitionProp = _props3.transition,
+          TransitionComponent = _props3.TransitionComponent,
           transitionDuration = _props3.transitionDuration,
-          other = (0, _objectWithoutProperties3.default)(_props3, ['action', 'anchorEl', 'anchorOrigin', 'anchorPosition', 'anchorReference', 'children', 'classes', 'container', 'elevation', 'getContentAnchorEl', 'marginThreshold', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'role', 'transformOrigin', 'transition', 'transitionDuration']);
+          TransitionProps = _props3.TransitionProps,
+          other = (0, _objectWithoutProperties3.default)(_props3, ['action', 'anchorEl', 'anchorOrigin', 'anchorPosition', 'anchorReference', 'children', 'classes', 'container', 'elevation', 'getContentAnchorEl', 'marginThreshold', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'role', 'transformOrigin', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -386,8 +386,2 @@ // If the container prop is provided, use that
 
-      var transitionProps = {};
-      // The provided transition might not support the auto timeout value.
-      if (TransitionProp === _Grow2.default) {
-        transitionProps.timeout = transitionDuration;
-      }
-
       return _react2.default.createElement(
@@ -397,3 +391,3 @@ _Modal2.default,
         _react2.default.createElement(
-          TransitionProp,
+          TransitionComponent,
           (0, _extends3.default)({
@@ -412,3 +406,3 @@ appear: true,
             }
-          }, transitionProps),
+          }, TransitionProps),
           _react2.default.createElement(
@@ -563,7 +557,11 @@ _Paper2.default,
    */
-  transition: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  TransitionComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
   /**
    * Set to 'auto' to automatically calculate transition time based on height.
    */
-  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number }), _propTypes2.default.oneOf(['auto'])])
+  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number }), _propTypes2.default.oneOf(['auto'])]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: _propTypes2.default.object
 } : {};
@@ -583,3 +581,3 @@
   },
-  transition: _Grow2.default,
+  TransitionComponent: _Grow2.default,
   transitionDuration: 'auto'
@@ -586,0 +584,0 @@ };

Progress/CircularProgress.js

@@ -113,9 +113,5 @@ 'use strict';
 function CircularProgress(props) {
-  var _classNames2;
-
   var classes = props.classes,
       className = props.className,
       color = props.color,
-      max = props.max,
-      min = props.min,
       size = props.size,
@@ -126,3 +122,3 @@ style = props.style,
       variant = props.variant,
-      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'max', 'min', 'size', 'style', 'thickness', 'value', 'variant']);
+      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'size', 'style', 'thickness', 'value', 'variant']);
 
@@ -135,13 +131,12 @@
   if (variant === 'determinate' || variant === 'static') {
-    var relVal = getRelativeValue(value, min, max) * 100;
     var circumference = 2 * Math.PI * (SIZE / 2 - 5);
     circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(relVal);
+    rootProps['aria-valuenow'] = Math.round(value);
 
     if (variant === 'static') {
-      circleStyle.strokeDashoffset = ((100 - relVal) / 100 * circumference).toFixed(3) + 'px';
+      circleStyle.strokeDashoffset = ((100 - value) / 100 * circumference).toFixed(3) + 'px';
       rootStyle.transform = 'rotate(-90deg)';
     } else {
-      circleStyle.strokeDashoffset = (easeIn((100 - relVal) / 100) * circumference).toFixed(3) + 'px';
-      rootStyle.transform = 'rotate(' + (easeOut(relVal / 70) * 270).toFixed(3) + 'deg)';
+      circleStyle.strokeDashoffset = (easeIn((100 - value) / 100) * circumference).toFixed(3) + 'px';
+      rootStyle.transform = 'rotate(' + (easeOut(value / 70) * 270).toFixed(3) + 'deg)';
     }
@@ -160,3 +155,3 @@ }
       {
-        className: (0, _classnames2.default)(classes.svg, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.svgIndeterminate, variant === 'indeterminate'), (0, _defineProperty3.default)(_classNames2, classes.svgStatic, variant === 'static'), _classNames2)),
+        className: (0, _classnames2.default)(classes.svg, (0, _defineProperty3.default)({}, classes.svgIndeterminate, variant === 'indeterminate')),
         viewBox: '0 0 ' + SIZE + ' ' + SIZE
@@ -191,10 +186,2 @@ },
   /**
-   * The max value of progress in determinate variant.
-   */
-  max: _propTypes2.default.number,
-  /**
-   * The min value of progress in determinate variant.
-   */
-  min: _propTypes2.default.number,
-  /**
    * The size of the circle.
@@ -225,4 +212,2 @@ */
   color: 'primary',
-  max: 100,
-  min: 0,
   size: 40,
@@ -229,0 +214,0 @@ thickness: 3.6,

Select/Select.d.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
   displayEmpty?: boolean;
+  IconComponent?: React.ReactType;
   input?: React.ReactNode;
@@ -14,0 +15,0 @@ MenuProps?: Partial<MenuProps>;

Select/Select.js

@@ -32,2 +32,6 @@ 'use strict';
 
+var _ArrowDropDown = require('../internal/svg-icons/ArrowDropDown');
+
+var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
+
 var _Input = require('../Input');
@@ -41,2 +45,4 @@
 
+// @inheritedComponent Input
+
 var styles = exports.styles = function styles(theme) {
@@ -94,3 +100,3 @@ return {
   };
-}; // @inheritedComponent Input
+};
 
@@ -102,2 +108,3 @@ function Select(props) {
       displayEmpty = props.displayEmpty,
+      IconComponent = props.IconComponent,
       input = props.input,
@@ -113,3 +120,3 @@ inputProps = props.inputProps,
       SelectDisplayProps = props.SelectDisplayProps,
-      other = (0, _objectWithoutProperties3.default)(props, ['autoWidth', 'children', 'classes', 'displayEmpty', 'input', 'inputProps', 'MenuProps', 'multiple', 'native', 'onClose', 'onOpen', 'open', 'renderValue', 'SelectDisplayProps']);
+      other = (0, _objectWithoutProperties3.default)(props, ['autoWidth', 'children', 'classes', 'displayEmpty', 'IconComponent', 'input', 'inputProps', 'MenuProps', 'multiple', 'native', 'onClose', 'onOpen', 'open', 'renderValue', 'SelectDisplayProps']);
 
@@ -126,2 +133,3 @@
       displayEmpty: displayEmpty,
+      IconComponent: IconComponent,
       MenuProps: MenuProps,
@@ -160,2 +168,6 @@ multiple: multiple,
   /**
+   * The icon that displays the arrow.
+   */
+  IconComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
    * An `Input` element; does not have to be a material-ui specific `Input`.
@@ -231,2 +243,3 @@ */
   displayEmpty: false,
+  IconComponent: _ArrowDropDown2.default,
   input: _react2.default.createElement(_Input2.default, null),
@@ -233,0 +246,0 @@ multiple: false,

Select/SelectInput.d.ts

@@ -9,2 +9,3 @@ import * as React from 'react';
   disabled?: boolean;
+  IconComponent?: React.ReactType;
   inputRef?: (
@@ -11,0 +12,0 @@ ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps['value'] },

Select/SelectInput.js

@@ -63,6 +63,2 @@ 'use strict';
 
-var _ArrowDropDown = require('../internal/svg-icons/ArrowDropDown');
-
-var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
-
 var _Menu = require('../Menu/Menu');
@@ -239,2 +235,3 @@
           displayEmpty = _props.displayEmpty,
+          IconComponent = _props.IconComponent,
           inputRef = _props.inputRef,
@@ -259,3 +256,3 @@ _props$MenuProps = _props.MenuProps,
           value = _props.value,
-          other = (0, _objectWithoutProperties3.default)(_props, ['autoWidth', 'children', 'classes', 'className', 'disabled', 'displayEmpty', 'inputRef', 'MenuProps', 'multiple', 'name', 'native', 'onBlur', 'onChange', 'onClose', 'onFocus', 'onOpen', 'open', 'readOnly', 'renderValue', 'SelectDisplayProps', 'tabIndex', 'type', 'value']);
+          other = (0, _objectWithoutProperties3.default)(_props, ['autoWidth', 'children', 'classes', 'className', 'disabled', 'displayEmpty', 'IconComponent', 'inputRef', 'MenuProps', 'multiple', 'name', 'native', 'onBlur', 'onChange', 'onClose', 'onFocus', 'onOpen', 'open', 'readOnly', 'renderValue', 'SelectDisplayProps', 'tabIndex', 'type', 'value']);
 
@@ -287,3 +284,3 @@ var open = this.isOpenControlled && this.displayNode ? openProp : this.state.open;
           ),
-          _react2.default.createElement(_ArrowDropDown2.default, { className: classes.icon })
+          _react2.default.createElement(IconComponent, { className: classes.icon })
         );
@@ -382,3 +379,3 @@ }
         }, other)),
-        _react2.default.createElement(_ArrowDropDown2.default, { className: classes.icon }),
+        _react2.default.createElement(IconComponent, { className: classes.icon }),
         _react2.default.createElement(
@@ -442,2 +439,6 @@ _Menu2.default,
   /**
+   * The icon that displays the arrow.
+   */
+  IconComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
    * Use that property to pass a ref callback to the native select element.
@@ -444,0 +445,0 @@ */

Snackbar/Snackbar.d.ts

 import * as React from 'react';
 import { StandardProps } from '..';
-import { SnackbarContentProps } from '.';
+import { ContentProps } from '.';
 import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
@@ -19,2 +19,3 @@
   autoHideDuration?: number;
+  ContentProps?: Partial<ContentProps>;
   disableWindowBlurListener?: boolean;
@@ -27,5 +28,5 @@ message?: React.ReactElement<any>;
   resumeHideDuration?: number;
-  SnackbarContentProps?: Partial<SnackbarContentProps>;
   transition?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'];
+  TransitionProps?: TransitionProps;
 }
@@ -32,0 +33,0 @@

Snackbar/Snackbar.js

@@ -232,2 +232,3 @@ 'use strict';
           className = _props.className,
+          ContentProps = _props.ContentProps,
           disableWindowBlurListener = _props.disableWindowBlurListener,
@@ -246,6 +247,6 @@ message = _props.message,
           resumeHideDuration = _props.resumeHideDuration,
-          SnackbarContentProps = _props.SnackbarContentProps,
-          TransitionProp = _props.transition,
+          TransitionComponent = _props.TransitionComponent,
           transitionDuration = _props.transitionDuration,
-          other = (0, _objectWithoutProperties3.default)(_props, ['action', 'anchorOrigin', 'autoHideDuration', 'children', 'classes', 'className', 'disableWindowBlurListener', 'message', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'onMouseEnter', 'onMouseLeave', 'open', 'resumeHideDuration', 'SnackbarContentProps', 'transition', 'transitionDuration']);
+          TransitionProps = _props.TransitionProps,
+          other = (0, _objectWithoutProperties3.default)(_props, ['action', 'anchorOrigin', 'autoHideDuration', 'children', 'classes', 'className', 'ContentProps', 'disableWindowBlurListener', 'message', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'onMouseEnter', 'onMouseLeave', 'open', 'resumeHideDuration', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -258,9 +259,2 @@ // So we only render active snackbars.
 
-      var transitionProps = {};
-
-      // The provided transition might not support the direction property.
-      if (TransitionProp === _Slide2.default) {
-        transitionProps.direction = vertical === 'top' ? 'down' : 'up';
-      }
-
       return _react2.default.createElement(
@@ -282,3 +276,3 @@ _ClickAwayListener2.default,
           _react2.default.createElement(
-            TransitionProp,
+            TransitionComponent,
             (0, _extends9.default)({
@@ -293,5 +287,6 @@ appear: true,
               onExiting: onExiting,
-              timeout: transitionDuration
-            }, transitionProps),
-            children || _react2.default.createElement(_SnackbarContent2.default, (0, _extends9.default)({ message: message, action: action }, SnackbarContentProps))
+              timeout: transitionDuration,
+              direction: vertical === 'top' ? 'down' : 'up'
+            }, TransitionProps),
+            children || _react2.default.createElement(_SnackbarContent2.default, (0, _extends9.default)({ message: message, action: action }, ContentProps))
           )
@@ -355,2 +350,6 @@ )
   /**
+   * Properties applied to the `SnackbarContent` element.
+   */
+  ContentProps: _propTypes2.default.object,
+  /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
@@ -425,9 +424,5 @@ */
   /**
-   * Properties applied to the `SnackbarContent` element.
-   */
-  SnackbarContentProps: _propTypes2.default.object,
-  /**
    * Transition component.
    */
-  transition: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  TransitionComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
   /**
@@ -437,3 +432,7 @@ * The duration for the transition, in milliseconds.
    */
-  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })])
+  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: _propTypes2.default.object
 } : {};
@@ -447,3 +446,3 @@
   disableWindowBlurListener: false,
-  transition: _Slide2.default,
+  TransitionComponent: _Slide2.default,
   transitionDuration: {
@@ -450,0 +449,0 @@ enter: _transitions.duration.enteringScreen,

Snackbar/SnackbarContent.d.ts

@@ -5,3 +5,3 @@ import * as React from 'react';
 
-export interface SnackbarContentProps extends StandardProps<PaperProps, SnackbarContentClassKey> {
+export interface ContentProps extends StandardProps<PaperProps, SnackbarContentClassKey> {
   action?: React.ReactElement<any>;
@@ -13,4 +13,4 @@ message: React.ReactElement<any> | string;
 
-declare const SnackbarContent: React.ComponentType<SnackbarContentProps>;
+declare const SnackbarContent: React.ComponentType<ContentProps>;
 
 export default SnackbarContent;

Stepper/StepButton.d.ts

@@ -6,3 +6,3 @@ import * as React from 'react';
 
-export type StepButtonIcon = React.ReactElement<any> | string | number;
+export type StepButtonIcon = React.ReactElement<any> | string | number | null;
 
@@ -9,0 +9,0 @@ export interface StepButtonProps extends StandardProps<ButtonBaseProps, StepButtonClasskey> {

Stepper/StepContent.d.ts

@@ -15,4 +15,5 @@ import * as React from 'react';
   orientation?: Orientation;
-  transition?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<TransitionProps>;
   transitionDuration?: TransitionProps['timeout'] | 'auto';
+  TransitionProps?: TransitionProps;
 }
@@ -19,0 +20,0 @@

Stepper/StepContent.js

@@ -72,5 +72,6 @@ 'use strict';
       orientation = props.orientation,
-      Transition = props.transition,
+      TransitionComponent = props.TransitionComponent,
       transitionDuration = props.transitionDuration,
-      other = (0, _objectWithoutProperties3.default)(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'last', 'optional', 'orientation', 'transition', 'transitionDuration']);
+      TransitionProps = props.TransitionProps,
+      other = (0, _objectWithoutProperties3.default)(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'last', 'optional', 'orientation', 'TransitionComponent', 'transitionDuration', 'TransitionProps']);
 
@@ -84,4 +85,4 @@
     _react2.default.createElement(
-      Transition,
-      {
+      TransitionComponent,
+      (0, _extends3.default)({
         'in': active,
@@ -91,3 +92,3 @@ className: classes.transition,
         unmountOnExit: true
-      },
+      }, TransitionProps),
       children
@@ -141,3 +142,3 @@ )
    */
-  transition: _propTypes2.default.func,
+  TransitionComponent: _propTypes2.default.func,
   /**
@@ -149,7 +150,11 @@ * Adjust the duration of the content expand transition.
    */
-  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number }), _propTypes2.default.oneOf(['auto'])])
+  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number }), _propTypes2.default.oneOf(['auto'])]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: _propTypes2.default.object
 } : {};
 
 StepContent.defaultProps = {
-  transition: _Collapse2.default,
+  TransitionComponent: _Collapse2.default,
   transitionDuration: 'auto'
@@ -156,0 +161,0 @@ };

styles/withStyles.js

@@ -205,2 +205,11 @@ 'use strict';
         _this.attach(_this.theme);
+
+        _this.cacheClasses = {
+          // Cache for the finalized classes value.
+          value: null,
+          // Cache for the last used classes prop pointer.
+          lastProp: null,
+          // Cache for the last used rendered classes pointer.
+          lastJSS: {}
+        };
         return _this;
@@ -253,2 +262,45 @@ }
       }, {
+        key: 'getClasses',
+        value: function getClasses() {
+          var _this3 = this;
+
+          // Tracks if either the rendered classes or classes prop has changed,
+          // requiring the generation of a new finalized classes object.
+          var generate = false;
+
+          if (!this.disableStylesGeneration) {
+            var sheetManager = this.sheetsManager.get(this.stylesCreatorSaved);
+            var sheetsManagerTheme = sheetManager.get(this.theme);
+            if (sheetsManagerTheme.sheet.classes !== this.cacheClasses.lastJSS) {
+              this.cacheClasses.lastJSS = sheetsManagerTheme.sheet.classes;
+              generate = true;
+            }
+          }
+
+          if (this.props.classes !== this.cacheClasses.lastProp) {
+            this.cacheClasses.lastProp = this.props.classes;
+            generate = true;
+          }
+
+          if (generate) {
+            if (this.props.classes) {
+              this.cacheClasses.value = (0, _extends3.default)({}, this.cacheClasses.lastJSS, (0, _keys2.default)(this.props.classes).reduce(function (accumulator, key) {
+                process.env.NODE_ENV !== "production" ? (0, _warning2.default)(_this3.cacheClasses.lastJSS[key] || _this3.disableStylesGeneration, ['Material-UI: the key `' + key + '` ' + ('provided to the classes property is not implemented in ' + (0, _getDisplayName2.default)(Component) + '.'), 'You can only override one of the following: ' + (0, _keys2.default)(_this3.cacheClasses.lastJSS).join(',')].join('\n')) : void 0;
+
+                process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!_this3.props.classes[key] || typeof _this3.props.classes[key] === 'string', ['Material-UI: the key `' + key + '` ' + ('provided to the classes property is not valid for ' + (0, _getDisplayName2.default)(Component) + '.'), 'You need to provide a non empty string instead of: ' + _this3.props.classes[key] + '.'].join('\n')) : void 0;
+
+                if (_this3.props.classes[key]) {
+                  accumulator[key] = _this3.cacheClasses.lastJSS[key] + ' ' + _this3.props.classes[key];
+                }
+
+                return accumulator;
+              }, {}));
+            } else {
+              this.cacheClasses.value = this.cacheClasses.lastJSS;
+            }
+          }
+
+          return this.cacheClasses.value;
+        }
+      }, {
         key: 'attach',
@@ -331,6 +383,4 @@ value: function attach(theme) {
         value: function render() {
-          var _this3 = this;
-
           var _props = this.props,
-              classesProp = _props.classes,
+              classes = _props.classes,
               innerRef = _props.innerRef,
@@ -340,27 +390,2 @@ other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'innerRef']);
 
-          var classes = void 0;
-          var renderedClasses = {};
-
-          if (!this.disableStylesGeneration) {
-            var sheetManager = this.sheetsManager.get(this.stylesCreatorSaved);
-            var sheetsManagerTheme = sheetManager.get(this.theme);
-            renderedClasses = sheetsManagerTheme.sheet.classes;
-          }
-
-          if (classesProp) {
-            classes = (0, _extends3.default)({}, renderedClasses, (0, _keys2.default)(classesProp).reduce(function (accumulator, key) {
-              process.env.NODE_ENV !== "production" ? (0, _warning2.default)(renderedClasses[key] || _this3.disableStylesGeneration, ['Material-UI: the key `' + key + '` ' + ('provided to the classes property is not implemented in ' + (0, _getDisplayName2.default)(Component) + '.'), 'You can only override one of the following: ' + (0, _keys2.default)(renderedClasses).join(',')].join('\n')) : void 0;
-
-              process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!classesProp[key] || typeof classesProp[key] === 'string', ['Material-UI: the key `' + key + '` ' + ('provided to the classes property is not valid for ' + (0, _getDisplayName2.default)(Component) + '.'), 'You need to provide a non empty string instead of: ' + classesProp[key] + '.'].join('\n')) : void 0;
-
-              if (classesProp[key]) {
-                accumulator[key] = renderedClasses[key] + ' ' + classesProp[key];
-              }
-
-              return accumulator;
-            }, {}));
-          } else {
-            classes = renderedClasses;
-          }
-
           var more = (0, _getThemeProps2.default)({ theme: this.theme, name: name });
@@ -374,3 +399,3 @@
 
-          return _react2.default.createElement(Component, (0, _extends3.default)({}, more, { classes: classes, ref: innerRef }, other));
+          return _react2.default.createElement(Component, (0, _extends3.default)({}, more, { classes: this.getClasses(), ref: innerRef }, other));
         }
@@ -377,0 +402,0 @@ }]);

SvgIcon/SvgIcon.js

@@ -63,7 +63,7 @@ 'use strict';
     },
+    colorError: {
+      color: theme.palette.error.main
+    },
     colorDisabled: {
       color: theme.palette.action.disabled
-    },
-    colorError: {
-      color: theme.palette.error.main
     }
@@ -121,3 +121,3 @@ };
    */
-  color: _propTypes2.default.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']),
+  color: _propTypes2.default.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
   /**
@@ -124,0 +124,0 @@ * Applies a color attribute to the SVG element.

Table/TableBody.d.ts

 import * as React from 'react';
+import { StandardProps } from '..';
 
-export interface TableBodyProps extends TableBodyBaseProps {
+export interface TableBodyProps extends StandardProps<TableBodyBaseProps, TableBodyClassKey> {
   component?: React.ReactType<TableBodyBaseProps>;
 }
 
+export type TableBodyClassKey = 'root';
+
 export type TableBodyBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
@@ -8,0 +11,0 @@

Table/TableHead.d.ts

 import * as React from 'react';
+import { StandardProps } from '..';
 
-export interface TableHeadProps extends TableHeadBaseProps {
+export interface TableHeadProps extends StandardProps<TableHeadBaseProps, TableHeadClassKey> {
   component?: React.ReactType<TableHeadBaseProps>;
 }
 
+export type TableHeadClassKey = 'root';
+
 export type TableHeadBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
@@ -8,0 +11,0 @@

Table/TablePagination.d.ts

@@ -16,3 +16,3 @@ import * as React from 'react';
   extends StandardProps<TablePaginationBaseProps, TablePaginationClassKey> {
-  Actions?: React.ReactType<TablePaginationBaseProps>;
+  ActionsComponent?: React.ReactType<TablePaginationBaseProps>;
   backIconButtonProps?: Partial<IconButtonProps>;
@@ -38,2 +38,3 @@ component?: React.ReactType<TablePaginationBaseProps>;
   | 'spacer'
+  | 'menuItem'
   | 'caption'
@@ -40,0 +41,0 @@ | 'input'

Table/TablePagination.js

@@ -95,2 +95,3 @@ 'use strict';
     },
+    menuItem: {},
     caption: {
@@ -156,3 +157,3 @@ flexShrink: 0
       var _props2 = this.props,
-          Actions = _props2.Actions,
+          ActionsComponent = _props2.ActionsComponent,
           backIconButtonProps = _props2.backIconButtonProps,
@@ -172,3 +173,3 @@ classes = _props2.classes,
           SelectProps = _props2.SelectProps,
-          other = (0, _objectWithoutProperties3.default)(_props2, ['Actions', 'backIconButtonProps', 'classes', 'colSpan', 'component', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'nextIconButtonProps', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions', 'SelectProps']);
+          other = (0, _objectWithoutProperties3.default)(_props2, ['ActionsComponent', 'backIconButtonProps', 'classes', 'colSpan', 'component', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'nextIconButtonProps', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions', 'SelectProps']);
 
@@ -209,3 +210,7 @@
                 _Menu.MenuItem,
-                { key: rowsPerPageOption, value: rowsPerPageOption },
+                {
+                  className: classes.menuItem,
+                  key: rowsPerPageOption,
+                  value: rowsPerPageOption
+                },
                 rowsPerPageOption
@@ -225,3 +230,3 @@ );
           ),
-          _react2.default.createElement(Actions, {
+          _react2.default.createElement(ActionsComponent, {
             className: classes.actions,
@@ -247,3 +252,3 @@ backIconButtonProps: backIconButtonProps,
    */
-  Actions: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  ActionsComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
   /**
@@ -316,3 +321,3 @@ * Properties applied to the back arrow `IconButton` component.
 TablePagination.defaultProps = {
-  Actions: _TablePaginationActions2.default,
+  ActionsComponent: _TablePaginationActions2.default,
   component: _TableCell2.default,
@@ -319,0 +324,0 @@ labelDisplayedRows: function labelDisplayedRows(_ref) {

Table/TableRow.js

@@ -45,5 +45,4 @@ 'use strict';
       verticalAlign: 'middle',
-      '&:focus': {
-        outline: 'none'
-      },
+      // We disable the focus ring for mouse, touch and keyboard users.
+      outline: 'none',
       '&$selected': {
@@ -92,3 +91,3 @@ backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' // grey[100]
   /**
-   * Should be valid `<tr>` children such as `TableCell`.
+   * Should be valid <tr> children such as `TableCell`.
    */
@@ -95,0 +94,0 @@ children: _propTypes2.default.node,

Tabs/Tabs.d.ts

@@ -13,4 +13,4 @@ import * as React from 'react';
   scrollable?: boolean;
+  ScrollButtonComponent?: React.ReactType;
   scrollButtons?: 'auto' | 'on' | 'off';
-  TabScrollButton?: React.ReactType;
   textColor?: 'secondary' | 'primary' | 'inherit' | string;
@@ -17,0 +17,0 @@ value: any;

Tabs/Tabs.js

@@ -152,4 +152,4 @@ 'use strict';
           scrollable = _this$props.scrollable,
+          ScrollButtonComponent = _this$props.ScrollButtonComponent,
           scrollButtons = _this$props.scrollButtons,
-          TabScrollButtonProp = _this$props.TabScrollButton,
           theme = _this$props.theme;
@@ -165,3 +165,3 @@
 
-      conditionalElements.scrollButtonLeft = showScrollButtons ? _react2.default.createElement(TabScrollButtonProp, {
+      conditionalElements.scrollButtonLeft = showScrollButtons ? _react2.default.createElement(ScrollButtonComponent, {
         direction: theme && theme.direction === 'rtl' ? 'right' : 'left',
@@ -173,3 +173,3 @@ onClick: _this.handleLeftScrollClick,
 
-      conditionalElements.scrollButtonRight = showScrollButtons ? _react2.default.createElement(TabScrollButtonProp, {
+      conditionalElements.scrollButtonRight = showScrollButtons ? _react2.default.createElement(ScrollButtonComponent, {
         direction: theme && theme.direction === 'rtl' ? 'left' : 'right',
@@ -366,8 +366,8 @@ onClick: _this.handleRightScrollClick,
           scrollable = _props.scrollable,
+          ScrollButtonComponent = _props.ScrollButtonComponent,
           scrollButtons = _props.scrollButtons,
-          TabScrollButtonProp = _props.TabScrollButton,
           textColor = _props.textColor,
           theme = _props.theme,
           value = _props.value,
-          other = (0, _objectWithoutProperties3.default)(_props, ['action', 'centered', 'children', 'classes', 'className', 'fullWidth', 'indicatorColor', 'onChange', 'scrollable', 'scrollButtons', 'TabScrollButton', 'textColor', 'theme', 'value']);
+          other = (0, _objectWithoutProperties3.default)(_props, ['action', 'centered', 'children', 'classes', 'className', 'fullWidth', 'indicatorColor', 'onChange', 'scrollable', 'ScrollButtonComponent', 'scrollButtons', 'textColor', 'theme', 'value']);
 
@@ -495,2 +495,6 @@
   /**
+   * The component used to render the scroll buttons.
+   */
+  ScrollButtonComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
    * Determine behavior of scroll buttons when tabs are set to scroll
@@ -503,6 +507,2 @@ * `auto` will only present them on medium and larger viewports
   /**
-   * The component used to render the scroll buttons.
-   */
-  TabScrollButton: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
-  /**
    * Determines the color of the `Tab`.
@@ -527,4 +527,4 @@ */
   scrollable: false,
+  ScrollButtonComponent: _TabScrollButton2.default,
   scrollButtons: 'auto',
-  TabScrollButton: _TabScrollButton2.default,
   textColor: 'inherit'
@@ -531,0 +531,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4993996

increased by5.91%

Number of package files

861

increased by0.35%

Lines of code

85964

increased by0.13%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

184

increased byInfinity%

Worsened metrics

Dependency count

31

increased by3.33%

Dependency changes

• + Addednpm@^6.0.0

• + Addednpm@6.14.18(transitive)

• - Removedreact-lifecycles-compat@2.0.2(transitive)

• Updatedreact-lifecycles-compat@^3.0.0