@hipay/hipay-material-ui 2.0.0-beta.40 → 2.0.0-beta.42

package/HiButton/HiButton.js

@@ -28,7 +28,15 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 // @inheritedComponent Button
 var styles = function styles(theme) {
   return {
-    root: {},
+    root: {
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
+      }
+    },
+    flatNeutral: {
+      color: theme.palette.neutral.main
+    },
     flatPositive: {
       color: theme.palette.positive.main,
       '&:hover': {
@@ -59,16 +67,6 @@ var styles = function styles(theme) {
         }
       }
     },
-    flatNeutral: {
-      color: theme.palette.neutral.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
 
     /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
     containedPositive: {
@@ -152,7 +150,8 @@ var styles = function styles(theme) {
       '&:hover': {
         border: "1px solid ".concat(theme.palette.neutral.main)
       }
-    }
+    },
+    disabled: {}
   };
 };
 
@@ -166,18 +165,20 @@ function HiButton(props) {
       className = props.className,
       color = props.color,
       variant = props.variant,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "variant"]);
+      disabled = props.disabled,
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "variant", "disabled"]);
   var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
   var fab = variant === 'fab' || variant === 'extendedFab';
   var contained = variant === 'contained' || variant === 'raised';
-  var buttonClassNames = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral'), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && color === 'neutral'), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && color === 'neutral'), _classNames));
+  var buttonClassNames = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames));
   return _react.default.createElement(_Button.default, (0, _extends2.default)({
     className: className,
     classes: {
       root: buttonClassNames
     },
     color: hcolor,
-    variant: variant
+    variant: variant,
+    disabled: disabled
   }, other), children);
 }
 
@@ -203,7 +204,7 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
   variant: _propTypes.default.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
 } : {};
 HiButton.defaultProps = {
-  color: 'default',
+  color: 'neutral',
   variant: 'text'
 };
 

package/HiForm/HiInput.js

@@ -390,6 +390,15 @@ function (_React$PureComponent) {
         }
       }));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
+        return {
+          focused: nextProps.focused
+        };
+      }
+    }
   }]);
   return HiInput;
 }(_react.default.PureComponent);
@@ -445,6 +454,12 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   error: _propTypes.default.bool,
 
+  /**
+   * Force le focus de l'input et surcharge le comportement par défaut
+   * où le focus est géré dans le state.
+   */
+  focused: _propTypes.default.bool,
+
   /**
    * Utile pour surcharger les classes de l'input
    */

package/HiSelect/HiSelect.js

@@ -555,6 +555,14 @@ function (_React$PureComponent) {
         });
       }
     }
