Merge remote-tracking branch 'remotes/upstream/dev' into dev

# Conflicts:
#	components/autocomplete/Autocomplete.js

README.md

@@ -177,6 +177,8 @@ render(
 
 A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them.
 
+Also, recall that all components accepts a theme verifying required classNames but there may be some missing. If any property is missing you can check the selectors you want to override straight in the DevTools.
+
 ## Roboto Font and Material Design Icons
 
 React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).
@@ -207,6 +209,7 @@ To start the documentation site locally, you'll need to install the dependencies
 
 ```
 $ git clone https://github.com/react-toolbox/react-toolbox.git
+$ cd react-toolbox/
 $ npm install
 $ cd docs/
 $ npm install
@@ -215,6 +218,10 @@ $ npm start
 
 Local documentation will then be available at `http://localhost:8081/`.
 
+## Extensions
+
+We don't officially support components that are not covered by [Google Material Design](https://www.google.com/design/spec/material-design/introduction.html). If you want to implement some complementary component feel free to open a PR adding your a link in this section. For now you can check [on github: react-toolbox-additions](https://github.com/MaximKomlev/react-toolbox-additions) and [on npm: react-toolbox-additions](https://www.npmjs.com/package/react-toolbox-additions).
+
 ## License
 
 This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE).

components/autocomplete/Autocomplete.js

@@ -54,8 +54,8 @@ const factory = (Chip, Input) => {
      keepFocusOnChange: false,
      multiple: true,
      selectedPosition: 'above',
-     showSuggestionsWhenValueIsSet: false,
      showSelectedWhenNotInSource: false,
+     showSuggestionsWhenValueIsSet: false,
      source: {},
      suggestionMatch: 'start'
    };
@@ -108,9 +108,9 @@ const factory = (Chip, Input) => {
      }
    };
 
-   handleMouseDown = () => {
+   handleMouseDown = (event) => {
-     this.selectOrCreateActiveItem();
+     this.selectOrCreateActiveItem(event);
-   };
+   }
 
    handleQueryBlur = (event) => {
      if (this.state.focus) this.setState({focus: false});
@@ -140,7 +140,7 @@ const factory = (Chip, Input) => {
      }
 
      if (event.which === 13) {
-       this.selectOrCreateActiveItem();
+       this.selectOrCreateActiveItem(event);
      }
    };
 
@@ -180,7 +180,7 @@ const factory = (Chip, Input) => {
       return query_value;
    }
 
-   selectOrCreateActiveItem () {
+   selectOrCreateActiveItem (event) {
      let target = this.state.active;
      if (!target) {
        target = this.props.allowCreate

components/button/_config.scss

@@ -9,6 +9,8 @@ $button-accent-color-hover: rgba($color-accent, .2) !default;
 $button-accent-color: $color-accent !default;
 $button-disabled-text-color: rgba($color-black, 0.26) !default;
 $button-disabled-background-color: rgba($color-black, 0.12) !default;
+$button-disabled-text-color-inverse: rgba($color-white, 0.54) !default;
+$button-disabled-background-inverse: rgba($color-white, 0.08) !default;
 $button-border-radius: 0.2 * $unit !default;
 $button-floating-font-size: $unit * 2.4 !default;
 $button-floating-height: $unit * 5.6 !default;

components/button/theme.scss

@@ -178,5 +178,10 @@
   }
 }
 
+.neutral.inverse[disabled] {
+  color: $button-disabled-text-color-inverse;
+  background-color: $button-disabled-background-inverse;
+}
+
 @include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
 @include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);

components/checkbox/Checkbox.js

@@ -18,6 +18,8 @@ const factory = (Check) => {
       ]),
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onMouseEnter: PropTypes.func,
+      onMouseLeave: PropTypes.func,
       style: PropTypes.object,
       theme: PropTypes.shape({
         disabled: PropTypes.string,
@@ -49,17 +51,25 @@ const factory = (Check) => {
     }
 
     render () {
-      const { checked, children, disabled, label, style, theme, ...others } = this.props;
+      const { checked, children, disabled, label, name, style, onChange, // eslint-disable-line
+        onMouseEnter, onMouseLeave, theme, ...others } = this.props;
       const className = classnames(theme.field, {
         [theme.disabled]: this.props.disabled
       }, this.props.className);
 
       return (
-        <label {...others} data-react-toolbox='checkbox' className={className}>
+        <label
+          data-react-toolbox='checkbox'
+          className={className}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
           <input
+            {...others}
             checked={checked}
             className={theme.input}
             disabled={disabled}
+            name={name}
             onChange={() => {}}
             onClick={this.handleToggle}
             ref={node => { this.inputNode = node; }}

components/date_picker/readme.md

@@ -79,6 +79,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `disabled` | Added to day element when day is disabled.|
 | `header` | Used for the dialog header,.|
 | `input` | Used for Input element that opens the picker.|
+| `label` | Used for the label element.|
 | `month` | Used for the month root element.|
 | `monthsDisplay` | Added to the root dialog when months are displayed.|
 | `next` | Used for the next month icon.|

components/dropdown/Dropdown.js

@@ -80,7 +80,7 @@ const factory = (Input) => {
       touchend: this.handleDocumentClick
     });
 
-    open = () => {
+    open = (event) => {
       const client = event.target.getBoundingClientRect();
       const screenHeight = window.innerHeight || document.documentElement.offsetHeight;
       const up = this.props.auto ? client.top > ((screenHeight / 2) + client.height) : false;
@@ -101,7 +101,7 @@ const factory = (Input) => {
     };
 
     handleClick = (event) => {
-      this.open();
+      this.open(event);
       events.pauseEvent(event);
       if (this.props.onClick) this.props.onClick(event);
     };
@@ -162,7 +162,7 @@ const factory = (Input) => {
 
     handleFocus = event => {
       event.stopPropagation();
-      if (!this.props.disabled) this.open();
+      if (!this.props.disabled) this.open(event);
       if (this.props.onFocus) this.props.onFocus(event);
     };
 

components/dropdown/index.d.ts

@@ -108,6 +108,10 @@ interface DropdownProps extends ReactToolbox.Props {
    * Default value using JSON data.
    */
   value?: string | number;
+  /**
+   * If true, the dropdown has a required attribute.
+   */
+  required?: boolean;
 }
 
 export class Dropdown extends React.Component<DropdownProps, {}> { }

components/radio/RadioButton.js

@@ -20,6 +20,8 @@ const factory = (Radio) => {
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
       onFocus: PropTypes.func,
+      onMouseEnter: PropTypes.func,
+      onMouseLeave: PropTypes.func,
       theme: PropTypes.shape({
         disabled: PropTypes.string,
         field: PropTypes.string,
@@ -50,20 +52,24 @@ const factory = (Radio) => {
     }
 
     render () {
-      const { checked, children, className, disabled, label, onChange, theme, ...others } = this.props; // eslint-disable-line
+      const { checked, children, className, disabled, label, name, onChange,  // eslint-disable-line
+        onMouseEnter, onMouseLeave, theme, ...others } = this.props;
       const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
       return (
         <label
-          {...others}
           data-react-toolbox='radio-button'
           className={_className}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
         >
           <input
+            {...others}
             checked={checked}
             className={theme.input}
             disabled={disabled}
-            onClick={this.handleClick}
+            name={name}
             onChange={() => {}}
+            onClick={this.handleClick}
             ref={node => { this.inputNode = node; }}
             type='radio'
           />

components/tabs/index.d.ts

@@ -41,7 +41,7 @@ interface TabsProps extends ReactToolbox.Props {
   index?: number;
   /**
    * `unmounted` mode will not mount the tab content of inactive tabs.
-   * `display` mode will mount but hide inactive tabs. 
+   * `display` mode will mount but hide inactive tabs.
    * Consider holding state outside of the Tabs component before using `display` mode
    * @default unmounted
    */
@@ -50,6 +50,10 @@ interface TabsProps extends ReactToolbox.Props {
    * If True, the tabs will have an inverse style.
    */
   inverse?: boolean;
+  /**
+   * If True, the tabs will be fixed, covering the whole width.
+   */
+  fixed?: boolean;
   /**
    * Callback function that is fired when the tab changes.
    */

components/time_picker/TimePickerDialog.js

@@ -47,7 +47,7 @@ const factory = (Dialog) => {
       displayTime: new Date(this.props.value.getTime())
     };
 
-    componentWillUpdate (nextProps) {
+    componentWillReceiveProps (nextProps) {
       if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
         this.setState({ displayTime: new Date(nextProps.value.getTime()) });
       }

components/tooltip/Tooltip.js

@@ -19,6 +19,7 @@ const defaults = {
   className: '',
   delay: 0,
   hideOnClick: true,
+  showOnClick: false,
   position: POSITION.VERTICAL,
   theme: {}
 };
@@ -28,6 +29,7 @@ const tooltipFactory = (options = {}) => {
     className: defaultClassName,
     delay: defaultDelay,
     hideOnClick: defaultHideOnClick,
+    showOnClick: defaultShowOnClick,
     position: defaultPosition,
     theme: defaultTheme
   } = {...defaults, ...options};
@@ -51,14 +53,16 @@ const tooltipFactory = (options = {}) => {
         ]),
         tooltipDelay: PropTypes.number,
         tooltipHideOnClick: PropTypes.bool,
-        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key]))
+        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
+        tooltipShowOnClick: PropTypes.bool
       };
 
       static defaultProps = {
         className: defaultClassName,
         tooltipDelay: defaultDelay,
         tooltipHideOnClick: defaultHideOnClick,
-        tooltipPosition: defaultPosition
+        tooltipPosition: defaultPosition,
+        tooltipShowOnClick: defaultShowOnClick
       };
 
       state = {
@@ -158,7 +162,14 @@ const tooltipFactory = (options = {}) => {
       };
 
       handleClick = (event) => {
-        if (this.props.tooltipHideOnClick) this.deactivate();
+        if (this.props.tooltipHideOnClick && this.state.active) {
+            this.deactivate();
+        }
+
+        if (this.props.tooltipShowOnClick && !this.state.active) {
+          this.activate(this.calculatePosition(event.target));
+        }
+
         if (this.props.onClick) this.props.onClick(event);
       };
 
@@ -173,6 +184,7 @@ const tooltipFactory = (options = {}) => {
           tooltipDelay,       //eslint-disable-line no-unused-vars
           tooltipHideOnClick, //eslint-disable-line no-unused-vars
           tooltipPosition,    //eslint-disable-line no-unused-vars
+          tooltipShowOnClick, //eslint-disable-line no-unused-vars
           ...other
         } = this.props;
 

components/tooltip/readme.md

@@ -38,6 +38,7 @@ In any component you decorate with the Tooltip you'd get some additional props:
 | `tooltipDelay`        | `Number`      |               | Amount of time in miliseconds spent before the tooltip is visible.|
 | `tooltipHideOnClick`  | `Boolean`     | `true`        | If true, the Tooltip hides after a click in the host component.|
 | `tooltipPosition`     | `String`      | `vertical`    | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
+| `tooltipShowOnClick`  | `Boolean`     | `false`       | Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.|
 
 ## Theming
 

package.json

@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com",
-  "version": "1.2.5",
+  "version": "1.3.1",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

spec/components/tooltip.js

@@ -24,6 +24,14 @@ const TooltipTest = () => (
     />
     <TooltipInput tooltip='lorem ipsum...' />
     <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
+    <p>
+      Click this next word to show and hide on click:
+      {' '}
+      <TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
+        oh hai
+      </TooltipStrong>
+      {' '}. This is useful for mobile!
+    </p>
   </section>
 );