belle - npm Package Compare versions

Comparing version 2.0.0-beta1 to 2.0.0-rc1

CHANGELOG.md

@@ -14,2 +14,9 @@ # Change Log
 
+### Added
+- [DatePicker] Added DatePicker component
+
+```
+<DatePicker />
+```
+
 ### Removed
@@ -16,0 +23,0 @@ - [Rating] Removed the `resetValue` function. Reseting should accomplished by making the Rating a controlled component and passing in the value as `undefined`. See an example below:

lib/components/Button.js

@@ -7,8 +7,8 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -62,5 +62,5 @@
   var baseDisabledHoverStyle = properties.primary ? _styleButton2['default'].primaryDisabledHoverStyle : _styleButton2['default'].disabledHoverStyle;
-  var hoverStyle = (0, _utilsHelpers.extend)({}, baseHoverStyle, properties.hoverStyle);
-  var activeStyle = (0, _utilsHelpers.extend)({}, baseActiveStyle, properties.activeStyle);
-  var disabledHoverStyle = (0, _utilsHelpers.extend)({}, baseDisabledHoverStyle, properties.disabledHoverStyle);
+  var hoverStyle = _extends({}, baseHoverStyle, properties.hoverStyle);
+  var activeStyle = _extends({}, baseActiveStyle, properties.activeStyle);
+  var disabledHoverStyle = _extends({}, baseDisabledHoverStyle, properties.disabledHoverStyle);
 
@@ -72,3 +72,3 @@ var focusStyle = undefined;
     var baseFocusStyle = properties.primary ? _styleButton2['default'].primaryFocusStyle : _styleButton2['default'].focusStyle;
-    focusStyle = (0, _utilsHelpers.extend)({}, baseFocusStyle, properties.focusStyle);
+    focusStyle = _extends({}, baseFocusStyle, properties.focusStyle);
   }
@@ -118,2 +118,3 @@
       childProps: sanitizeChildProps(properties),
+
       // used for touch devices like iOS Chrome/Safari where the active
@@ -123,2 +124,3 @@ // pseudoClass is not supported on touch
     };
+
     // The focused attribute is used to apply the one-time focus animation.
@@ -268,3 +270,3 @@ // As it is reset after every render it can't be set inside state as this
       var baseStyle = this.props.primary ? _styleButton2['default'].primaryStyle : _styleButton2['default'].style;
-      var baseButtonStyle = (0, _utilsHelpers.extend)({}, baseStyle, this.props.style);
+      var baseButtonStyle = _extends({}, baseStyle, this.props.style);
 
@@ -274,5 +276,5 @@ var buttonStyle = undefined;
         if (this.props.primary) {
-          buttonStyle = (0, _utilsHelpers.extend)({}, baseButtonStyle, _styleButton2['default'].primaryDisabledStyle, this.props.disabledStyle);
+          buttonStyle = _extends({}, baseButtonStyle, _styleButton2['default'].primaryDisabledStyle, this.props.disabledStyle);
         } else {
-          buttonStyle = (0, _utilsHelpers.extend)({}, baseButtonStyle, _styleButton2['default'].disabledStyle, this.props.disabledStyle);
+          buttonStyle = _extends({}, baseButtonStyle, _styleButton2['default'].disabledStyle, this.props.disabledStyle);
         }
@@ -282,6 +284,6 @@ } else {
           var baseActiveStyle = this.props.primary ? _styleButton2['default'].primaryActiveStyle : _styleButton2['default'].activeStyle;
-          buttonStyle = (0, _utilsHelpers.extend)({}, baseButtonStyle, baseActiveStyle, this.props.activeStyle);
+          buttonStyle = _extends({}, baseButtonStyle, baseActiveStyle, this.props.activeStyle);
         } else if (this.focused && !this.state.active && !this.mouseDownOnButton && this.preventFocusStyleForTouchAndClick) {
           var baseFocusStyle = this.props.primary ? _styleButton2['default'].primaryFocusStyle : _styleButton2['default'].focusStyle;
-          buttonStyle = (0, _utilsHelpers.extend)({}, baseButtonStyle, baseFocusStyle, this.props.focusStyle);
+          buttonStyle = _extends({}, baseButtonStyle, baseFocusStyle, this.props.focusStyle);
         } else {
@@ -313,20 +315,20 @@ buttonStyle = baseButtonStyle;
     value: {
-      activeStyle: _react2['default'].PropTypes.object,
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.node), _react2['default'].PropTypes.node]),
-      className: _react2['default'].PropTypes.string,
-      disabled: _react2['default'].PropTypes.bool,
-      type: _react2['default'].PropTypes.oneOf(buttonTypes),
-      style: _react2['default'].PropTypes.object,
-      focusStyle: _react2['default'].PropTypes.object,
-      hoverStyle: _react2['default'].PropTypes.object,
-      disabledStyle: _react2['default'].PropTypes.object,
-      disabledHoverStyle: _react2['default'].PropTypes.object,
-      onTouchStart: _react2['default'].PropTypes.func,
-      onTouchEnd: _react2['default'].PropTypes.func,
-      onTouchCancel: _react2['default'].PropTypes.func,
-      onMouseDown: _react2['default'].PropTypes.func,
-      onFocus: _react2['default'].PropTypes.func,
-      onBlur: _react2['default'].PropTypes.func,
-      preventFocusStyleForTouchAndClick: _react2['default'].PropTypes.bool,
-      primary: _react2['default'].PropTypes.bool
+      activeStyle: _react.PropTypes.object,
+      children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+      className: _react.PropTypes.string,
+      disabled: _react.PropTypes.bool,
+      type: _react.PropTypes.oneOf(buttonTypes),
+      style: _react.PropTypes.object,
+      focusStyle: _react.PropTypes.object,
+      hoverStyle: _react.PropTypes.object,
+      disabledStyle: _react.PropTypes.object,
+      disabledHoverStyle: _react.PropTypes.object,
+      onTouchStart: _react.PropTypes.func,
+      onTouchEnd: _react.PropTypes.func,
+      onTouchCancel: _react.PropTypes.func,
+      onMouseDown: _react.PropTypes.func,
+      onFocus: _react.PropTypes.func,
+      onBlur: _react.PropTypes.func,
+      preventFocusStyleForTouchAndClick: _react.PropTypes.bool,
+      primary: _react.PropTypes.bool
     },
@@ -333,0 +335,0 @@ enumerable: true

lib/components/Card.js

@@ -11,6 +11,8 @@ 'use strict';
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -24,4 +26,2 @@
 
-var _utilsHelpers = require('../utils/helpers');
-
 var _styleCard = require('../style/card');
@@ -32,9 +32,2 @@
 /**
- * Returns an object with properties that are relevant for the wrapping div.
- */
-function sanitizeChildProps(properties) {
-  return (0, _utilsHelpers.omit)(properties, ['style']);
-}
-
-/**
  * Card component with a light shadow.
@@ -53,5 +46,7 @@ *
     _get(Object.getPrototypeOf(Card.prototype), 'constructor', this).call(this, properties);
-    this.state = {
-      childProps: sanitizeChildProps(properties)
-    };
+    var style = properties.style;
+
+    var childProps = _objectWithoutProperties(properties, ['style']);
+
+    this.childProps = childProps;
   }
@@ -63,7 +58,10 @@
     /**
-     * Update the _childProperties based on the updated properties passed to the
-     * card.
+     * Update the childProps based on the updated properties passed to the card.
      */
     value: function componentWillReceiveProps(properties) {
-      this.setState({ childProps: sanitizeChildProps(properties) });
+      var style = properties.style;
+
+      var childProps = _objectWithoutProperties(properties, ['style']);
+
+      this.childProps = childProps;
     }
@@ -73,7 +71,7 @@ }, {
     value: function render() {
-      var divStyle = (0, _utilsHelpers.extend)({}, _styleCard2['default'].style, this.props.style);
+      var divStyle = _extends({}, _styleCard2['default'].style, this.props.style);
 
       return _react2['default'].createElement(
         'div',
-        _extends({}, this.state.childProps, { style: divStyle }),
+        _extends({}, this.childProps, { style: divStyle }),
         this.props.children
@@ -89,5 +87,4 @@ );
     value: {
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.node), _react2['default'].PropTypes.node]),
-      style: _react2['default'].PropTypes.object,
-      test: _react2['default'].PropTypes.object
+      children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+      style: _react.PropTypes.object
     },
@@ -94,0 +91,0 @@ enumerable: true

lib/components/Choice.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
@@ -51,4 +51,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
     value: {
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.node), _react2['default'].PropTypes.node]),
-      value: _react2['default'].PropTypes.bool.isRequired
+      children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+      value: _react.PropTypes.bool.isRequired
     },
@@ -55,0 +55,0 @@ enumerable: true

lib/components/ComboBox.js

@@ -7,8 +7,8 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -44,6 +44,6 @@
 function updatePseudoClassStyle(styleId, caretStyleId, properties) {
-  var hoverStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].hoverStyle, properties.hoverStyle);
-  var focusStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].focusStyle, properties.focusStyle);
-  var disabledHoverStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].disabledHoverStyle, properties.disabledHoverStyle);
-  var caretFocusStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].caretFocusStyle);
+  var hoverStyle = _extends({}, _styleComboBox2['default'].hoverStyle, properties.hoverStyle);
+  var focusStyle = _extends({}, _styleComboBox2['default'].focusStyle, properties.focusStyle);
+  var disabledHoverStyle = _extends({}, _styleComboBox2['default'].disabledHoverStyle, properties.disabledHoverStyle);
+  var caretFocusStyle = _extends({}, _styleComboBox2['default'].caretFocusStyle);
 