+  }, {
+    key: "handleReset",
+    value: function handleReset(event) {
+      if (this.props.onReset) {
+        event.stopPropagation();
+        this.props.onReset(event);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -751,14 +759,14 @@ function (_React$PureComponent) {
         onMouseLeave: this.props.onMouseLeave,
         refElement: function refElement(el) {
           _this2.selectInputElement = el;
-        }
+        },
+        onReset: this.props.onReset
       }), open && staticPosition ? _react.default.createElement("div", {
         style: popperStyle
       }, content) : _react.default.createElement(_Popper.default, {
         anchorEl: this.inputEl,
         placement: "bottom-start",
         open: open,
-        eventsEnabled: open,
         className: popperClass,
         style: popperStyle,
         disablePortal: true
@@ -930,6 +938,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onMouseLeave: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs
+   */
+  onReset: _propTypes.default.func,
+
   /**
    * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
    * A utiliser pour les selects avec des données dynamiques

package/HiSelect/SelectInput.js

@@ -171,26 +171,37 @@ function (_React$PureComponent) {
       }
     };
 
+    _this.handleClick = function (event) {
+      if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
+        _this.props.onClick(event);
+      }
+    };
+
     _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
   (0, _createClass2.default)(SelectInput, [{
     key: "render",
     value: function render() {
-      var _classNames, _classNames2;
+      var _classNames,
+          _classNames2,
+          _this2 = this;
 
       var _this$props = this.props,
           classes = _this$props.classes,
           noButton = _this$props.noButton,
           disabled = _this$props.disabled,
           onClick = _this$props.onClick,
+          onReset = _this$props.onReset,
           value = _this$props.value,
           open = _this$props.open,
           focused = _this$props.focused,
           error = _this$props.error,
           id = _this$props.id,
-          refElement = _this$props.refElement; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+          refElement = _this$props.refElement,
+          theme = _this$props.theme; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
       var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), _classNames));
       var iconClass = (0, _classnames.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty2.default)(_classNames2, classes.iconClose, !open), _classNames2));
@@ -219,7 +230,7 @@ function (_React$PureComponent) {
         classes: {
           root: rootClass
         },
-        onClick: onClick,
+        onClick: this.handleClick,
         disabled: disabled,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
@@ -231,7 +242,16 @@ function (_React$PureComponent) {
         }
       }, _react.default.createElement("span", {
         className: classes.label
-      }, value), _react.default.createElement(_HiIcon.default, {
+      }, value), onReset && focused && _react.default.createElement("div", {
+        ref: function ref(el) {
+          _this2.resetIcon = el;
+        }
+      }, _react.default.createElement(_HiIcon.default, {
+        icon: "close",
+        size: 24,
+        color: theme.palette.neutral.main,
+        onClick: onReset
+      })), _react.default.createElement(_HiIcon.default, {
         className: iconClass,
         icon: "arrow_drop_down"
       }));
@@ -305,6 +325,11 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onMouseLeave: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs
+   */
+  onReset: _propTypes.default.func,
+
   /**
    * Fonction de callback à la pression de la touche "Entrée"
    */
@@ -328,7 +353,8 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 
 var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
-  name: 'HmuiSelectInput'
+  name: 'HmuiSelectInput',
+  withTheme: true
 })(SelectInput);
 
 exports.default = _default;

package/HiSelectNew/HiNestedSelectField.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
+
+var _HiNestedSelect = _interopRequireDefault(require("./HiNestedSelect"));
+
+// @inheritedComponent HiDynamicSelect
+
+/**
+ * Champs input pour formulaire
+ */
+var HiNestedSelectField =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiNestedSelectField, _React$PureComponent);
+
+  function HiNestedSelectField() {
+    (0, _classCallCheck2.default)(this, HiNestedSelectField);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiNestedSelectField).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiNestedSelectField, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          label = _this$props.label,
+          required = _this$props.required,
+          disabled = _this$props.disabled,
+          error = _this$props.error,
+          errorText = _this$props.errorText,
+          helperText = _this$props.helperText,
+          helperIcon = _this$props.helperIcon,
+          id = _this$props.id,
+          name = _this$props.name,
+          value = _this$props.value,
+          options = _this$props.options,
+          type = _this$props.type,
+          multiple = _this$props.multiple,
+          iconAll = _this$props.iconAll,
+          checkbox = _this$props.checkbox,
+          searchable = _this$props.searchable,
+          translations = _this$props.translations,
+          className = _this$props.className,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["label", "required", "disabled", "error", "errorText", "helperText", "helperIcon", "id", "name", "value", "options", "type", "multiple", "iconAll", "checkbox", "searchable", "translations", "className"]);
+      return _react.default.createElement(_HiFormControl.default, {
+        id: id,
+        label: label,
+        required: required,
+        disabled: disabled,
+        error: error,
+        errorText: errorText,
+        helperText: helperText,
+        helperIcon: helperIcon,
+        className: className
+      }, _react.default.createElement(_HiNestedSelect.default, (0, _extends2.default)({
+        id: id,
+        name: name,
+        value: value,
+        options: options,
+        type: type,
+        multiple: multiple,
+        iconAll: iconAll,
+        checkbox: checkbox,
+        searchable: searchable,
+        translations: translations,
+        disabled: disabled,
+        error: error
+      }, others)));
+    }
+  }]);
+  return HiNestedSelectField;
+}(_react.default.PureComponent);
+
+HiNestedSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des styles
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: _propTypes.default.bool,
+
+  /**
+   * Texte de l'erreur
+   */
+  errorText: _propTypes.default.string,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: _propTypes.default.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: _propTypes.default.string,
+
+  /**
+   * id de l'élément input
+   */
+  id: _propTypes.default.string.isRequired,
+
+  /**
+   * Label du champs
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * true si champs obligatoire
+   */
+  required: _propTypes.default.bool
+} : {};
+var _default = HiNestedSelectField;
+exports.default = _default;

package/HiSelectNew/HiSelect.js

