@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/es/HiForm/HiInput.js

@@ -1,456 +1,512 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
-import Input from 'material-ui/Input';
-import IconButton from 'material-ui/IconButton';
 import classNames from 'classnames';
+import Input from '@material-ui/core/Input';
+import HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
 import withStyles from '../styles/withStyles';
-import HiIconBuilder from '../utils/HiIconBuilder';
-
 export const styles = theme => ({
-    root: _extends({
-        position: 'relative'
-    }, theme.typography.body1, {
-        borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
-        paddingLeft: 8,
-        backgroundColor: '#f5f5f5',
-        '&$focused': {
-            backgroundColor: '#ffffff'
-        },
-        width: '100%',
-        // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-        '&:not($error)': {
-            marginTop: 1
-        }
-    }),
-    inkbar: {
-        '&:not($error):after': {
-            backgroundColor: theme.palette.business.primary.normal,
-            left: 0,
-            bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-            content: '""',
-            height: 1,
-            position: 'absolute',
-            right: 0,
-            transform: 'scaleX(0)',
-            transition: theme.transitions.create('transform', {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.easeOut
-            }),
-            pointerEvents: 'none' // Transparent to the hover style.
-        },
-        '&:not($error):hover:after': {
-            transform: 'scaleX(1)'
-        },
-        '&$focused:after': {
-            transform: 'scaleX(1)'
-        }
-    },
-    focused: {},
-    error: {
-        border: `1px solid ${theme.palette.negative.normal}`,
-        paddingLeft: 0,
-        borderRadius: 2
-    },
-    startAdornment: {
-        color: theme.palette.neutral.normal,
-        zIndex: 1,
-        marginRight: 8
-    },
-    startAdornmentFocus: {
-        color: theme.palette.neutral.dark
-    },
-    startAdornmentDisabled: {
-        color: theme.palette.neutral.light
-    },
-    rightIcon: {
-        margin: '0 8px',
-        width: 18,
-        height: 39,
-        color: theme.palette.neutral.normal
-    },
-    rightIconFocus: {
-        color: theme.palette.neutral.dark
-    },
-    rightIconDisabled: {
-        color: theme.palette.neutral.light
+  root: _objectSpread({
+    position: 'relative'
+  }, theme.typography.b1, {
+    borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
+    paddingLeft: 8,
+    backgroundColor: theme.palette.background2,
+    '&$focused': {
+      backgroundColor: '#ffffff'
     },
-    rightIconError: {
-        // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border right
-        marginRight: 10
-    },
-    input: _extends({}, theme.typography.body1, {
-        fontWeight: theme.typography.fontWeightRegular,
-        caretColor: theme.palette.business.primary.normal,
-        display: 'flex',
-        alignItems: 'center'
-    }),
-    inputPropsClassName: _extends({}, theme.typography.body1, {
-        padding: 0
-    }),
-    inputText: {
-        height: 39
-    },
-    inputTextarea: {
-        minHeight: 39,
-        paddingTop: 8
-    },
-    iconPointer: {
-        zIndex: 2,
-        cursor: 'pointer'
-    },
-    eraseButton: {
-        height: 39,
-        width: 40,
-        display: 'inline-block'
+    width: '100%',
+    // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
+    '&:not($error)': {
+      marginTop: 1
+    }
+  }),
+  inkbar: {
+    '&:not($error):after': {
+      backgroundColor: theme.palette.primary.main,
+      left: 0,
+      bottom: 0,
+      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+      content: '""',
+      height: 1,
+      position: 'absolute',
+      right: 0,
+      transform: 'scaleX(0)',
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut
+      }),
+      pointerEvents: 'none' // Transparent to the hover style.
+
     },
-    disabled: {
-        borderBottom: 'none'
+    '&:not($error):hover:after': {
+      transform: 'scaleX(1)'
     },
-    endAdornment: {
-        display: 'flex',
-        alignItems: 'center'
+    '&$focused:after': {
+      transform: 'scaleX(1)'
     }
+  },
+  focused: {},
+  error: {
+    border: `1px solid ${theme.palette.negative.main}`,
+    paddingLeft: 8,
+    borderRadius: 2
+  },
+  startAdornment: {
+    color: theme.palette.neutral.main,
+    zIndex: 1,
+    marginLeft: 8,
+    marginRight: 16
+  },
+  startAdornmentFocus: {
+    color: theme.palette.neutral.dark
+  },
+  startAdornmentDisabled: {
+    color: theme.palette.neutral.light
+  },
+  rightIcon: {
+    width: 39,
+    color: theme.palette.neutral.main
+  },
+  rightIconFocus: {
+    color: theme.palette.neutral.dark
+  },
+  rightIconDisabled: {
+    color: theme.palette.neutral.light
+  },
+  rightIconError: {
+    // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border right
+    marginRight: '-1px'
+  },
+  input: _objectSpread({}, theme.typography.b1, {
+    fontWeight: theme.typography.fontWeightRegular,
+    caretColor: theme.palette.primary.main,
+    display: 'flex',
+    alignItems: 'center'
+  }),
+  inputPropsClassName: _objectSpread({}, theme.typography.b1, {
+    padding: 0
+  }),
+  inputText: {
+    height: 39
+  },
+  inputTextArea: {
+    minHeight: 39,
+    paddingTop: 8
+  },
+  iconPointer: {
+    zIndex: 2,
+    cursor: 'pointer'
+  },
+  eraseButton: {
+    height: 39,
+    width: 40,
+    display: 'inline-block'
+  },
+  disabled: {
+    borderBottom: 'none'
+  },
+  endAdornment: {
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center'
+  }
+});
+
+var _ref = React.createElement(HiIcon, {
+  icon: "close",
+  size: 20,
+  color: "neutral"
 });
 
 class HiInput extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      focused: false
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleDivClick = this.handleDivClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.getInputElement = this.getInputElement.bind(this);
+    this.handleOverlayRef = this.handleOverlayRef.bind(this);
+  }
 