@@ -107,2 +107,3 @@ var styles = [{
   }
+
   return false;
@@ -146,4 +147,15 @@ }
   _createClass(ComboBox, [{
-    key: '_getHint',
+    key: 'getChildContext',
+    value: function getChildContext() {
+      var value = undefined;
+      if (typeof this.state.focusedOptionIndex !== 'undefined') {
+        value = this.filteredOptions[this.state.focusedOptionIndex].props.value;
+      }
 
+      return {
+        isDisabled: this.props.disabled,
+        isHoveredValue: value
+      };
+    }
+
     /**
@@ -160,2 +172,4 @@ * This method will calculate the hint that should be present in comboBox at some point in time. Rules:
      */
+  }, {
+    key: '_getHint',
     value: function _getHint() {
@@ -173,2 +187,3 @@ if (this.state.isOpen) {
           }
+
           if (hint) {
@@ -205,13 +220,3 @@ if (inputValue && inputValue.length > 0) {
     value: function componentWillReceiveProps(properties) {
-      var inputValue = undefined;
-      if ((0, _utilsHelpers.has)(properties, 'valueLink')) {
-        inputValue = properties.valueLink.value;
-      } else if ((0, _utilsHelpers.has)(properties, 'value')) {
-        inputValue = properties.value;
-      } else {
-        inputValue = this.state.inputValue;
-      }
-
       var newState = {
-        inputValue: inputValue,
         wrapperProps: sanitizeWrapperProps(properties.wrapperProps),
@@ -223,4 +228,13 @@ inputProps: sanitizeInputProps(properties),
 
+      if ((0, _utilsHelpers.has)(properties, 'valueLink')) {
+        newState.inputValue = properties.valueLink.value;
+      } else if ((0, _utilsHelpers.has)(properties, 'value')) {
+        newState.inputValue = properties.value;
+      }
+
+      if (newState.inputValue) {
+        newState.filteredOptions = ComboBox.filterOptions(newState.inputValue, properties);
+      }
+
       this.setState(newState);
-      this.filteredOptions = ComboBox.filterOptions(inputValue, properties);
 
@@ -266,2 +280,3 @@ (0, _utilsInjectStyle.removeAllStyles)([this._styleId, this._caretStyleId]);
         }
+
         this._touchStartedAt = undefined;
@@ -439,2 +454,3 @@ }
       }
+
       this.setState({
@@ -457,2 +473,3 @@ focusedOptionIndex: index
         }
+
         this.setState({
@@ -588,6 +605,6 @@ focusedOptionIndex: index
 
-      var inputStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].style, this.props.style);
-      var hintStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].hintStyle, this.props.hintStyle);
-      var wrapperStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].wrapperStyle, this.props.wrapperStyle);
-      var menuStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].menuStyle, this.props.menuStyle);
+      var inputStyle = _extends({}, _styleComboBox2['default'].style, this.props.style);
+      var hintStyle = _extends({}, _styleComboBox2['default'].hintStyle, this.props.hintStyle);
+      var wrapperStyle = _extends({}, _styleComboBox2['default'].wrapperStyle, this.props.wrapperStyle);
+      var menuStyle = _extends({}, _styleComboBox2['default'].menuStyle, this.props.menuStyle);
 
@@ -600,3 +617,3 @@ var hint = this.props.enableHint ? this._getHint() : undefined;
       if (this.props.disabled) {
-        inputStyle = (0, _utilsHelpers.extend)(inputStyle, _styleComboBox2['default'].disabledStyle, this.props.disabledStyle);
+        inputStyle = _extends({}, inputStyle, _styleComboBox2['default'].disabledStyle, this.props.disabledStyle);
       }
@@ -608,7 +625,7 @@
         if (this.props.disabled) {
-          caretStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].caretToOpenStyle, this.props.caretToOpenStyle, _styleComboBox2['default'].disabledCaretToOpenStyle, this.props.disabledCaretToOpenStyle);
+          caretStyle = _extends({}, _styleComboBox2['default'].caretToOpenStyle, this.props.caretToOpenStyle, _styleComboBox2['default'].disabledCaretToOpenStyle, this.props.disabledCaretToOpenStyle);
         } else if (this.state.isOpen) {
-          caretStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].caretToCloseStyle, this.props.caretToCloseStyle);
+          caretStyle = _extends({}, _styleComboBox2['default'].caretToCloseStyle, this.props.caretToCloseStyle);
         } else {
-          caretStyle = (0, _utilsHelpers.extend)({}, _styleComboBox2['default'].caretToOpenStyle, this.props.caretToOpenStyle);
+          caretStyle = _extends({}, _styleComboBox2['default'].caretToOpenStyle, this.props.caretToOpenStyle);
         }
@@ -656,7 +673,2 @@ }
           _react2['default'].Children.map(this.filteredOptions, function (entry, index) {
-            var isHovered = _this.state.focusedOptionIndex === index;
-            var option = _react2['default'].cloneElement(entry, {
-              _isHovered: isHovered
-            });
-
             return _react2['default'].createElement(
@@ -673,6 +685,6 @@ 'li',
                 onMouseDown: function (event) {
-                  event.preventDefault();
+                  return event.preventDefault();
                 },
                 role: 'option' },
-              option
+              entry
             );
@@ -698,2 +710,3 @@ })
         }
+
         if (properties.maxOptions) {
@@ -703,2 +716,3 @@ filteredOptions = filteredOptions.splice(0, properties.maxOptions);
       }
+
       return filteredOptions;
@@ -713,41 +727,48 @@ }
     value: {
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.array, _react2['default'].PropTypes.object]),
-      defaultValue: _react2['default'].PropTypes.string,
-      value: _react2['default'].PropTypes.string,
-      valueLink: _react2['default'].PropTypes.shape({
-        value: _react2['default'].PropTypes.string,
-        requestChange: _react2['default'].PropTypes.func.isRequired
+      children: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object]),
+      defaultValue: _react.PropTypes.string,
+      value: _react.PropTypes.string,
+      valueLink: _react.PropTypes.shape({
+        value: _react.PropTypes.string,
+        requestChange: _react.PropTypes.func.isRequired
       }),
