Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

material-ui

Package Overview
Dependencies
Maintainers
5
Versions
167
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

material-ui - npm Package Compare versions

Comparing version 1.0.0-beta.41 to 1.0.0-beta.42

es/SwipeableDrawer/SwipeArea.js
es/utils/ownerWindow.d.ts
es/utils/ownerWindow.js
SwipeableDrawer/SwipeArea.js
SwipeableDrawer/SwipeArea.js.flow
utils/ownerWindow.d.ts
utils/ownerWindow.js
utils/ownerWindow.js.flow

6

BottomNavigation/BottomNavigationAction.d.ts

@@ -19,7 +19,5 @@ import * as React from 'react';

| 'selected'
| 'selectedIconOnly'
| 'iconOnly'
| 'wrapper'
| 'label'
| 'labelSelected'
| 'labelHidden';
| 'label';

@@ -26,0 +24,0 @@ declare const BottomNavigationAction: React.ComponentType<BottomNavigationActionProps>;

38

BottomNavigation/BottomNavigationAction.js

@@ -75,11 +75,13 @@ 'use strict';

color: theme.palette.text.secondary,
flex: '1'
flex: '1',
'&$iconOnly': {
paddingTop: theme.spacing.unit * 2
},
'&$selected': {
paddingTop: 6,
color: theme.palette.primary.main
}
},
selected: {
paddingTop: 6,
color: theme.palette.primary.main
},
selectedIconOnly: {
paddingTop: theme.spacing.unit * 2
},
selected: {},
iconOnly: {},
wrapper: {

@@ -97,10 +99,10 @@ display: 'inline-flex',

transition: 'font-size 0.2s, opacity 0.2s',
transitionDelay: '0.1s'
},
labelSelected: {
fontSize: theme.typography.pxToRem(14)
},
labelHidden: {
opacity: 0,
transitionDelay: '0s'
transitionDelay: '0.1s',
'&$iconOnly': {
opacity: 0,
transitionDelay: '0s'
},
'&$selected': {
fontSize: theme.typography.pxToRem(14)
}
}

@@ -159,5 +161,5 @@ };

var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.selected, selected), (0, _defineProperty3.default)(_classNames, classes.selectedIconOnly, !showLabelProp && !selected), _classNames), classNameProp);
var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.selected, selected), (0, _defineProperty3.default)(_classNames, classes.iconOnly, !showLabelProp && !selected), _classNames), classNameProp);
var labelClassName = (0, _classnames2.default)(classes.label, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.labelSelected, selected), (0, _defineProperty3.default)(_classNames2, classes.labelHidden, !showLabelProp && !selected), _classNames2));
var labelClassName = (0, _classnames2.default)(classes.label, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.selected, selected), (0, _defineProperty3.default)(_classNames2, classes.iconOnly, !showLabelProp && !selected), _classNames2));

@@ -164,0 +166,0 @@ return _react2.default.createElement(

16

Button/Button.js

@@ -61,3 +61,3 @@ 'use strict';

textDecoration: 'none',
backgroundColor: (0, _colorManipulator.fade)(theme.palette.text.primary, 0.12),
backgroundColor: (0, _colorManipulator.fade)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -70,2 +70,5 @@ '@media (hover: none)': {

}
},
'&$disabled': {
color: theme.palette.action.disabled
}

@@ -82,3 +85,3 @@ }),

'&:hover': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.12),
backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -93,3 +96,3 @@ '@media (hover: none)': {

'&:hover': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.12),
backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -115,2 +118,3 @@ '@media (hover: none)': {

'&$disabled': {
color: theme.palette.action.disabled,
boxShadow: theme.shadows[0],

@@ -130,3 +134,2 @@ backgroundColor: theme.palette.action.disabledBackground

},
keyboardFocused: {},
raisedPrimary: {

@@ -154,5 +157,4 @@ color: theme.palette.primary.contrastText,

},
disabled: {
color: theme.palette.action.disabled
},
keyboardFocused: {},
disabled: {},
fab: {

@@ -159,0 +161,0 @@ borderRadius: '50%',

27

ButtonBase/ButtonBase.js

@@ -60,10 +60,8 @@ 'use strict';

var _ownerWindow = require('dom-helpers/ownerWindow');
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _ownerWindow = require('../utils/ownerWindow');
var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
var _withStyles = require('../styles/withStyles');

@@ -109,8 +107,9 @@

borderStyle: 'none' // Remove Firefox dotted outline.
},
'&$disabled': {
pointerEvents: 'none', // Disable link interactions
cursor: 'default'
}
},
disabled: {
pointerEvents: 'none', // Disable link interactions
cursor: 'default'
},
disabled: {},
keyboardFocused: {}

@@ -190,3 +189,2 @@ };

clearTimeout(_this.keyboardFocusTimeout);
(0, _keyboardFocus.focusKeyPressed)(false);
if (_this.state.keyboardFocused) {

@@ -199,6 +197,7 @@ _this.setState({ keyboardFocused: false });

}
}), _this.handleTouchStart = (0, _createRippleHandler2.default)(_this, 'TouchStart', 'start'), _this.handleTouchEnd = (0, _createRippleHandler2.default)(_this, 'TouchEnd', 'stop'), _this.handleTouchMove = (0, _createRippleHandler2.default)(_this, 'TouchEnd', 'stop'), _this.handleBlur = (0, _createRippleHandler2.default)(_this, 'Blur', 'stop', function () {
}), _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);
(0, _keyboardFocus.focusKeyPressed)(false);
_this.setState({ keyboardFocused: false });
if (_this.state.keyboardFocused) {
_this.setState({ keyboardFocused: false });
}
}), _this.handleFocus = function (event) {

@@ -462,2 +461,2 @@ if (_this.props.disabled) {

exports.default = (0, _withStyles2.default)(styles, { name: 'MuiButtonBase' })((0, _reactLifecyclesCompat2.default)(ButtonBase));
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiButtonBase' })((0, _reactLifecyclesCompat.polyfill)(ButtonBase));

4

Card/Card.d.ts
import * as React from 'react';
import { StandardProps } from '..';
import { PaperProps, PaperClassKey } from '../Paper';
import { PaperProps } from '../Paper';

@@ -9,3 +9,3 @@ export interface CardProps extends StandardProps<PaperProps, CardClassKey> {

export type CardClassKey = PaperClassKey;
export type CardClassKey = 'root';

@@ -12,0 +12,0 @@ declare const Card: React.ComponentType<CardProps>;

35

Card/Card.js

@@ -6,2 +6,3 @@ 'use strict';

});
exports.styles = undefined;

@@ -24,2 +25,6 @@ var _extends2 = require('babel-runtime/helpers/extends');

var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _Paper = require('../Paper');

@@ -29,14 +34,34 @@

var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var styles = exports.styles = {
root: {
overflow: 'hidden'
}
}; // @inheritedComponent Paper
function Card(props) {
var raised = props.raised,
other = (0, _objectWithoutProperties3.default)(props, ['raised']);
var classes = props.classes,
className = props.className,
raised = props.raised,
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'raised']);
return _react2.default.createElement(_Paper2.default, (0, _extends3.default)({ elevation: raised ? 8 : 2 }, other));
} // @inheritedComponent Paper
return _react2.default.createElement(_Paper2.default, (0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className), elevation: raised ? 8 : 2 }, other));
}
Card.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* If `true`, the card will use raised styling.

@@ -51,2 +76,2 @@ */

exports.default = Card;
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiCard' })(Card);

2

Checkbox/Checkbox.d.ts

@@ -12,3 +12,3 @@ import * as React from 'react';

export type CheckboxClassKey = SwitchBaseClassKey | 'checkedPrimary' | 'checkedSecondary';
export type CheckboxClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondary';

@@ -15,0 +15,0 @@ declare const Checkbox: React.ComponentType<CheckboxProps>;

33

Checkbox/Checkbox.js

@@ -12,6 +12,2 @@ 'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

@@ -59,14 +55,22 @@

return {
default: {
root: {
color: theme.palette.text.secondary
},
checked: {},
checkedPrimary: {
color: theme.palette.primary.main
disabled: {},
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
},
checkedSecondary: {
color: theme.palette.secondary.main
},
disabled: {
color: theme.palette.action.disabled
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
}

@@ -85,3 +89,2 @@ };

var checkedClass = (0, _classnames2.default)(classes.checked, (0, _defineProperty3.default)({}, classes['checked' + (0, _helpers.capitalize)(color)], color !== 'default'));

@@ -91,4 +94,4 @@ return _react2.default.createElement(_SwitchBase2.default, (0, _extends3.default)({

classes: {
default: classes.default,
checked: checkedClass,
root: (0, _classnames2.default)(classes.root, classes['color' + (0, _helpers.capitalize)(color)]),
checked: classes.checked,
disabled: classes.disabled

@@ -95,0 +98,0 @@ },

2

Chip/Chip.js

@@ -89,3 +89,3 @@ 'use strict';

whiteSpace: 'nowrap',
transition: theme.transitions.create(),
transition: theme.transitions.create(['background-color', 'box-shadow']),
// label will inherit this from root, then `clickable` class overrides this for both

@@ -92,0 +92,0 @@ cursor: 'default',

2

CssBaseline/CssBaseline.d.ts

@@ -9,2 +9,4 @@ import * as React from 'react';

export type CssBaselineClassKey = '@global';
export default CssBaseline;

29

Dialog/Dialog.js

@@ -8,2 +8,6 @@ 'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');

@@ -13,6 +17,2 @@

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

@@ -105,9 +105,10 @@

var children = props.children,
var BackdropProps = props.BackdropProps,
children = props.children,
classes = props.classes,
className = props.className,
disableBackdropClick = props.disableBackdropClick,
disableEscapeKeyDown = props.disableEscapeKeyDown,
fullScreen = props.fullScreen,
fullWidth = props.fullWidth,
disableBackdropClick = props.disableBackdropClick,
disableEscapeKeyDown = props.disableEscapeKeyDown,
maxWidth = props.maxWidth,

@@ -127,3 +128,3 @@ onBackdropClick = props.onBackdropClick,

transitionDuration = props.transitionDuration,
other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'fullScreen', 'fullWidth', 'disableBackdropClick', 'disableEscapeKeyDown', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'transition', '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']);

@@ -135,5 +136,5 @@

className: (0, _classnames2.default)(classes.root, className),
BackdropProps: {
BackdropProps: (0, _extends3.default)({
transitionDuration: transitionDuration
},
}, BackdropProps),
disableBackdropClick: disableBackdropClick,

@@ -174,2 +175,6 @@ disableEscapeKeyDown: disableEscapeKeyDown,

/**
* @ignore
*/
BackdropProps: _propTypes2.default.object,
/**
* Dialog children, usually the included sub-components.

@@ -268,6 +273,6 @@ */

Dialog.defaultProps = {
disableBackdropClick: false,
disableEscapeKeyDown: false,
fullScreen: false,
fullWidth: false,
disableBackdropClick: false,
disableEscapeKeyDown: false,
maxWidth: 'sm',

@@ -274,0 +279,0 @@ transition: _Fade2.default,

6

es/BottomNavigation/BottomNavigationAction.d.ts

@@ -19,7 +19,5 @@ import * as React from 'react';

| 'selected'
| 'selectedIconOnly'
| 'iconOnly'
| 'wrapper'
| 'label'
| 'labelSelected'
| 'labelHidden';
| 'label';

@@ -26,0 +24,0 @@ declare const BottomNavigationAction: React.ComponentType<BottomNavigationActionProps>;

40

es/BottomNavigation/BottomNavigationAction.js

@@ -23,11 +23,13 @@ import _extends from 'babel-runtime/helpers/extends';

color: theme.palette.text.secondary,
flex: '1'
flex: '1',
'&$iconOnly': {
paddingTop: theme.spacing.unit * 2
},
'&$selected': {
paddingTop: 6,
color: theme.palette.primary.main
}
},
selected: {
paddingTop: 6,
color: theme.palette.primary.main
},
selectedIconOnly: {
paddingTop: theme.spacing.unit * 2
},
selected: {},
iconOnly: {},
wrapper: {

@@ -45,10 +47,10 @@ display: 'inline-flex',

transition: 'font-size 0.2s, opacity 0.2s',
transitionDelay: '0.1s'
},
labelSelected: {
fontSize: theme.typography.pxToRem(14)
},
labelHidden: {
opacity: 0,
transitionDelay: '0s'
transitionDelay: '0.1s',
'&$iconOnly': {
opacity: 0,
transitionDelay: '0s'
},
'&$selected': {
fontSize: theme.typography.pxToRem(14)
}
}

@@ -91,8 +93,8 @@ });

[classes.selected]: selected,
[classes.selectedIconOnly]: !showLabelProp && !selected
[classes.iconOnly]: !showLabelProp && !selected
}, classNameProp);
const labelClassName = classNames(classes.label, {
[classes.labelSelected]: selected,
[classes.labelHidden]: !showLabelProp && !selected
[classes.selected]: selected,
[classes.iconOnly]: !showLabelProp && !selected
});

@@ -99,0 +101,0 @@

16

es/Button/Button.js

@@ -27,3 +27,3 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';

textDecoration: 'none',
backgroundColor: fade(theme.palette.text.primary, 0.12),
backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -36,2 +36,5 @@ '@media (hover: none)': {

}
},
'&$disabled': {
color: theme.palette.action.disabled
}

@@ -48,3 +51,3 @@ }),