@@ -59,11 +59,11 @@ var styles = function styles(theme) {
       backgroundColor: theme.palette.background2,
       maxWidth: 500,
       width: '100%',
-      position: 'relative'
+      position: 'relative',
+      zIndex: 1
     },
     popper: {
-      width: '100%',
-      zIndex: 1200
+      width: '100%'
     },
     paper: {
       borderRadius: '0px 2px',
@@ -407,10 +407,20 @@ function (_React$PureComponent) {
     _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
   (0, _createClass2.default)(HiSelect, [{
+    key: "getInputElement",
+    value: function getInputElement(el) {
+      this.searchField = el;
+
+      if (this.props.inputRef) {
+        this.props.inputRef(this.searchField);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -473,9 +483,7 @@ function (_React$PureComponent) {
       }, !!searchable && _react.default.createElement(_HiInput.default, {
         value: searchValue,
         autoFocus: true,
-        inputRef: function inputRef(el) {
-          _this2.searchField = el;
-        },
+        inputRef: this.getInputElement,
         onKeyDown: this.handleKeyDownSearch,
         onChange: this.handleSearch,
         onReset: this.handleSearchReset,
@@ -520,6 +528,7 @@ function (_React$PureComponent) {
         onSubmit: onSubmit,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
+        onReset: this.props.onReset,
         placeholder: placeholder
       }, hiSelectInputProps, {
         refElement: function refElement(el) {
@@ -531,7 +540,6 @@ function (_React$PureComponent) {
         anchorEl: this.inputEl,
         placement: "bottom-start",
         open: open,
-        eventsEnabled: open,
         className: classes.popper,
         disablePortal: true
       }, content));
@@ -662,6 +670,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onMouseLeave: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs
+   */
+  onReset: _propTypes.default.func,
+
   /**
    * Fonction de callback appelée lorsque le scroll atteint le bas de la liste
    */

package/HiSelectNew/HiSelectInput.js

@@ -35,6 +35,8 @@ var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase")
 
 var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
@@ -179,27 +181,76 @@ function (_React$PureComponent) {
       }
     };
 
+    _this.handleKeyDownReset = function (event) {
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'enter' || key === 'space') {
+        _this.handleReset(event);
+
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+
+    _this.handleClick = function (event) {
+      if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
+        _this.props.onClick(event);
+      }
+    };
+
+    _this.handleReset = function (event) {
+      _this.props.onReset(event);
+
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };
+
+    _this.handleBlur = function (event) {
+      if ((!_this.input || !_this.input.contains(event.relatedTarget)) && _this.props.onBlur) {
+        _this.props.onBlur(event);
+      } else {
+        if (_this.input && (!_this.resetIcon || !_this.resetIcon.contains(event.relatedTarget))) {
+          _this.input.focus();
+        }
+      }
+    };
+
+    _this.handleRef = function (el) {
+      _this.input = el;
+
+      if (_this.props.refElement) {
+        _this.props.refElement(el);
+      }
+    };
+
     _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
   (0, _createClass2.default)(HiSelectInput, [{
     key: "render",
     value: function render() {
-      var _classNames, _classNames2;
+      var _classNames,
+          _classNames2,
+          _this2 = this;
 
       var _this$props = this.props,
           classes = _this$props.classes,
           noButton = _this$props.noButton,
           disabled = _this$props.disabled,
           onClick = _this$props.onClick,
+          onReset = _this$props.onReset,
           value = _this$props.value,
           open = _this$props.open,
           focused = _this$props.focused,
           error = _this$props.error,
           id = _this$props.id,
-          placeholder = _this$props.placeholder,
-          refElement = _this$props.refElement; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+          placeholder = _this$props.placeholder; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
       var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), _classNames));
       var iconClass = (0, _classnames.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty2.default)(_classNames2, classes.iconClose, !open), _classNames2));
@@ -214,9 +265,7 @@ function (_React$PureComponent) {
         onBlur: this.props.onBlur,
         role: "button",
         tabIndex: "0",
-        ref: function ref(el) {
-          if (refElement) refElement(el);
-        }
+        ref: this.handleRef
       }, _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
       }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
@@ -224,19 +273,28 @@ function (_React$PureComponent) {
       })) : _react.default.createElement(_ButtonBase.default, {
         id: id,
         className: rootClass,
-        onClick: onClick,
+        onClick: this.handleClick,
         disabled: disabled,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
         onKeyDown: this.handleKeyDown,
         onFocus: this.props.onFocus,
-        onBlur: this.props.onBlur,
-        buttonRef: function buttonRef(el) {
-          if (refElement) refElement(el);
-        }
+        onBlur: this.handleBlur,
+        buttonRef: this.handleRef
       }, _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
-      }, value || placeholder), _react.default.createElement(_Icon.default, {
+      }, value || placeholder), onReset && focused && _react.default.createElement("div", {
+        ref: function ref(el) {
+          _this2.resetIcon = el;
+        }
+      }, _react.default.createElement(_HiIcon.default, {
+        icon: "close",
+        size: 20,
+        color: "neutral",
+        onClick: this.handleReset,
+        onKeyDown: this.handleKeyDownReset,
+        tabIndex: 0
+      })), _react.default.createElement(_Icon.default, {
         classes: {
           root: iconClass
         }
@@ -315,6 +373,11 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onMouseLeave: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs
+   */
+  onReset: _propTypes.default.func,
+
   /**
    * Fonction de callback à la pression de la touche "Entrée"
    */