-      placeholder: _react2['default'].PropTypes.string,
-      disabled: _react2['default'].PropTypes.bool,
-      wrapperProps: _react2['default'].PropTypes.object,
-      menuProps: _react2['default'].PropTypes.object,
-      caretProps: _react2['default'].PropTypes.object,
-      onUpdate: _react2['default'].PropTypes.func,
-      onInputMatch: _react2['default'].PropTypes.func,
-      tabIndex: _react2['default'].PropTypes.number,
-      onKeyDown: _react2['default'].PropTypes.func,
-      onFocus: _react2['default'].PropTypes.func,
-      onBlur: _react2['default'].PropTypes.func,
-      className: _react2['default'].PropTypes.string,
-      caretClassName: _react2['default'].PropTypes.string,
-      style: _react2['default'].PropTypes.object,
-      wrapperStyle: _react2['default'].PropTypes.object,
-      hintStyle: _react2['default'].PropTypes.object,
-      menuStyle: _react2['default'].PropTypes.object,
-      focusStyle: _react2['default'].PropTypes.object,
-      disabledStyle: _react2['default'].PropTypes.object,
-      disabledHoverStyle: _react2['default'].PropTypes.object,
-      hoverStyle: _react2['default'].PropTypes.object,
-      caretToOpenStyle: _react2['default'].PropTypes.object,
-      caretToCloseStyle: _react2['default'].PropTypes.object,
-      disabledCaretToOpenStyle: _react2['default'].PropTypes.object,
-      maxOptions: _react2['default'].PropTypes.number,
-      displayCaret: _react2['default'].PropTypes.bool,
-      enableHint: _react2['default'].PropTypes.bool,
-      filterFunc: _react2['default'].PropTypes.func,
-      'aria-label': _react2['default'].PropTypes.string
+      placeholder: _react.PropTypes.string,
+      disabled: _react.PropTypes.bool,
+      wrapperProps: _react.PropTypes.object,
+      menuProps: _react.PropTypes.object,
+      caretProps: _react.PropTypes.object,
+      onUpdate: _react.PropTypes.func,
+      onInputMatch: _react.PropTypes.func,
+      tabIndex: _react.PropTypes.number,
+      onKeyDown: _react.PropTypes.func,
+      onFocus: _react.PropTypes.func,
+      onBlur: _react.PropTypes.func,
+      className: _react.PropTypes.string,
+      caretClassName: _react.PropTypes.string,
+      style: _react.PropTypes.object,
+      wrapperStyle: _react.PropTypes.object,
+      hintStyle: _react.PropTypes.object,
+      menuStyle: _react.PropTypes.object,
+      focusStyle: _react.PropTypes.object,
+      disabledStyle: _react.PropTypes.object,
+      disabledHoverStyle: _react.PropTypes.object,
+      hoverStyle: _react.PropTypes.object,
+      caretToOpenStyle: _react.PropTypes.object,
+      caretToCloseStyle: _react.PropTypes.object,
+      disabledCaretToOpenStyle: _react.PropTypes.object,
+      maxOptions: _react.PropTypes.number,
+      displayCaret: _react.PropTypes.bool,
+      enableHint: _react.PropTypes.bool,
+      filterFunc: _react.PropTypes.func,
+      'aria-label': _react.PropTypes.string
     },
     enumerable: true
   }, {
+    key: 'childContextTypes',
+    value: {
+      isDisabled: _react.PropTypes.bool.isRequired,
+      isHoveredValue: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.string, _react.PropTypes.number])
+    },
+    enumerable: true
+  }, {
     key: 'defaultProps',
@@ -754,0 +775,0 @@ value: {

lib/components/Option.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
@@ -34,3 +34,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 function sanitizeChildProps(properties) {
-  return (0, _utilsHelpers.omit)(properties, ['style', 'hoverStyle', 'selectStyle', 'disabledSelectStyle', 'value', '_isHovered', '_isDisplayedAsSelected', '_isDisabled']);
+  return (0, _utilsHelpers.omit)(properties, ['style', 'hoverStyle', 'selectStyle', 'disabledSelectStyle', 'value', '_isDisplayedAsSelected']);
 }
@@ -72,10 +72,10 @@
       if (this.props._isDisplayedAsSelected) {
-        optionStyle = (0, _utilsHelpers.extend)({}, _styleOption2['default'].selectStyle, this.props.selectStyle);
-        if (this.props._isDisabled) {
-          optionStyle = (0, _utilsHelpers.extend)(optionStyle, _styleOption2['default'].disabledSelectStyle, this.props.disabledSelectStyle);
+        optionStyle = _extends({}, _styleOption2['default'].selectStyle, this.props.selectStyle);
+        if (this.context.isDisabled) {
+          optionStyle = _extends({}, optionStyle, _styleOption2['default'].disabledSelectStyle, this.props.disabledSelectStyle);
         }
       } else {
-        optionStyle = (0, _utilsHelpers.extend)({}, _styleOption2['default'].style, this.props.style);
-        if (this.props._isHovered) {
-          optionStyle = (0, _utilsHelpers.extend)(optionStyle, _styleOption2['default'].hoverStyle, this.props.hoverStyle);
+        optionStyle = _extends({}, _styleOption2['default'].style, this.props.style);
+        if (this.context.isHoveredValue === this.props.value) {
+          optionStyle = _extends({}, optionStyle, _styleOption2['default'].hoverStyle, this.props.hoverStyle);
         }
@@ -99,19 +99,22 @@ }
     value: {
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.node), _react2['default'].PropTypes.node]),
-      style: _react2['default'].PropTypes.object,
-      hoverStyle: _react2['default'].PropTypes.object,
-      selectStyle: _react2['default'].PropTypes.object,
-      disabledSelectStyle: _react2['default'].PropTypes.object,
-      _isDisabled: _react2['default'].PropTypes.bool,
-      _isHovered: _react2['default'].PropTypes.bool,
-      _isDisplayedAsSelected: _react2['default'].PropTypes.bool,
-      value: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.string, _react2['default'].PropTypes.number]).isRequired
+      children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+      style: _react.PropTypes.object,
+      hoverStyle: _react.PropTypes.object,
+      selectStyle: _react.PropTypes.object,
+      disabledSelectStyle: _react.PropTypes.object,
+      _isDisplayedAsSelected: _react.PropTypes.bool,
+      value: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.string, _react.PropTypes.number]).isRequired
     },
     enumerable: true
   }, {
+    key: 'contextTypes',
+    value: {
+      isDisabled: _react.PropTypes.bool.isRequired,
+      isHoveredValue: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.string, _react.PropTypes.number])
+    },
+    enumerable: true
+  }, {
     key: 'defaultProps',
     value: {
-      _isHovered: false,
-      _isDisplayedAsSelected: false,
-      _isDisabled: false
+      _isDisplayedAsSelected: false
     },
@@ -118,0 +121,0 @@ enumerable: true

lib/components/Placeholder.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
@@ -68,5 +68,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
     value: function render() {
-      var computedStyle = (0, _utilsHelpers.extend)({}, _stylePlaceholder2['default'].style, this.props.style);
+      var computedStyle = _extends({}, _stylePlaceholder2['default'].style, this.props.style);
       if (this.props._isDisabled) {
-        computedStyle = (0, _utilsHelpers.extend)(computedStyle, _stylePlaceholder2['default'].disabledStyle, this.props.disabledStyle);
+        computedStyle = _extends({}, computedStyle, _stylePlaceholder2['default'].disabledStyle, this.props.disabledStyle);
       }
@@ -87,6 +87,6 @@
     value: {
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.node), _react2['default'].PropTypes.node]),
-      style: _react2['default'].PropTypes.object,
-      disabledStyle: _react2['default'].PropTypes.object,
-      _isDisabled: _react2['default'].PropTypes.bool
+      children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+      style: _react.PropTypes.object,
+      disabledStyle: _react.PropTypes.object,
+      _isDisabled: _react.PropTypes.bool
     },
@@ -93,0 +93,0 @@ enumerable: true

lib/components/Rating.js

@@ -7,8 +7,8 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -66,4 +66,5 @@
   } else {
-    ratingFocusStyle = (0, _utilsHelpers.extend)({}, _styleRatingJs2['default'].focusStyle, properties.focusStyle);
+    ratingFocusStyle = _extends({}, _styleRatingJs2['default'].focusStyle, properties.focusStyle);
   }
+
   var styles = [{
@@ -143,2 +144,3 @@ id: ratingWrapperStyleId,
       }
+
       this.setState(newState);
@@ -190,2 +192,3 @@
       }
+
       if (this.props.onMouseEnter) {
@@ -211,2 +214,3 @@ this.props.onMouseEnter(event);
       }
+
       if (this.props.onMouseMove) {
@@ -263,3 +267,3 @@ this.props.onMouseMove(event);
         var value = Number(event.target.getAttribute('data-belle-value'));
-        this._updateComponent(value);
+        this._triggerComponentUpdate(value);
       }
@@ -297,2 +301,3 @@
       }
+
       if (this.props.onTouchStart) {
@@ -304,17 +309,2 @@ this.props.onTouchStart(event);
     /**
-     * The function will be passed to requestAnimationFrame for touchMove
-     */
-  }, {
-    key: '_updateComponentOnTouchMove',
-    value: function _updateComponentOnTouchMove(touches) {
-      var touchedElement = document.elementFromPoint(touches.clientX, touches.clientY);
-      var value = Number(touchedElement.getAttribute('data-belle-value'));
-      if (value && this.state.focusedValue !== value) {
-        this.setState({
-          focusedValue: value
-        });
-      }
-    }
-
-    /**
      * set the focusedValue depending on mouse position
@@ -330,3 +320,3 @@ */
         // see http://stackoverflow.com/a/9678166/837709
-        var animationFrame = _utilsAnimationFrameManagement.requestAnimationFrame.call(window, this._updateComponentOnTouchMove.bind(this, touches));
+        var animationFrame = _utilsAnimationFrameManagement.requestAnimationFrame.call(window, this._triggerComponentUpdateOnTouchMove.bind(this, touches));
 
@@ -338,2 +328,3 @@ if (this.previousTouchMoveFrame) {
         }
+
         this.previousTouchMoveFrame = animationFrame;
@@ -357,3 +348,3 @@ }
         var value = this.state.focusedValue;
-        this._updateComponent(value);
+        this._triggerComponentUpdate(value);
       }
@@ -378,2 +369,3 @@
       }
+
       if (this.props.onTouchCancel) {
@@ -397,2 +389,3 @@ this.props.onTouchCancel(event);
       }
+
       if (this.props.onBlur) {
@@ -419,33 +412,2 @@ this.props.onBlur(event);
     /**
-     * update component when component is clicked, touch ends, enter or space key are hit
-     * different update logic will apply depending on whether component has property defaultValue, value or valueLink specified
-     */
-  }, {
-    key: '_updateComponent',
-    value: function _updateComponent(value) {
-      if ((0, _utilsHelpers.has)(this.props, 'valueLink')) {
-        this.props.valueLink.requestChange(value);
-        this.setState({
-          focusedValue: undefined,
-          isActive: false
-        });
-      } else if ((0, _utilsHelpers.has)(this.props, 'value')) {
-        this.setState({
-          focusedValue: undefined,
-          isActive: false
-        });
-      } else {
-        this.setState({
-          focusedValue: undefined,
-          isActive: false,
-          value: value
-        });
-      }
-
-      if (this.props.onUpdate) {
-        this.props.onUpdate({ value: value });
-      }
-    }
-
-    /**
      * Manages the keyboard events.
@@ -477,2 +439,3 @@ *
       }
+
       if (this.props.onKeyDown) {
@@ -510,2 +473,3 @@ this.props.onKeyDown(event);
       }
+
       this.setState({
@@ -529,3 +493,4 @@ focusedValue: newValue
         }
-        this._updateComponent(newValue);
+
+        this._triggerComponentUpdate(newValue);
       }
@@ -558,2 +523,3 @@ }
       }
+
       return value;
@@ -563,2 +529,48 @@ }
     /**
+     * The function will be passed to requestAnimationFrame for touchMove
+     */
+  }, {
+    key: '_triggerComponentUpdateOnTouchMove',
+    value: function _triggerComponentUpdateOnTouchMove(touches) {
+      var touchedElement = document.elementFromPoint(touches.clientX, touches.clientY);
+      var value = Number(touchedElement.getAttribute('data-belle-value'));
+      if (value && this.state.focusedValue !== value) {
+        this.setState({
+          focusedValue: value
+        });
+      }
+    }
+
+    /**
+     * update component when component is clicked, touch ends, enter or space key are hit
+     * different update logic will apply depending on whether component has property defaultValue, value or valueLink specified
+     */
+  }, {
+    key: '_triggerComponentUpdate',
+    value: function _triggerComponentUpdate(value) {
+      if ((0, _utilsHelpers.has)(this.props, 'valueLink')) {
+        this.props.valueLink.requestChange(value);
+        this.setState({
+          focusedValue: undefined,
+          isActive: false
+        });
+      } else if ((0, _utilsHelpers.has)(this.props, 'value')) {
+        this.setState({
+          focusedValue: undefined,
+          isActive: false
+        });
+      } else {
+        this.setState({
+          focusedValue: undefined,
+          isActive: false,
+          value: value
+        });
+      }
+
+      if (this.props.onUpdate) {
+        this.props.onUpdate({ value: value });
+      }
+    }
+
+    /**
      * Returns the HTML function to be rendered by this component.
@@ -574,22 +586,23 @@ */
 
-      var characterStyle = (0, _utilsHelpers.extend)({}, _styleRatingJs2['default'].characterStyle, this.props.characterStyle);
+      var characterStyle = _extends({}, _styleRatingJs2['default'].characterStyle, this.props.characterStyle);
 
       if (this.state.isActive) {
-        characterStyle = (0, _utilsHelpers.extend)({}, characterStyle, _styleRatingJs2['default'].activeCharacterStyle, this.props.activeCharacterStyle);
+        characterStyle = _extends({}, characterStyle, _styleRatingJs2['default'].activeCharacterStyle, this.props.activeCharacterStyle);
       } else if (this.state.isHover) {
-        characterStyle = (0, _utilsHelpers.extend)({}, characterStyle, _styleRatingJs2['default'].hoverCharacterStyle, this.props.hoverCharacterStyle);
+        characterStyle = _extends({}, characterStyle, _styleRatingJs2['default'].hoverCharacterStyle, this.props.hoverCharacterStyle);
       }
 
-      var wrapperStyle = (0, _utilsHelpers.extend)({}, _styleRatingJs2['default'].style, this.props.style);
+      var wrapperStyle = _extends({}, _styleRatingJs2['default'].style, this.props.style);
       if (this.props.disabled) {
-        wrapperStyle = (0, _utilsHelpers.extend)({}, wrapperStyle, _styleRatingJs2['default'].disabledStyle, this.props.disabledStyle);
+        wrapperStyle = _extends({}, wrapperStyle, _styleRatingJs2['default'].disabledStyle, this.props.disabledStyle);
         if (this.state.isHover) {
-          wrapperStyle = (0, _utilsHelpers.extend)(wrapperStyle, _styleRatingJs2['default'].disabledHoverStyle, this.props.disabledHoverStyle);
+          wrapperStyle = _extends({}, wrapperStyle, _styleRatingJs2['default'].disabledHoverStyle, this.props.disabledHoverStyle);
         }
       } else {
         if (this.state.isFocus && this.preventFocusStyleForTouchAndClick) {
-          wrapperStyle = (0, _utilsHelpers.extend)({}, wrapperStyle, _styleRatingJs2['default'].focusStyle, this.props.focusStyle);
+          wrapperStyle = _extends({}, wrapperStyle, _styleRatingJs2['default'].focusStyle, this.props.focusStyle);
         }
+
         if (this.state.isHover) {
-          wrapperStyle = (0, _utilsHelpers.extend)(wrapperStyle, _styleRatingJs2['default'].hoverStyle, this.props.hoverStyle);
+          wrapperStyle = _extends({}, wrapperStyle, _styleRatingJs2['default'].hoverStyle, this.props.hoverStyle);
         }
@@ -642,36 +655,36 @@ }
     value: {
-      defaultValue: _react2['default'].PropTypes.oneOf([1, 2, 3, 4, 5]),
-      value: _react2['default'].PropTypes.oneOf([1, 2, 3, 4, 5]),
-      valueLink: _react2['default'].PropTypes.shape({
-        value: _react2['default'].PropTypes.oneOf([1, 2, 3, 4, 5]),
-        requestChange: _react2['default'].PropTypes.func.isRequired
+      defaultValue: _react.PropTypes.oneOf([1, 2, 3, 4, 5]),
+      value: _react.PropTypes.oneOf([1, 2, 3, 4, 5]),
+      valueLink: _react.PropTypes.shape({
+        value: _react.PropTypes.oneOf([1, 2, 3, 4, 5]),
+        requestChange: _react.PropTypes.func.isRequired
       }),
-      disabled: _react2['default'].PropTypes.bool,
-      tabIndex: _react2['default'].PropTypes.number,
-      character: _react2['default'].PropTypes.string,
-      characterProps: _react2['default'].PropTypes.object,
-      preventFocusStyleForTouchAndClick: _react2['default'].PropTypes.bool,
-      'aria-label': _react2['default'].PropTypes.string,
-      style: _react2['default'].PropTypes.object,
-      className: _react2['default'].PropTypes.string,
-      focusStyle: _react2['default'].PropTypes.object,
-      disabledStyle: _react2['default'].PropTypes.object,
-      hoverStyle: _react2['default'].PropTypes.object,
-      disabledHoverStyle: _react2['default'].PropTypes.object,
-      characterStyle: _react2['default'].PropTypes.object,
-      activeCharacterStyle: _react2['default'].PropTypes.object,
-      hoverCharacterStyle: _react2['default'].PropTypes.object,
-      onUpdate: _react2['default'].PropTypes.func,
-      onMouseDown: _react2['default'].PropTypes.func,
-      onMouseUp: _react2['default'].PropTypes.func,
-      onMouseEnter: _react2['default'].PropTypes.func,
-      onMouseMove: _react2['default'].PropTypes.func,
-      onMouseLeave: _react2['default'].PropTypes.func,
-      onTouchStart: _react2['default'].PropTypes.func,
-      onTouchMove: _react2['default'].PropTypes.func,
-      onTouchEnd: _react2['default'].PropTypes.func,
-      onTouchCancel: _react2['default'].PropTypes.func,
-      onFocus: _react2['default'].PropTypes.func,
-      onBlur: _react2['default'].PropTypes.func,
-      onKeyDown: _react2['default'].PropTypes.func
+      disabled: _react.PropTypes.bool,
+      tabIndex: _react.PropTypes.number,
+      character: _react.PropTypes.string,
+      characterProps: _react.PropTypes.object,
+      preventFocusStyleForTouchAndClick: _react.PropTypes.bool,
+      'aria-label': _react.PropTypes.string,
+      style: _react.PropTypes.object,
+      className: _react.PropTypes.string,
+      focusStyle: _react.PropTypes.object,
+      disabledStyle: _react.PropTypes.object,
+      hoverStyle: _react.PropTypes.object,
+      disabledHoverStyle: _react.PropTypes.object,
+      characterStyle: _react.PropTypes.object,
+      activeCharacterStyle: _react.PropTypes.object,
+      hoverCharacterStyle: _react.PropTypes.object,
+      onUpdate: _react.PropTypes.func,
+      onMouseDown: _react.PropTypes.func,
+      onMouseUp: _react.PropTypes.func,
+      onMouseEnter: _react.PropTypes.func,
+      onMouseMove: _react.PropTypes.func,
+      onMouseLeave: _react.PropTypes.func,
+      onTouchStart: _react.PropTypes.func,
+      onTouchMove: _react.PropTypes.func,
+      onTouchEnd: _react.PropTypes.func,
+      onTouchCancel: _react.PropTypes.func,
+      onFocus: _react.PropTypes.func,
+      onBlur: _react.PropTypes.func,
+      onKeyDown: _react.PropTypes.func
     },
@@ -678,0 +691,0 @@

lib/components/Select.js

@@ -7,8 +7,8 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -110,4 +110,4 @@
 function updatePseudoClassStyle(styleId, properties) {
-  var hoverStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].hoverStyle, properties.hoverStyle);
-  var disabledHoverStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].disabledHoverStyle, properties.disabledHoverStyle);
+  var hoverStyle = _extends({}, _styleSelect2['default'].hoverStyle, properties.hoverStyle);
+  var disabledHoverStyle = _extends({}, _styleSelect2['default'].disabledHoverStyle, properties.disabledHoverStyle);
 
@@ -250,3 +250,9 @@ var styles = [{
   _createClass(Select, [{
-    key: 'componentWillMount',
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        isDisabled: this.props.disabled,
+        isHoveredValue: this.state.focusedOptionValue
+      };
+    }
 
@@ -258,2 +264,4 @@ /**
      */
+  }, {
+    key: 'componentWillMount',
     value: function componentWillMount() {
@@ -334,2 +342,3 @@ var id = this._reactInternalInstance._rootNodeID.replace(/\./g, '-');
           positionOptions(this);
+
           // restore the old scrollTop position
@@ -343,3 +352,3 @@ } else {
         if (!previousState.isOpen && this.state.isOpen && childrenPresent) {
-          var menuStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].menuStyle, this.props.menuStyle);
+          var menuStyle = _extends({}, _styleSelect2['default'].menuStyle, this.props.menuStyle);
           menuNode.style.display = menuStyle.display;
@@ -381,2 +390,3 @@ }
           this._scrollTopPosition = menuNode.scrollTop;
+
           // Note: don't use setState in here as it would prevent the scrolling
@@ -387,2 +397,3 @@ } else {
           }
+
         // reset interaction
@@ -419,2 +430,3 @@ this._scrollActive = false;
       }
+
       this._touchStartedAt = undefined;
@@ -536,2 +548,3 @@ }
       }
+
       this.setState({ isTouchedToToggle: false, isActive: false });
@@ -777,2 +790,3 @@
       }