'&:hover': {
backgroundColor: fade(theme.palette.primary.main, 0.12),
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -59,3 +62,3 @@ '@media (hover: none)': {

'&:hover': {
backgroundColor: fade(theme.palette.secondary.main, 0.12),
backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -81,2 +84,3 @@ '@media (hover: none)': {

'&$disabled': {
color: theme.palette.action.disabled,
boxShadow: theme.shadows[0],

@@ -96,3 +100,2 @@ backgroundColor: theme.palette.action.disabledBackground

},
keyboardFocused: {},
raisedPrimary: {

@@ -120,5 +123,4 @@ color: theme.palette.primary.contrastText,

},
disabled: {
color: theme.palette.action.disabled
},
keyboardFocused: {},
disabled: {},
fab: {

@@ -125,0 +127,0 @@ borderRadius: '50%',

23

es/ButtonBase/ButtonBase.js

@@ -8,6 +8,6 @@ import _extends from 'babel-runtime/helpers/extends';

import keycode from 'keycode';
import ownerWindow from 'dom-helpers/ownerWindow';
import polyfill from 'react-lifecycles-compat';
import { polyfill } from 'react-lifecycles-compat';
import ownerWindow from '../utils/ownerWindow';
import withStyles from '../styles/withStyles';
import { listenForFocusKeys, detectKeyboardFocus, focusKeyPressed } from '../utils/keyboardFocus';
import { listenForFocusKeys, detectKeyboardFocus } from '../utils/keyboardFocus';
import TouchRipple from './TouchRipple';

@@ -40,8 +40,9 @@ import createRippleHandler from './createRippleHandler';

borderStyle: 'none' // Remove Firefox dotted outline.
},
'&$disabled': {
pointerEvents: 'none', // Disable link interactions
cursor: 'default'
}
},
disabled: {
pointerEvents: 'none', // Disable link interactions
cursor: 'default'
},
disabled: {},
keyboardFocused: {}

@@ -103,3 +104,2 @@ };

clearTimeout(this.keyboardFocusTimeout);
focusKeyPressed(false);
if (this.state.keyboardFocused) {

@@ -112,6 +112,7 @@ this.setState({ keyboardFocused: false });

}
}), this.handleTouchStart = createRippleHandler(this, 'TouchStart', 'start'), this.handleTouchEnd = createRippleHandler(this, 'TouchEnd', 'stop'), this.handleTouchMove = createRippleHandler(this, 'TouchEnd', 'stop'), this.handleBlur = createRippleHandler(this, 'Blur', 'stop', () => {
}), 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);
focusKeyPressed(false);
this.setState({ keyboardFocused: false });
if (this.state.keyboardFocused) {
this.setState({ keyboardFocused: false });
}
}), this.handleFocus = event => {

@@ -118,0 +119,0 @@ if (this.props.disabled) {

4

es/Card/Card.d.ts
import * as React from 'react';
import { StandardProps } from '..';
import { PaperProps, PaperClassKey } from '../Paper';
import { PaperProps } from '../Paper';

@@ -9,3 +9,3 @@ export interface CardProps extends StandardProps<PaperProps, CardClassKey> {

export type CardClassKey = PaperClassKey;
export type CardClassKey = 'root';

@@ -12,0 +12,0 @@ declare const Card: React.ComponentType<CardProps>;

24

es/Card/Card.js

@@ -7,9 +7,17 @@ import _extends from 'babel-runtime/helpers/extends';

import PropTypes from 'prop-types';
import classNames from 'classnames';
import Paper from '../Paper';
import withStyles from '../styles/withStyles';
export const styles = {
root: {
overflow: 'hidden'
}
};
function Card(props) {
const { raised } = props,
other = _objectWithoutProperties(props, ['raised']);
const { classes, className, raised } = props,
other = _objectWithoutProperties(props, ['classes', 'className', 'raised']);
return React.createElement(Paper, _extends({ elevation: raised ? 8 : 2 }, other));
return React.createElement(Paper, _extends({ className: classNames(classes.root, className), elevation: raised ? 8 : 2 }, other));
}

@@ -19,2 +27,10 @@

/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the card will use raised styling.

@@ -29,2 +45,2 @@ */

export default Card;
export default withStyles(styles, { name: 'MuiCard' })(Card);

2

es/Checkbox/Checkbox.d.ts

@@ -12,3 +12,3 @@ import * as React from 'react';

export type CheckboxClassKey = SwitchBaseClassKey | 'checkedPrimary' | 'checkedSecondary';
export type CheckboxClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondary';

@@ -15,0 +15,0 @@ declare const Checkbox: React.ComponentType<CheckboxProps>;

31

es/Checkbox/Checkbox.js

@@ -14,14 +14,22 @@ import _extends from 'babel-runtime/helpers/extends';

export const styles = theme => ({
default: {
root: {
color: theme.palette.text.secondary
},
checked: {},
checkedPrimary: {
color: theme.palette.primary.main
disabled: {},
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
},
checkedSecondary: {
color: theme.palette.secondary.main
},
disabled: {
color: theme.palette.action.disabled
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
}

@@ -33,5 +41,2 @@ });

other = _objectWithoutProperties(props, ['checkedIcon', 'classes', 'color', 'icon', 'indeterminate', 'indeterminateIcon']);
const checkedClass = classNames(classes.checked, {
[classes[`checked${capitalize(color)}`]]: color !== 'default'
});

@@ -41,4 +46,4 @@ return React.createElement(SwitchBase, _extends({

classes: {
default: classes.default,
checked: checkedClass,
root: classNames(classes.root, classes[`color${capitalize(color)}`]),
checked: classes.checked,
disabled: classes.disabled

@@ -45,0 +50,0 @@ },

2

es/Chip/Chip.js

@@ -29,3 +29,3 @@ import _extends from 'babel-runtime/helpers/extends';

whiteSpace: 'nowrap',
transition: theme.transitions.create(),
transition: theme.transitions.create(['background-color', 'box-shadow']),
// label will inherit this from root, then `clickable` class overrides this for both

@@ -32,0 +32,0 @@ cursor: 'default',

2

es/CssBaseline/CssBaseline.d.ts

@@ -9,2 +9,4 @@ import * as React from 'react';

export type CssBaselineClassKey = '@global';
export default CssBaseline;

19

es/Dialog/Dialog.js

@@ -59,9 +59,10 @@ import _extends from 'babel-runtime/helpers/extends';

const {
BackdropProps,
children,
classes,
className,
disableBackdropClick,
disableEscapeKeyDown,
fullScreen,
fullWidth,
disableBackdropClick,
disableEscapeKeyDown,
maxWidth,

@@ -82,3 +83,3 @@ onBackdropClick,

} = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'fullScreen', 'fullWidth', 'disableBackdropClick', 'disableEscapeKeyDown', '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', 'transition', 'transitionDuration']);

@@ -89,5 +90,5 @@ return React.createElement(

className: classNames(classes.root, className),
BackdropProps: {
BackdropProps: _extends({
transitionDuration
},
}, BackdropProps),
disableBackdropClick: disableBackdropClick,

@@ -132,2 +133,6 @@ disableEscapeKeyDown: disableEscapeKeyDown,

/**
* @ignore
*/
BackdropProps: PropTypes.object,
/**
* Dialog children, usually the included sub-components.

@@ -226,6 +231,6 @@ */

Dialog.defaultProps = {
disableBackdropClick: false,
disableEscapeKeyDown: false,
fullScreen: false,
fullWidth: false,
disableBackdropClick: false,
disableEscapeKeyDown: false,
maxWidth: 'sm',

@@ -232,0 +237,0 @@ transition: Fade,

4

es/ExpansionPanel/ExpansionPanelSummary.d.ts

@@ -19,5 +19,3 @@ import * as React from 'react';

| 'content'
| 'contentExpanded'
| 'expandIcon'
| 'expandIconExpanded';
| 'expandIcon';

@@ -24,0 +22,0 @@ declare const ExpansionPanelSummary: React.ComponentType<ExpansionPanelSummaryProps>;

37

es/ExpansionPanel/ExpansionPanelSummary.js

@@ -24,13 +24,16 @@ import _extends from 'babel-runtime/helpers/extends';

cursor: 'pointer'
},
'&$expanded': {
minHeight: 64
},
'&$focused': {
backgroundColor: theme.palette.grey[300]
},
'&$disabled': {
opacity: 0.38
}
},
expanded: {
minHeight: 64
},
focused: {
backgroundColor: theme.palette.grey[300]
},
disabled: {
opacity: 0.38
},
expanded: {},
focused: {},
disabled: {},
content: {

@@ -43,7 +46,7 @@ display: 'flex',

paddingRight: theme.spacing.unit * 4
},
'&$expanded': {
margin: '20px 0'
}
},
contentExpanded: {
margin: '20px 0'
},
expandIcon: {

@@ -60,6 +63,6 @@ position: 'absolute',

backgroundColor: 'transparent'
},
'&$expanded': {
transform: 'translateY(-50%) rotate(180deg)'
}
},
expandIconExpanded: {
transform: 'translateY(-50%) rotate(180deg)'
}

@@ -128,3 +131,3 @@ };

'div',
{ className: classNames(classes.content, { [classes.contentExpanded]: expanded }) },
{ className: classNames(classes.content, { [classes.expanded]: expanded }) },
children

@@ -137,3 +140,3 @@ ),

className: classNames(classes.expandIcon, {
[classes.expandIconExpanded]: expanded
[classes.expanded]: expanded
}),

@@ -140,0 +143,0 @@ component: 'div',

2

es/Form/FormControlLabel.d.ts

@@ -20,3 +20,3 @@ import * as React from 'react';

export type FormControlLabelClassKey = 'root' | 'disabled' | 'label' | 'labelDisabled';
export type FormControlLabelClassKey = 'root' | 'disabled' | 'label';

@@ -23,0 +23,0 @@ declare const FormControlLabel: React.ComponentType<FormControlLabelProps>;

18

es/Form/FormControlLabel.js

@@ -21,10 +21,12 @@ import _extends from 'babel-runtime/helpers/extends';

marginLeft: -14,
marginRight: theme.spacing.unit * 2 // used for row presentation of radio/checkbox
marginRight: theme.spacing.unit * 2, // used for row presentation of radio/checkbox
'&$disabled': {
cursor: 'default'
}
},
disabled: {
cursor: 'default'
},
label: {},
labelDisabled: {
color: theme.palette.text.disabled
disabled: {},
label: {
'&$disabled': {
color: theme.palette.text.disabled
}
}

@@ -86,3 +88,3 @@ });

component: 'span',
className: classNames(classes.label, { [classes.labelDisabled]: disabled })
className: classNames(classes.label, { [classes.disabled]: disabled })
},

@@ -89,0 +91,0 @@ label

16

es/Form/FormHelperText.js

@@ -17,10 +17,12 @@ import _extends from 'babel-runtime/helpers/extends';

minHeight: '1em',
margin: 0
margin: 0,
'&$error': {
color: theme.palette.error.main
},
'&$disabled': {
color: theme.palette.text.disabled
}
},
error: {
color: theme.palette.error.main
},
disabled: {
color: theme.palette.text.disabled
},
error: {},
disabled: {},
marginDense: {

@@ -27,0 +29,0 @@ marginTop: theme.spacing.unit / 2

8

es/Form/FormLabel.d.ts

@@ -14,9 +14,3 @@ import * as React from 'react';

export type FormLabelClassKey =
| 'root'
| 'focused'
| 'disabled'
| 'error'
| 'asterisk'
| 'asteriskError';
export type FormLabelClassKey = 'root' | 'focused' | 'disabled' | 'error' | 'asterisk';

@@ -23,0 +17,0 @@ declare const FormLabel: React.ComponentType<FormLabelProps>;

32

es/Form/FormLabel.js

@@ -14,16 +14,20 @@ import _extends from 'babel-runtime/helpers/extends';

lineHeight: 1,
padding: 0
padding: 0,
'&$focused': {
color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light']
},
'&$disabled': {
color: theme.palette.text.disabled
},
'&$error': {
color: theme.palette.error.main
}
},
focused: {
color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light']
},
disabled: {
color: theme.palette.text.disabled
},
error: {
color: theme.palette.error.main
},
asterisk: {},
asteriskError: {
color: theme.palette.error.main
focused: {},
disabled: {},
error: {},
asterisk: {
'&$error': {
color: theme.palette.error.main
}
}

@@ -81,3 +85,3 @@ });

className: classNames(classes.asterisk, {
[classes.asteriskError]: error
[classes.error]: error
})

@@ -84,0 +88,0 @@ },

25

es/Grid/Grid.js

@@ -74,3 +74,3 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';

