From 7ae9d2d92f632ccdd5255648d5c5ca6eddd0891f Mon Sep 17 00:00:00 2001
From: Emilien <emilien.santerre@gmail.com>
Date: Mon, 7 Nov 2016 16:30:05 +0100
Subject: [PATCH 01/50] Update memory-scroll.js

---
 src/list/mixin/memory-scroll.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/list/mixin/memory-scroll.js b/src/list/mixin/memory-scroll.js
index 98b397d69..39ea6ec79 100644
--- a/src/list/mixin/memory-scroll.js
+++ b/src/list/mixin/memory-scroll.js
@@ -15,6 +15,14 @@ let memoryMixin = {
             maxElements: this.props.perPage
         };
     },
+    
+    componentWillReceiveProps(nextProps) {
+        if(nextProps.perPage && nextProps.perPage !== this.props.perPage) {
+            this.setState({
+                maxElements: nextProps.perPage
+            });
+        }
+    },
 
     /**
      * Calculate the number of element to display in the memory list.

From 55f8f6b63c4517339524202f32dbb02aad566929 Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Wed, 28 Dec 2016 11:59:16 +0100
Subject: [PATCH 02/50] Starting to list all react supported html attributes

---
 src/common/react-html-attributes/index.js | 130 ++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 src/common/react-html-attributes/index.js

diff --git a/src/common/react-html-attributes/index.js b/src/common/react-html-attributes/index.js
new file mode 100644
index 000000000..bbf6ffe9d
--- /dev/null
+++ b/src/common/react-html-attributes/index.js
@@ -0,0 +1,130 @@
+export const inputHtmlAttributes {
+    accept,
+    alt,
+    autoComplete,
+    autoFocus,
+    checked,
+    dir,
+    disabled,
+    form,
+    formAction,
+    formEncType,
+    formMethod,
+    formNoValidate,
+    formTarget,
+    height,
+    list,
+    max,
+    maxLength,
+    min,
+    multiple,
+    name,
+    pattern,
+    placeholder,
+    readOnly,
+    required,
+    size,
+    src,
+    step,
+    type,
+    value,
+    width,
+}
+
+export const otherHtmlAttributes {
+    acceptCharset,
+    accessKey,
+    action,
+    allowFullScreen,
+    allowTransparency,
+    async,
+    autoPlay,
+    capture,
+    cellPadding,
+    cellSpacing,
+    challenge
+    charSet,
+    cite,
+    classID,
+    className,
+    colSpan,
+    cols,
+    content,
+    contentEditable,
+    contextMenu,
+    controls,
+    coords,
+    crossOrigin,
+    data,
+    dateTime,
+    default,
+    defer,
+    download,
+    draggable,
+    encType,
+    frameBorder,
+    headers,
+    hidden,
+    high,
+    href,
+    hrefLang,
+    htmlFor,
+    httpEquiv,
+    icon,
+    id,
+    inputMode,
+    integrity,
+    is,
+    keyParams,
+    keyType,
+    kind,
+    label,
+    lang,
+    loop,
+    low,
+    manifest,
+    marginHeight,
+    marginWidth,
+    media,
+    mediaGroup,
+    method,
+    minLength,
+    muted,
+    noValidate,
+    nonce,
+    open,
+    optimum,
+    poster,
+    preload,
+    profile,
+    radioGroup,
+    rel,
+    reversed,
+    role,
+    rowSpan,
+    rows,
+    sandbox,
+    scope,
+    scoped,
+    scrolling,
+    seamless,
+    selected,
+    shape,
+    sizes,
+    span,
+    spellCheck,
+    srcDoc,
+    srcLang,
+    srcSet,
+    start,
+    step,
+    style,
+    summary,
+    tabIndex,
+    target,
+    title,
+    type,
+    useMap,
+    wmode,
+    wrap
+}

From 4cba25b4a88fb8a22175ca76d86a09eb3eb92648 Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Wed, 28 Dec 2016 12:00:33 +0100
Subject: [PATCH 03/50] Adding missing coma

---
 src/common/react-html-attributes/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/react-html-attributes/index.js b/src/common/react-html-attributes/index.js
index bbf6ffe9d..187c406bb 100644
--- a/src/common/react-html-attributes/index.js
+++ b/src/common/react-html-attributes/index.js
@@ -42,7 +42,7 @@ export const otherHtmlAttributes {
     capture,
     cellPadding,
     cellSpacing,
-    challenge
+    challenge,
     charSet,
     cite,
     classID,

From fdb786caab5dea44b80834c7e985dc2bb46a873e Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Wed, 28 Dec 2016 16:43:30 +0100
Subject: [PATCH 04/50] preparing props comparisons

---
 src/common/react-html-attributes/index.js | 258 +++++++++++-----------
 src/components/input/text/index.js        |  10 +-
 2 files changed, 138 insertions(+), 130 deletions(-)

diff --git a/src/common/react-html-attributes/index.js b/src/common/react-html-attributes/index.js
index 187c406bb..fc92fbec4 100644
--- a/src/common/react-html-attributes/index.js
+++ b/src/common/react-html-attributes/index.js
@@ -1,130 +1,130 @@
-export const inputHtmlAttributes {
-    accept,
-    alt,
-    autoComplete,
-    autoFocus,
-    checked,
-    dir,
-    disabled,
-    form,
-    formAction,
-    formEncType,
-    formMethod,
-    formNoValidate,
-    formTarget,
-    height,
-    list,
-    max,
-    maxLength,
-    min,
-    multiple,
-    name,
-    pattern,
-    placeholder,
-    readOnly,
-    required,
-    size,
-    src,
-    step,
-    type,
-    value,
-    width,
-}
+export const inputHtmlAttributes = [
+    "accept",
+    "alt",
+    "autoComplete",
+    "autoFocus",
+    "checked",
+    "dir",
+    "disabled",
+    "form",
+    "formAction",
+    "formEncType",
+    "formMethod",
+    "formNoValidate",
+    "formTarget",
+    "height",
+    "list",
+    "max",
+    "maxLength",
+    "min",
+    "multiple",
+    "name",
+    "pattern",
+    "placeholder",
+    "readOnly",
+    "required",
+    "size",
+    "src",
+    "step",
+    "type",
+    "value",
+    "width"
+]
 
-export const otherHtmlAttributes {
-    acceptCharset,
-    accessKey,
-    action,
-    allowFullScreen,
-    allowTransparency,
-    async,
-    autoPlay,
-    capture,
-    cellPadding,
-    cellSpacing,
-    challenge,
-    charSet,
-    cite,
-    classID,
-    className,
-    colSpan,
-    cols,
-    content,
-    contentEditable,
-    contextMenu,
-    controls,
-    coords,
-    crossOrigin,
-    data,
-    dateTime,
-    default,
-    defer,
-    download,
-    draggable,
-    encType,
-    frameBorder,
-    headers,
-    hidden,
-    high,
-    href,
-    hrefLang,
-    htmlFor,
-    httpEquiv,
-    icon,
-    id,
-    inputMode,
-    integrity,
-    is,
-    keyParams,
-    keyType,
-    kind,
-    label,
-    lang,
-    loop,
-    low,
-    manifest,
-    marginHeight,
-    marginWidth,
-    media,
-    mediaGroup,
-    method,
-    minLength,
-    muted,
-    noValidate,
-    nonce,
-    open,
-    optimum,
-    poster,
-    preload,
-    profile,
-    radioGroup,
-    rel,
-    reversed,
-    role,
-    rowSpan,
-    rows,
-    sandbox,
-    scope,
-    scoped,
-    scrolling,
-    seamless,
-    selected,
-    shape,
-    sizes,
-    span,
-    spellCheck,
-    srcDoc,
-    srcLang,
-    srcSet,
-    start,
-    step,
-    style,
-    summary,
-    tabIndex,
-    target,
-    title,
-    type,
-    useMap,
-    wmode,
-    wrap
-}
+export const otherHtmlAttributes = [
+    "acceptCharset",
+    "accessKey",
+    "action",
+    "allowFullScreen",
+    "allowTransparency",
+    "async",
+    "autoPlay",
+    "capture",
+    "cellPadding",
+    "cellSpacing",
+    "challenge",
+    "charSet",
+    "cite",
+    "classID",
+    "className",
+    "colSpan",
+    "cols",
+    "content",
+    "contentEditable",
+    "contextMenu",
+    "controls",
+    "coords",
+    "crossOrigin",
+    "data",
+    "dateTime",
+    "default",
+    "defer",
+    "download",
+    "draggable",
+    "encType",
+    "frameBorder",
+    "headers",
+    "hidden",
+    "high",
+    "href",
+    "hrefLang",
+    "htmlFor",
+    "httpEquiv",
+    "icon",
+    "id",
+    "inputMode",
+    "integrity",
+    "is",
+    "keyParams",
+    "keyType",
+    "kind",
+    "label",
+    "lang",
+    "loop",
+    "low",
+    "manifest",
+    "marginHeight",
+    "marginWidth",
+    "media",
+    "mediaGroup",
+    "method",
+    "minLength",
+    "muted",
+    "noValidate",
+    "nonce",
+    "open",
+    "optimum",
+    "poster",
+    "preload",
+    "profile",
+    "radioGroup",
+    "rel",
+    "reversed",
+    "role",
+    "rowSpan",
+    "rows",
+    "sandbox",
+    "scope",
+    "scoped",
+    "scrolling",
+    "seamless",
+    "selected",
+    "shape",
+    "sizes",
+    "span",
+    "spellCheck",
+    "srcDoc",
+    "srcLang",
+    "srcSet",
+    "start",
+    "step",
+    "style",
+    "summary",
+    "tabIndex",
+    "target",
+    "title",
+    "type",
+    "useMap",
+    "wmode",
+    "wrap"
+]
diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index 16b2499f1..2d1dfd1ad 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -5,6 +5,7 @@ import {identity} from 'lodash/utility';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
 const MODE = {isEdit: true};
+import {inputHtmlAttributes} from '../../../common/react-html-attributes';
 
 const propTypes = {
     disabled: PropTypes.bool,
@@ -68,7 +69,14 @@ class InputText extends Component {
      * @override
     */
     render() {
-        const { autoFocus, onBlur, disabled, formatter, unformatter, maxLength, onFocus, onClick, onKeyDown, onKeyPress, error, name, placeholder, style, value: rawValue, size, type} = this.props;
+        const a = [100, 200, 300]
+        // console.log(a.indexOf(200));
+        inputHtmlAttributes.filter( (e, index) => {
+            if(this.props[e]) {
+                console.log(this.props[e]);
+            }
+        });
+        const { autoFocus, disabled, formatter, unformatter, maxLength, onFocus, onClick, onKeyDown, onKeyPress, error, name, placeholder, style, value: rawValue, size, type} = this.props;
         const value = formatter(rawValue, MODE);
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
         const inputProps =  { autoFocus, disabled, onKeyDown, onKeyPress, onBlur, maxLength, onFocus, onClick, id: name, onChange: this._handleInputChange, pattern, size, type, value: value === undefined || value === null ? '' : value};

From 52a496d8ce891def3ae877afe8a75adc90ce5e10 Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Wed, 25 Jan 2017 17:49:31 +0100
Subject: [PATCH 05/50] Checking the props and seperate recognized input props
 from unrecognized props on InputText

---
 src/common/mixin/field-component-behaviour.js |  12 +-
 src/common/react-html-attributes/index.js     | 160 ++++--------------
 src/components/input/text/index.js            |  52 ++++--
 3 files changed, 81 insertions(+), 143 deletions(-)

diff --git a/src/common/mixin/field-component-behaviour.js b/src/common/mixin/field-component-behaviour.js
index 1b3a55f5e..ec29b72a0 100644
--- a/src/common/mixin/field-component-behaviour.js
+++ b/src/common/mixin/field-component-behaviour.js
@@ -1,10 +1,10 @@
 import assign from 'object-assign';
 import {isUndefined, isObject} from 'lodash/lang';
 /**
- * Identity function
- * @param  {object} d - data to treat.
- * @return {object}  - The same object.
- */
+* Identity function
+* @param  {object} d - data to treat.
+* @return {object}  - The same object.
+*/
 function identity(d) {
     return d;
 }
@@ -50,8 +50,8 @@ const fieldBehaviourMixin = {
             isRequired: (!isUndefined(options.isRequired) && options.isRequired) || def.isRequired || def.required, //legacy on required on model generation.
             //Style
             style: options.style,
-			// Type
-			                                                type: def.type,
+            // Type
+            type: def.type,
             //Methods
             validator: def.validator,
             formatter: def.formatter || identity,
diff --git a/src/common/react-html-attributes/index.js b/src/common/react-html-attributes/index.js
index fc92fbec4..b3b905dd1 100644
--- a/src/common/react-html-attributes/index.js
+++ b/src/common/react-html-attributes/index.js
@@ -1,130 +1,36 @@
 export const inputHtmlAttributes = [
-    "accept",
-    "alt",
-    "autoComplete",
-    "autoFocus",
-    "checked",
-    "dir",
-    "disabled",
-    "form",
-    "formAction",
-    "formEncType",
-    "formMethod",
-    "formNoValidate",
-    "formTarget",
-    "height",
-    "list",
-    "max",
-    "maxLength",
-    "min",
-    "multiple",
-    "name",
-    "pattern",
-    "placeholder",
-    "readOnly",
-    "required",
-    "size",
-    "src",
-    "step",
-    "type",
-    "value",
-    "width"
-]
-
-export const otherHtmlAttributes = [
-    "acceptCharset",
-    "accessKey",
-    "action",
-    "allowFullScreen",
-    "allowTransparency",
-    "async",
-    "autoPlay",
-    "capture",
-    "cellPadding",
-    "cellSpacing",
-    "challenge",
-    "charSet",
-    "cite",
-    "classID",
-    "className",
-    "colSpan",
-    "cols",
-    "content",
-    "contentEditable",
-    "contextMenu",
-    "controls",
-    "coords",
-    "crossOrigin",
-    "data",
-    "dateTime",
-    "default",
-    "defer",
-    "download",
-    "draggable",
-    "encType",
-    "frameBorder",
-    "headers",
-    "hidden",
-    "high",
-    "href",
-    "hrefLang",
-    "htmlFor",
-    "httpEquiv",
-    "icon",
-    "id",
-    "inputMode",
-    "integrity",
-    "is",
-    "keyParams",
-    "keyType",
-    "kind",
-    "label",
-    "lang",
-    "loop",
-    "low",
-    "manifest",
-    "marginHeight",
-    "marginWidth",
-    "media",
-    "mediaGroup",
-    "method",
-    "minLength",
-    "muted",
-    "noValidate",
-    "nonce",
-    "open",
-    "optimum",
-    "poster",
-    "preload",
-    "profile",
-    "radioGroup",
-    "rel",
-    "reversed",
-    "role",
-    "rowSpan",
-    "rows",
-    "sandbox",
-    "scope",
-    "scoped",
-    "scrolling",
-    "seamless",
-    "selected",
-    "shape",
-    "sizes",
-    "span",
-    "spellCheck",
-    "srcDoc",
-    "srcLang",
-    "srcSet",
-    "start",
-    "step",
-    "style",
-    "summary",
-    "tabIndex",
-    "target",
-    "title",
-    "type",
-    "useMap",
-    "wmode",
+    "accept", "alt", "autoComplete", "autoFocus", "checked", "dir",
+    "disabled", "form", "formAction", "formEncType", "formMethod",
+    "formNoValidate", "formTarget", "height", "label", "list", "max",
+    "maxLength", "min", "multiple", "name", "onCopy", "onCut",
+    "onPast", "onKeyDown", "onKeyPress", "onKeyUp", "onCompositionEnd",
+    "onCompositionStart", "onCompositionUpdate", "onFocus", "onBlur",
+    "onChange", "onInput", "onSubmit", "onInput", "onClick", "onContextMenu",
+    "onDoubleClick", "onDrag", "onDragEnd", "onDragEnter", "onDragExit",
+    "onDragLeave", "onDragOver", "onDragStart", "onDrop", "onMouseDown",
+    "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut",
+    "onMouseOver", "onMouseUp", "onSelect", "onAbort", "onCanPlay",
+    "onCanPlayThrough", "onDurationChange", "onEmptied", "onEncrypted",
+    "onEnded", "onError", "onLoadedData", "onLoadedMetadata",
+    "onLoadStart", "onPause", "onPlay", "onPlaying", "onProgress",
+    "onRateChange", "onSeeked", "onSeeking", "onStalled", "onSuspend",
+    "onTimeUpdate", "onVolumeChange", "onWaiting", "onLoad", "onError",
+    "onAnimationStart", "onAnimationEnd", "onAnimationIteration",
+    "onTransitionEnd", "pattern", "placeholder", "readOnly", "required",
+    "size", "src", "step", "type", "value", "width", "acceptCharset",
+    "accessKey", "action", "allowFullScreen",
+    "allowTransparency", "async", "autoPlay", "capture", "cellPadding",
+    "cellSpacing", "challenge", "charSet", "cite", "classID", "className",
+    "colSpan", "cols", "content", "contentEditable", "contextMenu", "controls",
+    "coords", "crossOrigin", "data", "dateTime", "default", "defer", "download",
+    "draggable", "encType", "frameBorder", "headers", "hidden", "high", "href",
+    "hrefLang", "htmlFor", "httpEquiv", "icon", "id", "inputMode", "integrity",
+    "is", "keyParams", "keyType", "kind", "lang", "loop", "low", "manifest",
+    "marginHeight", "marginWidth", "media", "mediaGroup", "method", "minLength",
+    "muted", "noValidate", "nonce", "open", "optimum", "poster", "preload",
+    "profile", "radioGroup", "rel", "reversed", "role", "rowSpan", "rows",
+    "sandbox", "scope", "scoped", "scrolling", "seamless", "selected", "shape",
+    "sizes", "span", "spellCheck", "srcDoc", "srcLang", "srcSet", "start", "step",
+    "style", "summary", "tabIndex", "target", "title", "type", "useMap", "wmode",
     "wrap"
 ]
diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index 2d1dfd1ad..e6bdf44c6 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -64,23 +64,55 @@ class InputText extends Component {
         const {value} = evt.target;
         return onChange(unformatter(value, MODE));
     };
+
+    /**
+     * comments will be right there
+     */
+    _checkProps = (props) => {
+        const values = Object.values(props);
+        let validInputProps = {};
+        let invalidInputProps = {};
+        for(let key in props) {
+            const returnedValue = inputHtmlAttributes.map((e, index) => {
+                if(e === key) {
+                    let value;
+                    switch (key) {
+                        case 'value':
+                            value = props.formatter(props[key], MODE);
+                            break;
+                        case 'onChange':
+                            value = this._handleInputChange;
+                            break;
+                        default:
+                            value = props[key]
+                    }
+                    validInputProps[`${key}`] = value;
+                } else {
+                    invalidInputProps[`${key}`] = props[key];
+                }
+            })
+        }
+        const managedProps = [validInputProps, invalidInputProps];
+        return managedProps;
+    };
     /**
      * @inheritdoc
      * @override
     */
     render() {
-        const a = [100, 200, 300]
-        // console.log(a.indexOf(200));
-        inputHtmlAttributes.filter( (e, index) => {
-            if(this.props[e]) {
-                console.log(this.props[e]);
-            }
-        });
-        const { autoFocus, disabled, formatter, unformatter, maxLength, onFocus, onClick, onKeyDown, onKeyPress, error, name, placeholder, style, value: rawValue, size, type} = this.props;
-        const value = formatter(rawValue, MODE);
+        const managedProps = this._checkProps(this.props);
+
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1];
+
+        const { name, placeholder } = validInputProps;
+        const { error, style } = invalidInputProps;
+
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
-        const inputProps =  { autoFocus, disabled, onKeyDown, onKeyPress, onBlur, maxLength, onFocus, onClick, id: name, onChange: this._handleInputChange, pattern, size, type, value: value === undefined || value === null ? '' : value};
+        
+        const inputProps = validInputProps;
         const cssClass = `mdl-textfield mdl-js-textfield${error ? ' is-invalid' : ''}`;
+
         return (
             <div className={cssClass} data-focus='input-text' ref='inputText' style={style}>
                 <input className='mdl-textfield__input' ref='htmlInput' {...inputProps} />

From 75b4dd671b72176b818a568563052151cba5d761 Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Wed, 25 Jan 2017 18:09:59 +0100
Subject: [PATCH 06/50] Updating the input text to make tests work again

---
 src/components/input/text/__tests__/input-text-test.js | 2 +-
 src/components/input/text/index.js                     | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/input/text/__tests__/input-text-test.js b/src/components/input/text/__tests__/input-text-test.js
index c20ff1e3b..4baa16a51 100644
--- a/src/components/input/text/__tests__/input-text-test.js
+++ b/src/components/input/text/__tests__/input-text-test.js
@@ -133,7 +133,7 @@ describe('The input text', () => {
             expect(htmlError).to.exist;
             expect(htmlError.innerHTML).to.have.string(error);
         });
-        it('input should have a pattern attribute', () => {
+        it.only('input should have a pattern attribute', () => {
             expect(htmlInput).to.exist;
             expect(htmlInput.getAttribute('pattern')).to.equal('hasError');
         });
diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index e6bdf44c6..75bc6d06e 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -69,7 +69,9 @@ class InputText extends Component {
      * comments will be right there
      */
     _checkProps = (props) => {
-        const values = Object.values(props);
+        const values = Object.keys(props).map( value => {
+            return props[value]
+        });
         let validInputProps = {};
         let invalidInputProps = {};
         for(let key in props) {
@@ -109,8 +111,8 @@ class InputText extends Component {
         const { error, style } = invalidInputProps;
 
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
-        
-        const inputProps = validInputProps;
+
+        const inputProps = {...validInputProps, pattern};
         const cssClass = `mdl-textfield mdl-js-textfield${error ? ' is-invalid' : ''}`;
 
         return (

From 9b09170235131f4f726fc6f3af180683c0c56f7d Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Wed, 25 Jan 2017 18:11:30 +0100
Subject: [PATCH 07/50] Removing .only

---
 src/components/input/text/__tests__/input-text-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/text/__tests__/input-text-test.js b/src/components/input/text/__tests__/input-text-test.js
index 4baa16a51..c20ff1e3b 100644
--- a/src/components/input/text/__tests__/input-text-test.js
+++ b/src/components/input/text/__tests__/input-text-test.js
@@ -133,7 +133,7 @@ describe('The input text', () => {
             expect(htmlError).to.exist;
             expect(htmlError.innerHTML).to.have.string(error);
         });
-        it.only('input should have a pattern attribute', () => {
+        it('input should have a pattern attribute', () => {
             expect(htmlInput).to.exist;
             expect(htmlInput.getAttribute('pattern')).to.equal('hasError');
         });

From a500b11f7966dbf6e6f9b4de8290d38706eee7ee Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Sat, 28 Jan 2017 23:24:57 +0100
Subject: [PATCH 08/50] Refactoring the code and fixing the fact the valid
 props were also in the invalid props

---
 src/components/input/text/index.js | 58 ++++++++++++------------------
 1 file changed, 22 insertions(+), 36 deletions(-)

diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index 75bc6d06e..9f42736ab 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -31,16 +31,16 @@ const defaultProps = {
 };
 
 /**
- * Component standing for an HTML input.
- */
+* Component standing for an HTML input.
+*/
 @MDBehaviour('inputText')
 @ComponentBaseBehaviour
 class InputText extends Component {
 
     /**
-     * Get the dom value of the component.
-     * @return {object} - The unformated dom value.
-     */
+    * Get the dom value of the component.
+    * @return {object} - The unformated dom value.
+    */
     getValue = () => {
         const {unformatter} = this.props;
         const domEl = ReactDOM.findDOMNode(this.refs.htmlInput);
@@ -55,10 +55,10 @@ class InputText extends Component {
         }
     }
     /**
-     * Handle the change on the input text, it only propagate the value.
-     * @param  {object} evt - The react DOM event.
-     * @return {object} - The function onChannge from the props, called.
-     */
+    * Handle the change on the input text, it only propagate the value.
+    * @param  {object} evt - The react DOM event.
+    * @return {object} - The function onChannge from the props, called.
+    */
     _handleInputChange = (evt) => {
         const {unformatter, onChange} = this.props;
         const {value} = evt.target;
@@ -66,40 +66,26 @@ class InputText extends Component {
     };
 
     /**
-     * comments will be right there
-     */
+    * comments will be right there
+    */
     _checkProps = (props) => {
-        const values = Object.keys(props).map( value => {
-            return props[value]
-        });
         let validInputProps = {};
         let invalidInputProps = {};
-        for(let key in props) {
-            const returnedValue = inputHtmlAttributes.map((e, index) => {
-                if(e === key) {
-                    let value;
-                    switch (key) {
-                        case 'value':
-                            value = props.formatter(props[key], MODE);
-                            break;
-                        case 'onChange':
-                            value = this._handleInputChange;
-                            break;
-                        default:
-                            value = props[key]
-                    }
-                    validInputProps[`${key}`] = value;
-                } else {
-                    invalidInputProps[`${key}`] = props[key];
-                }
-            })
-        }
+
+        Object.keys(props).map(key => {
+            if(key === inputHtmlAttributes[inputHtmlAttributes.indexOf(key)]) {
+                let value = key === 'value' ? props.formatter(props[key], MODE) : key === 'onChange' ? this._handleInputChange : props[key];
+                validInputProps[key] = value;
+            } else {
+                invalidInputProps[key] = props[key];
+            }
+        });
         const managedProps = [validInputProps, invalidInputProps];
         return managedProps;
     };
     /**
-     * @inheritdoc
-     * @override
+    * @inheritdoc
+    * @override
     */
     render() {
         const managedProps = this._checkProps(this.props);

From a14d1af4da09da1389fd9b9f4d4df67c8abd3789 Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Wed, 8 Feb 2017 19:53:04 +0100
Subject: [PATCH 09/50] Adding decorator to input components

---
 src/behaviours/input-component/index.js       | 22 +++++++
 .../input/autocomplete-select/edit.js         | 23 +++++--
 .../input/autocomplete-text/edit.js           | 66 +++++++------------
 src/components/input/checkbox/index.js        | 16 ++++-
 src/components/input/radio/index.js           | 19 ++++--
 src/components/input/select/index.js          | 16 ++++-
 src/components/input/text/index.js            | 47 +++++++------
 src/components/input/textarea/index.js        | 18 ++++-
 src/components/input/toggle/index.js          | 13 +++-
 9 files changed, 153 insertions(+), 87 deletions(-)
 create mode 100644 src/behaviours/input-component/index.js

diff --git a/src/behaviours/input-component/index.js b/src/behaviours/input-component/index.js
new file mode 100644
index 000000000..058a0c343
--- /dev/null
+++ b/src/behaviours/input-component/index.js
@@ -0,0 +1,22 @@
+import {inputHtmlAttributes} from '../../common/react-html-attributes';
+
+export const InputBehaviour = Component => class InputComponent extends Component {
+
+    /**
+    * comments will be right there
+    */
+    _checkProps(props) {
+        let validInputProps = {};
+        let invalidInputProps = {};
+
+        Object.keys(props).map(key => {
+            if(key === inputHtmlAttributes[inputHtmlAttributes.indexOf(key)]) {
+                validInputProps[key] = (key === 'value' && (props[key] === null || props[key] === undefined)) ? '' : props[key];
+            } else {
+                invalidInputProps[key] = props[key];
+            }
+        });
+        const managedProps = [validInputProps, invalidInputProps];
+        return managedProps;
+    };
+};
diff --git a/src/components/input/autocomplete-select/edit.js b/src/components/input/autocomplete-select/edit.js
index e28458eb1..e57cf10c1 100644
--- a/src/components/input/autocomplete-select/edit.js
+++ b/src/components/input/autocomplete-select/edit.js
@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
+import {InputBehaviour} from '../../../behaviours/input-component';
 
 import closest from 'closest';
 import debounce from 'lodash/function/debounce';
@@ -35,6 +36,7 @@ const defaultProps = {
 @MDBehaviour('loader')
 @MDBehaviour('inputText')
 @ComponentBaseBehaviour
+@InputBehaviour
 class Autocomplete extends Component {
     constructor(props) {
         super(props);
@@ -213,15 +215,22 @@ class Autocomplete extends Component {
     };
 
     render () {
-        const { autoFocus, onBlur, disabled, onKeyPress, maxLength, onFocus, onClick, customError, placeholder, renderOptions, ...otherProps }  = this.props;
         const {inputValue, isLoading} = this.state;
+        const {customError, renderOptions} = this.props;
         const {_handleQueryFocus, _handleQueryKeyDown, _handleQueryChange} = this;
-        const inputProps =  {
-            autoFocus, disabled, onKeyPress, maxLength, onFocus, onClick,
-            onChange: _handleQueryChange, onFocus: _handleQueryFocus,
-            onKeyDown: _handleQueryKeyDown, onBlur,
-            value: inputValue === undefined || inputValue === null ? '' : inputValue
-        };
+
+        const managedProps = this._checkProps(this.props);
+
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1]
+
+        const { name, placeholder, value: valueToFormat } = validInputProps;
+
+        validInputProps.value = inputValue;
+        validInputProps.onFocus = this._handleQueryFocus;
+        validInputProps.onChange = this._handleQueryChange;
+
+        const inputProps = {...validInputProps};
 
         return (
             <div data-focus='autocomplete' data-id={this.autocompleteId}>
diff --git a/src/components/input/autocomplete-text/edit.js b/src/components/input/autocomplete-text/edit.js
index 1639b36c0..78bf36b50 100644
--- a/src/components/input/autocomplete-text/edit.js
+++ b/src/components/input/autocomplete-text/edit.js
@@ -2,12 +2,14 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
+import {InputBehaviour} from '../../../behaviours/input-component';
 
 import debounce from 'lodash/function/debounce';
 
 @MDBehaviour('materialInput')
 @MDBehaviour('loader')
 @ComponentBaseBehaviour
+@InputBehaviour
 class AutocompleteTextEdit extends Component {
     static defaultProps = {
         placeholder: 'Search here...',
@@ -60,9 +62,9 @@ class AutocompleteTextEdit extends Component {
         emptyShowAll: PropTypes.bool,
 
         /**
-         * [inputTimeout description]
-         * @type {number}
-         */
+        * [inputTimeout description]
+        * @type {number}
+        */
         inputTimeout : PropTypes.number.isRequired
     };
 
@@ -82,8 +84,8 @@ class AutocompleteTextEdit extends Component {
     }
 
     componentDidMount() {
-      const {inputTimeout} = this.props;
-      this._debouncedQuerySearcher = debounce(this._querySearcher, inputTimeout);
+        const {inputTimeout} = this.props;
+        this._debouncedQuerySearcher = debounce(this._querySearcher, inputTimeout);
     }
 
     // Returns the state's inputValue
@@ -165,13 +167,26 @@ class AutocompleteTextEdit extends Component {
 
     // Maybe give the option for the floating label
     render() {
-        const {inputValue, hasSuggestions, hasFocus, isLoading, ...otherProps} = this.state;
-        const {placeholder, inputTimeout, showAtFocus, emptyShowAll, error} = this.props
+        const {inputValue, hasSuggestions, hasFocus, isLoading} = this.state;
+
+        const managedProps = this._checkProps(this.props);
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1];
+
+        const {inputTimeout, error} = invalidInputProps;
+        const {placeholder} = validInputProps;
+
+        validInputProps.value = inputValue === undefined || inputValue === null ? '' : inputValue;
+        validInputProps.onFocus = this.toggleHasFocus;
+        validInputProps.onChange = this.onQueryChange;
+        validInputProps.onBlur = this.toggleHasFocus;
+        const inputProps = {...validInputProps};
+
         return(
             <div data-focus='autocompleteText'>
                 <div className={`mdl-textfield mdl-js-textfield${error ? ' is-invalid' : ''}`} ref='materialInput'>
                     <div data-focus='loading' data-loading={isLoading} className='mdl-progress mdl-js-progress' ref='loader'/>
-                    <input onFocus={this.toggleHasFocus} onBlur={this.toggleHasFocus} className='mdl-textfield__input' type='text' value={inputValue === undefined || inputValue === null ? '' : inputValue} ref='inputText' onChange={::this.onQueryChange} showAtFocus={showAtFocus} emptyShowAll={emptyShowAll} {...otherProps} />
+                    <input className='mdl-textfield__input' type='text' ref='inputText' {...inputProps} />
                     <label className="mdl-textfield__label">{this.i18n(placeholder)}</label>
                     <span className="mdl-textfield__error" ref='errorMessage'>{this.i18n(error)}</span>
                 </div>
@@ -184,38 +199,3 @@ class AutocompleteTextEdit extends Component {
 }
 
 export default AutocompleteTextEdit;
-
-/*
-EXAMPLE
-const _querySearcher = query => {
-    let data = [
-        {
-            key: 'JL',
-            label: 'Joh Lickeur'
-        },
-        {
-            key: 'GK',
-            label: 'Guénolé Kikabou'
-        },
-        {
-            key: 'YL',
-            label: 'Yannick Lounivis'
-        }
-    ];
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            resolve({
-                data,
-                totalCount: data.length
-            });
-        }, 500);
-    });
-};
-
-<AutocompleteText
-    isEdit={isEdit}
-    querySearcher={_querySearcher}
-    placeholder={'Your search...'}
-    error{Something wrong happend. Retry please...}
-/>
-*/
diff --git a/src/components/input/checkbox/index.js b/src/components/input/checkbox/index.js
index 3a20fff27..c7d4d79b1 100644
--- a/src/components/input/checkbox/index.js
+++ b/src/components/input/checkbox/index.js
@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Translation from '../../../behaviours/translation';
 import Material from '../../../behaviours/material';
+import {InputBehaviour} from '../../../behaviours/input-component';
 
 const propTypes = {
     label: PropTypes.string,
@@ -19,6 +20,7 @@ const displayName = 'InputCheckBox';
 
 @Translation
 @Material('mdlHolder')
+@InputBehaviour
 class InputCheckBox extends Component {
     getValue = () => {
         const domElement = ReactDOM.findDOMNode(this.refs.checkbox);
@@ -34,17 +36,25 @@ class InputCheckBox extends Component {
         }
     }
 
-    handleOnChange({target: {checked}}) {
+    handleOnChange = ({target: {checked}}) => {
         const {onChange} = this.props;
         onChange(checked);
     }
 
     render() {
-        const {label, value, disabled} = this.props;
+        const managedProps = this._checkProps(this.props);
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1];
+
+        const {label, value, disabled} = validInputProps;
+
+        validInputProps.onChange = this.handleOnChange;
+        const inputProps = {...validInputProps};
+        
         return (
           <div data-focus='input-checkbox-container'>
             <label className={'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect'} data-focus='input-checkbox' ref='mdlHolder'>
-                <input checked={value} className='mdl-checkbox__input' disabled={disabled} onChange={::this.handleOnChange} ref='checkbox' type='checkbox'/>
+                <input checked={value} className='mdl-checkbox__input' disabled={disabled} ref='checkbox' type='checkbox' {...inputProps}/>
                 {label && <span className='mdl-checkbox__label'>{this.i18n(label)}</span>}
             </label>
           </div>
diff --git a/src/components/input/radio/index.js b/src/components/input/radio/index.js
index 90d93aeca..8161878d3 100644
--- a/src/components/input/radio/index.js
+++ b/src/components/input/radio/index.js
@@ -2,11 +2,13 @@ import React, {Component, PropTypes} from 'react';
 import Translation from '../../../behaviours/translation';
 import GridBehaviour from '../../../behaviours/grid';
 import MaterialBehaviour from '../../../behaviours/material';
+import {InputBehaviour} from '../../../behaviours/input-component';
 import {isUndefined} from 'lodash/lang';
 
 @Translation
 @MaterialBehaviour('inputMdl')
 @GridBehaviour
+@InputBehaviour
 class Radio extends Component {
     static defaultProps = {
         value: false
@@ -41,7 +43,7 @@ class Radio extends Component {
     * Executed actions on change event.
     * @param  {event} event
     */
-    _onChange() {
+    _onChange = () => {
         this.setState({isChecked: !this.state.isChecked}, () => {
             if(this.props.onChange) {
                 this.props.onChange(this.state.isChecked);
@@ -63,13 +65,20 @@ class Radio extends Component {
     */
     render() {
         const {isChecked} = this.state;
-        const {label, name, ...otherProps} = this.props;
-        // we use inputProps to be able to display 'checked' property. it is required to be able to use MDL.
-        const checkedProps = isChecked ? {checked: 'checked'} : {};
+
+        const managedProps = this._checkProps(this.props);
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1];
+
+        const {label, onChange} = validInputProps;
+
+        validInputProps.onChange = this._onChange;
+        validInputProps.checked = isChecked ? 'checked' : undefined;
+        const inputProps = {...validInputProps};
 
         return (
             <label className='mdl-radio mdl-js-radio mdl-js-ripple-effect' data-focus="input-radio" ref='inputMdl'>
-                <input className='mdl-radio__button' name={name} onChange={::this._onChange} type='radio' {...checkedProps} {...otherProps} ref='inputRadio'/>
+                <input className='mdl-radio__button' type='radio' ref='inputRadio' {...inputProps}/>
                 <span className='mdl-radio__label'>{this.i18n(label)}</span>
             </label>
         );
diff --git a/src/components/input/select/index.js b/src/components/input/select/index.js
index e910766ff..a594516c5 100644
--- a/src/components/input/select/index.js
+++ b/src/components/input/select/index.js
@@ -2,6 +2,7 @@
 import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
+import {InputBehaviour} from '../../../behaviours/input-component';
 import {isUndefined, isNull, isNumber} from 'lodash/lang';
 import {union} from 'lodash/array';
 const UNSELECTED_KEY = 'UNSELECTED_KEY';
@@ -55,6 +56,7 @@ const defaultProps = {
 * Component standing for an HTML input.
 */
 @ComponentBaseBehaviour
+@InputBehaviour
 class Select extends Component {
 
     /**
@@ -102,11 +104,19 @@ class Select extends Component {
     * @override
     */
     render() {
-        const { autoFocus, error, multiple, name, placeholder, style, value, values, disabled, onChange, size } = this.props;
-        const selectProps = { autoFocus, disabled, multiple, size };
+        const managedProps = this._checkProps(this.props);
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1];
+
+        const {error} = invalidInputProps;
+        const {style} = validInputProps;
+
+        validInputProps.onChange = this._handleSelectChange;
+        const inputProps = {...validInputProps};
+
         return (
             <div data-focus='select' ref='select' data-valid={!error} style={style}>
-                <select name={name} onChange={this._handleSelectChange} ref='htmlSelect' value={value} {...selectProps}>
+                <select ref='htmlSelect' {...inputProps}>
                     {this._renderOptions(this.props)}
                 </select>
                 {error && <div className='label-error' ref='error'>{error}</div>}
diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index 9f42736ab..c94af43c8 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
 import {identity} from 'lodash/utility';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
+import {InputBehaviour} from '../../../behaviours/input-component';
 const MODE = {isEdit: true};
-import {inputHtmlAttributes} from '../../../common/react-html-attributes';
 
 const propTypes = {
     disabled: PropTypes.bool,
@@ -35,6 +35,7 @@ const defaultProps = {
 */
 @MDBehaviour('inputText')
 @ComponentBaseBehaviour
+@InputBehaviour
 class InputText extends Component {
 
     /**
@@ -65,24 +66,24 @@ class InputText extends Component {
         return onChange(unformatter(value, MODE));
     };
 
-    /**
-    * comments will be right there
-    */
-    _checkProps = (props) => {
-        let validInputProps = {};
-        let invalidInputProps = {};
-
-        Object.keys(props).map(key => {
-            if(key === inputHtmlAttributes[inputHtmlAttributes.indexOf(key)]) {
-                let value = key === 'value' ? props.formatter(props[key], MODE) : key === 'onChange' ? this._handleInputChange : props[key];
-                validInputProps[key] = value;
-            } else {
-                invalidInputProps[key] = props[key];
-            }
-        });
-        const managedProps = [validInputProps, invalidInputProps];
-        return managedProps;
-    };
+    // /**
+    // * comments will be right there
+    // */
+    // _checkProps = (props) => {
+    //     let validInputProps = {};
+    //     let invalidInputProps = {};
+    //
+    //     Object.keys(props).map(key => {
+    //         if(key === inputHtmlAttributes[inputHtmlAttributes.indexOf(key)]) {
+    //             let value = key === 'value' ? props.formatter(props[key], MODE) : key === 'onChange' ? this._handleInputChange : props[key];
+    //             validInputProps[key] = value;
+    //         } else {
+    //             invalidInputProps[key] = props[key];
+    //         }
+    //     });
+    //     const managedProps = [validInputProps, invalidInputProps];
+    //     return managedProps;
+    // };
     /**
     * @inheritdoc
     * @override
@@ -91,9 +92,13 @@ class InputText extends Component {
         const managedProps = this._checkProps(this.props);
 
         const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1];
+        const invalidInputProps = managedProps[1]
+
+        const { name, placeholder, value: valueToFormat } = validInputProps;
+
+        validInputProps.value = this.props.formatter(valueToFormat, MODE);
+        validInputProps.onChange = this._handleInputChange;
 
-        const { name, placeholder } = validInputProps;
         const { error, style } = invalidInputProps;
 
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
diff --git a/src/components/input/textarea/index.js b/src/components/input/textarea/index.js
index a1f58a55d..1b24ad11a 100644
--- a/src/components/input/textarea/index.js
+++ b/src/components/input/textarea/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import {identity} from 'lodash/utility';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
+import {InputBehaviour} from '../../../behaviours/input-component';
 
 const propTypes = {
     cols: PropTypes.number,
@@ -42,6 +43,7 @@ const defaultProps = {
 */
 @MDBehaviour('inputTextarea')
 @ComponentBaseBehaviour
+@InputBehaviour
 class InputTextarea extends Component {
 
     /**
@@ -68,11 +70,21 @@ class InputTextarea extends Component {
     * @override
     */
     render() {
-        const { autoFocus, disabled, formatter, maxLength, onFocus, onClick, onKeyPress, error, name, placeholder, style, value: rawValue, size, type} = this.props;
-        const value = formatter(rawValue);
+        const managedProps = this._checkProps(this.props);
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1];
+
+        const {error} = invalidInputProps;
+        const {formatter} = this.props;
+        const {name, style, placeholder, value} = validInputProps;
+
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
-        const inputProps =  { autoFocus, disabled, onKeyPress, maxLength, onFocus, onClick, id: name, onChange: this._handleInputChange, pattern, size, type, value: value === undefined || value === null ? '' : value };
         const mdlClasses = `mdl-textfield mdl-js-textfield${error ? ' is-invalid' : ''}`;
+
+        validInputProps.value = formatter(value) === undefined || formatter(value) === null ? '' :  formatter(value);
+        validInputProps.onChange = this._handleInputChange
+        const inputProps = {...validInputProps};
+
         return (
             <div data-error={!!error} data-focus='input-textarea'>
                 <div className={mdlClasses} ref='inputTextarea' style={style}>
diff --git a/src/components/input/toggle/index.js b/src/components/input/toggle/index.js
index 9f33e9125..6708cb2c9 100644
--- a/src/components/input/toggle/index.js
+++ b/src/components/input/toggle/index.js
@@ -29,10 +29,19 @@ class InputToggle extends Component {
     };
 
     render() {
-        const {label, value} = this.props;
+        const managedProps = this._checkProps(this.props);
+        const validInputProps = managedProps[0];
+        const invalidInputProps = managedProps[1];
+
+        const {label, value} = validInputProps;
+
+        validInputProps.onChange = this.handleOnChange;
+        validInputProps.checked = value;
+        const inputProps = {...validInputProps};
+
         return (
             <label className='mdl-switch mdl-js-switch mdl-js-ripple-effect' data-focus='input-toggle' ref='mdlHolder'>
-                <input checked={value} className='mdl-switch__input' onChange={this.handleOnChange} ref='toggle' type='checkbox' />
+                <input className='mdl-switch__input' ref='toggle' type='checkbox' {...inputProps} />
                 {label && <span className='mdl-switch__label'>{this.i18n(label)}</span>}
             </label>
         );

From 6219a58bf3b6509e96130a4018530ac1457d25ae Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Thu, 9 Feb 2017 17:40:24 +0100
Subject: [PATCH 10/50] Fixing the tests

---
 .../input/autocomplete-select/edit.js         |  1 +
 .../autocomplete-select/example/index.jsx     | 90 +++++++++++--------
 src/components/input/textarea/index.js        |  2 +-
 src/components/input/toggle/index.js          |  2 +
 4 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/src/components/input/autocomplete-select/edit.js b/src/components/input/autocomplete-select/edit.js
index e57cf10c1..cb7ccb8b1 100644
--- a/src/components/input/autocomplete-select/edit.js
+++ b/src/components/input/autocomplete-select/edit.js
@@ -228,6 +228,7 @@ class Autocomplete extends Component {
 
         validInputProps.value = inputValue;
         validInputProps.onFocus = this._handleQueryFocus;
+        validInputProps.onKeyDown = this._handleQueryKeyDown;
         validInputProps.onChange = this._handleQueryChange;
 
         const inputProps = {...validInputProps};
diff --git a/src/components/input/autocomplete-select/example/index.jsx b/src/components/input/autocomplete-select/example/index.jsx
index 2855db7ce..a5fcbcd61 100644
--- a/src/components/input/autocomplete-select/example/index.jsx
+++ b/src/components/input/autocomplete-select/example/index.jsx
@@ -1,10 +1,61 @@
 const {AutocompleteSelect} = FocusComponents.components.input;
 
+const data = [
+    {
+        key: 'NY',
+        label: 'New York'
+    },
+    {
+        key: 'PAR',
+        label: 'Paris'
+    },
+    {
+        key: 'TOY',
+        label: 'Tokyo'
+    },
+    {
+        key: 'BEI',
+        label: 'Pékin'
+    },
+    {
+        key: 'LON',
+        label: 'Londres'
+    },
+    {
+        key: 'BER',
+        label: 'Berlin'
+    }
+];
+
+const querySearcher = query => {
+    const value = data.filter(({key, label}) => label.toLowerCase().indexOf(query.toLowerCase()) !== -1);
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            resolve({
+                data: value,
+                totalCount: value.length
+            });
+        }, 200);
+    });
+};
+
 const keyResolver = key => {
     return new Promise((resolve, reject) => {
-        setTimeout(resolve.bind(this, 'Resolved value'), 300);
+        data.forEach(element => {
+            if(element.key === key) {
+                setTimeout(resolve.bind(this, element.label), 10);
+            }
+        });
     });
 }
+
+const AutoComplete = (props) => {
+    return(
+        <AutocompleteSelect
+            {...props}
+            />
+    )
+}
 const resources = {
     dev: {
         translation: {
@@ -19,43 +70,6 @@ const resources = {
 
 i18n.init({resStore: resources});
 
-const querySearcher = query => {
-    const data = [
-        {
-            key: 'NY',
-            label: 'New York'
-        },
-        {
-            key: 'PAR',
-            label: 'Paris'
-        },
-        {
-            key: 'TOY',
-            label: 'Tokyo'
-        },
-        {
-            key: 'BEI',
-            label: 'Pékin'
-        },
-        {
-            key: 'LON',
-            label: 'Londres'
-        },
-        {
-            key: 'BER',
-            label: 'Berlin'
-        }
-    ].filter(({key, label}) => label.toLowerCase().indexOf(query.toLowerCase()) !== -1);
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            resolve({
-                data,
-                totalCount: 40
-            });
-        }, 200);
-    });
-}
-
 class Sample extends React.Component {
     state = {isEdit: true};
 
diff --git a/src/components/input/textarea/index.js b/src/components/input/textarea/index.js
index 1b24ad11a..18915e732 100644
--- a/src/components/input/textarea/index.js
+++ b/src/components/input/textarea/index.js
@@ -83,7 +83,7 @@ class InputTextarea extends Component {
 
         validInputProps.value = formatter(value) === undefined || formatter(value) === null ? '' :  formatter(value);
         validInputProps.onChange = this._handleInputChange
-        const inputProps = {...validInputProps};
+        const inputProps = {...validInputProps, pattern};
 
         return (
             <div data-error={!!error} data-focus='input-textarea'>
diff --git a/src/components/input/toggle/index.js b/src/components/input/toggle/index.js
index 6708cb2c9..d5ebbca80 100644
--- a/src/components/input/toggle/index.js
+++ b/src/components/input/toggle/index.js
@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Translation from '../../../behaviours/translation';
 import Material from '../../../behaviours/material';
+import {InputBehaviour} from '../../../behaviours/input-component';
 
 const propTypes = {
     label: PropTypes.string,
@@ -17,6 +18,7 @@ const displayName = 'InputToggle';
 
 @Translation
 @Material('mdlHolder')
+@InputBehaviour
 class InputToggle extends Component {
     getValue = () => {
         const domElement = ReactDOM.findDOMNode(this.refs.toggle);

From fb4fb69ad02984f0ccda7df91ced67123d061b42 Mon Sep 17 00:00:00 2001
From: clementdelebecque <clement.delebecque@gmail.com>
Date: Tue, 28 Feb 2017 15:36:23 +0100
Subject: [PATCH 11/50] Update built-in-components.js

Fix for InputLabelComponent prop use
---
 src/common/field/mixin/built-in-components.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/field/mixin/built-in-components.js b/src/common/field/mixin/built-in-components.js
index d3defda36..15fd375ac 100644
--- a/src/common/field/mixin/built-in-components.js
+++ b/src/common/field/mixin/built-in-components.js
@@ -252,7 +252,7 @@ const fieldBuiltInComponentsMixin = {
             error: error,
             onChange: this.onInputChange
         };
-        const finalBuildedProps = addRefToPropsIfNotPure(this.props.FieldComponent, buildedProps, INPUT);
+        const finalBuildedProps = addRefToPropsIfNotPure(FieldComponent, buildedProps, INPUT);
         return <FieldComponent {...finalBuildedProps} />;
     }
 };

From 8bde2a13f716fe1432942a283e4e8cee255d2151 Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Thu, 2 Mar 2017 14:48:09 +0100
Subject: [PATCH 12/50] Adding spinner when the form is saving and disabling
 the button

---
 src/common/mixin/built-in-components.js |   3 +
 src/components/button/index.js          | 102 +++++++++++++-----------
 src/components/button/style/button.scss |  14 ++++
 3 files changed, 74 insertions(+), 45 deletions(-)

diff --git a/src/common/mixin/built-in-components.js b/src/common/mixin/built-in-components.js
index 463011776..8c1de271f 100644
--- a/src/common/mixin/built-in-components.js
+++ b/src/common/mixin/built-in-components.js
@@ -206,6 +206,7 @@ module.exports = {
     * @returns {object} - A React  save button.
     */
     buttonSave() {
+        const {isLoading} = this.state;
         const handleOnClick = () => {
             if (this._validate()) {
                 this.action.save.call(this, this._getEntity());
@@ -218,6 +219,8 @@ module.exports = {
             label='button.save'
             shape={null}
             type='button'
+            isLoading={isLoading}
+            processLabel='button.saving'
             />
         );
     },
diff --git a/src/components/button/index.js b/src/components/button/index.js
index b0386b485..a0bd248db 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -11,12 +11,13 @@ const RIPPLE_EFFECT = 'mdl-js-ripple-effect';
 
 const propTypes = {
     color: PropTypes.oneOf([undefined,'colored', 'primary', 'accent']),
-    id: PropTypes.string,
     handleOnClick: PropTypes.func, //to remove in V2
     hasRipple: PropTypes.bool,
-    isJs: PropTypes.bool,
+    id: PropTypes.string,
     icon: PropTypes.string,
     iconLibrary: PropTypes.oneOf(['material', 'font-awesome', 'font-custom']),
+    isJs: PropTypes.bool,
+    isLoading: PropTypes.bool,
     label: PropTypes.string,
     onClick: PropTypes.func,
     shape: PropTypes.oneOf([undefined, 'raised', 'fab', 'icon', 'mini-fab']),
@@ -24,14 +25,14 @@ const propTypes = {
 }
 
 const defaultProps = {
-    type: 'submit',
-    shape: 'raised',
-    label: '',
+    hasRipple: false,
     icon: null,
+    iconLibrary: 'material',
     id: '',
-    hasRipple: false,
     isJs: false,
-    iconLibrary: 'material'
+    label: '',
+    shape: 'raised',
+    type: 'submit'
 }
 
 @MDBehaviour('materialButton', 'MaterialButton')
@@ -49,6 +50,13 @@ class Button extends Component {
         }
     }
 
+    componentDidUpdate() {
+        const spinnerNode = ReactDOM.findDOMNode(this.refs['double-action-button-spinner']);
+        if(spinnerNode) {
+            componentHandler.upgradeElement(spinnerNode, 'MaterialSpinner');
+        }
+    }
+
     /**
     * Date de composant.
     * @return {string} Classe.
@@ -98,47 +106,51 @@ class Button extends Component {
         const {icon, iconLibrary} = this.props;
         switch (iconLibrary) {
             case 'material':
-                return <i className='material-icons'>{icon}</i>;
-            case 'font-awesome':
+            return <i className='material-icons'>{icon}</i>;
+                case 'font-awesome':
                 const faCss = `fa fa-${icon}`;
                 return <i className={faCss}></i>;
-            case 'font-custom':
-                return <span className={`icon-${icon}`}></span>;
-            default:
-                return null;
-        }
-    };
+                    case 'font-custom':
+                    return <span className={`icon-${icon}`}></span>;
+                        default:
+                        return null;
+                    }
+                };
 
-    /**
-    * Render the label.
-    * @return {Component} - Tle button label.
-    */
-    _renderLabel() {
-        const {label, shape} = this.props;
-        if (label && 'fab' !== shape && 'icon' !== shape && 'mini-fab' !== shape ) {
-            return this.i18n(label);
-        }
-        return null;
-    };
+                /**
+                * Render the label.
+                * @return {Component} - Tle button label.
+                */
+                _renderLabel() {
+                    const {isLoading, label, processLabel, shape} = this.props;
 
-    /** inheritedDoc */
-    render() {
-        // attribute doc : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
-        // be careful the way you declare your attribute names : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
-        const {className, disabled, formNoValidate, handleOnClick, icon, id, onClick, type, label, style, hasRipple, isJs, iconLibrary, ...rest} = this.props;
-        const otherInputProps = { disabled, formNoValidate, onClick: handleOnClick ? handleOnClick : onClick, style, type, ...rest }; //on click for legacy. Remove handleOnClick in v2
-        const renderedClassName = `${className ? className : ''} ${::this._getComponentClassName()}`.trim();
-        return (
-            <button alt={this.i18n(label)} className={renderedClassName} data-focus='button-action' id={id} title={this.i18n(label)} {...otherInputProps} ref='materialButton'>
-                {icon && ::this._renderIcon()}
-                {::this._renderLabel()}
-            </button>
-        );
-    }
-}
+                    if (label && 'fab' !== shape && 'icon' !== shape && 'mini-fab' !== shape && (!isLoading || !processLabel)) {
+                        return <span data-focus='button-label'>{this.i18n(label)}</span>;
+                        } else if (processLabel && 'fab' !== shape && 'icon' !== shape && 'mini-fab' !== shape && isLoading) {
+                            return <span data-focus='button-label'>{this.i18n(processLabel)}</span>
+                        }
+                        return null;
+                    };
+
+                    /** inheritedDoc */
+                    render() {
+                        // attribute doc : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
+                        // be careful the way you declare your attribute names : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
+                        const {className, formNoValidate, handleOnClick, icon, id, onClick, type, label, style, hasRipple, isJs, iconLibrary, isLoading, ...rest} = this.props;
+                        const otherInputProps = { formNoValidate, onClick: handleOnClick ? handleOnClick : onClick, style, type, ...rest }; //on click for legacy. Remove handleOnClick in v2
+                        const renderedClassName = `${className ? className : ''} ${::this._getComponentClassName()}`.trim();
+                        return (
+                            <button alt={this.i18n(label)} className={renderedClassName} data-focus='button-action' data-saving={isLoading} id={id} disabled={isLoading} title={this.i18n(label)} {...otherInputProps} ref='materialButton'>
+                                {icon && ::this._renderIcon()}
+                                {::this._renderLabel()}
+                                {isLoading && <div className='mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active' data-focus='double-action-button-spinner' ref='double-action-button-spinner' ></div>}
+                            </button>
+                        );
+                    }
+                }
 
-Button.displayName = 'Button'
-Button.defaultProps = defaultProps;
-Button.propTypes = propTypes;
+                Button.displayName = 'Button'
+                Button.defaultProps = defaultProps;
+                Button.propTypes = propTypes;
 
-export default Button;
+                export default Button;
diff --git a/src/components/button/style/button.scss b/src/components/button/style/button.scss
index f2a62b33a..b08fd465c 100644
--- a/src/components/button/style/button.scss
+++ b/src/components/button/style/button.scss
@@ -1,6 +1,20 @@
 
 [data-focus="button-action"] {
+    user-select: none;
+    transition: width 1s;
     i {
         margin-right: 5px;
     }
+
+    [data-focus="button-label"], [data-focus="double-action-button-spinner"] {
+        vertical-align: middle;
+    }
+
+    [data-focus="double-action-button-spinner"] {
+        margin-left: 13px;
+    }
+}
+
+[data-saving="true"] {
+    cursor: not-allowed;
 }

From d2f1530b3e42fa117c66c8643092f850972b4cae Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Thu, 2 Mar 2017 14:54:24 +0100
Subject: [PATCH 13/50] Adding unit tests

---
 src/components/button/__tests__/index.js | 34 ++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/components/button/__tests__/index.js b/src/components/button/__tests__/index.js
index 93dd211fe..fe43304a8 100644
--- a/src/components/button/__tests__/index.js
+++ b/src/components/button/__tests__/index.js
@@ -44,5 +44,39 @@ describe('Button Component', () => {
                 });
             });
         });
+        describe.only('When we set a processingLabel', () => {
+            let renderedButton;
+            describe('When isLoading props is false', () => {
+                before(() => {
+                    renderedButton = renderIntoDocument(<Button label='SAVE' processLabel='Loading' isLoading={false} />);
+                });
+                it('should render the default label', () => {
+                    const buttonLabel = ReactDOM.findDOMNode(renderedButton).querySelector('[data-focus="button-label"]').innerHTML;
+                    expect(buttonLabel).to.equal(renderedButton.props.label);
+                });
+                it('should not render the process label', () => {
+                    const buttonLabel = ReactDOM.findDOMNode(renderedButton).querySelector('[data-focus="button-label"]').innerHTML;
+                    expect(buttonLabel).to.not.equal(renderedButton.props.processLabel);
+                });
+            });
+            describe('When isLoading props is true', () => {
+                before(() => {
+                    renderedButton = renderIntoDocument(<Button label='SAVE' processLabel='Loading' isLoading={true} />);
+                });
+                it('should render the process label', () => {
+                    const buttonLabel = ReactDOM.findDOMNode(renderedButton).querySelector('[data-focus="button-label"]').innerHTML;
+                    expect(buttonLabel).to.equal(renderedButton.props.processLabel);
+                });
+                it('should not render the default label', () => {
+                    const buttonLabel = ReactDOM.findDOMNode(renderedButton).querySelector('[data-focus="button-label"]').innerHTML;
+                    expect(buttonLabel).to.not.equal(renderedButton.props.label);
+                });
+                it('should have a spinner', () => {
+                    const spinner = ReactDOM.findDOMNode(renderedButton).querySelector('[data-focus="double-action-button-spinner"]');
+                    expect(spinner).to.not.be.null;
+                    expect(spinner).to.not.be.undefined;
+                });
+            });
+        });
     });
 });

From 33a85c1519cdd27f17e3cf70dba6d6d9a42ab566 Mon Sep 17 00:00:00 2001
From: JohnnP <jonathan.pujol12@gmail.com>
Date: Thu, 23 Mar 2017 11:28:13 +0100
Subject: [PATCH 14/50] Correction when domNode is null

---
 src/behaviours/scroll/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/behaviours/scroll/index.js b/src/behaviours/scroll/index.js
index e044869e0..559edbf69 100644
--- a/src/behaviours/scroll/index.js
+++ b/src/behaviours/scroll/index.js
@@ -1,4 +1,4 @@
-import {isUndefined} from 'lodash/lang';
+import {isUndefined, isNull} from 'lodash/lang';
 
 const Scroll = Component => class ScrollComponent extends Component {
     constructor(props) {
@@ -16,7 +16,7 @@ const Scroll = Component => class ScrollComponent extends Component {
     scrollPosition(domNode) {
         const y = window.pageYOffset || document.documentElement.scrollTop;
         const x = window.pageXOffset || document.documentElement.scrollLeft;
-        if(isUndefined(domNode)) {
+        if(isUndefined(domNode) || isNull(domNode)) {
             return { top: y, left: x };
         }
         const nodeRect = domNode.getBoundingClientRect();

From d59561644941e46b047dc04e8b37608a88b9ca13 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Thu, 6 Apr 2017 18:49:40 +0200
Subject: [PATCH 15/50] Adding an option for empty date => fix issue #1375
 Removing dead code

---
 src/components/input/date/index.js | 42 ++++++++++++++----------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/input/date/index.js b/src/components/input/date/index.js
index 3016af800..85149d388 100644
--- a/src/components/input/date/index.js
+++ b/src/components/input/date/index.js
@@ -15,6 +15,7 @@ const isISOString = value => moment.utc(value, moment.ISO_8601, true).isValid();
 const propTypes = {
     beforeValueGetter: PropTypes.func.isRequired,
     checkOnlyOnBlur: PropTypes.bool,
+    triggerOnChangeIfEmpty: PropTypes.bool,
     drops: PropTypes.oneOf(['up', 'down']).isRequired,
     error: PropTypes.string,
     locale: PropTypes.string.isRequired,
@@ -36,6 +37,7 @@ const propTypes = {
 const defaultProps = {
     beforeValueGetter: value => value,
     checkOnlyOnBlur: false,
+    triggerOnChangeIfEmpty: false,
     drops: 'down',
     format: 'MM/DD/YYYY',
     locale: 'en',
@@ -61,7 +63,7 @@ class InputDate extends Component {
      */
     constructor(props) {
         super(props);
-        const {value} = props;
+        const { value } = props;
         const state = {
             dropDownDate: isISOString(value) ? moment.utc(value, moment.ISO_8601) : moment.utc(),
             inputDate: this._formatDate(value),
@@ -82,7 +84,7 @@ class InputDate extends Component {
      * Receive component props.
      * @param {*} param0 
      */
-    componentWillReceiveProps({value}) {
+    componentWillReceiveProps({ value }) {
         this.setState({
             dropDownDate: isISOString(value) ? moment.utc(value, moment.ISO_8601) : moment.utc(),
             inputDate: this._formatDate(value)
@@ -107,7 +109,7 @@ class InputDate extends Component {
      * The default format is 'MM/DD/YYYY'.
      */
     _parseInputDate = inputDate => {
-        const {format} = this.props;
+        const { format } = this.props;
         return moment.utc(inputDate, format, true);
     };
 
@@ -116,7 +118,7 @@ class InputDate extends Component {
      * The default format is 'MM/DD/YYYY'.
      */
     _formatDate = isoDate => {
-        let {format} = this.props;
+        let { format } = this.props;
         if (isISOString(isoDate)) {
             if (isArray(format)) {
                 format = format[0];
@@ -131,7 +133,7 @@ class InputDate extends Component {
      * Handle changes.
      */
     _onInputChange = (inputDate, fromBlur) => {
-        let {checkOnlyOnBlur} = this.props;
+        let { checkOnlyOnBlur, triggerOnChangeIfEmpty } = this.props;
         // When checkOnlyOnBlur is true skip all checks.
         if (checkOnlyOnBlur === true && fromBlur !== true) {
             // Use case : incompatibles date formats (DD/MM/YY, DD/MM/YYYY)
@@ -147,15 +149,9 @@ class InputDate extends Component {
             this.setState({ inputDate });
         }
 
-        // Fire onChange event
-        if (checkOnlyOnBlur === true) {
-            if (isCorrect) {
-                this.props.onChange(dropDownDate.toISOString());
-            }
-            return;
-        }
-        if (fromBlur !== true && isCorrect) {
-            this.props.onChange(dropDownDate.toISOString());
+        // Fire onChange event, only if date if correct, or empty, if the option is activated
+        if (fromBlur !== true && (isCorrect || (triggerOnChangeIfEmpty && (inputDate || '').trim() === ''))) {
+            this.props.onChange(isCorrect ? dropDownDate.toISOString() : null); // if date is not correct, it is empty, so send null (or empty string ?)
         }
     };
 
@@ -163,7 +159,7 @@ class InputDate extends Component {
      * Handle input text blur.
      */
     _onInputBlur = () => {
-        const {inputDate} = this.state;
+        const { inputDate } = this.state;
         this._onInputChange(inputDate, true);
     };
 
@@ -192,7 +188,7 @@ class InputDate extends Component {
      * Handle document click to close the calendar.
      * @memberOf InputDate
      */
-    _onDocumentClick = ({target}) => {
+    _onDocumentClick = ({ target }) => {
         const targetClassAttr = target.getAttribute('class');
         const isTriggeredFromPicker = targetClassAttr ? targetClassAttr.includes('dp-cell') : false; //this is the only way to check the target comes from picker cause at this stage, month and year div are unmounted by React.
         if (!isTriggeredFromPicker) {
@@ -206,7 +202,7 @@ class InputDate extends Component {
     /**
      * Handle Tab and Enter keys to close the calendar.
      */
-    _handleKeyDown = ({key}) => {
+    _handleKeyDown = ({ key }) => {
         if (key === 'Tab' || key === 'Enter') {
             this.setState({ displayPicker: false }, () => this._onInputBlur());
         }
@@ -216,7 +212,7 @@ class InputDate extends Component {
      * Return value in a valid date format.
      */
     getValue = () => {
-        const {inputDate} = this.state;
+        const { inputDate } = this.state;
         const rawValue = this._isInputFormatCorrect(inputDate) ? this._parseInputDate(inputDate).toISOString() : null;
         return this.props.beforeValueGetter(rawValue);
     };
@@ -225,8 +221,8 @@ class InputDate extends Component {
      * Validate the input.
      */
     validate = () => {
-        const {inputDate} = this.state;
-        const {isRequired} = this.props;
+        const { inputDate } = this.state;
+        const { isRequired } = this.props;
         if ('' === inputDate || !inputDate) {
             return ({
                 isValid: !isRequired,
@@ -244,9 +240,9 @@ class InputDate extends Component {
      * Render text input and datepicker.
      */
     render() {
-        const {error, locale, name, placeholder, disabled, minDate, maxDate} = this.props;
-        const {dropDownDate, inputDate, displayPicker} = this.state;
-        const {_onInputBlur, _onInputChange, _onInputFocus, _onDropDownChange, _onPickerCloserClick, _handleKeyDown} = this;
+        const { error, locale, name, placeholder, disabled, minDate, maxDate } = this.props;
+        const { dropDownDate, inputDate, displayPicker } = this.state;
+        const { _onInputBlur, _onInputChange, _onInputFocus, _onDropDownChange, _onPickerCloserClick, _handleKeyDown } = this;
         const inputProps = { disabled };
         return (
             <div data-focus='input-date' data-id={this._inputDateId}>

From 726aeeca7f59d75474c5bb700b49196cdfa01de7 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Thu, 6 Apr 2017 19:07:06 +0200
Subject: [PATCH 16/50] Fix re render on every document click (Adding test on
 this.state.displayPicker) => fix issue #1325

---
 src/components/input/date/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/input/date/index.js b/src/components/input/date/index.js
index 85149d388..14bf65a5d 100644
--- a/src/components/input/date/index.js
+++ b/src/components/input/date/index.js
@@ -191,11 +191,11 @@ class InputDate extends Component {
     _onDocumentClick = ({ target }) => {
         const targetClassAttr = target.getAttribute('class');
         const isTriggeredFromPicker = targetClassAttr ? targetClassAttr.includes('dp-cell') : false; //this is the only way to check the target comes from picker cause at this stage, month and year div are unmounted by React.
-        if (!isTriggeredFromPicker) {
+
+        // We do not trigger the setState, or the inputBlur if the picker was not displayed
+        if (!isTriggeredFromPicker && this.state.displayPicker && closest(target, `[data-id='${this._inputDateId}']`, true) === undefined) {
             //if target was not triggered inside the date picker, we check it was not triggered by the input
-            if (closest(target, `[data-id='${this._inputDateId}']`, true) === undefined) {
-                this.setState({ displayPicker: false }, () => this._onInputBlur());
-            }
+            this.setState({ displayPicker: false }, () => this._onInputBlur());
         }
     };
 

From 15f510ae6451ee39c98bb96efa2ce74507fe4d3e Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Thu, 6 Apr 2017 21:02:58 +0200
Subject: [PATCH 17/50] Updating material design lite to 1.3.0 => Fix #1367

---
 package.json                  |  2 +-
 src/style/_mdl_variables.scss | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 0a8d36437..04748b6fc 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
         "daterangepicker": "0.0.3",
         "immutable": "^3.7.4",
         "lodash": "^3.10.1",
-        "material-design-lite": "1.1.3",
+        "material-design-lite": "1.3.0",
         "object-assign": "^2.0.0",
         "react-addons-css-transition-group": "^15.2.1",
         "react-date-picker": "^3.1.6",
diff --git a/src/style/_mdl_variables.scss b/src/style/_mdl_variables.scss
index 64e0fc650..0a605cea5 100644
--- a/src/style/_mdl_variables.scss
+++ b/src/style/_mdl_variables.scss
@@ -1,7 +1,6 @@
 ////////////////////////////////////////////////////////////////////////////
-/// 14/03/2016 - FOCUS OVERRIDE see scripts/mdl-variables-copy.scss
+/// 06/04/2017 - FOCUS OVERRIDE see scripts/mdl-variables-copy.scss
 /// ////////////////////////////////////////////////////////////////////////
-
 /**
  * Copyright 2015 Google Inc. All Rights Reserved.
  *
@@ -46,6 +45,8 @@
  * -----Data table
  * -----Dialog
  * -----Snackbar
+ * -----Tooltip
+ * -----Chip
  *
  * Even though all variables have the `!default` directive, most of them
  * should not be changed as they are dependent one another. This can cause
@@ -193,8 +194,8 @@ $layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
 $layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
 $layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
 $layout-drawer-navigation-color: #757575 !default;
-$layout-drawer-navigation-link-active-background: unquote("rgb(#{$color-light-contrast})") !default;
-$layout-drawer-navigation-link-active-color: unquote("rgb(#{$palette-grey-300})") !default;
+$layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-300})") !default;
+$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !default;
 
 // Header
 $layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
@@ -434,7 +435,7 @@ $footer-btn-size: 36px !default;
 
 /* CHECKBOX */
 
-$checkbox-label-font-size: 13px !default;
+$checkbox-label-font-size: 13   px !default;
 $checkbox-label-height: 24px !default;
 $checkbox-button-size: 16px !default;
 $checkbox-inner-margin: 2px !default;
@@ -587,6 +588,11 @@ $snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
 $tooltip-font-size: 10px !default;
 $tooltip-font-size-large: 14px !default;
 
+/* CHIP */
+$chip-bg-color: rgb(222, 222, 222) !default;
+$chip-bg-active-color: rgb(214, 214, 214) !default;
+$chip-height: 32px !default;
+$chip-font-size: 13px !default; 
 ////////////////////////////////////////////////////////////////////////////
-/// 14/03/2016 - FOCUS OVERRIDE see scripts/mdl-variables-copy.scss
-/// ////////////////////////////////////////////////////////////////////////
+/// 06/04/2017 - FOCUS OVERRIDE see scripts/mdl-variables-copy.scss
+/// ////////////////////////////////////////////////////////////////////////
\ No newline at end of file

From d5d95a4e85f266c36f83a1bda1f306a7d9b813fb Mon Sep 17 00:00:00 2001
From: Hartorn <hartorn.github@gmail.com>
Date: Thu, 6 Apr 2017 21:07:22 +0200
Subject: [PATCH 18/50] Fixing messed up spacing

---
 src/style/_mdl_variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style/_mdl_variables.scss b/src/style/_mdl_variables.scss
index 0a605cea5..e4a2a3339 100644
--- a/src/style/_mdl_variables.scss
+++ b/src/style/_mdl_variables.scss
@@ -435,7 +435,7 @@ $footer-btn-size: 36px !default;
 
 /* CHECKBOX */
 
-$checkbox-label-font-size: 13   px !default;
+$checkbox-label-font-size: 13px !default;
 $checkbox-label-height: 24px !default;
 $checkbox-button-size: 16px !default;
 $checkbox-inner-margin: 2px !default;
@@ -595,4 +595,4 @@ $chip-height: 32px !default;
 $chip-font-size: 13px !default; 
 ////////////////////////////////////////////////////////////////////////////
 /// 06/04/2017 - FOCUS OVERRIDE see scripts/mdl-variables-copy.scss
-/// ////////////////////////////////////////////////////////////////////////
\ No newline at end of file
+/// ////////////////////////////////////////////////////////////////////////

From e157b8006c7800ec8916edd61b8eb91d357c970d Mon Sep 17 00:00:00 2001
From: Hartorn <hartorn.github@gmail.com>
Date: Mon, 10 Apr 2017 18:33:09 +0200
Subject: [PATCH 19/50] Correcting regression

Adding missing check when checkOnlyOnBlur is true and fromBlur is false
---
 src/components/input/date/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/input/date/index.js b/src/components/input/date/index.js
index 14bf65a5d..435d30fc5 100644
--- a/src/components/input/date/index.js
+++ b/src/components/input/date/index.js
@@ -148,6 +148,14 @@ class InputDate extends Component {
         } else {
             this.setState({ inputDate });
         }
+        
+        // When checkOnlyOnBlur is true skip all checks.
+        if (checkOnlyOnBlur === true) {
+            if (isCorrect) {
+                this.props.onChange(dropDownDate.toISOString());
+            }
+            return;
+        }
 
         // Fire onChange event, only if date if correct, or empty, if the option is activated
         if (fromBlur !== true && (isCorrect || (triggerOnChangeIfEmpty && (inputDate || '').trim() === ''))) {

From 6d8d38378455c87917b0105f2335f1b064ef08b6 Mon Sep 17 00:00:00 2001
From: Hartorn <hartorn.github@gmail.com>
Date: Mon, 10 Apr 2017 18:43:22 +0200
Subject: [PATCH 20/50] Handling both checkOnlyOnBlur and
 triggerOnChangeIfEmpty

---
 src/components/input/date/index.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/input/date/index.js b/src/components/input/date/index.js
index 435d30fc5..0d336e46e 100644
--- a/src/components/input/date/index.js
+++ b/src/components/input/date/index.js
@@ -143,6 +143,9 @@ class InputDate extends Component {
 
         const isCorrect = this._isInputFormatCorrect(inputDate);
         const dropDownDate = isCorrect ? this._parseInputDate(inputDate) : null;
+        const shouldTriggerChange = isCorrect || (triggerOnChangeIfEmpty && (inputDate || '').trim() === ''); // Fire onChange event, only if date if correct, or empty, if the option is activated
+        const newData = isCorrect ? dropDownDate.toISOString() : null; // if date is not correct, it is empty, so send null (or empty string ?)
+      
         if (isCorrect) {
             this.setState({ dropDownDate, inputDate });
         } else {
@@ -151,15 +154,15 @@ class InputDate extends Component {
         
         // When checkOnlyOnBlur is true skip all checks.
         if (checkOnlyOnBlur === true) {
-            if (isCorrect) {
-                this.props.onChange(dropDownDate.toISOString());
+            if (shouldTriggerChange) {
+                this.props.onChange(newData);
             }
             return;
         }
 
         // Fire onChange event, only if date if correct, or empty, if the option is activated
-        if (fromBlur !== true && (isCorrect || (triggerOnChangeIfEmpty && (inputDate || '').trim() === ''))) {
-            this.props.onChange(isCorrect ? dropDownDate.toISOString() : null); // if date is not correct, it is empty, so send null (or empty string ?)
+        if (fromBlur !== true && shouldTriggerChange) {
+            this.props.onChange(newData);
         }
     };
 

From da82ee227b97115d90169ef9c5d1107454a12c9f Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 14 Apr 2017 14:26:26 +0200
Subject: [PATCH 21/50] Displaying title header of panel, only if title, help
 or actions are defined

---
 src/components/panel/index.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/panel/index.js b/src/components/panel/index.js
index f8b55af29..9f63b1716 100644
--- a/src/components/panel/index.js
+++ b/src/components/panel/index.js
@@ -1,9 +1,9 @@
-import React, {Component, PropTypes} from 'react';
-import {findDOMNode} from 'react-dom';
+import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 import Translation from '../../behaviours/translation';
-import {includes} from 'lodash/collection';
-import {uniqueId} from 'lodash/utility';
-import {snakeCase} from 'lodash/string';
+import { includes } from 'lodash/collection';
+import { uniqueId } from 'lodash/utility';
+import { snakeCase } from 'lodash/string';
 import ButtonHelp from '../button-help';
 import xor from 'lodash/array/xor';
 
@@ -37,13 +37,13 @@ class Panel extends Component {
     * @return {DOM} React DOM element
     */
     render() {
-        const {actions, actionsPosition, children, title, showHelp, blockName, ...otherProps} = this.props;
-        const {spyId} = this.state;
+        const { actions, actionsPosition, children, title, showHelp, blockName, ...otherProps } = this.props;
+        const { spyId } = this.state;
         const shouldDisplayActionsTop = actions && includes(['both', 'top'], actionsPosition);
         const shouldDisplayActionsBottom = actions && includes(['both', 'bottom'], actionsPosition);
         return (
             <div className='mdl-card mdl-card--border mdl-shadow--4dp' data-spy={spyId} data-focus='panel' {...otherProps}>
-                <div className='mdl-card__title mdl-card--border' data-focus='panel-title'>
+                {(title || shouldDisplayActionsTop || showHelp) && <div className='mdl-card__title mdl-card--border' data-focus='panel-title'>
                     {title &&
                         <h3 data-spy-title>{this.i18n(title)}</h3>
                     }
@@ -51,7 +51,7 @@ class Panel extends Component {
                         <div className='actions'>{actions()}</div>
                     }
                     {showHelp && <ButtonHelp blockName={blockName || snakeCase(this.i18n(title)).split('_')[0]} />}
-                </div>
+                </div>}
                 <div className='mdl-card__supporting-text' data-focus='panel-content'>
                     {children}
                 </div>

From b2797348855882c5e4fd0fb72bd4355f85c7123b Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 14 Apr 2017 14:50:04 +0200
Subject: [PATCH 22/50] Correcting test : Panel should not have panel title
 section if no title or actions were given

---
 src/components/panel/__tests__/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/panel/__tests__/index.js b/src/components/panel/__tests__/index.js
index 64060403a..398d80291 100644
--- a/src/components/panel/__tests__/index.js
+++ b/src/components/panel/__tests__/index.js
@@ -1,6 +1,6 @@
 import Panel from '../';
-import {init, translate} from 'focus-core/translation';
-const {findRenderedDOMComponentWithClass, renderIntoDocument, Simulate} = TestUtils;
+import { init, translate } from 'focus-core/translation';
+const { findRenderedDOMComponentWithClass, renderIntoDocument, Simulate } = TestUtils;
 
 describe('The Panel', () => {
     describe('when mounted with no props', () => {
@@ -24,9 +24,9 @@ describe('The Panel', () => {
         it('should be material designed', () => {
             expect(domNode.getAttribute('class')).to.equal('mdl-card mdl-card--border mdl-shadow--4dp');
         });
-        it('should have a title section', () => {
+        it('should not have a title section', () => {
             const titleSection = domNode.querySelector('[data-focus="panel-title"]');
-            expect(titleSection).to.exist;
+            expect(titleSection).not.to.exist;
         });
         it('should have a content section', () => {
             const contentSection = domNode.querySelector('[data-focus="panel-content"]');
@@ -42,7 +42,7 @@ describe('The Panel', () => {
         });
     });
     describe('when mounted with title props', () => {
-        init({resStore: {dev: {translation: {panel: {title: 'This is a title'}}}}}, () => {
+        init({ resStore: { dev: { translation: { panel: { title: 'This is a title' } } } } }, () => {
             let reactComponent, domNode;
             const title = 'panel.title';
             before(() => {

From c1876c8d0d6808ab9b856795145b98745df921e2 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 14 Apr 2017 15:56:44 +0200
Subject: [PATCH 23/50] Correcting scrollspy, to filter bloc without any title

---
 src/components/scrollspy-container/index.js | 50 +++++++++++----------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/scrollspy-container/index.js b/src/components/scrollspy-container/index.js
index 6349e96e3..6e97a032a 100644
--- a/src/components/scrollspy-container/index.js
+++ b/src/components/scrollspy-container/index.js
@@ -1,4 +1,4 @@
-import React, {Component, PropTypes} from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import BackToTop from '../button-back-to-top'
 import StickyMenu from './sticky-menu';
@@ -81,9 +81,9 @@ class ScrollspyContainer extends Component {
     * @private
     */
     _refreshMenu = () => {
-        if(!this.props.hasMenu) { return; }
-        const {stickyMenu} = this.refs;
-        const {clickedId} = this.state;
+        if (!this.props.hasMenu) { return; }
+        const { stickyMenu } = this.refs;
+        const { clickedId } = this.state;
         const menus = this._buildMenuList(); //build the menu list
         //TODO remove this check
         const affix = stickyMenu ? this._isMenuAffix() : this.state.affix; //Calculate menu position (affix or not)
@@ -109,12 +109,12 @@ class ScrollspyContainer extends Component {
     * @return {array} the list of menus.
     */
     _buildMenuList = () => {
-        const {hasMenu} = this.props;
-        if(!hasMenu) {
+        const { hasMenu } = this.props;
+        if (!hasMenu) {
             return [];
         }
         const detectionOffset = window.screen.height / 5;
-        let currentScrollPosition = {top: this.scrollPosition().top, left: this.scrollPosition().left};
+        let currentScrollPosition = { top: this.scrollPosition().top, left: this.scrollPosition().left };
         let isAtPageBottom = this.isAtPageBottom();
 
         //get the menu list (without blocks in popin)
@@ -123,16 +123,20 @@ class ScrollspyContainer extends Component {
         const popinDataSpy = thisComponentNode.querySelectorAll(`[data-focus='popin-window'] [data-spy]`);
         const selectionList = xor(allDataSpy, popinDataSpy);
 
-        if(selectionList.length === 0) {
+        if (selectionList.length === 0) {
             return;
         }
-        let menuList = selectionList.map((selection, index) => {
-            const title = selection.querySelector('[data-spy-title]');
-            const nodeId = selection.getAttribute('data-spy');
+        let menuList = selectionList.map((selection) => {
             return {
-                index: index,
+                title: selection.querySelector('[data-spy-title]'),
+                nodeId: selection.getAttribute('data-spy'),
+                selection
+            };
+        }).filter(({ title }) => title).map(({ title, nodeId, selection }, index) => {
+            return {
+                index,
                 label: title.innerHTML,
-                nodeId: nodeId,
+                nodeId,
                 scrollTop: this.scrollPosition(selection).top, // offset of 10 to be safe
                 isActive: false,
                 onClick: this._getMenuItemClickHandler(nodeId)
@@ -144,11 +148,11 @@ class ScrollspyContainer extends Component {
         //Calculate current node
         //by default, first node is indexed
         let currentIndex = menuList[0].index;
-        if(0 < nextTitles.length) {
+        if (0 < nextTitles.length) {
             //check the first node
             const firstNode = first(nextTitles);
             const index = firstNode.index;
-            if(0 < index) {
+            if (0 < index) {
                 currentIndex = menuList[index - 1].index;
             }
         } else {
@@ -156,15 +160,15 @@ class ScrollspyContainer extends Component {
             currentIndex = last(menuList).index;
         }
         let clickedId = this.state.clickedId;
-        if(isAtPageBottom && undefined !== clickedId) {
+        if (isAtPageBottom && undefined !== clickedId) {
             menuList = menuList.map(item => {
                 if (item.nodeId === clickedId) {
                     item.isActive = true;
                 }
                 return item;
             });
-            this.setState({clickedId: undefined});
-        }else {
+            this.setState({ clickedId: undefined });
+        } else {
             menuList[currentIndex].isActive = true;
         }
         return menuList;
@@ -188,9 +192,9 @@ class ScrollspyContainer extends Component {
     * @return {Boolean} true is menu must be affix, else false
     */
     _isMenuAffix = () => {
-        let {offset} = this.props;
-        const {hasMenu} = this.props;
-        if(!hasMenu) {
+        let { offset } = this.props;
+        const { hasMenu } = this.props;
+        if (!hasMenu) {
             return false;
         }
         const sscDomNode = ReactDOM.findDOMNode(this);
@@ -239,8 +243,8 @@ class ScrollspyContainer extends Component {
 
     /** @inheritedDoc */
     render() {
-        const {children, hasMenu, hasBackToTop, offset, scrollDelay, ...otherProps} = this.props;
-        const {affix, menuList} = this.state;
+        const { children, hasMenu, hasBackToTop, offset, scrollDelay, ...otherProps } = this.props;
+        const { affix, menuList } = this.state;
         return (
             <div data-focus='scrollspy-container' {...otherProps}>
                 {hasMenu &&

From 84bcee481a6e013b08bb7cfddc6ba20a5a135c0a Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 14 Apr 2017 17:44:08 +0200
Subject: [PATCH 24/50] Adding error handling on select-radio Adding style for
 the error

---
 src/components/input/select-radio/index.js    | 20 ++++++++++---------
 .../select-radio/style/select-radio.scss      | 14 +++++++++++--
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/input/select-radio/index.js b/src/components/input/select-radio/index.js
index 0d9204efb..22a04e237 100644
--- a/src/components/input/select-radio/index.js
+++ b/src/components/input/select-radio/index.js
@@ -1,6 +1,6 @@
-import React, {Component, PropTypes} from 'react';
+import React, { Component, PropTypes } from 'react';
 import Radio from '../radio';
-import {uniqueId} from 'lodash/utility';
+import { uniqueId } from 'lodash/utility';
 import Translation from '../../../behaviours/translation';
 
 @Translation
@@ -27,14 +27,14 @@ class SelectRadio extends Component {
     };
 
     componentWillReceiveProps(newProps) {
-        this.setState({value: newProps.value});
+        this.setState({ value: newProps.value });
     }
 
     /**
      * Get the value from the select in the DOM.
      * @return {string, number} selected value
      */
-    getValue () {
+    getValue() {
         return this.state.value;
     }
 
@@ -43,13 +43,13 @@ class SelectRadio extends Component {
     * @param {object} event - the click event
     */
     _handleRadioChange(newValue) {
-        const {onChange} = this.props;
-        if(onChange) {
+        const { onChange } = this.props;
+        if (onChange) {
             onChange(newValue);
             return;
         }
         //Set the state then call the change handler.
-        this.setState({value: newValue});
+        this.setState({ value: newValue });
     }
 
     /**
@@ -68,7 +68,7 @@ class SelectRadio extends Component {
     * @return {XML} the different radio values
     */
     renderSelectRadios() {
-        const {uniqueName} = this.state;
+        const { uniqueName } = this.state;
         return this.props.values.map((val, idx) => {
             const value = val[this.props.valueKey];
             const label = val[this.props.labelKey];
@@ -81,9 +81,11 @@ class SelectRadio extends Component {
     }
 
     render() {
+        const { error, style } = this.props;
         return (
-            <div data-focus='select-radio' >
+            <div data-focus='select-radio' data-valid={!error} style={style} >
                 {this.renderSelectRadios()}
+                {error && <div className='label-error'>{error}</div>}
             </div>
         );
     }
diff --git a/src/components/input/select-radio/style/select-radio.scss b/src/components/input/select-radio/style/select-radio.scss
index d04d94ca3..b76a34ee2 100644
--- a/src/components/input/select-radio/style/select-radio.scss
+++ b/src/components/input/select-radio/style/select-radio.scss
@@ -1,4 +1,14 @@
-
+$select-radio-error-color: rgb(222, 50, 38);
 [data-focus="select-radio"] {
-    
+    &[data-valid="false"] {
+        .mdl-radio__label {
+            color:$select-radio-error-color
+        }
+        .mdl-radio .mdl-radio__outer-circle {
+            border-color:$select-radio-error-color;
+        }
+        .mdl-radio__inner-circle {
+            background: $select-radio-error-color;
+        }
+    }
 }

From 639baf04bec03d253408733135f5034dce891f1a Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 14 Apr 2017 18:21:22 +0200
Subject: [PATCH 25/50] Correcting indentation

---
 src/components/button/index.js | 118 ++++++++++++++++-----------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/components/button/index.js b/src/components/button/index.js
index a0bd248db..4a9f922e3 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -1,4 +1,4 @@
-import React, {Component, PropTypes} from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import MDBehaviour from '../../behaviours/material';
 import Translation from '../../behaviours/translation';
@@ -10,7 +10,7 @@ const BUTTON_PRFX = 'mdl-button--';
 const RIPPLE_EFFECT = 'mdl-js-ripple-effect';
 
 const propTypes = {
-    color: PropTypes.oneOf([undefined,'colored', 'primary', 'accent']),
+    color: PropTypes.oneOf([undefined, 'colored', 'primary', 'accent']),
     handleOnClick: PropTypes.func, //to remove in V2
     hasRipple: PropTypes.bool,
     id: PropTypes.string,
@@ -43,7 +43,7 @@ class Button extends Component {
     * Called when component is mounted.
     */
     componentDidMount() {
-        const {hasRipple} = this.props;
+        const { hasRipple } = this.props;
         const refNode = ReactDOM.findDOMNode(this.refs['materialButton']);
         if (hasRipple) {
             componentHandler.upgradeElement(refNode, 'MaterialRipple');
@@ -52,7 +52,7 @@ class Button extends Component {
 
     componentDidUpdate() {
         const spinnerNode = ReactDOM.findDOMNode(this.refs['double-action-button-spinner']);
-        if(spinnerNode) {
+        if (spinnerNode) {
             componentHandler.upgradeElement(spinnerNode, 'MaterialSpinner');
         }
     }
@@ -62,27 +62,27 @@ class Button extends Component {
     * @return {string} Classe.
     */
     _getComponentClassName() {
-        const {shape, color, hasRipple, isJs} = this.props;
+        const { shape, color, hasRipple, isJs } = this.props;
         let SHAPE_CLASS;
         switch (shape) {
             case 'raised':
-            SHAPE_CLASS = `${BUTTON_PRFX}raised`;
-            break;
+                SHAPE_CLASS = `${BUTTON_PRFX}raised`;
+                break;
             case 'fab':
-            SHAPE_CLASS = `${BUTTON_PRFX}fab`;
-            break;
+                SHAPE_CLASS = `${BUTTON_PRFX}fab`;
+                break;
             case 'icon':
-            SHAPE_CLASS = `${BUTTON_PRFX}icon`;
-            break;
+                SHAPE_CLASS = `${BUTTON_PRFX}icon`;
+                break;
             case 'mini-fab':
-            SHAPE_CLASS = `${BUTTON_PRFX}mini-fab ${BUTTON_PRFX}fab`;
-            break;
+                SHAPE_CLASS = `${BUTTON_PRFX}mini-fab ${BUTTON_PRFX}fab`;
+                break;
             case null:
-            SHAPE_CLASS = '';
-            break;
+                SHAPE_CLASS = '';
+                break;
             default:
-            SHAPE_CLASS = null;
-            break;
+                SHAPE_CLASS = null;
+                break;
         }
         const COLOR_CLASS = color ? `${BUTTON_PRFX}${color}` : '';
         const JS_CLASS = isJs ? BTN_JS : '';
@@ -103,54 +103,54 @@ class Button extends Component {
     * @return {Component} - Composant icone.
     */
     _renderIcon() {
-        const {icon, iconLibrary} = this.props;
+        const { icon, iconLibrary } = this.props;
         switch (iconLibrary) {
             case 'material':
-            return <i className='material-icons'>{icon}</i>;
-                case 'font-awesome':
+                return <i className='material-icons'>{icon}</i>;
+            case 'font-awesome':
                 const faCss = `fa fa-${icon}`;
                 return <i className={faCss}></i>;
-                    case 'font-custom':
-                    return <span className={`icon-${icon}`}></span>;
-                        default:
-                        return null;
-                    }
-                };
+            case 'font-custom':
+                return <span className={`icon-${icon}`}></span>;
+            default:
+                return null;
+        }
+    };
 
-                /**
-                * Render the label.
-                * @return {Component} - Tle button label.
-                */
-                _renderLabel() {
-                    const {isLoading, label, processLabel, shape} = this.props;
+    /**
+    * Render the label.
+    * @return {Component} - Tle button label.
+    */
+    _renderLabel() {
+        const { isLoading, label, processLabel, shape } = this.props;
 
-                    if (label && 'fab' !== shape && 'icon' !== shape && 'mini-fab' !== shape && (!isLoading || !processLabel)) {
-                        return <span data-focus='button-label'>{this.i18n(label)}</span>;
-                        } else if (processLabel && 'fab' !== shape && 'icon' !== shape && 'mini-fab' !== shape && isLoading) {
-                            return <span data-focus='button-label'>{this.i18n(processLabel)}</span>
-                        }
-                        return null;
-                    };
+        if (label && 'fab' !== shape && 'icon' !== shape && 'mini-fab' !== shape && (!isLoading || !processLabel)) {
+            return <span data-focus='button-label'>{this.i18n(label)}</span>;
+        } else if (processLabel && 'fab' !== shape && 'icon' !== shape && 'mini-fab' !== shape && isLoading) {
+            return <span data-focus='button-label'>{this.i18n(processLabel)}</span>
+        }
+        return null;
+    };
 
-                    /** inheritedDoc */
-                    render() {
-                        // attribute doc : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
-                        // be careful the way you declare your attribute names : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
-                        const {className, formNoValidate, handleOnClick, icon, id, onClick, type, label, style, hasRipple, isJs, iconLibrary, isLoading, ...rest} = this.props;
-                        const otherInputProps = { formNoValidate, onClick: handleOnClick ? handleOnClick : onClick, style, type, ...rest }; //on click for legacy. Remove handleOnClick in v2
-                        const renderedClassName = `${className ? className : ''} ${::this._getComponentClassName()}`.trim();
-                        return (
-                            <button alt={this.i18n(label)} className={renderedClassName} data-focus='button-action' data-saving={isLoading} id={id} disabled={isLoading} title={this.i18n(label)} {...otherInputProps} ref='materialButton'>
-                                {icon && ::this._renderIcon()}
-                                {::this._renderLabel()}
-                                {isLoading && <div className='mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active' data-focus='double-action-button-spinner' ref='double-action-button-spinner' ></div>}
-                            </button>
-                        );
-                    }
-                }
+    /** inheritedDoc */
+    render() {
+        // attribute doc : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
+        // be careful the way you declare your attribute names : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
+        const { className, formNoValidate, handleOnClick, icon, id, onClick, type, label, style, hasRipple, isJs, iconLibrary, isLoading, ...rest } = this.props;
+        const otherInputProps = { formNoValidate, onClick: handleOnClick ? handleOnClick : onClick, style, type, ...rest }; //on click for legacy. Remove handleOnClick in v2
+        const renderedClassName = `${className ? className : ''} ${::this._getComponentClassName()}`.trim(); 
+        return (
+           <button alt={this.i18n(label)} className={renderedClassName} data-focus='button-action' data-saving={isLoading} id={id} disabled={isLoading} title={this.i18n(label)} {...otherInputProps} ref='materialButton'>
+                {icon && ::this._renderIcon()}
+                {::this._renderLabel()}
+                {isLoading && <div className='mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active' data-focus='double-action-button-spinner' ref='double-action-button-spinner' ></div>}
+            </button>
+        );
+    }
+}
 
-                Button.displayName = 'Button'
-                Button.defaultProps = defaultProps;
-                Button.propTypes = propTypes;
+Button.displayName = 'Button'
+Button.defaultProps = defaultProps;
+Button.propTypes = propTypes;
 
-                export default Button;
+export default Button;                   
\ No newline at end of file

From 7654cc78b4d62eb1d562fd13cc515772e75f817c Mon Sep 17 00:00:00 2001
From: Hartorn <hartorn.github@gmail.com>
Date: Tue, 18 Apr 2017 10:43:25 +0200
Subject: [PATCH 26/50] triggerOnChangeIfEmpty should be true by default

---
 src/components/input/date/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/date/index.js b/src/components/input/date/index.js
index 0d336e46e..039209fc9 100644
--- a/src/components/input/date/index.js
+++ b/src/components/input/date/index.js
@@ -37,7 +37,7 @@ const propTypes = {
 const defaultProps = {
     beforeValueGetter: value => value,
     checkOnlyOnBlur: false,
-    triggerOnChangeIfEmpty: false,
+    triggerOnChangeIfEmpty: true,
     drops: 'down',
     format: 'MM/DD/YYYY',
     locale: 'en',

From 935489c61cb6bcdef556a6ff810c6c947b4feba0 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 21 Apr 2017 14:07:06 +0200
Subject: [PATCH 27/50] Updating eslint config Correcting html attributes,
 based on focus-components in v3

---
 package.json                                  | 11 ++---
 src/behaviours/input-component/index.js       | 30 ++++++-------
 .../input-component/react-html-attributes.js  | 39 ++++++++++++++++
 src/common/react-html-attributes/index.js     | 36 ---------------
 .../input/autocomplete-select/edit.js         | 45 +++++++++----------
 .../input/autocomplete-text/edit.js           | 44 ++++++++----------
 src/components/input/checkbox/index.js        | 20 ++++-----
 src/components/input/date/index.js            |  8 +---
 src/components/input/radio/index.js           | 12 ++---
 src/components/input/select-checkbox/index.js |  8 ++--
 src/components/input/select-radio/index.js    |  2 +-
 src/components/input/select/index.js          | 15 +++----
 src/components/input/text/index.js            | 27 +----------
 src/components/input/textarea/index.js        | 11 ++---
 src/components/input/toggle/index.js          |  5 +--
 15 files changed, 129 insertions(+), 184 deletions(-)
 create mode 100644 src/behaviours/input-component/react-html-attributes.js
 delete mode 100644 src/common/react-html-attributes/index.js

diff --git a/package.json b/package.json
index 47f256d3d..2511ae042 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
         "babel": "^6.3.26",
         "babel-cli": "^6.4.0",
         "babel-core": "^6.4.0",
-        "babel-eslint": "4.1.3",
+        "babel-eslint": "7.1.1",
         "babel-loader": "^6.2.1",
         "babel-preset-focus": "^0.5.2",
         "babel-runtime": "^6.3.19",
@@ -102,10 +102,11 @@
         "chai": "^3.2.0",
         "chai-subset": "^1.0.1",
         "css-loader": "^0.19.0",
-        "eslint": "^2.3.0",
-        "eslint-config-focus": "0.3.0",
-        "eslint-plugin-filenames": "0.1.1",
-        "eslint-plugin-react": "3.5.0",
+        "eslint-config-focus": "0.5.0",
+        "eslint": "3.17.1",
+        "eslint-plugin-filenames": "1.1.0",
+        "eslint-plugin-import": "2.2.0",
+        "eslint-plugin-react": "6.10.0",
         "exports-loader": "^0.6.2",
         "extract-text-webpack-plugin": "^0.8.2",
         "file-loader": "^0.8.4",
diff --git a/src/behaviours/input-component/index.js b/src/behaviours/input-component/index.js
index 058a0c343..bd8e6efed 100644
--- a/src/behaviours/input-component/index.js
+++ b/src/behaviours/input-component/index.js
@@ -1,22 +1,22 @@
-import {inputHtmlAttributes} from '../../common/react-html-attributes';
+import {inputHtmlAttributes, eventHtmlAttributes} from './react-html-attributes';
+import {pairs} from 'lodash';
 
 export const InputBehaviour = Component => class InputComponent extends Component {
 
     /**
-    * comments will be right there
-    */
+     * Filter the incoming props, so only valid props for native HTML elements are passed through.
+     * Value prop is also defaulted to empty string, instead of null or undefined.
+     * 
+     * @param {object} props the incoming props
+     * @returns {object} an object with valid <props></props>
+     */
     _checkProps(props) {
-        let validInputProps = {};
-        let invalidInputProps = {};
-
-        Object.keys(props).map(key => {
-            if(key === inputHtmlAttributes[inputHtmlAttributes.indexOf(key)]) {
-                validInputProps[key] = (key === 'value' && (props[key] === null || props[key] === undefined)) ? '' : props[key];
-            } else {
-                invalidInputProps[key] = props[key];
+        return pairs(props).reduce((acc, [key, value]) => {
+            if (inputHtmlAttributes.indexOf(key) !== -1 || eventHtmlAttributes.indexOf(key) !== -1) {
+                acc[key] = (key === 'value' && (value === null || value === undefined)) ? '' : value;
             }
-        });
-        const managedProps = [validInputProps, invalidInputProps];
-        return managedProps;
-    };
+            return acc;
+        }, {});
+    }
 };
+ 
\ No newline at end of file
diff --git a/src/behaviours/input-component/react-html-attributes.js b/src/behaviours/input-component/react-html-attributes.js
new file mode 100644
index 000000000..97f306454
--- /dev/null
+++ b/src/behaviours/input-component/react-html-attributes.js
@@ -0,0 +1,39 @@
+export const inputHtmlAttributes = [
+    'accept', 'alt', 'autoComplete', 'autoFocus', 'checked', 'dir',
+    'disabled', 'form', 'formAction', 'formEncType', 'formMethod',
+    'formNoValidate', 'formTarget', 'height', 'label', 'list', 'max',
+    'maxLength', 'min', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required',
+    'size', 'src', 'step', 'type', 'value', 'width', 'acceptCharset',
+    'accessKey', 'action', 'allowFullScreen',
+    'allowTransparency', 'async', 'autoPlay', 'capture', 'cellPadding',
+    'cellSpacing', 'challenge', 'charSet', 'cite', 'classID', 'className',
+    'colSpan', 'cols', 'content', 'contentEditable', 'contextMenu', 'controls',
+    'coords', 'crossOrigin', 'data', 'dateTime', 'default', 'defer', 'download',
+    'draggable', 'encType', 'frameBorder', 'headers', 'hidden', 'high', 'href',
+    'hrefLang', 'htmlFor', 'httpEquiv', 'icon', 'id', 'inputMode', 'integrity',
+    'is', 'keyParams', 'keyType', 'kind', 'lang', 'loop', 'low', 'manifest',
+    'marginHeight', 'marginWidth', 'media', 'mediaGroup', 'method', 'minLength',
+    'muted', 'noValidate', 'nonce', 'open', 'optimum', 'poster', 'preload',
+    'profile', 'radioGroup', 'rel', 'reversed', 'role', 'rowSpan', 'rows',
+    'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape',
+    'sizes', 'span', 'spellCheck', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step',
+    'style', 'summary', 'tabIndex', 'target', 'title', 'type', 'useMap', 'wmode',
+    'wrap'
+]
+export const eventHtmlAttributes = [
+    'onCopy', 'onCut',
+    'onPast', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onCompositionEnd',
+    'onCompositionStart', 'onCompositionUpdate', 'onFocus', 'onBlur',
+    'onChange', 'onInput', 'onSubmit', 'onInput', 'onClick', 'onContextMenu',
+    'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit',
+    'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onMouseDown', 
+    'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut',
+    'onMouseOver', 'onMouseUp', 'onSelect', 'onAbort', 'onCanPlay',
+    'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted',
+    'onEnded', 'onError', 'onLoadedData', 'onLoadedMetadata',
+    'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress',
+    'onRateChange', 'onSeeked', 'onSeeking', 'onStalled', 'onSuspend',
+    'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onLoad', 'onError',
+    'onAnimationStart', 'onAnimationEnd', 'onAnimationIteration',
+    'onTransitionEnd'
+]
\ No newline at end of file
diff --git a/src/common/react-html-attributes/index.js b/src/common/react-html-attributes/index.js
deleted file mode 100644
index b3b905dd1..000000000
--- a/src/common/react-html-attributes/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export const inputHtmlAttributes = [
-    "accept", "alt", "autoComplete", "autoFocus", "checked", "dir",
-    "disabled", "form", "formAction", "formEncType", "formMethod",
-    "formNoValidate", "formTarget", "height", "label", "list", "max",
-    "maxLength", "min", "multiple", "name", "onCopy", "onCut",
-    "onPast", "onKeyDown", "onKeyPress", "onKeyUp", "onCompositionEnd",
-    "onCompositionStart", "onCompositionUpdate", "onFocus", "onBlur",
-    "onChange", "onInput", "onSubmit", "onInput", "onClick", "onContextMenu",
-    "onDoubleClick", "onDrag", "onDragEnd", "onDragEnter", "onDragExit",
-    "onDragLeave", "onDragOver", "onDragStart", "onDrop", "onMouseDown",
-    "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut",
-    "onMouseOver", "onMouseUp", "onSelect", "onAbort", "onCanPlay",
-    "onCanPlayThrough", "onDurationChange", "onEmptied", "onEncrypted",
-    "onEnded", "onError", "onLoadedData", "onLoadedMetadata",
-    "onLoadStart", "onPause", "onPlay", "onPlaying", "onProgress",
-    "onRateChange", "onSeeked", "onSeeking", "onStalled", "onSuspend",
-    "onTimeUpdate", "onVolumeChange", "onWaiting", "onLoad", "onError",
-    "onAnimationStart", "onAnimationEnd", "onAnimationIteration",
-    "onTransitionEnd", "pattern", "placeholder", "readOnly", "required",
-    "size", "src", "step", "type", "value", "width", "acceptCharset",
-    "accessKey", "action", "allowFullScreen",
-    "allowTransparency", "async", "autoPlay", "capture", "cellPadding",
-    "cellSpacing", "challenge", "charSet", "cite", "classID", "className",
-    "colSpan", "cols", "content", "contentEditable", "contextMenu", "controls",
-    "coords", "crossOrigin", "data", "dateTime", "default", "defer", "download",
-    "draggable", "encType", "frameBorder", "headers", "hidden", "high", "href",
-    "hrefLang", "htmlFor", "httpEquiv", "icon", "id", "inputMode", "integrity",
-    "is", "keyParams", "keyType", "kind", "lang", "loop", "low", "manifest",
-    "marginHeight", "marginWidth", "media", "mediaGroup", "method", "minLength",
-    "muted", "noValidate", "nonce", "open", "optimum", "poster", "preload",
-    "profile", "radioGroup", "rel", "reversed", "role", "rowSpan", "rows",
-    "sandbox", "scope", "scoped", "scrolling", "seamless", "selected", "shape",
-    "sizes", "span", "spellCheck", "srcDoc", "srcLang", "srcSet", "start", "step",
-    "style", "summary", "tabIndex", "target", "title", "type", "useMap", "wmode",
-    "wrap"
-]
diff --git a/src/components/input/autocomplete-select/edit.js b/src/components/input/autocomplete-select/edit.js
index cb7ccb8b1..dacfa603c 100644
--- a/src/components/input/autocomplete-select/edit.js
+++ b/src/components/input/autocomplete-select/edit.js
@@ -1,5 +1,4 @@
 import React, {Component, PropTypes} from 'react';
-import ReactDOM from 'react-dom';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
 import {InputBehaviour} from '../../../behaviours/input-component';
@@ -53,7 +52,7 @@ class Autocomplete extends Component {
         };
         this.state = state;
         this.autocompleteId = uniqueId('autocomplete-text-');
-    };
+    }
 
     componentDidMount() {
         const {value, keyResolver, inputTimeout} = this.props;
@@ -64,7 +63,7 @@ class Autocomplete extends Component {
         }
         document.addEventListener('click', this._handleDocumentClick);
         this._debouncedQuerySearcher = debounce(this._querySearcher, inputTimeout);
-    };
+    }
 
     componentWillReceiveProps({value, customError, error}) {
         const {keyResolver} = this.props;
@@ -75,10 +74,10 @@ class Autocomplete extends Component {
         } else if (customError !== this.props.customError) {
             this.setState({customError});
         }
-        if(error) {
+        if (error) {
             this.setState({customError: error});
         }
-    };
+    }
 
     componentDidUpdate() {
         if (this.props.customError) {
@@ -86,11 +85,11 @@ class Autocomplete extends Component {
         } else {
             this.refs.inputText.classList.remove('is-invalid');
         }
-    };
+    }
 
     componentWillUnmount() {
         document.removeEventListener('click', this._handleDocumentClick);
-    };
+    }
 
     getValue() {
         const {labelName, keyName, value} = this.props;
@@ -105,14 +104,14 @@ class Autocomplete extends Component {
         } else { // The user selected an option (or no value was provided), return it
             return selected || null;
         }
-    };
+    }
 
     _handleDocumentClick = ({target}) => {
         const {focus, inputValue} = this.state;
         const {onBadInput} = this.props;
         if (focus) {
             const closestACParent = closest(target, `[data-id='${this.autocompleteId}']`, true);
-            if(closestACParent === undefined) {
+            if (closestACParent === undefined) {
                 this.setState({focus: false}, () => {
                     if (onBadInput && this.getValue() === null && inputValue !== '') {
                         onBadInput(inputValue);
@@ -188,7 +187,7 @@ class Autocomplete extends Component {
         this.setState({inputValue: this.i18n(resolvedLabel), selected: key, focus: false}, () => {
             if (onChange) onChange(key);
         });
-    };
+    }
 
     _renderOptions = () => {
         const {active, options, focus} = this.state;
@@ -197,19 +196,19 @@ class Autocomplete extends Component {
             const isActive = active === key;
             renderedOptions.push(
                 <li
-                data-active={isActive}
-                data-focus='option'
-                key={key}
-                onClick={this._select.bind(this, key)}
-                onMouseOver={this._handleSuggestionHover.bind(this, key)}
+                    data-active={isActive}
+                    data-focus='option'
+                    key={key}
+                    onClick={this._select.bind(this, key)}
+                    onMouseOver={this._handleSuggestionHover.bind(this, key)}
                 >
-                {this.i18n(value)}
+                    {this.i18n(value)}
                 </li>
             );
         }
         return (
             <ul data-focus='options' ref='options' data-focussed={focus}>
-            {renderedOptions}
+                {renderedOptions}
             </ul>
         );
     };
@@ -217,14 +216,10 @@ class Autocomplete extends Component {
     render () {
         const {inputValue, isLoading} = this.state;
         const {customError, renderOptions} = this.props;
-        const {_handleQueryFocus, _handleQueryKeyDown, _handleQueryChange} = this;
 
-        const managedProps = this._checkProps(this.props);
+        const validInputProps = this._checkProps(this.props);
 
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1]
-
-        const { name, placeholder, value: valueToFormat } = validInputProps;
+        const { placeholder } = validInputProps;
 
         validInputProps.value = inputValue;
         validInputProps.onFocus = this._handleQueryFocus;
@@ -236,7 +231,7 @@ class Autocomplete extends Component {
         return (
             <div data-focus='autocomplete' data-id={this.autocompleteId}>
                 <div className={`mdl-textfield mdl-js-textfield${customError ? ' is-invalid' : ''}`} data-focus='input-text' ref='inputText'>
-                    <div data-focus='loading' data-loading={isLoading} className='mdl-progress mdl-js-progress mdl-progress__indeterminate' ref='loader'></div>
+                    <div data-focus='loading' data-loading={isLoading} className='mdl-progress mdl-js-progress mdl-progress__indeterminate' ref='loader' />
                     <input
                         className='mdl-textfield__input'
                         {...inputProps}
@@ -249,7 +244,7 @@ class Autocomplete extends Component {
                 {renderOptions ? renderOptions.call(this) : this._renderOptions()}
             </div>
         );
-    };
+    }
 }
 
 Autocomplete.displayName = 'Autocomplete';
diff --git a/src/components/input/autocomplete-text/edit.js b/src/components/input/autocomplete-text/edit.js
index 78bf36b50..0aecf1dd2 100644
--- a/src/components/input/autocomplete-text/edit.js
+++ b/src/components/input/autocomplete-text/edit.js
@@ -1,5 +1,4 @@
 import React, {Component, PropTypes} from 'react';
-import ReactDOM from 'react-dom';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
 import {InputBehaviour} from '../../../behaviours/input-component';
@@ -65,7 +64,7 @@ class AutocompleteTextEdit extends Component {
         * [inputTimeout description]
         * @type {number}
         */
-        inputTimeout : PropTypes.number.isRequired
+        inputTimeout: PropTypes.number.isRequired
     };
 
     state = {
@@ -78,7 +77,7 @@ class AutocompleteTextEdit extends Component {
     };
 
     componentWillReceiveProps({error}) {
-        if(error) {
+        if (error) {
             this.setState({error: error});
         }
     }
@@ -89,12 +88,11 @@ class AutocompleteTextEdit extends Component {
     }
 
     // Returns the state's inputValue
-    getValue = () =>  {
+    getValue = () => {
         const {inputValue} = this.state;
-        if(inputValue !== undefined) {
+        if (inputValue !== undefined) {
             return inputValue;
-        }
-        else {
+        } else {
             return null;
         }
     };
@@ -103,10 +101,9 @@ class AutocompleteTextEdit extends Component {
     // Sets the hasSuggestions' state if the given object has a none empty array
     _querySearcher = value => {
         const {querySearcher} = this.props;
-        const {hasSuggestions} = this.state;
 
         querySearcher(value).then(({data, totalCount}) => {
-            if(totalCount > 0) {
+            if (totalCount > 0) {
                 this.setState({hasSuggestions: true, suggestions: data, error: ''});
             }
             this.refs.loader.classList.remove('mdl-progress__indeterminate');
@@ -121,14 +118,13 @@ class AutocompleteTextEdit extends Component {
     // Sets the state's inputValue when the user is typing
     onQueryChange = ({target: {value}}) => {
         this.setState({inputValue: value});
-        if(value.trim() == '') {
+        if (value.trim() === '') {
             this.setState({hasSuggestions: false});
-        }
-        else {
+        } else {
             this.refs.loader.classList.add('mdl-progress__indeterminate');
             this.setState({isLoading: true});
             this._debouncedQuerySearcher(value);
-            // this._querySearcher(value);
+            // this._querySearcher(value); 
         }
     };
 
@@ -137,13 +133,13 @@ class AutocompleteTextEdit extends Component {
         this.refs.inputText.value = value;
         this.setState({inputValue: value, hasSuggestions: false, suggestions: []});
         return value;
-    };
+    }
 
     // Returns an html list whith the Suggestions
     renderSuggestions = () => {
         const {suggestions} = this.state;
         const allSuggestions = suggestions.map(({key, label}) => <li key={key} onMouseDown={(e) => {this.onResultClick(label); e.preventDefault();}} data-focus='option' >{label}</li>);
-        return(
+        return (
             <ul ref='suggestions' data-focus='options'>
                 {allSuggestions}
             </ul>
@@ -155,10 +151,10 @@ class AutocompleteTextEdit extends Component {
         const {hasSuggestions, hasFocus} = this.state;
         const {showAtFocus, emptyShowAll} = this.props;
         this.setState({hasFocus: !this.state.hasFocus});
-        if(hasSuggestions && !showAtFocus && hasFocus === false) {
+        if (hasSuggestions && !showAtFocus && hasFocus === false) {
             this.setState({hasSuggestions: false});
         }
-        if(!hasSuggestions && e.target.value.trim() === '' && emptyShowAll && hasFocus === false) {
+        if (!hasSuggestions && e.target.value.trim() === '' && emptyShowAll && hasFocus === false) {
             // Doing a global search here
             this._querySearcher('');
         }
@@ -169,12 +165,8 @@ class AutocompleteTextEdit extends Component {
     render() {
         const {inputValue, hasSuggestions, hasFocus, isLoading} = this.state;
 
-        const managedProps = this._checkProps(this.props);
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1];
-
-        const {inputTimeout, error} = invalidInputProps;
-        const {placeholder} = validInputProps;
+        const validInputProps = this._checkProps(this.props);
+        const {placeholder, error} = this.props;
 
         validInputProps.value = inputValue === undefined || inputValue === null ? '' : inputValue;
         validInputProps.onFocus = this.toggleHasFocus;
@@ -182,13 +174,13 @@ class AutocompleteTextEdit extends Component {
         validInputProps.onBlur = this.toggleHasFocus;
         const inputProps = {...validInputProps};
 
-        return(
+        return (
             <div data-focus='autocompleteText'>
                 <div className={`mdl-textfield mdl-js-textfield${error ? ' is-invalid' : ''}`} ref='materialInput'>
                     <div data-focus='loading' data-loading={isLoading} className='mdl-progress mdl-js-progress' ref='loader'/>
                     <input className='mdl-textfield__input' type='text' ref='inputText' {...inputProps} />
-                    <label className="mdl-textfield__label">{this.i18n(placeholder)}</label>
-                    <span className="mdl-textfield__error" ref='errorMessage'>{this.i18n(error)}</span>
+                    <label className='mdl-textfield__label'>{this.i18n(placeholder)}</label>
+                    <span className='mdl-textfield__error' ref='errorMessage'>{this.i18n(error)}</span>
                 </div>
                 {hasSuggestions && hasFocus &&
                     this.renderSuggestions()
diff --git a/src/components/input/checkbox/index.js b/src/components/input/checkbox/index.js
index c7d4d79b1..263199435 100644
--- a/src/components/input/checkbox/index.js
+++ b/src/components/input/checkbox/index.js
@@ -42,22 +42,20 @@ class InputCheckBox extends Component {
     }
 
     render() {
-        const managedProps = this._checkProps(this.props);
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1];
+        const validInputProps = this._checkProps(this.props);
 
-        const {label, value, disabled} = validInputProps;
+        const {label, value, disabled} = this.props;
 
         validInputProps.onChange = this.handleOnChange;
         const inputProps = {...validInputProps};
-        
+
         return (
-          <div data-focus='input-checkbox-container'>
-            <label className={'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect'} data-focus='input-checkbox' ref='mdlHolder'>
-                <input checked={value} className='mdl-checkbox__input' disabled={disabled} ref='checkbox' type='checkbox' {...inputProps}/>
-                {label && <span className='mdl-checkbox__label'>{this.i18n(label)}</span>}
-            </label>
-          </div>
+            <div data-focus='input-checkbox-container'>
+                <label className={'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect'} data-focus='input-checkbox' ref='mdlHolder'>
+                    <input checked={value} className='mdl-checkbox__input' disabled={disabled} ref='checkbox' type='checkbox' {...inputProps}/>
+                    {label && <span className='mdl-checkbox__label'>{this.i18n(label)}</span>}
+                </label>
+            </div>
         );
     }
 }
diff --git a/src/components/input/date/index.js b/src/components/input/date/index.js
index 219ed3ea0..35ed0091a 100644
--- a/src/components/input/date/index.js
+++ b/src/components/input/date/index.js
@@ -66,12 +66,6 @@ class InputDate extends Component {
         document.addEventListener('click', this._onDocumentClick);
     }
 
-
-    componentDidMount() {
-        const {drops, showDropdowns} = this.props;
-        const {inputDate: startDate} = this.state;
-    }
-
     componentWillReceiveProps({value}) {
         this.setState({
             dropDownDate: isISOString(value) ? moment.utc(value, moment.ISO_8601) : moment.utc(),
@@ -191,7 +185,7 @@ class InputDate extends Component {
                             ref='picker'
                             minDate={minDate}
                             maxDate={maxDate}
-                            />
+                        />
                     </div>
                 }
             </div>
diff --git a/src/components/input/radio/index.js b/src/components/input/radio/index.js
index 8161878d3..20c9fcfda 100644
--- a/src/components/input/radio/index.js
+++ b/src/components/input/radio/index.js
@@ -45,7 +45,7 @@ class Radio extends Component {
     */
     _onChange = () => {
         this.setState({isChecked: !this.state.isChecked}, () => {
-            if(this.props.onChange) {
+            if (this.props.onChange) {
                 this.props.onChange(this.state.isChecked);
             }
         });
@@ -65,19 +65,15 @@ class Radio extends Component {
     */
     render() {
         const {isChecked} = this.state;
-
-        const managedProps = this._checkProps(this.props);
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1];
-
-        const {label, onChange} = validInputProps;
+        const {label} = this.props;
+        const validInputProps = this._checkProps(this.props);
 
         validInputProps.onChange = this._onChange;
         validInputProps.checked = isChecked ? 'checked' : undefined;
         const inputProps = {...validInputProps};
 
         return (
-            <label className='mdl-radio mdl-js-radio mdl-js-ripple-effect' data-focus="input-radio" ref='inputMdl'>
+            <label className='mdl-radio mdl-js-radio mdl-js-ripple-effect' data-focus='input-radio' ref='inputMdl'>
                 <input className='mdl-radio__button' type='radio' ref='inputRadio' {...inputProps}/>
                 <span className='mdl-radio__label'>{this.i18n(label)}</span>
             </label>
diff --git a/src/components/input/select-checkbox/index.js b/src/components/input/select-checkbox/index.js
index f30351664..7b112c3e3 100644
--- a/src/components/input/select-checkbox/index.js
+++ b/src/components/input/select-checkbox/index.js
@@ -1,7 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import Checkbox from '../checkbox';
 import Translation from '../../../behaviours/translation';
-const {pull} = require('lodash/array');
+import {pull} from 'lodash/array';
 
 @Translation
 class SelectCheckbox extends Component {
@@ -25,7 +25,7 @@ class SelectCheckbox extends Component {
     };
 
     componentWillReceiveProps(newProps) {
-        if(newProps) {
+        if (newProps) {
             this.setState({selectedValues: newProps.value});
         }
     }
@@ -44,12 +44,12 @@ class SelectCheckbox extends Component {
      * @param  {[type]} newStatus the new status
      */
     _handleCheckboxChange(key, newStatus) {
-        if(this.props.onChange) {
+        if (this.props.onChange) {
             this.props.onChange(key, newStatus);
             return;
         }
         const selectedValues = this.state.selectedValues;
-        if(newStatus) {
+        if (newStatus) {
             selectedValues.push(key);
         } else {
             pull(selectedValues, key);
diff --git a/src/components/input/select-radio/index.js b/src/components/input/select-radio/index.js
index 0d9204efb..4c028b1a8 100644
--- a/src/components/input/select-radio/index.js
+++ b/src/components/input/select-radio/index.js
@@ -44,7 +44,7 @@ class SelectRadio extends Component {
     */
     _handleRadioChange(newValue) {
         const {onChange} = this.props;
-        if(onChange) {
+        if (onChange) {
             onChange(newValue);
             return;
         }
diff --git a/src/components/input/select/index.js b/src/components/input/select/index.js
index a594516c5..8fb60e6fc 100644
--- a/src/components/input/select/index.js
+++ b/src/components/input/select/index.js
@@ -1,9 +1,8 @@
 //dependencies
 import React, {Component, PropTypes} from 'react';
-import ReactDOM from 'react-dom';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import {InputBehaviour} from '../../../behaviours/input-component';
-import {isUndefined, isNull, isNumber} from 'lodash/lang';
+import {isUndefined, isNull} from 'lodash/lang';
 import {union} from 'lodash/array';
 const UNSELECTED_KEY = 'UNSELECTED_KEY';
 /**
@@ -13,7 +12,7 @@ const UNSELECTED_KEY = 'UNSELECTED_KEY';
 * @return {strint | number}  - The parsed value.
 */
 function _valueParser(propsValue, rawValue) {
-    if(UNSELECTED_KEY === rawValue) {
+    if (UNSELECTED_KEY === rawValue) {
         return undefined;
     }
     const {type} = this.props;
@@ -83,7 +82,7 @@ class Select extends Component {
     /** inheritdoc */
     _renderOptions({hasUndefined, labelKey, isRequired, value, values = [], valueKey, isActiveProperty, unSelectedLabel}) {
         const isRequiredAndNoValue = isRequired && (isUndefined(value) || isNull(value));
-        if(hasUndefined || isRequiredAndNoValue) {
+        if (hasUndefined || isRequiredAndNoValue) {
             values = union(
                 [{[labelKey]: this.i18n(unSelectedLabel), [valueKey]: UNSELECTED_KEY}],
                 values
@@ -104,12 +103,8 @@ class Select extends Component {
     * @override
     */
     render() {
-        const managedProps = this._checkProps(this.props);
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1];
-
-        const {error} = invalidInputProps;
-        const {style} = validInputProps;
+        const {error, style} = this.props;
+        const validInputProps = this._checkProps(this.props);
 
         validInputProps.onChange = this._handleSelectChange;
         const inputProps = {...validInputProps};
diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index c94af43c8..9d68b487d 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -66,41 +66,18 @@ class InputText extends Component {
         return onChange(unformatter(value, MODE));
     };
 
-    // /**
-    // * comments will be right there
-    // */
-    // _checkProps = (props) => {
-    //     let validInputProps = {};
-    //     let invalidInputProps = {};
-    //
-    //     Object.keys(props).map(key => {
-    //         if(key === inputHtmlAttributes[inputHtmlAttributes.indexOf(key)]) {
-    //             let value = key === 'value' ? props.formatter(props[key], MODE) : key === 'onChange' ? this._handleInputChange : props[key];
-    //             validInputProps[key] = value;
-    //         } else {
-    //             invalidInputProps[key] = props[key];
-    //         }
-    //     });
-    //     const managedProps = [validInputProps, invalidInputProps];
-    //     return managedProps;
-    // };
     /**
     * @inheritdoc
     * @override
     */
     render() {
-        const managedProps = this._checkProps(this.props);
-
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1]
-
+        const validInputProps = this._checkProps(this.props);
+        const { error, style } = this.props;
         const { name, placeholder, value: valueToFormat } = validInputProps;
 
         validInputProps.value = this.props.formatter(valueToFormat, MODE);
         validInputProps.onChange = this._handleInputChange;
 
-        const { error, style } = invalidInputProps;
-
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
 
         const inputProps = {...validInputProps, pattern};
diff --git a/src/components/input/textarea/index.js b/src/components/input/textarea/index.js
index 18915e732..9a880b660 100644
--- a/src/components/input/textarea/index.js
+++ b/src/components/input/textarea/index.js
@@ -70,19 +70,16 @@ class InputTextarea extends Component {
     * @override
     */
     render() {
-        const managedProps = this._checkProps(this.props);
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1];
+        const validInputProps = this._checkProps(this.props);
 
-        const {error} = invalidInputProps;
-        const {formatter} = this.props;
+        const {formatter, error} = this.props;
         const {name, style, placeholder, value} = validInputProps;
 
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
         const mdlClasses = `mdl-textfield mdl-js-textfield${error ? ' is-invalid' : ''}`;
 
-        validInputProps.value = formatter(value) === undefined || formatter(value) === null ? '' :  formatter(value);
-        validInputProps.onChange = this._handleInputChange
+        validInputProps.value = formatter(value) === undefined || formatter(value) === null ? '' : formatter(value);
+        validInputProps.onChange = this._handleInputChange 
         const inputProps = {...validInputProps, pattern};
 
         return (
diff --git a/src/components/input/toggle/index.js b/src/components/input/toggle/index.js
index d5ebbca80..87f72e1a3 100644
--- a/src/components/input/toggle/index.js
+++ b/src/components/input/toggle/index.js
@@ -31,10 +31,7 @@ class InputToggle extends Component {
     };
 
     render() {
-        const managedProps = this._checkProps(this.props);
-        const validInputProps = managedProps[0];
-        const invalidInputProps = managedProps[1];
-
+        const validInputProps = this._checkProps(this.props);
         const {label, value} = validInputProps;
 
         validInputProps.onChange = this.handleOnChange;

From 2749fb46d100e2cbacdf6291373e1af571f2cc60 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 21 Apr 2017 19:22:21 +0200
Subject: [PATCH 28/50] Using static methods instead of behaviour Adding rules
 to allow data-* or aria-* element Adding the filtering on input components,
 and other components

---
 src/behaviours/input-component/index.js       | 22 -------------------
 src/components/button/index.js                | 10 ++++-----
 src/components/column/index.js                |  3 ++-
 src/components/grid/index.js                  |  3 ++-
 src/components/icon-dropdown/index.js         |  4 +++-
 src/components/icon/index.js                  |  5 +++--
 .../input/autocomplete-select/edit.js         |  6 ++---
 .../input/autocomplete-text/edit.js           |  5 ++---
 src/components/input/checkbox/index.js        |  5 ++---
 src/components/input/radio/index.js           |  5 ++---
 src/components/input/select/index.js          |  5 ++---
 src/components/input/text/index.js            |  5 ++---
 src/components/input/textarea/index.js        |  5 ++---
 src/components/input/toggle/index.js          |  5 ++---
 src/utils/filter-html-attributes/index.js     | 20 +++++++++++++++++
 .../react-html-attributes.js                  |  0
 16 files changed, 51 insertions(+), 57 deletions(-)
 delete mode 100644 src/behaviours/input-component/index.js
 create mode 100644 src/utils/filter-html-attributes/index.js
 rename src/{behaviours/input-component => utils/filter-html-attributes}/react-html-attributes.js (100%)

diff --git a/src/behaviours/input-component/index.js b/src/behaviours/input-component/index.js
deleted file mode 100644
index bd8e6efed..000000000
--- a/src/behaviours/input-component/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {inputHtmlAttributes, eventHtmlAttributes} from './react-html-attributes';
-import {pairs} from 'lodash';
-
-export const InputBehaviour = Component => class InputComponent extends Component {
-
-    /**
-     * Filter the incoming props, so only valid props for native HTML elements are passed through.
-     * Value prop is also defaulted to empty string, instead of null or undefined.
-     * 
-     * @param {object} props the incoming props
-     * @returns {object} an object with valid <props></props>
-     */
-    _checkProps(props) {
-        return pairs(props).reduce((acc, [key, value]) => {
-            if (inputHtmlAttributes.indexOf(key) !== -1 || eventHtmlAttributes.indexOf(key) !== -1) {
-                acc[key] = (key === 'value' && (value === null || value === undefined)) ? '' : value;
-            }
-            return acc;
-        }, {});
-    }
-};
- 
\ No newline at end of file
diff --git a/src/components/button/index.js b/src/components/button/index.js
index 4a9f922e3..5a8cca457 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import MDBehaviour from '../../behaviours/material';
 import Translation from '../../behaviours/translation';
-import ComponentBaseBehaviour from '../../behaviours/component-base';
+import filterProps from '../../utils/filter-html-attributes';
 
 const BTN_JS = 'mdl-js-button';
 const BTN_CLASS = 'mdl-button';
@@ -130,15 +130,15 @@ class Button extends Component {
             return <span data-focus='button-label'>{this.i18n(processLabel)}</span>
         }
         return null;
-    };
+    }
 
     /** inheritedDoc */
     render() {
         // attribute doc : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
         // be careful the way you declare your attribute names : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
-        const { className, formNoValidate, handleOnClick, icon, id, onClick, type, label, style, hasRipple, isJs, iconLibrary, isLoading, ...rest } = this.props;
-        const otherInputProps = { formNoValidate, onClick: handleOnClick ? handleOnClick : onClick, style, type, ...rest }; //on click for legacy. Remove handleOnClick in v2
-        const renderedClassName = `${className ? className : ''} ${::this._getComponentClassName()}`.trim(); 
+        const {className, disabled, formNoValidate, handleOnClick, icon, id, onClick, type, label, style, hasRipple, isJs, iconLibrary, isLoading, ...rest} = this.props;
+        const otherInputProps = filterProps({ disabled, formNoValidate, onClick: handleOnClick ? handleOnClick : onClick, style, type, ...rest }); //on click for legacy. Remove handleOnClick in v2
+        const renderedClassName = `${className ? className : ''} ${::this._getComponentClassName()}`.trim();
         return (
            <button alt={this.i18n(label)} className={renderedClassName} data-focus='button-action' data-saving={isLoading} id={id} disabled={isLoading} title={this.i18n(label)} {...otherInputProps} ref='materialButton'>
                 {icon && ::this._renderIcon()}
diff --git a/src/components/column/index.js b/src/components/column/index.js
index 7f9cb71a5..a6f3d362f 100644
--- a/src/components/column/index.js
+++ b/src/components/column/index.js
@@ -1,6 +1,7 @@
 // see http://www.getmdl.io/components/index.html#layout-section/grid
 //dependencies
 import React, {Component, PropTypes} from 'react';
+import filterProps from '../../utils/filter-html-attributes';
 
 /**
  * Column component.
@@ -14,7 +15,7 @@ function _className(className, size) {
 function Column({size, className, children, ...otherProps}) {
 
     return(
-        <div className={_className(className, size) } {...otherProps}>
+        <div className={_className(className, size) } {...filterProps(otherProps)}>
             {children}
         </div>
     );
diff --git a/src/components/grid/index.js b/src/components/grid/index.js
index 4e2c4eff1..e0b78300b 100644
--- a/src/components/grid/index.js
+++ b/src/components/grid/index.js
@@ -1,6 +1,7 @@
 // see http://www.getmdl.io/components/index.html#layout-section/grid
 //dependencies
 import React, {Component, PropTypes} from 'react';
+import filterProps from '../../utils/filter-html-attributes';
 
 /**
  * Grid component.
@@ -8,7 +9,7 @@ import React, {Component, PropTypes} from 'react';
 
  function Grid({children, className, ...otherProps}) {
      return (
-         <div className={`mdl-grid ${className ? className : ''}`} {...otherProps}>
+         <div className={`mdl-grid ${className ? className : ''}`} {...filterProps(otherProps)}>
              {children}
          </div>
      );
diff --git a/src/components/icon-dropdown/index.js b/src/components/icon-dropdown/index.js
index b788692a5..1969ddf17 100644
--- a/src/components/icon-dropdown/index.js
+++ b/src/components/icon-dropdown/index.js
@@ -1,8 +1,10 @@
 import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
+import {uniqueId} from 'lodash/utility';
+
 import Button from '../../components/button';
 import Translation from '../../behaviours/translation';
-const {uniqueId} = require('lodash/utility');
+
 
 function isDescendant(parent, child) {
     let node = child.parentNode;
diff --git a/src/components/icon/index.js b/src/components/icon/index.js
index d68709568..70b9be78a 100644
--- a/src/components/icon/index.js
+++ b/src/components/icon/index.js
@@ -1,12 +1,13 @@
 import React, {Component, PropTypes} from 'react';
+import filterProps from '../../utils/filter-html-attributes';
 
 function Icon({name, library, onClick, style}) {
     switch (library) {
         case 'material':
-            return <i className='material-icons' onClick={onClick} {...style}>{name}</i>;
+            return <i className='material-icons' onClick={onClick} {...filterProps(style)}>{name}</i>;
         case 'font-awesome':
             const faCss = `fa fa-${name}`;
-            return <i className={faCss} onClick={onClick} {...style}></i>;
+            return <i className={faCss} onClick={onClick} {...filterProps(style)}></i>;
         case 'font-custom':
             return <span className={`icon-${name}`}></span>;
         default:
diff --git a/src/components/input/autocomplete-select/edit.js b/src/components/input/autocomplete-select/edit.js
index dacfa603c..f0537d506 100644
--- a/src/components/input/autocomplete-select/edit.js
+++ b/src/components/input/autocomplete-select/edit.js
@@ -1,8 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
-import {InputBehaviour} from '../../../behaviours/input-component';
-
+import filterProps from '../../../utils/filter-html-attributes';
 import closest from 'closest';
 import debounce from 'lodash/function/debounce';
 import uniqueId from 'lodash/utility/uniqueId';
@@ -35,7 +34,6 @@ const defaultProps = {
 @MDBehaviour('loader')
 @MDBehaviour('inputText')
 @ComponentBaseBehaviour
-@InputBehaviour
 class Autocomplete extends Component {
     constructor(props) {
         super(props);
@@ -217,7 +215,7 @@ class Autocomplete extends Component {
         const {inputValue, isLoading} = this.state;
         const {customError, renderOptions} = this.props;
 
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
 
         const { placeholder } = validInputProps;
 
diff --git a/src/components/input/autocomplete-text/edit.js b/src/components/input/autocomplete-text/edit.js
index 0aecf1dd2..dfd806129 100644
--- a/src/components/input/autocomplete-text/edit.js
+++ b/src/components/input/autocomplete-text/edit.js
@@ -1,14 +1,13 @@
 import React, {Component, PropTypes} from 'react';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
-import {InputBehaviour} from '../../../behaviours/input-component';
+import filterProps from '../../../utils/filter-html-attributes';
 
 import debounce from 'lodash/function/debounce';
 
 @MDBehaviour('materialInput')
 @MDBehaviour('loader')
 @ComponentBaseBehaviour
-@InputBehaviour
 class AutocompleteTextEdit extends Component {
     static defaultProps = {
         placeholder: 'Search here...',
@@ -165,7 +164,7 @@ class AutocompleteTextEdit extends Component {
     render() {
         const {inputValue, hasSuggestions, hasFocus, isLoading} = this.state;
 
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
         const {placeholder, error} = this.props;
 
         validInputProps.value = inputValue === undefined || inputValue === null ? '' : inputValue;
diff --git a/src/components/input/checkbox/index.js b/src/components/input/checkbox/index.js
index 263199435..9baa52022 100644
--- a/src/components/input/checkbox/index.js
+++ b/src/components/input/checkbox/index.js
@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Translation from '../../../behaviours/translation';
 import Material from '../../../behaviours/material';
-import {InputBehaviour} from '../../../behaviours/input-component';
+import filterProps from '../../../utils/filter-html-attributes';
 
 const propTypes = {
     label: PropTypes.string,
@@ -20,7 +20,6 @@ const displayName = 'InputCheckBox';
 
 @Translation
 @Material('mdlHolder')
-@InputBehaviour
 class InputCheckBox extends Component {
     getValue = () => {
         const domElement = ReactDOM.findDOMNode(this.refs.checkbox);
@@ -42,7 +41,7 @@ class InputCheckBox extends Component {
     }
 
     render() {
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
 
         const {label, value, disabled} = this.props;
 
diff --git a/src/components/input/radio/index.js b/src/components/input/radio/index.js
index 20c9fcfda..d3db67553 100644
--- a/src/components/input/radio/index.js
+++ b/src/components/input/radio/index.js
@@ -2,13 +2,12 @@ import React, {Component, PropTypes} from 'react';
 import Translation from '../../../behaviours/translation';
 import GridBehaviour from '../../../behaviours/grid';
 import MaterialBehaviour from '../../../behaviours/material';
-import {InputBehaviour} from '../../../behaviours/input-component';
+import filterProps from '../../../utils/filter-html-attributes';
 import {isUndefined} from 'lodash/lang';
 
 @Translation
 @MaterialBehaviour('inputMdl')
 @GridBehaviour
-@InputBehaviour
 class Radio extends Component {
     static defaultProps = {
         value: false
@@ -66,7 +65,7 @@ class Radio extends Component {
     render() {
         const {isChecked} = this.state;
         const {label} = this.props;
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
 
         validInputProps.onChange = this._onChange;
         validInputProps.checked = isChecked ? 'checked' : undefined;
diff --git a/src/components/input/select/index.js b/src/components/input/select/index.js
index 8fb60e6fc..1b8dda33e 100644
--- a/src/components/input/select/index.js
+++ b/src/components/input/select/index.js
@@ -1,7 +1,7 @@
 //dependencies
 import React, {Component, PropTypes} from 'react';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
-import {InputBehaviour} from '../../../behaviours/input-component';
+import filterProps from '../../../utils/filter-html-attributes';
 import {isUndefined, isNull} from 'lodash/lang';
 import {union} from 'lodash/array';
 const UNSELECTED_KEY = 'UNSELECTED_KEY';
@@ -55,7 +55,6 @@ const defaultProps = {
 * Component standing for an HTML input.
 */
 @ComponentBaseBehaviour
-@InputBehaviour
 class Select extends Component {
 
     /**
@@ -104,7 +103,7 @@ class Select extends Component {
     */
     render() {
         const {error, style} = this.props;
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
 
         validInputProps.onChange = this._handleSelectChange;
         const inputProps = {...validInputProps};
diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index 9d68b487d..fb85c178b 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import {identity} from 'lodash/utility';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
-import {InputBehaviour} from '../../../behaviours/input-component';
+import filterProps from '../../../utils/filter-html-attributes';
 const MODE = {isEdit: true};
 
 const propTypes = {
@@ -35,7 +35,6 @@ const defaultProps = {
 */
 @MDBehaviour('inputText')
 @ComponentBaseBehaviour
-@InputBehaviour
 class InputText extends Component {
 
     /**
@@ -71,7 +70,7 @@ class InputText extends Component {
     * @override
     */
     render() {
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
         const { error, style } = this.props;
         const { name, placeholder, value: valueToFormat } = validInputProps;
 
diff --git a/src/components/input/textarea/index.js b/src/components/input/textarea/index.js
index 9a880b660..dc4eadd2c 100644
--- a/src/components/input/textarea/index.js
+++ b/src/components/input/textarea/index.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import {identity} from 'lodash/utility';
 import ComponentBaseBehaviour from '../../../behaviours/component-base';
 import MDBehaviour from '../../../behaviours/material';
-import {InputBehaviour} from '../../../behaviours/input-component';
+import filterProps from '../../../utils/filter-html-attributes';
 
 const propTypes = {
     cols: PropTypes.number,
@@ -43,7 +43,6 @@ const defaultProps = {
 */
 @MDBehaviour('inputTextarea')
 @ComponentBaseBehaviour
-@InputBehaviour
 class InputTextarea extends Component {
 
     /**
@@ -70,7 +69,7 @@ class InputTextarea extends Component {
     * @override
     */
     render() {
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
 
         const {formatter, error} = this.props;
         const {name, style, placeholder, value} = validInputProps;
diff --git a/src/components/input/toggle/index.js b/src/components/input/toggle/index.js
index 87f72e1a3..4a78e39bc 100644
--- a/src/components/input/toggle/index.js
+++ b/src/components/input/toggle/index.js
@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Translation from '../../../behaviours/translation';
 import Material from '../../../behaviours/material';
-import {InputBehaviour} from '../../../behaviours/input-component';
+import filterProps from '../../../utils/filter-html-attributes';
 
 const propTypes = {
     label: PropTypes.string,
@@ -18,7 +18,6 @@ const displayName = 'InputToggle';
 
 @Translation
 @Material('mdlHolder')
-@InputBehaviour
 class InputToggle extends Component {
     getValue = () => {
         const domElement = ReactDOM.findDOMNode(this.refs.toggle);
@@ -31,7 +30,7 @@ class InputToggle extends Component {
     };
 
     render() {
-        const validInputProps = this._checkProps(this.props);
+        const validInputProps = filterProps(this.props);
         const {label, value} = validInputProps;
 
         validInputProps.onChange = this.handleOnChange;
diff --git a/src/utils/filter-html-attributes/index.js b/src/utils/filter-html-attributes/index.js
new file mode 100644
index 000000000..fff312e8a
--- /dev/null
+++ b/src/utils/filter-html-attributes/index.js
@@ -0,0 +1,20 @@
+import {inputHtmlAttributes, eventHtmlAttributes} from './react-html-attributes';
+import {pairs} from 'lodash';
+
+    /**
+     * Filter the incoming props, so only valid props for native HTML elements are passed through.
+     * Value prop is also defaulted to empty string, instead of null or undefined.
+     * 
+     * @param {object} props the incoming props
+     * @returns {object} an object with valid <props></props>
+     */
+function checkProps(props) {
+    return pairs(props).reduce((acc, [key, value]) => {
+        if (inputHtmlAttributes.indexOf(key) !== -1 || eventHtmlAttributes.indexOf(key) !== -1 || key.startsWith('data-') || key.startsWith('aria-')) {
+            acc[key] = (key === 'value' && (value === null || value === undefined)) ? '' : value;
+        }
+        return acc;
+    }, {});
+}
+
+export default checkProps;  
\ No newline at end of file
diff --git a/src/behaviours/input-component/react-html-attributes.js b/src/utils/filter-html-attributes/react-html-attributes.js
similarity index 100%
rename from src/behaviours/input-component/react-html-attributes.js
rename to src/utils/filter-html-attributes/react-html-attributes.js

From 5dfc16a08d50bf3b422e4aff85d9970a319f2c55 Mon Sep 17 00:00:00 2001
From: JohnnP <jonathan.pujol12@gmail.com>
Date: Fri, 20 Jan 2017 14:38:30 +0100
Subject: [PATCH 29/50] Change form

---
 src/common/field/index.js                     | 12 ++++++++++--
 src/common/mixin/field-component-behaviour.js | 12 +++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/common/field/index.js b/src/common/field/index.js
index 1d58ca34a..731c4f414 100644
--- a/src/common/field/index.js
+++ b/src/common/field/index.js
@@ -42,7 +42,15 @@ const FieldMixin = {
     },
     /** @inheritdoc */
     componentWillReceiveProps(newProps) {
-        this.setState({value: newProps.value, error: newProps.error, values: newProps.values});
+        const {value, values} = this.state;
+        const newState = { value: newProps.value };
+        if (value !== newProps.value || values !== newProps.values) {
+            newState.error = null;
+        }
+        if (newProps.error) {
+            newState.error = newProps.error;
+        }
+        this.setState(newState);
     },
     /**
     * Get the css class of the field component.
@@ -62,7 +70,7 @@ const FieldMixin = {
                 {isCustomComponent && this._renderFieldComponent()}
                 {!isCustomComponent && hasLabel && label()}
                 {!isCustomComponent &&
-                    <div className ={`${this._getContentGridClassName()}`} data-focus='field-value-container'>
+                    <div className={`${this._getContentGridClassName()}`} data-focus='field-value-container'>
                         {codeResolver && searcher ? autocomplete() : keyResolver && querySearcher ? autocompleteSelect() : querySearcher ? autocompleteText() : isEdit ? (values ? select() : input()) : display()}
                     </div>
                 }
diff --git a/src/common/mixin/field-component-behaviour.js b/src/common/mixin/field-component-behaviour.js
index ec29b72a0..4db86da73 100644
--- a/src/common/mixin/field-component-behaviour.js
+++ b/src/common/mixin/field-component-behaviour.js
@@ -26,14 +26,15 @@ const fieldBehaviourMixin = {
         const listName = options.listName || def.listName;
         //hasLabel
         const hasLabel = (function hasLabel() {
-            if(options.hasLabel !== undefined) {
+            if (options.hasLabel !== undefined) {
                 return options.hasLabel;
             }
-            if(def.hasLabel !== undefined) {
+            if (def.hasLabel !== undefined) {
                 return options.hasLabel;
             } return true;
-        }());
+        } ());
         //Build a container for the props.
+        const baseName = name;
         name = options.name || `${this.definitionPath}.${name}`;
         const propsContainer = {
             name: name,
@@ -44,6 +45,7 @@ const fieldBehaviourMixin = {
             error: context.state.error ? context.state.error[name] : undefined,
             locale: def.locale,
             format: def.format,
+            onChange: options.onChange ? options.onChange : (data) => this.setState({ [baseName]: data }),
             //Mode
             isEdit: isEdit,
             hasLabel: hasLabel,
@@ -74,8 +76,8 @@ const fieldBehaviourMixin = {
         const refContainer = options.refContainer || def.refContainer || context.state.reference;
 
         // case no props.values and then
-        if(!(options.hasOwnProperty('values')) && isObject(refContainer) && refContainer.hasOwnProperty(listName)) {
-            assign(fieldProps, {values: refContainer[listName] || [] });
+        if (!(options.hasOwnProperty('values')) && isObject(refContainer) && refContainer.hasOwnProperty(listName)) {
+            assign(fieldProps, { values: refContainer[listName] || [] });
         }
         return fieldProps;
     }

From fe464b541069fe967627b7a4beefde8eeac75a46 Mon Sep 17 00:00:00 2001
From: JohnnP <jonathan.pujol12@gmail.com>
Date: Fri, 20 Jan 2017 16:50:38 +0100
Subject: [PATCH 30/50] i forgot to set values

---
 src/common/field/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/field/index.js b/src/common/field/index.js
index 731c4f414..bfc25d525 100644
--- a/src/common/field/index.js
+++ b/src/common/field/index.js
@@ -43,7 +43,7 @@ const FieldMixin = {
     /** @inheritdoc */
     componentWillReceiveProps(newProps) {
         const {value, values} = this.state;
-        const newState = { value: newProps.value };
+        const newState = { value: newProps.value, values: newProps.values };
         if (value !== newProps.value || values !== newProps.values) {
             newState.error = null;
         }

From 81821413333e8ccae982af88f53ecca4125f9d31 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Thu, 27 Apr 2017 18:42:25 +0200
Subject: [PATCH 31/50] Adding default onChange on form Handling cancel action
 Adding default store data Formatting

---
 src/common/field/index.js                     | 15 +++-
 src/common/list/index.js                      | 24 ++++--
 src/common/mixin/built-in-components.js       | 77 +++++++----------
 src/common/mixin/field-component-behaviour.js | 29 ++++++-
 src/common/mixin/store-behaviour.js           | 83 ++++++++++---------
 src/common/mixin/store-change-behaviour.js    |  4 +-
 src/components/button/__tests__/index.js      |  6 +-
 src/components/button/index.js                | 32 +++++--
 src/components/icon/index.js                  |  8 +-
 src/list/selection/index.js                   | 16 +++-
 src/list/selection/line.js                    | 34 ++++----
 src/list/selection/list.js                    | 73 ++++++++--------
 src/list/table/index.js                       | 17 +++-
 src/list/table/line.js                        | 18 ++--
 src/list/table/list.js                        | 59 +++++++------
 15 files changed, 289 insertions(+), 206 deletions(-)

diff --git a/src/common/field/index.js b/src/common/field/index.js
index bfc25d525..a0b662699 100644
--- a/src/common/field/index.js
+++ b/src/common/field/index.js
@@ -2,10 +2,10 @@ import React from 'react';
 import builder from 'focus-core/component/builder';
 import type from 'focus-core/component/types';
 // Mixins
-const valueBehaviour = require('./mixin/value-behaviour');
-const validationBehaviour = require('./mixin/validation-behaviour');
+import valueBehaviour from './mixin/value-behaviour';
+import validationBehaviour from './mixin/validation-behaviour';
 // Components
-const builtInComponents = require('./mixin/built-in-components');
+import builtInComponents from './mixin/built-in-components';
 
 /**
  * Mixin for the field helper.
@@ -78,4 +78,11 @@ const FieldMixin = {
         );
     }
 };
-module.exports = builder(FieldMixin);
+const builtComp = builder(FieldMixin);
+const {component, mixin} = builtComp;
+
+export {
+    component,
+    mixin
+}
+export default builtComp;
\ No newline at end of file
diff --git a/src/common/list/index.js b/src/common/list/index.js
index 9f776a82a..9e747610d 100644
--- a/src/common/list/index.js
+++ b/src/common/list/index.js
@@ -1,11 +1,10 @@
 
 //var SelectionList = Focus.components.list.selection.list.component;
 import builder from 'focus-core/component/builder';
-let React = require('react');
+import React from 'react';
 import type from 'focus-core/component/types';
-let assign = require('object-assign');
-let omit = require('lodash/object/omit');
-let memoryMixin = require('../../list/mixin/memory-scroll');
+import {omit} from 'lodash';
+import memoryMixin from '../../list/mixin/memory-scroll';
 
 let MemoryListMixin = {
     mixins: [memoryMixin],
@@ -16,9 +15,9 @@ let MemoryListMixin = {
 
     /** @inheritdoc */
     render: function renderFormList() {
-        var data = this.props.data || [];
-        var hasMoreData = data.length > this.state.maxElements;
-        var childProps = omit(this.props, ['lineComponent', 'data']);
+        let data = this.props.data || [];
+        let hasMoreData = data.length > this.state.maxElements;
+        let childProps = omit(this.props, ['lineComponent', 'data']);
         return (
             <this.props.listComponent
                 ref='list'
@@ -30,9 +29,16 @@ let MemoryListMixin = {
                 fetchNextPage={this.fetchNextPage}
                 reference={this.getReference()}
                 {...childProps}
-                />
+            />
         );
     }
 };
 
-module.exports = builder(MemoryListMixin);
+const builtComp = builder(MemoryListMixin);
+const {component, mixin} = builtComp;
+
+export {
+    component,
+    mixin
+}
+export default builtComp;
\ No newline at end of file
diff --git a/src/common/mixin/built-in-components.js b/src/common/mixin/built-in-components.js
index 8c1de271f..efdd4665c 100644
--- a/src/common/mixin/built-in-components.js
+++ b/src/common/mixin/built-in-components.js
@@ -1,25 +1,23 @@
 // Dependencies
 
-const React = require('react');
+import React from 'react';
 import {changeMode} from 'focus-core/application';
-const assign = require('object-assign');
-const result = require('lodash/object/result');
-const find = require('lodash/collection/find');
+import assign from 'object-assign';
+import {result, find, defaultsDeep} from 'lodash';
 // Components
 
-const Field = require('../field').component;
-const Text = require('../../components/display/text');
-const Button = require('../../components/button');
-const MemoryList = require('../list').component;
-const Table = require('../../list/table').list.component;
-const List = require('../../list/selection').list.component;
-
+import {component as Field} from '../field';
+import Text from '../../components/display/text';
+import Button from '../../components/button';
+import {component as MemoryList} from '../list';
+import {component as Table} from '../../list/table/list';
+import {component as List} from '../../list/selection/list';
 
 // Mixins
 
-const fieldComponentBehaviour = require('./field-component-behaviour');
+import fieldComponentBehaviour from './field-component-behaviour';
 
-module.exports = {
+export default {
     mixins: [fieldComponentBehaviour],
     /**
     * Create a field for the given property metadata.
@@ -32,16 +30,6 @@ module.exports = {
         const fieldProps = this._buildFieldProps(name, options, this);
         return this._renderField(fieldProps);
     },
-    autocompleteFor() {
-        throw new Error('Form\'s autocompleteFor method is deprecated, in order to use the deprecated component, please use this.deprecatedAutocompleteFor. You must migrate all the autocompleteFor to autocompleteSelectFor or autocompleteTextFor in order to follow the library evolutions.');
-    },
-    deprecatedAutocompleteFor(name, {codeResolver, searcher}, options = {}) {
-        options = assign({}, options);
-        options.codeResolver = codeResolver;
-        options.searcher = searcher;
-        const fieldProps = this._buildFieldProps(name, options, this);
-        return this._renderField(fieldProps);
-    },
     autocompleteSelectFor(name, {keyResolver, querySearcher}, options = {}) {
         options = assign({}, options);
         options.keyResolver = keyResolver;
@@ -152,11 +140,11 @@ module.exports = {
         };
         return (
             <Button
-            handleOnClick={handleOnClick}
-            icon='delete'
-            label='button.delete'
-            shape={null}
-            type='button'
+                handleOnClick={handleOnClick}
+                icon='delete'
+                label='button.delete'
+                shape={null}
+                type='button'
             />
         );
     },
@@ -173,11 +161,11 @@ module.exports = {
         };
         return (
             <Button
-            handleOnClick={handleOnClick}
-            icon='edit'
-            label='button.edit'
-            shape={null}
-            type='button'
+                handleOnClick={handleOnClick}
+                icon='edit'
+                label='button.edit'
+                shape={null}
+                type='button'
             />
         );
     },
@@ -188,12 +176,9 @@ module.exports = {
     buttonCancel() {
         const handleOnClick = () => {
             this.clearError();
-            this.setState({
-                // Change the mode.
-                isEdit: !this.state.isEdit,
-                // Read the state from the stores, it should contain the last data from the server.
-                ...this._getStateFromStores()
-            }, () => {
+            // Change the mode.
+            // Read the state from the stores, it should contain the last data from the server.
+            this.setState(defaultsDeep({isEdit: false},this._getStateFromStores(), this._buildResetState()), () => {
                 changeMode('consult', 'edit');
             });
         };
@@ -214,13 +199,13 @@ module.exports = {
         };
         return (
             <Button
-            handleOnClick={handleOnClick}
-            icon='save'
-            label='button.save'
-            shape={null}
-            type='button'
-            isLoading={isLoading}
-            processLabel='button.saving'
+                handleOnClick={handleOnClick}
+                icon='save'
+                label='button.save'
+                shape={null}
+                type='button'
+                isLoading={isLoading}
+                processLabel='button.saving'
             />
         );
     },
diff --git a/src/common/mixin/field-component-behaviour.js b/src/common/mixin/field-component-behaviour.js
index 4db86da73..70e06c2fc 100644
--- a/src/common/mixin/field-component-behaviour.js
+++ b/src/common/mixin/field-component-behaviour.js
@@ -1,5 +1,5 @@
 import assign from 'object-assign';
-import {isUndefined, isObject} from 'lodash/lang';
+import {isUndefined, isObject} from 'lodash';
 /**
 * Identity function
 * @param  {object} d - data to treat.
@@ -10,6 +10,31 @@ function identity(d) {
 }
 
 const fieldBehaviourMixin = {
+    _modifiedFields: [],
+    _defaultOnChange(fieldname, value) {
+        this.setState({
+            [fieldname]: value
+        })
+    },
+    _buildResetState() {
+        if (this.buildResetState) {
+            return this.buildResetState(this._modifiedFields);
+        }
+        return this._modifiedFields.reduce((acc, value) => {
+            acc[value] = null;
+            return acc;
+        }, {});
+    },
+    _wrappedOnChange(onChange, fieldname, value) {
+        if (this._modifiedFields.indexOf(fieldname) === -1) {
+            this._modifiedFields.push(fieldname);
+        }
+        if (onChange) {
+            onChange(value);
+        } else {
+            this._defaultOnChange(fieldname, value);
+        }
+    },
     /**
     * Build the field properties.
     * @param {string} name - property name.
@@ -45,7 +70,7 @@ const fieldBehaviourMixin = {
             error: context.state.error ? context.state.error[name] : undefined,
             locale: def.locale,
             format: def.format,
-            onChange: options.onChange ? options.onChange : (data) => this.setState({ [baseName]: data }),
+            onChange: (value) => this._wrappedOnChange(options.onChange, baseName, value),
             //Mode
             isEdit: isEdit,
             hasLabel: hasLabel,
diff --git a/src/common/mixin/store-behaviour.js b/src/common/mixin/store-behaviour.js
index 0c95ada19..17a1e38d6 100644
--- a/src/common/mixin/store-behaviour.js
+++ b/src/common/mixin/store-behaviour.js
@@ -1,8 +1,6 @@
-const capitalize = require('lodash/string/capitalize');
-const assign = require('object-assign');
-const {isObject, isArray} = require('lodash/lang');
-const keys = require('lodash/object/keys');
-const storeChangeBehaviour = require('./store-change-behaviour');
+import assign from 'object-assign';
+import {isObject, isArray, keys, capitalize, defaultsDeep} from 'lodash';
+import storeChangeBehaviour from './store-change-behaviour';
 
 const storeMixin = {
     mixins: [storeChangeBehaviour],
@@ -20,8 +18,19 @@ const storeMixin = {
                 newState[property] = storeConf.store[`get${capitalize(property)}`]();
             });
         });
+        let defaultData = {};
+        if (this.props.useDefaultStoreData && (this.definition || this.getDefaultStoreData)) {
+            if (this.getDefaultStoreData) {
+                defaultData = this.getDefaultActionData(this.definition);
+            } else {
+                defaultData = keys(this.definition).reduce((acc, key) => {
+                    acc[key] = null;
+                    return acc;
+                }, {});
+            }
+        }
         const computedState = assign(this._computeEntityFromStoresData(newState), this._getLoadingStateFromStores());
-        return computedState;
+        return defaultsDeep({}, computedState, defaultData);
     },
     /**
      * Get the error state informations from the store.
@@ -34,10 +43,10 @@ const storeMixin = {
         let newState = {};
         this.stores.map( storeConf => {
             storeConf.properties.map( property => {
-                var errorState = storeConf.store[`getError${capitalize(property)}`]();
-                for(var prop in errorState) {
-                  newState[`${property}.${prop}`] = errorState[prop];
-              }
+                let errorState = storeConf.store[`getError${capitalize(property)}`]();
+                for (let prop in errorState) {
+                    newState[`${property}.${prop}`] = errorState[prop];
+                }
             });
         });
         return newState;
@@ -51,13 +60,13 @@ const storeMixin = {
         }
         let isLoading = false;
         this.stores.forEach((storeConf) => {
-            if(!isLoading) {
+            if (!isLoading) {
                 storeConf.properties.forEach((property) => {
-                  if(!isLoading) {
-                    let propStatus = storeConf.store.getStatus(property) || {};
-                    isLoading = propStatus.isLoading;
-                }
-              });
+                    if (!isLoading) {
+                        let propStatus = storeConf.store.getStatus(property) || {};
+                        isLoading = propStatus.isLoading;
+                    }
+                });
             }
         });
     //console.info('Processing state', this.stores, 'loading', isLoading);
@@ -68,19 +77,19 @@ const storeMixin = {
    * @param {object} data -  The data ordered by store.
    * @returns {object} - The js object transformed from store data.
    */
-    _computeEntityFromStoresData: function(data) {
-        if(this.computeEntityFromStoresData) {
+    _computeEntityFromStoresData: function _computeEntityFromStoresData(data) {
+        if (this.computeEntityFromStoresData) {
             return this.computeEntityFromStoresData(data);
         }
-        var entity = {reference: {}};
-        for(var key in data) {
-            if(this.referenceNames && this.referenceNames.indexOf(key) !== -1 ) {
+        let entity = {reference: {}};
+        for (let key in data) {
+            if (this.referenceNames && this.referenceNames.indexOf(key) !== -1 ) {
                 entity.reference[key] = data[key];
-            }else {
-                var d = data[key];
-                if(isArray(d) || !isObject(d)) {
-                  d = {[key] : d};
-              }
+            } else {
+                let d = data[key];
+                if (isArray(d) || !isObject(d)) {
+                    d = {[key]: d};
+                }
                 assign(entity, d);
             }
         }
@@ -93,13 +102,13 @@ const storeMixin = {
         if (this.stores) {
             this.stores.map((storeConf) => {
                 storeConf.properties.map((property) => {
-                  if(!storeConf.store || !storeConf.store.definition || !storeConf.store.definition[property]) {
-                    console.warn(`You add a property : ${property} in your store which is not in your definition : ${keys(storeConf.store.definition)}`);
-                }
-                  storeConf.store[`add${capitalize(property)}ChangeListener`](this._onChange);
-                  storeConf.store[`add${capitalize(property)}ErrorListener`](this._onError);
-                  storeConf.store[`add${capitalize(property)}StatusListener`](this._onStatus);
-              });
+                    if (!storeConf.store || !storeConf.store.definition || !storeConf.store.definition[property]) {
+                        console.warn(`You add a property : ${property} in your store which is not in your definition : ${keys(storeConf.store.definition)}`);
+                    }
+                    storeConf.store[`add${capitalize(property)}ChangeListener`](this._onChange);
+                    storeConf.store[`add${capitalize(property)}ErrorListener`](this._onError);
+                    storeConf.store[`add${capitalize(property)}StatusListener`](this._onStatus);
+                });
             });
         }
     },
@@ -110,10 +119,10 @@ const storeMixin = {
         if (this.stores) {
             this.stores.map((storeConf) => {
                 storeConf.properties.map((property) => {
-                  storeConf.store[`remove${capitalize(property)}ChangeListener`](this._onChange);
-                  storeConf.store[`remove${capitalize(property)}ErrorListener`](this._onError);
-                  storeConf.store[`remove${capitalize(property)}StatusListener`](this._onStatus);
-              });
+                    storeConf.store[`remove${capitalize(property)}ChangeListener`](this._onChange);
+                    storeConf.store[`remove${capitalize(property)}ErrorListener`](this._onError);
+                    storeConf.store[`remove${capitalize(property)}StatusListener`](this._onStatus);
+                });
             });
         }
     },
diff --git a/src/common/mixin/store-change-behaviour.js b/src/common/mixin/store-change-behaviour.js
index 2cf1f2b2a..26dad1310 100644
--- a/src/common/mixin/store-change-behaviour.js
+++ b/src/common/mixin/store-change-behaviour.js
@@ -48,7 +48,7 @@ const changeBehaviourMixin = {
         }
         //If there is no callerId in the event, the display message does not have any sens.
         //Other component responding to the store property change does not need to react on it.
-        if(changeInfos && changeInfos.informations && changeInfos.informations.callerId && this._identifier === changeInfos.informations.callerId) {
+        if (changeInfos && changeInfos.informations && changeInfos.informations.callerId && this._identifier === changeInfos.informations.callerId) {
             return this._displayMessageOnChange(changeInfos);
         }
 
@@ -70,7 +70,7 @@ const changeBehaviourMixin = {
     _onError: function onFormErrorHandler(changeInfos) {
         this.setState(this._getLoadingStateFromStores(), () => this._handleErrors(changeInfos)); // update errors after status
     },
-    _handleErrors(){
+    _handleErrors() {
         const errorState = this._getErrorStateFromStores();
         if (this.definitionPath) {
             // In case we have a definitionPath, we might want to trigger a setError on the corresponding field
diff --git a/src/components/button/__tests__/index.js b/src/components/button/__tests__/index.js
index fe43304a8..08beb08f9 100644
--- a/src/components/button/__tests__/index.js
+++ b/src/components/button/__tests__/index.js
@@ -24,7 +24,7 @@ describe('Button Component', () => {
             describe('When we give hasRipple prop to true', () => {
                 let renderedButton;
                 before(() => {
-                    renderedButton = renderIntoDocument(<Button hasRipple={true}/>);
+                    renderedButton = renderIntoDocument(<Button hasRipple/>);
                 });
                 it('should give add the material mention in the className', () => {
                     const {hasRipple} = renderedButton.props;
@@ -44,7 +44,7 @@ describe('Button Component', () => {
                 });
             });
         });
-        describe.only('When we set a processingLabel', () => {
+        describe('When we set a processingLabel', () => {
             let renderedButton;
             describe('When isLoading props is false', () => {
                 before(() => {
@@ -61,7 +61,7 @@ describe('Button Component', () => {
             });
             describe('When isLoading props is true', () => {
                 before(() => {
-                    renderedButton = renderIntoDocument(<Button label='SAVE' processLabel='Loading' isLoading={true} />);
+                    renderedButton = renderIntoDocument(<Button label='SAVE' processLabel='Loading' isLoading />);
                 });
                 it('should render the process label', () => {
                     const buttonLabel = ReactDOM.findDOMNode(renderedButton).querySelector('[data-focus="button-label"]').innerHTML;
diff --git a/src/components/button/index.js b/src/components/button/index.js
index 5a8cca457..18bb2dd4b 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -44,7 +44,7 @@ class Button extends Component {
     */
     componentDidMount() {
         const { hasRipple } = this.props;
-        const refNode = ReactDOM.findDOMNode(this.refs['materialButton']);
+        const refNode = ReactDOM.findDOMNode(this.refs.materialButton);
         if (hasRipple) {
             componentHandler.upgradeElement(refNode, 'MaterialRipple');
         }
@@ -108,14 +108,13 @@ class Button extends Component {
             case 'material':
                 return <i className='material-icons'>{icon}</i>;
             case 'font-awesome':
-                const faCss = `fa fa-${icon}`;
-                return <i className={faCss}></i>;
+                return <i className={`fa fa-${icon}`} />;
             case 'font-custom':
-                return <span className={`icon-${icon}`}></span>;
+                return <span className={`icon-${icon}`} />;
             default:
                 return null;
         }
-    };
+    }
 
     /**
     * Render the label.
@@ -132,18 +131,35 @@ class Button extends Component {
         return null;
     }
 
+    /**
+     * Wrapper around on click, to prevent click action is spinner is showed.
+     * 
+     * @param {any} event the html event
+     * @param {any} onClick the onclick function to call
+     * 
+     * @memberOf Button
+     */
+    _wrappedOnClick(event, onClick) {
+        if (this.props.isLoading) {
+            event.preventDefault();
+            event.stopPropagation();
+        } else {
+            onClick(event);
+        }
+    }
+
     /** inheritedDoc */
     render() {
         // attribute doc : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
         // be careful the way you declare your attribute names : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button
         const {className, disabled, formNoValidate, handleOnClick, icon, id, onClick, type, label, style, hasRipple, isJs, iconLibrary, isLoading, ...rest} = this.props;
-        const otherInputProps = filterProps({ disabled, formNoValidate, onClick: handleOnClick ? handleOnClick : onClick, style, type, ...rest }); //on click for legacy. Remove handleOnClick in v2
+        const otherInputProps = filterProps({ disabled, formNoValidate, onClick: event => this._wrappedOnClick(event, handleOnClick ? handleOnClick : onClick), style, type, ...rest }); //on click for legacy. Remove handleOnClick in v2
         const renderedClassName = `${className ? className : ''} ${::this._getComponentClassName()}`.trim();
         return (
-           <button alt={this.i18n(label)} className={renderedClassName} data-focus='button-action' data-saving={isLoading} id={id} disabled={isLoading} title={this.i18n(label)} {...otherInputProps} ref='materialButton'>
+            <button alt={this.i18n(label)} className={renderedClassName} data-focus='button-action' data-saving={isLoading} id={id} disabled={isLoading} title={this.i18n(label)} {...otherInputProps} ref='materialButton'>
                 {icon && ::this._renderIcon()}
                 {::this._renderLabel()}
-                {isLoading && <div className='mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active' data-focus='double-action-button-spinner' ref='double-action-button-spinner' ></div>}
+                {isLoading && <div className='mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active' data-focus='double-action-button-spinner' ref='double-action-button-spinner' />}
             </button>
         );
     }
diff --git a/src/components/icon/index.js b/src/components/icon/index.js
index 70b9be78a..dad825314 100644
--- a/src/components/icon/index.js
+++ b/src/components/icon/index.js
@@ -7,13 +7,13 @@ function Icon({name, library, onClick, style}) {
             return <i className='material-icons' onClick={onClick} {...filterProps(style)}>{name}</i>;
         case 'font-awesome':
             const faCss = `fa fa-${name}`;
-            return <i className={faCss} onClick={onClick} {...filterProps(style)}></i>;
+            return <i className={faCss} onClick={onClick} {...filterProps(style)} />;
         case 'font-custom':
-            return <span className={`icon-${name}`}></span>;
+            return <span className={`icon-${name}`} {...filterProps(style)}/>;
         default:
             return null;
     }
-}
+} 
 
 Icon.displayName = 'Icon';
 Icon.defaultProps = {
@@ -21,7 +21,7 @@ Icon.defaultProps = {
     library: 'material'
 };
 Icon.propTypes = {
-    handleOnClick: PropTypes.func,
+    onClick: PropTypes.func,
     library: PropTypes.oneOf(['material', 'font-awesome', 'font-custom']),
     name: PropTypes.string
 };
diff --git a/src/list/selection/index.js b/src/list/selection/index.js
index b4c80ef9a..8a3d71e92 100644
--- a/src/list/selection/index.js
+++ b/src/list/selection/index.js
@@ -1,4 +1,12 @@
-module.exports = {
-    line: require('./line'),
-    list: require('./list')
-};
+import line from './line'
+import list from './list'
+
+export {
+    line,
+    list
+}
+
+export default {
+    line,
+    list
+}
\ No newline at end of file
diff --git a/src/list/selection/line.js b/src/list/selection/line.js
index 81c863c14..e14884ed0 100644
--- a/src/list/selection/line.js
+++ b/src/list/selection/line.js
@@ -1,20 +1,19 @@
 // Dependencies
 
 import types from 'focus-core/component/types';
-const React = require('react');
-import isEqual from 'lodash/lang/isEqual';
+import React from 'react';
+import isEqual from 'lodash';
 
 // Components
 
-const ContextualActions = require('../action-contextual').component;
-const {Checkbox} = require('../../components/input');
+import {component as ContextualActions} from '../action-contextual';
+import {Checkbox} from '../../components/input';
 
 // Mixins
 
-const translationMixin = require('../../common/i18n').mixin;
-const referenceMixin = require('../../common/mixin/reference-property');
-const definitionMixin = require('../../common/mixin/definition');
-const builtInComponentsMixin = require('../mixin/built-in-components');
+import referenceMixin from '../../common/mixin/reference-property';
+import definitionMixin from '../../common/mixin/definition';
+import builtInComponentsMixin from '../mixin/built-in-components';
 
 const lineMixin = {
     /**
@@ -25,7 +24,7 @@ const lineMixin = {
     /**
     * Mixin dependancies.
     */
-    mixins: [translationMixin, definitionMixin, referenceMixin, builtInComponentsMixin],
+    mixins: [ definitionMixin, referenceMixin, builtInComponentsMixin],
 
     /**
      * Get default props
@@ -58,7 +57,7 @@ const lineMixin = {
     getInitialState() {
         const {data} = this.props;
         let {isSelected} = this.props;
-        if(this.selectedInitializer) { // this allows to initiate a data specific value for isSelected
+        if (this.selectedInitializer) { // this allows to initiate a data specific value for isSelected
             isSelected = this.selectedInitializer(data);
         }
         return {
@@ -72,7 +71,7 @@ const lineMixin = {
     componentWillMount() {
         const {data, isSelection} = this.props;
         this._isSelectionnable = isSelection;
-        if(this.selectionnableInitializer) {
+        if (this.selectionnableInitializer) {
             this._isSelectionnable = this.selectionnableInitializer(data);
         }
     },
@@ -108,7 +107,7 @@ const lineMixin = {
         const isSelected = !this.state.isSelected;
         const {data, onSelection} = this.props;
         this.setState({isSelected}, () => {
-            if(onSelection) {
+            if (onSelection) {
                 onSelection(data, isSelected);
             }
         });
@@ -119,7 +118,7 @@ const lineMixin = {
     */
     _handleLineClick() {
         const {data, onLineClick} = this.props;
-        if(onLineClick) {
+        if (onLineClick) {
             onLineClick(data);
         }
     },
@@ -180,7 +179,7 @@ const lineMixin = {
     *  @return {XML} the rendered line
     */
     render() {
-        if(this.renderLine) {
+        if (this.renderLine) {
             return this.renderLine();
         } else {
             return (
@@ -196,4 +195,9 @@ const lineMixin = {
     }
 };
 
-module.exports = {mixin: lineMixin};
+export default {
+    mixin: lineMixin
+}
+export {
+    lineMixin as mixin 
+}
diff --git a/src/list/selection/list.js b/src/list/selection/list.js
index 4a11ce8d4..8da416934 100644
--- a/src/list/selection/list.js
+++ b/src/list/selection/list.js
@@ -1,22 +1,18 @@
 // Dependencies
-const React = require('react');
-import {checkIsNotNull} from 'focus-core/util/object';
+import React from 'react';
 import builder from 'focus-core/component/builder';
 import types from 'focus-core/component/types';
-const find = require('lodash/collection/find');
-const {omit} = require('lodash/object');
-const {isArray} = require('lodash/lang');
-import {clone} from 'lodash/lang';
-import {reduce} from 'lodash/collection';
+
+import { reduce, isArray, find } from 'lodash';
 
 //Add a ref to the props if the component is not pure add nothing in the other case.
-import {addRefToPropsIfNotPure, LINE} from '../../utils/is-react-class-component';
+import { addRefToPropsIfNotPure, LINE } from '../../utils/is-react-class-component';
 
+import {translate} from 'focus-core/translation';
 // Mixins
 
-const translationMixin = require('../../common/i18n').mixin;
-const infiniteScrollMixin = require('../mixin/infinite-scroll').mixin;
-const referenceMixin = require('../../common/mixin/reference-property');
+import {mixin as infiniteScrollMixin} from '../mixin/infinite-scroll';
+import referenceMixin from '../../common/mixin/reference-property';
 
 // Components
 
@@ -31,7 +27,7 @@ const listMixin = {
     /**
     * Mixin dependancies.
     */
-    mixins: [translationMixin, infiniteScrollMixin, referenceMixin],
+    mixins: [infiniteScrollMixin, referenceMixin],
 
     /**
     * Default properties for the list.
@@ -75,14 +71,14 @@ const listMixin = {
     },
 
     componentWillReceiveProps({selectionStatus, data}) {
-        switch(selectionStatus) {
+        switch (selectionStatus) {
             case 'none':
-                this.setState({selectedItems: new Map()});
+                this.setState({ selectedItems: new Map() });
                 break;
             case 'selected':
                 let selectedItems = new Map();
-                data.forEach(item => {selectedItems.set(JSON.stringify(item), item)});
-                this.setState({selectedItems});
+                data.forEach(item => { selectedItems.set(JSON.stringify(item), item) });
+                this.setState({ selectedItems });
                 break;
         }
     },
@@ -121,7 +117,7 @@ const listMixin = {
         newSelectedItems.set(JSON.stringify(data), isSelected);
 
 
-        this.setState({selectedItems: newSelectedItems}, () => {
+        this.setState({ selectedItems: newSelectedItems }, () => {
             if (this.props.onSelection) {
                 this.props.onSelection(data, isSelected);
             }
@@ -135,7 +131,7 @@ const listMixin = {
     */
     _renderLines() {
         const {data, LineComponent: Line, selectionData, idField, selectionStatus, ...otherProps} = this.props;
-        if(selectionData && selectionData.length > 0) {
+        if (selectionData && selectionData.length > 0) {
             console.warn('[DEPRECATED] You are using \'selectionData\' prop which is now DEPRECATED. Please use \'selectionnableInitializer\' on line component.');
         }
         // LEGACY CODE
@@ -145,18 +141,18 @@ const listMixin = {
         }
         const FinalLineComponent = customLineComponent || Line;
         // END OF LEGACY CODE
-        if(!isArray(data)) {
+        if (!isArray(data)) {
             console.error(
                 'List: Lines: it seems data is not an array, please check the value in your store, it could also be related to your action in case of a load (have a look to shouldDumpStoreOnActionCall option).'
             );
         }
         return data.map((line, idx) => {
             let isSelected;
-            const selection = find(selectionData, {[idField]: line[idField]});
+            const selection = find(selectionData, { [idField]: line[idField] });
             if (selection) {
                 isSelected = selection.isSelected;
             } else {
-                switch(selectionStatus) {
+                switch (selectionStatus) {
                     case 'none':
                         isSelected = false;
                         break;
@@ -172,13 +168,13 @@ const listMixin = {
             }
             const listFinalProps = addRefToPropsIfNotPure(
                 FinalLineComponent, {
-                ...otherProps,
-                data: line,
-                isSelected,
-                key: line[idField] || idx,
-                onSelection: this._handleLineSelection,
-                reference: this._getReference()
-            }, `${LINE}${idx}`);
+                    ...otherProps,
+                    data: line,
+                    isSelected,
+                    key: line[idField] || idx,
+                    onSelection: this._handleLineSelection,
+                    reference: this._getReference()
+                }, `${LINE}${idx}`);
             return <FinalLineComponent {...listFinalProps} />;
         });
     },
@@ -188,12 +184,12 @@ const listMixin = {
     */
     _renderLoading() {
         const {isLoading, loader} = this.props;
-        if(isLoading) {
-            if(loader) {
+        if (isLoading) {
+            if (loader) {
                 return loader();
             }
             return (
-                <li className='sl-loading'>{this.i18n('list.loading')} ...</li>
+                <li className='sl-loading'>{translate('list.loading')} ...</li>
             );
         }
     },
@@ -203,8 +199,8 @@ const listMixin = {
     */
     _renderManualFetch() {
         const {isManualFetch, hasMoreData} = this.props;
-        if(isManualFetch && hasMoreData) {
-            const style = {className: 'primary'};
+        if (isManualFetch && hasMoreData) {
+            const style = { className: 'primary' };
             return (
                 <li className='sl-button'>
                     <Button
@@ -212,7 +208,7 @@ const listMixin = {
                         label='list.button.showMore'
                         style={style}
                         type='button'
-                        />
+                    />
                 </li>
             );
         }
@@ -238,4 +234,11 @@ const listMixin = {
     }
 };
 
-module.exports = builder(listMixin);
+const builtComp = builder(listMixin);
+const {component, mixin} = builtComp;
+
+export {
+    component,
+    mixin
+}
+export default builtComp;
\ No newline at end of file
diff --git a/src/list/table/index.js b/src/list/table/index.js
index b4c80ef9a..11f95750d 100644
--- a/src/list/table/index.js
+++ b/src/list/table/index.js
@@ -1,4 +1,13 @@
-module.exports = {
-    line: require('./line'),
-    list: require('./list')
-};
+import line from './line'
+import list from './list'
+
+export {
+    line,
+    list
+}
+export default {
+    line, 
+    list
+}
+
+
diff --git a/src/list/table/line.js b/src/list/table/line.js
index 0acc725e8..6a9ec4d95 100644
--- a/src/list/table/line.js
+++ b/src/list/table/line.js
@@ -4,14 +4,13 @@ import type from 'focus-core/component/types';
 
 // Mixins
 
-let translationMixin = require('../../common/i18n').mixin;
-let referenceMixin = require('../../common/mixin/reference-property');
-let definitionMixin = require('../../common/mixin/definition');
-let builtInComponentsMixin = require('../mixin/built-in-components');
+import referenceMixin from '../../common/mixin/reference-property';
+import definitionMixin from '../../common/mixin/definition';
+import builtInComponentsMixin from '../mixin/built-in-components';
 
 // Components
 
-let ContextualActions = require('../action-contextual').component;
+import {component as ContextualActions} from '../action-contextual';
 
 let lineMixin = {
     /**
@@ -22,7 +21,7 @@ let lineMixin = {
     /**
      * Mixin dependancies.
      */
-    mixins: [translationMixin, definitionMixin, referenceMixin, builtInComponentsMixin],
+    mixins: [definitionMixin, referenceMixin, builtInComponentsMixin],
 
     /**@inheritDoc**/
     getDefaultProps() {
@@ -67,4 +66,9 @@ let lineMixin = {
     }
 };
 
-module.exports = {mixin: lineMixin};
+export {
+    lineMixin as mixin
+}
+export default {
+    mixin: lineMixin
+}
\ No newline at end of file
diff --git a/src/list/table/list.js b/src/list/table/list.js
index 35d414ca9..0df2bedf5 100644
--- a/src/list/table/list.js
+++ b/src/list/table/list.js
@@ -2,11 +2,12 @@
 
 import builder from 'focus-core/component/builder';
 import types from 'focus-core/component/types';
-const React = require('react');
-const {omit, keys} = require('lodash/object');
-const {reduce} = require('lodash/collection');
+import React from 'react';
+import { keys, reduce } from 'lodash';
+
+import {translate} from 'focus-core/translation';
 //Add a ref to the props if the component is not pure add nothing in the other case.
-import {addRefToPropsIfNotPure, LINE} from '../../utils/is-react-class-component';
+import { addRefToPropsIfNotPure, LINE } from '../../utils/is-react-class-component';
 
 // Table class.
 const TABLE_CSS_CLASS = 'mdl-data-table mdl-js-data-table mdl-shadow--2dp ';
@@ -14,10 +15,9 @@ const TABLE_CELL_CLASS = 'mdl-data-table__cell--non-numeric';
 
 // Mixins
 
-const infiniteScrollMixin = require('../mixin/infinite-scroll').mixin;
-const translationMixin = require('../../common/i18n').mixin;
-const referenceMixin = require('../../common/mixin/reference-property');
-const mdlBehaviour = require('../../common/mixin/mdl-behaviour');
+import {mixin as infiniteScrollMixin} from '../mixin/infinite-scroll';
+import referenceMixin from '../../common/mixin/reference-property';
+import mdlBehaviour from '../../common/mixin/mdl-behaviour';
 
 // Components
 
@@ -32,7 +32,7 @@ const tableMixin = {
     /**
      * Mixin dependancies.
      */
-    mixins: [translationMixin, infiniteScrollMixin, referenceMixin, mdlBehaviour],
+    mixins: [infiniteScrollMixin, referenceMixin, mdlBehaviour],
     /** inheriteddoc */
     getDefaultProps() {
         return {
@@ -86,13 +86,13 @@ const tableMixin = {
      */
     _renderColumnHeader(accumulator, colProperties, name) {
         let sort;
-        if(!this.props.isEdit && !colProperties.noSort ) {
+        if (!this.props.isEdit && !colProperties.noSort) {
             const order = colProperties.sort ? colProperties.sort : 'asc';
             const iconName = 'asc' === order ? 'arrow_drop_up' : 'arrow_drop_down';
             const icon = <i className='material-icons'>{iconName}</i>;
-            sort = <a className='sort' data-bypass data-name={name} href='#' onClick={this._sortColumnAction(name, ('asc' === order ? 'desc' : 'asc' ))}>{icon}</a>;
+            sort = <a className='sort' data-bypass data-name={name} href='#' onClick={this._sortColumnAction(name, ('asc' === order ? 'desc' : 'asc'))}>{icon}</a>;
         }
-        accumulator.push(<th className={TABLE_CELL_CLASS} key={colProperties.label}>{this.i18n(colProperties.label)}{sort}</th>);
+        accumulator.push(<th className={TABLE_CELL_CLASS} key={colProperties.label}>{translate(colProperties.label)}{sort}</th>);
         return accumulator;
     },
     /**
@@ -108,13 +108,13 @@ const tableMixin = {
                     const {data, ...otherLineProps} = this.props;
                     const tableBodyFinalProps = addRefToPropsIfNotPure(
                         TableLineComponent, {
-                        className: TABLE_CELL_CLASS,
-                        data: line,
-                        key: line[idField],
-                        reference,
-                        ...otherLineProps
-                    }, `${LINE}${idx}`);
-                    return <TableLineComponent {...tableBodyFinalProps}/>;
+                            className: TABLE_CELL_CLASS,
+                            data: line,
+                            key: line[idField],
+                            reference,
+                            ...otherLineProps
+                        }, `${LINE}${idx}`);
+                    return <TableLineComponent {...tableBodyFinalProps} />;
                 })}
             </tbody>
         );
@@ -125,14 +125,14 @@ const tableMixin = {
      */
     _renderLoading() {
         const {isLoading, loader} = this.props;
-        if(isLoading) {
-            if(loader) {
+        if (isLoading) {
+            if (loader) {
                 return loader();
             }
             return (
                 <tbody className={'table-loading'}>
                     <tr>
-                        <td>{`${this.i18n('list.loading')}`}</td>
+                        <td>{`${translate('list.loading')}`}</td>
                     </tr>
                 </tbody>
             );
@@ -144,12 +144,12 @@ const tableMixin = {
      */
     _renderManualFetch() {
         const {isManualFetch, hasMoreData} = this.props;
-        if(isManualFetch && hasMoreData) {
+        if (isManualFetch && hasMoreData) {
             return (
-                <tfoot className="table-manual-fetch">
+                <tfoot className='table-manual-fetch'>
                     <tr>
                         <td colSpan={keys(this.props.columns).length}>
-                            <Button handleOnClick={this.fetchNextPage} label="list.button.showMore" type="button" />
+                            <Button handleOnClick={this.fetchNextPage} label='list.button.showMore' type='button' />
                         </td>
                     </tr>
                 </tfoot>
@@ -175,4 +175,11 @@ const tableMixin = {
 
 };
 
-module.exports = builder(tableMixin);
+const builtComp = builder(tableMixin);
+const {component, mixin} = builtComp;
+
+export {
+    component,
+    mixin
+}
+export default builtComp;
\ No newline at end of file

From eedf3fc823e7980e596ce11bfa2a9a1ec78b84ed Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 5 May 2017 18:25:23 +0200
Subject: [PATCH 32/50] Making scrollspy safer

---
 src/components/scrollspy-container/index.js | 38 ++++++++++-----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/scrollspy-container/index.js b/src/components/scrollspy-container/index.js
index 6e97a032a..5ade5f0a4 100644
--- a/src/components/scrollspy-container/index.js
+++ b/src/components/scrollspy-container/index.js
@@ -6,11 +6,7 @@ import Scroll from '../../behaviours/scroll';
 import Grid from '../grid';
 import Column from '../column';
 
-import debounce from 'lodash/function/debounce';
-import filter from 'lodash/collection/filter';
-import first from 'lodash/array/first';
-import last from 'lodash/array/last';
-import xor from 'lodash/array/xor';
+import { debounce, filter, first, last, xor } from 'lodash';
 
 const BackToTopComponent = BackToTop;
 
@@ -65,7 +61,7 @@ class ScrollspyContainer extends Component {
     * Refresh screen X times.
     * @param  {number} time number of execution
     */
-    _executeRefreshMenu = time => {
+    _executeRefreshMenu = (time) => {
         this._timeouts = [];
         for (let i = 0; i < time; i++) {
             this._timeouts.push(setTimeout(this._refreshMenu.bind(this), i * 1000));
@@ -81,7 +77,9 @@ class ScrollspyContainer extends Component {
     * @private
     */
     _refreshMenu = () => {
-        if (!this.props.hasMenu) { return; }
+        if (!this.props.hasMenu) {
+            return;
+        }
         const { stickyMenu } = this.refs;
         const { clickedId } = this.state;
         const menus = this._buildMenuList(); //build the menu list
@@ -92,9 +90,11 @@ class ScrollspyContainer extends Component {
         if (clickedId !== undefined) {
             const selector = `[data-spy='${clickedId}']`;
             const node = document.querySelector(selector);
-            const nodePosition = this.scrollPosition(node);
-            const positionTop = this._getElementRealPosition(nodePosition.top);
-            isAtClickedItem = this.scrollPosition().top === positionTop;
+            if (node) {
+                const nodePosition = this.scrollPosition(node);
+                const positionTop = this._getElementRealPosition(nodePosition.top);
+                isAtClickedItem = this.scrollPosition().top === positionTop;
+            }
         }
         this.setState({
             menuList: menus,
@@ -114,13 +114,13 @@ class ScrollspyContainer extends Component {
             return [];
         }
         const detectionOffset = window.screen.height / 5;
-        let currentScrollPosition = { top: this.scrollPosition().top, left: this.scrollPosition().left };
-        let isAtPageBottom = this.isAtPageBottom();
+        const currentScrollPosition = { top: this.scrollPosition().top, left: this.scrollPosition().left };
+        const isAtPageBottom = this.isAtPageBottom();
 
         //get the menu list (without blocks in popin)
         const thisComponentNode = ReactDOM.findDOMNode(this);
         const allDataSpy = thisComponentNode.querySelectorAll('[data-spy]');
-        const popinDataSpy = thisComponentNode.querySelectorAll(`[data-focus='popin-window'] [data-spy]`);
+        const popinDataSpy = thisComponentNode.querySelectorAll('[data-focus=\'popin-window\'] [data-spy]');
         const selectionList = xor(allDataSpy, popinDataSpy);
 
         if (selectionList.length === 0) {
@@ -132,7 +132,7 @@ class ScrollspyContainer extends Component {
                 nodeId: selection.getAttribute('data-spy'),
                 selection
             };
-        }).filter(({ title }) => title).map(({ title, nodeId, selection }, index) => {
+        }).filter(({ title, nodeId, selection }) => title && nodeId && selection).map(({ title, nodeId, selection }, index) => {
             return {
                 index,
                 label: title.innerHTML,
@@ -143,7 +143,7 @@ class ScrollspyContainer extends Component {
             };
         });
 
-        const nextTitles = filter(menuList, n => (currentScrollPosition.top + detectionOffset < this._getElementRealPosition(n.scrollTop)));
+        const nextTitles = filter(menuList, (n) => currentScrollPosition.top + detectionOffset < this._getElementRealPosition(n.scrollTop));
 
         //Calculate current node
         //by default, first node is indexed
@@ -159,9 +159,9 @@ class ScrollspyContainer extends Component {
             //means that the position is the last title
             currentIndex = last(menuList).index;
         }
-        let clickedId = this.state.clickedId;
+        const clickedId = this.state.clickedId;
         if (isAtPageBottom && undefined !== clickedId) {
-            menuList = menuList.map(item => {
+            menuList = menuList.map((item) => {
                 if (item.nodeId === clickedId) {
                     item.isActive = true;
                 }
@@ -225,7 +225,7 @@ class ScrollspyContainer extends Component {
                 this._refreshMenu();
                 this._onMenuItemClick(menuId);
             });
-        }
+        };
     }
 
     /**
@@ -266,4 +266,4 @@ ScrollspyContainer.displayName = 'ScrollspyContainer';
 ScrollspyContainer.defaultProps = defaultProps;
 ScrollspyContainer.propTypes = propTypes;
 
-export default ScrollspyContainer;
+export default ScrollspyContainer;
\ No newline at end of file

From 912b3c59373e2d6b0fdf04371b821a93b5030476 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Tue, 9 May 2017 11:19:55 +0200
Subject: [PATCH 33/50] Correcting wrong behaviours

---
 src/components/input/checkbox/index.js      | 10 ++++++++--
 src/components/input/checkbox/with-error.js | 17 +++++++++++++++--
 src/components/input/text/index.js          |  5 ++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/input/checkbox/index.js b/src/components/input/checkbox/index.js
index 9baa52022..f5dba5fe5 100644
--- a/src/components/input/checkbox/index.js
+++ b/src/components/input/checkbox/index.js
@@ -21,6 +21,11 @@ const displayName = 'InputCheckBox';
 @Translation
 @Material('mdlHolder')
 class InputCheckBox extends Component {
+    constructor(props) {
+        super(props);
+        this.handleOnChange = this.handleOnChange.bind(this);
+    } 
+
     getValue = () => {
         const domElement = ReactDOM.findDOMNode(this.refs.checkbox);
         return domElement.checked;
@@ -46,12 +51,13 @@ class InputCheckBox extends Component {
         const {label, value, disabled} = this.props;
 
         validInputProps.onChange = this.handleOnChange;
-        const inputProps = {...validInputProps};
+        const inputProps = {...validInputProps, type: 'checkbox', disabled, checked: value, className: 'mdl-checkbox__input'};
+        delete inputProps.value;
 
         return (
             <div data-focus='input-checkbox-container'>
                 <label className={'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect'} data-focus='input-checkbox' ref='mdlHolder'>
-                    <input checked={value} className='mdl-checkbox__input' disabled={disabled} ref='checkbox' type='checkbox' {...inputProps}/>
+                    <input ref='checkbox' {...inputProps}/>
                     {label && <span className='mdl-checkbox__label'>{this.i18n(label)}</span>}
                 </label>
             </div>
diff --git a/src/components/input/checkbox/with-error.js b/src/components/input/checkbox/with-error.js
index 19e80968c..beb571810 100644
--- a/src/components/input/checkbox/with-error.js
+++ b/src/components/input/checkbox/with-error.js
@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Translation from '../../../behaviours/translation';
 import Material from '../../../behaviours/material';
+import filterProps from '../../../utils/filter-html-attributes';
 
 const propTypes = {
     label: PropTypes.string,
@@ -17,6 +18,11 @@ const defaultProps = {
 @Translation
 @Material('mdlHolder')
 class InputCheckBoxWithError extends Component {
+    constructor(props) {
+        super(props);
+        this.handleOnChange = this.handleOnChange.bind(this);
+    } 
+        
     getValue = () => {
         const domElement = ReactDOM.findDOMNode(this.refs.checkbox);
         return domElement.checked;
@@ -37,11 +43,18 @@ class InputCheckBoxWithError extends Component {
     }
 
     render() {
-        const {label, value, error} = this.props;
+        const validInputProps = filterProps(this.props);
+
+        const {label, value, disabled, error} = this.props;
+
+        validInputProps.onChange = this.handleOnChange;
+        const inputProps = {...validInputProps, type: 'checkbox', disabled, checked: value, className: 'mdl-checkbox__input'};
+        delete inputProps.value;
+
         return (
             <div data-error={!!error} data-focus='input-checkbox-with-error-container'>
                 <label className={'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect'} data-focus='input-checkbox' ref='mdlHolder'>
-                    <input checked={value} className='mdl-checkbox__input' onChange={::this.handleOnChange} ref='checkbox' type='checkbox'/>
+                    <input ref='checkbox' {...inputProps}/>
                     {label && <span className='mdl-checkbox__label'>{this.i18n(label)}</span>}
                     {error && <span className='input-checkbox__error'>{this.i18n(error)}</span>}
                 </label>
diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index fb85c178b..f169ad49e 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -76,7 +76,10 @@ class InputText extends Component {
 
         validInputProps.value = this.props.formatter(valueToFormat, MODE);
         validInputProps.onChange = this._handleInputChange;
-
+        // To prevent regression
+        if (validInputProps.name) {
+            validInputProps.id = validInputProps.name;
+        }
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
 
         const inputProps = {...validInputProps, pattern};

From 986eaf5cc21535d16bdbe0a5cf6ce7d1734cb7bc Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Tue, 9 May 2017 12:12:46 +0200
Subject: [PATCH 34/50] Correcting problem with isLoading undefined (due to
 reference store)

---
 src/common/mixin/store-behaviour.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/mixin/store-behaviour.js b/src/common/mixin/store-behaviour.js
index 17a1e38d6..97ce6a82a 100644
--- a/src/common/mixin/store-behaviour.js
+++ b/src/common/mixin/store-behaviour.js
@@ -64,7 +64,7 @@ const storeMixin = {
                 storeConf.properties.forEach((property) => {
                     if (!isLoading) {
                         let propStatus = storeConf.store.getStatus(property) || {};
-                        isLoading = propStatus.isLoading;
+                        isLoading = propStatus.isLoading || false;
                     }
                 });
             }

From 7e56fa88bb45a3551d944e81ebb8ef3e1c64be1a Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Tue, 16 May 2017 13:05:46 +0200
Subject: [PATCH 35/50] Using wrong props on updateState

---
 src/behaviours/store/connect.js | 38 ++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/behaviours/store/connect.js b/src/behaviours/store/connect.js
index 25d63539c..52736b63b 100644
--- a/src/behaviours/store/connect.js
+++ b/src/behaviours/store/connect.js
@@ -1,4 +1,4 @@
-import {isArray, isFunction, isObject} from 'lodash/lang';
+import {isArray, isFunction} from 'lodash/lang';
 import {capitalize} from 'lodash/string'
 import {keys} from 'lodash/object';
 import React, {Component} from 'react';
@@ -8,14 +8,14 @@ import React, {Component} from 'react';
 // - Provide a function to read state from your store
 export default function connectToStores(storesConfiguration, getState) {
     // Validate the stores object
-    if(!isArray(storesConfiguration)) {
+    if (!isArray(storesConfiguration)) {
         throw new Error('connectToStores: you need to provide an array of store config.');
     }
 
     // Validate .
-    if(!isFunction(getState)) {
+    if (!isFunction(getState)) {
         throw new Error('connectToStores: you need to provide function to read state from store.');
-    }
+    } 
     // Return a wrapper function around the component
     return function connectComponent(DecoratedComponent) {
 
@@ -38,7 +38,7 @@ export default function connectToStores(storesConfiguration, getState) {
                 storesConfiguration.forEach(storeConf => {
                     const {properties, store} = storeConf;
                     properties.forEach((property) => {
-                        if(!store || !store.definition || !store.definition[property]) {
+                        if (!store || !store.definition || !store.definition[property]) {
                             console.warn(`
                                 StoreConnector ${displayName}:
                                     You add a property : ${property} in your store configuration which is not in your definition : ${keys(store.definition)}
@@ -53,36 +53,36 @@ export default function connectToStores(storesConfiguration, getState) {
 
             // When a component will receive a new props.
             componentWillReceiveProps(nextProps) {
-				this.updateState(nextProps);
+                this.updateState(nextProps);
             }
 
             // Component unmount.
             componentWillUnmount() {
-   				this._isMounted = false;
+                this._isMounted = false;
                 storesConfiguration.forEach(storeConf => {
                     const {properties, store} = storeConf;
                     properties.forEach((property) => {
                         const capitalizedProperty = capitalize(property);
-                        storeConf.store[`remove${capitalizedProperty}ChangeListener`](this.handleStoresChanged);
-                        storeConf.store[`remove${capitalizedProperty}ErrorListener`](this.handleStoresChanged);
+                        store[`remove${capitalizedProperty}ChangeListener`](this.handleStoresChanged);
+                        store[`remove${capitalizedProperty}ErrorListener`](this.handleStoresChanged);
                     });
                 });
             }
 
-			componentDidMount(){
-				this._isMounted = true;
-				this.updateState(this.props);
-			}
+            componentDidMount() {
+                this._isMounted = true;
+                this.updateState(this.props);
+            }
 
-			updateState(props){
-				if(this._isMounted){
-					this.setState(getState(this.props));
-				}
-			}
+            updateState(props) { 
+                if (this._isMounted) {
+                    this.setState(getState(props));
+                }
+            }
 
             //Handle the store changes
             handleStoresChanged = () => {
-				this.updateState(this.props);
+                this.updateState(this.props);
             };
 
             // Render the component with only props, some from the real props some from the state

From 2727b4e9280b9a2b21f1be1bf7b845af05a3f601 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Wed, 17 May 2017 11:03:06 +0200
Subject: [PATCH 36/50] Correcting regression : this.i18n was no more available

---
 src/list/selection/line.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/list/selection/line.js b/src/list/selection/line.js
index e14884ed0..b81739eba 100644
--- a/src/list/selection/line.js
+++ b/src/list/selection/line.js
@@ -14,6 +14,7 @@ import {Checkbox} from '../../components/input';
 import referenceMixin from '../../common/mixin/reference-property';
 import definitionMixin from '../../common/mixin/definition';
 import builtInComponentsMixin from '../mixin/built-in-components';
+import {mixin as translationMixin} from '../../common/i18n';
 
 const lineMixin = {
     /**
@@ -24,7 +25,7 @@ const lineMixin = {
     /**
     * Mixin dependancies.
     */
-    mixins: [ definitionMixin, referenceMixin, builtInComponentsMixin],
+    mixins: [ translationMixin, definitionMixin, referenceMixin, builtInComponentsMixin],
 
     /**
      * Get default props

From e850d1875d3250860ca8f4c42d99fe3e897e00f7 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Thu, 18 May 2017 11:45:14 +0200
Subject: [PATCH 37/50] Fixing placeholder : should be rerender (hidden) when
 there is a value

---
 src/behaviours/material/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/behaviours/material/index.js b/src/behaviours/material/index.js
index 07a956661..5c3856b8f 100644
--- a/src/behaviours/material/index.js
+++ b/src/behaviours/material/index.js
@@ -23,9 +23,9 @@ const Material = (ref, jsClass, watchedProp) => Component => class MaterialCompo
     }
 
     componentWillReceiveProps(nextProps) {
-        watchedProp = watchedProp || 'error';
-        const newWatchedProp = nextProps[watchedProp];
-        if (newWatchedProp !== this.props[watchedProp]) {
+        const propName = watchedProp || 'error';
+        const newWatchedProp = nextProps[propName];
+        if (newWatchedProp !== this.props[propName] || ((this.props.placeholder || nextProps.placeholder) && this.props.value !== nextProps.value)) {
             const refNode = ReactDOM.findDOMNode(this.refs[ref]);
             componentHandler.upgradeElement(refNode, jsClass);
         }

From f767d51433e84f510694f705c19dfece66811ce8 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Thu, 18 May 2017 12:28:27 +0200
Subject: [PATCH 38/50] Fixing translation

---
 src/components/input/text/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/input/text/index.js b/src/components/input/text/index.js
index f169ad49e..a67f6ab3e 100644
--- a/src/components/input/text/index.js
+++ b/src/components/input/text/index.js
@@ -80,6 +80,9 @@ class InputText extends Component {
         if (validInputProps.name) {
             validInputProps.id = validInputProps.name;
         }
+        if (validInputProps.placeholder) {
+            validInputProps.placeholder = this.i18n(validInputProps.placeholder);
+        }
         const pattern = error ? 'hasError' : null; //add pattern to overide mdl error style when displaying an focus error.
 
         const inputProps = {...validInputProps, pattern};

From 2c011701f012418084077c4c9062128f444377ae Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Mon, 22 May 2017 14:47:15 +0200
Subject: [PATCH 39/50] Fixing validation for empty string (should fail on
 required, not on regex validation for example)

---
 src/common/field/mixin/validation-behaviour.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/common/field/mixin/validation-behaviour.js b/src/common/field/mixin/validation-behaviour.js
index 87188c47e..b92caf8fa 100644
--- a/src/common/field/mixin/validation-behaviour.js
+++ b/src/common/field/mixin/validation-behaviour.js
@@ -1,7 +1,9 @@
 
-let i18nMixin = require('../../i18n').mixin;
 import validate from 'focus-core/definition/validator/validate';
-let {isNull, isUndefined, isFunction} = require('lodash/lang');
+import {isNull, isUndefined, isFunction, isEmpty} from 'lodash/lang';
+
+import {mixin as i18nMixin} from '../../i18n';
+
 let validationMixin ={
     mixins: [i18nMixin],
     /** @inheritdoc */
@@ -17,7 +19,7 @@ let validationMixin ={
     * @return {true | string} - true if the validation is ok and a message if it is not the case.
     */
     _computeValidationStatus(validationStatus) {
-        if(validationStatus.isValid) {
+        if (validationStatus.isValid) {
             return true;
         }
         return validationStatus.errors.join(', ');
@@ -30,18 +32,18 @@ let validationMixin ={
         const shouldComponentHandleValidation = this.refs && this.refs.input && isFunction(this.refs.input.validate);
         let value = this.getValue();
         let {isRequired, validator, label} = this.props;
-        if (isRequired && (undefined === value || null === value)) {
+        if (isRequired && (isUndefined(value) || isNull(null) || isEmpty(value))) {
             return this.i18n('field.required', {name: this.i18n(label)});
         }
         //The validation is performed only when the field has a value, otherwise, only the required validation is performed.
-        if (validator && !isUndefined(value) && !isNull(value)) {
+        if (validator && !isUndefined(value) && !isNull(value) && !isEmpty(value)) {
             let validStat = this._computeValidationStatus(
                 validate(
                     {value: value, name: this.i18n(label)},
                     validator
                 )
             );
-            if(true !== validStat) {
+            if (true !== validStat) {
                 validStat = this.i18n(validStat);
             }
             return validStat;
@@ -58,7 +60,7 @@ let validationMixin ={
     */
     validate() {
         const isValid = this.validateInput();
-        if(true !== isValid) {
+        if (true !== isValid) {
             this.setError(isValid);
             return isValid;
         }

From cefb35be1d215479bd508666f75f482c78953846 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Mon, 22 May 2017 19:15:02 +0200
Subject: [PATCH 40/50] Correction typo

---
 src/common/field/mixin/validation-behaviour.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/field/mixin/validation-behaviour.js b/src/common/field/mixin/validation-behaviour.js
index b92caf8fa..eb415fc0a 100644
--- a/src/common/field/mixin/validation-behaviour.js
+++ b/src/common/field/mixin/validation-behaviour.js
@@ -32,7 +32,7 @@ let validationMixin ={
         const shouldComponentHandleValidation = this.refs && this.refs.input && isFunction(this.refs.input.validate);
         let value = this.getValue();
         let {isRequired, validator, label} = this.props;
-        if (isRequired && (isUndefined(value) || isNull(null) || isEmpty(value))) {
+        if (isRequired && (isUndefined(value) || isNull(value) || isEmpty(value))) {
             return this.i18n('field.required', {name: this.i18n(label)});
         }
         //The validation is performed only when the field has a value, otherwise, only the required validation is performed.

From e17af25ded5390bdfec64b08c83ac66618b3d70b Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Mon, 22 May 2017 19:40:21 +0200
Subject: [PATCH 41/50] Wrong test : isEmpty must check only object, array or
 string

---
 src/common/field/mixin/validation-behaviour.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/common/field/mixin/validation-behaviour.js b/src/common/field/mixin/validation-behaviour.js
index eb415fc0a..ed584fd36 100644
--- a/src/common/field/mixin/validation-behaviour.js
+++ b/src/common/field/mixin/validation-behaviour.js
@@ -1,6 +1,6 @@
 
 import validate from 'focus-core/definition/validator/validate';
-import {isNull, isUndefined, isFunction, isEmpty} from 'lodash/lang';
+import {isNull, isUndefined, isFunction, isEmpty, isArray, isObject, isString} from 'lodash/lang';
 
 import {mixin as i18nMixin} from '../../i18n';
 
@@ -32,11 +32,13 @@ let validationMixin ={
         const shouldComponentHandleValidation = this.refs && this.refs.input && isFunction(this.refs.input.validate);
         let value = this.getValue();
         let {isRequired, validator, label} = this.props;
-        if (isRequired && (isUndefined(value) || isNull(value) || isEmpty(value))) {
+        let isEmptyValue = isUndefined(value) || isNull(value) || ((isArray(value) || isObject(value) || isString(value)) && isEmpty(value));
+
+        if (isRequired && isEmptyValue) {
             return this.i18n('field.required', {name: this.i18n(label)});
         }
         //The validation is performed only when the field has a value, otherwise, only the required validation is performed.
-        if (validator && !isUndefined(value) && !isNull(value) && !isEmpty(value)) {
+        if (validator && !isEmptyValue) {
             let validStat = this._computeValidationStatus(
                 validate(
                     {value: value, name: this.i18n(label)},

From cf03cf000b88fbb653395bbef4fe71490cec2d63 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Wed, 24 May 2017 19:10:16 +0200
Subject: [PATCH 42/50] Correcting regression

---
 src/list/table/line.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/list/table/line.js b/src/list/table/line.js
index 6a9ec4d95..1b8482044 100644
--- a/src/list/table/line.js
+++ b/src/list/table/line.js
@@ -7,6 +7,7 @@ import type from 'focus-core/component/types';
 import referenceMixin from '../../common/mixin/reference-property';
 import definitionMixin from '../../common/mixin/definition';
 import builtInComponentsMixin from '../mixin/built-in-components';
+import {mixin as translationMixin} from '../../common/i18n';
 
 // Components
 
@@ -21,7 +22,7 @@ let lineMixin = {
     /**
      * Mixin dependancies.
      */
-    mixins: [definitionMixin, referenceMixin, builtInComponentsMixin],
+    mixins: [translationMixin, definitionMixin, referenceMixin, builtInComponentsMixin],
 
     /**@inheritDoc**/
     getDefaultProps() {

From 38a8ffff951d121c7e579e2d841b09899de292ac Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Mon, 29 May 2017 16:19:40 +0200
Subject: [PATCH 43/50] Adding onClearSelect options

---
 .../input/autocomplete-select/edit.js          | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/input/autocomplete-select/edit.js b/src/components/input/autocomplete-select/edit.js
index f0537d506..610d5e4ee 100644
--- a/src/components/input/autocomplete-select/edit.js
+++ b/src/components/input/autocomplete-select/edit.js
@@ -22,13 +22,15 @@ const propTypes = {
     placeholder: PropTypes.string,
     querySearcher: PropTypes.func.isRequired,
     renderOptions: PropTypes.func,
-    value: PropTypes.string
+    value: PropTypes.string,
+    onSelectClear: PropTypes.bool 
 };
 
 const defaultProps = {
     keyName: 'key',
     labelName: 'label',
-    inputTimeout: 200
+    inputTimeout: 200,
+    onSelectClear: false
 };
 
 @MDBehaviour('loader')
@@ -179,11 +181,17 @@ class Autocomplete extends Component {
 
     _select(key) {
         const {options} = this.state;
-        const {onChange, keyName, labelName} = this.props;
+        const {onChange} = this.props;
         const resolvedLabel = options.get(key) || '';
         this.refs.htmlInput.blur();
-        this.setState({inputValue: this.i18n(resolvedLabel), selected: key, focus: false}, () => {
-            if (onChange) onChange(key);
+        let newState = {inputValue: this.i18n(resolvedLabel), selected: key, focus: false};
+        if (this.props.onSelectClear && this.props.onSelectClear === true) {
+            newState = {inputValue: null, selected: null, focus: false};
+        } 
+        this.setState(newState, () => {
+            if (onChange) {
+                onChange(key);
+            }
         });
     }
 

From 930a20a57f3485178bee6a4900ae0093fa3eee87 Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Mon, 29 May 2017 16:29:02 +0200
Subject: [PATCH 44/50] Add clearOnNullValue options

---
 src/components/input/autocomplete-select/edit.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/input/autocomplete-select/edit.js b/src/components/input/autocomplete-select/edit.js
index 610d5e4ee..52e45eab6 100644
--- a/src/components/input/autocomplete-select/edit.js
+++ b/src/components/input/autocomplete-select/edit.js
@@ -23,14 +23,16 @@ const propTypes = {
     querySearcher: PropTypes.func.isRequired,
     renderOptions: PropTypes.func,
     value: PropTypes.string,
-    onSelectClear: PropTypes.bool 
+    onSelectClear: PropTypes.bool,
+    clearOnNullValue: PropTypes.bool
 };
 
 const defaultProps = {
     keyName: 'key',
     labelName: 'label',
     inputTimeout: 200,
-    onSelectClear: false
+    onSelectClear: false,
+    clearOnNullValue: true
 };
 
 @MDBehaviour('loader')
@@ -74,9 +76,14 @@ class Autocomplete extends Component {
         } else if (customError !== this.props.customError) {
             this.setState({customError});
         }
+
         if (error) {
             this.setState({customError: error});
         }
+
+        if (this.props.clearOnNullValue && this.props.clearOnNullValue === true && value === null && this.state.inputValue !== null) {
+            this.setState({inputValue: null});
+        }
     }
 
     componentDidUpdate() {

From db247c6eb12ccccbfc27c4f9ff9d008eeea1e3ff Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Mon, 13 Feb 2017 18:29:26 +0100
Subject: [PATCH 45/50] Creating the tooltip component

---
 src/components/tooltip/__tests__/.eslintrc |  3 ++
 src/components/tooltip/__tests__/index.js  | 44 ++++++++++++++++++
 src/components/tooltip/index.js            | 54 ++++++++++++++++++++++
 src/components/tooltip/package.json        | 18 ++++++++
 src/components/tooltip/style/tooltip.scss  | 48 +++++++++++++++++++
 src/style/index.js                         |  1 +
 6 files changed, 168 insertions(+)
 create mode 100644 src/components/tooltip/__tests__/.eslintrc
 create mode 100644 src/components/tooltip/__tests__/index.js
 create mode 100644 src/components/tooltip/index.js
 create mode 100644 src/components/tooltip/package.json
 create mode 100644 src/components/tooltip/style/tooltip.scss

diff --git a/src/components/tooltip/__tests__/.eslintrc b/src/components/tooltip/__tests__/.eslintrc
new file mode 100644
index 000000000..1ef7afe8b
--- /dev/null
+++ b/src/components/tooltip/__tests__/.eslintrc
@@ -0,0 +1,3 @@
+{
+    "extends": "../../../../spec/__tests__/.eslintrc"
+}
diff --git a/src/components/tooltip/__tests__/index.js b/src/components/tooltip/__tests__/index.js
new file mode 100644
index 000000000..3f9a32c49
--- /dev/null
+++ b/src/components/tooltip/__tests__/index.js
@@ -0,0 +1,44 @@
+import { mount, render, shallow } from 'enzyme';
+import Tooltip from '../';
+
+describe.only('Tooltip Component', () => {
+    describe('when mounted with no props', () => {
+        const wrapper = mount(<Tooltip />);
+        it('should be rendered in the DOM with [data-focus="tooltip"] attribute', () => {
+            expect(wrapper.find('[data-focus="tooltip"]')).to.have.length(1);
+        });
+        it('should be rendered in the DOM with "mdl-tooltip" className"', () => {
+            expect(wrapper.find('.mdl-tooltip')).to.have.length(1);
+        });
+        it('should be rendered in the DOM with "mdl-tooltip--bottom" className"', () => {
+            expect(wrapper.find('.mdl-tooltip--bottom')).to.have.length(1);
+            // console.log(wrapper.component.props)
+        });
+    });
+    describe('when mounted with props', () => {
+        describe('isLarge', () => {
+            const wrapper = mount(<Tooltip isLarge={true} />);
+            it('should be rendered in the DOM with "mdl-tooltip--large" className"', () => {
+                expect(wrapper.find('.mdl-tooltip--large')).to.have.length(1);
+            });
+        })
+        describe('position "top"', () => {
+            const wrapper = mount(<Tooltip position='top' isLarge={true} />);
+            it('should be rendered in the DOM with "mdl-tooltip--top" className"', () => {
+                expect(wrapper.find('.mdl-tooltip--top')).to.have.length(1);
+            });
+        })
+        describe('position "left"', () => {
+            const wrapper = mount(<Tooltip position='left' isLarge={true} />);
+            it('should be rendered in the DOM with "mdl-tooltip--left" className"', () => {
+                expect(wrapper.find('.mdl-tooltip--left')).to.have.length(1);
+            });
+        })
+        describe('position "right"', () => {
+            const wrapper = mount(<Tooltip position='right' isLarge={true} />);
+            it('should be rendered in the DOM with "mdl-tooltip--right" className"', () => {
+                expect(wrapper.find('.mdl-tooltip--right')).to.have.length(1);
+            });
+        })
+    });
+});
diff --git a/src/components/tooltip/index.js b/src/components/tooltip/index.js
new file mode 100644
index 000000000..71ff60cc0
--- /dev/null
+++ b/src/components/tooltip/index.js
@@ -0,0 +1,54 @@
+//dependencies
+import React, {PropTypes, PureComponent} from 'react';
+import MDBehaviour from '../../behaviours/material';
+import Translation from '../../behaviours/translation';
+
+/**
+ * Component's props
+ */
+const propTypes = {
+    position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
+    isLarge: PropTypes.bool,
+    label: PropTypes.string
+};
+
+/**
+ * Component default Props
+ */
+const defaultProps = {
+    position: 'bottom'
+};
+
+/**
+* Tooltip Component.
+*/
+@MDBehaviour('materialTooltip')
+@Translation
+class Tooltip extends PureComponent {
+
+    /**
+     * Builds the tooltip's className
+     * @return {string} The built classname
+     */
+    buildClassname = () => {
+        const {isLarge, position} = this.props;
+        let tooltipLarge = isLarge === true ? ' mdl-tooltip--large' : '';
+        return `mdl-tooltip mdl-tooltip--${position}${tooltipLarge}`;
+    }
+
+    render() {
+        const {label, style, htmlFor, className} = this.props;
+        const renderedClassName = `${className ? className : ''}${this.buildClassname()}`
+        return (
+            <div className={renderedClassName} data-focus='tooltip' ref='materialTooltip' style={style} htmlFor={htmlFor}>
+            <span className='tooltip-text'>{this.i18n(label)}</span>
+            </div>
+        );
+    }
+}
+
+Tooltip.displayName = 'Tooltip';
+Tooltip.propTypes = propTypes;
+Tooltip.defaultProps = defaultProps;
+
+export default Tooltip;
diff --git a/src/components/tooltip/package.json b/src/components/tooltip/package.json
new file mode 100644
index 000000000..933e93fd9
--- /dev/null
+++ b/src/components/tooltip/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "tooltip",
+  "version": "1.0.0",
+  "description": "Tooltip component.",
+  "main": "index.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "tooltip",
+    "material"
+  ],
+  "author": "focus@kleegroup.com",
+  "license": "MIT"
+}
diff --git a/src/components/tooltip/style/tooltip.scss b/src/components/tooltip/style/tooltip.scss
new file mode 100644
index 000000000..2eeaf1f89
--- /dev/null
+++ b/src/components/tooltip/style/tooltip.scss
@@ -0,0 +1,48 @@
+
+[data-focus="tooltip"] {
+    border-radius: 0px;
+}
+
+.mdl-tooltip--top ::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #616161 transparent transparent transparent;
+}
+
+.mdl-tooltip--right ::after {
+    content: "";
+    position: absolute;
+    top: 39%;
+    right: 100%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent #616161 transparent transparent;
+}
+
+.mdl-tooltip--bottom ::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent #616161 transparent;
+}
+
+.mdl-tooltip--left ::after {
+    content: "";
+    position: absolute;
+    top: 39%;
+    left: 105%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent transparent #616161;
+}
diff --git a/src/style/index.js b/src/style/index.js
index c6e3a67cc..d0e67bac1 100644
--- a/src/style/index.js
+++ b/src/style/index.js
@@ -59,6 +59,7 @@ import '../components/panel/style/panel.scss'
 import '../components/progress-bar/style/progress-bar.scss';
 import '../components/scrollspy-container/style/scrollspy-container.scss';
 import '../components/scrollspy-container/style/sticky-menu.scss';
+import '../components/tooltip/style/tooltip.scss';
 import '../components/topic-displayer/style/topic-displayer.scss';
 
 // LIST FOLDER

From 8a6022f5deacb92b5932b5d64376ec19d86c538e Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Mon, 13 Feb 2017 18:31:22 +0100
Subject: [PATCH 46/50] Adding tooltip on components index.js

---
 src/components/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/index.js b/src/components/index.js
index 74796ff0c..8c367f2c9 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -27,6 +27,7 @@ import Emtpy from './empty';
 import TopicDisplayer from './topic-displayer';
 import Animation from './animation';
 import DraggableIframe from './draggable-iframe';
+import Tooltip from './tooltip';
 
 export default {
     Confirm,
@@ -52,6 +53,7 @@ export default {
     Column,
     Icon,
     Title,
+    Tooltip,
     ProgressBar,
     Label,
     TopicDisplayer,

From 0e822c3b16dd013ec7cecabd89cfb7f997a57a98 Mon Sep 17 00:00:00 2001
From: GuenoleK <kikabouguenole@gmail.com>
Date: Tue, 14 Feb 2017 11:57:59 +0100
Subject: [PATCH 47/50] Removing .only on tests

---
 src/components/tooltip/__tests__/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tooltip/__tests__/index.js b/src/components/tooltip/__tests__/index.js
index 3f9a32c49..fbfd03e66 100644
--- a/src/components/tooltip/__tests__/index.js
+++ b/src/components/tooltip/__tests__/index.js
@@ -1,7 +1,7 @@
 import { mount, render, shallow } from 'enzyme';
 import Tooltip from '../';
 
-describe.only('Tooltip Component', () => {
+describe('Tooltip Component', () => {
     describe('when mounted with no props', () => {
         const wrapper = mount(<Tooltip />);
         it('should be rendered in the DOM with [data-focus="tooltip"] attribute', () => {

From 1f7f914776ec01a2052199a875b360fb3c22cd3c Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Mon, 29 May 2017 22:12:31 +0200
Subject: [PATCH 48/50] Changing focus-core version, and adding enzyme (removed
 in merge)

---
 package.json | 257 ++++++++++++++++++++++++++-------------------------
 1 file changed, 129 insertions(+), 128 deletions(-)

diff --git a/package.json b/package.json
index 03bab1f83..f3b2568c2 100644
--- a/package.json
+++ b/package.json
@@ -1,136 +1,137 @@
 {
-    "name": "focus-components",
-    "version": "2.1.6",
-    "description": "Focus component repository.",
-    "main": "index.js",
-    "scripts": {
-        "babelify": "better-npm-run babelify",
-        "bundle": "better-npm-run bundle",
-        "copy-sass": "better-npm-run copy-sass",
-        "build": "node scripts/mdl-variables-copy.js && better-npm-run babelify && better-npm-run copy-sass && better-npm-run bundle",
-        "test": "better-npm-run test",
-        "test:watch": "better-npm-run test-watch",
-        "postinstall": "node scripts/mdl-variables-copy.js",
-        "profile": "better-npm-run profile",
-        "prepublish": "npm run build",
-        "fix-lint": "eslint --fix src/** || exit 0"
+  "name": "focus-components",
+  "version": "2.1.6",
+  "description": "Focus component repository.",
+  "main": "index.js",
+  "scripts": {
+    "babelify": "better-npm-run babelify",
+    "bundle": "better-npm-run bundle",
+    "copy-sass": "better-npm-run copy-sass",
+    "build": "node scripts/mdl-variables-copy.js && better-npm-run babelify && better-npm-run copy-sass && better-npm-run bundle",
+    "test": "better-npm-run test",
+    "test:watch": "better-npm-run test-watch",
+    "postinstall": "node scripts/mdl-variables-copy.js",
+    "profile": "better-npm-run profile",
+    "prepublish": "npm run build",
+    "fix-lint": "eslint --fix src/** || exit 0"
+  },
+  "betterScripts": {
+    "babelify": {
+      "env": {
+        "BABEL_ENV": "production"
+      },
+      "command": "node scripts/babelify.js"
     },
-    "betterScripts": {
-        "babelify": {
-            "env": {
-                "BABEL_ENV": "production"
-            },
-            "command": "node scripts/babelify.js"
-        },
-        "copy-sass": {
-            "command": "cd src && find . -name *.scss | xargs tar cvf - | tar xfp - -C ../"
-        },
-        "bundle": {
-            "command": "webpack --progress",
-            "env": {
-                "DEV": false,
-                "NODE_ENV": "production",
-                "LIBRARY_NAME": "FocusComponents",
-                "MINIMIFY": false,
-                "PACKAGE_JSON_PATH": "../",
-                "BABEL_ENV": "production"
-            }
-        },
-        "profile": {
-            "command": "webpack --progress --json --profile > profile.json",
-            "env": {
-                "DEV": false,
-                "NODE_ENV": "production",
-                "LIBRARY_NAME": "FocusComponents",
-                "MINIMIFY": false,
-                "PACKAGE_JSON_PATH": "../"
-            }
-        },
-        "test": {
-            "command": "mocha src/**/__tests__/**/*.js",
-            "env": {
-                "BABEL_ENV": "production"
-            }
-        },
-        "test-watch": {
-            "command": "mocha src/**/__tests__/**/*.js -w",
-            "env": {
-                "BABEL_ENV": "production"
-            }
-        }
+    "copy-sass": {
+      "command": "cd src && find . -name *.scss | xargs tar cvf - | tar xfp - -C ../"
     },
-    "babel": {
-        "presets": [
-            "focus"
-        ]
+    "bundle": {
+      "command": "webpack --progress",
+      "env": {
+        "DEV": false,
+        "NODE_ENV": "production",
+        "LIBRARY_NAME": "FocusComponents",
+        "MINIMIFY": false,
+        "PACKAGE_JSON_PATH": "../",
+        "BABEL_ENV": "production"
+      }
     },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/KleeGroup/focus-components.git"
+    "profile": {
+      "command": "webpack --progress --json --profile > profile.json",
+      "env": {
+        "DEV": false,
+        "NODE_ENV": "production",
+        "LIBRARY_NAME": "FocusComponents",
+        "MINIMIFY": false,
+        "PACKAGE_JSON_PATH": "../"
+      }
     },
-    "keywords": [
-        "react",
-        "focus"
-    ],
-    "author": "Focus Team <focus@kleegroup.com>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/KleeGroup/focus-components/issues"
+    "test": {
+      "command": "mocha src/**/__tests__/**/*.js",
+      "env": {
+        "BABEL_ENV": "production"
+      }
     },
-    "homepage": "https://github.com/KleeGroup/focus-components",
-    "dependencies": {
-        "closest": "0.0.1",
-        "daterangepicker": "0.0.3",
-        "immutable": "^3.7.4",
-        "lodash": "^3.10.1",
-        "material-design-lite": "1.3.0",
-        "object-assign": "^2.0.0",
-        "react-addons-css-transition-group": "^15.2.1",
-        "react-date-picker": "^3.1.6",
-        "uuid": "^2.0.1"
-    },
-    "devDependencies": {
-        "autoprefixer-loader": "^3.2.0",
-        "babel": "^6.3.26",
-        "babel-cli": "^6.4.0",
-        "babel-core": "^6.4.0",
-        "babel-eslint": "7.1.1",
-        "babel-loader": "^6.2.1",
-        "babel-preset-focus": "^0.5.2",
-        "babel-runtime": "^6.3.19",
-        "better-npm-run": "0.0.5",
-        "chai": "^3.2.0",
-        "chai-subset": "^1.0.1",
-        "css-loader": "^0.19.0",
-        "eslint-config-focus": "0.5.0",
-        "eslint": "3.17.1",
-        "eslint-plugin-filenames": "1.1.0",
-        "eslint-plugin-import": "2.2.0",
-        "eslint-plugin-react": "6.10.0",
-        "exports-loader": "^0.6.2",
-        "extract-text-webpack-plugin": "^0.8.2",
-        "file-loader": "^0.8.4",
-        "focus-core": "0.17.0-beta0",
-        "in-publish": "^2.0.0",
-        "jquery": "^2.1.4",
-        "jsdom": "^6.4.0",
-        "json-loader": "^0.5.3",
-        "mocha": "^2.2.5",
-        "moment": "^2.10.6",
-        "node-sass": "^3.3.3",
-        "numeral": "^1.5.3",
-        "react": "^15.3.2",
-        "react-addons-test-utils": "^15.2.1",
-        "react-dom": "^15.2.1",
-        "react-hot-loader": "^1.3.0",
-        "sass-loader": "^2.0.1",
-        "sinon": "^1.16.1",
-        "sinon-chai": "^2.8.0",
-        "source-map-loader": "^0.1.5",
-        "style-loader": "^0.12.4",
-        "url-loader": "^0.5.6",
-        "webpack": "^1.12.14",
-        "webpack-dev-server": "^1.14.1",
-        "webpack-focus": "^0.11.4"
+    "test-watch": {
+      "command": "mocha src/**/__tests__/**/*.js -w",
+      "env": {
+        "BABEL_ENV": "production"
+      }
     }
+  },
+  "babel": {
+    "presets": [
+      "focus"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KleeGroup/focus-components.git"
+  },
+  "keywords": [
+    "react",
+    "focus"
+  ],
+  "author": "Focus Team <focus@kleegroup.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/KleeGroup/focus-components/issues"
+  },
+  "homepage": "https://github.com/KleeGroup/focus-components",
+  "dependencies": {
+    "closest": "0.0.1",
+    "daterangepicker": "0.0.3",
+    "immutable": "^3.7.4",
+    "lodash": "^3.10.1",
+    "material-design-lite": "1.3.0",
+    "object-assign": "^2.0.0",
+    "react-addons-css-transition-group": "^15.2.1",
+    "react-date-picker": "^3.1.6",
+    "uuid": "^2.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer-loader": "^3.2.0",
+    "babel": "^6.3.26",
+    "babel-cli": "^6.4.0",
+    "babel-core": "^6.4.0",
+    "babel-eslint": "7.1.1",
+    "babel-loader": "^6.2.1",
+    "babel-preset-focus": "^0.5.2",
+    "babel-runtime": "^6.3.19",
+    "better-npm-run": "0.0.5",
+    "chai": "^3.2.0",
+    "chai-subset": "^1.0.1",
+    "css-loader": "^0.19.0",
+    "enzyme": "2.8.2",
+    "eslint": "3.17.1",
+    "eslint-config-focus": "0.5.0",
+    "eslint-plugin-filenames": "1.1.0",
+    "eslint-plugin-import": "2.2.0",
+    "eslint-plugin-react": "6.10.0",
+    "exports-loader": "^0.6.2",
+    "extract-text-webpack-plugin": "^0.8.2",
+    "file-loader": "^0.8.4",
+    "focus-core": "2.1.1",
+    "in-publish": "^2.0.0",
+    "jquery": "^2.1.4",
+    "jsdom": "^6.4.0",
+    "json-loader": "^0.5.3",
+    "mocha": "^2.2.5",
+    "moment": "^2.10.6",
+    "node-sass": "^3.3.3",
+    "numeral": "^1.5.3",
+    "react": "^15.3.2",
+    "react-addons-test-utils": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-hot-loader": "^1.3.0",
+    "sass-loader": "^2.0.1",
+    "sinon": "^1.16.1",
+    "sinon-chai": "^2.8.0",
+    "source-map-loader": "^0.1.5",
+    "style-loader": "^0.12.4",
+    "url-loader": "^0.5.6",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-focus": "^0.11.4"
+  }
 }

From ebedfad554f60af8bcb193c6539dc2d1d145744e Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Mon, 29 May 2017 23:26:34 +0200
Subject: [PATCH 49/50] Changing tooltip, removing style

---
 src/components/tooltip/index.js           | 18 +++++----
 src/components/tooltip/style/tooltip.scss | 48 -----------------------
 src/style/index.js                        |  1 -
 3 files changed, 11 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/tooltip/style/tooltip.scss

diff --git a/src/components/tooltip/index.js b/src/components/tooltip/index.js
index 71ff60cc0..ddf97782a 100644
--- a/src/components/tooltip/index.js
+++ b/src/components/tooltip/index.js
@@ -2,21 +2,23 @@
 import React, {PropTypes, PureComponent} from 'react';
 import MDBehaviour from '../../behaviours/material';
 import Translation from '../../behaviours/translation';
-
+import filterProps from '../../utils/filter-html-attributes'
 /**
  * Component's props
  */
 const propTypes = {
     position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
     isLarge: PropTypes.bool,
-    label: PropTypes.string
+    label: PropTypes.string.isRequired,
+    htmlFor: PropTypes.string.isRequired
 };
 
 /**
  * Component default Props
  */
 const defaultProps = {
-    position: 'bottom'
+    position: 'bottom',
+    isLarge: false
 };
 
 /**
@@ -37,11 +39,13 @@ class Tooltip extends PureComponent {
     }
 
     render() {
-        const {label, style, htmlFor, className} = this.props;
-        const renderedClassName = `${className ? className : ''}${this.buildClassname()}`
+        const {label, className, htmlFor, ...others} = this.props;
+        const renderedClassName = `${className ? className : ''}${this.buildClassname()}`;
+        const tooltipProps = { ...filterProps(others), htmlFor, className: renderedClassName};        
+
         return (
-            <div className={renderedClassName} data-focus='tooltip' ref='materialTooltip' style={style} htmlFor={htmlFor}>
-            <span className='tooltip-text'>{this.i18n(label)}</span>
+            <div data-focus='tooltip' ref='materialTooltip' {...tooltipProps} >
+                <span className='tooltip-text'>{this.i18n(label)}</span>
             </div>
         );
     }
diff --git a/src/components/tooltip/style/tooltip.scss b/src/components/tooltip/style/tooltip.scss
deleted file mode 100644
index 2eeaf1f89..000000000
--- a/src/components/tooltip/style/tooltip.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-
-[data-focus="tooltip"] {
-    border-radius: 0px;
-}
-
-.mdl-tooltip--top ::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #616161 transparent transparent transparent;
-}
-
-.mdl-tooltip--right ::after {
-    content: "";
-    position: absolute;
-    top: 39%;
-    right: 100%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent #616161 transparent transparent;
-}
-
-.mdl-tooltip--bottom ::after {
-    content: "";
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent #616161 transparent;
-}
-
-.mdl-tooltip--left ::after {
-    content: "";
-    position: absolute;
-    top: 39%;
-    left: 105%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent transparent #616161;
-}
diff --git a/src/style/index.js b/src/style/index.js
index d0e67bac1..c6e3a67cc 100644
--- a/src/style/index.js
+++ b/src/style/index.js
@@ -59,7 +59,6 @@ import '../components/panel/style/panel.scss'
 import '../components/progress-bar/style/progress-bar.scss';
 import '../components/scrollspy-container/style/scrollspy-container.scss';
 import '../components/scrollspy-container/style/sticky-menu.scss';
-import '../components/tooltip/style/tooltip.scss';
 import '../components/topic-displayer/style/topic-displayer.scss';
 
 // LIST FOLDER

From a786c35a37268da1d85236637ac8cce34359cd7d Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Tue, 30 May 2017 16:46:14 +0200
Subject: [PATCH 50/50] Release 2.1.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f3b2568c2..7106d827d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "focus-components",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Focus component repository.",
   "main": "index.js",
   "scripts": {