+
       if (this.props.onUpdate) {
@@ -787,13 +801,13 @@ this.props.onUpdate({ value: value });
 
-      var defaultStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].style, this.props.style);
-      var hoverStyle = (0, _utilsHelpers.extend)({}, defaultStyle, _styleSelect2['default'].hoverStyle, this.props.hoverStyle);
-      var focusStyle = (0, _utilsHelpers.extend)({}, defaultStyle, _styleSelect2['default'].focusStyle, this.props.focusStyle);
-      var activeStyle = (0, _utilsHelpers.extend)({}, defaultStyle, _styleSelect2['default'].activeStyle, this.props.activeStyle);
-      var disabledStyle = (0, _utilsHelpers.extend)({}, defaultStyle, _styleSelect2['default'].disabledStyle, this.props.disabledStyle);
-      var disabledHoverStyle = (0, _utilsHelpers.extend)({}, disabledStyle, _styleSelect2['default'].disabledHoverStyle, this.props.disabledHoverStyle);
-      var menuStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].menuStyle, this.props.menuStyle);
-      var caretToCloseStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].caretToCloseStyle, this.props.caretToCloseStyle);
-      var caretToOpenStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].caretToOpenStyle, this.props.caretToOpenStyle);
-      var disabledCaretToOpenStyle = (0, _utilsHelpers.extend)({}, caretToOpenStyle, _styleSelect2['default'].disabledCaretToOpenStyle, this.props.disabledCaretToOpenStyle);
-      var wrapperStyle = (0, _utilsHelpers.extend)({}, _styleSelect2['default'].wrapperStyle, this.props.wrapperStyle);
+      var defaultStyle = _extends({}, _styleSelect2['default'].style, this.props.style);
+      var hoverStyle = _extends({}, defaultStyle, _styleSelect2['default'].hoverStyle, this.props.hoverStyle);
+      var focusStyle = _extends({}, defaultStyle, _styleSelect2['default'].focusStyle, this.props.focusStyle);
+      var activeStyle = _extends({}, defaultStyle, _styleSelect2['default'].activeStyle, this.props.activeStyle);
+      var disabledStyle = _extends({}, defaultStyle, _styleSelect2['default'].disabledStyle, this.props.disabledStyle);
+      var disabledHoverStyle = _extends({}, disabledStyle, _styleSelect2['default'].disabledHoverStyle, this.props.disabledHoverStyle);
+      var menuStyle = _extends({}, _styleSelect2['default'].menuStyle, this.props.menuStyle);
+      var caretToCloseStyle = _extends({}, _styleSelect2['default'].caretToCloseStyle, this.props.caretToCloseStyle);
+      var caretToOpenStyle = _extends({}, _styleSelect2['default'].caretToOpenStyle, this.props.caretToOpenStyle);
+      var disabledCaretToOpenStyle = _extends({}, caretToOpenStyle, _styleSelect2['default'].disabledCaretToOpenStyle, this.props.disabledCaretToOpenStyle);
+      var wrapperStyle = _extends({}, _styleSelect2['default'].wrapperStyle, this.props.wrapperStyle);
 
@@ -823,5 +837,2 @@ var selectedOptionOrPlaceholder = undefined;
       if (this.props.disabled) {
-        selectedOptionOrPlaceholder = _react2['default'].cloneElement(selectedOptionOrPlaceholder, {
-          _isDisabled: true
-        });
         if (this.state.isTouchedToToggle) {
@@ -832,2 +843,3 @@ selectedOptionWrapperStyle = disabledHoverStyle;
         }
+
         tabIndex = -1;
@@ -895,5 +907,2 @@ } else {
               var isHovered = entry.props.value === _this2.state.focusedOptionValue;
-              var option = _react2['default'].cloneElement(entry, {
-                _isHovered: isHovered
-              });
 
@@ -911,3 +920,3 @@ return _react2['default'].createElement(
                   'aria-selected': isHovered },
-                option
+                entry
               );
@@ -968,2 +977,9 @@ } else if (isSeparator(entry)) {
   }, {
+    key: 'childContextTypes',
+    value: {
+      isDisabled: _react.PropTypes.bool.isRequired,
+      isHoveredValue: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.string, _react.PropTypes.number])
+    },
+    enumerable: true
+  }, {
     key: 'defaultProps',
@@ -970,0 +986,0 @@ value: {

lib/components/Separator.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
@@ -68,3 +68,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
     value: function render() {
-      var computedStyle = (0, _utilsHelpers.extend)({}, _styleSeparator2['default'].style, this.props.style);
+      var computedStyle = _extends({}, _styleSeparator2['default'].style, this.props.style);
 
@@ -84,4 +84,4 @@ return _react2['default'].createElement(
     value: {
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.node), _react2['default'].PropTypes.node]),
-      style: _react2['default'].PropTypes.object
+      children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+      style: _react.PropTypes.object
     },
@@ -88,0 +88,0 @@ enumerable: true

lib/components/TextInput.js

@@ -7,8 +7,8 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -57,2 +57,3 @@
   }
+
   return childProps;
@@ -68,5 +69,5 @@ }
 function updatePseudoClassStyle(styleId, properties) {
-  var hoverStyle = (0, _utilsHelpers.extend)({}, _styleTextInput2['default'].hoverStyle, properties.hoverStyle);
-  var focusStyle = (0, _utilsHelpers.extend)({}, _styleTextInput2['default'].focusStyle, properties.focusStyle);
-  var disabledHoverStyle = (0, _utilsHelpers.extend)({}, _styleTextInput2['default'].disabledHoverStyle, properties.disabledHoverStyle);
+  var hoverStyle = _extends({}, _styleTextInput2['default'].hoverStyle, properties.hoverStyle);
+  var focusStyle = _extends({}, _styleTextInput2['default'].focusStyle, properties.focusStyle);
+  var disabledHoverStyle = _extends({}, _styleTextInput2['default'].disabledHoverStyle, properties.disabledHoverStyle);
 
@@ -160,16 +161,15 @@ var styles = [{
     value: function componentWillReceiveProps(properties) {
-      var inputValue = undefined;
+      var newState = {
+        textareaProps: sanitizeChildProps(properties)
+      };
       if ((0, _utilsHelpers.has)(properties, 'valueLink')) {
-        inputValue = properties.valueLink.value;
+        newState.inputValue = properties.valueLink.value;
       } else if ((0, _utilsHelpers.has)(properties, 'value')) {
-        inputValue = properties.value;
+        newState.inputValue = properties.value;
       }
 
-      this.setState({
-        textareaProps: sanitizeChildProps(properties),
-        inputValue: inputValue
-      });
+      this.setState(newState);
       (0, _utilsInjectStyle.removeStyle)(this._styleId);
       updatePseudoClassStyle(this._styleId, properties);
-      this._triggerResize(inputValue);
+      this._triggerResize(newState.inputValue);
     }
@@ -232,2 +232,3 @@
       }
+
       this._triggerResize(value);
@@ -248,6 +249,6 @@ }
     value: function render() {
-      var textareaStyle = (0, _utilsHelpers.extend)({}, _styleTextInput2['default'].style, this.props.style);
+      var textareaStyle = _extends({}, _styleTextInput2['default'].style, this.props.style);
 
       if (this.props.disabled) {
-        textareaStyle = (0, _utilsHelpers.extend)(textareaStyle, _styleTextInput2['default'].disabledStyle, this.props.disabledStyle);
+        textareaStyle = _extends({}, textareaStyle, _styleTextInput2['default'].disabledStyle, this.props.disabledStyle);
       }
@@ -270,19 +271,19 @@
     value: {
-      className: _react2['default'].PropTypes.string,
-      minHeight: _react2['default'].PropTypes.number,
-      maxHeight: _react2['default'].PropTypes.number,
-      minRows: _react2['default'].PropTypes.number,
-      maxRows: _react2['default'].PropTypes.number,
-      style: _react2['default'].PropTypes.object,
-      hoverStyle: _react2['default'].PropTypes.object,
-      focusStyle: _react2['default'].PropTypes.object,
-      allowNewLine: _react2['default'].PropTypes.bool,
-      disabled: _react2['default'].PropTypes.bool,
-      disabledStyle: _react2['default'].PropTypes.object,
-      disabledHoverStyle: _react2['default'].PropTypes.object,
-      onUpdate: _react2['default'].PropTypes.func,
-      onKeyDown: _react2['default'].PropTypes.func,
-      valueLink: _react2['default'].PropTypes.shape({
-        value: _react2['default'].PropTypes.string.isRequired,
-        requestChange: _react2['default'].PropTypes.func.isRequired
+      className: _react.PropTypes.string,
+      minHeight: _react.PropTypes.number,
+      maxHeight: _react.PropTypes.number,
+      minRows: _react.PropTypes.number,
+      maxRows: _react.PropTypes.number,
+      style: _react.PropTypes.object,
+      hoverStyle: _react.PropTypes.object,
+      focusStyle: _react.PropTypes.object,
+      allowNewLine: _react.PropTypes.bool,
+      disabled: _react.PropTypes.bool,
+      disabledStyle: _react.PropTypes.object,
+      disabledHoverStyle: _react.PropTypes.object,
+      onUpdate: _react.PropTypes.func,
+      onKeyDown: _react.PropTypes.func,
+      valueLink: _react.PropTypes.shape({
+        value: _react.PropTypes.string.isRequired,
+        requestChange: _react.PropTypes.func.isRequired
       })
@@ -289,0 +290,0 @@ },

lib/components/Toggle.js

@@ -7,8 +7,8 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -88,3 +88,3 @@
 function validateChoices(props, propName, componentName) {
-  var error = _react2['default'].PropTypes.arrayOf(choicePropType)(props, propName, componentName);
+  var error = _react.PropTypes.arrayOf(choicePropType)(props, propName, componentName);
   if (error) return error;
@@ -95,2 +95,3 @@
   }
+
   if (props.children && (0, _utilsHelpers.first)(props.children).props.value === (0, _utilsHelpers.last)(props.children).props.value) {
@@ -112,3 +113,3 @@ return new Error('Invalid children supplied to `' + componentName + '`, expected different value properties for the provided Choice components.');
   } else {
-    focusStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].focusStyle, properties.focusStyle);
+    focusStyle = _extends({}, _styleToggle2['default'].focusStyle, properties.focusStyle);
   }
@@ -209,2 +210,3 @@
       }
+
       this.setState(newState);
@@ -275,2 +277,3 @@
       }
+
       if (this.props.onMouseDown) {
@@ -286,2 +289,3 @@ this.props.onMouseDown(event);
       }
+
       if (this.props.onMouseUp) {
@@ -297,2 +301,3 @@ this.props.onMouseUp(event);
       }
+
       if (this.props.onTouchStart) {
@@ -308,2 +313,3 @@ this.props.onTouchStart(event);
       }
+
       if (this.props.sliderProps && this.props.sliderProps.onClick) {
@@ -345,2 +351,3 @@ this.props.sliderProps.onClick(event);
         }
+
         this.previousMouseMoveFrame = animationFrame;
@@ -426,2 +433,3 @@ }
         }
+
         this.previousTouchMoveAtSliderFrame = animationFrame;
@@ -448,2 +456,3 @@ }
       }
+
       this._touchStartedAtSlider = false;
@@ -503,2 +512,3 @@ this._touchEndedNotInSlider = false;
         }
+
         this.previousTouchMoveAtHandleFrame = animationFrame;
@@ -574,2 +584,3 @@ }
       }
+
       if (this.props.onKeyDown) {
@@ -751,6 +762,6 @@ this.props.onKeyDown(event);
     value: function render() {
-      var wrapperStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].style, this.props.style);
+      var wrapperStyle = _extends({}, _styleToggle2['default'].style, this.props.style);
 
       if (this.isFocused && !this.state.wasFocusedWithClickOrTouch) {
-        wrapperStyle = (0, _utilsHelpers.extend)({}, wrapperStyle, _styleToggle2['default'].focusStyle, this.props.focusStyle);
+        wrapperStyle = _extends({}, wrapperStyle, _styleToggle2['default'].focusStyle, this.props.focusStyle);
       }
@@ -761,14 +772,15 @@
 
-      var sliderWrapperStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].sliderWrapperStyle, this.props.sliderWrapperStyle);
+      var sliderWrapperStyle = _extends({}, _styleToggle2['default'].sliderWrapperStyle, this.props.sliderWrapperStyle);
       var defaultSliderOffset = this._getSliderOffset();
 
       if (this.state.isDraggingWithMouse || this.state.isDraggingWithTouch) {
-        computedSliderStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].sliderStyle, this.props.sliderStyle, {
+        computedSliderStyle = _extends({}, _styleToggle2['default'].sliderStyle, this.props.sliderStyle, {
           left: this.state.sliderOffset - defaultSliderOffset,
           transition: 'none'
         });
+
         // right now even when handle is clicked, it momentarily shows this grabbing styles
         // may be this.state.isDraggingWithMouse should be set to true only after mouse movement starts
-        var activeStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].activeHandleStyle, this.props.handleStyle);
-        handleStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].handleStyle, activeStyle, this.props.activeHandleStyle, {
+        var activeStyle = _extends({}, _styleToggle2['default'].activeHandleStyle, this.props.handleStyle);
+        handleStyle = _extends({}, _styleToggle2['default'].handleStyle, activeStyle, this.props.activeHandleStyle, {
           left: this.state.sliderOffset,
@@ -778,4 +790,4 @@ transition: activeStyle.transition ? activeStyle.transition : 'none'
       } else {
-        handleStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].handleStyle, this.props.handleStyle);
-        computedSliderStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].sliderStyle, {
+        handleStyle = _extends({}, _styleToggle2['default'].handleStyle, this.props.handleStyle);
+        computedSliderStyle = _extends({}, _styleToggle2['default'].sliderStyle, {
           left: this.state.value ? 0 : -defaultSliderOffset
@@ -785,5 +797,5 @@ });
         if (this.state.isActive) {
-          handleStyle = (0, _utilsHelpers.extend)({}, handleStyle, _styleToggle2['default'].activeHandleStyle, this.props.activeHandleStyle);
+          handleStyle = _extends({}, handleStyle, _styleToggle2['default'].activeHandleStyle, this.props.activeHandleStyle);
         } else if (this.state.isHovered) {
-          handleStyle = (0, _utilsHelpers.extend)({}, handleStyle, _styleToggle2['default'].hoverHandleStyle, this.props.hoverHandleStyle);
+          handleStyle = _extends({}, handleStyle, _styleToggle2['default'].hoverHandleStyle, this.props.hoverHandleStyle);
         }
@@ -794,3 +806,3 @@
         };
-        handleStyle = (0, _utilsHelpers.extend)({}, handleStyle, position);
+        handleStyle = _extends({}, handleStyle, position);
       }
@@ -801,4 +813,4 @@
 
-      var computedTrueChoiceStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].firstChoiceStyle, this.props.firstChoiceStyle);
-      var computedFalseChoiceStyle = (0, _utilsHelpers.extend)({}, _styleToggle2['default'].secondChoiceStyle, this.props.secondChoiceStyle);
+      var computedTrueChoiceStyle = _extends({}, _styleToggle2['default'].firstChoiceStyle, this.props.firstChoiceStyle);
+      var computedFalseChoiceStyle = _extends({}, _styleToggle2['default'].secondChoiceStyle, this.props.secondChoiceStyle);
 
@@ -809,4 +821,4 @@ var hasCustomTabIndex = this.props.wrapperProps && this.props.wrapperProps.tabIndex;
         tabIndex = -1;
-        wrapperStyle = (0, _utilsHelpers.extend)({}, wrapperStyle, _styleToggle2['default'].disabledStyle, this.props.disabledStyle);
-        handleStyle = (0, _utilsHelpers.extend)({}, handleStyle, _styleToggle2['default'].disabledHandleStyle, this.props.disabledHandleStyle);
+        wrapperStyle = _extends({}, wrapperStyle, _styleToggle2['default'].disabledStyle, this.props.disabledStyle);
+        handleStyle = _extends({}, handleStyle, _styleToggle2['default'].disabledHandleStyle, this.props.disabledHandleStyle);
       }
