material-ui - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

CHANGELOG.md

@@ -0,1 +1,35 @@
+## 0.9.2
+###### _Jun 20, 2015_
+
+##### New Components
+- SelectField (#846)
+- Card, CardActions, CardHeader, CardMedia, CardText, CardTitle (#857)
+- Table (#890)
+
+##### Components
+- AppBar - Long AppBar titles now render ellipses (#875)
+- Buttons
+  - Added containerElement prop (#850)
+  - Fixed styling for disabled link buttons
+- DropDownMenu - Added keyboard functionality (#846)
+- FontIcon - Added color and hoverColor props
+- ListItem
+  - Fixed display problem with Single line checkboxes (#854)
+  - Added rightIconButton prop
+- Slider - Added step functionality (#860)
+- Switches - Added labelStyle prop (#871)
+- SvgIcon - Added color and hoverColor props
+- TextField - Made element styles overridable (#864)
+- TimePicker
+  - Fixed clock functionality for various browsers (#840)
+  - Fixed clock numbers positioning for Safari (#870)
+  - Fixed clock handles on Android Chrome (#873)
+- Toggle
+  - Made element styles overridable (#855)
+  - Fixed style bug on IE 10, 11 (#885)
+- Toolbar - Fixed error when a child element is null (#847)
+
+##### Theming
+- Theme spacing can now be overriden (#879)
+
 ## 0.9.1
@@ -2,0 +36,0 @@ ###### _Jun 14, 2015_

lib/app-bar.js

@@ -41,5 +41,5 @@ 'use strict';
   componentDidMount: function componentDidMount() {
-    if (process.env.NODE_ENV !== 'production' && (this.props.iconElementLeft && this.props.iconClassNameLeft)) {
-      var warning = 'Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' + 'defined. Please use one or the other.';
-      console.warn(warning);
+    if (process.env.NODE_ENV !== 'production' && this.props.iconElementLeft && this.props.iconClassNameLeft) {
+
+      console.warn('Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' + 'defined. Please use one or the other.');
     }
@@ -56,2 +56,3 @@ },
         width: '100%',
+        display: '-webkit-box; display: flex',
         minHeight: themeVariables.height,
@@ -63,3 +64,5 @@ backgroundColor: themeVariables.color,
       title: {
-        float: 'left',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
         margin: 0,
@@ -73,6 +76,9 @@ paddingTop: 0,
       },
+      mainElement: {
+        boxFlex: 1,
+        flex: '1'
+      },
       iconButton: {
         style: {
           marginTop: (themeVariables.height - iconButtonSize) / 2,
-          float: 'left',
           marginRight: 8,
@@ -93,19 +99,25 @@ marginLeft: -16
 
-    var title;
-    var menuElementLeft;
-    var menuElementRight;
     var iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, {
-      float: 'right',
       marginRight: -16,
-      marginLeft: 8
+      marginLeft: 'auto'
     }, this.props.iconStyleRight);
 
-    if (this.props.title) {
+    var title = this.props.title;
+
+    var titleElement;
+    var menuElementLeft;
+    var menuElementRight;
+
+    if (title) {
       // If the title is a string, wrap in an h1 tag.
       // If not, just use it as a node.
-      title = Object.prototype.toString.call(this.props.title) === '[object String]' ? React.createElement(
+      titleElement = typeof title === 'string' || title instanceof String ? React.createElement(
         'h1',
-        { style: this.mergeAndPrefix(styles.title) },
-        this.props.title
-      ) : this.props.title;
+        { style: this.mergeAndPrefix(styles.title, styles.mainElement) },
+        title
+      ) : React.createElement(
+        'div',
+        { style: this.mergeAndPrefix(styles.mainElement) },
+        title
+      );
     }
@@ -156,3 +168,3 @@
       menuElementLeft,
-      title,
+      titleElement,
       menuElementRight,
@@ -159,0 +171,0 @@ this.props.children

lib/avatar.js

@@ -54,2 +54,3 @@ 'use strict';
         borderColor: this.context.muiTheme.palette.borderColor,
+        display: 'inline-block',
 
@@ -64,4 +65,2 @@ //Needed for letter avatars
       iconStyles: {
-        color: color,
-        fill: color,
         margin: 8
@@ -75,2 +74,3 @@ }
     var iconElement = icon ? React.cloneElement(icon, {
+      color: color,
       style: mergedIconStyles
@@ -77,0 +77,0 @@ }) : null;

lib/checkbox.js

@@ -25,2 +25,3 @@ 'use strict';
     iconStyle: React.PropTypes.object,
+    labelStyle: React.PropTypes.object,
     onCheck: React.PropTypes.func,
@@ -76,2 +77,5 @@ checkedIcon: React.PropTypes.element,
         fill: this.getTheme().disabledColor
+      },
+      label: {
+        color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
       }
@@ -117,2 +121,4 @@ };
 
+    var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle);
+
     var enhancedSwitchProps = {
@@ -126,2 +132,3 @@ ref: 'enhancedSwitch',
       onSwitch: this._handleCheck,
+      labelStyle: labelStyle,
       onParentShouldUpdate: this._handleStateChange,
@@ -128,0 +135,0 @@ defaultSwitched: this.props.defaultChecked,

lib/dialog.js

@@ -9,3 +9,2 @@ 'use strict';
 var StylePropable = require('./mixins/style-propable');
-var Spacing = require('./styles/spacing');
 var DialogWindow = require('./dialog-window');
@@ -28,3 +27,4 @@
   getStyles: function getStyles() {
-    var gutter = Spacing.desktopGutter + 'px ';
+    var spacing = this.context.muiTheme.spacing;
+    var gutter = spacing.desktopGutter + 'px ';
     var styles = {
@@ -40,3 +40,3 @@ title: {
       content: {
-        padding: Spacing.desktopGutter
+        padding: spacing.desktopGutter
       }
@@ -43,0 +43,0 @@ };

lib/drop-down-icon.js

@@ -10,3 +10,2 @@ 'use strict';
 var Transitions = require('./styles/transitions');
-var Spacing = require('./styles/spacing');
 var ClickAwayable = require('./mixins/click-awayable');
@@ -21,2 +20,6 @@ var FontIcon = require('./font-icon');
 
+  contextTypes: {
+    muiTheme: React.PropTypes.object
+  },
+
   propTypes: {
@@ -48,2 +51,3 @@ onChange: React.PropTypes.func,
   getStyles: function getStyles() {
+    var spacing = this.context.muiTheme.spacing;
     var iconWidth = 48;
@@ -55,4 +59,4 @@ var styles = {
         position: 'relative',
-        height: Spacing.desktopToolbarHeight,
-        fontSize: Spacing.desktopDropDownMenuFontSize,
+        height: spacing.desktopToolbarHeight,
+        fontSize: spacing.desktopDropDownMenuFontSize,
         cursor: 'pointer'
@@ -67,5 +71,5 @@ },
       menuItem: { // similair to drop down menu's menu item styles
-        paddingRight: Spacing.iconSize + Spacing.desktopGutterLess * 2,
-        height: Spacing.desktopDropDownMenuItemHeight,
-        lineHeight: Spacing.desktopDropDownMenuItemHeight + 'px'
+        paddingRight: spacing.iconSize + spacing.desktopGutterLess * 2,
+        height: spacing.desktopDropDownMenuItemHeight,
+        lineHeight: spacing.desktopDropDownMenuItemHeight + 'px'
       }
@@ -72,0 +76,0 @@ };

lib/drop-down-menu.js

@@ -7,2 +7,3 @@ 'use strict';
 var ClickAwayable = require('./mixins/click-awayable');
+var KeyCode = require('./utils/key-code');
 var DropDownArrow = require('./svg-icons/drop-down-arrow');
@@ -26,2 +27,4 @@ var Paper = require('./paper');
     className: React.PropTypes.string,
+    displayMember: React.PropTypes.string,
+    valueMember: React.PropTypes.string,
     autoWidth: React.PropTypes.bool,
@@ -31,2 +34,5 @@ onChange: React.PropTypes.func,
     menuItemStyle: React.PropTypes.object,
+    underlineStyle: React.PropTypes.object,
+    iconStyle: React.PropTypes.object,
+    labelStyle: React.PropTypes.object,
     selectedIndex: React.PropTypes.number
@@ -37,3 +43,5 @@ },
     return {
-      autoWidth: true
+      autoWidth: true,
+      valueMember: 'payload',
+      displayMember: 'text'
     };
@@ -46,3 +54,3 @@ },
       isHovered: false,
-      selectedIndex: this.props.selectedIndex || 0
+      selectedIndex: this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink') ? null : this.props.selectedIndex || 0
     };
@@ -61,3 +69,5 @@ },
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.hasOwnProperty('selectedIndex')) {
+    if (nextProps.hasOwnProperty('value') || nextProps.hasOwnProperty('valueLink')) {
+      return;
+    } else if (nextProps.hasOwnProperty('selectedIndex')) {
       this._setSelectedIndex(nextProps);
@@ -84,3 +94,4 @@ }
         height: this.getSpacing().desktopToolbarHeight,
-        fontSize: this.getSpacing().desktopDropDownMenuFontSize
+        fontSize: this.getSpacing().desktopDropDownMenuFontSize,
+        outline: 'none'
       },
@@ -97,3 +108,3 @@ control: {
         width: '100%',
-        opacity: this.state.open ? 0 : this.state.isHovered ? 1 : 0
+        opacity: 0
       },
@@ -136,9 +147,34 @@ icon: {
 
+  getInputNode: function getInputNode() {
+    var root = this.refs.root;
+    var item = this.props.menuItems[this.state.selectedIndex];
+    if (item) root.value = item[this.props.displayMember];
+    return root;
+  },
+
   render: function render() {
+    var _this = this;
     var styles = this.getStyles();
-
-    if (process.env.NODE_ENV !== 'production') {
-      console.assert(!!this.props.menuItems[this.state.selectedIndex], 'SelectedIndex of ' + this.state.selectedIndex + ' does not exist in menuItems.');
+    var selectedIndex = this.state.selectedIndex;
+    var displayValue = '';
+    if (selectedIndex) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.assert(!!this.props.menuItems[selectedIndex], 'SelectedIndex of ' + selectedIndex + ' does not exist in menuItems.');
+      }
+    } else {
+      if (this.props.valueMember && (this.props.valueLink || this.props.value)) {
+        var value = this.props.value || this.props.valueLink.value;
+        for (var i in this.props.menuItems) if (this.props.menuItems[i][this.props.valueMember] === value) selectedIndex = i;
+      }
     }
 
+    var selectedItem = this.props.menuItems[selectedIndex];
+    if (selectedItem) displayValue = selectedItem[this.props.displayMember];
+
+    var menuItems = this.props.menuItems.map(function (item) {
+      item.text = item[_this.props.displayMember];
+      item.payload = item[_this.props.valueMember];
+      return item;
+    });
+
     return React.createElement(
@@ -150,2 +186,5 @@ 'div',
         onMouseOver: this._handleMouseOver,
+        onKeyDown: this._onKeyDown,
+        onFocus: this.props.onFocus,
+        onBlur: this.props.onBlur,
         className: this.props.className,
@@ -159,7 +198,7 @@ style: this.mergeAndPrefix(styles.root, this.state.open && styles.rootWhenOpen, this.props.style) },
           'div',
-          { style: this.mergeAndPrefix(styles.label, this.state.open && styles.labelWhenOpen) },
-          this.props.menuItems[this.state.selectedIndex].text
+          { style: this.mergeAndPrefix(styles.label, this.state.open && styles.labelWhenOpen, this.props.labelStyle) },
+          displayValue
         ),
-        React.createElement(DropDownArrow, { style: this.mergeAndPrefix(styles.icon) }),
-        React.createElement('div', { style: this.mergeAndPrefix(styles.underline) })
+        React.createElement(DropDownArrow, { style: this.mergeAndPrefix(styles.icon, this.props.iconStyle) }),
+        React.createElement('div', { style: this.mergeAndPrefix(styles.underline, this.props.underlineStyle) })
       ),
@@ -169,7 +208,8 @@ React.createElement(Menu, {
         autoWidth: this.props.autoWidth,
-        selectedIndex: this.state.selectedIndex,
-        menuItems: this.props.menuItems,
+        selectedIndex: selectedIndex,
+        menuItems: menuItems,
         menuItemStyle: this.mergeAndPrefix(styles.menuItem, this.props.menuItemStyle),
         hideable: true,
         visible: this.state.open,
+        onRequestClose: this._onMenuRequestClose,
         onItemTap: this._onMenuItemClick })
@@ -201,10 +241,40 @@ );
 
+  _onKeyDown: function _onKeyDown(e) {
+    switch (e.which) {
+      case KeyCode.UP:
+        if (!this.state.open) this._selectPreviousItem();else if (e.altKey) this.setState({ open: false });
+        break;
+      case KeyCode.DOWN:
+        if (!this.state.open) if (e.altKey) this.setState({ open: true });else this._selectNextItem();
+        break;
+      case KeyCode.ENTER:
+      case KeyCode.SPACE:
+        this.setState({ open: true });
+        break;
+      default:
+        return; //important
+    }
+    e.preventDefault();
+  },
+
   _onMenuItemClick: function _onMenuItemClick(e, key, payload) {
-    if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, key, payload);
+    if (this.props.onChange && this.state.selectedIndex !== key) {
+      var selectedItem = this.props.menuItems[key];
+      if (selectedItem) e.target.value = selectedItem[this.props.valueMember];
+
+      if (this.props.valueLink) this.props.valueLink.requestChange(e.target.value);else this.props.onChange(e, key, payload);
+    }
+
     this.setState({
       selectedIndex: key,
-      open: false
+      value: e.target.value,
+      open: false,
+      isHovered: false
     });
   },
 
+  _onMenuRequestClose: function _onMenuRequestClose() {
+    this.setState({ open: false });
+  },
+
   _handleMouseOver: function _handleMouseOver() {
@@ -216,2 +286,10 @@ this.setState({ isHovered: true });
     this.setState({ isHovered: false });
+  },
+
+  _selectPreviousItem: function _selectPreviousItem() {
+    this.setState({ selectedIndex: Math.max(this.state.selectedIndex - 1, 0) });
+  },
+
+  _selectNextItem: function _selectNextItem() {
+    this.setState({ selectedIndex: Math.min(this.state.selectedIndex + 1, this.props.menuItems.length - 1) });
   }
@@ -218,0 +296,0 @@

lib/enhanced-button.js

@@ -25,3 +25,3 @@ 'use strict';
     centerRipple: React.PropTypes.bool,
-    className: React.PropTypes.string,
+    containerElement: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
     disabled: React.PropTypes.bool,
@@ -44,2 +44,8 @@ disableFocusRipple: React.PropTypes.bool,
 
+  getDefaultProps: function getDefaultProps() {
+    return {
+      containerElement: 'button'
+    };
+  },
+
   windowListeners: {
@@ -93,7 +99,11 @@ 'keydown': '_handleWindowKeydown',
     var centerRipple = _props.centerRipple;
+    var containerElement = _props.containerElement;
     var disabled = _props.disabled;
     var disableFocusRipple = _props.disableFocusRipple;
     var disableTouchRipple = _props.disableTouchRipple;
+    var focusRippleColor = _props.focusRippleColor;
+    var focusRippleOpacity = _props.focusRippleOpacity;
     var linkButton = _props.linkButton;
     var touchRippleColor = _props.touchRippleColor;
+    var touchRippleOpacity = _props.touchRippleOpacity;
     var onBlur = _props.onBlur;
@@ -104,6 +114,20 @@ var onFocus = _props.onFocus;
     var onTouchTap = _props.onTouchTap;
+    var style = _props.style;
 
-    var other = _objectWithoutProperties(_props, ['centerRipple', 'disabled', 'disableFocusRipple', 'disableTouchRipple', 'linkButton', 'touchRippleColor', 'onBlur', 'onFocus', 'onMouseOver', 'onMouseOut', 'onTouchTap']);
+    var other = _objectWithoutProperties(_props, ['centerRipple', 'containerElement', 'disabled', 'disableFocusRipple', 'disableTouchRipple', 'focusRippleColor', 'focusRippleOpacity', 'linkButton', 'touchRippleColor', 'touchRippleOpacity', 'onBlur', 'onFocus', 'onMouseOver', 'onMouseOut', 'onTouchTap', 'style']);
 
-    var styles = this.mergeAndPrefix(this.getStyles().root, this.props.linkButton && this.getStyles().rootWhenLinkButton, this.props.disabled && this.getStyles().rootWhenDisabled, this.props.style);
+    var styles = this.getStyles();
+
+    var mergedStyles = this.mergeAndPrefix(styles.root, linkButton && styles.rootWhenLinkButton, disabled && styles.rootWhenDisabled, style);
+
+    var buttonProps = _extends({}, other, {
+      style: mergedStyles,
+      disabled: disabled,
+      onBlur: this._handleBlur,
+      onFocus: this._handleFocus,
+      onMouseOver: this._handleMouseOver,
+      onMouseOut: this._handleMouseOut,
+      onTouchTap: this._handleTouchTap
+    });
+
     var buttonChildren = [];
@@ -118,4 +142,4 @@
         centerRipple: centerRipple,
-        color: this.props.touchRippleColor,
-        opacity: this.props.touchRippleOpacity },
+        color: touchRippleColor,
+        opacity: touchRippleOpacity },
       this.props.children
@@ -125,16 +149,6 @@ ));
       key: 'focusRipple',
-      color: this.props.focusRippleColor,
-      opacity: this.props.focusRippleOpacity,
+      color: focusRippleColor,
+      opacity: focusRippleOpacity,
       show: this.state.isKeyboardFocused }));
 
-    var buttonProps = {
-      style: styles,
-      disabled: disabled,
-      onBlur: this._handleBlur,
-      onFocus: this._handleFocus,
-      onMouseOver: this._handleMouseOver,
-      onMouseOut: this._handleMouseOut,
-      onTouchTap: this._handleTouchTap
-    };
-
     if (disabled && linkButton) {
@@ -144,4 +158,3 @@ return React.createElement(
         _extends({}, other, {
-          className: this.props.className,
-          disabled: disabled }),
+          style: mergedStyles }),
         this.props.children
@@ -151,3 +164,3 @@ );
 
-    return React.createElement(linkButton ? 'a' : 'button', _extends({}, other, buttonProps), buttonChildren);
+    return React.isValidElement(containerElement) ? React.cloneElement(containerElement, buttonProps, buttonChildren) : React.createElement(linkButton ? 'a' : containerElement, buttonProps, buttonChildren);
   },
@@ -154,0 +167,0 @@

lib/enhanced-switch.js

@@ -13,3 +13,2 @@ 'use strict';
 var WindowListenable = require('./mixins/window-listenable');
-var Spacing = require('./styles/spacing');
 var ClearFix = require('./clearfix');
@@ -107,3 +106,4 @@ var FocusRipple = require('./ripples/focus-ripple');
   getStyles: function getStyles() {
-    var switchWidth = 60 - Spacing.desktopGutterLess;
+    var spacing = this.context.muiTheme.spacing;
+    var switchWidth = 60 - spacing.desktopGutterLess;
     var labelWidth = 'calc(100% - 60px)';
@@ -140,3 +140,3 @@
         position: 'relative',
-        display: 'table-column',
+        display: 'block',
         width: labelWidth,
@@ -150,6 +150,6 @@ lineHeight: '24px',
         position: 'relative',
-        display: 'table-column',
+        display: 'block',
         width: switchWidth,
-        marginRight: this.props.labelPosition == 'right' ? Spacing.desktopGutterLess : 0,
-        marginLeft: this.props.labelPosition == 'left' ? Spacing.desktopGutterLess : 0
+        marginRight: this.props.labelPosition == 'right' ? spacing.desktopGutterLess : 0,
+        marginLeft: this.props.labelPosition == 'left' ? spacing.desktopGutterLess : 0
       },
@@ -156,0 +156,0 @@ ripple: {

lib/enhanced-textarea.js

@@ -113,2 +113,7 @@ 'use strict';
 
+  setValue: function setValue(value) {
+    this.refs.input.value = value;
+    this._syncHeightWithShadow(value);
+  },
+
   _syncHeightWithShadow: function _syncHeightWithShadow(newValue, e) {
@@ -115,0 +120,0 @@ var shadow = React.findDOMNode(this.refs.shadow);

lib/floating-action-button.js

@@ -132,2 +132,3 @@ 'use strict';
     var _props = this.props;
+    var disabled = _props.disabled;
     var icon = _props.icon;
@@ -137,3 +138,3 @@ var mini = _props.mini;
 
-    var other = _objectWithoutProperties(_props, ['icon', 'mini', 'secondary']);
+    var other = _objectWithoutProperties(_props, ['disabled', 'icon', 'mini', 'secondary']);
 
@@ -146,3 +147,3 @@ var styles = this.getStyles();
         className: this.props.iconClassName,
-        style: this.mergeAndPrefix(styles.icon, this.props.mini && styles.iconWhenMini, this.props.iconStyle) });
+        style: this.mergeAndPrefix(styles.icon, mini && styles.iconWhenMini, this.props.iconStyle) });
     }
@@ -152,2 +153,12 @@
 
+    var buttonEventHandlers = disabled ? null : {
+      onMouseDown: this._handleMouseDown,
+      onMouseUp: this._handleMouseUp,
+      onMouseOut: this._handleMouseOut,
+      onMouseOver: this._handleMouseOver,
+      onTouchStart: this._handleTouchStart,
+      onTouchEnd: this._handleTouchEnd,
+      onKeyboardFocus: this._handleKeyboardFocus
+    };
+
     return React.createElement(
@@ -161,14 +172,8 @@ Paper,
         EnhancedButton,
-        _extends({}, other, {
+        _extends({}, other, buttonEventHandlers, {
           ref: 'container',
+          disabled: disabled,
           style: this.mergeAndPrefix(styles.container, this.props.mini && styles.containerWhenMini),
-          onMouseDown: this._handleMouseDown,
-          onMouseUp: this._handleMouseUp,
-          onMouseOut: this._handleMouseOut,
-          onMouseOver: this._handleMouseOver,
-          onTouchStart: this._handleTouchStart,
-          onTouchEnd: this._handleTouchEnd,
           focusRippleColor: rippleColor,
-          touchRippleColor: rippleColor,
-          onKeyboardFocus: this._handleKeyboardFocus }),
+          touchRippleColor: rippleColor }),
         React.createElement(
@@ -175,0 +180,0 @@ 'div',

lib/font-icon.js

@@ -9,3 +9,2 @@ 'use strict';
 var StylePropable = require('./mixins/style-propable');
-var Spacing = require('./styles/spacing');
 var Transitions = require('./styles/transitions');
@@ -23,4 +22,6 @@
   propTypes: {
-    className: React.PropTypes.string,
-    hoverColor: React.PropTypes.string
+    color: React.PropTypes.string,
+    hoverColor: React.PropTypes.string,
+    onMouseOut: React.PropTypes.func,
+    onMouseOver: React.PropTypes.func
   },
@@ -34,21 +35,6 @@
 
-  getStyles: function getStyles() {
-    var theme = this.context.muiTheme.palette;
-    var styles = {
-      position: 'relative',
-      fontSize: Spacing.iconSize + 'px',
-      display: 'inline-block',
-      userSelect: 'none',
-      transition: Transitions.easeOut()
-    };
-
-    if (!styles.color && !this.props.className) {
-      styles.color = theme.textColor;
-    }
-
-    return styles;
-  },
-
   render: function render() {
     var _props = this.props;
+    var color = _props.color;
+    var hoverColor = _props.hoverColor;
     var onMouseOut = _props.onMouseOut;
@@ -58,10 +44,22 @@ var onMouseOver = _props.onMouseOver;
 
-    var other = _objectWithoutProperties(_props, ['onMouseOut', 'onMouseOver', 'style']);
+    var other = _objectWithoutProperties(_props, ['color', 'hoverColor', 'onMouseOut', 'onMouseOver', 'style']);
 
-    var hoverStyle = this.props.hoverColor ? { color: this.props.hoverColor } : {};
+    var spacing = this.context.muiTheme.spacing;
+    var offColor = color ? color : style && style.color ? style.color : this.context.muiTheme.palette.textColor;
+    var onColor = hoverColor ? hoverColor : offColor;
 
+    var mergedStyles = this.mergeAndPrefix({
+      position: 'relative',
+      fontSize: spacing.iconSize,
+      display: 'inline-block',
+      userSelect: 'none',
+      transition: Transitions.easeOut()
+    }, style, {
+      color: this.state.hovered ? onColor : offColor
+    });
+
     return React.createElement('span', _extends({}, other, {
       onMouseOut: this._handleMouseOut,
       onMouseOver: this._handleMouseOver,
-      style: this.mergeAndPrefix(this.getStyles(), this.props.style, this.state.hovered && hoverStyle) }));
+      style: mergedStyles }));
   },
@@ -68,0 +66,0 @@

lib/icon-button.js

@@ -58,15 +58,6 @@ 'use strict';
 
-  getTheme: function getTheme() {
-    return this.context.muiTheme.palette;
-  },
+  getStyles: function getStyles() {
+    var spacing = this.context.muiTheme.spacing;
+    var palette = this.context.muiTheme.palette;
 
-  getSpacing: function getSpacing() {
-    return this.context.muiTheme.spacing;
-  },
-
-  getDisabledColor: function getDisabledColor() {
-    return this.context.muiTheme.palette.disabledColor;
-  },
-
-  getStyles: function getStyles() {
     var styles = {
@@ -77,5 +68,5 @@ root: {
         transition: Transitions.easeOut(),
-        padding: this.getSpacing().iconSize / 2,
-        width: this.getSpacing().iconSize * 2,
-        height: this.getSpacing().iconSize * 2
+        padding: spacing.iconSize / 2,
+        width: spacing.iconSize * 2,
+        height: spacing.iconSize * 2
       },
@@ -87,4 +78,4 @@ tooltip: {
       icon: {
-        color: this.getTheme().textColor,
-        fill: this.getTheme().textColor
+        color: palette.textColor,
+        fill: palette.textColor
       },
@@ -96,11 +87,7 @@ overlay: {
         height: '100%',
-        background: this.getDisabledColor()
+        background: palette.disabledColor
       },
-      rootWhenDisabled: {
-        color: this.getDisabledColor(),
-        fill: this.getDisabledColor()
-      },
-      iconWhenDisabled: {
-        color: this.getDisabledColor(),
-        fill: this.getDisabledColor()
+      disabled: {
+        color: palette.disabledColor,
+        fill: palette.disabledColor
       }
@@ -113,8 +100,9 @@ };
     var _props = this.props;
+    var disabled = _props.disabled;
+    var iconClassName = _props.iconClassName;
     var tooltip = _props.tooltip;
     var touch = _props.touch;
 
-    var other = _objectWithoutProperties(_props, ['tooltip', 'touch']);
+    var other = _objectWithoutProperties(_props, ['disabled', 'iconClassName', 'tooltip', 'touch']);
 
-    var tooltipElement;
     var fonticon;
@@ -124,12 +112,10 @@
 
-    if (tooltip) {
-      tooltipElement = React.createElement(Tooltip, {
-        ref: 'tooltip',
-        label: tooltip,
-        show: this.state.tooltipShown,
-        touch: touch,
-        style: this.mergeStyles(styles.tooltip) });
-    }
+    var tooltipElement = tooltip ? React.createElement(Tooltip, {
+      ref: 'tooltip',
+      label: tooltip,
+      show: this.state.tooltipShown,
+      touch: touch,
+      style: this.mergeStyles(styles.tooltip) }) : null;
 
-    if (this.props.iconClassName) {
+    if (iconClassName) {
       var _props$iconStyle = this.props.iconStyle;
@@ -141,15 +127,8 @@ var iconHoverColor = _props$iconStyle.iconHoverColor;
       fonticon = React.createElement(FontIcon, {
-        className: this.props.iconClassName,
-        hoverColor: iconHoverColor,
-        style: this.mergeStyles(styles.icon, this.props.disabled && styles.iconWhenDisabled, iconStyle) });
+        className: iconClassName,
+        hoverColor: disabled ? null : iconHoverColor,
+        style: this.mergeStyles(styles.icon, disabled ? styles.disabled : {}, iconStyle) });
     }
 
-    if (this.props.children && this.props.disabled) {
-      React.Children.forEach(this.props.children, function (child) {
-        child.props.style = {
-          color: this.getDisabledColor(),
-          fill: this.getDisabledColor()
-        };
-      }, this);
-    }
+    var children = disabled ? this._addStylesToChildren(styles.disabled) : this.props.children;
 
@@ -161,2 +140,3 @@ return React.createElement(
         centerRipple: true,
+        disabled: disabled,
         style: this.mergeStyles(styles.root, this.props.style),
@@ -170,6 +150,19 @@ onBlur: this._handleBlur,
       fonticon,
-      this.props.children
+      children
     );
   },
 
+  _addStylesToChildren: function _addStylesToChildren(styles) {
+    var children = [];
+
+    React.Children.forEach(this.props.children, function (child) {
+      children.push(React.cloneElement(child, {
+        key: child.props.key ? child.props.key : children.length,
+        style: styles
+      }));
+    });
+
+    return children;
+  },
+
   _positionTooltip: function _positionTooltip() {
@@ -176,0 +169,0 @@ var tooltip = React.findDOMNode(this.refs.tooltip);

lib/index.js

@@ -8,2 +8,8 @@ 'use strict';
   BeforeAfterWrapper: require('./before-after-wrapper'),
+  Card: require('./card/card'),
+  CardActions: require('./card/card-actions'),
+  CardHeader: require('./card/card-header'),
+  CardMedia: require('./card/card-media'),
+  CardText: require('./card/card-text'),
+  CardTitle: require('./card/card-title'),
   Checkbox: require('./checkbox'),
@@ -40,2 +46,3 @@ CircularProgress: require('./circular-progress'),
   RaisedButton: require('./raised-button'),
+  SelectField: require('./select-field'),
   Slider: require('./slider'),
@@ -58,2 +65,3 @@ SvgIcon: require('./svg-icon'),
   Tab: require('./tabs/tab'),
+  Table: require('./table/table'),
   Tabs: require('./tabs/tabs'),
@@ -60,0 +68,0 @@ Theme: require('./theme'),

lib/lists/list-item.js

@@ -34,2 +34,3 @@ 'use strict';
     rightIcon: React.PropTypes.element,
+    rightIconButton: React.PropTypes.element,
     rightToggle: React.PropTypes.element,
@@ -48,3 +49,4 @@ secondaryText: React.PropTypes.node,
     return {
-      hovered: false
+      hovered: false,
+      rightIconButtonHovered: false
     };
@@ -64,2 +66,3 @@ },
     var rightIcon = _props.rightIcon;
+    var rightIconButton = _props.rightIconButton;
     var rightToggle = _props.rightToggle;
@@ -70,3 +73,3 @@ var secondaryText = _props.secondaryText;
 
-    var other = _objectWithoutProperties(_props, ['disableTouchTap', 'insetChildren', 'leftAvatar', 'leftCheckbox', 'leftIcon', 'onMouseOut', 'onMouseOver', 'rightAvatar', 'rightIcon', 'rightToggle', 'secondaryText', 'secondaryTextLines', 'style']);
+    var other = _objectWithoutProperties(_props, ['disableTouchTap', 'insetChildren', 'leftAvatar', 'leftCheckbox', 'leftIcon', 'onMouseOut', 'onMouseOver', 'rightAvatar', 'rightIcon', 'rightIconButton', 'rightToggle', 'secondaryText', 'secondaryTextLines', 'style']);
 
@@ -83,3 +86,3 @@ var textColor = this.context.muiTheme.palette.textColor;
       root: {
-        backgroundColor: this.state.hovered ? hoverColor : null,
+        backgroundColor: this.state.hovered && !this.state.rightIconButtonHovered ? hoverColor : null,
         color: textColor,
@@ -97,3 +100,3 @@ display: 'block',
         paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16,
-        paddingRight: rightIcon || rightAvatar ? 56 : rightToggle ? 72 : 16,
+        paddingRight: rightIcon || rightAvatar || rightIconButton ? 56 : rightToggle ? 72 : 16,
         paddingBottom: singleAvatar ? 20 : 16,
@@ -142,5 +145,16 @@ paddingTop: singleNoAvatar || threeLine ? 16 : 20
       leftCheckbox: {
-        left: 4
+        position: 'absolute',
+        display: 'block',
+        width: 24,
+        top: twoLine ? 24 : singleAvatar ? 16 : 12,
+        left: 16
       },
 
+      rightIconButton: {
+        position: 'absolute',
+        display: 'block',
+        top: twoLine ? 12 : singleAvatar ? 4 : 0,
+        right: 4
+      },
+
       rightToggle: {
@@ -185,3 +199,10 @@ position: 'absolute',
     this._pushElement(contentChildren, rightAvatar, this.mergeStyles(styles.avatars, styles.rightAvatar));
-    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.icons, styles.leftCheckbox));
+    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.leftCheckbox));
+    this._pushElement(contentChildren, rightIconButton, this.mergeStyles(styles.rightIconButton), {
+      onMouseOver: this._handleRightIconButtonMouseOver,
+      onMouseOut: this._handleRightIconButtonMouseOut,
+      onTouchTap: this._handleRightIconButtonTouchTap,
+      onMouseDown: this._handleRightIconButtonMouseUp,
+      onMouseUp: this._handleRightIconButtonMouseUp
+    });
     this._pushElement(contentChildren, rightToggle, this.mergeStyles(styles.rightToggle));
@@ -211,12 +232,44 @@
 
-  _pushElement: function _pushElement(children, element, baseStyles) {
+  _pushElement: function _pushElement(children, element, baseStyles, additionalProps) {
     if (element) {
       var styles = this.mergeStyles(baseStyles, element.props.style);
-      children.push(React.cloneElement(element, {
+      children.push(React.cloneElement(element, _extends({
         key: children.length,
         style: styles
-      }));
+      }, additionalProps)));
     }
   },
 
+  _handleRightIconButtonMouseDown: function _handleRightIconButtonMouseDown(e) {
+    var iconButton = this.props.rightIconButton;
+    e.stopPropagation();
+    if (iconButton.onMouseDown) iconButton.onDown(e);
+  },
+
+  _handleRightIconButtonMouseOut: function _handleRightIconButtonMouseOut(e) {
+    var iconButton = this.props.rightIconButton;
+    this.setState({ rightIconButtonHovered: false });
+    if (iconButton.onMouseOut) iconButton.onMouseOut(e);
+  },
+
+  _handleRightIconButtonMouseOver: function _handleRightIconButtonMouseOver(e) {
+    var iconButton = this.props.rightIconButton;
+    this.setState({ rightIconButtonHovered: true });
+    if (iconButton.onMouseOver) iconButton.onMouseOver(e);
+  },
+
+  _handleRightIconButtonMouseUp: function _handleRightIconButtonMouseUp(e) {
+    var iconButton = this.props.rightIconButton;
+    e.stopPropagation();
+    if (iconButton.onMouseUp) iconButton.onUp(e);
+  },
+
+  _handleRightIconButtonTouchTap: function _handleRightIconButtonTouchTap(e) {
+    var iconButton = this.props.rightIconButton;
+
+    //Stop the event from bubbling up to the list-item
+    e.stopPropagation();
+    if (iconButton.onTouchTap) iconButton.onTouchTap(e);
+  },
+
   _handleMouseOver: function _handleMouseOver(e) {
@@ -223,0 +276,0 @@ this.setState({ hovered: true });

lib/menu/link-menu-item.js

@@ -22,2 +22,3 @@ 'use strict';
     target: React.PropTypes.string,
+    active: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
@@ -29,2 +30,3 @@ className: React.PropTypes.string
     return {
+      active: false,
       disabled: false
@@ -77,3 +79,3 @@ };
 
-    var linkStyles = this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.state.hovered && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled);
+    var linkStyles = this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.props.selected && styles.rootWhenSelected, this.props.active && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled);
 
@@ -80,0 +82,0 @@ return React.createElement(

lib/menu/menu-item.js

@@ -41,3 +41,4 @@ 'use strict';
     onToggle: React.PropTypes.func,
-    selected: React.PropTypes.bool
+    selected: React.PropTypes.bool,
+    active: React.PropTypes.bool
   },
@@ -52,12 +53,7 @@
       toggle: false,
-      disabled: false
+      disabled: false,
+      active: false
     };
   },
 
-  getInitialState: function getInitialState() {
-    return {
-      hovered: false
-    };
-  },
-
   getTheme: function getTheme() {
@@ -179,4 +175,4 @@ return this.context.muiTheme.component.menuItem;
         onMouseOver: this._handleMouseOver,
-        onMouseOut: this._handleMouseOut,
-        style: this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.state.hovered && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled) },
+        onMouseOut: this._handleMouseOut, f: true,
+        style: this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.props.active && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled) },
       icon,
@@ -201,13 +197,10 @@ this.props.children,
   _handleMouseOver: function _handleMouseOver(e) {
-    this.setState({ hovered: true });
-    if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e);
+    if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index);
   },
 
   _handleMouseOut: function _handleMouseOut(e) {
-    this.setState({ hovered: false });
-    if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e);
+    if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e, this.props.index);
   }
-
 });
 
 module.exports = MenuItem;

lib/menu/menu.js

@@ -11,2 +11,3 @@ 'use strict';
 var KeyLine = require('../utils/key-line');
+var KeyCode = require('../utils/key-code');
 var StylePropable = require('../mixins/style-propable');
@@ -19,2 +20,3 @@ var Transitions = require('../styles/transitions');
 var SubheaderMenuItem = require('./subheader-menu-item');
+var WindowListenable = require('../mixins/window-listenable');
 