width: `calc(100% + ${spacing}px)`,
'& > $typeItem': {
'& > $item': {
padding: spacing / 2

@@ -91,3 +91,3 @@ }

export const styles = theme => _extends({
typeContainer: {
container: {
boxSizing: 'border-box',

@@ -98,3 +98,3 @@ display: 'flex',

},
typeItem: {
item: {
boxSizing: 'border-box',

@@ -191,4 +191,4 @@ flex: '0 0 auto',

const className = classNames({
[classes.typeContainer]: container,
[classes.typeItem]: item,
[classes.container]: container,
[classes.item]: item,
[classes.zeroMinWidth]: zeroMinWidth,

@@ -281,3 +281,3 @@ [classes[`spacing-xs-${String(spacing)}`]]: container && spacing !== 0,

*/
lg: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
lg: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -287,3 +287,3 @@ * Defines the number of grids the component is going to use.

*/
md: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
md: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -293,3 +293,3 @@ * Defines the number of grids the component is going to use.

*/
sm: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
sm: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -309,3 +309,3 @@ * Defines the space between the type `item` component.

*/
xl: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
xl: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -315,3 +315,3 @@ * Defines the number of grids the component is going to use.

*/
xs: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
xs: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -332,4 +332,9 @@ * If `true`, it sets `min-width: 0` on the item.

justify: 'flex-start',
lg: false,
md: false,
sm: false,
spacing: 0,
wrap: 'wrap',
xl: false,
xs: false,
zeroMinWidth: false

@@ -336,0 +341,0 @@ };

13

es/IconButton/IconButton.js

@@ -27,3 +27,3 @@ import _extends from 'babel-runtime/helpers/extends';

'&:hover': {
backgroundColor: fade(theme.palette.action.active, 0.04),
backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -36,2 +36,5 @@ '@media (hover: none)': {

}
},
'&$disabled': {
color: theme.palette.action.disabled
}

@@ -45,3 +48,3 @@ },

'&:hover': {
backgroundColor: fade(theme.palette.primary.main, 0.04),
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -56,3 +59,3 @@ '@media (hover: none)': {

'&:hover': {
backgroundColor: fade(theme.palette.secondary.main, 0.04),
backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -64,5 +67,3 @@ '@media (hover: none)': {

},
disabled: {
color: theme.palette.action.disabled
},
disabled: {},
label: {

@@ -69,0 +70,0 @@ width: '100%',

3

es/index.d.ts

@@ -16,3 +16,3 @@ import * as React from 'react';

className?: string;
style?: Partial<React.CSSProperties>;
style?: React.CSSProperties;
};

@@ -111,2 +111,3 @@

export {
createGenerateClassName,
createMuiTheme,

@@ -113,0 +114,0 @@ jssPreset,

2

es/index.js

@@ -35,3 +35,3 @@ export { default as AppBar } from './AppBar';

export { default as Stepper, Step, StepButton, StepIcon, StepContent, StepLabel } from './Stepper';
export { MuiThemeProvider, withStyles, withTheme, createMuiTheme, jssPreset } from './styles';
export { createGenerateClassName, createMuiTheme, jssPreset, MuiThemeProvider, withStyles, withTheme } from './styles';

@@ -38,0 +38,0 @@ // eslint-disable-next-line import/first

28

es/Input/Input.js

@@ -65,3 +65,6 @@ import _extends from 'babel-runtime/helpers/extends';

fontSize: theme.typography.pxToRem(16),
lineHeight: '1.1875em' // Reset (19px), match the native input line-height
lineHeight: '1.1875em', // Reset (19px), match the native input line-height
'&$disabled': {
color: theme.palette.text.disabled
}
},

@@ -74,5 +77,3 @@ formControl: {

focused: {},
disabled: {
color: theme.palette.text.disabled
},
disabled: {},
underline: {

@@ -98,2 +99,6 @@ '&:after': {

},
'&$error:after': {
backgroundColor: theme.palette.error.main,
transform: 'scaleX(1)' // error is always underlined in red
},
'&:before': {

@@ -125,8 +130,3 @@ backgroundColor: bottomLineColor,

},
error: {
'&:after': {
backgroundColor: theme.palette.error.main,
transform: 'scaleX(1)' // error is always underlined in red
}
},
error: {},
multiline: {

@@ -178,2 +178,5 @@ padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`

'&:focus::-ms-input-placeholder': placeholderVisible // Edge
},
'&$disabled': {
opacity: 1 // Reset iOS opacity
}

@@ -184,5 +187,2 @@ },

},
inputDisabled: {
opacity: 1 // Reset iOS opacity
},
inputMultiline: {

@@ -410,3 +410,3 @@ resize: 'none',

const inputClassName = classNames(classes.input, {
[classes.inputDisabled]: disabled,
[classes.disabled]: disabled,
[classes.inputType]: type !== 'text',

@@ -413,0 +413,0 @@ [classes.inputTypeSearch]: type === 'search',

2

es/internal/SwitchBase.d.ts

@@ -23,3 +23,3 @@ import * as React from 'react';

export type SwitchBaseClassKey = 'root' | 'default' | 'checked' | 'disabled' | 'input';
export type SwitchBaseClassKey = 'root' | 'checked' | 'disabled' | 'input';

@@ -26,0 +26,0 @@ export type SwitchBase = React.Component<SwitchBaseProps>;

23

es/internal/SwitchBase.js

@@ -21,2 +21,4 @@ import _extends from 'babel-runtime/helpers/extends';

},
checked: {},
disabled: {},
input: {

@@ -32,6 +34,3 @@ cursor: 'inherit',

padding: 0
},
default: {},
checked: {},
disabled: {}
}
};

@@ -77,3 +76,3 @@

disabled: disabledProp,
icon: iconProp,
icon,
id,

@@ -100,9 +99,2 @@ inputProps,

const checked = this.isControlled ? checkedProp : this.state.checked;
const className = classNames(classes.root, classes.default, classNameProp, {
[classes.checked]: checked,
[classes.disabled]: disabled
});
const icon = checked ? checkedIcon : iconProp;
const hasLabelFor = type === 'checkbox' || type === 'radio';

@@ -114,3 +106,6 @@

component: 'span',
className: className,
className: classNames(classes.root, {
[classes.checked]: checked,
[classes.disabled]: disabled
}, classNameProp),
disabled: disabled,

@@ -120,3 +115,3 @@ tabIndex: null,

}, other),
icon,
checked ? checkedIcon : icon,
React.createElement('input', _extends({

@@ -123,0 +118,0 @@ id: hasLabelFor && id,

2

es/Modal/isOverflowing.js
import isWindow from 'dom-helpers/query/isWindow';
import ownerDocument from 'dom-helpers/ownerDocument';
import ownerWindow from 'dom-helpers/ownerWindow';
import ownerWindow from '../utils/ownerWindow';

@@ -5,0 +5,0 @@ export function isBody(node) {

2

es/Modal/Modal.js

@@ -9,3 +9,3 @@ import _extends from 'babel-runtime/helpers/extends';

import classNames from 'classnames';
import polyfill from 'react-lifecycles-compat';
import { polyfill } from 'react-lifecycles-compat';
import warning from 'warning';

@@ -12,0 +12,0 @@ import keycode from 'keycode';

2

es/Popover/Popover.js

@@ -11,5 +11,5 @@ import _extends from 'babel-runtime/helpers/extends';

import ownerDocument from 'dom-helpers/ownerDocument';
import ownerWindow from 'dom-helpers/ownerWindow';
import debounce from 'lodash/debounce';
import EventListener from 'react-event-listener';
import ownerWindow from '../utils/ownerWindow';
import withStyles from '../styles/withStyles';

@@ -16,0 +16,0 @@ import Modal from '../Modal';

2

es/Radio/Radio.d.ts

@@ -12,3 +12,3 @@ import * as React from 'react';

export type RadioClassKey = SwitchBaseClassKey | 'checkedPrimary' | 'checkedSecondary';
export type RadioClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondery';

@@ -15,0 +15,0 @@ declare const Radio: React.ComponentType<RadioProps>;

31

es/Radio/Radio.js

@@ -13,14 +13,22 @@ import _extends from 'babel-runtime/helpers/extends';

export const styles = theme => ({
default: {
root: {
color: theme.palette.text.secondary
},
checked: {},
checkedPrimary: {
color: theme.palette.primary.main
disabled: {},
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
},
checkedSecondary: {
color: theme.palette.secondary.main
},
disabled: {
color: theme.palette.action.disabled
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
}

@@ -36,5 +44,2 @@ });

other = _objectWithoutProperties(props, ['classes', 'color']);
const checkedClass = classNames(classes.checked, {
[classes[`checked${capitalize(color)}`]]: color !== 'default'
});

@@ -46,4 +51,4 @@ return React.createElement(SwitchBase, _extends({

classes: {
default: classes.default,
checked: checkedClass,
root: classNames(classes.root, classes[`color${capitalize(color)}`]),
checked: classes.checked,
disabled: classes.disabled

@@ -50,0 +55,0 @@ }

5

es/Select/Select.d.ts

@@ -5,4 +5,6 @@ import * as React from 'react';

import { MenuProps } from '../Menu';
import { SelectInputProps } from './SelectInput';
export interface SelectProps extends StandardProps<InputProps, SelectClassKey, 'value'> {
export interface SelectProps
extends StandardProps<InputProps, SelectClassKey, 'value' | 'onChange'> {
autoWidth?: boolean;

@@ -16,2 +18,3 @@ displayEmpty?: boolean;

onOpen?: (event: React.ChangeEvent<{}>) => void;
onChange: SelectInputProps['onChange'];
open?: boolean;

@@ -18,0 +21,0 @@ renderValue?: (value: SelectProps['value']) => React.ReactNode;

7

es/Select/Select.js

@@ -39,2 +39,5 @@ import _extends from 'babel-runtime/helpers/extends';

display: 'none'
},
'&$disabled': {
cursor: 'default'
}

@@ -49,5 +52,3 @@ },

},
disabled: {
cursor: 'default'
},
disabled: {},
icon: {

@@ -54,0 +55,0 @@ // We use a position absolute over a flexbox in order to forward the pointer events

2

es/Select/SelectInput.d.ts

@@ -17,3 +17,3 @@ import * as React from 'react';

onBlur?: React.FocusEventHandler<any>;
onChange?: (event: React.ChangeEvent<{}>, child: React.ReactNode) => void;
onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child: React.ReactNode) => void;
onClose?: (event: React.ChangeEvent<{}>) => void;

@@ -20,0 +20,0 @@ onFocus?: React.FocusEventHandler<any>;

2

es/Snackbar/Snackbar.js

@@ -7,3 +7,3 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';

import EventListener from 'react-event-listener';
import polyfill from 'react-lifecycles-compat';
import { polyfill } from 'react-lifecycles-compat';
import withStyles from '../styles/withStyles';

@@ -10,0 +10,0 @@ import { duration } from '../styles/transitions';

9

es/Stepper/StepLabel.d.ts

@@ -24,12 +24,9 @@ import * as React from 'react';

| 'vertical'
| 'active'
| 'completed'
| 'alternativeLabel'
| 'error'
| 'disabled'
| 'error'
| 'label'
| 'labelActive'
| 'labelCompleted'
| 'labelAlternativeLabel'
| 'iconContainer'
| 'labelError'
| 'iconContainerAlternativeLabel'
| 'labelContainer';

@@ -36,0 +33,0 @@

68

es/Stepper/StepLabel.js

@@ -13,37 +13,41 @@ import _extends from 'babel-runtime/helpers/extends';

display: 'flex',
alignItems: 'center'
alignItems: 'center',
'&$alternativeLabel': {
flexDirection: 'column'
},
'&$disabled': {
cursor: 'default'
}
},
horizontal: {},
vertical: {},
alternativeLabel: {
flexDirection: 'column'
},
disabled: {
cursor: 'default'
},
active: {},
completed: {},
alternativeLabel: {},
error: {},
disabled: {},
label: {
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
'&$active': {
color: theme.palette.text.primary,
fontWeight: 500
},
'&$completed': {
color: theme.palette.text.primary,
fontWeight: 500
},
'&$alternativeLabel': {
textAlign: 'center',
marginTop: theme.spacing.unit * 2
},
'&$error': {
color: theme.palette.error.main
}
},
labelActive: {
color: theme.palette.text.primary,
fontWeight: 500
},
labelCompleted: {
color: theme.palette.text.primary,
fontWeight: 500
},
labelAlternativeLabel: {
textAlign: 'center',
marginTop: theme.spacing.unit * 2
},
labelError: {
color: theme.palette.error.main
},
iconContainer: {
paddingRight: theme.spacing.unit
paddingRight: theme.spacing.unit,
'&$alternativeLabel': {
paddingRight: 0
}
},
iconContainerAlternativeLabel: {
paddingRight: 0
},
labelContainer: {

@@ -84,3 +88,3 @@ width: '100%'

className: classNames(classes.iconContainer, {
[classes.iconContainerAlternativeLabel]: alternativeLabel
[classes.alternativeLabel]: alternativeLabel
})

@@ -105,6 +109,6 @@ },

className: classNames(classes.label, {
[classes.labelAlternativeLabel]: alternativeLabel,
[classes.labelCompleted]: completed,
[classes.labelActive]: active,
[classes.labelError]: error
[classes.alternativeLabel]: alternativeLabel,
[classes.completed]: completed,
[classes.active]: active,
[classes.error]: error
})

@@ -111,0 +115,0 @@ },

10

es/styles/createPalette.d.ts

@@ -62,3 +62,9 @@ import { Color, PaletteType } from '..';

background: TypeBackground;
getContrastText: (color: string) => string;
getContrastText: (background: string) => string;
augmentColor: (
color: string,
mainShade: number | string,
lightShade: number | string,
darkShade: number | string,
) => void;
}

@@ -80,3 +86,3 @@

background?: Partial<TypeBackground>;
getContrastText?: (color: string) => string;
getContrastText?: (background: string) => string;
}

@@ -83,0 +89,0 @@

4

es/styles/createPalette.js

@@ -38,2 +38,3 @@ import _extends from 'babel-runtime/helpers/extends';

hover: 'rgba(0, 0, 0, 0.08)',
hoverOpacity: 0.08,
// The color of a selected action.

@@ -64,2 +65,3 @@ selected: 'rgba(0, 0, 0, 0.14)',

hover: 'rgba(255, 255, 255, 0.1)',
hoverOpacity: 0.1,
selected: 'rgba(255, 255, 255, 0.2)',

@@ -157,2 +159,4 @@ disabled: 'rgba(255, 255, 255, 0.3)',

getContrastText,
// Generate a rich color object.
augmentColor,
// Used by the functions below to shift a color's luminance by approximately

@@ -159,0 +163,0 @@ // two indexes within its tonal palette.

11

es/styles/MuiThemeProvider.js

@@ -85,4 +85,11 @@ import _extends from 'babel-runtime/helpers/extends';

render() {
process.env.NODE_ENV !== "production" ? warning(typeof window !== 'undefined' || this.props.sheetsManager, ['Material-UI: you need to provide a sheetsManager to the MuiThemeProvider ' + 'when rendering on the server.', 'If you do not, you might experience a memory leak'].join('\n')) : void 0;
// TODO move the sheetsManager property to a different component.
// warning(
// typeof window !== 'undefined' || this.props.sheetsManager,
// [
// 'Material-UI: you need to provide a sheetsManager to the MuiThemeProvider ' +
// 'when rendering on the server.',
// 'If you do not, you might experience a memory leak',
// ].join('\n'),
// );
return this.props.children;

@@ -89,0 +96,0 @@ }

6

es/styles/overrides.d.ts

@@ -18,2 +18,3 @@ import { AppBarClassKey } from '../AppBar/AppBar';

import { CollapseClassKey } from '../transitions/Collapse';
import { CssBaselineClassKey } from '../CssBaseline/CssBaseline';
import { DialogActionsClassKey } from '../Dialog/DialogActions';

@@ -77,3 +78,2 @@ import { DialogClassKey } from '../Dialog/Dialog';

import { TabClassKey } from '../Tabs/Tab';
import { TabIndicatorClassKey } from '../Tabs/TabIndicator';
import { TableClassKey } from '../Table/Table';

@@ -85,3 +85,2 @@ import { TableCellClassKey } from '../Table/TableCell';

import { TabsClassKey } from '../Tabs/Tabs';
import { TabScrollButtonClassKey } from '../Tabs/TabScrollButton';
import { TextareaClassKey } from '../Input/Textarea';

@@ -115,2 +114,3 @@ import { ToolbarClassKey } from '../Toolbar/Toolbar';

MuiCollapse: CollapseClassKey;
MuiCssBaseline: CssBaselineClassKey;
MuiDialog: DialogClassKey;

@@ -173,3 +173,2 @@ MuiDialogActions: DialogActionsClassKey;

MuiTab: TabClassKey;
MuiTabIndicator: TabIndicatorClassKey;
MuiTable: TableClassKey;

@@ -181,3 +180,2 @@ MuiTableCell: TableCellClassKey;

MuiTabs: TabsClassKey;
MuiTabScrollButton: TabScrollButtonClassKey;
MuiTextarea: TextareaClassKey;

@@ -184,0 +182,0 @@ // MuiTextField: TextFieldClassKey;

8

es/styles/withStyles.d.ts
import * as React from 'react';
import { Theme } from './createMuiTheme';
import * as CSS from 'csstype';
export interface CSSProperties extends CSS.Properties<number | string> {
// Allow pseudo selectors and media queries
[k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
}
/**

@@ -11,3 +17,3 @@ * This is basically the API of JSS. It defines a Map<string, CSS>,

*/
export type StyleRules<ClassKey extends string = string> = Record<ClassKey, React.CSSProperties>;
export type StyleRules<ClassKey extends string = string> = Record<ClassKey, CSSProperties>;

@@ -14,0 +20,0 @@ export type StyleRulesCallback<ClassKey extends string = string> = (

57

es/SwipeableDrawer/SwipeableDrawer.js

@@ -9,3 +9,3 @@ import _extends from 'babel-runtime/helpers/extends';

import ReactDOM from 'react-dom';
import polyfill from 'react-lifecycles-compat';
import { polyfill } from 'react-lifecycles-compat';
import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';

@@ -15,3 +15,6 @@ import { duration } from '../styles/transitions';

import { getTransitionProps } from '../transitions/utils';
import SwipeArea from './SwipeArea';
const Fragment = React.Fragment || 'div';
// This value is closed to what browsers are using internally to

@@ -86,3 +89,3 @@ // trigger a native scroll.

// We don't know yet.
if (this.isSwiping === undefined) {
if (this.isSwiping == null) {
const dx = Math.abs(currentX - this.startX);

@@ -99,6 +102,4 @@ const dy = Math.abs(currentY - this.startY);

if (isSwiping === true || (horizontalSwipe ? dy > UNCERTAINTY_THRESHOLD : dx > UNCERTAINTY_THRESHOLD)) {
if (isSwiping) {
this.isSwiping = this.props.open ? 'closing' : 'opening';
} else {
this.isSwiping = false;
this.isSwiping = isSwiping;
if (!isSwiping) {
this.handleBodyTouchEnd(event);

@@ -123,3 +124,3 @@ return;

if (this.isSwiping === undefined) {
if (!this.isSwiping) {
return;

@@ -137,4 +138,4 @@ }

// The swipe wasn't started.
if (this.isSwiping !== 'opening' && this.isSwiping !== 'closing') {
this.isSwiping = undefined;
if (!this.isSwiping) {
this.isSwiping = null;
return;

@@ -155,3 +156,3 @@ }

if (translateRatio > 0.5) {
if (this.isSwiping === 'opening') {
if (this.isSwiping && !this.props.open) {
// Reset the position, the swipe was aborted.

@@ -164,3 +165,3 @@ this.setPosition(this.getMaxTranslate(), {

}
} else if (this.isSwiping === 'opening') {
} else if (this.isSwiping && !this.props.open) {
this.props.onOpen();

@@ -174,4 +175,4 @@ } else {

this.isSwiping = undefined;
}, this.backdrop = null, this.paper = null, this.isSwiping = undefined, this.startX = null, this.startY = null, this.handleBackdropRef = node => {
this.isSwiping = null;
}, this.backdrop = null, this.paper = null, this.isSwiping = null, this.startX = null, this.startY = null, this.handleBackdropRef = node => {
this.backdrop = node ? ReactDOM.findDOMNode(node) : null;

@@ -225,4 +226,3 @@ }, this.handlePaperRef = node => {

const start = isHorizontal(this.props) ? this.startX : this.startY;
return Math.min(Math.max(this.isSwiping === 'closing' ? start - current : this.getMaxTranslate() + start - current, 0), this.getMaxTranslate());
return Math.min(Math.max(this.props.open ? start - current : this.getMaxTranslate() + start - current, 0), this.getMaxTranslate());
}

@@ -297,14 +297,19 @@

return React.createElement(Drawer, _extends({
open: variant === 'temporary' && maybeSwiping ? true : open,
variant: variant,
ModalProps: _extends({
BackdropProps: _extends({}, BackdropProps, {
ref: this.handleBackdropRef
return React.createElement(
Fragment,
null,
React.createElement(Drawer, _extends({
open: variant === 'temporary' && maybeSwiping ? true : open,
variant: variant,
ModalProps: _extends({
BackdropProps: _extends({}, BackdropProps, {
ref: this.handleBackdropRef
})
}, ModalPropsProp),
PaperProps: _extends({}, PaperProps, {
ref: this.handlePaperRef
})
}, ModalPropsProp),
PaperProps: _extends({}, PaperProps, {
ref: this.handlePaperRef
})
}, other));
}, other)),
!disableDiscovery && !disableSwipeToOpen && variant === 'temporary' && React.createElement(SwipeArea, { anchor: other.anchor, swipeAreaWidth: swipeAreaWidth })
);
}

@@ -311,0 +316,0 @@ }

5

es/Switch/Switch.d.ts

@@ -17,4 +17,5 @@ import * as React from 'react';

| 'iconChecked'
| 'checkedPrimary'
| 'checkedSecondary';
| 'switchBase'
| 'colorPrimary'
| 'colorSecondery';

@@ -21,0 +22,0 @@ declare const Switch: React.ComponentType<SwitchProps>;

76

es/Switch/Switch.js

@@ -19,18 +19,2 @@ import _extends from 'babel-runtime/helpers/extends';

},
bar: {
borderRadius: 14 / 2,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
marginTop: -14 / 2,
left: '50%',
marginLeft: -17,
transition: theme.transitions.create(['opacity', 'background-color'], {
duration: theme.transitions.duration.shortest
}),
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
opacity: theme.palette.type === 'light' ? 0.38 : 0.3
},
icon: {

@@ -46,4 +30,3 @@ boxShadow: theme.shadows[1],

},
// For SwitchBase
default: {
switchBase: {
zIndex: 1,

@@ -61,18 +44,20 @@ color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],

},
checkedPrimary: {
color: theme.palette.primary.main,
'& + $bar': {
backgroundColor: theme.palette.primary.main
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main,
'& + $bar': {
backgroundColor: theme.palette.primary.main
}
}
},
checkedSecondary: {
color: theme.palette.secondary.main,
'& + $bar': {
backgroundColor: theme.palette.secondary.main
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main,
'& + $bar': {
backgroundColor: theme.palette.secondary.main
}
}
},
disabled: {
color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
'& + $bar': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
opacity: theme.palette.type === 'light' ? 0.12 : 0.1

@@ -82,3 +67,25 @@ },

boxShadow: theme.shadows[1]
},
'&$switchBase': {
color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
'& + $bar': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
}
}
},
bar: {
borderRadius: 7,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
left: '50%',
marginTop: -7,
marginLeft: -17,
transition: theme.transitions.create(['opacity', 'background-color'], {
duration: theme.transitions.duration.shortest
}),
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
opacity: theme.palette.type === 'light' ? 0.38 : 0.3
}

@@ -90,7 +97,2 @@ });

other = _objectWithoutProperties(props, ['classes', 'className', 'color']);
const icon = React.createElement('span', { className: classes.icon });
const checkedIcon = React.createElement('span', { className: classNames(classes.icon, classes.iconChecked) });
const checkedClass = classNames(classes.checked, {
[classes[`checked${capitalize(color)}`]]: color !== 'default'
});

@@ -101,9 +103,9 @@ return React.createElement(

React.createElement(SwitchBase, _extends({
icon: icon,
icon: React.createElement('span', { className: classes.icon }),
classes: {
default: classes.default,
checked: checkedClass,
root: classNames(classes.switchBase, classes[`color${capitalize(color)}`]),
checked: classes.checked,
disabled: classes.disabled
},
checkedIcon: checkedIcon
checkedIcon: React.createElement('span', { className: classNames(classes.icon, classes.iconChecked) })
}, other)),

@@ -110,0 +112,0 @@ React.createElement('span', { className: classes.bar })

2

es/Table/TableRow.d.ts

@@ -12,3 +12,3 @@ import * as React from 'react';

export type TableRowClassKey = 'root' | 'head' | 'footer' | 'hover' | 'selected';
export type TableRowClassKey = 'root' | 'selected' | 'hover' | 'head' | 'footer';

@@ -15,0 +15,0 @@ declare const TableRow: React.ComponentType<TableRowProps>;

20

es/Table/TableRow.js

@@ -16,4 +16,14 @@ import _extends from 'babel-runtime/helpers/extends';

outline: 'none'
},
'&$selected': {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' // grey[100]
: 'rgba(255, 255, 255, 0.08)'
},
'&$hover:hover': {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.07)' // grey[200]
: 'rgba(255, 255, 255, 0.14)'
}
},
selected: {},
hover: {},
head: {

@@ -24,12 +34,2 @@ height: 56

height: 56
},
selected: {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' // grey[100]
: 'rgba(255, 255, 255, 0.08)'
},
hover: {
'&:hover': {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.07)' // grey[200]
: 'rgba(255, 255, 255, 0.14)'
}
}

@@ -36,0 +36,0 @@ });

8

es/Tabs/Tab.d.ts

@@ -24,9 +24,5 @@ import * as React from 'react';

| 'textColorPrimary'
| 'textColorPrimarySelected'
| 'textColorPrimaryDisabled'
| 'textColorSecondary'
| 'textColorSecondarySelected'
| 'textColorSecondaryDisabled'
| 'textColorInheritSelected'
| 'textColorInheritDisabled'
| 'selected'
| 'disabled'
| 'fullWidth'

@@ -33,0 +29,0 @@ | 'wrapper'

67

es/Tabs/Tab.js

@@ -1,2 +0,1 @@

import _Object$keys from 'babel-runtime/core-js/object/keys';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';

@@ -31,28 +30,30 @@ import _extends from 'babel-runtime/helpers/extends';

color: 'inherit',
opacity: 0.7
opacity: 0.7,
'&$selected': {
opacity: 1
},
'&$disabled': {
opacity: 0.4
}
},
textColorPrimary: {
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
'&$selected': {
color: theme.palette.primary.main
},
'&$disabled': {
color: theme.palette.text.disabled
}
},
textColorPrimarySelected: {
color: theme.palette.primary.main
},
textColorPrimaryDisabled: {
color: theme.palette.text.disabled
},
textColorSecondary: {
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
'&$selected': {
color: theme.palette.secondary.main
},
'&$disabled': {
color: theme.palette.text.disabled
}
},
textColorSecondarySelected: {
color: theme.palette.secondary.main
},
textColorSecondaryDisabled: {
color: theme.palette.text.disabled
},
textColorInheritSelected: {
opacity: 1
},
textColorInheritDisabled: {
opacity: 0.4
},
selected: {},
disabled: {},
fullWidth: {

@@ -145,7 +146,6 @@ flexGrow: 1

selected,
style: styleProp,
textColor,
value
} = _props,
other = _objectWithoutProperties(_props, ['classes', 'className', 'disabled', 'fullWidth', 'icon', 'indicator', 'label', 'onChange', 'selected', 'style', 'textColor', 'value']);
other = _objectWithoutProperties(_props, ['classes', 'className', 'disabled', 'fullWidth', 'icon', 'indicator', 'label', 'onChange', 'selected', 'textColor', 'value']);

@@ -174,4 +174,4 @@ let label;

const className = classNames(classes.root, classes[`textColor${capitalize(textColor)}`], {
[classes[`textColor${capitalize(textColor)}Disabled`]]: disabled,
[classes[`textColor${capitalize(textColor)}Selected`]]: selected,
[classes.disabled]: disabled,
[classes.selected]: selected,
[classes.labelIcon]: icon && label,

@@ -181,10 +181,2 @@ [classes.fullWidth]: fullWidth

let style = {};
if (textColor !== 'secondary' && textColor !== 'inherit') {
style.color = textColor;
}
style = _Object$keys(style).length > 0 ? _extends({}, style, styleProp) : styleProp;
return React.createElement(

@@ -195,3 +187,2 @@ ButtonBase,

className: className,
style: style,
role: 'tab',

@@ -260,8 +251,4 @@ 'aria-selected': selected,

*/
style: PropTypes.object,
textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),
/**
* @ignore
*/
textColor: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['secondary', 'primary', 'inherit'])]),
/**
* You can provide your own value. Otherwise, we fallback to the child position index.

@@ -268,0 +255,0 @@ */

23

es/Tabs/TabIndicator.js
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';

@@ -29,13 +30,8 @@ import PropTypes from 'prop-types';

function TabIndicator(props) {
const { classes, className: classNameProp, color, style: styleProp } = props;
const colorPredefined = ['primary', 'secondary'].indexOf(color) !== -1;
const className = classNames(classes.root, {
[classes[`color${capitalize(color)}`]]: colorPredefined
}, classNameProp);
const { classes, className, color } = props,
other = _objectWithoutProperties(props, ['classes', 'className', 'color']);
const style = colorPredefined ? styleProp : _extends({}, styleProp, {
backgroundColor: color
});
return React.createElement('span', { className: className, style: style });
return React.createElement('span', _extends({
className: classNames(classes.root, classes[`color${capitalize(color)}`], className)
}, other));
}

@@ -56,10 +52,5 @@

*/
color: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['primary', 'secondary'])]),
/**
* @ignore
* The style of the root element.
*/
style: PropTypes.object
color: PropTypes.oneOf(['primary', 'secondary'])
} : {};
export default withStyles(styles, { name: 'MuiTabIndicator' })(TabIndicator);

2

es/Tabs/Tabs.js

@@ -371,3 +371,3 @@ import _extends from 'babel-runtime/helpers/extends';

*/
indicatorColor: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['secondary', 'primary'])]),
indicatorColor: PropTypes.oneOf(['secondary', 'primary']),
/**

@@ -374,0 +374,0 @@ * Callback fired when the value changes.

5

es/Tooltip/Tooltip.d.ts

@@ -39,3 +39,3 @@ import * as React from 'react';

| 'popper'
| 'popperClose'
| 'open'
| 'tooltip'

@@ -45,4 +45,3 @@ | 'tooltipPlacementLeft'

| 'tooltipPlacementTop'
| 'tooltipPlacementBottom'
| 'tooltipOpen';
| 'tooltipPlacementBottom';

@@ -49,0 +48,0 @@ interface PopperProps extends IPopperProps {

60

es/Tooltip/Tooltip.js

@@ -26,7 +26,9 @@ import _extends from 'babel-runtime/helpers/extends';

popper: {
zIndex: theme.zIndex.tooltip
zIndex: theme.zIndex.tooltip,
pointerEvents: 'none',
'&$open': {
pointerEvents: 'auto'
}
},
popperClose: {
pointerEvents: 'none'
},
open: {},
tooltip: {

@@ -40,14 +42,23 @@ backgroundColor: theme.palette.grey[700],

transition: theme.transitions.create(['opacity', 'transform'], {
duration: theme.transitions.duration.shortest
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeIn
}),
minHeight: 0,
padding: theme.spacing.unit,
fontSize: theme.typography.pxToRem(14),
lineHeight: `${theme.typography.round(16 / 14)}em`,
[theme.breakpoints.up('sm')]: {
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
fontSize: theme.typography.pxToRem(10),
lineHeight: `${theme.typography.round(14 / 10)}em`
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
fontSize: theme.typography.pxToRem(10),
lineHeight: `${theme.typography.round(14 / 10)}em`,
'&$open': {
opacity: 0.9,
transform: 'scale(1)',
transition: theme.transitions.create(['opacity', 'transform'], {
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut
})
}
},
touch: {
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
fontSize: theme.typography.pxToRem(14),
lineHeight: `${theme.typography.round(16 / 14)}em`
},
tooltipPlacementLeft: {

@@ -80,6 +91,2 @@ transformOrigin: 'right center',

}
},
tooltipOpen: {
opacity: 0.9,
transform: 'scale(1)'
}

@@ -111,2 +118,3 @@ });

this.touchTimer = null;
this.closeTimer = null;
this.isControlled = null;

@@ -185,4 +193,2 @@ this.popper = null;

this.handleClose = event => {
this.ignoreNonTouchEvents = false;
if (!this.isControlled) {

@@ -195,2 +201,7 @@ this.setState({ open: false });

}
clearTimeout(this.closeTimer);
this.closeTimer = setTimeout(() => {
this.ignoreNonTouchEvents = false;
}, this.props.theme.transitions.duration.shortest);
};

@@ -207,2 +218,4 @@

clearTimeout(this.leaveTimer);
clearTimeout(this.closeTimer);
clearTimeout(this.touchTimer);

@@ -245,2 +258,4 @@ event.persist();

clearTimeout(this.leaveTimer);
clearTimeout(this.touchTimer);
clearTimeout(this.closeTimer);
this.handleResize.cancel();

@@ -276,6 +291,3 @@ } // Corresponds to 10 frames at 60 Hz.

let open = this.isControlled ? openProp : this.state.open;
const childrenProps = {
'aria-describedby': id,
title: typeof title === 'string' && !open ? title : ''
};
const childrenProps = { 'aria-describedby': id };

@@ -333,3 +345,3 @@ // There is no point at displaying an empty tooltip.

eventsEnabled: open,
className: classNames(classes.popper, { [classes.popperClose]: !open }, PopperClassName),
className: classNames(classes.popper, { [classes.open]: open }, PopperClassName),
ref: node => {

@@ -355,3 +367,3 @@ this.popper = node;

'aria-hidden': !open,
className: classNames(classes.tooltip, { [classes.tooltipOpen]: open }, classes[`tooltipPlacement${capitalize(actualPlacement)}`])
className: classNames(classes.tooltip, { [classes.open]: open }, { [classes.touch]: this.ignoreNonTouchEvents }, classes[`tooltipPlacement${capitalize(actualPlacement)}`])
},

@@ -358,0 +370,0 @@ title

2

es/transitions/Collapse.js

@@ -32,3 +32,3 @@ import _extends from 'babel-runtime/helpers/extends';

/**
* The Collapes transition is used by the
* The Collapse transition is used by the
* [Vertical Stepper](/demos/steppers#vertical-stepper) StepContent component.

@@ -35,0 +35,0 @@ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.

4

es/transitions/Slide.js

@@ -11,4 +11,4 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';

import Transition from 'react-transition-group/Transition';
import ownerWindow from 'dom-helpers/ownerWindow';
import polyfill from 'react-lifecycles-compat';
import { polyfill } from 'react-lifecycles-compat';
import ownerWindow from '../utils/ownerWindow';
import withTheme from '../styles/withTheme';

@@ -15,0 +15,0 @@ import { duration } from '../styles/transitions';

19

es/utils/keyboardFocus.js

@@ -9,13 +9,6 @@ // weak

const internal = {
focusKeyPressed: false
focusKeyPressed: false,
keyUpEventTimeout: -1
};
export function focusKeyPressed(pressed) {
if (typeof pressed !== 'undefined') {
internal.focusKeyPressed = Boolean(pressed);
}
return internal.focusKeyPressed;
}
export function detectKeyboardFocus(instance, element, callback, attempt = 1) {

@@ -28,3 +21,3 @@ process.env.NODE_ENV !== "production" ? warning(instance.keyboardFocusCheckTime, 'Material-UI: missing instance.keyboardFocusCheckTime') : void 0;

if (focusKeyPressed() && (doc.activeElement === element || contains(element, doc.activeElement))) {
if (internal.focusKeyPressed && (doc.activeElement === element || contains(element, doc.activeElement))) {
callback();

@@ -46,2 +39,8 @@ } else if (attempt < instance.keyboardFocusMaxCheckTimes) {

internal.focusKeyPressed = true;
// Let's consider that the user is using a keyboard during a window frame of 1s.
clearTimeout(internal.keyUpEventTimeout);
internal.keyUpEventTimeout = setTimeout(() => {
internal.focusKeyPressed = false;
}, 1e3);
}

@@ -48,0 +47,0 @@ };

4

ExpansionPanel/ExpansionPanelSummary.d.ts

@@ -19,5 +19,3 @@ import * as React from 'react';

| 'content'
| 'contentExpanded'
| 'expandIcon'
| 'expandIconExpanded';
| 'expandIcon';

@@ -24,0 +22,0 @@ declare const ExpansionPanelSummary: React.ComponentType<ExpansionPanelSummaryProps>;

37

ExpansionPanel/ExpansionPanelSummary.js

@@ -80,13 +80,16 @@ 'use strict';

cursor: 'pointer'
},
'&$expanded': {
minHeight: 64
},
'&$focused': {
backgroundColor: theme.palette.grey[300]
},
'&$disabled': {
opacity: 0.38
}
},
expanded: {
minHeight: 64
},
focused: {
backgroundColor: theme.palette.grey[300]
},
disabled: {
opacity: 0.38
},
expanded: {},
focused: {},
disabled: {},
content: {

@@ -99,7 +102,7 @@ display: 'flex',

paddingRight: theme.spacing.unit * 4
},
'&$expanded': {
margin: '20px 0'
}
},
contentExpanded: {
margin: '20px 0'
},
expandIcon: {

@@ -116,6 +119,6 @@ position: 'absolute',

backgroundColor: 'transparent'
},
'&$expanded': {
transform: 'translateY(-50%) rotate(180deg)'
}
},
expandIconExpanded: {
transform: 'translateY(-50%) rotate(180deg)'
}

@@ -196,3 +199,3 @@ };

'div',
{ className: (0, _classnames2.default)(classes.content, (0, _defineProperty3.default)({}, classes.contentExpanded, expanded)) },
{ className: (0, _classnames2.default)(classes.content, (0, _defineProperty3.default)({}, classes.expanded, expanded)) },
children

@@ -204,3 +207,3 @@ ),

disabled: disabled,
className: (0, _classnames2.default)(classes.expandIcon, (0, _defineProperty3.default)({}, classes.expandIconExpanded, expanded)),
className: (0, _classnames2.default)(classes.expandIcon, (0, _defineProperty3.default)({}, classes.expanded, expanded)),
component: 'div',

@@ -207,0 +210,0 @@ tabIndex: -1,

2

Form/FormControlLabel.d.ts

@@ -20,3 +20,3 @@ import * as React from 'react';

export type FormControlLabelClassKey = 'root' | 'disabled' | 'label' | 'labelDisabled';
export type FormControlLabelClassKey = 'root' | 'disabled' | 'label';

@@ -23,0 +23,0 @@ declare const FormControlLabel: React.ComponentType<FormControlLabelProps>;

18

Form/FormControlLabel.js

@@ -53,10 +53,12 @@ 'use strict';

marginLeft: -14,
marginRight: theme.spacing.unit * 2 // used for row presentation of radio/checkbox
marginRight: theme.spacing.unit * 2, // used for row presentation of radio/checkbox
'&$disabled': {
cursor: 'default'
}
},
disabled: {
cursor: 'default'
},
label: {},
labelDisabled: {
color: theme.palette.text.disabled
disabled: {},
label: {
'&$disabled': {
color: theme.palette.text.disabled
}
}

@@ -117,3 +119,3 @@ };

component: 'span',
className: (0, _classnames2.default)(classes.label, (0, _defineProperty3.default)({}, classes.labelDisabled, disabled))
className: (0, _classnames2.default)(classes.label, (0, _defineProperty3.default)({}, classes.disabled, disabled))
},

@@ -120,0 +122,0 @@ label

16

Form/FormHelperText.js

@@ -48,10 +48,12 @@ 'use strict';

minHeight: '1em',
margin: 0
margin: 0,
'&$error': {
color: theme.palette.error.main
},
'&$disabled': {
color: theme.palette.text.disabled
}
},
error: {
color: theme.palette.error.main
},
disabled: {
color: theme.palette.text.disabled
},
error: {},
disabled: {},
marginDense: {

@@ -58,0 +60,0 @@ marginTop: theme.spacing.unit / 2

8

Form/FormLabel.d.ts

@@ -14,9 +14,3 @@ import * as React from 'react';

export type FormLabelClassKey =
| 'root'
| 'focused'
| 'disabled'
| 'error'
| 'asterisk'
| 'asteriskError';
export type FormLabelClassKey = 'root' | 'focused' | 'disabled' | 'error' | 'asterisk';

@@ -23,0 +17,0 @@ declare const FormLabel: React.ComponentType<FormLabelProps>;

32

Form/FormLabel.js

@@ -45,16 +45,20 @@ 'use strict';

lineHeight: 1,
padding: 0
padding: 0,
'&$focused': {
color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light']
},
'&$disabled': {
color: theme.palette.text.disabled
},
'&$error': {
color: theme.palette.error.main
}
},
focused: {
color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light']
},
disabled: {
color: theme.palette.text.disabled
},
error: {
color: theme.palette.error.main
},
asterisk: {},
asteriskError: {
color: theme.palette.error.main
focused: {},
disabled: {},
error: {},
asterisk: {
'&$error': {
color: theme.palette.error.main
}
}

@@ -108,3 +112,3 @@ };

{
className: (0, _classnames2.default)(classes.asterisk, (0, _defineProperty3.default)({}, classes.asteriskError, error))
className: (0, _classnames2.default)(classes.asterisk, (0, _defineProperty3.default)({}, classes.error, error))
},

@@ -111,0 +115,0 @@ '\u2009*'

23

Grid/Grid.js

@@ -108,3 +108,3 @@ 'use strict';

width: 'calc(100% + ' + spacing + 'px)',
'& > $typeItem': {
'& > $item': {
padding: spacing / 2

@@ -126,3 +126,3 @@ }

return (0, _extends3.default)({
typeContainer: {
container: {
boxSizing: 'border-box',

@@ -133,3 +133,3 @@ display: 'flex',

},
typeItem: {
item: {
boxSizing: 'border-box',

@@ -227,3 +227,3 @@ flex: '0 0 auto',

var className = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.typeContainer, container), (0, _defineProperty3.default)(_classNames, classes.typeItem, item), (0, _defineProperty3.default)(_classNames, classes.zeroMinWidth, zeroMinWidth), (0, _defineProperty3.default)(_classNames, classes['spacing-xs-' + String(spacing)], container && spacing !== 0), (0, _defineProperty3.default)(_classNames, classes['direction-xs-' + String(direction)], direction !== Grid.defaultProps.direction), (0, _defineProperty3.default)(_classNames, classes['wrap-xs-' + String(wrap)], wrap !== Grid.defaultProps.wrap), (0, _defineProperty3.default)(_classNames, classes['align-items-xs-' + String(alignItems)], alignItems !== Grid.defaultProps.alignItems), (0, _defineProperty3.default)(_classNames, classes['align-content-xs-' + String(alignContent)], alignContent !== Grid.defaultProps.alignContent), (0, _defineProperty3.default)(_classNames, classes['justify-xs-' + String(justify)], justify !== Grid.defaultProps.justify), (0, _defineProperty3.default)(_classNames, classes['grid-xs'], xs === true), (0, _defineProperty3.default)(_classNames, classes['grid-xs-' + String(xs)], xs && xs !== true), (0, _defineProperty3.default)(_classNames, classes['grid-sm'], sm === true), (0, _defineProperty3.default)(_classNames, classes['grid-sm-' + String(sm)], sm && sm !== true), (0, _defineProperty3.default)(_classNames, classes['grid-md'], md === true), (0, _defineProperty3.default)(_classNames, classes['grid-md-' + String(md)], md && md !== true), (0, _defineProperty3.default)(_classNames, classes['grid-lg'], lg === true), (0, _defineProperty3.default)(_classNames, classes['grid-lg-' + String(lg)], lg && lg !== true), (0, _defineProperty3.default)(_classNames, classes['grid-xl'], xl === true), (0, _defineProperty3.default)(_classNames, classes['grid-xl-' + String(xl)], xl && xl !== true), _classNames), classNameProp);
var className = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.container, container), (0, _defineProperty3.default)(_classNames, classes.item, item), (0, _defineProperty3.default)(_classNames, classes.zeroMinWidth, zeroMinWidth), (0, _defineProperty3.default)(_classNames, classes['spacing-xs-' + String(spacing)], container && spacing !== 0), (0, _defineProperty3.default)(_classNames, classes['direction-xs-' + String(direction)], direction !== Grid.defaultProps.direction), (0, _defineProperty3.default)(_classNames, classes['wrap-xs-' + String(wrap)], wrap !== Grid.defaultProps.wrap), (0, _defineProperty3.default)(_classNames, classes['align-items-xs-' + String(alignItems)], alignItems !== Grid.defaultProps.alignItems), (0, _defineProperty3.default)(_classNames, classes['align-content-xs-' + String(alignContent)], alignContent !== Grid.defaultProps.alignContent), (0, _defineProperty3.default)(_classNames, classes['justify-xs-' + String(justify)], justify !== Grid.defaultProps.justify), (0, _defineProperty3.default)(_classNames, classes['grid-xs'], xs === true), (0, _defineProperty3.default)(_classNames, classes['grid-xs-' + String(xs)], xs && xs !== true), (0, _defineProperty3.default)(_classNames, classes['grid-sm'], sm === true), (0, _defineProperty3.default)(_classNames, classes['grid-sm-' + String(sm)], sm && sm !== true), (0, _defineProperty3.default)(_classNames, classes['grid-md'], md === true), (0, _defineProperty3.default)(_classNames, classes['grid-md-' + String(md)], md && md !== true), (0, _defineProperty3.default)(_classNames, classes['grid-lg'], lg === true), (0, _defineProperty3.default)(_classNames, classes['grid-lg-' + String(lg)], lg && lg !== true), (0, _defineProperty3.default)(_classNames, classes['grid-xl'], xl === true), (0, _defineProperty3.default)(_classNames, classes['grid-xl-' + String(xl)], xl && xl !== true), _classNames), classNameProp);
var gridProps = (0, _extends3.default)({ className: className }, other);

@@ -298,3 +298,3 @@

*/
lg: _propTypes2.default.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
lg: _propTypes2.default.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -304,3 +304,3 @@ * Defines the number of grids the component is going to use.

*/
md: _propTypes2.default.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
md: _propTypes2.default.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -310,3 +310,3 @@ * Defines the number of grids the component is going to use.

*/
sm: _propTypes2.default.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
sm: _propTypes2.default.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -326,3 +326,3 @@ * Defines the space between the type `item` component.

*/
xl: _propTypes2.default.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
xl: _propTypes2.default.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -332,3 +332,3 @@ * Defines the number of grids the component is going to use.

*/
xs: _propTypes2.default.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
xs: _propTypes2.default.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**

@@ -349,4 +349,9 @@ * If `true`, it sets `min-width: 0` on the item.

justify: 'flex-start',
lg: false,
md: false,
sm: false,
spacing: 0,
wrap: 'wrap',
xl: false,
xs: false,
zeroMinWidth: false

@@ -353,0 +358,0 @@ };

13

IconButton/IconButton.js

@@ -61,3 +61,3 @@ 'use strict';

'&:hover': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.action.active, 0.04),
backgroundColor: (0, _colorManipulator.fade)(theme.palette.action.active, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -70,2 +70,5 @@ '@media (hover: none)': {

}
},
'&$disabled': {
color: theme.palette.action.disabled
}

@@ -79,3 +82,3 @@ },

'&:hover': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.04),
backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -90,3 +93,3 @@ '@media (hover: none)': {

'&:hover': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.04),
backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity

@@ -98,5 +101,3 @@ '@media (hover: none)': {

},
disabled: {
color: theme.palette.action.disabled
},
disabled: {},
label: {

@@ -103,0 +104,0 @@ width: '100%',

3

index.d.ts

@@ -16,3 +16,3 @@ import * as React from 'react';

className?: string;
style?: Partial<React.CSSProperties>;
style?: React.CSSProperties;
};

@@ -111,2 +111,3 @@

export {
createGenerateClassName,
createMuiTheme,

@@ -113,0 +114,0 @@ jssPreset,

4

index.es.js

@@ -1,2 +0,2 @@

/** @license Material-UI v1.0.0-beta.41
/** @license Material-UI v1.0.0-beta.42
*

@@ -40,3 +40,3 @@ * This source code is licensed under the MIT license found in the

export { default as Stepper, Step, StepButton, StepIcon, StepContent, StepLabel } from './Stepper';
export { MuiThemeProvider, withStyles, withTheme, createMuiTheme, jssPreset } from './styles';
export { createGenerateClassName, createMuiTheme, jssPreset, MuiThemeProvider, withStyles, withTheme } from './styles';

@@ -43,0 +43,0 @@ // eslint-disable-next-line import/first

32

index.js

@@ -1,2 +0,2 @@

/** @license Material-UI v1.0.0-beta.41
/** @license Material-UI v1.0.0-beta.42
*

@@ -11,4 +11,4 @@ * This source code is licensed under the MIT license found in the

});
exports.withWidth = exports.Zoom = undefined;
exports.Collapse = exports.Fade = exports.Grow = exports.Slide = exports.Tooltip = exports.Toolbar = exports.TextField = exports.Typography = exports.Tab = exports.Tabs = exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableBody = exports.Table = exports.Switch = exports.SwipeableDrawer = exports.SvgIcon = exports.colors = exports.jssPreset = exports.createMuiTheme = exports.withTheme = exports.withStyles = exports.MuiThemeProvider = exports.StepLabel = exports.StepContent = exports.StepIcon = exports.StepButton = exports.Step = exports.Stepper = exports.SnackbarContent = exports.Snackbar = exports.Select = exports.RadioGroup = exports.Radio = exports.LinearProgress = exports.CircularProgress = exports.Portal = exports.Popover = exports.Paper = exports.ModalManager = exports.Backdrop = exports.Modal = exports.MobileStepper = exports.MenuList = exports.MenuItem = exports.Menu = exports.ListSubheader = exports.ListItemText = exports.ListItemSecondaryAction = exports.ListItemIcon = exports.ListItemAvatar = exports.ListItem = exports.List = exports.GridListTileBar = exports.GridListTile = exports.GridList = exports.Grid = exports.InputAdornment = exports.InputLabel = exports.Input = exports.IconButton = exports.Icon = exports.Hidden = exports.FormControlLabel = exports.FormHelperText = exports.FormLabel = exports.FormGroup = exports.FormControl = exports.ExpansionPanelSummary = exports.ExpansionPanelDetails = exports.ExpansionPanelActions = exports.ExpansionPanel = exports.Drawer = exports.Divider = exports.withMobileDialog = exports.DialogTitle = exports.DialogContentText = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.CssBaseline = exports.ClickAwayListener = exports.Chip = exports.Checkbox = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.Card = exports.ButtonBase = exports.Button = exports.BottomNavigationAction = exports.BottomNavigation = exports.Badge = exports.Avatar = exports.AppBar = undefined;
exports.withWidth = exports.Zoom = exports.Collapse = undefined;
exports.Fade = exports.Grow = exports.Slide = exports.Tooltip = exports.Toolbar = exports.TextField = exports.Typography = exports.Tab = exports.Tabs = exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableBody = exports.Table = exports.Switch = exports.SwipeableDrawer = exports.SvgIcon = exports.colors = exports.withTheme = exports.withStyles = exports.MuiThemeProvider = exports.jssPreset = exports.createMuiTheme = exports.createGenerateClassName = exports.StepLabel = exports.StepContent = exports.StepIcon = exports.StepButton = exports.Step = exports.Stepper = exports.SnackbarContent = exports.Snackbar = exports.Select = exports.RadioGroup = exports.Radio = exports.LinearProgress = exports.CircularProgress = exports.Portal = exports.Popover = exports.Paper = exports.ModalManager = exports.Backdrop = exports.Modal = exports.MobileStepper = exports.MenuList = exports.MenuItem = exports.Menu = exports.ListSubheader = exports.ListItemText = exports.ListItemSecondaryAction = exports.ListItemIcon = exports.ListItemAvatar = exports.ListItem = exports.List = exports.GridListTileBar = exports.GridListTile = exports.GridList = exports.Grid = exports.InputAdornment = exports.InputLabel = exports.Input = exports.IconButton = exports.Icon = exports.Hidden = exports.FormControlLabel = exports.FormHelperText = exports.FormLabel = exports.FormGroup = exports.FormControl = exports.ExpansionPanelSummary = exports.ExpansionPanelDetails = exports.ExpansionPanelActions = exports.ExpansionPanel = exports.Drawer = exports.Divider = exports.withMobileDialog = exports.DialogTitle = exports.DialogContentText = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.CssBaseline = exports.ClickAwayListener = exports.Chip = exports.Checkbox = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.Card = exports.ButtonBase = exports.Button = exports.BottomNavigationAction = exports.BottomNavigation = exports.Badge = exports.Avatar = exports.AppBar = undefined;

@@ -557,32 +557,38 @@ var _AppBar = require('./AppBar');

Object.defineProperty(exports, 'MuiThemeProvider', {
Object.defineProperty(exports, 'createGenerateClassName', {
enumerable: true,
get: function get() {
return _styles.MuiThemeProvider;
return _styles.createGenerateClassName;
}
});
Object.defineProperty(exports, 'withStyles', {
Object.defineProperty(exports, 'createMuiTheme', {
enumerable: true,
get: function get() {
return _styles.withStyles;
return _styles.createMuiTheme;
}
});
Object.defineProperty(exports, 'withTheme', {
Object.defineProperty(exports, 'jssPreset', {
enumerable: true,
get: function get() {
return _styles.withTheme;
return _styles.jssPreset;
}
});
Object.defineProperty(exports, 'createMuiTheme', {
Object.defineProperty(exports, 'MuiThemeProvider', {
enumerable: true,
get: function get() {
return _styles.createMuiTheme;
return _styles.MuiThemeProvider;
}
});
Object.defineProperty(exports, 'jssPreset', {
Object.defineProperty(exports, 'withStyles', {
enumerable: true,
get: function get() {
return _styles.jssPreset;
return _styles.withStyles;
}
});
Object.defineProperty(exports, 'withTheme', {
enumerable: true,
get: function get() {
return _styles.withTheme;
}
});

@@ -589,0 +595,0 @@ var _SvgIcon = require('./SvgIcon');

28

Input/Input.js

@@ -124,3 +124,6 @@ 'use strict';

fontSize: theme.typography.pxToRem(16),
lineHeight: '1.1875em' // Reset (19px), match the native input line-height
lineHeight: '1.1875em', // Reset (19px), match the native input line-height
'&$disabled': {
color: theme.palette.text.disabled
}
},

@@ -133,5 +136,3 @@ formControl: {

focused: {},
disabled: {
color: theme.palette.text.disabled
},
disabled: {},
underline: {

@@ -157,2 +158,6 @@ '&:after': {

},
'&$error:after': {
backgroundColor: theme.palette.error.main,
transform: 'scaleX(1)' // error is always underlined in red
},
'&:before': {

@@ -184,8 +189,3 @@ backgroundColor: bottomLineColor,

},
error: {
'&:after': {
backgroundColor: theme.palette.error.main,
transform: 'scaleX(1)' // error is always underlined in red
}
},
error: {},
multiline: {

@@ -237,2 +237,5 @@ padding: theme.spacing.unit - 2 + 'px 0 ' + (theme.spacing.unit - 1) + 'px'

'&:focus::-ms-input-placeholder': placeholderVisible // Edge
},
'&$disabled': {
opacity: 1 // Reset iOS opacity
}

@@ -243,5 +246,2 @@ },

},
inputDisabled: {
opacity: 1 // Reset iOS opacity
},
inputMultiline: {

@@ -479,3 +479,3 @@ resize: 'none',

var inputClassName = (0, _classnames2.default)(classes.input, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.inputDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.inputType, type !== 'text'), (0, _defineProperty3.default)(_classNames2, classes.inputTypeSearch, type === 'search'), (0, _defineProperty3.default)(_classNames2, classes.inputMultiline, multiline), (0, _defineProperty3.default)(_classNames2, classes.inputMarginDense, margin === 'dense'), _classNames2), inputPropsClassName);
var inputClassName = (0, _classnames2.default)(classes.input, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.inputType, type !== 'text'), (0, _defineProperty3.default)(_classNames2, classes.inputTypeSearch, type === 'search'), (0, _defineProperty3.default)(_classNames2, classes.inputMultiline, multiline), (0, _defineProperty3.default)(_classNames2, classes.inputMarginDense, margin === 'dense'), _classNames2), inputPropsClassName);

@@ -482,0 +482,0 @@ var required = muiFormControl && muiFormControl.required === true;

2

internal/SwitchBase.d.ts

@@ -23,3 +23,3 @@ import * as React from 'react';

export type SwitchBaseClassKey = 'root' | 'default' | 'checked' | 'disabled' | 'input';
export type SwitchBaseClassKey = 'root' | 'checked' | 'disabled' | 'input';

@@ -26,0 +26,0 @@ export type SwitchBase = React.Component<SwitchBaseProps>;

17

internal/SwitchBase.js

@@ -72,2 +72,4 @@ 'use strict';

},
checked: {},
disabled: {},
input: {

@@ -83,6 +85,3 @@ cursor: 'inherit',

padding: 0
},
default: {},
checked: {},
disabled: {}
}
};

@@ -138,3 +137,3 @@

disabledProp = _props.disabled,
iconProp = _props.icon,
icon = _props.icon,
id = _props.id,

@@ -160,6 +159,2 @@ inputProps = _props.inputProps,

var checked = this.isControlled ? checkedProp : this.state.checked;
var className = (0, _classnames2.default)(classes.root, classes.default, classNameProp, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.checked, checked), (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), _classNames));
var icon = checked ? checkedIcon : iconProp;
var hasLabelFor = type === 'checkbox' || type === 'radio';

@@ -171,3 +166,3 @@

component: 'span',
className: className,
className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.checked, checked), (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), _classNames), classNameProp),
disabled: disabled,

@@ -177,3 +172,3 @@ tabIndex: null,

}, other),
icon,
checked ? checkedIcon : icon,
_react2.default.createElement('input', (0, _extends3.default)({

@@ -180,0 +175,0 @@ id: hasLabelFor && id,

2

Modal/isOverflowing.js

@@ -17,3 +17,3 @@ 'use strict';

var _ownerWindow = require('dom-helpers/ownerWindow');
var _ownerWindow = require('../utils/ownerWindow');

@@ -20,0 +20,0 @@ var _ownerWindow2 = _interopRequireDefault(_ownerWindow);

4

Modal/Modal.js

@@ -58,4 +58,2 @@ 'use strict';

var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
var _warning = require('warning');

@@ -504,2 +502,2 @@

exports.default = (0, _withStyles2.default)(styles, { flip: false, name: 'MuiModal' })((0, _reactLifecyclesCompat2.default)(Modal));
exports.default = (0, _withStyles2.default)(styles, { flip: false, name: 'MuiModal' })((0, _reactLifecyclesCompat.polyfill)(Modal));

13

package.json

@@ -5,5 +5,4 @@ {

"author": "Material-UI Team",
"version": "1.0.0-beta.41",
"version": "1.0.0-beta.42",
"description": "React components that implement Google's Material Design.",
"main": "./index.js",
"keywords": [

@@ -30,3 +29,3 @@ "react",

"@types/jss": "^9.3.0",
"@types/react-transition-group": "^2.0.6",
"@types/react-transition-group": "^2.0.8",
"babel-runtime": "^6.26.0",

@@ -51,4 +50,4 @@ "brcast": "^3.0.1",

"react-jss": "^8.1.0",
"react-lifecycles-compat": "^1.0.2",
"react-popper": "^0.8.0",
"react-lifecycles-compat": "^2.0.0",
"react-popper": "^0.10.0",
"react-scrollbar-size": "^2.0.2",

@@ -60,5 +59,2 @@ "react-transition-group": "^2.2.1",

},
"resolutions": {
"@types/react": "16.3.4"
},
"sideEffects": false,

@@ -68,3 +64,4 @@ "engines": {

},
"main": "./index.js",
"module": "./index.es.js"
}

8

Popover/Popover.js

@@ -60,6 +60,2 @@ 'use strict';

var _ownerWindow = require('dom-helpers/ownerWindow');
var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
var _debounce = require('lodash/debounce');

@@ -73,2 +69,6 @@

var _ownerWindow = require('../utils/ownerWindow');
var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
var _withStyles = require('../styles/withStyles');

@@ -75,0 +75,0 @@

2

Radio/Radio.d.ts

@@ -12,3 +12,3 @@ import * as React from 'react';

export type RadioClassKey = SwitchBaseClassKey | 'checkedPrimary' | 'checkedSecondary';
export type RadioClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondery';

@@ -15,0 +15,0 @@ declare const Radio: React.ComponentType<RadioProps>;

33

Radio/Radio.js

@@ -12,6 +12,2 @@ 'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

@@ -55,14 +51,22 @@

return {
default: {
root: {
color: theme.palette.text.secondary
},
checked: {},
checkedPrimary: {
color: theme.palette.primary.main
disabled: {},
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
},
checkedSecondary: {
color: theme.palette.secondary.main
},
disabled: {
color: theme.palette.action.disabled
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main
},
'&$disabled': {
color: theme.palette.action.disabled
}
}

@@ -81,3 +85,2 @@ };

var checkedClass = (0, _classnames2.default)(classes.checked, (0, _defineProperty3.default)({}, classes['checked' + (0, _helpers.capitalize)(color)], color !== 'default'));

@@ -89,4 +92,4 @@ return _react2.default.createElement(_SwitchBase2.default, (0, _extends3.default)({

classes: {
default: classes.default,
checked: checkedClass,
root: (0, _classnames2.default)(classes.root, classes['color' + (0, _helpers.capitalize)(color)]),
checked: classes.checked,
disabled: classes.disabled

@@ -93,0 +96,0 @@ }

5

Select/Select.d.ts

@@ -5,4 +5,6 @@ import * as React from 'react';

import { MenuProps } from '../Menu';
import { SelectInputProps } from './SelectInput';
export interface SelectProps extends StandardProps<InputProps, SelectClassKey, 'value'> {
export interface SelectProps
extends StandardProps<InputProps, SelectClassKey, 'value' | 'onChange'> {
autoWidth?: boolean;

@@ -16,2 +18,3 @@ displayEmpty?: boolean;

onOpen?: (event: React.ChangeEvent<{}>) => void;
onChange: SelectInputProps['onChange'];
open?: boolean;

@@ -18,0 +21,0 @@ renderValue?: (value: SelectProps['value']) => React.ReactNode;

7

Select/Select.js

@@ -69,2 +69,5 @@ 'use strict';

display: 'none'
},
'&$disabled': {
cursor: 'default'
}

@@ -79,5 +82,3 @@ },

},
disabled: {
cursor: 'default'
},
disabled: {},
icon: {

@@ -84,0 +85,0 @@ // We use a position absolute over a flexbox in order to forward the pointer events

2

Select/SelectInput.d.ts

@@ -17,3 +17,3 @@ import * as React from 'react';

onBlur?: React.FocusEventHandler<any>;
onChange?: (event: React.ChangeEvent<{}>, child: React.ReactNode) => void;
onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child: React.ReactNode) => void;
onClose?: (event: React.ChangeEvent<{}>) => void;

@@ -20,0 +20,0 @@ onFocus?: React.FocusEventHandler<any>;

4

Snackbar/Snackbar.js

@@ -58,4 +58,2 @@ 'use strict';

var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
var _withStyles = require('../styles/withStyles');

@@ -449,2 +447,2 @@

exports.default = (0, _withStyles2.default)(styles, { flip: false, name: 'MuiSnackbar' })((0, _reactLifecyclesCompat2.default)(Snackbar));
exports.default = (0, _withStyles2.default)(styles, { flip: false, name: 'MuiSnackbar' })((0, _reactLifecyclesCompat.polyfill)(Snackbar));

9

Stepper/StepLabel.d.ts

@@ -24,12 +24,9 @@ import * as React from 'react';

| 'vertical'
| 'active'
| 'completed'
| 'alternativeLabel'
| 'error'
| 'disabled'
| 'error'
| 'label'
| 'labelActive'
| 'labelCompleted'
| 'labelAlternativeLabel'
| 'iconContainer'
| 'labelError'
| 'iconContainerAlternativeLabel'
| 'labelContainer';

@@ -36,0 +33,0 @@

62

Stepper/StepLabel.js

@@ -50,37 +50,41 @@ 'use strict';

display: 'flex',
alignItems: 'center'
alignItems: 'center',
'&$alternativeLabel': {
flexDirection: 'column'
},
'&$disabled': {
cursor: 'default'
}
},
horizontal: {},
vertical: {},
alternativeLabel: {
flexDirection: 'column'
},
disabled: {
cursor: 'default'
},
active: {},
completed: {},
alternativeLabel: {},
error: {},
disabled: {},
label: {
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
'&$active': {
color: theme.palette.text.primary,
fontWeight: 500
},
'&$completed': {
color: theme.palette.text.primary,
fontWeight: 500
},
'&$alternativeLabel': {
textAlign: 'center',
marginTop: theme.spacing.unit * 2
},
'&$error': {
color: theme.palette.error.main
}
},
labelActive: {
color: theme.palette.text.primary,
fontWeight: 500
},
labelCompleted: {
color: theme.palette.text.primary,
fontWeight: 500
},
labelAlternativeLabel: {
textAlign: 'center',
marginTop: theme.spacing.unit * 2
},
labelError: {
color: theme.palette.error.main
},
iconContainer: {
paddingRight: theme.spacing.unit
paddingRight: theme.spacing.unit,
'&$alternativeLabel': {
paddingRight: 0
}
},
iconContainerAlternativeLabel: {
paddingRight: 0
},
labelContainer: {

@@ -118,3 +122,3 @@ width: '100%'

{
className: (0, _classnames2.default)(classes.iconContainer, (0, _defineProperty3.default)({}, classes.iconContainerAlternativeLabel, alternativeLabel))
className: (0, _classnames2.default)(classes.iconContainer, (0, _defineProperty3.default)({}, classes.alternativeLabel, alternativeLabel))
},

@@ -137,3 +141,3 @@ _react2.default.createElement(_StepIcon2.default, {

component: 'span',
className: (0, _classnames2.default)(classes.label, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.labelAlternativeLabel, alternativeLabel), (0, _defineProperty3.default)(_classNames3, classes.labelCompleted, completed), (0, _defineProperty3.default)(_classNames3, classes.labelActive, active), (0, _defineProperty3.default)(_classNames3, classes.labelError, error), _classNames3))
className: (0, _classnames2.default)(classes.label, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.alternativeLabel, alternativeLabel), (0, _defineProperty3.default)(_classNames3, classes.completed, completed), (0, _defineProperty3.default)(_classNames3, classes.active, active), (0, _defineProperty3.default)(_classNames3, classes.error, error), _classNames3))
},

@@ -140,0 +144,0 @@ children

10

styles/createPalette.d.ts

@@ -62,3 +62,9 @@ import { Color, PaletteType } from '..';

background: TypeBackground;
getContrastText: (color: string) => string;
getContrastText: (background: string) => string;
augmentColor: (
color: string,
mainShade: number | string,
lightShade: number | string,
darkShade: number | string,
) => void;
}

@@ -80,3 +86,3 @@

background?: Partial<TypeBackground>;
getContrastText?: (color: string) => string;
getContrastText?: (background: string) => string;
}

@@ -83,0 +89,0 @@

4

styles/createPalette.js

@@ -77,2 +77,3 @@ 'use strict';

hover: 'rgba(0, 0, 0, 0.08)',
hoverOpacity: 0.08,
// The color of a selected action.

@@ -103,2 +104,3 @@ selected: 'rgba(0, 0, 0, 0.14)',

hover: 'rgba(255, 255, 255, 0.1)',
hoverOpacity: 0.1,
selected: 'rgba(255, 255, 255, 0.2)',

@@ -201,2 +203,4 @@ disabled: 'rgba(255, 255, 255, 0.3)',

getContrastText: getContrastText,
// Generate a rich color object.
augmentColor: augmentColor,
// Used by the functions below to shift a color's luminance by approximately

@@ -203,0 +207,0 @@ // two indexes within its tonal palette.

11

styles/MuiThemeProvider.js

@@ -155,4 +155,11 @@ 'use strict';

value: function render() {
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(typeof window !== 'undefined' || this.props.sheetsManager, ['Material-UI: you need to provide a sheetsManager to the MuiThemeProvider ' + 'when rendering on the server.', 'If you do not, you might experience a memory leak'].join('\n')) : void 0;
// TODO move the sheetsManager property to a different component.
// warning(
// typeof window !== 'undefined' || this.props.sheetsManager,
// [
// 'Material-UI: you need to provide a sheetsManager to the MuiThemeProvider ' +
// 'when rendering on the server.',
// 'If you do not, you might experience a memory leak',
// ].join('\n'),
// );
return this.props.children;

@@ -159,0 +166,0 @@ }

6

styles/overrides.d.ts

@@ -18,2 +18,3 @@ import { AppBarClassKey } from '../AppBar/AppBar';

import { CollapseClassKey } from '../transitions/Collapse';
import { CssBaselineClassKey } from '../CssBaseline/CssBaseline';
import { DialogActionsClassKey } from '../Dialog/DialogActions';

@@ -77,3 +78,2 @@ import { DialogClassKey } from '../Dialog/Dialog';

import { TabClassKey } from '../Tabs/Tab';
import { TabIndicatorClassKey } from '../Tabs/TabIndicator';
import { TableClassKey } from '../Table/Table';

@@ -85,3 +85,2 @@ import { TableCellClassKey } from '../Table/TableCell';

import { TabsClassKey } from '../Tabs/Tabs';
import { TabScrollButtonClassKey } from '../Tabs/TabScrollButton';
import { TextareaClassKey } from '../Input/Textarea';

@@ -115,2 +114,3 @@ import { ToolbarClassKey } from '../Toolbar/Toolbar';

MuiCollapse: CollapseClassKey;
MuiCssBaseline: CssBaselineClassKey;
MuiDialog: DialogClassKey;

@@ -173,3 +173,2 @@ MuiDialogActions: DialogActionsClassKey;

MuiTab: TabClassKey;
MuiTabIndicator: TabIndicatorClassKey;
MuiTable: TableClassKey;

@@ -181,3 +180,2 @@ MuiTableCell: TableCellClassKey;

MuiTabs: TabsClassKey;
MuiTabScrollButton: TabScrollButtonClassKey;
MuiTextarea: TextareaClassKey;

@@ -184,0 +182,0 @@ // MuiTextField: TextFieldClassKey;

8

styles/withStyles.d.ts
import * as React from 'react';
import { Theme } from './createMuiTheme';
import * as CSS from 'csstype';
export interface CSSProperties extends CSS.Properties<number | string> {
// Allow pseudo selectors and media queries
[k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
}
/**

@@ -11,3 +17,3 @@ * This is basically the API of JSS. It defines a Map<string, CSS>,

*/
export type StyleRules<ClassKey extends string = string> = Record<ClassKey, React.CSSProperties>;
export type StyleRules<ClassKey extends string = string> = Record<ClassKey, CSSProperties>;

@@ -14,0 +20,0 @@ export type StyleRulesCallback<ClassKey extends string = string> = (

62

SwipeableDrawer/SwipeableDrawer.js

@@ -51,4 +51,2 @@ 'use strict';

var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
var _Drawer = require('../Drawer/Drawer');

@@ -66,4 +64,10 @@

var _SwipeArea = require('./SwipeArea');
var _SwipeArea2 = _interopRequireDefault(_SwipeArea);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Fragment = _react2.default.Fragment || 'div';
// This value is closed to what browsers are using internally to

@@ -156,3 +160,3 @@ // trigger a native scroll.

// We don't know yet.
if (_this.isSwiping === undefined) {
if (_this.isSwiping == null) {
var dx = Math.abs(currentX - _this.startX);

@@ -169,6 +173,4 @@ var dy = Math.abs(currentY - _this.startY);

if (isSwiping === true || (horizontalSwipe ? dy > UNCERTAINTY_THRESHOLD : dx > UNCERTAINTY_THRESHOLD)) {
if (isSwiping) {
_this.isSwiping = _this.props.open ? 'closing' : 'opening';
} else {
_this.isSwiping = false;
_this.isSwiping = isSwiping;
if (!isSwiping) {
_this.handleBodyTouchEnd(event);

@@ -193,3 +195,3 @@ return;

if (_this.isSwiping === undefined) {
if (!_this.isSwiping) {
return;

@@ -207,4 +209,4 @@ }

// The swipe wasn't started.
if (_this.isSwiping !== 'opening' && _this.isSwiping !== 'closing') {
_this.isSwiping = undefined;
if (!_this.isSwiping) {
_this.isSwiping = null;
return;

@@ -225,3 +227,3 @@ }

if (translateRatio > 0.5) {
if (_this.isSwiping === 'opening') {
if (_this.isSwiping && !_this.props.open) {
// Reset the position, the swipe was aborted.

@@ -234,3 +236,3 @@ _this.setPosition(_this.getMaxTranslate(), {

}
} else if (_this.isSwiping === 'opening') {
} else if (_this.isSwiping && !_this.props.open) {
_this.props.onOpen();

@@ -244,4 +246,4 @@ } else {

_this.isSwiping = undefined;
}, _this.backdrop = null, _this.paper = null, _this.isSwiping = undefined, _this.startX = null, _this.startY = null, _this.handleBackdropRef = function (node) {
_this.isSwiping = null;
}, _this.backdrop = null, _this.paper = null, _this.isSwiping = null, _this.startX = null, _this.startY = null, _this.handleBackdropRef = function (node) {
_this.backdrop = node ? _reactDom2.default.findDOMNode(node) : null;

@@ -294,4 +296,3 @@ }, _this.handlePaperRef = function (node) {

var start = (0, _Drawer.isHorizontal)(this.props) ? this.startX : this.startY;
return Math.min(Math.max(this.isSwiping === 'closing' ? start - current : this.getMaxTranslate() + start - current, 0), this.getMaxTranslate());
return Math.min(Math.max(this.props.open ? start - current : this.getMaxTranslate() + start - current, 0), this.getMaxTranslate());
}

@@ -377,14 +378,19 @@ }, {

return _react2.default.createElement(_Drawer2.default, (0, _extends3.default)({
open: variant === 'temporary' && maybeSwiping ? true : open,
variant: variant,
ModalProps: (0, _extends3.default)({
BackdropProps: (0, _extends3.default)({}, BackdropProps, {
ref: this.handleBackdropRef
return _react2.default.createElement(
Fragment,
null,
_react2.default.createElement(_Drawer2.default, (0, _extends3.default)({
open: variant === 'temporary' && maybeSwiping ? true : open,
variant: variant,
ModalProps: (0, _extends3.default)({
BackdropProps: (0, _extends3.default)({}, BackdropProps, {
ref: this.handleBackdropRef
})
}, ModalPropsProp),
PaperProps: (0, _extends3.default)({}, PaperProps, {
ref: this.handlePaperRef
})
}, ModalPropsProp),
PaperProps: (0, _extends3.default)({}, PaperProps, {
ref: this.handlePaperRef
})
}, other));
}, other)),
!disableDiscovery && !disableSwipeToOpen && variant === 'temporary' && _react2.default.createElement(_SwipeArea2.default, { anchor: other.anchor, swipeAreaWidth: swipeAreaWidth })
);
}

@@ -477,2 +483,2 @@ }], [{

exports.default = (0, _withTheme2.default)()((0, _reactLifecyclesCompat2.default)(SwipeableDrawer));
exports.default = (0, _withTheme2.default)()((0, _reactLifecyclesCompat.polyfill)(SwipeableDrawer));

5

Switch/Switch.d.ts

@@ -17,4 +17,5 @@ import * as React from 'react';

| 'iconChecked'
| 'checkedPrimary'
| 'checkedSecondary';
| 'switchBase'
| 'colorPrimary'
| 'colorSecondery';

@@ -21,0 +22,0 @@ declare const Switch: React.ComponentType<SwitchProps>;

78

Switch/Switch.js

@@ -12,6 +12,2 @@ 'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

@@ -55,18 +51,2 @@

},
bar: {
borderRadius: 14 / 2,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
marginTop: -14 / 2,
left: '50%',
marginLeft: -17,
transition: theme.transitions.create(['opacity', 'background-color'], {
duration: theme.transitions.duration.shortest
}),
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
opacity: theme.palette.type === 'light' ? 0.38 : 0.3
},
icon: {

@@ -82,4 +62,3 @@ boxShadow: theme.shadows[1],

},
// For SwitchBase
default: {
switchBase: {
zIndex: 1,

@@ -97,18 +76,20 @@ color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],

},
checkedPrimary: {
color: theme.palette.primary.main,
'& + $bar': {
backgroundColor: theme.palette.primary.main
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main,
'& + $bar': {
backgroundColor: theme.palette.primary.main
}
}
},
checkedSecondary: {
color: theme.palette.secondary.main,
'& + $bar': {
backgroundColor: theme.palette.secondary.main
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main,
'& + $bar': {
backgroundColor: theme.palette.secondary.main
}
}
},
disabled: {
color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
'& + $bar': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
opacity: theme.palette.type === 'light' ? 0.12 : 0.1

@@ -118,3 +99,25 @@ },

boxShadow: theme.shadows[1]
},
'&$switchBase': {
color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
'& + $bar': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
}
}
},
bar: {
borderRadius: 7,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
left: '50%',
marginTop: -7,
marginLeft: -17,
transition: theme.transitions.create(['opacity', 'background-color'], {
duration: theme.transitions.duration.shortest
}),
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
opacity: theme.palette.type === 'light' ? 0.38 : 0.3
}

@@ -130,5 +133,2 @@ };

var icon = _react2.default.createElement('span', { className: classes.icon });
var checkedIcon = _react2.default.createElement('span', { className: (0, _classnames2.default)(classes.icon, classes.iconChecked) });
var checkedClass = (0, _classnames2.default)(classes.checked, (0, _defineProperty3.default)({}, classes['checked' + (0, _helpers.capitalize)(color)], color !== 'default'));

@@ -139,9 +139,9 @@ return _react2.default.createElement(

_react2.default.createElement(_SwitchBase2.default, (0, _extends3.default)({
icon: icon,
icon: _react2.default.createElement('span', { className: classes.icon }),
classes: {
default: classes.default,
checked: checkedClass,
root: (0, _classnames2.default)(classes.switchBase, classes['color' + (0, _helpers.capitalize)(color)]),
checked: classes.checked,
disabled: classes.disabled
},
checkedIcon: checkedIcon
checkedIcon: _react2.default.createElement('span', { className: (0, _classnames2.default)(classes.icon, classes.iconChecked) })
}, other)),

@@ -148,0 +148,0 @@ _react2.default.createElement('span', { className: classes.bar })

2

Table/TableRow.d.ts

@@ -12,3 +12,3 @@ import * as React from 'react';

export type TableRowClassKey = 'root' | 'head' | 'footer' | 'hover' | 'selected';
export type TableRowClassKey = 'root' | 'selected' | 'hover' | 'head' | 'footer';

@@ -15,0 +15,0 @@ declare const TableRow: React.ComponentType<TableRowProps>;

20

Table/TableRow.js

@@ -47,4 +47,14 @@ 'use strict';

outline: 'none'
},
'&$selected': {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' // grey[100]
: 'rgba(255, 255, 255, 0.08)'
},
'&$hover:hover': {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.07)' // grey[200]
: 'rgba(255, 255, 255, 0.14)'
}
},
selected: {},
hover: {},
head: {

@@ -55,12 +65,2 @@ height: 56

height: 56
},
selected: {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' // grey[100]
: 'rgba(255, 255, 255, 0.08)'
},
hover: {
'&:hover': {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.07)' // grey[200]
: 'rgba(255, 255, 255, 0.14)'
}
}

@@ -67,0 +67,0 @@ };

8

Tabs/Tab.d.ts

@@ -24,9 +24,5 @@ import * as React from 'react';

| 'textColorPrimary'
| 'textColorPrimarySelected'
| 'textColorPrimaryDisabled'
| 'textColorSecondary'
| 'textColorSecondarySelected'
| 'textColorSecondaryDisabled'
| 'textColorInheritSelected'
| 'textColorInheritDisabled'
| 'selected'
| 'disabled'
| 'fullWidth'

@@ -33,0 +29,0 @@ | 'wrapper'

68

Tabs/Tab.js

@@ -8,6 +8,2 @@ 'use strict';

var _keys = require('babel-runtime/core-js/object/keys');
var _keys2 = _interopRequireDefault(_keys);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

@@ -89,28 +85,30 @@

color: 'inherit',
opacity: 0.7
opacity: 0.7,
'&$selected': {
opacity: 1
},
'&$disabled': {
opacity: 0.4
}
},
textColorPrimary: {
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
'&$selected': {
color: theme.palette.primary.main
},
'&$disabled': {
color: theme.palette.text.disabled
}
},
textColorPrimarySelected: {
color: theme.palette.primary.main
},
textColorPrimaryDisabled: {
color: theme.palette.text.disabled
},
textColorSecondary: {
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
'&$selected': {
color: theme.palette.secondary.main
},
'&$disabled': {
color: theme.palette.text.disabled
}
},
textColorSecondarySelected: {
color: theme.palette.secondary.main
},
textColorSecondaryDisabled: {
color: theme.palette.text.disabled
},
textColorInheritSelected: {
opacity: 1
},
textColorInheritDisabled: {
opacity: 0.4
},
selected: {},
disabled: {},
fullWidth: {

@@ -220,6 +218,5 @@ flexGrow: 1

selected = _props.selected,
styleProp = _props.style,
textColor = _props.textColor,
value = _props.value,
other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'className', 'disabled', 'fullWidth', 'icon', 'indicator', 'label', 'onChange', 'selected', 'style', 'textColor', 'value']);
other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'className', 'disabled', 'fullWidth', 'icon', 'indicator', 'label', 'onChange', 'selected', 'textColor', 'value']);

@@ -246,12 +243,4 @@

var className = (0, _classnames2.default)(classes.root, classes['textColor' + (0, _helpers.capitalize)(textColor)], (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes['textColor' + (0, _helpers.capitalize)(textColor) + 'Disabled'], disabled), (0, _defineProperty3.default)(_classNames2, classes['textColor' + (0, _helpers.capitalize)(textColor) + 'Selected'], selected), (0, _defineProperty3.default)(_classNames2, classes.labelIcon, icon && label), (0, _defineProperty3.default)(_classNames2, classes.fullWidth, fullWidth), _classNames2), classNameProp);
var className = (0, _classnames2.default)(classes.root, classes['textColor' + (0, _helpers.capitalize)(textColor)], (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.selected, selected), (0, _defineProperty3.default)(_classNames2, classes.labelIcon, icon && label), (0, _defineProperty3.default)(_classNames2, classes.fullWidth, fullWidth), _classNames2), classNameProp);
var style = {};
if (textColor !== 'secondary' && textColor !== 'inherit') {
style.color = textColor;
}
style = (0, _keys2.default)(style).length > 0 ? (0, _extends4.default)({}, style, styleProp) : styleProp;
return _react2.default.createElement(

@@ -262,3 +251,2 @@ _ButtonBase2.default,

className: className,
style: style,
role: 'tab',

@@ -329,8 +317,4 @@ 'aria-selected': selected,

*/
style: _propTypes2.default.object,
textColor: _propTypes2.default.oneOf(['secondary', 'primary', 'inherit']),
/**
* @ignore
*/
textColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf(['secondary', 'primary', 'inherit'])]),
/**
* You can provide your own value. Otherwise, we fallback to the child position index.

@@ -337,0 +321,0 @@ */

25

Tabs/TabIndicator.js

@@ -12,5 +12,5 @@ 'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

@@ -61,14 +61,10 @@ var _react = require('react');

var classes = props.classes,
classNameProp = props.className,
className = props.className,
color = props.color,
styleProp = props.style;
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color']);
var colorPredefined = ['primary', 'secondary'].indexOf(color) !== -1;
var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes['color' + (0, _helpers.capitalize)(color)], colorPredefined), classNameProp);
var style = colorPredefined ? styleProp : (0, _extends3.default)({}, styleProp, {
backgroundColor: color
});
return _react2.default.createElement('span', { className: className, style: style });
return _react2.default.createElement('span', (0, _extends3.default)({
className: (0, _classnames2.default)(classes.root, classes['color' + (0, _helpers.capitalize)(color)], className)
}, other));
}

@@ -89,10 +85,5 @@

*/
color: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf(['primary', 'secondary'])]),
/**
* @ignore
* The style of the root element.
*/
style: _propTypes2.default.object
color: _propTypes2.default.oneOf(['primary', 'secondary'])
} : {};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTabIndicator' })(TabIndicator);

2

Tabs/Tabs.js

@@ -477,3 +477,3 @@ 'use strict';

*/
indicatorColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf(['secondary', 'primary'])]),
indicatorColor: _propTypes2.default.oneOf(['secondary', 'primary']),
/**

@@ -480,0 +480,0 @@ * Callback fired when the value changes.

5

Tooltip/Tooltip.d.ts

@@ -39,3 +39,3 @@ import * as React from 'react';

| 'popper'
| 'popperClose'
| 'open'
| 'tooltip'

@@ -45,4 +45,3 @@ | 'tooltipPlacementLeft'

| 'tooltipPlacementTop'
| 'tooltipPlacementBottom'
| 'tooltipOpen';
| 'tooltipPlacementBottom';

@@ -49,0 +48,0 @@ interface PopperProps extends IPopperProps {

63

Tooltip/Tooltip.js

@@ -98,8 +98,10 @@ 'use strict';

popper: {
zIndex: theme.zIndex.tooltip
zIndex: theme.zIndex.tooltip,
pointerEvents: 'none',
'&$open': {
pointerEvents: 'auto'
}
},
popperClose: {
pointerEvents: 'none'
},
tooltip: (0, _defineProperty3.default)({
open: {},
tooltip: {
backgroundColor: theme.palette.grey[700],

@@ -112,13 +114,23 @@ borderRadius: 2,

transition: theme.transitions.create(['opacity', 'transform'], {
duration: theme.transitions.duration.shortest
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeIn
}),
minHeight: 0,
padding: theme.spacing.unit,
padding: theme.spacing.unit / 2 + 'px ' + theme.spacing.unit + 'px',
fontSize: theme.typography.pxToRem(10),
lineHeight: theme.typography.round(14 / 10) + 'em',
'&$open': {
opacity: 0.9,
transform: 'scale(1)',
transition: theme.transitions.create(['opacity', 'transform'], {
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut
})
}
},
touch: {
padding: theme.spacing.unit + 'px ' + theme.spacing.unit * 2 + 'px',
fontSize: theme.typography.pxToRem(14),
lineHeight: theme.typography.round(16 / 14) + 'em'
}, theme.breakpoints.up('sm'), {
padding: theme.spacing.unit / 2 + 'px ' + theme.spacing.unit + 'px',
fontSize: theme.typography.pxToRem(10),
lineHeight: theme.typography.round(14 / 10) + 'em'
}),
},
tooltipPlacementLeft: (0, _defineProperty3.default)({

@@ -147,7 +159,3 @@ transformOrigin: 'right center',

margin: '14px 0'
}),
tooltipOpen: {
opacity: 0.9,
transform: 'scale(1)'
}
})
};

@@ -183,2 +191,3 @@ }; /* eslint-disable react/no-multi-comp, no-underscore-dangle */

_this.touchTimer = null;
_this.closeTimer = null;
_this.isControlled = null;

@@ -263,4 +272,2 @@ _this.popper = null;

_this.handleClose = function (event) {
_this.ignoreNonTouchEvents = false;
if (!_this.isControlled) {

@@ -273,2 +280,7 @@ _this.setState({ open: false });

}
clearTimeout(_this.closeTimer);
_this.closeTimer = setTimeout(function () {
_this.ignoreNonTouchEvents = false;
}, _this.props.theme.transitions.duration.shortest);
};

@@ -288,2 +300,4 @@

clearTimeout(_this.leaveTimer);
clearTimeout(_this.closeTimer);
clearTimeout(_this.touchTimer);

@@ -333,2 +347,4 @@ event.persist();

clearTimeout(this.leaveTimer);
clearTimeout(this.touchTimer);
clearTimeout(this.closeTimer);
this.handleResize.cancel();

@@ -369,6 +385,3 @@ } // Corresponds to 10 frames at 60 Hz.

var open = this.isControlled ? openProp : this.state.open;
var childrenProps = {
'aria-describedby': id,
title: typeof title === 'string' && !open ? title : ''
};
var childrenProps = { 'aria-describedby': id };

@@ -429,3 +442,3 @@ // There is no point at displaying an empty tooltip.

eventsEnabled: open,
className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open), PopperClassName),
className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.open, open), PopperClassName),
ref: function ref(node) {

@@ -454,3 +467,3 @@ _this2.popper = node;

'aria-hidden': !open,
className: (0, _classnames2.default)(classes.tooltip, (0, _defineProperty3.default)({}, classes.tooltipOpen, open), classes['tooltipPlacement' + (0, _helpers.capitalize)(actualPlacement)])
className: (0, _classnames2.default)(classes.tooltip, (0, _defineProperty3.default)({}, classes.open, open), (0, _defineProperty3.default)({}, classes.touch, _this2.ignoreNonTouchEvents), classes['tooltipPlacement' + (0, _helpers.capitalize)(actualPlacement)])
},

@@ -457,0 +470,0 @@ title

2

transitions/Collapse.js

@@ -87,3 +87,3 @@ 'use strict';

/**
* The Collapes transition is used by the
* The Collapse transition is used by the
* [Vertical Stepper](/demos/steppers#vertical-stepper) StepContent component.

@@ -90,0 +90,0 @@ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.

10

transitions/Slide.js

@@ -61,10 +61,8 @@ 'use strict';

var _ownerWindow = require('dom-helpers/ownerWindow');
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _ownerWindow = require('../utils/ownerWindow');
var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
var _withTheme = require('../styles/withTheme');

@@ -354,2 +352,2 @@

exports.default = (0, _withTheme2.default)()((0, _reactLifecyclesCompat2.default)(Slide));
exports.default = (0, _withTheme2.default)()((0, _reactLifecyclesCompat.polyfill)(Slide));

20

utils/keyboardFocus.js

@@ -6,3 +6,2 @@ 'use strict';

});
exports.focusKeyPressed = focusKeyPressed;
exports.detectKeyboardFocus = detectKeyboardFocus;

@@ -32,13 +31,6 @@ exports.listenForFocusKeys = listenForFocusKeys;

var internal = {
focusKeyPressed: false
focusKeyPressed: false,
keyUpEventTimeout: -1
};
function focusKeyPressed(pressed) {
if (typeof pressed !== 'undefined') {
internal.focusKeyPressed = Boolean(pressed);
}
return internal.focusKeyPressed;
}
function detectKeyboardFocus(instance, element, callback) {

@@ -53,3 +45,3 @@ var attempt = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

if (focusKeyPressed() && (doc.activeElement === element || (0, _contains2.default)(element, doc.activeElement))) {
if (internal.focusKeyPressed && (doc.activeElement === element || (0, _contains2.default)(element, doc.activeElement))) {
callback();

@@ -71,2 +63,8 @@ } else if (attempt < instance.keyboardFocusMaxCheckTimes) {

internal.focusKeyPressed = true;
// Let's consider that the user is using a keyboard during a window frame of 1s.
clearTimeout(internal.keyUpEventTimeout);
internal.keyUpEventTimeout = setTimeout(function () {
internal.focusKeyPressed = false;
}, 1e3);
}

@@ -73,0 +71,0 @@ };

CHANGELOG.md
LICENSE
README.md
BottomNavigation/BottomNavigationAction.js.flow

Sorry, the diff of this file is not supported yet

BottomNavigation/BottomNavigationAction.test.js.flow

Sorry, the diff of this file is not supported yet

Button/Button.js.flow

Sorry, the diff of this file is not supported yet

ButtonBase/ButtonBase.js.flow

Sorry, the diff of this file is not supported yet

ButtonBase/ButtonBase.test.js.flow

Sorry, the diff of this file is not supported yet

Card/Card.js.flow

Sorry, the diff of this file is not supported yet

Card/Card.test.js.flow

Sorry, the diff of this file is not supported yet

Card/CardActions.test.js.flow

Sorry, the diff of this file is not supported yet

Checkbox/Checkbox.js.flow

Sorry, the diff of this file is not supported yet

Checkbox/Checkbox.test.js.flow

Sorry, the diff of this file is not supported yet

Chip/Chip.js.flow

Sorry, the diff of this file is not supported yet

Dialog/Dialog.js.flow

Sorry, the diff of this file is not supported yet

ExpansionPanel/ExpansionPanelSummary.js.flow

Sorry, the diff of this file is not supported yet

Form/FormControlLabel.js.flow

Sorry, the diff of this file is not supported yet

Form/FormControlLabel.test.js.flow

Sorry, the diff of this file is not supported yet

Form/FormHelperText.js.flow

Sorry, the diff of this file is not supported yet

Form/FormLabel.js.flow

Sorry, the diff of this file is not supported yet

Form/FormLabel.test.js.flow

Sorry, the diff of this file is not supported yet

Grid/Grid.js.flow

Sorry, the diff of this file is not supported yet

Grid/Grid.test.js.flow

Sorry, the diff of this file is not supported yet

IconButton/IconButton.js.flow

Sorry, the diff of this file is not supported yet

index.js.flow

Sorry, the diff of this file is not supported yet

Input/Input.js.flow

Sorry, the diff of this file is not supported yet

Input/Input.test.js.flow

Sorry, the diff of this file is not supported yet

internal/SwitchBase.js.flow

Sorry, the diff of this file is not supported yet

List/ListItemAvatar.test.js.flow

Sorry, the diff of this file is not supported yet

Modal/isOverflowing.js.flow

Sorry, the diff of this file is not supported yet

Modal/Modal.js.flow

Sorry, the diff of this file is not supported yet

Modal/Modal.test.js.flow

Sorry, the diff of this file is not supported yet

Popover/Popover.js.flow

Sorry, the diff of this file is not supported yet

Progress/LinearProgress.test.js.flow

Sorry, the diff of this file is not supported yet

Radio/Radio.js.flow

Sorry, the diff of this file is not supported yet

Radio/Radio.test.js.flow

Sorry, the diff of this file is not supported yet

Select/Select.js.flow

Sorry, the diff of this file is not supported yet

Select/SelectInput.test.js.flow

Sorry, the diff of this file is not supported yet

Snackbar/Snackbar.js.flow

Sorry, the diff of this file is not supported yet

Stepper/StepLabel.js.flow

Sorry, the diff of this file is not supported yet

Stepper/StepLabel.test.js.flow

Sorry, the diff of this file is not supported yet

styles/colorManipulator.test.js.flow

Sorry, the diff of this file is not supported yet

styles/createGenerateClassName.test.js.flow

Sorry, the diff of this file is not supported yet

styles/createPalette.js.flow

Sorry, the diff of this file is not supported yet

styles/createPalette.test.js.flow

Sorry, the diff of this file is not supported yet

styles/getStylesCreator.test.js.flow

Sorry, the diff of this file is not supported yet

styles/MuiThemeProvider.js.flow

Sorry, the diff of this file is not supported yet

styles/withStyles.test.js.flow

Sorry, the diff of this file is not supported yet

SwipeableDrawer/SwipeableDrawer.js.flow

Sorry, the diff of this file is not supported yet

SwipeableDrawer/SwipeableDrawer.test.js.flow

Sorry, the diff of this file is not supported yet

Switch/Switch.js.flow

Sorry, the diff of this file is not supported yet

Switch/Switch.test.js.flow

Sorry, the diff of this file is not supported yet

Table/TableRow.js.flow

Sorry, the diff of this file is not supported yet

Tabs/Tab.js.flow

Sorry, the diff of this file is not supported yet

Tabs/Tab.test.js.flow

Sorry, the diff of this file is not supported yet

Tabs/TabIndicator.js.flow

Sorry, the diff of this file is not supported yet

Tabs/TabIndicator.test.js.flow

Sorry, the diff of this file is not supported yet

Tabs/Tabs.js.flow

Sorry, the diff of this file is not supported yet

Tabs/Tabs.test.js.flow

Sorry, the diff of this file is not supported yet

Tooltip/Tooltip.js.flow

Sorry, the diff of this file is not supported yet

Tooltip/Tooltip.test.js.flow

Sorry, the diff of this file is not supported yet

transitions/Collapse.js.flow

Sorry, the diff of this file is not supported yet

transitions/Slide.js.flow

Sorry, the diff of this file is not supported yet

umd/material-ui.development.js

Sorry, the diff of this file is too big to display

umd/material-ui.production.min.js

Sorry, the diff of this file is too big to display

utils/keyboardFocus.js.flow

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc