Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev

* 'dev' of github.com:soyjavi/react-toolbox:
  fix few missing propTypes
  update typings to 1.3.3
  Declare immutability-helper as direct dependency
  Add disabled dropdown item feature & add its test cases & update docs
  Reformat
  Cleaned up isValueAnObject check

Author: javivelasco

components/app_bar/AppBar.js

@@ -28,6 +28,7 @@ const factory = (IconButton) => {
         flat: PropTypes.string,
         leftIcon: PropTypes.string,
         rightIcon: PropTypes.string,
+        scrollHide: PropTypes.string,
         title: PropTypes.string
       }),
       title: PropTypes.string

components/app_bar/index.d.ts

@@ -17,7 +17,7 @@ export interface AppBarTheme {
   /**
    * Used as the app bar title.
    */
-  title ?: string;
+  title?: string;
   /**
    * Added to the left icon app bar element.
    */
@@ -26,9 +26,13 @@ export interface AppBarTheme {
    * Added to the right icon app bar element.
    */
   rightIcon?: string;
+  /**
+   * Added to the root element when the app bar is hidden during scroll.
+   */
+  scrollHide?: string;
 }
 
-interface AppBarProps extends ReactToolbox.Props {
+export interface AppBarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -50,19 +54,24 @@ interface AppBarProps extends ReactToolbox.Props {
   /**
    * If it exists it is used as the AppBar left icon
    */
-  leftIcon?: string;
+  leftIcon?: string | React.ReactNode;
   /**
    * Called when the left icon is clicked
    */
   onLeftIconClick?: Function;
   /**
    * If it exists it is used as the AppBar right icon
    */
-  rightIcon?: string;
+  rightIcon?: string | React.ReactNode;
   /**
    * Called when the righticon is clicked
    */
   onRightIconClick?: Function;
+  /**
+   * Whether AppBar should be hidden during scroll.
+   * @default false
+   */
+  scrollHide?: boolean;
   /**
    * Classnames object defining the component style.
    */

components/app_bar/readme.md

@@ -41,6 +41,7 @@ The `AppBar` component provides properties for the common use cases of `title`,
 | `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
 | `rightIcon`        | `String|Element`   | `null`  | Right icon.|
 | `onRightIconClick` | `Function` | `null`  | Called on right icon click event.|
+| `scrollHide`       | `Bool`     | `false` | Whether AppBar should be hidden during scroll.|
 
 ## Theme
 

components/autocomplete/Autocomplete.js

@@ -74,20 +74,12 @@ const factory = (Chip, Input) => {
      isValueAnObject: false
    };
 
-   componentDidMount () {
-     this.setIsValueAnObject();
-   }
-
    componentWillReceiveProps (nextProps) {
      if (!this.props.multiple) {
        this.setState({
          query: this.query(nextProps.value)
        });
      }
-
-     if (nextProps.multiple && this.props.value !== nextProps.value) {
-        this.setIsValueAnObject();
-     }
    }
 
    shouldComponentUpdate (nextProps, nextState) {
@@ -257,7 +249,7 @@ const factory = (Chip, Input) => {
 
      if (!vals) vals = [];
 
-     if (this.props.showSelectedWhenNotInSource && this.state.isValueAnObject) {
+     if (this.props.showSelectedWhenNotInSource && this.isValueAnObject()) {
        return new Map(Object.entries(vals));
      }
 
@@ -277,7 +269,7 @@ const factory = (Chip, Input) => {
      const source = this.source();
      const newValue = target === void 0 ? event.target.id : target;
 
-     if (this.state.isValueAnObject) {
+     if (this.isValueAnObject()) {
        const newItem = Array.from(source).reduce((obj, [k, value]) => {
          if (k === newValue) {
            obj[k] = value;
@@ -297,26 +289,24 @@ const factory = (Chip, Input) => {
 
        values.delete(key);
 
-       if (this.state.isValueAnObject) {
+       if (this.isValueAnObject()) {
          return this.handleChange(this.mapToObject(values), event);
        }
 
        this.handleChange([...values.keys()], event);
      }
    }
 
-   setIsValueAnObject () {
-      this.setState({
-        isValueAnObject: !Array.isArray(this.props.value) && typeof this.props.value === 'object'
-      });
-    }
+   isValueAnObject () {
+      return !Array.isArray(this.props.value) && typeof this.props.value === 'object';
+   }
 
-    mapToObject (map) {
+   mapToObject (map) {
       return Array.from(map).reduce((obj, [k, value]) => {
         obj[k] = value;
         return obj;
       }, {});
-    }
+   }
 
    renderSelected () {
      if (this.props.multiple) {

components/autocomplete/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import ReactToolbox from "../index";
+import { InputTheme } from "../input"
 
 export interface AutocompleteTheme {
   /**
@@ -18,10 +19,6 @@ export interface AutocompleteTheme {
    * Used to style the Input component.
    */
   input?: string;
-  /**
-   * Used for the label.
-   */
-  label?: string;
   /**
    * Used to style each suggestion.
    */
@@ -44,37 +41,55 @@ export interface AutocompleteTheme {
   values?: string;
 }
 
-interface AutocompleteProps extends ReactToolbox.Props {
+export interface AutocompleteProps extends ReactToolbox.Props {
+  /**
+   * Determines if user can create a new option with the current typed value.
+   * @default false
+   */
+  allowCreate?: boolean;
   /**
    * Determines the opening direction. It can be auto, up or down.
    * @default auto
    */
   direction?: "auto" | "up" | "down";
   /**
    * If true, component will be disabled.
+   * @default false
    */
   disabled?: boolean;
   /**
    * Sets the error string for the internal input element.
    * @default false
    */
   error?: string | React.ReactNode;
+  /**
+   * Whether component should keep focus after value change.
+   * @default false
+   */
+  keepFocusOnChange?: boolean;
   /**
    * The text string to use for the floating label element.
    */
   label?: string | React.ReactNode;
   /**
    * If true, component can hold multiple values.
+   * @default true
    */
   multiple?: boolean;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: Function;
   /**
    * Callback function that is fired when the components's value changes.
-   * @default auto
    */
   onChange?: Function;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: Function;
   /**
    * Callback function that is fired when the components's query value changes.
-   * @default auto
    */
   onQueryChange?: Function;
   /**
@@ -104,11 +119,15 @@ interface AutocompleteProps extends ReactToolbox.Props {
   /**
    * Classnames object defining the component style.
    */
-  theme?: AutocompleteTheme;
+  theme?: AutocompleteTheme & InputTheme;
   /**
    * Value or array of values currently selected component.
    */
   value?: any;
+  /**
+   * Additional properties passed to inner Input component.
+   */
+  [key: string]: any;
 }
 
 export class Autocomplete extends React.Component<AutocompleteProps, {}> { }

components/autocomplete/readme.md

@@ -48,6 +48,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `direction`                     | `String`                      | `auto`  | Determines the opening direction. It can be `auto`, `top` or `down`. |
 | `disabled`                      | `Bool`                        | `false` | If true, component will be disabled. |
 | `error`                         | `String` or `Node`            |         | Sets the error string for the internal input element. |
+| `keepFocusOnChange`             | `Bool`                        | `false` | Whether component should keep focus after value change. |
 | `label`                         | `String` or `Node`            |         | The text string to use for the floating label element. |
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |

components/avatar/index.d.ts

@@ -16,13 +16,14 @@ export interface AvatarTheme {
   letter?: string;
 }
 
-interface AvatarProps extends ReactToolbox.Props {
+export interface AvatarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
   children?: React.ReactNode;
   /**
    * Set to true if your image is not squared so it will be used as a cover for the element.
+   * @default false
    */
   cover?: boolean;
   /**
@@ -41,6 +42,10 @@ interface AvatarProps extends ReactToolbox.Props {
    * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
    */
   title?: string;
+  /**
+   * Additional properties for component root element.
+   */
+  [key: string]: any;
 }
 
 export class Avatar extends React.Component<AvatarProps, {}> { }