@@ -882,61 +894,61 @@
     value: {
-      activeHandleStyle: _react2['default'].PropTypes.object,
+      activeHandleStyle: _react.PropTypes.object,
       children: validateChoices,
-      className: _react2['default'].PropTypes.string,
-      defaultValue: _react2['default'].PropTypes.bool,
-      disabled: _react2['default'].PropTypes.bool,
-      disabledHandleStyle: _react2['default'].PropTypes.object,
-      disabledStyle: _react2['default'].PropTypes.object,
-      firstChoiceProps: _react2['default'].PropTypes.object,
-      firstChoiceStyle: _react2['default'].PropTypes.shape({
-        width: _react2['default'].PropTypes.number
+      className: _react.PropTypes.string,
+      defaultValue: _react.PropTypes.bool,
+      disabled: _react.PropTypes.bool,
+      disabledHandleStyle: _react.PropTypes.object,
+      disabledStyle: _react.PropTypes.object,
+      firstChoiceProps: _react.PropTypes.object,
+      firstChoiceStyle: _react.PropTypes.shape({
+        width: _react.PropTypes.number
       }),
-      focusStyle: _react2['default'].PropTypes.object,
-      handleProps: _react2['default'].PropTypes.shape({
-        onMouseDown: _react2['default'].PropTypes.func,
-        onMouseMove: _react2['default'].PropTypes.func,
-        onMouseUp: _react2['default'].PropTypes.func,
-        onMouseLeave: _react2['default'].PropTypes.func,
-        onTouchStart: _react2['default'].PropTypes.func,
-        onTouchMove: _react2['default'].PropTypes.func,
-        onTouchEnd: _react2['default'].PropTypes.func,
-        onTouchCancel: _react2['default'].PropTypes.func
+      focusStyle: _react.PropTypes.object,
+      handleProps: _react.PropTypes.shape({
+        onMouseDown: _react.PropTypes.func,
+        onMouseMove: _react.PropTypes.func,
+        onMouseUp: _react.PropTypes.func,
+        onMouseLeave: _react.PropTypes.func,
+        onTouchStart: _react.PropTypes.func,
+        onTouchMove: _react.PropTypes.func,
+        onTouchEnd: _react.PropTypes.func,
+        onTouchCancel: _react.PropTypes.func
       }),
-      handleStyle: _react2['default'].PropTypes.shape({
-        height: _react2['default'].PropTypes.number,
-        width: _react2['default'].PropTypes.number
+      handleStyle: _react.PropTypes.shape({
+        height: _react.PropTypes.number,
+        width: _react.PropTypes.number
       }),
-      hoverHandleStyle: _react2['default'].PropTypes.object,
-      onBlur: _react2['default'].PropTypes.func,
-      onUpdate: _react2['default'].PropTypes.func,
-      onFocus: _react2['default'].PropTypes.func,
-      onKeyDown: _react2['default'].PropTypes.func,
-      onMouseDown: _react2['default'].PropTypes.func,
-      onMouseEnter: _react2['default'].PropTypes.func,
-      onMouseLeave: _react2['default'].PropTypes.func,
-      onMouseUp: _react2['default'].PropTypes.func,
-      onTouchStart: _react2['default'].PropTypes.func,
-      secondChoiceProps: _react2['default'].PropTypes.object,
-      secondChoiceStyle: _react2['default'].PropTypes.shape({
-        width: _react2['default'].PropTypes.number
+      hoverHandleStyle: _react.PropTypes.object,
+      onBlur: _react.PropTypes.func,
+      onUpdate: _react.PropTypes.func,
+      onFocus: _react.PropTypes.func,
+      onKeyDown: _react.PropTypes.func,
+      onMouseDown: _react.PropTypes.func,
+      onMouseEnter: _react.PropTypes.func,
+      onMouseLeave: _react.PropTypes.func,
+      onMouseUp: _react.PropTypes.func,
+      onTouchStart: _react.PropTypes.func,
+      secondChoiceProps: _react.PropTypes.object,
+      secondChoiceStyle: _react.PropTypes.shape({
+        width: _react.PropTypes.number
       }),
-      sliderProps: _react2['default'].PropTypes.shape({
-        onClick: _react2['default'].PropTypes.func,
-        onTouchStart: _react2['default'].PropTypes.func,
-        onTouchMove: _react2['default'].PropTypes.func,
-        onTouchEnd: _react2['default'].PropTypes.func,
-        onTouchCancel: _react2['default'].PropTypes.func
+      sliderProps: _react.PropTypes.shape({
+        onClick: _react.PropTypes.func,
+        onTouchStart: _react.PropTypes.func,
+        onTouchMove: _react.PropTypes.func,
+        onTouchEnd: _react.PropTypes.func,
+        onTouchCancel: _react.PropTypes.func
       }),
-      sliderStyle: _react2['default'].PropTypes.object,
-      sliderWrapperProps: _react2['default'].PropTypes.object,
-      sliderWrapperStyle: _react2['default'].PropTypes.object,
-      style: _react2['default'].PropTypes.shape({
-        width: _react2['default'].PropTypes.number
+      sliderStyle: _react.PropTypes.object,
+      sliderWrapperProps: _react.PropTypes.object,
+      sliderWrapperStyle: _react.PropTypes.object,
+      style: _react.PropTypes.shape({
+        width: _react.PropTypes.number
       }),
-      value: _react2['default'].PropTypes.bool,
-      valueLink: _react2['default'].PropTypes.shape({
-        value: _react2['default'].PropTypes.bool.isRequired,
-        requestChange: _react2['default'].PropTypes.func.isRequired
+      value: _react.PropTypes.bool,
+      valueLink: _react.PropTypes.shape({
+        value: _react.PropTypes.bool.isRequired,
+        requestChange: _react.PropTypes.func.isRequired
       }),
-      wrapperProps: _react2['default'].PropTypes.object
+      wrapperProps: _react.PropTypes.object
     },
@@ -943,0 +955,0 @@ enumerable: true

lib/config/button.js

@@ -7,5 +7,3 @@ "use strict";
 var buttonConfig = {
-
   preventFocusStyleForTouchAndClick: true
-
 };
@@ -12,0 +10,0 @@

lib/config/rating.js

@@ -7,5 +7,3 @@ "use strict";
 var ratingConfig = {
-
   preventFocusStyleForTouchAndClick: true
-
 };
@@ -12,0 +10,0 @@

lib/config/select.js

@@ -9,6 +9,2 @@ 'use strict';
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _reactDom = require('react-dom');
@@ -24,2 +20,10 @@
 
+var _componentsOption = require('../components/Option');
+
+var _componentsOption2 = _interopRequireDefault(_componentsOption);
+
+var _componentsSeparator = require('../components/Separator');
+
+var _componentsSeparator2 = _interopRequireDefault(_componentsSeparator);
+
 /**
@@ -33,3 +37,3 @@ * Returns the index of the entry with a certain value from the component's
   var filterFunction = function filterFunction(child) {
-    return (0, _utilsIsComponentOfTypeJs2['default'])('Option', child) || (0, _utilsIsComponentOfTypeJs2['default'])('Separator', child);
+    return (0, _utilsIsComponentOfTypeJs2['default'])(_componentsOption2['default'], child) || (0, _utilsIsComponentOfTypeJs2['default'])(_componentsSeparator2['default'], child);
   };
@@ -65,4 +69,5 @@ return (0, _utilsHelpers.findIndex)((0, _utilsHelpers.filterReactChildren)(component.props.children, filterFunction), function (element) {
     }
-    option = menuNode.children[optionIndex];
 
+    option = menuNode.childNodes[optionIndex];
+
     var menuHeight = parseFloat(menuStyle.getPropertyValue('height'));
@@ -73,3 +78,3 @@ var menuTopBorderWidth = parseFloat(menuStyle.getPropertyValue('border-top-width'));
     // has to be provided http://caniuse.com/#feat=getcomputedstyle
-    var optionStyle = window.getComputedStyle(option.children[0], null);
+    var optionStyle = window.getComputedStyle(option.childNodes[0], null);
     var optionPaddingTop = parseFloat(optionStyle.getPropertyValue('padding-top'));
@@ -76,0 +81,0 @@ var optionPaddingLeft = parseFloat(optionStyle.getPropertyValue('padding-top'));

lib/config/toggle.js

@@ -7,5 +7,3 @@ "use strict";
 var toggleConfig = {
-
   preventFocusStyleForTouchAndClick: true
-
 };
@@ -12,0 +10,0 @@

lib/index.js

@@ -49,2 +49,6 @@ 'use strict';
 
+var _componentsDatePicker = require('./components/DatePicker');
+
+var _componentsDatePicker2 = _interopRequireDefault(_componentsDatePicker);
+
 var _styleButton = require('./style/button');
@@ -90,2 +94,6 @@
 
+var _styleDatePicker = require('./style/date-picker');
+
+var _styleDatePicker2 = _interopRequireDefault(_styleDatePicker);
+
 var _configSelect = require('./config/select');
@@ -107,2 +115,10 @@
 
+var _configI18n = require('./config/i18n');
+
+var _configI18n2 = _interopRequireDefault(_configI18n);
+
+var _configDatePicker = require('./config/datePicker');
+
+var _configDatePicker2 = _interopRequireDefault(_configDatePicker);
+
 module.exports = {
@@ -120,2 +136,3 @@ Button: _componentsButton2['default'],
   Toggle: _componentsToggle2['default'],
+  DatePicker: _componentsDatePicker2['default'],
   style: {
@@ -131,3 +148,4 @@ button: _styleButton2['default'],
     toggle: _styleToggle2['default'],
-    comboBox: _styleComboBox2['default']
+    comboBox: _styleComboBox2['default'],
+    datePicker: _styleDatePicker2['default']
   },
@@ -138,4 +156,6 @@ config: {
     rating: _configRating2['default'],
-    toggle: _configToggle2['default']
+    toggle: _configToggle2['default'],
+    i18n: _configI18n2['default'],
+    datePicker: _configDatePicker2['default']
   }
 };

lib/style/button.js

@@ -57,5 +57,5 @@ 'use strict';
     WebkitAnimation: 'belle-button-focus 2s',
-    outline: 0 // avoid default focus behaviour
-  },
+    outline: 0 },
 
+  // avoid default focus behaviour
   activeStyle: {
@@ -80,2 +80,3 @@ background: '#E0E0E0',
     border: 0,
+
     // boxShadow: '0 1px 0px #3995B7',
@@ -129,5 +130,5 @@ borderTop: '1px solid #53C7F2',
     WebkitAnimation: 'belle-button-focus 2s',
-    outline: 0 // avoid default focus behaviour
-  },
+    outline: 0 },
 
+  // avoid default focus behaviour
   primaryActiveStyle: {
@@ -134,0 +135,0 @@ background: '#4DBEE8',

lib/style/option.js

@@ -7,3 +7,2 @@ 'use strict';
 var optionStyle = {
-
   style: {
@@ -65,3 +64,2 @@ boxSizing: 'border-box',
   }
-
 };
@@ -68,0 +66,0 @@

lib/style/placeholder.js

@@ -7,3 +7,2 @@ 'use strict';
 var placeholderStyle = {
-
   style: {
@@ -37,3 +36,2 @@ boxSizing: 'border-box',
   }
-
 };
@@ -40,0 +38,0 @@

lib/style/rating.js

@@ -7,3 +7,2 @@ 'use strict';
 var ratingStyle = {
-
   style: {
@@ -77,3 +76,2 @@ position: 'relative',
   }
-
 };
@@ -80,0 +78,0 @@

lib/style/select.js

@@ -7,3 +7,2 @@ 'use strict';
 var selectStyle = {
-
   style: {
@@ -117,3 +116,2 @@ borderBottom: '1px solid #CCC',
   }
-
 };
@@ -120,0 +118,0 @@

lib/style/separator.js

@@ -7,3 +7,2 @@ 'use strict';
 var separatorStyle = {
-
   style: {
@@ -15,3 +14,2 @@ boxSizing: 'border-box',
   }
-
 };
@@ -18,0 +16,0 @@

lib/style/text-input.js

@@ -7,3 +7,2 @@ 'use strict';
 var textInputStyle = {
-
   style: {
@@ -29,2 +28,3 @@ /* normalize.css v3.0.1 */
     boxSizing: 'border-box',
+    minHeight: '0',
 
@@ -55,3 +55,2 @@ /* animations */
   }
-
 };
@@ -58,0 +57,0 @@

lib/style/toggle.js

@@ -7,3 +7,2 @@ 'use strict';
 var toggleStyle = {
-
   style: {
@@ -22,5 +21,5 @@ boxSizing: 'border-box',
     WebkitAnimation: 'belle-toggle-focus 2s',
-    outline: 0 // avoid default focus behaviour
-  },
+    outline: 0 },
 
+  // avoid default focus behaviour
   disabledStyle: {
@@ -34,2 +33,3 @@ opacity: 0.6,
     position: 'relative',
+
     // Calculated with 2 * the width of choice area
@@ -90,2 +90,3 @@ width: 104,
     height: 32,
+
     // Calculated with the width of the whole toggle - half of the width from the handle
@@ -127,2 +128,3 @@ //
     height: 32,
+
     // Calculated with the width of the whole toggle - half of the width from the handle
@@ -173,3 +175,2 @@ //
   }
-
 };
@@ -176,0 +177,0 @@

lib/utils/animation-frame-management.js

@@ -23,5 +23,5 @@ // Inspired by https://gist.github.com/paulirish/1579671
   var vendors = ['ms', 'moz', 'webkit', 'o'];
-  for (var x = 0; x < vendors.length && !requestAnimationFrame; ++x) {
-    exports.requestAnimationFrame = requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-    exports.cancelAnimationFrame = cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
+  for (var index = 0; index < vendors.length && !requestAnimationFrame; ++index) {
+    exports.requestAnimationFrame = requestAnimationFrame = window[vendors[index] + 'RequestAnimationFrame'];
+    exports.cancelAnimationFrame = cancelAnimationFrame = window[vendors[index] + 'CancelAnimationFrame'] || window[vendors[index] + 'CancelRequestAnimationFrame'];
   }
@@ -28,0 +28,0 @@ }

lib/utils/calculate-textarea-height.js

@@ -12,4 +12,6 @@ 'use strict';
 var computedStyleCache = {};
-var hiddenTextareaStyle = '\n  height:0;\n  visibility:hidden;\n  overflow:hidden;\n  position:absolute;\n  z-index:-1000;\n  top:0;\n  right:0\n';
 
+// !important is used here to avoid side-effects from global set CSS.
+var hiddenTextareaStyle = '\n  min-height:none !important;\n  max-height:none !important;\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n';
+
 var stylesToCopy = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'padding-left', 'padding-right', 'border-width', 'box-sizing'];
@@ -42,3 +44,3 @@
       var sizingStyle = stylesToCopy.map(function (styleName) {
-        return styleName + ':' + computedStyle.getPropertyValue(styleName);
+        return styleName + ':' + computedStyle.getPropertyValue(styleName) + '  !important';
       }).join(';');
@@ -94,2 +96,3 @@
   hiddenTextarea.setAttribute('style', style + ';' + hiddenTextareaStyle);
+
   // IE will return a height of 0 in case the textare is empty. To prevent
@@ -124,2 +127,3 @@ // reducing the size to 0 we simply use a dummy text.
     }
+
     if (maxRows !== null && maxHeight === null) {
@@ -126,0 +130,0 @@ calculatedMaxHeight = singleRowHeight * maxRows;

lib/utils/helpers.js

@@ -14,2 +14,4 @@ 'use strict';
 exports.find = find;
+exports.reverse = reverse;
+exports.shift = shift;
 exports.isEmpty = isEmpty;
@@ -23,3 +25,2 @@ exports.findIndex = findIndex;
 exports.uniqueId = uniqueId;
-exports.extend = extend;
 exports.flatten = flatten;
@@ -62,2 +63,3 @@ exports.filterReactChildren = filterReactChildren;
     }
+
     return result;
@@ -133,3 +135,3 @@ }
         if (predicate) {
-          result[index] = predicate(elm);
+          result[index] = predicate(elm, index);
         }
@@ -190,2 +192,3 @@ });
     }
+
     return result;
@@ -196,6 +199,41 @@ }
 /**
- * Returns true if object is:
- * 1. Falsy
- * 2. An array of size 0
- * 3. An object with no key-values
+ * Reverse the array passed to it.
+ * @param {array} iterable - the array to be reversed.
+ */
+
+function reverse(iterable) {
+  if (iterable) {
+    var result = [];
+    for (var index = iterable.length - 1; index >= 0; index--) {
+      result.push(iterable[index]);
+    }
+
+    return result;
+  }
+}
+
+/**
+ * Shifts given array by given number of positions.
+ * @param {array} iterable - the array to be shifted.
+ * @param {array} positions - number of positions shifting is needed.
+ */
+
+function shift(iterable, positions) {
+  if (iterable) {
+    if (positions && positions > 0) {
+      var result = [];
+      var arrayLength = iterable.length;
+      for (var index = 0; index < iterable.length; index++) {
+        result.push(iterable[(index + positions) % arrayLength]);
+      }
+
+      return result;
+    }
+
+    return iterable;
+  }
+}
+
+/**
+ * Returns true if object contains no values (no enumerable own-properties).
  *
@@ -227,2 +265,3 @@ * @param {Object} obj - an object
     }
+
     return result;
@@ -266,2 +305,3 @@ }
   }
+
   return 0;
@@ -287,2 +327,3 @@ }
     }
+
     return result;
@@ -338,28 +379,2 @@ }
 /**
- * Copy all of the properties in the source objects over to the destination object, and return the destination object. It's in-order, so the last source will override properties of the same name in previous arguments.
- *
- * @param {object} obj1 - object to be extended
- * @param {...object} objs - at least one but optionally more objects an be provided
- */
-
-function extend(obj1) {
-  for (var _len2 = arguments.length, objs = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-    objs[_key2 - 1] = arguments[_key2];
-  }
-
-  if (obj1 && objs) {
-    objs.forEach(function (obj) {
-      if (obj) {
-        for (var key in obj) {
-          if (obj.hasOwnProperty(key)) {
-            obj1[key] = obj[key];
-          }
-        }
-      }
-    });
-  }
-  return obj1;
-}
-
-/**
  * Recursive function for flattening an iterable.
@@ -389,4 +404,4 @@ *
 function flatten() {
-  for (var _len3 = arguments.length, arrays = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    arrays[_key3] = arguments[_key3];
+  for (var _len2 = arguments.length, arrays = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    arrays[_key2] = arguments[_key2];
   }
@@ -455,4 +470,5 @@
     }
+
     return getArrayForReactChildren(children);
   }
 }

lib/utils/inject-style.js

@@ -57,6 +57,8 @@ 'use strict';
   return (0, _utilsHelpers.mapObject)(pseudoClasses, function (style, pseudoClass) {
-    var styleString = _reactLibCSSPropertyOperations2['default'].createMarkupForStyles(style);
-    var styleWithImportant = styleString.replace(/;/g, ' !important;');
+    if (style && Object.keys(style).length > 0) {
+      var styleString = _reactLibCSSPropertyOperations2['default'].createMarkupForStyles(style);
+      var styleWithImportant = styleString.replace(/;/g, ' !important;');
 
-    return disabled ? '.' + id + '[disabled]:' + pseudoClass + ' {' + styleWithImportant + '}' : '.' + id + ':' + pseudoClass + ' {' + styleWithImportant + '}';
+      return disabled ? '.' + id + '[disabled]:' + pseudoClass + ' {' + styleWithImportant + '}' : '.' + id + ':' + pseudoClass + ' {' + styleWithImportant + '}';
+    }
   });
@@ -72,2 +74,3 @@ }
     }
+
     if (storageEntry.disabledPseudoClasses) {
@@ -74,0 +77,0 @@ pseudoClassesArray.push(createMarkupOnPseudoClass(storageEntry.disabledPseudoClasses, id, true));

package.json

 {
   "name": "belle",
-  "version": "2.0.0-beta1",
+  "version": "2.0.0-rc1",
   "description": "Configurable React Components with great UX",
@@ -25,3 +25,4 @@ "author": {
   "peerDependencies": {
-    "react": ">=0.14.0"
+    "react": ">=0.14.0",
+    "react-dom": ">=0.14.0"
   },
@@ -31,5 +32,8 @@ "scripts": {
     "prepublish": "npm run build",
+    "postpublish": "./scripts/publish_gh_pages.sh",
     "test": "BABEL_ENV=test BABEL_JEST_STAGE=0 jest src/",
     "test:watch": "npm run test -- --watch",
-    "lint": "eslint src/"
+    "lint": "npm run lint:eslint && npm run lint:jscs",
+    "lint:eslint": "eslint ./",
+    "lint:jscs": "jscs ./"
   },
@@ -43,16 +47,16 @@ "devDependencies": {
     "babel-plugin-react-transform": "^1.1.1",
-    "eslint": "^1.6.0",
+    "eslint": "^1.8.0",
     "eslint-config-airbnb": "0.1.0",
-    "eslint-plugin-react": "^3.5.1",
-    "jest-cli": "^0.5.10",
-    "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.0",
-    "react-dom": "^0.14.0",
+    "eslint-plugin-react": "^3.6.3",
+    "jest-cli": "^0.7.0",
+    "jscs": "^2.5.0",
+    "react": "^0.14.2",
+    "react-addons-test-utils": "^0.14.2",
+    "react-dom": "^0.14.2",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.1.1",
-    "underscore": "^1.8.3",
     "webpack": "^1.12.2",
     "webpack-dev-middleware": "^1.2.0",
-    "webpack-dev-server": "^1.12.0",
+    "webpack-dev-server": "^1.12.1",
     "webpack-hot-middleware": "^2.4.1"
@@ -59,0 +63,0 @@ },

README.md

@@ -21,2 +21,8 @@ # Belle
 
+For a version compatible with React 0.14+ please use our beta for Belle 2.0.0 and run:
+
+```
+npm install belle@2.0.0-rc1
+```
+
 ### Import & use Belle Components
@@ -138,6 +144,2 @@
 
-Build Status:
-
-[ ![Codeship Status for nikgraf/belle](https://codeship.com/projects/7650fa30-c483-0132-3f11-46867e328226/status?branch=master)](https://codeship.com/projects/74133)
-
 In order to run the tests use
@@ -165,3 +167,3 @@
 
-Thanks to Christian Steiner from [http://www.cropd.at/](cropd.at) for creating the logo and helping out with the design.
+Thanks to Christian Steiner from [http://www.cropd.at/](http://cropd.at) for creating the logo and helping out with the design.
 
@@ -173,4 +175,1 @@ Special thanks to [https://github.com/jpuri](Jyoti Puri) for the tremendous amount of work she put into this endeavor.
 MIT
-
-This library also contains a copy of the React Software which is licensed under BSD as well
-as a copy of Underscore.js which is licensed under MIT.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

371645

increased by21.14%

Number of package files

62

increased by16.98%

Lines of code

8886

increased by23.73%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased by50%

Number of lines in readme file

172

decreased by-0.58%

No dependency changes