-    constructor() {
-        super();
-
-        this.state = {
-            focused: false
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.handleDivClick = this.handleDivClick.bind(this);
-        this.handleBlur = this.handleBlur.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-        this.handleMouseEnter = this.handleMouseEnter.bind(this);
-        this.handleMouseLeave = this.handleMouseLeave.bind(this);
-        this.getInputElement = this.getInputElement.bind(this);
-        this.handleOverlayRef = this.handleOverlayRef.bind(this);
-    }
+  getInputElement(el) {
+    this.inputElement = el;
 
-    getInputElement(el) {
-        this.inputElement = el;
-        if (this.props.inputRef) {
-            this.props.inputRef(this.inputElement);
-        }
+    if (this.props.inputRef) {
+      this.props.inputRef(this.inputElement);
     }
+  }
 
-    handleChange(event) {
-        const authorizedChar = '1234567890TOto<>';
-        if (this.props.onChange) {
-            if (authorizedChar.indexOf(event.target.value.charAt(event.target.value.length - 1)) >= 0 && this.props.onlyNumbers === true || this.props.onlyNumbers !== true) {
-                this.props.onChange(event);
-            }
-        }
+  handleChange(event) {
+    const authorizedChar = '1234567890TOto<>';
+
+    if (this.props.onChange) {
+      if (authorizedChar.indexOf(event.target.value.charAt(event.target.value.length - 1)) >= 0 && this.props.onlyNumbers === true || this.props.onlyNumbers !== true) {
+        this.props.onChange(event);
+      }
     }
+  }
 
-    handleReset() {
-        if (this.props.onReset) {
-            this.props.onReset();
-        }
+  handleReset() {
+    if (this.props.onReset) {
+      this.props.onReset();
     }
 
-    handleBlur(event) {
-        // Si on click sur un élément de HiInput, on garde le focus
-        // Par exemple sur l'icone reset
-        if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
-            event.stopPropagation();
-        } else {
-            this.setState({ focused: false });
-            if (this.props.onBlur) {
-                this.props.onBlur(event);
-            }
-        }
+    this.inputElement.focus();
+  }
+
+  handleBlur(event) {
+    // Si on click sur un élément de HiInput, on garde le focus
+    // Par exemple sur l'icone reset
+    if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
+      event.stopPropagation();
+    } else {
+      this.setState({
+        focused: false
+      });
+
+      if (this.props.onBlur) {
+        this.props.onBlur(event);
+      }
     }
+  }
 
-    handleFocus(event) {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
-        }
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
+  handleFocus(event) {
+    if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+      event.stopPropagation();
+    } else {
+      if (!this.state.focused) {
+        this.setState({
+          focused: true
+        });
+      }
+
+      if (this.props.onFocus) {
+        this.props.onFocus(event);
+      }
     }
+  }
 
-    handleDivClick() {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
-        }
-        this.inputElement.focus();
+  handleDivClick(event) {
+    if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+      event.stopPropagation();
+    } else {
+      if (!this.state.focused) {
+        this.setState({
+          focused: true
+        });
+      }
+
+      this.inputElement.focus();
     }
+  }
 
-    handleMouseEnter() {
-        if (this.props.onMouseEnter) {
-            this.props.onMouseEnter();
-        }
+  handleMouseEnter() {
+    if (this.props.onMouseEnter) {
+      this.props.onMouseEnter();
     }
+  }
 
-    handleMouseLeave() {
-        if (this.props.onMouseLeave) {
-            this.props.onMouseLeave();
-        }
+  handleMouseLeave() {
+    if (this.props.onMouseLeave) {
+      this.props.onMouseLeave();
     }
+  }
 
-    handleOverlayRef(el) {
-        this.overlayNode = el;
-        if (this.props.overlayRef) {
-            this.props.overlayRef(el);
-        }
+  handleOverlayRef(el) {
+    this.overlayNode = el;
+
+    if (this.props.overlayRef) {
+      this.props.overlayRef(el);
     }
+  }
 
-    render() {
-        const {
-            value,
-            classes,
-            placeholder,
-            startAdornment,
-            endAdornment: endAdornmentProps,
-            className,
-            error,
-            type,
-            disabled,
-            autoComplete,
-            autoFocus,
-            inputId,
-            name,
-            multiline,
-            rows,
-            inputClassName,
-            onReset,
-            theme
-        } = this.props;
-
-        const { focused } = this.state;
-
-        const overlayProps = _extends({
-            className: classNames(classes.root, {
-                [classes.disabled]: disabled && !error,
-                [classes.inkbar]: !disabled,
-                [classes.focused]: focused,
-                [classes.error]: error
-            }, className)
-        }, !disabled && {
-            onClick: this.handleDivClick,
-            onMouseEnter: this.handleMouseEnter,
-            onMouseLeave: this.handleMouseLeave
-        }, {
-            ref: this.handleOverlayRef
-        });
+  render() {
+    const {
+      value,
+      classes,
+      placeholder,
+      startAdornment,
+      endAdornment: endAdornmentProps,
+      className,
+      error,
+      type,
+      disabled,
+      autoComplete,
+      autoFocus,
+      inputId,
+      name,
+      multiline,
+      rows,
+      inputClassName,
+      onReset,
+      startAdornmentColor
+    } = this.props;
+    const {
+      focused
+    } = this.state;
+
+    const overlayProps = _objectSpread({
+      className: classNames(classes.root, {
+        [classes.disabled]: disabled && !error,
+        [classes.inkbar]: !disabled,
+        [classes.focused]: focused,
+        [classes.error]: error
+      }, className)
+    }, !disabled && {
+      onClick: this.handleDivClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave
+    }, {
+      ref: this.handleOverlayRef
+    });
+
+    let leftIcon;
+
+    if (startAdornment) {
+      leftIcon = React.createElement(HiIcon, {
+        icon: startAdornment,
+        size: 20,
+        color: startAdornmentColor,
+        onClick: this.props.onLeftIconClick,
+        className: classNames(classes.startAdornment, {
+          [classes.startAdornmentFocus]: focused,
+          [classes.startAdornmentDisabled]: disabled,
+          [classes.iconPointer]: this.props.onLeftIconClick
+        })
+      });
+    } // Build endAdornment with eraseIcon + endAdornmentProps
 
-        let leftIcon;
-        if (startAdornment) {
-            leftIcon = React.createElement(HiIconBuilder, {
-                icon: startAdornment,
-                onClick: this.props.onLeftIconClick,
-                className: classNames(classes.startAdornment, {
-                    [classes.startAdornmentFocus]: focused,
-                    [classes.startAdornmentDisabled]: disabled,
-                    [classes.iconPointer]: this.props.onLeftIconClick
-                })
-            });
-        }
-        // Build endAdornment with eraseIcon + endAdornmentProps
-        const eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && React.createElement(
-            IconButton,
-            {
-                className: classes.eraseButton,
-                onClick: this.handleReset,
-                onBlur: this.handleBlur
-            },
-            React.createElement(HiIconBuilder, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
-        );
-
-        let endAdornment = endAdornmentProps;
-        if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
-            endAdornment = React.createElement(HiIconBuilder, {
-                icon: endAdornmentProps,
-                onClick: this.props.onRightIconClick,
-                className: classNames(classes.rightIcon, {
-                    [classes.rightIconFocus]: focused,
-                    [classes.rightIconDisabled]: disabled,
-                    [classes.rightIconError]: error,
-                    [classes.iconPointer]: this.props.onRightIconClick
-                })
-            });
-        }
 
-        return React.createElement(
-            'div',
-            overlayProps,
-            React.createElement(Input, {
-                id: inputId,
-                type: type,
-                className: classes.input,
-                disableUnderline: true,
-                onChange: this.handleChange,
-                value: value,
-                placeholder: placeholder,
-                onFocus: this.handleFocus,
-                onKeyDown: this.props.onKeyDown,
-                onBlur: this.handleBlur,
-                inputRef: this.getInputElement,
-                disabled: disabled,
-                multiline: multiline,
-                rows: rows,
-                fullWidth: true,
-                autoComplete: autoComplete,
-                autoFocus: autoFocus,
-                name: name,
-                startAdornment: leftIcon,
-                endAdornment: React.createElement(
-                    'div',
-                    { className: classes.endAdornment },
-                    eraseIcon,
-                    endAdornment
-                ),
-                inputProps: {
-                    className: classNames(inputClassName, classes.inputPropsClassName, {
-                        [classes.inputText]: !multiline,
-                        [classes.inputTextarea]: multiline
-                    })
-                }
-            })
-        );
+    const eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && React.createElement(HiIconButton, {
+      className: classes.eraseButton,
+      onClick: this.handleReset,
+      onBlur: this.handleBlur
+    }, _ref);
+    let endAdornment = endAdornmentProps;
+
+    if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
+      endAdornment = React.createElement(HiIcon, {
+        icon: endAdornmentProps,
+        size: 20,
+        color: "neutral",
+        onClick: this.props.onRightIconClick,
+        className: classNames(classes.rightIcon, {
+          [classes.rightIconFocus]: focused,
+          [classes.rightIconDisabled]: disabled,
+          [classes.rightIconError]: error,
+          [classes.iconPointer]: this.props.onRightIconClick
+        })
+      });
     }
+
+    return React.createElement("div", overlayProps, React.createElement(Input, {
+      id: inputId,
+      type: type,
+      className: classes.input,
+      disableUnderline: true,
+      onChange: this.handleChange,
+      value: value,
+      placeholder: placeholder,
+      onFocus: this.handleFocus,
+      onKeyDown: this.props.onKeyDown,
+      onBlur: this.handleBlur,
+      inputRef: this.getInputElement,
+      disabled: disabled,
+      multiline: multiline,
+      rows: rows,
+      fullWidth: true,
+      autoComplete: autoComplete,
+      autoFocus: autoFocus,
+      name: name,
+      startAdornment: leftIcon,
+      endAdornment: React.createElement("div", {
+        className: classes.endAdornment,
+        ref: el => {
+          this.endAdornmentNode = el;
+        }
+      }, eraseIcon, endAdornment),
+      inputProps: {
+        className: classNames(inputClassName, classes.inputPropsClassName, {
+          [classes.inputText]: !multiline,
+          [classes.inputTextArea]: multiline
+        })
+      }
+    }));
+  }
+
 }
 
 HiInput.defaultProps = {
-    value: '',
-    placeholder: '',
-    inputId: '',
-    name: '',
-    startAdornment: '',
-    endAdornment: '',
-    type: 'text',
-    multiline: false,
-    error: false,
-    onlyNumbers: false
+  value: '',
+  placeholder: '',
+  inputId: '',
+  name: '',
+  startAdornment: '',
+  endAdornment: '',
+  type: 'text',
+  multiline: false,
+  error: false,
+  onlyNumbers: false
 };
 HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * This property helps users to fill forms faster, especially on mobile devices.
-     * The name can be confusing, it's more like an autofill.
-     * You can learn more about it in this article
-     * https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
-     */
-    autoComplete: PropTypes.string,
-    /**
-     * Si `true`, le champs input aura le focus après le mount.
-     */
-    autoFocus: PropTypes.bool,
-    /**
-     * Utile pour surcharger les classes
-     */
-    classes: PropTypes.object,
-    /**
-     * Utile pour surcharger les classes
-     */
-    className: PropTypes.string,
-    /**
-     * Rendre le champs désactivé
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Elément à afficher à droite de l'input, peut être un string ou un node
-     */
-    endAdornment: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    /**
-     * Si `true`, le champs input sera affiché en erreur.
-     */
-    error: PropTypes.bool,
-    /**
-     * Utile pour surcharger les classes de l'input
-     */
-    inputClassName: PropTypes.string,
-    /**
-     * id de l'élément input
-     */
-    inputId: PropTypes.string,
-    /**
-     * Passe une ref callback au composant input
-     */
-    inputRef: PropTypes.func,
-    /**
-     * Si `true`, le champs input sera un textarea
-     */
-    multiline: PropTypes.bool,
-    /**
-     * Attribute name de l'élément `input`.
-     */
-    name: PropTypes.string,
-    /**
-     * Fonction de callback appelée lorsqu'on quitte le champs input
-     */
-    onBlur: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on remplie le champs de recherche
-     */
-    onChange: PropTypes.func,
-    /**
-     * Fonction de callback appelée au focus du champs
-     */
-    onFocus: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on tape une touche
-     */
-    onKeyDown: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
-     */
-    onLeftIconClick: PropTypes.func,
-    /**
-     * Pour les input de type number (permet de bloquer la saisie des caractères non autorisés)
-     */
-    onlyNumbers: PropTypes.bool,
-    /**
-     * Fonction de callback appelée lorsqu'on survole le champs
-     */
-    onMouseEnter: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsque le curseur quitte le champs
-     */
-    onMouseLeave: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on vide le champs de recherche
-     */
-    onReset: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on clic sur l'icône de droite
-     */
-    onRightIconClick: PropTypes.func,
-    /**
-     * Passe une ref callback au composant div parent
-     */
-    overlayRef: PropTypes.func,
-    /**
-     * Placeholder
-     */
-    placeholder: PropTypes.string,
-    /**
-     * Nombre de lignes pour les textArea
-     */
-    rows: PropTypes.number,
-    /**
-     * Icône à afficher à gauche de l'input
-     */
-    startAdornment: PropTypes.string,
-    /**
-     * @ignore
-     */
-    theme: PropTypes.object,
-    /**
-     * Type du champs input. Doit être un type HTML5 valide.
-     */
-    type: PropTypes.string,
-    /**
-     * Valeur du champs de recherche
-     */
-    value: PropTypes.string
+  /**
+   * This property helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, it's more like an autofill.
+   * You can learn more about it in this article
+   * https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
+   */
+  autoComplete: PropTypes.string,
+
+  /**
+   * Si `true`, le champs input aura le focus après le mount.
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
+   * Utile pour surcharger les classes
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Utile pour surcharger les classes
+   */
+  className: PropTypes.string,
+
+  /**
+   * Rendre le champs désactivé
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Elément à afficher à droite de l'input, peut être un string ou un node
+   */
+  endAdornment: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Si `true`, le champs input sera affiché en erreur.
+   */
+  error: PropTypes.bool,
+
+  /**
+   * Utile pour surcharger les classes de l'input
+   */
+  inputClassName: PropTypes.string,
+
+  /**
+   * id de l'élément input
+   */
+  inputId: PropTypes.string,
+
+  /**
+   * Passe une ref callback au composant input
+   */
+  inputRef: PropTypes.func,
+
+  /**
+   * Si `true`, le champs input sera un textarea
+   */
+  multiline: PropTypes.bool,
+
+  /**
+   * Attribute name de l'élément `input`.
+   */
+  name: PropTypes.string,
+
+  /**
+   * Fonction de callback appelée lorsqu'on quitte le champs input
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on remplie le champs de recherche
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée au focus du champs
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on tape une touche
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
+   */
+  onLeftIconClick: PropTypes.func,
+
+  /**
+   * Pour les input de type number (permet de bloquer la saisie des caractères non autorisés)
+   */
+  onlyNumbers: PropTypes.bool,
+
+  /**
+   * Fonction de callback appelée lorsqu'on survole le champs
+   */
+  onMouseEnter: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsque le curseur quitte le champs
+   */
+  onMouseLeave: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs de recherche
+   */
+  onReset: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on clic sur l'icône de droite
+   */
+  onRightIconClick: PropTypes.func,
+
+  /**
+   * Passe une ref callback au composant div parent
+   */
+  overlayRef: PropTypes.func,
+
+  /**
+   * Placeholder
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Nombre de lignes pour les textArea
+   */
+  rows: PropTypes.number,
+
+  /**
+   * Icône à afficher à gauche de l'input
+   */
+  startAdornment: PropTypes.string,
+
+  /**
+   * Couleur de l'icône à afficher à gauche de l'input
+   */
+  startAdornmentColor: PropTypes.string,
+
+  /**
+   * Type du champs input. Doit être un type HTML5 valide.
+   */
+  type: PropTypes.string,
+
+  /**
+   * Valeur du champs de recherche
+   */
+  value: PropTypes.string
 } : {};
-export default withStyles(styles, { name: 'HiMuiHiInput', withTheme: true })(HiInput);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HiMuiHiInput'
+})(HiInput);