Merge branch 'update-v2-react16' into upgrade-react-transition-group

Author: rubenmoya

README.md

@@ -1,4 +1,4 @@
-# <a href='http://react-toolbox.com'><img src='http://i.imgur.com/VCSElQX.png' height='50'></a>
+# <a href='http://react-toolbox.io'><img src='http://i.imgur.com/VCSElQX.png' height='50'></a>
 
 [![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco) [![OpenCollective](https://opencollective.com/react-toolbox/backers/badge.svg)](#backers) 
 [![OpenCollective](https://opencollective.com/react-toolbox/sponsors/badge.svg)](#sponsors)

ROADMAP.md

@@ -1,4 +1,4 @@
-This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.com). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
+This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.io). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
 
 ## The Manifesto 
 

components/autocomplete/Autocomplete.d.ts

@@ -88,6 +88,14 @@ export interface AutocompleteProps extends InputProps {
    * Callback function that is fired when component is focused.
    */
   onFocus?: Function;
+  /**
+   * Callback function that is fired when a key is pressed down.
+   */
+  onKeyDown?: Function;
+  /**
+   * Callback function that is fired when a key is lifted up.
+   */
+  onKeyUp?: Function;
   /**
    * Callback function that is fired when the components's query value changes.
    */

components/autocomplete/Autocomplete.js

@@ -35,6 +35,8 @@ const factory = (Chip, Input) => {
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
       onFocus: PropTypes.func,
+      onKeyDown: PropTypes.func,
+      onKeyUp: PropTypes.func,
       onQueryChange: PropTypes.func,
       query: PropTypes.string,
       selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
@@ -132,7 +134,7 @@ const factory = (Chip, Input) => {
     };
 
     handleQueryFocus = (event) => {
-      this.suggestionsNode.scrollTop = 0;
+      event.target.scrollTop = 0;
       this.setState({ active: '', focus: true });
       if (this.props.onFocus) this.props.onFocus(event);
     };
@@ -148,6 +150,8 @@ const factory = (Chip, Input) => {
       if (event.which === 13) {
         this.selectOrCreateActiveItem(event);
       }
+
+      if(this.props.onKeyDown) this.props.onKeyDown(event);
     };
 
     handleQueryKeyUp = (event) => {
@@ -160,6 +164,8 @@ const factory = (Chip, Input) => {
         if (index >= suggestionsKeys.length) index = 0;
         this.setState({ active: suggestionsKeys[index] });
       }
+
+      if(this.props.onKeyUp) this.props.onKeyUp(event);
     };
 
     handleSuggestionHover = (event) => {
@@ -375,7 +381,6 @@ const factory = (Chip, Input) => {
       return (
         <ul
           className={classnames(theme.suggestions, { [theme.up]: this.state.direction === 'up' })}
-          ref={(node) => { this.suggestionsNode = node; }}
         >
           {suggestions}
         </ul>

components/autocomplete/readme.md

@@ -53,8 +53,10 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
 | `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |
-| `onQueryChange`                 | `Function`                    |         | Callback function that is fired when the components's query input value changes. |
 | `onFocus`                       | `Function`                    |         | Callback function that is fired when component is focused. |
+| `onKeyDown`                     | `Function`                    |         | Callback function that is fired when a key is pressed down. |
+| `onKeyUp`                       | `Function`                    |         | Callback function that is fired when a key is lifted up. |
+| `onQueryChange`                 | `Function`                    |         | Callback function that is fired when the components's query input value changes. |
 | `query`                         | `String` |         | This property has to be used in case the `source` is not static and will be changing during search for `multiple={false}` autocomplete, content of the `query` has to be managed by the `onQueryChange` callback. |
 | `source`                        | `Object` or `Array`           |         | Object of key/values or array representing all items suggested. |
 | `selectedPosition`              | `String`                      | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |

components/avatar/Avatar.js

@@ -10,7 +10,7 @@ const factory = (FontIcon) => {
     <div data-react-toolbox="avatar" className={classnames(theme.avatar, className)} {...other}>
       {children}
       {cover && typeof image === 'string' && <span aria-label={alt} className={theme.image} style={{ backgroundImage: `url(http://github.com/%3Cspan%20class=pl-s1%3E%3Cspan%20class=pl-kos%3E$%7B%3C/span%3E%3Cspan%20class=pl-s1%3Eimage%3C/span%3E%3Cspan%20class=pl-kos%3E%7D%3C/span%3E%3C/span%3E)` }} />}
-      {!cover && (typeof image === 'string' ? <img alt={alt} className={theme.image} src={image} /> : image)}
+      {!cover && (typeof image === 'string' ? <img alt={alt} className={theme.image} src={image} title={title} /> : image)}
       {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} alt={alt} /> : icon}
       {title ? <span className={theme.letter}>{title[0]}</span> : null}
     </div>

components/button/BrowseButton.d.ts

@@ -37,6 +37,8 @@ export interface BrowseButtonProps extends ButtonBaseProps {
    * Classnames object defining the component style.
    */
   theme?: BrowseButtonTheme;
+  
+  onChange?: Function;
 }
 
 export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }

components/button/Button.js

@@ -101,6 +101,10 @@ const factory = (ripple, FontIcon) => {
       const element = href ? 'a' : 'button';
       const level = this.getLevel();
       const shape = this.getShape();
+      const mouseEvents = {
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave,
+      };
 
       const classes = classnames(theme.button, [theme[shape]], {
         [theme[level]]: neutral,
@@ -110,21 +114,24 @@ const factory = (ripple, FontIcon) => {
 
       const props = {
         ...others,
+        ...mouseEvents,
         href,
         ref: (node) => { this.buttonNode = node; },
         className: classes,
         disabled: this.props.disabled,
-        onMouseUp: this.handleMouseUp,
-        onMouseLeave: this.handleMouseLeave,
         type: !href ? type : null,
         'data-react-toolbox': 'button',
       };
 
-      return React.createElement(element, props,
+      const buttonElement = React.createElement(element, props,
         icon ? <FontIcon className={theme.icon} value={icon} /> : null,
         label,
         children,
       );
+
+      return others.onMouseEnter && this.props.disabled
+        ? <span {...mouseEvents}>{buttonElement}</span>
+        : buttonElement;
     }
   }
 

components/checkbox/config.css

@@ -8,6 +8,7 @@
   --checkbox-focus-color: color(var(--color-black) a(1%));
   --checkbox-focus-size: calc(var(--checkbox-size) * 2.3);
   --checkbox-text-color: var(--color-black);
+  --checkbox-border-color: var(--palette-grey-600);
   --checkbox-text-font-size: var(--font-size-small);
   --checkbox-total-height: calc(1.8 * var(--unit));
   --checkbox-transition-duration: 0.2s;

components/checkbox/readme.md

@@ -47,7 +47,7 @@ If you want to provide a theme via context, the component key is `RTCheckbox`.
 | `children`      | `String`, `Element` or `Array` |  | Children to pass through the component. |
 | `className`     | `String`        | `''`            | Sets a class to give customized styles to the checkbox field.|
 | `disabled`      | `Boolean`       | `false`         | If true, the checkbox shown as disabled and cannot be modified.|
-| `label`         | `String` of `node`        |                 | Text label to attach next to the checkbox element.|
+| `label`         | `String` or `node`        |                 | Text label to attach next to the checkbox element.|
 | `name`          | `String`        | `false`         | The name of the field to set in the input checkbox.|
 | `onBlur`        | `Function`      |                 | Callback called when the checkbox is blurred.|
 | `onChange`      | `Function`      |                 | Callback called when the checkbox value is changed.|