@@ -39,2 +41,3 @@ /***********************
     disabled: React.PropTypes.bool,
+    active: React.PropTypes.bool,
     onItemTap: React.PropTypes.func,
@@ -51,3 +54,6 @@ menuItemStyle: React.PropTypes.object
   getInitialState: function getInitialState() {
-    return { open: false };
+    return {
+      open: false,
+      activeIndex: 0
+    };
   },
@@ -61,2 +67,4 @@
     this._positionNestedMenu();
+    var el = this.getDOMNode();
+    el.focus();
   },
@@ -72,4 +80,42 @@
 
+  getStyles: function getStyles() {
+    var styles = {
+      root: {
+        userSelect: 'none',
+        cursor: 'pointer',
+        lineHeight: this.getTheme().height + 'px',
+        color: this.context.muiTheme.palette.textColor
+      },
+      icon: {
+        float: 'left',
+        lineHeight: this.getTheme().height + 'px',
+        marginRight: this.getSpacing().desktopGutter
+      },
+      toggle: {
+        marginTop: (this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2,
+        float: 'right',
+        width: 42
+      },
+      rootWhenHovered: {
+        backgroundColor: this.getTheme().hoverColor
+      },
+      rootWhenSelected: {
+        color: this.getTheme().selectedTextColor
+      },
+      rootWhenDisabled: {
+        cursor: 'default',
+        color: this.context.muiTheme.palette.disabledColor
+      }
+    };
+    return styles;
+  },
+
+  getTheme: function getTheme() {
+    return this.context.muiTheme.component.menuItem;
+  },
+
   render: function render() {
-    var styles = this.mergeAndPrefix({
+
+    var styles = this.getStyles();
+    styles = this.mergeAndPrefix(styles.root, this.props.active && !this.props.disabled && styles.rootWhenHovered, {
       position: 'relative'
@@ -91,3 +137,9 @@ }, this.props.style);
       'div',
-      { ref: 'root', style: styles, onMouseEnter: this._openNestedMenu, onMouseLeave: this._closeNestedMenu },
+      {
+        ref: 'root',
+        style: styles,
+        onMouseEnter: this._openNestedMenu,
+        onMouseLeave: this._closeNestedMenu,
+        onMouseOver: this._handleMouseOver,
+        onMouseOut: this._handleMouseOut },
       React.createElement(
@@ -111,2 +163,3 @@ MenuItem,
         visible: this.state.open,
+        onRequestClose: this._closeNestedMenu,
         zDepth: this.props.zDepth + 1 }))
@@ -116,6 +169,13 @@ );
 
+  toggleNestedMenu: function toggleNestedMenu() {
+    if (!this.props.disabled) this.setState({ open: !this.state.open });
+  },
+
+  isOpen: function isOpen() {
+    return this.state.open;
+  },
+
   _positionNestedMenu: function _positionNestedMenu() {
     var el = React.findDOMNode(this);
     var nestedMenu = React.findDOMNode(this.refs.nestedMenu);
-
     nestedMenu.style.left = el.offsetWidth + 'px';
@@ -130,10 +190,7 @@ },
     this.setState({ open: false });
+    React.findDOMNode(this).focus();
   },
 
-  _toggleNestedMenu: function _toggleNestedMenu() {
-    if (!this.props.disabled) this.setState({ open: !this.state.open });
-  },
-
   _onParentItemTap: function _onParentItemTap() {
-    this._toggleNestedMenu();
+    this.toggleNestedMenu();
   },
@@ -144,2 +201,9 @@
     this._closeNestedMenu();
+  },
+  _handleMouseOver: function _handleMouseOver(e) {
+    if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index);
+  },
+
+  _handleMouseOut: function _handleMouseOut(e) {
+    if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e, this.props.index);
   }
@@ -165,2 +229,3 @@
     onToggle: React.PropTypes.func,
+    onRequestClose: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
@@ -180,3 +245,6 @@ selectedIndex: React.PropTypes.number,
   getInitialState: function getInitialState() {
-    return { nestedMenuShown: false };
+    return {
+      nestedMenuShown: false,
+      activeIndex: 0
+    };
   },
@@ -189,3 +257,4 @@
       visible: true,
-      zDepth: 1
+      zDepth: 1,
+      onRequestClose: function onRequestClose() {}
     };
@@ -225,3 +294,4 @@ },
         paddingBottom: this.getSpacing().desktopGutterMini,
-        transition: Transitions.easeOut(null, 'height')
+        transition: Transitions.easeOut(null, 'height'),
+        outline: 'none !important'
       },
@@ -249,2 +319,4 @@ subheader: {
         ref: 'paperContainer',
+        tabIndex: '0',
+        onKeyDown: this._onKeyDown,
         zDepth: this.props.zDepth,
@@ -257,10 +329,7 @@ style: this.mergeAndPrefix(styles.root, this.props.hideable && styles.hideable, this.props.style) },
   _getChildren: function _getChildren() {
-    var children = [],
-        menuItem,
-        itemComponent,
-        isSelected,
-        isDisabled;
+    var menuItem, itemComponent, isSelected, isDisabled;
 
     var styles = this.getStyles();
 
+    this._children = [];
     //This array is used to keep track of all nested menu refs
@@ -289,2 +358,3 @@ this._nestedChildren = [];
             index: i,
+            active: this.state.activeIndex == i,
             text: menuItem.text,
@@ -320,2 +390,4 @@ disabled: isDisabled,
             index: i,
+            nested: true,
+            active: this.state.activeIndex == i,
             text: menuItem.text,
@@ -326,2 +398,4 @@ disabled: isDisabled,
             zDepth: this.props.zDepth,
+            onMouseOver: this._onItemActivated,
+            onMouseOut: this._onItemDeactivated,
             onItemTap: this._onNestedItemTap }));
@@ -338,2 +412,3 @@ this._nestedChildren.push(i);
               index: i,
+              active: this.state.activeIndex == i,
               icon: menuItem.icon,
@@ -348,10 +423,13 @@ data: menuItem.data,
               disabled: isDisabled,
-              onTouchTap: this._onItemTap }),
+              onTouchTap: this._onItemTap,
+              onMouseOver: this._onItemActivated,
+              onMouseOut: this._onItemDeactivated
+            }),
             menuItem.text
           );
       }
-      children.push(itemComponent);
+      this._children.push(itemComponent);
     }
 
-    return children;
+    return this._children;
   },
@@ -393,2 +471,3 @@
           if (this.props.visible) container.style.overflow = 'visible';
+          el.focus();
         }).bind(this));
@@ -416,2 +495,72 @@ } else {
     if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled);
+  },
+  _onItemActivated: function _onItemActivated(e, index) {
+    this.setState({ activeIndex: index });
+  },
+  _onItemDeactivated: function _onItemDeactivated(e, index) {
+    if (this.state.activeKey == index) this.setState({ activeIndex: 0 });
+  },
+
+  _onKeyDown: function _onKeyDown(e) {
+    if (!(this.state.open || this.props.visible)) return;
+
+    var nested = this._children[this.state.activeIndex];
+    if (nested && nested.props.nested && this.refs[this.state.activeIndex].isOpen()) return;
+
+    switch (e.which) {
+      case KeyCode.UP:
+        this._activatePreviousItem();
+        break;
+      case KeyCode.DOWN:
+        this._activateNextItem();
+        break;
+      case KeyCode.RIGHT:
+        this._tryToggleNested(this.state.activeIndex);
+        break;
+      case KeyCode.LEFT:
+        this._close();
+        break;
+      case KeyCode.ESC:
+        this._close();
+        break;
+      case KeyCode.TAB:
+        this._close();
+        return; // so the tab key can propagate
+      case KeyCode.ENTER:
+      case KeyCode.SPACE:
+        e.stopPropagation(); // needs called before the close
+        this._triggerSelection(e);
+        break;
+      default:
+        return; //important
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  },
+
+  _activatePreviousItem: function _activatePreviousItem() {
+    var active = this.state.activeIndex || 0;
+    active = Math.max(active - 1, 0);
+    this.setState({ activeIndex: active });
+  },
+
+  _activateNextItem: function _activateNextItem() {
+    var active = this.state.activeIndex || 0;
+    active = Math.min(active + 1, this._children.length - 1);
+    this.setState({ activeIndex: active });
+  },
+
+  _triggerSelection: function _triggerSelection(e) {
+    var index = this.state.activeIndex || 0;
+    this._onItemTap(e, index);
+  },
+
+  _close: function _close() {
+    this.props.onRequestClose();
+  },
+
+  _tryToggleNested: function _tryToggleNested(index) {
+    var item = this.refs[index];
+    var toggleMenu = item.toggleNestedMenu;
+    if (item && item.toggleNestedMenu) item.toggleNestedMenu();
   }
@@ -418,0 +567,0 @@

lib/radio-button.js

@@ -25,2 +25,3 @@ 'use strict';
     iconStyle: React.PropTypes.object,
+    labelStyle: React.PropTypes.object,
     onCheck: React.PropTypes.func
@@ -67,2 +68,5 @@ },
         fill: this.getTheme().disabledColor
+      },
+      label: {
+        color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
       }
@@ -94,2 +98,4 @@ };
 
+    var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle);
+
     var enhancedSwitchProps = {
@@ -102,2 +108,3 @@ ref: 'enhancedSwitch',
       iconStyle: iconStyle,
+      labelStyle: labelStyle,
       onSwitch: this._handleCheck,
@@ -104,0 +111,0 @@ onParentShouldUpdate: this._handleStateChange,

lib/raised-button.js

@@ -125,2 +125,3 @@ 'use strict';
     var _props = this.props;
+    var disabled = _props.disabled;
     var label = _props.label;
@@ -130,3 +131,3 @@ var primary = _props.primary;
 
-    var other = _objectWithoutProperties(_props, ['label', 'primary', 'secondary']);
+    var other = _objectWithoutProperties(_props, ['disabled', 'label', 'primary', 'secondary']);
 
@@ -147,2 +148,12 @@ var styles = this.getStyles();
 
+    var buttonEventHandlers = disabled ? null : {
+      onMouseDown: this._handleMouseDown,
+      onMouseUp: this._handleMouseUp,
+      onMouseOut: this._handleMouseOut,
+      onMouseOver: this._handleMouseOver,
+      onTouchStart: this._handleTouchStart,
+      onTouchEnd: this._handleTouchEnd,
+      onKeyboardFocus: this._handleKeyboardFocus
+    };
+
     return React.createElement(
@@ -155,16 +166,10 @@ Paper,
         EnhancedButton,
-        _extends({}, other, {
+        _extends({}, other, buttonEventHandlers, {
           ref: 'container',
+          disabled: disabled,
           style: this.mergeAndPrefix(styles.container),
-          onMouseUp: this._handleMouseUp,
-          onMouseDown: this._handleMouseDown,
-          onMouseOut: this._handleMouseOut,
-          onMouseOver: this._handleMouseOver,
-          onTouchStart: this._handleTouchStart,
-          onTouchEnd: this._handleTouchEnd,
           focusRippleColor: rippleColor,
           touchRippleColor: rippleColor,
           focusRippleOpacity: rippleOpacity,
-          touchRippleOpacity: rippleOpacity,
-          onKeyboardFocus: this._handleKeyboardFocus }),
+          touchRippleOpacity: rippleOpacity }),
         React.createElement(
@@ -171,0 +176,0 @@ 'div',

lib/slider.js

@@ -39,2 +39,3 @@ 'use strict';
       defaultValue: 0,
+      step: 0.01,
       min: 0,
@@ -241,2 +242,3 @@ max: 1,
               start: { x: percent * 100 + '%' },
+              constrain: this._constrain(),
               onStart: this._onDragStart,
@@ -284,3 +286,3 @@ onStop: this._onDragStop,
   setPercent: function setPercent(percent) {
-    var value = this._percentToValue(percent);
+    var value = this._alignValue(this._percentToValue(percent));
     this.setState({ value: value, percent: percent });
@@ -293,2 +295,46 @@ },
 
+  _alignValue: function _alignValue(val) {
+    var _props = this.props;
+    var step = _props.step;
+    var min = _props.min;
+
+    var valModStep = (val - min) % step;
+    var alignValue = val - valModStep;
+
+    if (Math.abs(valModStep) * 2 >= step) {
+      alignValue += valModStep > 0 ? step : -step;
+    }
+
+    return parseFloat(alignValue.toFixed(5));
+  },
+
+  _constrain: function _constrain() {
+    var _this = this;
+
+    var _props2 = this.props;
+    var min = _props2.min;
+    var max = _props2.max;
+    var step = _props2.step;
+
+    return function (pos) {
+      var pixelMax = React.findDOMNode(_this.refs.track).clientWidth;
+      var pixelStep = pixelMax / ((max - min) / step);
+
+      var cursor = min;
+      var i;
+      for (i = 0; i < (max - min) / step; i++) {
+        var distance = pos.left - cursor;
+        var nextDistance = cursor + pixelStep - pos.left;
+        if (Math.abs(distance) > Math.abs(nextDistance)) {
+          cursor += pixelStep;
+        } else {
+          break;
+        }
+      }
+      return {
+        left: cursor
+      };
+    };
+  },
+
   _onFocus: function _onFocus(e) {
@@ -350,3 +396,3 @@ this.setState({ focused: true });
     this.setPercent(percent);
-    var value = this._percentToValue(percent);
+    var value = this._alignValue(this._percentToValue(percent));
     if (this.props.onChange) this.props.onChange(e, value);
@@ -353,0 +399,0 @@ },

lib/styles/theme-manager.js

 'use strict';
 
-var Spacing = require('./spacing');
 var Extend = require('../utils/extend');
@@ -16,3 +15,3 @@
 
-    spacing: Spacing,
+    spacing: Types.LIGHT.spacing,
     contentFontFamily: 'Roboto, sans-serif',
@@ -29,2 +28,3 @@
     setTheme: function setTheme(newTheme) {
+      this.setSpacing(newTheme.spacing);
       this.setPalette(newTheme.getPalette());
@@ -34,2 +34,7 @@ this.setComponentThemes(newTheme.getComponentThemes(newTheme.getPalette()));
 
+    setSpacing: function setSpacing(newSpacing) {
+      this.spacing = Extend(this.spacing, newSpacing);
+      this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing));
+    },
+
     setPalette: function setPalette(newPalette) {
@@ -36,0 +41,0 @@ this.palette = Extend(this.palette, newPalette);

lib/styles/themes/light-theme.js

@@ -30,3 +30,4 @@ 'use strict';
   },
-  getComponentThemes: function getComponentThemes(palette) {
+  getComponentThemes: function getComponentThemes(palette, spacing) {
+    spacing = spacing || Spacing;
     var obj = {
@@ -36,3 +37,3 @@ appBar: {
         textColor: Colors.darkWhite,
-        height: Spacing.desktopKeylineIncrement
+        height: spacing.desktopKeylineIncrement
       },
@@ -42,3 +43,3 @@ button: {
         minWidth: 88,
-        iconButtonSize: Spacing.iconSize * 2
+        iconButtonSize: spacing.iconSize * 2
       },
@@ -49,3 +50,5 @@ checkbox: {
         requiredColor: palette.primary1Color,
-        disabledColor: palette.disabledColor
+        disabledColor: palette.disabledColor,
+        labelColor: palette.textColor,
+        labelDisabledColor: palette.disabledColor
       },
@@ -77,3 +80,3 @@ datePicker: {
       leftNav: {
-        width: Spacing.desktopKeylineIncrement * 4,
+        width: spacing.desktopKeylineIncrement * 4,
         color: Colors.white
@@ -89,7 +92,7 @@ },
         hoverColor: 'rgba(0, 0, 0, .035)',
-        padding: Spacing.desktopGutter,
+        padding: spacing.desktopGutter,
         selectedTextColor: palette.accent1Color
       },
       menuSubheader: {
-        padding: Spacing.desktopGutter,
+        padding: spacing.desktopGutter,
         borderColor: palette.borderColor,
@@ -107,3 +110,5 @@ textColor: palette.primary1Color
         disabledColor: palette.disabledColor,
-        size: 24
+        size: 24,
+        labelColor: palette.textColor,
+        labelDisabledColor: palette.disabledColor
       },
@@ -134,2 +139,28 @@ raisedButton: {
       },
+      table: {
+        backgroundColor: Colors.white
+      },
+      tableHeader: {
+        borderColor: palette.borderColor
+      },
+      tableHeaderColumn: {
+        textColor: Colors.lightBlack,
+        height: 56,
+        spacing: 28
+      },
+      tableFooter: {
+        borderColor: palette.borderColor,
+        textColor: Colors.lightBlack
+      },
+      tableRow: {
+        hoverColor: Colors.grey200,
+        stripeColor: ColorManipulator.lighten(palette.primary1Color, 0.55),
+        selectedColor: Colors.grey300,
+        textColor: Colors.darkBlack,
+        borderColor: palette.borderColor
+      },
+      tableRowColumn: {
+        height: 48,
+        spacing: 28
+      },
       timePicker: {
@@ -150,3 +181,5 @@ color: Colors.white,
         trackOffColor: Colors.minBlack,
-        trackDisabledColor: Colors.faintBlack
+        trackDisabledColor: Colors.faintBlack,
+        labelColor: palette.textColor,
+        labelDisabledColor: palette.disabledColor
       },
@@ -163,2 +196,12 @@ toolbar: {
         backgroundColor: palette.primary1Color
+      },
+      textField: {
+        textColor: palette.textColor,
+        hintColor: palette.disabledColor,
+        floatingLabelColor: palette.textColor,
+        disabledTextColor: palette.disabledColor,
+        errorColor: Colors.red500,
+        focusColor: palette.primary1Color,
+        backgroundColor: 'transparent',
+        borderColor: palette.borderColor
       }
@@ -165,0 +208,0 @@ };

lib/svg-icon.js

@@ -9,2 +9,3 @@ 'use strict';
 var StylePropable = require('./mixins/style-propable');
+var Transitions = require('./styles/transitions');
 
@@ -21,5 +22,15 @@ var SvgIcon = React.createClass({
   propTypes: {
+    color: React.PropTypes.string,
+    hoverColor: React.PropTypes.string,
+    onMouseOut: React.PropTypes.func,
+    onMouseOver: React.PropTypes.func,
     viewBox: React.PropTypes.string
   },
 
+  getInitialState: function getInitialState() {
+    return {
+      hovered: false
+    };
+  },
+
   getDefaultProps: function getDefaultProps() {
@@ -33,13 +44,23 @@ return {
     var _props = this.props;
+    var color = _props.color;
+    var hoverColor = _props.hoverColor;
     var viewBox = _props.viewBox;
     var style = _props.style;
 
-    var other = _objectWithoutProperties(_props, ['viewBox', 'style']);
+    var other = _objectWithoutProperties(_props, ['color', 'hoverColor', 'viewBox', 'style']);
 
+    var offColor = color ? color : style && style.fill ? style.fill : this.context.muiTheme.palette.textColor;
+    var onColor = hoverColor ? hoverColor : offColor;
+
+    //remove the fill prop so that it doesn't override our computed
+    //fill from above
+    if (style) delete style.fill;
+
     var mergedStyles = this.mergeAndPrefix({
       display: 'inline-block',
-      height: '24px',
-      width: '24px',
+      height: 24,
+      width: 24,
       userSelect: 'none',
-      fill: this.context.muiTheme.palette.textColor
+      transition: Transitions.easeOut(),
+      fill: this.state.hovered ? onColor : offColor
     }, style);
@@ -50,6 +71,22 @@
       _extends({}, other, {
-        viewBox: viewBox,
-        style: mergedStyles }),
+        onMouseOut: this._handleMouseOut,
+        onMouseOver: this._handleMouseOver,
+        style: mergedStyles,
+        viewBox: viewBox }),
       this.props.children
     );
+  },
+
+  _handleMouseOut: function _handleMouseOut(e) {
+    this.setState({ hovered: false });
+    if (this.props.onMouseOut) {
+      this.props.onMouseOut(e);
+    }
+  },
+
+  _handleMouseOver: function _handleMouseOver(e) {
+    this.setState({ hovered: true });
+    if (this.props.onMouseOver) {
+      this.props.onMouseOver(e);
+    }
   }
@@ -56,0 +93,0 @@ });

lib/tabs/tabs.js

@@ -21,3 +21,4 @@ 'use strict';
     onActive: React.PropTypes.func,
-    tabWidth: React.PropTypes.number
+    tabWidth: React.PropTypes.number,
+    tabItemContainerStyle: React.PropTypes.object
   },
@@ -24,0 +25,0 @@

lib/text-field.js

@@ -9,3 +9,2 @@ 'use strict';
 var ColorManipulator = require('./utils/color-manipulator');
-var Colors = require('./styles/colors');
 var StylePropable = require('./mixins/style-propable');
@@ -52,8 +51,14 @@ var Transitions = require('./styles/transitions');
   getInitialState: function getInitialState() {
+    var props = this.props;
+    if (props.children) props = props.children.props;
     return {
       errorText: this.props.errorText,
-      hasValue: this.props.value || this.props.defaultValue || this.props.valueLink && this.props.valueLink.value
+      hasValue: props.value || props.defaultValue || props.valueLink && props.valueLink.value
     };
   },
 
+  getTheme: function getTheme() {
+    return this.context.muiTheme.component.textField;
+  },
+
   componentDidMount: function componentDidMount() {
@@ -65,11 +70,17 @@ this._uniqueId = UniqueId.generate();
     var hasErrorProp = nextProps.hasOwnProperty('errorText');
+    var newState = {};
+
+    if (hasErrorProp) newState.errorText = nextProps.errorText;
+    if (nextProps.children && nextProps.children.props) {
+      nextProps = nextProps.children.props;
+    }
+
     var hasValueLinkProp = nextProps.hasOwnProperty('valueLink');
     var hasValueProp = nextProps.hasOwnProperty('value');
     var hasNewDefaultValue = nextProps.defaultValue !== this.props.defaultValue;
-    var newState = {};
 
-    if (hasValueProp) {
+    if (hasValueLinkProp) {
+      newState.hasValue = nextProps.valueLink.value;
+    } else if (hasValueProp) {
       newState.hasValue = nextProps.value;
-    } else if (hasValueLinkProp) {
-      newState.hasValue = nextProps.valueLink.value;
     } else if (hasNewDefaultValue) {
@@ -79,12 +90,8 @@ newState.hasValue = nextProps.defaultValue;
 
-    if (hasErrorProp) newState.errorText = nextProps.errorText;
     if (newState) this.setState(newState);
   },
 
-  errorColor: Colors.red500,
-
   getStyles: function getStyles() {
-    var palette = this.context.muiTheme.palette;
-    var disabledTextColor = palette.disabledColor;
     var props = this.props;
+    var theme = this.getTheme();
 
@@ -107,3 +114,3 @@ var styles = {
         lineHeight: '12px',
-        color: this.errorColor,
+        color: theme.errorColor,
         transition: Transitions.easeOut()
@@ -115,3 +122,3 @@ },
         opacity: 1,
-        color: disabledTextColor,
+        color: theme.hintColor,
         transition: Transitions.easeOut()
@@ -126,4 +133,4 @@ },
         outline: 'none',
-        backgroundColor: 'transparent',
-        color: props.disabled ? disabledTextColor : palette.textColor,
+        backgroundColor: theme.backgroundColor,
+        color: props.disabled ? theme.disabledTextColor : theme.textColor,
         font: 'inherit'
@@ -133,3 +140,3 @@ },
         border: 'none',
-        borderBottom: 'solid 1px ' + palette.borderColor,
+        borderBottom: 'solid 1px ' + theme.borderColor,
         position: 'absolute',
@@ -149,4 +156,4 @@ width: '100%',
         cursor: 'default',
-        bottom: 0,
-        color: disabledTextColor
+        bottom: 8,
+        borderBottom: 'dotted 2px ' + theme.disabledTextColor
       }
@@ -171,3 +178,3 @@ };
       borderBottom: 'solid 2px',
-      borderColor: palette.primary1Color,
+      borderColor: theme.focusColor,
       transform: 'scaleX(0)',
@@ -178,3 +185,3 @@ transition: Transitions.easeOut()
     if (this.state.isFocused) {
-      styles.floatingLabel.color = palette.primary1Color;
+      styles.floatingLabel.color = theme.focusColor;
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)';
@@ -185,3 +192,3 @@ styles.focusUnderline.transform = 'scaleX(1)';
     if (this.state.hasValue) {
-      styles.floatingLabel.color = ColorManipulator.fade(palette.textColor, 0.5);
+      styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? theme.disabledTextColor : theme.floatingLabelColor, 0.5);
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)';
@@ -198,7 +205,11 @@ styles.hint.opacity = 0;
 
-    if (props.errorText && this.state.isFocused) styles.floatingLabel.color = this.errorColor;
+    if (props.style && props.style.height) {
+      styles.hint.lineHeight = props.style.height;
+    }
+
+    if (this.state.errorText && this.state.isFocused) styles.floatingLabel.color = theme.errorColor;
     if (props.floatingLabelText && !props.multiLine) styles.input.paddingTop = 26;
 
-    if (props.errorText) {
-      styles.focusUnderline.borderColor = this.errorColor;
+    if (this.state.errorText) {
+      styles.focusUnderline.borderColor = theme.errorColor;
       styles.focusUnderline.transform = 'scaleX(1)';
@@ -260,2 +271,3 @@ }
       onFocus: this._handleInputFocus,
+      disabled: this.props.disabled,
       onKeyDown: this._handleInputKeyDown
@@ -267,14 +279,13 @@ };
     }
+    if (this.props.children) {
+      inputElement = React.cloneElement(this.props.children, _extends({}, inputProps, this.props.children.props));
+    } else {
+      inputElement = this.props.multiLine ? React.createElement(EnhancedTextarea, _extends({}, other, inputProps, {
+        rows: this.props.rows,
+        onHeightChange: this._handleTextAreaHeightChange,
+        textareaStyle: this.mergeAndPrefix(styles.textarea) })) : React.createElement('input', _extends({}, other, inputProps, {
+        type: this.props.type }));
+    }
 
-    inputElement = this.props.multiLine ? React.createElement(EnhancedTextarea, _extends({}, other, inputProps, {
-      rows: this.props.rows,
-      onHeightChange: this._handleTextAreaHeightChange,
-      textareaStyle: this.mergeAndPrefix(styles.textarea) })) : React.createElement('input', _extends({}, other, inputProps, {
-      type: this.props.type }));
-
-    var underlineElement = this.props.disabled ? React.createElement(
-      'div',
-      { style: this.mergeAndPrefix(styles.underlineAfter) },
-      '....................................................................................'
-    ) : React.createElement('hr', { style: this.mergeAndPrefix(styles.underline) });
+    var underlineElement = this.props.disabled ? React.createElement('div', { style: this.mergeAndPrefix(styles.underlineAfter) }) : React.createElement('hr', { style: this.mergeAndPrefix(styles.underline) });
     var focusUnderlineElement = React.createElement('hr', { style: this.mergeAndPrefix(styles.focusUnderline) });
@@ -322,3 +333,9 @@
     } else if (this.isMounted()) {
-      this._getInputNode().value = newValue;
+
+      if (this.props.multiLine) {
+        this.refs[this._getRef()].setValue(newValue);
+      } else {
+        this._getInputNode().value = newValue;
+      }
+
       this.setState({ hasValue: newValue });
@@ -333,3 +350,3 @@ }
   _getInputNode: function _getInputNode() {
-    return this.props.multiLine ? this.refs[this._getRef()].getInputNode() : React.findDOMNode(this.refs[this._getRef()]);
+    return this.props.children || this.props.multiLine ? this.refs[this._getRef()].getInputNode() : React.findDOMNode(this.refs[this._getRef()]);
   },
@@ -348,2 +365,3 @@
   _handleInputFocus: function _handleInputFocus(e) {
+    if (this.props.disabled) return;
     this.setState({ isFocused: true });
@@ -350,0 +368,0 @@ if (this.props.onFocus) this.props.onFocus(e);

lib/time-picker/clock-hours.js

@@ -12,2 +12,14 @@ 'use strict';
 
+function getTouchEventOffsetValues(e) {
+  var el = e.target;
+  var boundingRect = el.getBoundingClientRect();
+
+  var offset = {
+    offsetX: e.clientX - boundingRect.left,
+    offsetY: e.clientY - boundingRect.top
+  };
+
+  return offset;
+}
+
 var ClockHours = React.createClass({
@@ -57,3 +69,3 @@ displayName: 'ClockHours',
     e.preventDefault();
-    this.setClock(e, true);
+    this.setClock(e.nativeEvent, true);
   },
@@ -63,17 +75,21 @@ handleMove: function handleMove(e) {
     if (this.isMousePressed(e) != 1) return;
-    this.setClock(e, false);
+    this.setClock(e.nativeEvent, false);
   },
-  handleTouch: function handleTouch(e) {
+  handleTouchMove: function handleTouchMove(e) {
     e.preventDefault();
-    this.setClock(e, false);
+    this.setClock(e.changedTouches[0], false);
   },
+  handleTouchEnd: function handleTouchEnd(e) {
+    e.preventDefault();
+    this.setClock(e.changedTouches[0], true);
+  },
   setClock: function setClock(e, finish) {
-    var ne = e.nativeEvent;
+    if (typeof e.offsetX === 'undefined') {
+      var offset = getTouchEventOffsetValues(e);
 
-    var pos = {
-      x: ne.offsetX === undefined ? ne.layerX : ne.offsetX,
-      y: ne.offsetY === undefined ? ne.layerY : ne.offsetY
-    };
+      e.offsetX = offset.offsetX;
+      e.offsetY = offset.offsetY;
+    }
 
-    var hours = this.getHours(pos.x, pos.y);
+    var hours = this.getHours(e.offsetX, e.offsetY);
 
@@ -172,3 +188,3 @@ this.props.onChange(hours, finish);
       numbers,
-      React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), onTouchMove: this.handleTouch, onTouchEnd: this.handleUp, onMouseUp: this.handleUp, onMouseMove: this.handleMove })
+      React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onMouseUp: this.handleUp, onMouseMove: this.handleMove })
     );
@@ -175,0 +191,0 @@ }

lib/time-picker/clock-minutes.js

@@ -13,2 +13,14 @@ 'use strict';
 
+function getTouchEventOffsetValues(e) {
+  var el = e.target;
+  var boundingRect = el.getBoundingClientRect();
+
+  var offset = {
+    offsetX: e.clientX - boundingRect.left,
+    offsetY: e.clientY - boundingRect.top
+  };
+
+  return offset;
+}
+
 var ClockMinutes = React.createClass({
@@ -59,3 +71,3 @@ displayName: 'ClockMinutes',
     e.preventDefault();
-    this.setClock(e, true);
+    this.setClock(e.nativeEvent, true);
   },
@@ -65,22 +77,18 @@ handleMove: function handleMove(e) {
     if (this.isMousePressed(e) != 1) return;
-    this.setClock(e, false);
+    this.setClock(e.nativeEvent, false);
   },
   handleTouch: function handleTouch(e) {
     e.preventDefault();
-    this.setClock(e, false);
+    this.setClock(e.changedTouches[0], false);
   },
   setClock: function setClock(e, finish) {
+    if (typeof e.offsetX === 'undefined') {
+      var offset = getTouchEventOffsetValues(e);
 
-    e.preventDefault();
-    if (this.isMousePressed(e) != 1) return;
+      e.offsetX = offset.offsetX;
+      e.offsetY = offset.offsetY;
+    }
 
-    var ne = e.nativeEvent;
+    var minutes = this.getMinutes(e.offsetX, e.offsetY);
 
-    var pos = {
-      x: ne.offsetX === undefined ? ne.layerX : ne.offsetX,
-      y: ne.offsetY === undefined ? ne.layerY : ne.offsetY
-    };
-
-    var minutes = this.getMinutes(pos.x, pos.y);
-
     this.props.onChange(minutes, finish);
@@ -155,3 +163,3 @@ },
       minutes.numbers,
-      React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), hasSelected: minutes.hasSelected, onTouchMove: this.handleTouch, onTouchEnd: this.handleUp, onMouseUp: this.handleUp, onMouseMove: this.handleMove })
+      React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), hasSelected: minutes.hasSelected, onTouchMove: this.handleTouch, onTouchEnd: this.handleTouch, onMouseUp: this.handleUp, onMouseMove: this.handleMove })
     );
@@ -158,0 +166,0 @@ }

lib/time-picker/clock-number.js

@@ -92,3 +92,3 @@ 'use strict';
       'span',
-      { style: styles.root },
+      { style: this.mergeAndPrefix(styles.root) },
       this.props.value
@@ -95,0 +95,0 @@ );

lib/time-picker/clock-pointer.js

@@ -102,3 +102,3 @@ 'use strict';
       'div',
-      { style: styles.root },
+      { style: this.mergeAndPrefix(styles.root) },
       React.createElement('div', { style: styles.mark })
@@ -105,0 +105,0 @@ );

lib/time-picker/time-picker.js

@@ -128,2 +128,4 @@ 'use strict';
   _handleInputTouchTap: function _handleInputTouchTap(e) {
+    e.preventDefault();
+
     this.setState({
@@ -130,0 +132,0 @@ dialogTime: this.getTime()

lib/toggle.js

@@ -24,2 +24,3 @@ 'use strict';
     elementStyle: React.PropTypes.object,
+    labelStyle: React.PropTypes.object,
     onToggle: React.PropTypes.func,
@@ -45,7 +46,11 @@ toggled: React.PropTypes.bool,
       icon: {
+        width: 36,
         padding: '4px 0px 6px 2px'
       },
+      toggleElemet: {
+        width: toggleTrackWidth
+      },
       track: {
         transition: Transitions.easeOut(),
-        width: toggleTrackWidth,
+        width: '100%',
         height: 14,
@@ -59,3 +64,3 @@ borderRadius: 30,
         top: 1,
-        left: 2,
+        left: 0,
         width: toggleSize,
@@ -72,3 +77,3 @@ height: toggleSize,
         backgroundColor: this.getTheme().thumbOnColor,
-        left: 18
+        left: '100%'
       },
@@ -80,2 +85,5 @@ trackWhenDisabled: {
         backgroundColor: this.getTheme().thumbDisabledColor
+      },
+      label: {
+        color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
       }
@@ -98,5 +106,11 @@ };
 
+    if (this.state.switched) {
+      thumbStyles.marginLeft = '-' + thumbStyles.width;
+    }
+
+    var toggleElemetStyles = this.mergeAndPrefix(styles.toggleElemet, this.props.elementStyle);
+
     var toggleElement = React.createElement(
       'div',
-      { style: this.mergeAndPrefix(this.props.elementStyle) },
+      { style: toggleElemetStyles },
       React.createElement('div', { style: trackStyles }),
@@ -106,6 +120,6 @@ React.createElement(Paper, { style: thumbStyles, circle: true, zDepth: 1 })
 
-    var customRippleStyle = {
+    var customRippleStyle = this.mergeAndPrefix({
       top: '-10',
       left: '-10'
-    };
+    }, this.props.rippleStyle);
 
@@ -116,2 +130,4 @@ var rippleColor = this.state.switched ? this.getTheme().thumbOnColor : this.context.muiTheme.component.textColor;
 
+    var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle);
+
     var enhancedSwitchProps = {
@@ -126,2 +142,3 @@ ref: 'enhancedSwitch',
       thumbStyle: thumbStyles,
+      labelStyle: labelStyle,
       switched: this.state.switched,
@@ -128,0 +145,0 @@ onSwitch: this._handleToggle,

lib/toolbar/toolbar-group.js

@@ -92,2 +92,5 @@ 'use strict';
     var newChildren = React.Children.map(this.props.children, function (currentChild) {
+      if (!currentChild) {
+        return null;
+      }
       switch (currentChild.type.displayName) {
@@ -94,0 +97,0 @@ case 'DropDownMenu':

package.json

 {
   "name": "material-ui",
   "author": "Call-em-all Engineering Team",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Material Design UI components built with React",
@@ -10,4 +10,4 @@ "main": "./lib",
     "prebuild": "rm -rf lib",
-    "jshint": "./node_modules/.bin/jsxhint --harmony 'src/**' --exclude src/utils/modernizr.custom.js",
-    "build": "npm run jshint && ./node_modules/.bin/babel --stage 1 ./src --out-dir ./lib",
+    "jshint": "jsxhint --harmony src/** --exclude src/utils/modernizr.custom.js",
+    "build": "npm run jshint && babel --stage 1 ./src --out-dir ./lib",
     "prepublish": "npm run build"
@@ -14,0 +14,0 @@ },

README.md

@@ -56,3 +56,3 @@ #[Material-UI](http://callemall.github.io/material-ui/)
 
-  getChildContext() {
+  getChildContext: function() {
     return {
@@ -59,0 +59,0 @@ muiTheme: ThemeManager.getCurrentTheme()

src/app-bar.jsx

@@ -39,6 +39,9 @@ var React = require('react');
     if (process.env.NODE_ENV !== 'production' &&
-       (this.props.iconElementLeft && this.props.iconClassNameLeft)) {
-        var warning = 'Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' +
-                      'defined. Please use one or the other.';
-        console.warn(warning);
+      this.props.iconElementLeft &&
+      this.props.iconClassNameLeft) {
+
+      console.warn(
+        'Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' +
+        'defined. Please use one or the other.'
+      );
     }
@@ -55,2 +58,3 @@ },
         width: '100%',
+        display: '-webkit-box; display: flex',
         minHeight: themeVariables.height,
@@ -62,3 +66,5 @@ backgroundColor: themeVariables.color,
       title: {
-        float: 'left',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
         margin: 0,
@@ -72,6 +78,9 @@ paddingTop: 0,
       },
+      mainElement: {
+        boxFlex: 1,
+        flex: '1'
+      },
       iconButton: {
         style: {
           marginTop: (themeVariables.height - iconButtonSize) / 2,
-          float: 'left',
           marginRight: 8,
@@ -92,17 +101,19 @@ marginLeft: -16
 
-    var title;
-    var menuElementLeft;
-    var menuElementRight;
     var iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, {
-      float: 'right',
       marginRight: -16,
-      marginLeft: 8
+      marginLeft: 'auto'
     }, this.props.iconStyleRight);
 
-    if (this.props.title) {
+    var title = this.props.title;
+
+    var titleElement;
+    var menuElementLeft;
+    var menuElementRight;
+
+    if (title) {
       // If the title is a string, wrap in an h1 tag.
       // If not, just use it as a node.
-      title = Object.prototype.toString.call(this.props.title) === '[object String]' ?
-        <h1 style={this.mergeAndPrefix(styles.title)}>{this.props.title}</h1> :
-        this.props.title;
+      titleElement = typeof title === 'string' || title instanceof String ?
+        <h1 style={this.mergeAndPrefix(styles.title, styles.mainElement)}>{title}</h1> :
+        <div style={this.mergeAndPrefix(styles.mainElement)}>{title}</div>;
     }
@@ -155,3 +166,3 @@
           {menuElementLeft}
-          {title}
+          {titleElement}
           {menuElementRight}
@@ -158,0 +169,0 @@ {this.props.children}

src/avatar.jsx

@@ -48,2 +48,3 @@ var React = require('react/addons');
         borderColor: this.context.muiTheme.palette.borderColor,
+        display:'inline-block',
 
@@ -58,4 +59,2 @@ //Needed for letter avatars
       iconStyles: {
-        color: color,
-        fill: color,
         margin: 8
@@ -66,6 +65,7 @@ }
     var mergedRootStyles = this.mergeAndPrefix(styles.root, style);
-    var mergedIconStyles = icon ? 
+    var mergedIconStyles = icon ?
       this.mergeStyles(styles.iconStyles, icon.props.style) : null;
 
     var iconElement = icon ? React.cloneElement(icon, {
+      color: color,
       style: mergedIconStyles
@@ -72,0 +72,0 @@ }) : null;

src/checkbox.jsx

@@ -18,2 +18,3 @@ var React = require('react');
     iconStyle: React.PropTypes.object,
+    labelStyle: React.PropTypes.object,
     onCheck: React.PropTypes.func,
@@ -26,6 +27,6 @@ checkedIcon: React.PropTypes.element,
     return {
-      switched: 
+      switched:
         this.props.checked ||
-        this.props.defaultChecked || 
-        (this.props.valueLink && this.props.valueLink.value) || 
+        this.props.defaultChecked ||
+        (this.props.valueLink && this.props.valueLink.value) ||
         false,
@@ -48,8 +49,8 @@ }
           position: 'absolute',
-          opacity: 0, 
+          opacity: 0,
           transform: 'scale(0)',
           transitionOrigin: '50% 50%',
-          transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + 
+          transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' +
                       Transitions.easeOut('0ms', 'transform', '450ms'),
-          fill: this.getTheme().checkedColor   
+          fill: this.getTheme().checkedColor
       },
@@ -59,4 +60,4 @@ box: {
           opacity: 1,
-          fill: this.getTheme().boxColor,          
-          transition: Transitions.easeOut('2s', null, '200ms') 
+          fill: this.getTheme().boxColor,
+          transition: Transitions.easeOut('2s', null, '200ms')
       },
@@ -66,3 +67,3 @@ checkWhenSwitched: {
         transform: 'scale(1)',
-        transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + 
+        transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' +
                     Transitions.easeOut('800ms', 'transform', '0ms')
@@ -79,2 +80,5 @@ },
         fill: this.getTheme().disabledColor
+      },
+      label: {
+        color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
       }
@@ -95,3 +99,3 @@ };
     var styles = this.getStyles();
-    var boxStyles = 
+    var boxStyles =
       this.mergeAndPrefix(
@@ -102,3 +106,3 @@ styles.box,
         this.props.disabled && styles.boxWhenDisabled);
-    var checkStyles = 
+    var checkStyles =
       this.mergeAndPrefix(
@@ -132,2 +136,7 @@ styles.check,
 
+    var labelStyle = this.mergeAndPrefix(
+      styles.label,
+      this.props.labelStyle
+    );
+
     var enhancedSwitchProps = {
@@ -141,2 +150,3 @@ ref: "enhancedSwitch",
       onSwitch: this._handleCheck,
+      labelStyle: labelStyle,
       onParentShouldUpdate: this._handleStateChange,
@@ -148,3 +158,3 @@ defaultSwitched: this.props.defaultChecked,
     return (
-      <EnhancedSwitch 
+      <EnhancedSwitch
         {...other}
@@ -151,0 +161,0 @@ {...enhancedSwitchProps}/>

src/dialog.jsx

 var React = require('react');
 var StylePropable = require('./mixins/style-propable');
-var Spacing = require('./styles/spacing');
 var DialogWindow = require('./dialog-window');
@@ -16,7 +15,8 @@
     title: React.PropTypes.node,
-    contentInnerStyle: React.PropTypes.object,
+    contentInnerStyle: React.PropTypes.object
   },
 
   getStyles: function() {
-    var gutter = Spacing.desktopGutter + 'px ';
+    var spacing = this.context.muiTheme.spacing;
+    var gutter = spacing.desktopGutter + 'px ';
     var styles = {
@@ -29,6 +29,6 @@ title: {
         lineHeight: '32px',
-        fontWeight: '400',
+        fontWeight: '400'
       },
       content: {
-        padding: Spacing.desktopGutter
+        padding: spacing.desktopGutter
       }
@@ -35,0 +35,0 @@ };

src/drop-down-icon.jsx

 var React = require('react');
 var StylePropable = require('./mixins/style-propable');
 var Transitions = require('./styles/transitions');
-var Spacing = require('./styles/spacing');
 var ClickAwayable = require('./mixins/click-awayable');
@@ -13,2 +12,6 @@ var FontIcon = require('./font-icon');
 
+  contextTypes: {
+    muiTheme: React.PropTypes.object
+  },
+
   propTypes: {
@@ -40,2 +43,3 @@ onChange: React.PropTypes.func,
   getStyles: function() {
+    var spacing = this.context.muiTheme.spacing;
     var iconWidth = 48;
@@ -47,4 +51,4 @@ var styles = {
         position: 'relative',
-        height: Spacing.desktopToolbarHeight,
-        fontSize: Spacing.desktopDropDownMenuFontSize,
+        height: spacing.desktopToolbarHeight,
+        fontSize: spacing.desktopDropDownMenuFontSize,
         cursor: 'pointer'
@@ -59,5 +63,5 @@ },
       menuItem: { // similair to drop down menu's menu item styles
-        paddingRight: (Spacing.iconSize + (Spacing.desktopGutterLess*2)),
-        height: Spacing.desktopDropDownMenuItemHeight,
-        lineHeight: Spacing.desktopDropDownMenuItemHeight + 'px'
+        paddingRight: (spacing.iconSize + (spacing.desktopGutterLess*2)),
+        height: spacing.desktopDropDownMenuItemHeight,
+        lineHeight: spacing.desktopDropDownMenuItemHeight + 'px'
       }
@@ -64,0 +68,0 @@ };

src/drop-down-menu.jsx

@@ -5,2 +5,3 @@ var React = require('react');
 var ClickAwayable = require('./mixins/click-awayable');
+var KeyCode = require('./utils/key-code');
 var DropDownArrow = require('./svg-icons/drop-down-arrow');
@@ -23,2 +24,4 @@ var Paper = require('./paper');
     className: React.PropTypes.string,
+    displayMember: React.PropTypes.string,
+    valueMember: React.PropTypes.string,
     autoWidth: React.PropTypes.bool,
@@ -28,2 +31,5 @@ onChange: React.PropTypes.func,
     menuItemStyle: React.PropTypes.object,
+    underlineStyle:React.PropTypes.object,
+    iconStyle:React.PropTypes.object,
+    labelStyle:React.PropTypes.object,
     selectedIndex: React.PropTypes.number
@@ -34,3 +40,5 @@ },
     return {
-      autoWidth: true
+      autoWidth: true,
+      valueMember:'payload',
+      displayMember:'text'
     };
@@ -43,3 +51,3 @@ },
       isHovered: false,
-      selectedIndex: this.props.selectedIndex || 0
+      selectedIndex: (this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink')) ? null :(this.props.selectedIndex || 0),
     };
@@ -49,3 +57,3 @@ },
   componentClickAway: function() {
-    this.setState({ open: false });
+    this.setState({open:false});
   },
@@ -59,3 +67,5 @@
   componentWillReceiveProps: function(nextProps) {
-    if (nextProps.hasOwnProperty('selectedIndex')) {
+    if (nextProps.hasOwnProperty('value') || nextProps.hasOwnProperty('valueLink')) {
+      return;
+    } else if (nextProps.hasOwnProperty('selectedIndex')) {
       this._setSelectedIndex(nextProps);
@@ -82,3 +92,4 @@ }
         height: this.getSpacing().desktopToolbarHeight,
-        fontSize: this.getSpacing().desktopDropDownMenuFontSize
+        fontSize: this.getSpacing().desktopDropDownMenuFontSize,
+        outline:'none'
       },
@@ -95,4 +106,3 @@ control: {
         width: '100%',
-        opacity: (this.state.open) ? 0 :
-                 (this.state.isHovered) ? 1 : 0
+        opacity:0
       },
@@ -137,9 +147,40 @@ icon: {
 
+  getInputNode: function() {
+    var root = this.refs.root;
+    var item = this.props.menuItems[this.state.selectedIndex];
+    if (item)
+      root.value = item[this.props.displayMember];
+    return root;
+  },
+
   render: function() {
+    var _this = this;
     var styles = this.getStyles();
-
-    if (process.env.NODE_ENV !== 'production') {
-      console.assert(!!this.props.menuItems[this.state.selectedIndex], 'SelectedIndex of ' + this.state.selectedIndex + ' does not exist in menuItems.');
+    var selectedIndex = this.state.selectedIndex;
+    var displayValue = "";
+    if (selectedIndex) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.assert(!!this.props.menuItems[selectedIndex], 'SelectedIndex of ' + selectedIndex + ' does not exist in menuItems.');
+      }
     }
+    else {
+      if (this.props.valueMember && (this.props.valueLink || this.props.value))
+      {
+        var value = this.props.value || this.props.valueLink.value;
+        for (var i in this.props.menuItems)
+          if (this.props.menuItems[i][this.props.valueMember] === value)
+            selectedIndex = i;
+      }
+    }
 
+    var selectedItem = this.props.menuItems[selectedIndex];
+    if (selectedItem)
+      displayValue = selectedItem[this.props.displayMember];
+
+    var menuItems = this.props.menuItems.map(function(item){
+      item.text = item[_this.props.displayMember];
+      item.payload = item[_this.props.valueMember];
+      return item;
+    });
+
     return (
@@ -150,2 +191,5 @@ <div
         onMouseOver={this._handleMouseOver}
+        onKeyDown={this._onKeyDown}
+        onFocus={this.props.onFocus}
+        onBlur={this.props.onBlur}
         className={this.props.className}
@@ -159,7 +203,7 @@ style={this.mergeAndPrefix(
             <Paper style={this.mergeAndPrefix(styles.controlBg)} zDepth={0} />
-            <div style={this.mergeAndPrefix(styles.label, this.state.open && styles.labelWhenOpen)}>
-              {this.props.menuItems[this.state.selectedIndex].text}
+            <div style={this.mergeAndPrefix(styles.label, this.state.open && styles.labelWhenOpen, this.props.labelStyle)}>
+              {displayValue}
             </div>
-            <DropDownArrow style={this.mergeAndPrefix(styles.icon)}/>
-            <div style={this.mergeAndPrefix(styles.underline)}/>
+            <DropDownArrow style={this.mergeAndPrefix(styles.icon, this.props.iconStyle)}/>
+            <div style={this.mergeAndPrefix(styles.underline, this.props.underlineStyle)}/>
           </ClearFix>
@@ -170,7 +214,8 @@
             autoWidth={this.props.autoWidth}
-            selectedIndex={this.state.selectedIndex}
-            menuItems={this.props.menuItems}
+            selectedIndex={selectedIndex}
+            menuItems={menuItems}
             menuItemStyle={this.mergeAndPrefix(styles.menuItem, this.props.menuItemStyle)}
             hideable={true}
             visible={this.state.open}
+            onRequestClose={this._onMenuRequestClose}
             onItemTap={this._onMenuItemClick} />
@@ -203,10 +248,52 @@ </div>
 
+  _onKeyDown: function(e) {
+    switch(e.which) {
+      case KeyCode.UP:
+        if (!this.state.open)
+          this._selectPreviousItem();
+        else
+          if (e.altKey)
+            this.setState({open:false});
+        break;
+      case KeyCode.DOWN:
+        if (!this.state.open)
+          if (e.altKey)
+            this.setState({open:true});
+          else
+            this._selectNextItem();
+        break;
+      case KeyCode.ENTER:
+      case KeyCode.SPACE:
+        this.setState({open:true});
+        break;
+      default:
+        return; //important
+    }
+    e.preventDefault();
+  },
+
   _onMenuItemClick: function(e, key, payload) {
-    if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, key, payload);
+    if (this.props.onChange && this.state.selectedIndex !== key) {
+      var selectedItem = this.props.menuItems[key];
+      if (selectedItem)
+        e.target.value = selectedItem[this.props.valueMember];
+
+      if (this.props.valueLink)
+        this.props.valueLink.requestChange(e.target.value)
+      else
+        this.props.onChange(e, key, payload);
+    }
+
     this.setState({
       selectedIndex: key,
-      open: false
+      value:e.target.value,
+      open: false,
+      isHovered:false
     });
   },
 
+  _onMenuRequestClose: function() {
+    this.setState({open:false});
+  },
+
   _handleMouseOver: function() {
@@ -218,2 +305,10 @@ this.setState({isHovered: true});
     this.setState({isHovered: false});
+  },
+
+  _selectPreviousItem: function() {
+    this.setState({selectedIndex: Math.max(this.state.selectedIndex - 1, 0)});
+  },
+
+  _selectNextItem: function() {
+    this.setState({selectedIndex: Math.min(this.state.selectedIndex + 1, this.props.menuItems.length - 1)});
   }
@@ -220,0 +315,0 @@

src/enhanced-button.jsx

@@ -18,3 +18,6 @@ var React = require('react');
     centerRipple: React.PropTypes.bool,
-    className: React.PropTypes.string,
+    containerElement: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     disabled: React.PropTypes.bool,
@@ -37,2 +40,8 @@ disableFocusRipple: React.PropTypes.bool,
 
+  getDefaultProps: function() {
+    return {
+      containerElement: 'button'
+    };
+  },
+
   windowListeners: {
@@ -49,3 +58,2 @@ 'keydown': '_handleWindowKeydown',
 
-
   // Remove inner padding and border in Firefox 4+.
@@ -92,7 +100,11 @@ componentDidMount: function() {
       centerRipple,
+      containerElement,
       disabled,
       disableFocusRipple,
       disableTouchRipple,
+      focusRippleColor,
+      focusRippleOpacity,
       linkButton,
       touchRippleColor,
+      touchRippleOpacity,
       onBlur,
@@ -103,9 +115,26 @@ onFocus,
       onTouchTap,
-      ...other } = this.props;
-    var styles = this.mergeAndPrefix(
-      this.getStyles().root,
-      this.props.linkButton && this.getStyles().rootWhenLinkButton,
-      this.props.disabled && this.getStyles().rootWhenDisabled,
-      this.props.style
+      style,
+      ...other
+    } = this.props;
+
+    var styles = this.getStyles();
+
+    var mergedStyles = this.mergeAndPrefix(
+      styles.root,
+      linkButton && styles.rootWhenLinkButton,
+      disabled && styles.rootWhenDisabled,
+      style
     );
+
+    var buttonProps = {
+      ...other,
+      style: mergedStyles,
+      disabled: disabled,
+      onBlur: this._handleBlur,
+      onFocus: this._handleFocus,
+      onMouseOver: this._handleMouseOver,
+      onMouseOut: this._handleMouseOut,
+      onTouchTap: this._handleTouchTap
+    };
+
     var buttonChildren = [];
@@ -121,4 +150,4 @@
           centerRipple={centerRipple}
-          color={this.props.touchRippleColor}
-          opacity={this.props.touchRippleOpacity}>
+          color={touchRippleColor}
+          opacity={touchRippleOpacity}>
             {this.props.children}
@@ -133,4 +162,4 @@ </TouchRipple>
           key="focusRipple"
-          color={this.props.focusRippleColor}
-          opacity={this.props.focusRippleOpacity}
+          color={focusRippleColor}
+          opacity={focusRippleOpacity}
           show={this.state.isKeyboardFocused} />
@@ -140,17 +169,7 @@ )
 
-    var buttonProps = {
-      style: styles,
-      disabled: disabled,
-      onBlur: this._handleBlur,
-      onFocus: this._handleFocus,
-      onMouseOver: this._handleMouseOver,
-      onMouseOut: this._handleMouseOut,
-      onTouchTap: this._handleTouchTap,
-    };
-
     if (disabled && linkButton) {
       return (
-        <span {...other}
-          className={this.props.className}
-          disabled={disabled}>
+        <span
+          {...other}
+          style={mergedStyles}>
           {this.props.children}
@@ -161,7 +180,5 @@ </span>
 
-    return React.createElement(
-      linkButton ? 'a' : 'button',
-      { ...other, ...buttonProps },
-      buttonChildren
-    );
+    return React.isValidElement(containerElement) ?
+      React.cloneElement(containerElement, buttonProps, buttonChildren) :
+      React.createElement(linkButton ? 'a' : containerElement, buttonProps, buttonChildren);
     
@@ -168,0 +185,0 @@ },

src/enhanced-switch.jsx

@@ -7,3 +7,2 @@ var React = require('react');
 var WindowListenable = require('./mixins/window-listenable');
-var Spacing = require('./styles/spacing');
 var ClearFix = require('./clearfix');
@@ -107,3 +106,4 @@ var FocusRipple = require('./ripples/focus-ripple');
   getStyles: function() {
-    var switchWidth = 60 - Spacing.desktopGutterLess;
+    var spacing = this.context.muiTheme.spacing;
+    var switchWidth = 60 - spacing.desktopGutterLess;
     var labelWidth = 'calc(100% - 60px)';
@@ -140,3 +140,3 @@
         position: 'relative',
-        display: 'table-column',
+        display: 'block',
         width: labelWidth,
@@ -150,8 +150,8 @@ lineHeight: '24px',
         position: 'relative',
-        display: 'table-column',
+        display: 'block',
         width: switchWidth,
         marginRight: (this.props.labelPosition == 'right') ?
-          Spacing.desktopGutterLess : 0,
+          spacing.desktopGutterLess : 0,
         marginLeft: (this.props.labelPosition == 'left') ?
-          Spacing.desktopGutterLess : 0
+          spacing.desktopGutterLess : 0
       },
@@ -158,0 +158,0 @@ ripple: {

src/enhanced-textarea.jsx

@@ -109,2 +109,7 @@ var React = require('react');
 
+  setValue: function (value) {
+    this.refs.input.value = value;
+    this._syncHeightWithShadow(value);
+  },
+
   _syncHeightWithShadow: function(newValue, e) {
@@ -111,0 +116,0 @@ var shadow = React.findDOMNode(this.refs.shadow);

src/floating-action-button.jsx

@@ -132,2 +132,3 @@ var React = require('react');
     var {
+      disabled,
       icon,
@@ -147,3 +148,3 @@ mini,
             styles.icon,
-            this.props.mini && styles.iconWhenMini,
+            mini && styles.iconWhenMini,
             this.props.iconStyle)}/>
@@ -154,2 +155,12 @@ }
 
+    var buttonEventHandlers = disabled ? null : {
+      onMouseDown: this._handleMouseDown,
+      onMouseUp: this._handleMouseUp,
+      onMouseOut: this._handleMouseOut,
+      onMouseOver: this._handleMouseOver,
+      onTouchStart: this._handleTouchStart,
+      onTouchEnd: this._handleTouchEnd,
+      onKeyboardFocus: this._handleKeyboardFocus
+    };
+
     return (
@@ -161,4 +172,7 @@ <Paper
 
-        <EnhancedButton {...other}
+        <EnhancedButton
+          {...other}
+          {...buttonEventHandlers}
           ref="container"
+          disabled={disabled}
           style={this.mergeAndPrefix(
@@ -168,11 +182,4 @@ styles.container,
           )}
-          onMouseDown={this._handleMouseDown}
-          onMouseUp={this._handleMouseUp}
-          onMouseOut={this._handleMouseOut}
-          onMouseOver={this._handleMouseOver}
-          onTouchStart={this._handleTouchStart}
-          onTouchEnd={this._handleTouchEnd}
           focusRippleColor={rippleColor}
-          touchRippleColor={rippleColor}
-          onKeyboardFocus={this._handleKeyboardFocus}>
+          touchRippleColor={rippleColor}>
             <div
@@ -179,0 +186,0 @@ ref="overlay"

src/font-icon.jsx

 var React = require('react');
 var StylePropable = require('./mixins/style-propable');
-var Spacing = require('./styles/spacing');
 var Transitions = require('./styles/transitions');
@@ -15,4 +14,6 @@
   propTypes: {
-    className: React.PropTypes.string,
-    hoverColor: React.PropTypes.string
+    color: React.PropTypes.string,
+    hoverColor: React.PropTypes.string,
+    onMouseOut: React.PropTypes.func,
+    onMouseOver: React.PropTypes.func
   },
@@ -22,25 +23,10 @@
     return {
-      hovered: false,
+      hovered: false
     };
   },
 
-  getStyles: function() {
-    var theme = this.context.muiTheme.palette;
-    var styles = {
-      position: 'relative',
-      fontSize: Spacing.iconSize + 'px',
-      display: 'inline-block',
-      userSelect: 'none',
-      transition: Transitions.easeOut()
-    };
-
-    if (!styles.color && !this.props.className) {
-      styles.color = theme.textColor;
-    }
-
-    return styles;
-  },
-
   render: function() {
     var {
+      color,
+      hoverColor,
       onMouseOut,
@@ -51,4 +37,19 @@ onMouseOver,
     } = this.props;
-    var hoverStyle = this.props.hoverColor ? {color: this.props.hoverColor} : {};
 
+    var spacing = this.context.muiTheme.spacing;
+    var offColor = color ? color :
+      style && style.color ? style.color :
+      this.context.muiTheme.palette.textColor;
+    var onColor = hoverColor ? hoverColor : offColor;
+
+    var mergedStyles = this.mergeAndPrefix({
+      position: 'relative',
+      fontSize: spacing.iconSize,
+      display: 'inline-block',
+      userSelect: 'none',
+      transition: Transitions.easeOut()
+    }, style, {
+      color: this.state.hovered ? onColor : offColor
+    });
+
     return (
@@ -59,6 +60,3 @@ <span
         onMouseOver={this._handleMouseOver}
-        style={this.mergeAndPrefix(
-          this.getStyles(),
-          this.props.style,
-          this.state.hovered && hoverStyle)} />
+        style={mergedStyles} />
     );
@@ -65,0 +63,0 @@ },

src/icon-button.jsx

@@ -53,15 +53,6 @@ var React = require('react');
 
-  getTheme: function() {
-    return this.context.muiTheme.palette;
-  },
+  getStyles: function() {
+    var spacing = this.context.muiTheme.spacing;
+    var palette = this.context.muiTheme.palette;
 
-  getSpacing: function() {
-    return this.context.muiTheme.spacing;
-  },
-
-  getDisabledColor: function() {
-    return this.context.muiTheme.palette.disabledColor;
-  },
-
-  getStyles: function() {
     var styles = {
@@ -72,5 +63,5 @@ root: {
         transition: Transitions.easeOut(),
-        padding: (this.getSpacing().iconSize / 2),
-        width: this.getSpacing().iconSize*2,
-        height: this.getSpacing().iconSize*2
+        padding: spacing.iconSize / 2,
+        width: spacing.iconSize*2,
+        height: spacing.iconSize*2
       },
@@ -82,4 +73,4 @@ tooltip: {
       icon: {
-        color: this.getTheme().textColor,
-        fill: this.getTheme().textColor
+        color: palette.textColor,
+        fill: palette.textColor
       },
@@ -91,11 +82,7 @@ overlay: {
         height: '100%',
-        background: this.getDisabledColor()
+        background: palette.disabledColor
       },
-      rootWhenDisabled: {
-        color: this.getDisabledColor(),
-        fill: this.getDisabledColor()
-      },
-      iconWhenDisabled: {
-        color: this.getDisabledColor(),
-        fill: this.getDisabledColor()
+      disabled: {
+        color: palette.disabledColor,
+        fill: palette.disabledColor
       }
@@ -108,6 +95,7 @@ };
     var {
+      disabled,
+      iconClassName,
       tooltip,
       touch,
       ...other } = this.props;
-    var tooltipElement;
     var fonticon;
@@ -117,23 +105,24 @@
 
-    if (tooltip) {
-      tooltipElement = (
-        <Tooltip
-          ref="tooltip"
-          label={tooltip}
-          show={this.state.tooltipShown}
-          touch={touch}
-          style={this.mergeStyles(styles.tooltip)}/>
-      );
-    }
+    var tooltipElement = tooltip ? (
+      <Tooltip
+        ref="tooltip"
+        label={tooltip}
+        show={this.state.tooltipShown}
+        touch={touch}
+        style={this.mergeStyles(styles.tooltip)}/>
+    ) : null;
 
-    if (this.props.iconClassName) {
-      var { iconHoverColor, ...iconStyle } = this.props.iconStyle;
+    if (iconClassName) {
+      var {
+        iconHoverColor,
+        ...iconStyle
+      } = this.props.iconStyle;
 
       fonticon = (
         <FontIcon
-          className={this.props.iconClassName}
-          hoverColor={iconHoverColor}
+          className={iconClassName}
+          hoverColor={disabled ? null : iconHoverColor}
           style={this.mergeStyles(
             styles.icon,
-            this.props.disabled && styles.iconWhenDisabled,
+            disabled ? styles.disabled : {},
             iconStyle
@@ -144,10 +133,5 @@ )}/>
 
-    if (this.props.children && this.props.disabled) {
-      React.Children.forEach(this.props.children, function(child) {
-        child.props.style = {
-          color: this.getDisabledColor(),
-          fill: this.getDisabledColor(),
-        }
-      }, this);
-    }
+    var children = disabled ?
+      this._addStylesToChildren(styles.disabled) :
+      this.props.children;
 
@@ -158,2 +142,3 @@ return (
         centerRipple={true}
+        disabled={disabled}
         style={this.mergeStyles(styles.root, this.props.style)}
@@ -168,3 +153,3 @@ onBlur={this._handleBlur}
         {fonticon}
-        {this.props.children}
+        {children}
 
@@ -175,2 +160,17 @@ </EnhancedButton>
 
+  _addStylesToChildren: function(styles) {
+    var children = [];
+
+    React.Children.forEach(this.props.children, function(child) {
+      children.push(
+        React.cloneElement(child, {
+          key: child.props.key ? child.props.key : children.length,
+          style: styles
+        })
+      );
+    });
+
+    return children;
+  },
+
   _positionTooltip: function() {
@@ -177,0 +177,0 @@ var tooltip = React.findDOMNode(this.refs.tooltip);

src/index.js

@@ -6,2 +6,8 @@ module.exports = {
   BeforeAfterWrapper: require('./before-after-wrapper'),
+  Card: require('./card/card'),
+  CardActions: require('./card/card-actions'),
+  CardHeader: require('./card/card-header'),
+  CardMedia: require('./card/card-media'),
+  CardText: require('./card/card-text'),
+  CardTitle: require('./card/card-title'),
   Checkbox: require('./checkbox'),
@@ -38,2 +44,3 @@ CircularProgress: require('./circular-progress'),
   RaisedButton: require('./raised-button'),
+  SelectField: require('./select-field'),
   Slider: require('./slider'),
@@ -56,2 +63,3 @@ SvgIcon: require('./svg-icon'),
   Tab: require('./tabs/tab'),
+  Table: require('./table/table'),
   Tabs: require('./tabs/tabs'),
@@ -58,0 +66,0 @@ Theme: require('./theme'),

src/lists/list-item.jsx

@@ -27,2 +27,3 @@ var React = require('react/addons');
     rightIcon: React.PropTypes.element,
+    rightIconButton: React.PropTypes.element,
     rightToggle: React.PropTypes.element,
@@ -41,3 +42,4 @@ secondaryText: React.PropTypes.node,
     return {
-      hovered: false 
+      hovered: false,
+      rightIconButtonHovered: false
     };
@@ -58,2 +60,3 @@ },
       rightIcon,
+      rightIconButton,
       rightToggle,
@@ -76,3 +79,3 @@ secondaryText,
       root: {
-        backgroundColor: this.state.hovered ? hoverColor : null,
+        backgroundColor: this.state.hovered && !this.state.rightIconButtonHovered ? hoverColor : null,
         color: textColor,
@@ -90,3 +93,3 @@ display: 'block',
         paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16,
-        paddingRight: rightIcon || rightAvatar ? 56 : rightToggle ? 72 : 16,
+        paddingRight: rightIcon || rightAvatar || rightIconButton ? 56 : rightToggle ? 72 : 16,
         paddingBottom: singleAvatar ? 20 : 16,
@@ -109,3 +112,3 @@ paddingTop: singleNoAvatar || threeLine ? 16 : 20
 
-      leftIcon: { 
+      leftIcon: {
         color: Colors.grey600,
@@ -136,5 +139,16 @@ fill: Colors.grey600,
       leftCheckbox: {
-        left: 4
+        position: 'absolute',
+        display: 'block',
+        width: 24,
+        top: twoLine ? 24 : singleAvatar ? 16 : 12,
+        left: 16
       },
 
+      rightIconButton: {
+        position: 'absolute',
+        display: 'block',
+        top: twoLine ? 12 : singleAvatar ? 4 : 0,
+        right: 4
+      },
+
       rightToggle: {
@@ -180,3 +194,10 @@ position: 'absolute',
     this._pushElement(contentChildren, rightAvatar, this.mergeStyles(styles.avatars, styles.rightAvatar));
-    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.icons, styles.leftCheckbox));
+    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.leftCheckbox));
+    this._pushElement(contentChildren, rightIconButton, this.mergeStyles(styles.rightIconButton), {
+      onMouseOver: this._handleRightIconButtonMouseOver,
+      onMouseOut: this._handleRightIconButtonMouseOut,
+      onTouchTap: this._handleRightIconButtonTouchTap,
+      onMouseDown: this._handleRightIconButtonMouseUp,
+      onMouseUp: this._handleRightIconButtonMouseUp
+    });
     this._pushElement(contentChildren, rightToggle, this.mergeStyles(styles.rightToggle));
@@ -211,3 +232,3 @@
 
-  _pushElement: function(children, element, baseStyles) {
+  _pushElement: function(children, element, baseStyles, additionalProps) {
     if (element) {
@@ -218,3 +239,4 @@ var styles = this.mergeStyles(baseStyles, element.props.style);
           key: children.length,
-          style: styles
+          style: styles,
+          ...additionalProps
         })
@@ -225,2 +247,34 @@ );
 
+  _handleRightIconButtonMouseDown: function(e) {
+    var iconButton = this.props.rightIconButton;
+    e.stopPropagation();
+    if (iconButton.onMouseDown) iconButton.onDown(e);
+  },
+
+  _handleRightIconButtonMouseOut: function(e) {
+    var iconButton = this.props.rightIconButton;
+    this.setState({rightIconButtonHovered: false});
+    if (iconButton.onMouseOut) iconButton.onMouseOut(e);
+  },
+
+  _handleRightIconButtonMouseOver: function(e) {
+    var iconButton = this.props.rightIconButton;
+    this.setState({rightIconButtonHovered: true});
+    if (iconButton.onMouseOver) iconButton.onMouseOver(e);
+  },
+
+  _handleRightIconButtonMouseUp: function(e) {
+    var iconButton = this.props.rightIconButton;
+    e.stopPropagation();
+    if (iconButton.onMouseUp) iconButton.onUp(e);
+  },
+
+  _handleRightIconButtonTouchTap: function(e) {
+    var iconButton = this.props.rightIconButton;
+
+    //Stop the event from bubbling up to the list-item
+    e.stopPropagation();
+    if (iconButton.onTouchTap) iconButton.onTouchTap(e);
+  },
+
   _handleMouseOver: function(e) {
@@ -227,0 +281,0 @@ this.setState({hovered: true});

src/menu/link-menu-item.jsx

@@ -17,2 +17,3 @@ var React = require('react');
     target: React.PropTypes.string,
+    active: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
@@ -24,2 +25,3 @@ className: React.PropTypes.string,
     return {
+      active:false,
       disabled: false
@@ -76,3 +78,4 @@ };
         this.props.selected && styles.rootWhenSelected,
-        (this.state.hovered && !this.props.disabled) && styles.rootWhenHovered,
+        this.props.selected && styles.rootWhenSelected,
+        (this.props.active && !this.props.disabled) && styles.rootWhenHovered,
         this.props.style,
@@ -79,0 +82,0 @@ this.props.disabled && styles.rootWhenDisabled);

src/menu/menu-item.jsx

@@ -34,3 +34,4 @@ var React = require('react');
     onToggle: React.PropTypes.func,
-    selected: React.PropTypes.bool
+    selected: React.PropTypes.bool,
+    active: React.PropTypes.bool
   },
@@ -45,12 +46,7 @@
       toggle: false,
-      disabled: false
+      disabled: false,
+      active:false
     };
   },
 
-  getInitialState: function() {
-    return {
-      hovered: false
-    }
-  },
-
   getTheme: function() {
@@ -158,7 +154,7 @@ return this.context.muiTheme.component.menuItem;
         onMouseOver={this._handleMouseOver}
-        onMouseOut={this._handleMouseOut}
+        onMouseOut={this._handleMouseOut}f
         style={this.mergeAndPrefix(
           styles.root,
           this.props.selected && styles.rootWhenSelected,
-          (this.state.hovered && !this.props.disabled) && styles.rootWhenHovered,
+          (this.props.active && !this.props.disabled) && styles.rootWhenHovered,
           this.props.style,
@@ -188,13 +184,10 @@ this.props.disabled && styles.rootWhenDisabled)}>
   _handleMouseOver: function(e) {
-    this.setState({hovered: true});
-    if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e);
+    if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index);
   },
 
   _handleMouseOut: function(e) {
-    this.setState({hovered: false});
-    if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e);
+    if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e,this.props.index);
   }
-
 });
 
 module.exports = MenuItem;

src/menu/menu.jsx

@@ -5,2 +5,3 @@ var React = require('react');
 var KeyLine = require('../utils/key-line');
+var KeyCode = require('../utils/key-code');
 var StylePropable = require('../mixins/style-propable');
@@ -13,2 +14,3 @@ var Transitions = require('../styles/transitions');
 var SubheaderMenuItem = require('./subheader-menu-item');
+var WindowListenable = require('../mixins/window-listenable');
 
@@ -32,2 +34,3 @@ /***********************
     disabled: React.PropTypes.bool,
+    active: React.PropTypes.bool,
     onItemTap: React.PropTypes.func,
@@ -44,3 +47,6 @@ menuItemStyle: React.PropTypes.object,
   getInitialState: function() {
-    return { open: false }
+    return {
+      open: false ,
+      activeIndex:0
+    }
   },
@@ -54,2 +60,4 @@
     this._positionNestedMenu();
+    var el = this.getDOMNode();
+    el.focus();
   },
@@ -65,4 +73,43 @@
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        userSelect: 'none',
+        cursor: 'pointer',
+        lineHeight: this.getTheme().height + 'px',
+        color: this.context.muiTheme.palette.textColor
+      },
+      icon: {
+        float: 'left',
+        lineHeight: this.getTheme().height + 'px',
+        marginRight: this.getSpacing().desktopGutter
+      },
+      toggle: {
+        marginTop: ((this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2),
+        float: 'right',
+        width: 42
+      },
+      rootWhenHovered: {
+        backgroundColor: this.getTheme().hoverColor
+      },
+      rootWhenSelected: {
+        color: this.getTheme().selectedTextColor
+      },
+      rootWhenDisabled: {
+        cursor: 'default',
+        color: this.context.muiTheme.palette.disabledColor
+      }
+    };
+    return styles;
+  },
+
+  getTheme: function() {
+    return this.context.muiTheme.component.menuItem;
+  },
+
   render: function() {
-    var styles = this.mergeAndPrefix({
+
+    var styles = this.getStyles();
+    styles = this.mergeAndPrefix(styles.root,
+      (this.props.active && !this.props.disabled) && styles.rootWhenHovered, {
       position: 'relative'
@@ -83,3 +130,9 @@ }, this.props.style);
     return (
-      <div ref="root" style={styles} onMouseEnter={this._openNestedMenu} onMouseLeave={this._closeNestedMenu}>
+      <div
+          ref="root"
+          style={styles}
+          onMouseEnter={this._openNestedMenu}
+          onMouseLeave={this._closeNestedMenu}
+          onMouseOver={this._handleMouseOver}
+          onMouseOut={this._handleMouseOut}>
         <MenuItem
@@ -101,2 +154,3 @@ index={index}
           visible={this.state.open}
+          onRequestClose={this._closeNestedMenu}
           zDepth={this.props.zDepth + 1} />
@@ -107,6 +161,13 @@ </div>
 
+  toggleNestedMenu: function() {
+    if (!this.props.disabled) this.setState({ open: !this.state.open });
+  },
+
+  isOpen: function() {
+    return this.state.open;
+  },
+
   _positionNestedMenu: function() {
     var el = React.findDOMNode(this);
     var nestedMenu = React.findDOMNode(this.refs.nestedMenu);
-
     nestedMenu.style.left = el.offsetWidth + 'px';
@@ -121,10 +182,7 @@ },
     this.setState({ open: false });
+    React.findDOMNode(this).focus();
   },
 
-  _toggleNestedMenu: function() {
-    if (!this.props.disabled) this.setState({ open: !this.state.open });
-  },
-
   _onParentItemTap: function() {
-    this._toggleNestedMenu();
+    this.toggleNestedMenu();
   },
@@ -135,2 +193,9 @@
     this._closeNestedMenu();
+  },
+  _handleMouseOver: function(e) {
+    if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index);
+  },
+
+  _handleMouseOut: function(e) {
+    if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e,this.props.index);
   }
@@ -156,2 +221,3 @@
     onToggle: React.PropTypes.func,
+    onRequestClose: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
@@ -171,3 +237,6 @@ selectedIndex: React.PropTypes.number,
   getInitialState: function() {
-    return { nestedMenuShown: false }
+    return {
+      nestedMenuShown: false,
+      activeIndex:0
+    }
   },
@@ -181,2 +250,3 @@
       zDepth: 1,
+      onRequestClose: function() {}
     };
@@ -216,3 +286,4 @@ },
         paddingBottom: this.getSpacing().desktopGutterMini,
-        transition: Transitions.easeOut(null, 'height')
+        transition: Transitions.easeOut(null, 'height'),
+        outline:'none !important'
       },
@@ -239,2 +310,4 @@ subheader: {
         ref="paperContainer"
+        tabIndex='0'
+        onKeyDown={this._onKeyDown}
         zDepth={this.props.zDepth}
@@ -251,4 +324,3 @@ style={this.mergeAndPrefix(
   _getChildren: function() {
-    var children = [],
-      menuItem,
+    var  menuItem,
       itemComponent,
@@ -260,2 +332,3 @@ isSelected,
 
+    this._children = [];
     //This array is used to keep track of all nested menu refs
@@ -286,2 +359,3 @@ this._nestedChildren = [];
               index={i}
+              active={this.state.activeIndex == i}
               text={menuItem.text}
@@ -323,2 +397,4 @@ disabled={isDisabled}
               index={i}
+              nested={true}
+              active={this.state.activeIndex == i}
               text={menuItem.text}
@@ -329,2 +405,4 @@ disabled={isDisabled}
               zDepth={this.props.zDepth}
+              onMouseOver={this._onItemActivated}
+              onMouseOut={this._onItemDeactivated}
               onItemTap={this._onNestedItemTap} />
@@ -342,2 +420,3 @@ );
               index={i}
+              active={this.state.activeIndex == i}
               icon={menuItem.icon}
@@ -352,3 +431,6 @@ data={menuItem.data}
               disabled={isDisabled}
-              onTouchTap={this._onItemTap}>
+              onTouchTap={this._onItemTap}
+              onMouseOver={this._onItemActivated}
+              onMouseOut={this._onItemDeactivated}
+              >
               {menuItem.text}
@@ -358,6 +440,6 @@ </MenuItem>
       }
-      children.push(itemComponent);
+      this._children.push(itemComponent);
     }
 
-    return children;
+    return this._children;
   },
@@ -401,2 +483,3 @@
           if (this.props.visible) container.style.overflow = 'visible';
+          el.focus();
         }.bind(this));
@@ -425,6 +508,80 @@
     if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled);
-  }
+  },
+  _onItemActivated: function(e, index) {
+    this.setState({activeIndex:index})
+  },
+  _onItemDeactivated: function(e, index) {
+    if (this.state.activeKey == index)
+      this.setState({activeIndex:0})
+  },
 
+  _onKeyDown: function(e) {
+    if (!(this.state.open || this.props.visible))
+      return;
+
+    var nested = this._children[this.state.activeIndex];
+    if (nested && nested.props.nested && this.refs[this.state.activeIndex].isOpen())
+      return;
+
+    switch(e.which) {
+      case KeyCode.UP:
+        this._activatePreviousItem();
+        break;
+      case KeyCode.DOWN:
+        this._activateNextItem();
+        break;
+      case KeyCode.RIGHT:
+        this._tryToggleNested(this.state.activeIndex);
+        break;
+      case KeyCode.LEFT:
+        this._close();
+        break;
+      case KeyCode.ESC:
+        this._close();
+        break;
+      case KeyCode.TAB:
+        this._close();
+        return; // so the tab key can propagate
+      case KeyCode.ENTER:
+      case KeyCode.SPACE:
+        e.stopPropagation(); // needs called before the close
+        this._triggerSelection(e);
+        break;
+      default:
+        return; //important
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  },
+
+  _activatePreviousItem:function() {
+    var active = this.state.activeIndex || 0;
+    active = Math.max(active - 1, 0);
+    this.setState({activeIndex:active});
+  },
+
+  _activateNextItem: function() {
+    var active = this.state.activeIndex || 0;
+    active = Math.min(active+1, this._children.length -1);
+    this.setState({activeIndex:active});
+  },
+
+  _triggerSelection: function(e) {
+    var index = this.state.activeIndex || 0;
+    this._onItemTap(e, index)
+  },
+
+  _close: function() {
+    this.props.onRequestClose();
+  },
+
+  _tryToggleNested: function(index) {
+    var item = this.refs[index];
+    var toggleMenu = item.toggleNestedMenu;
+    if (item && item.toggleNestedMenu)
+      item.toggleNestedMenu();
+  },
+
 });
 
 module.exports = Menu;

src/radio-button.jsx

@@ -18,2 +18,3 @@ var React = require('react');
     iconStyle: React.PropTypes.object,
+    labelStyle: React.PropTypes.object,
     onCheck: React.PropTypes.func
@@ -61,2 +62,5 @@ },
       },
+      label: {
+        color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
+      }
     };
@@ -100,2 +104,7 @@ return styles;
 
+    var labelStyle = this.mergeAndPrefix(
+      styles.label,
+      this.props.labelStyle
+    );
+
     var enhancedSwitchProps = {
@@ -108,2 +117,3 @@ ref: "enhancedSwitch",
       iconStyle: iconStyle,
+      labelStyle: labelStyle,
       onSwitch: this._handleCheck,
@@ -110,0 +120,0 @@ onParentShouldUpdate: this._handleStateChange,

src/raised-button.jsx

@@ -124,2 +124,3 @@ var React = require('react');
     var {
+      disabled,
       label,
@@ -144,2 +145,12 @@ primary,
 
+    var buttonEventHandlers = disabled ? null : {
+      onMouseDown: this._handleMouseDown,
+      onMouseUp: this._handleMouseUp,
+      onMouseOut: this._handleMouseOut,
+      onMouseOver: this._handleMouseOver,
+      onTouchStart: this._handleTouchStart,
+      onTouchEnd: this._handleTouchEnd,
+      onKeyboardFocus: this._handleKeyboardFocus
+    };
+
     return (
@@ -149,16 +160,12 @@ <Paper
         zDepth={this.state.zDepth}>
-          <EnhancedButton {...other}
+          <EnhancedButton
+            {...other}
+            {...buttonEventHandlers}
             ref="container"
+            disabled={disabled}
             style={this.mergeAndPrefix(styles.container)}
-            onMouseUp={this._handleMouseUp}
-            onMouseDown={this._handleMouseDown}
-            onMouseOut={this._handleMouseOut}
-            onMouseOver={this._handleMouseOver}
-            onTouchStart={this._handleTouchStart}
-            onTouchEnd={this._handleTouchEnd}
             focusRippleColor={rippleColor}
             touchRippleColor={rippleColor}
             focusRippleOpacity={rippleOpacity}
-            touchRippleOpacity={rippleOpacity}
-            onKeyboardFocus={this._handleKeyboardFocus}>
+            touchRippleOpacity={rippleOpacity}>
               <div ref="overlay" style={this.mergeAndPrefix(
@@ -165,0 +172,0 @@ styles.overlay,

src/slider.jsx

@@ -36,2 +36,3 @@ var React = require('react');
       defaultValue: 0,
+      step: 0.01,
       min: 0,
@@ -248,2 +249,3 @@ max: 1,
                 start={{x: (percent * 100) + '%'}}
+                constrain={this._constrain()}
                 onStart={this._onDragStart}
@@ -290,3 +292,3 @@ onStop={this._onDragStop}
   setPercent: function (percent) {
-    var value = this._percentToValue(percent);
+    var value = this._alignValue(this._percentToValue(percent));
     this.setState({value: value, percent: percent});
@@ -299,2 +301,38 @@ },
 
+  _alignValue: function (val) {
+    var { step, min } = this.props;
+
+    var valModStep = (val - min) % step;
+    var alignValue = val - valModStep;
+
+    if (Math.abs(valModStep) * 2 >= step) {
+      alignValue += (valModStep > 0) ? step : (-step);
+    }
+
+    return parseFloat(alignValue.toFixed(5));
+  },
+
+  _constrain: function () {
+    var { min, max, step } = this.props;
+    return (pos) => {
+      var pixelMax = React.findDOMNode(this.refs.track).clientWidth;
+      var pixelStep = pixelMax / ((max - min) / step);
+
+      var cursor = min;
+      var i;
+      for (i = 0; i < (max - min) / step; i++) {
+        var distance = (pos.left - cursor);
+        var nextDistance = (cursor + pixelStep) - pos.left
+        if (Math.abs(distance) > Math.abs(nextDistance)) {
+          cursor += pixelStep;
+        } else {
+          break;
+        }
+      }
+      return {
+        left: cursor
+      };
+    };
+  },
+
   _onFocus: function (e) {
@@ -356,3 +394,3 @@ this.setState({focused: true});
     this.setPercent(percent);
-    var value = this._percentToValue(percent);
+    var value = this._alignValue(this._percentToValue(percent));
     if (this.props.onChange) this.props.onChange(e, value);
@@ -359,0 +397,0 @@ },

src/styles/theme-manager.js

@@ -1,2 +0,1 @@
-var Spacing = require('./spacing');
 var Extend = require('../utils/extend');
@@ -14,3 +13,3 @@
 
-    spacing: Spacing,
+    spacing: Types.LIGHT.spacing,
     contentFontFamily: 'Roboto, sans-serif',
@@ -27,2 +26,3 @@
     setTheme: function(newTheme) {
+      this.setSpacing(newTheme.spacing);
       this.setPalette(newTheme.getPalette());
@@ -32,2 +32,7 @@ this.setComponentThemes(newTheme.getComponentThemes(newTheme.getPalette()));
 
+    setSpacing: function setSpacing(newSpacing) {
+      this.spacing = Extend(this.spacing, newSpacing);
+      this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing));
+    },
+
     setPalette: function(newPalette) {
@@ -34,0 +39,0 @@ this.palette = Extend(this.palette, newPalette);

src/styles/themes/light-theme.js

@@ -28,3 +28,4 @@ var Colors = require('../colors');
   },
-  getComponentThemes: function(palette) {
+  getComponentThemes: function(palette, spacing) {
+    spacing = spacing || Spacing;
     var obj = {
@@ -34,3 +35,3 @@ appBar: {
         textColor: Colors.darkWhite,
-        height: Spacing.desktopKeylineIncrement
+        height: spacing.desktopKeylineIncrement
       },
@@ -40,3 +41,3 @@ button: {
         minWidth: 88,
-        iconButtonSize: Spacing.iconSize * 2
+        iconButtonSize: spacing.iconSize * 2
       },
@@ -47,3 +48,5 @@ checkbox: {
         requiredColor: palette.primary1Color,
-        disabledColor: palette.disabledColor
+        disabledColor: palette.disabledColor,
+        labelColor: palette.textColor,
+        labelDisabledColor: palette.disabledColor
       },
@@ -75,3 +78,3 @@ datePicker: {
       leftNav: {
-        width: Spacing.desktopKeylineIncrement * 4,
+        width: spacing.desktopKeylineIncrement * 4,
         color: Colors.white
@@ -87,7 +90,7 @@ },
         hoverColor: 'rgba(0, 0, 0, .035)',
-        padding: Spacing.desktopGutter,
+        padding: spacing.desktopGutter,
         selectedTextColor: palette.accent1Color,
       },
       menuSubheader: {
-        padding: Spacing.desktopGutter,
+        padding: spacing.desktopGutter,
         borderColor: palette.borderColor,
@@ -106,2 +109,4 @@ textColor: palette.primary1Color
         size: 24,
+        labelColor: palette.textColor,
+        labelDisabledColor: palette.disabledColor
       },
@@ -132,2 +137,28 @@ raisedButton: {
       },
+      table: {
+        backgroundColor: Colors.white
+      },
+      tableHeader: {
+        borderColor: palette.borderColor
+      },
+      tableHeaderColumn: {
+        textColor: Colors.lightBlack,
+        height: 56,
+        spacing: 28
+      },
+      tableFooter: {
+        borderColor: palette.borderColor,
+        textColor: Colors.lightBlack
+      },
+      tableRow: {
+        hoverColor: Colors.grey200,
+        stripeColor: ColorManipulator.lighten(palette.primary1Color, 0.55),
+        selectedColor: Colors.grey300,
+        textColor: Colors.darkBlack,
+        borderColor: palette.borderColor
+      },
+      tableRowColumn: {
+        height: 48,
+        spacing: 28
+      },
       timePicker: {
@@ -148,3 +179,5 @@ color: Colors.white,
         trackOffColor: Colors.minBlack,
-        trackDisabledColor: Colors.faintBlack
+        trackDisabledColor: Colors.faintBlack,
+        labelColor: palette.textColor,
+        labelDisabledColor: palette.disabledColor
       },
@@ -161,2 +194,12 @@ toolbar: {
         backgroundColor: palette.primary1Color,
+      },
+      textField: {
+        textColor: palette.textColor,
+        hintColor: palette.disabledColor,
+        floatingLabelColor: palette.textColor,
+        disabledTextColor: palette.disabledColor,
+        errorColor: Colors.red500,
+        focusColor: palette.primary1Color,
+        backgroundColor: 'transparent',
+        borderColor: palette.borderColor
       }
@@ -163,0 +206,0 @@ };

src/svg-icon.jsx

 var React = require('react/addons');
 var StylePropable = require('./mixins/style-propable');
+var Transitions = require('./styles/transitions');
 
@@ -13,5 +14,15 @@ var SvgIcon = React.createClass({
   propTypes: {
+    color: React.PropTypes.string,
+    hoverColor: React.PropTypes.string,
+    onMouseOut: React.PropTypes.func,
+    onMouseOver: React.PropTypes.func,
     viewBox: React.PropTypes.string
   },
 
+  getInitialState: function() {
+    return {
+      hovered: false
+    };
+  },
+
   getDefaultProps: function() {
@@ -26,2 +37,4 @@ return {
     var {
+      color,
+      hoverColor,
       viewBox,
@@ -32,8 +45,17 @@ style,
 
+    var offColor = color ? color :
+      style && style.fill ? style.fill : this.context.muiTheme.palette.textColor;
+    var onColor = hoverColor ? hoverColor : offColor;
+
+    //remove the fill prop so that it doesn't override our computed
+    //fill from above
+    if (style) delete style.fill;
+
     var mergedStyles = this.mergeAndPrefix({
       display: 'inline-block',
-      height: '24px',
-      width: '24px',
+      height: 24,
+      width: 24,
       userSelect: 'none',
-      fill: this.context.muiTheme.palette.textColor
+      transition: Transitions.easeOut(),
+      fill: this.state.hovered ? onColor : offColor
     }, style);
@@ -44,7 +66,23 @@
         {...other}
-        viewBox={viewBox}
-        style={mergedStyles}>
+        onMouseOut={this._handleMouseOut}
+        onMouseOver={this._handleMouseOver}
+        style={mergedStyles}
+        viewBox={viewBox}>
         {this.props.children}
       </svg>
     );
+  },
+
+  _handleMouseOut: function(e) {
+    this.setState({hovered: false});
+    if (this.props.onMouseOut) {
+      this.props.onMouseOut(e);
+    }
+  },
+
+  _handleMouseOver: function(e) {
+    this.setState({hovered: true});
+    if (this.props.onMouseOver) {
+      this.props.onMouseOver(e);
+    }
   }
@@ -51,0 +89,0 @@ });

src/tabs/tabs.jsx

@@ -19,3 +19,4 @@ var React = require('react/addons');
     onActive: React.PropTypes.func,
-    tabWidth: React.PropTypes.number
+    tabWidth: React.PropTypes.number,
+    tabItemContainerStyle: React.PropTypes.object
   },
@@ -83,3 +84,3 @@
 
-    var tabContent = []
+    var tabContent = [];
     var width = this.state.fixedWidth ?
@@ -150,2 +151,2 @@ 100 / this.props.children.length +'%' :
 
-module.exports = Tabs;
+module.exports = Tabs;

src/text-field.jsx

 var React = require('react');
 var ColorManipulator = require('./utils/color-manipulator');
-var Colors = require('./styles/colors');
 var StylePropable = require('./mixins/style-propable');
@@ -44,9 +43,16 @@ var Transitions = require('./styles/transitions');
   getInitialState: function() {
+    var props = this.props;
+    if (props.children)
+      props = props.children.props;
     return {
       errorText: this.props.errorText,
-      hasValue: this.props.value || this.props.defaultValue ||
-        (this.props.valueLink && this.props.valueLink.value)
+      hasValue: props.value || props.defaultValue ||
+        (props.valueLink && props.valueLink.value)
     };
   },
 
+  getTheme: function() {
+    return this.context.muiTheme.component.textField;
+  },
+
   componentDidMount: function() {
@@ -58,11 +64,18 @@ this._uniqueId = UniqueId.generate();
     var hasErrorProp = nextProps.hasOwnProperty('errorText');
+    var newState = {};
+
+    if (hasErrorProp) newState.errorText = nextProps.errorText;
+    if (nextProps.children && nextProps.children.props)
+    {
+      nextProps = nextProps.children.props;
+    }
+
     var hasValueLinkProp = nextProps.hasOwnProperty('valueLink');
     var hasValueProp = nextProps.hasOwnProperty('value');
     var hasNewDefaultValue = nextProps.defaultValue !== this.props.defaultValue;
-    var newState = {};
 
-    if (hasValueProp) {
+    if (hasValueLinkProp) {
+      newState.hasValue = nextProps.valueLink.value;
+    } else if (hasValueProp) {
       newState.hasValue = nextProps.value;
-    } else if (hasValueLinkProp) {
-      newState.hasValue = nextProps.valueLink.value;
     } else if (hasNewDefaultValue) {
@@ -72,12 +85,8 @@ newState.hasValue = nextProps.defaultValue;
 
-    if (hasErrorProp) newState.errorText = nextProps.errorText;
     if (newState) this.setState(newState);
   },
 
-  errorColor: Colors.red500,
-
   getStyles: function() {
-    var palette = this.context.muiTheme.palette;
-    var disabledTextColor = palette.disabledColor;
     var props = this.props;
+    var theme = this.getTheme();
 
@@ -100,3 +109,3 @@ var styles = {
         lineHeight: '12px',
-        color: this.errorColor,
+        color: theme.errorColor,
         transition: Transitions.easeOut(),
@@ -108,3 +117,3 @@ },
         opacity: 1,
-        color: disabledTextColor,
+        color: theme.hintColor,
         transition: Transitions.easeOut()
@@ -119,4 +128,4 @@ },
         outline: 'none',
-        backgroundColor: 'transparent',
-        color: props.disabled ? disabledTextColor : palette.textColor,
+        backgroundColor: theme.backgroundColor,
+        color: props.disabled ? theme.disabledTextColor : theme.textColor,
         font: 'inherit'
@@ -126,3 +135,3 @@ },
         border: 'none',
-        borderBottom: 'solid 1px ' + palette.borderColor,
+        borderBottom: 'solid 1px ' + theme.borderColor,
         position: 'absolute',
@@ -142,4 +151,4 @@ width: '100%',
         cursor: 'default',
-        bottom: 0,
-        color: disabledTextColor
+        bottom: 8,
+        borderBottom: 'dotted 2px ' + theme.disabledTextColor
       }
@@ -164,3 +173,3 @@ };
       borderBottom: 'solid 2px',
-      borderColor: palette.primary1Color,
+      borderColor: theme.focusColor,
       transform: 'scaleX(0)',
@@ -171,3 +180,3 @@ transition: Transitions.easeOut(),
     if (this.state.isFocused) {
-      styles.floatingLabel.color = palette.primary1Color;
+      styles.floatingLabel.color = theme.focusColor;
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)';
@@ -178,3 +187,3 @@ styles.focusUnderline.transform = 'scaleX(1)';
     if (this.state.hasValue) {
-      styles.floatingLabel.color = ColorManipulator.fade(palette.textColor, 0.5);
+      styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? theme.disabledTextColor : theme.floatingLabelColor, 0.5);
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)';
@@ -191,7 +200,11 @@ styles.hint.opacity = 0;
 
-    if (props.errorText && this.state.isFocused) styles.floatingLabel.color = this.errorColor;
+    if (props.style && props.style.height) {
+      styles.hint.lineHeight = props.style.height;
+    }
+
+    if (this.state.errorText && this.state.isFocused) styles.floatingLabel.color = theme.errorColor;
     if (props.floatingLabelText && !props.multiLine) styles.input.paddingTop = 26;
 
-    if (props.errorText) {
-      styles.focusUnderline.borderColor = this.errorColor;
+    if (this.state.errorText) {
+      styles.focusUnderline.borderColor = theme.errorColor;
       styles.focusUnderline.transform = 'scaleX(1)';
@@ -249,2 +262,3 @@ }
       onFocus: this._handleInputFocus,
+      disabled: this.props.disabled,
       onKeyDown: this._handleInputKeyDown
@@ -256,21 +270,23 @@ };
     }
-
-    inputElement = this.props.multiLine ? (
-      <EnhancedTextarea
-        {...other}
-        {...inputProps}
+    if (this.props.children) {
+      inputElement = React.cloneElement(this.props.children, {...inputProps, ...this.props.children.props})
+    }
+    else {
+      inputElement = this.props.multiLine ? (
+        <EnhancedTextarea
+          {...other}
+          {...inputProps}
         rows={this.props.rows}
-        onHeightChange={this._handleTextAreaHeightChange}
-        textareaStyle={this.mergeAndPrefix(styles.textarea)} />
-    ) : (
-      <input
-        {...other}
-        {...inputProps}
-        type={this.props.type} />
-    );
+          onHeightChange={this._handleTextAreaHeightChange}
+          textareaStyle={this.mergeAndPrefix(styles.textarea)} />
+      ) : (
+        <input
+          {...other}
+          {...inputProps}
+          type={this.props.type} />
+      );
+    }
 
     var underlineElement = this.props.disabled ? (
-      <div style={this.mergeAndPrefix(styles.underlineAfter)}>
-        ....................................................................................
-      </div>
+      <div style={this.mergeAndPrefix(styles.underlineAfter)}></div>
     ) : (
@@ -321,3 +337,10 @@ <hr style={this.mergeAndPrefix(styles.underline)}/>
     } else if (this.isMounted()) {
-      this._getInputNode().value = newValue;
+
+      if (this.props.multiLine) {
+        this.refs[this._getRef()].setValue(newValue);
+
+      } else {
+        this._getInputNode().value = newValue;
+      }
+
       this.setState({hasValue: newValue});
@@ -332,3 +355,3 @@ }
   _getInputNode: function() {
-    return this.props.multiLine ?
+    return (this.props.children || this.props.multiLine) ?
       this.refs[this._getRef()].getInputNode() : React.findDOMNode(this.refs[this._getRef()]);
@@ -348,2 +371,4 @@ },
   _handleInputFocus: function(e) {
+    if (this.props.disabled)
+      return
     this.setState({isFocused: true});
@@ -350,0 +375,0 @@ if (this.props.onFocus) this.props.onFocus(e);

src/time-picker/clock-hours.jsx

@@ -10,2 +10,14 @@ var React = require('react');
 
+function getTouchEventOffsetValues(e) {
+  var el = e.target;
+  var boundingRect = el.getBoundingClientRect();
+
+  var offset = {
+    offsetX: e.clientX - boundingRect.left,
+    offsetY: e.clientY - boundingRect.top
+  };
+
+  return offset;
+}
+
 var ClockHours = React.createClass({
@@ -55,25 +67,28 @@
     e.preventDefault(); 
-    this.setClock(e, true);
+    this.setClock(e.nativeEvent, true);
   },
   handleMove: function(e){
-     e.preventDefault();
+    e.preventDefault();
     if(this.isMousePressed(e) != 1 ) return;
-    this.setClock(e, false);
+    this.setClock(e.nativeEvent, false);
   },
-  handleTouch: function(e){
+  handleTouchMove: function(e){
     e.preventDefault(); 
-    this.setClock(e, false);
+    this.setClock(e.changedTouches[0], false);
   },
+  handleTouchEnd: function(e){
+    e.preventDefault(); 
+    this.setClock(e.changedTouches[0], true);
+  },
   setClock: function(e, finish){
-    var ne = e.nativeEvent;
-     
-    var pos = {
-      x: ne.offsetX === undefined ? ne.layerX : ne.offsetX,
-      y: ne.offsetY === undefined ? ne.layerY : ne.offsetY
-    };
+    if (typeof e.offsetX === 'undefined') {
+      var offset = getTouchEventOffsetValues(e);
+
+      e.offsetX = offset.offsetX;
+      e.offsetY = offset.offsetY;
+    }
   
-    var hours = this.getHours(pos.x, pos.y);
+    var hours = this.getHours(e.offsetX, e.offsetY);
  
     this.props.onChange(hours, finish);
-
   },
@@ -173,3 +188,3 @@ getHours: function(x, y){
         {numbers}        
-        <div ref="mask" style={this.mergeAndPrefix(styles.hitMask)} onTouchMove={this.handleTouch} onTouchEnd={this.handleUp} onMouseUp={this.handleUp} onMouseMove={this.handleMove}/>
+        <div ref="mask" style={this.mergeAndPrefix(styles.hitMask)} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd} onMouseUp={this.handleUp} onMouseMove={this.handleMove}/>
       </div>
@@ -176,0 +191,0 @@ );

src/time-picker/clock-minutes.jsx

@@ -11,2 +11,14 @@ var React = require('react');
 
+function getTouchEventOffsetValues(e) {
+  var el = e.target;
+  var boundingRect = el.getBoundingClientRect();
+
+  var offset = {
+    offsetX: e.clientX - boundingRect.left,
+    offsetY: e.clientY - boundingRect.top
+  };
+
+  return offset;
+}
+
 var ClockMinutes = React.createClass({
@@ -58,3 +70,3 @@
     e.preventDefault(); 
-    this.setClock(e, true);
+    this.setClock(e.nativeEvent, true);
   },
@@ -64,24 +76,19 @@ handleMove: function(e){
     if(this.isMousePressed(e) != 1 ) return;
-    this.setClock(e, false);
+    this.setClock(e.nativeEvent, false);
   },
   handleTouch: function(e){
     e.preventDefault(); 
-    this.setClock(e, false);
+    this.setClock(e.changedTouches[0], false);
   },
   setClock: function(e, finish){
+    if (typeof e.offsetX === 'undefined') {
+      var offset = getTouchEventOffsetValues(e);
 
-     e.preventDefault();
-     if(this.isMousePressed(e) != 1 ) return;
-     
-     var ne = e.nativeEvent;
+      e.offsetX = offset.offsetX;
+      e.offsetY = offset.offsetY;
+    }
 
-     var pos = {
-        x: ne.offsetX === undefined ? ne.layerX : ne.offsetX,
-        y: ne.offsetY === undefined ? ne.layerY : ne.offsetY
-     };
-  
-     var minutes = this.getMinutes(pos.x, pos.y)
- 
+     var minutes = this.getMinutes(e.offsetX, e.offsetY);
+
      this.props.onChange(minutes, finish);
-   
   },
@@ -159,3 +166,3 @@ getMinutes: function(x, y){
         {minutes.numbers}        
-        <div ref="mask"  style={this.mergeAndPrefix(styles.hitMask)} hasSelected={minutes.hasSelected}  onTouchMove={this.handleTouch} onTouchEnd={this.handleUp} onMouseUp={this.handleUp} onMouseMove={this.handleMove} />
+        <div ref="mask"  style={this.mergeAndPrefix(styles.hitMask)} hasSelected={minutes.hasSelected} onTouchMove={this.handleTouch} onTouchEnd={this.handleTouch} onMouseUp={this.handleUp} onMouseMove={this.handleMove} />
       </div>
@@ -162,0 +169,0 @@ );

src/time-picker/clock-number.jsx

@@ -111,3 +111,3 @@ var React = require('react');
     return (
-        <span style={styles.root}>{this.props.value}</span>       
+        <span style={this.mergeAndPrefix(styles.root)}>{this.props.value}</span>       
     );
@@ -114,0 +114,0 @@ }

src/time-picker/clock-pointer.jsx

@@ -101,3 +101,3 @@ var React = require('react');
     return (
-        <div style={styles.root} >
+        <div style={this.mergeAndPrefix(styles.root)} >
           <div style={styles.mark} />
@@ -104,0 +104,0 @@ </div>

src/time-picker/time-picker.jsx

@@ -123,2 +123,4 @@ var React = require('react');
   _handleInputTouchTap: function(e) {
+    e.preventDefault();
+
     this.setState({
@@ -125,0 +127,0 @@ dialogTime: this.getTime()

src/toggle.jsx

@@ -17,2 +17,3 @@ var React = require('react');
     elementStyle: React.PropTypes.object,
+    labelStyle: React.PropTypes.object,
     onToggle: React.PropTypes.func,
@@ -42,7 +43,11 @@ toggled: React.PropTypes.bool,
       icon: {
+        width: 36,
         padding: '4px 0px 6px 2px'
       },
+      toggleElemet: {
+        width: toggleTrackWidth
+      },
       track: {
           transition: Transitions.easeOut(),
-          width: toggleTrackWidth,
+          width: '100%',
           height: 14,
@@ -56,3 +61,3 @@ borderRadius: 30,
         top: 1,
-        left: 2,
+        left: 0,
         width: toggleSize,
@@ -69,3 +74,3 @@ height: toggleSize,
         backgroundColor: this.getTheme().thumbOnColor,
-        left: 18
+        left: '100%'
       },
@@ -77,2 +82,5 @@ trackWhenDisabled: {
         backgroundColor: this.getTheme().thumbDisabledColor
+      },
+      label: {
+        color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
       }
@@ -105,4 +113,10 @@ };
 
+    if (this.state.switched) {
+      thumbStyles.marginLeft = '-' + thumbStyles.width;
+    }
+    
+    var toggleElemetStyles = this.mergeAndPrefix(styles.toggleElemet, this.props.elementStyle);
+
     var toggleElement = (
-      <div style={this.mergeAndPrefix(this.props.elementStyle)}>
+      <div style={toggleElemetStyles}>
         <div style={trackStyles} />
@@ -113,6 +127,6 @@ <Paper style={thumbStyles} circle={true} zDepth={1} />
 
-    var customRippleStyle = {
+    var customRippleStyle = this.mergeAndPrefix({
       top: '-10',
       left: '-10'
-    };
+    }, this.props.rippleStyle);
 
@@ -127,2 +141,7 @@ var rippleColor =  this.state.switched ?
 
+    var labelStyle = this.mergeAndPrefix(
+      styles.label,
+      this.props.labelStyle
+    );
+
     var enhancedSwitchProps = {
@@ -137,2 +156,3 @@ ref: "enhancedSwitch",
       thumbStyle: thumbStyles,
+      labelStyle: labelStyle,
       switched: this.state.switched,
@@ -139,0 +159,0 @@ onSwitch: this._handleToggle,

src/toolbar/toolbar-group.jsx

@@ -23,3 +23,3 @@ var React = require('react');
   },
-  
+
   getTheme: function() {
@@ -48,3 +48,3 @@ return this.context.muiTheme.component.toolbar;
         },
-        controlBg: {  
+        controlBg: {
           backgroundColor: this.getTheme().menuHoverColor,
@@ -91,4 +91,7 @@ borderRadius: 0
     var newChildren = React.Children.map(this.props.children, function(currentChild) {
+      if(!currentChild) {
+        return null;
+      }
       switch (currentChild.type.displayName) {
-        case 'DropDownMenu' : 
+        case 'DropDownMenu' :
           return React.cloneElement(currentChild, {
@@ -110,3 +113,3 @@ style: styles.dropDownMenu.root,
           });
-        case 'FontIcon' : 
+        case 'FontIcon' :
           return React.cloneElement(currentChild, {
@@ -117,3 +120,3 @@ style: styles.icon.root,
           });
-        case 'ToolbarSeparator' : case 'ToolbarTitle' : 
+        case 'ToolbarSeparator' : case 'ToolbarTitle' :
           return React.cloneElement(currentChild, {
@@ -120,0 +123,0 @@ style: this.mergeStyles(styles.span, currentChild.props.style)

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

829812

increased by14.94%

Number of package files

262

increased by9.17%

Lines of code

24014

increased by15.55%

No dependency changes