@hipay/hipay-material-ui 2.0.0-beta.60 → 2.0.0-beta.62

package/HiSelect/HiSelect.js

@@ -5,14 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = exports.INFINITESCROLL_ERROR_MESSAGE = void 0;
+exports.default = exports.styles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -23,43 +21,39 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));
 
 var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
 
-var _reactDom = require("react-dom");
-
-var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));
-
 var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
-var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
-
 var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
-var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
 
-var _HiSearchField = _interopRequireDefault(require("../HiForm/HiSearchField"));
+var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
 
-var _SelectInput = _interopRequireDefault(require("./SelectInput"));
+var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
 
-var _HiChip = _interopRequireDefault(require("../HiChip/HiChip"));
+var _HiSelectInput = _interopRequireDefault(require("./HiSelectInput"));
 
-var _styles = require("../styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _helpers = require("../utils/helpers");
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
-// @inheritedComponent Input
-var INFINITESCROLL_ERROR_MESSAGE = 'La propriété "loadMoreResults" est obligatoire si la prop "infiniteScroll" est à true';
-exports.INFINITESCROLL_ERROR_MESSAGE = INFINITESCROLL_ERROR_MESSAGE;
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var styles = function styles(theme) {
   return {
@@ -75,14 +69,24 @@ var styles = function styles(theme) {
     popperWidth: {
       width: '100% !important'
     },
+    popperRightAlign: {
+      right: 0,
+      left: 'unset!important'
+    },
     paper: {
       borderRadius: '0px 2px',
-      maxHeight: 440,
+      maxHeight: 480,
       transition: 'none !important'
     },
     labelIcon: {
       marginRight: 10
     },
+    labelImg: {
+      height: 18,
+      width: 'auto',
+      margin: '0 4px',
+      verticalAlign: 'middle'
+    },
     selectIconLabel: (0, _extends2.default)({
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -91,9 +95,27 @@ var styles = function styles(theme) {
     }, theme.typography.b1, {
       display: 'inline-flex',
       width: '100%'
-    })
+    }),
+    selectImgLabel: (0, _extends2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 16
+    }, theme.typography.b1, {
+      display: 'inline-flex',
+      width: '100%'
+    }),
+    separator: {
+      borderTop: "1px solid ".concat(theme.palette.input.bottomLine)
+    }
   };
 };
+
+exports.styles = styles;
+
+function filterValue(item, search) {
+  return search === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+}
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -102,90 +124,129 @@ var styles = function styles(theme) {
  * - avec / sans barre de recherche
  * - avec / sans option "All"
  * - prise en compte du type des éléments (text, image, icon, ...)
+ * - les actions du clavier son capturés avec KeyDown
  *
  * Ce composant réuni les sous-composants
- * - SelectInput : affiche l'élément dans le formulaire
- * - HiSearchField : intègre une barre de recherche dans le Popper,
- * il filtre la liste des suggestions
+ * - HiSelectInput : affiche l'élément dans le formulaire
+ * - HiSearchField : intègre une barre de recherche dans le Popper, il filtre la liste des suggestions
  * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
  */
 
 
-exports.styles = styles;
-
 var HiSelect =
 /*#__PURE__*/
 function (_React$PureComponent) {
   (0, _inherits2.default)(HiSelect, _React$PureComponent);
 
-  function HiSelect(_props) {
+  function HiSelect(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelect);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, _props));
-
-    _this.buildHierarchyTrees = function (props) {
-      // Construct two associative arrays
-      // hierarchy[parentId] => children
-      // hierarchySelected[parentId] => selected children
-      var hierarchy = {};
-      var hierarchySelected = {};
-      var value = props.value || [];
-      if (!Array.isArray(value)) value = [props.value];
-      props.options.forEach(function (option) {
-        if (option.hasChildren === true && !hierarchy.hasOwnProperty(option.id)) {
-          hierarchy[option.id] = [];
-          hierarchySelected[option.id] = [];
-        } else if (option.hasOwnProperty('parentId')) {
-          hierarchy[option.parentId].push(option.id);
-
-          if (value.includes(option.id)) {
-            hierarchySelected[option.parentId].push(option.id);
-          }
-        }
-      });
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, props));
+
+    _this.buildSelectProps = function (options) {
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+      var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      // build item list
+      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+        return _this.props.filterFunc(item, search);
+      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+        id: '_all',
+        label: _this.props.translations.all
+      }, _this.props.iconAll && {
+        type: 'icon',
+        icon: _this.props.iconAll
+      })] : []), (0, _toConsumableArray2.default)(options))));
       return {
-        hierarchy: hierarchy,
-        hierarchySelected: hierarchySelected
+        itemList: itemList,
+        inputValue: _this.buildInputValue(options, value, loading)
       };
     };
 
-    _this.focusOnSelectedItem = function () {
-      // On récupère la div parent "overlay"
-      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
-      var multiple = _this.props.multiple;
-      var value = _this.props.value;
-      var selectedIdList = Array.isArray(value) ? value : [value];
-      setTimeout(function () {
-        var focused = false; // Si un ou plusieurs items sont selectionnés, on focus sur le dernier
-
-        if (selectedIdList.length > 0) {
-          var itemSelected = overlay.querySelector("[data-id=\"".concat(selectedIdList[selectedIdList.length - 1], "\"]"));
-
-          if (itemSelected && itemSelected.parentElement.tagName === 'LI') {
-            itemSelected.parentElement.focus();
-            focused = true;
-          }
-        } // Si pas d'item selectionné, ou pas visible (en cas de recherche), focus sur le premier
+    _this.buildInputValue = function (options) {
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var _this$props = _this.props,
+          classes = _this$props.classes,
+          hasAll = _this$props.hasAll,
+          translations = _this$props.translations,
+          type = _this$props.type; // build input value
+
+      var inputValue;
+
+      if (loading && value.length === 1) {
+        inputValue = translations.one_item_selected;
+      } else if (hasAll && options.length === value.length) {
+        inputValue = translations.all;
+        value.unshift('_all');
+      } else if (value.length > 1) {
+        inputValue = translations.n_items_selected.replace('%s', value.length);
+      } else if (value.length === 1) {
+        var item = options.find(function (o) {
+          return o.id === value[0];
+        });
 
+        if (item === undefined) {
+          inputValue = translations.one_item_selected;
+        } else if (type === 'icon' || item.type === 'icon') {
+          inputValue = _react.default.createElement("span", {
+            className: classes.selectIconLabel
+          }, _react.default.createElement(_HiIcon.default, {
+            className: classes.labelIcon,
+            icon: item.icon
+          }), item.label);
+        } else if (type === 'image' || item.type === 'image') {
+          inputValue = _react.default.createElement("span", {
+            className: classes.selectIconLabel
+          }, _react.default.createElement("img", {
+            className: classes.labelImg,
+            src: item.img,
+            alt: item.label,
+            onError: function onError(e) {
+              if (item.fallbackImage) {
+                e.target.src = "".concat(item.fallbackImage);
+              } else {
+                e.target.style.display = 'none';
+              }
+            }
+          }), item.label);
+        } else {
+          inputValue = item.label;
+        }
+      }
 
-        if (selectedIdList.length === 0 || !focused) {
-          // On recupère tous les items
-          var items = overlay.getElementsByTagName('li');
-          var itemToFocus = items[0]; // Si select multiple, et qu'au moins un selectionné, focus sur le 2e item
+      return inputValue;
+    };
 
-          if (multiple && selectedIdList.length > 0) {
-            itemToFocus = items[1];
-          }
+    _this.focusOnFirstItem = function () {
+      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(function () {
+          var item = _this.overlay.getElementsByTagName('li')[0];
 
-          if (itemToFocus) {
-            itemToFocus.focus();
-          }
-        }
-      }, 1);
+          item.focus();
+        }, 1);
+      }
+    };
+
+    _this.getInputElement = function (el) {
+      _this.searchField = el;
+
+      if (_this.props.inputRef) {
+        _this.props.inputRef(_this.searchField);
+      }
     };
 
     _this.handleBlur = function () {
+      _this.handleSearchReset();
+
       _this.setState({
         focused: false
       });
@@ -199,41 +260,57 @@ function (_React$PureComponent) {
           open: true
         });
 
-        var options = _this.props.options.slice();
-
-        _this.handleSuggestions(options);
-
-        if (_this.props.onClick) {
-          _this.props.onClick();
-        } // Gestion du focus
+        _this.handleSuggestions(_this.props.options);
 
+        if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
 
         if (!_this.props.searchable) {
-          // sinon focus sur le dernier élément selectionné
-          _this.focusOnSelectedItem();
+          // Sinon focus sur l'élément sélectionné
+          _this.focusOnSelectedItem(_this.props.value);
         }
       }
     };
 
+    _this.focusOnSelectedItem = function (selectedValue) {
+      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(function () {
+          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+          var item = _this.overlay.getElementsByTagName('li')[0];
+
+          if (selectedValue && typeof selectedValue === 'string') {
+            item = _this.overlay.getElementsByTagName('li')[selectedValue];
+          } else if (selectedValue && typeof selectedValue === 'number') {
+            item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
+          }
+
+          if (item) {
+            item.focus();
+          }
+        }, 1);
+      }
+    };
+
     _this.handleClickAway = function (event) {
       // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!_this.selectInputElement.contains(event.target)) {
+      if (!_this.inputEl.contains(event.target)) {
         _this.handleClose(event);
       }
     };
 
     _this.handleClose = function () {
+      _this.handleSearchReset();
+
+      _this.setState({
+        open: false
+      });
+
       if (_this.props.onClose) {
         _this.props.onClose();
       }
 
-      if (_this.selectInputElement) {
-        _this.selectInputElement.focus();
+      if (_this.inputEl) {
+        _this.inputEl.focus();
       }
-
-      _this.setState({
-        open: false
-      });
     };
 
     _this.handleFocus = function () {
@@ -242,428 +319,238 @@ function (_React$PureComponent) {
       });
     };
 
-    _this.handleKeyDown = function (event) {
-      var nextItem;
-
-      if (event.key === 'ArrowDown') {
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
-      } else if (event.key === 'ArrowUp') {
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (event.key === 'Tab' || event.key === 'Escape') {
-        /* if (!this.props.staticPosition) {
-            document.body.style.overflow = 'auto';
-        } */
-        _this.setState({
-          open: false
-        });
-      }
+    _this.handleKeyDownCapture = function (event) {
+      var key = (0, _keycode.default)(event);
 
-      if (nextItem) {
-        nextItem.focus();
-      }
-    };
+      if (key === 'enter') {
+        if (_this.state.open) {
+          if (_this.props.multiple) {
+            event.stopPropagation();
 
-    _this.handleKeyDownSearch = function (event) {
-      if (_this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-        _this.focusOnSelectedItem();
-      } else if (event.key === 'Enter' && _this.props.onSubmit) {
-        _this.props.onSubmit(event);
-      } else if (event.key === 'Tab' || event.key === 'Escape') {
-        _this.setState({
-          open: false
-        });
+            _this.handleClose();
+          }
+        }
       }
     };
 
-    _this.handleRequestDelete = function (event) {
-      event.stopPropagation();
+    _this.handleKeyDown = function (event) {
+      var key = (0, _keycode.default)(event);
 
-      _this.props.onChange(_this.props.name, []);
-    };
+      if (key === 'esc') {
+        event.preventDefault();
 
-    _this.handleReset = function (event) {
-      if (_this.props.onReset) {
-        event.stopPropagation();
+        _this.handleClose();
+      } else if (key === 'enter') {
+        if (_this.state.open) {
+          if (_this.props.multiple) {
+            _this.handleClose();
+          }
+        }
+      } else if (key === 'space') {
+        event.preventDefault();
 
-        _this.props.onReset(event);
+        if (_this.state.open) {
+          if (!_this.props.multiple) {
+            _this.setState({
+              open: false
+            });
+          }
+        } else {
+          _this.setState({
+            open: true
+          });
+        }
+      } else if (key === 'tab') {
+        _this.handleClose();
       }
     };
 
-    _this.handleScroll = function (event) {
-      if (!_this.props.loadingMoreResults && _this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
-        _this.props.loadMoreResults(_this.state.resultsPageNumber + 1);
+    _this.handleKeyDownSearch = function (event) {
+      var key = (0, _keycode.default)(event);
 
-        _this.setState(function (prevState) {
-          return {
-            resultsPageNumber: prevState.resultsPageNumber + 1
-          };
+      if (_this.overlay && (key === 'down' || key === 'up')) {
+        _this.focusOnFirstItem();
+      } else if (_this.overlay && key === 'esc' || key === 'enter') {
+        event.preventDefault();
+
+        _this.handleClose();
+      } else if (key === 'tab') {
+        _this.setState({
+          open: false
         });
       }
     };
 
-    _this.handleSelect = function (event, item) {
-      var _this$props = _this.props,
-          multiple = _this$props.multiple,
-          value = _this$props.value,
-          onChange = _this$props.onChange,
-          options = _this$props.options,
-          hierarchic = _this$props.hierarchic,
-          pinnedItem = _this$props.pinnedItem;
-      var _this$state = _this.state,
-          hierarchySelected = _this$state.hierarchySelected,
-          hierarchy = _this$state.hierarchy,
-          nbOptions = _this$state.nbOptions;
-      var hiSelected = (0, _extends2.default)({}, hierarchySelected);
-
-      if (multiple) {
-        var valueList = value;
+    _this.handleScroll = function (e) {
+      if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
+        _this.props.onScrollReachBottom();
+      }
+    };
 
-        if (item.id === '_all') {
-          if (valueList.length === nbOptions) {
-            valueList = [];
+    _this.handleSelect = function (event, item) {
+      var _this$props2 = _this.props,
+          hasAll = _this$props2.hasAll,
+          multiple = _this$props2.multiple,
+          onChange = _this$props2.onChange,
+          options = _this$props2.options,
+          value = _this$props2.value;
 
-            if (hierarchic) {
-              // if hierarchic select => empty associative array of selected children
-              Object.keys(hiSelected).forEach(function (key) {
-                hiSelected[key] = [];
-              });
-            }
-          } else {
-            options.forEach(function (option) {
-              if (option.hasChildren !== true && !valueList.includes(option.id) && option.id !== '_all') {
-                valueList.push(option.id);
-              } else if (option.hasChildren === true) {
-                // if hierarchic select => fill associative array of selected children
-                hiSelected[option.id] = hierarchy[option.id];
-              }
-            });
-          }
-        } else if (valueList.includes(item.id) || item.hasChildren === true && hierarchySelected[item.id].length === hierarchy[item.id].length) {
-          // item déjà sélectionné => on le déselectionne
-          if (item.hasChildren !== true) {
-            valueList = valueList.filter(function (val) {
-              return val !== item.id;
-            });
-          }
+      if (!multiple) {
+        // single value
+        _this.handleClose();
 
-          if (item.hasChildren === true) {
-            // remove all children
-            valueList = valueList.filter(function (val) {
-              return !_this.state.hierarchy[item.id].includes(val);
-            });
-            hiSelected[item.id] = [];
-          } else if (item.hasOwnProperty('parentId')) {
-            // Si item est un enfant on l'enlève du tableau associatif des
-            // elmts sélectionnés
-            hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
-          }
+        onChange(event, item.id, item);
+      } else if (hasAll && item.id === '_all') {
+        if (value.length === options.length) {
+          // unselect _all options
+          onChange(event, [], item);
         } else {
-          if (pinnedItem && item.id === pinnedItem.id) {
-            Object.keys(hiSelected).map(function (parentItemId) {
-              hiSelected[parentItemId] = [];
-              return true;
-            });
-            valueList = [item.id];
-          } else {
-            // item non sélectionné => on le sélectionne
-            if (item.hasChildren !== true) valueList.push(item.id);
-
-            if (pinnedItem && valueList.includes(pinnedItem.id)) {
-              valueList.splice(valueList.indexOf(pinnedItem.id), 1);
-            }
-          }
-
-          if (item.hasChildren === true) {
-            // Si item parent => on ajoute tous les enfants
-            // Ou on les supprime s'ils sont déjà tous sélectionnés (dans une liste filtrée)
-            var idsInSuggestions = [];
-
-            _this.state.suggestions.forEach(function (suggestion) {
-              if (_this.state.hierarchy[item.id].includes(suggestion.id)) {
-                idsInSuggestions.push(suggestion.id);
-              }
-            }); // if(hierarchySelected[item.id].length > 0) {}
-
-
-            var allChildrenSuggestionsSelected = true;
-            idsInSuggestions.forEach(function (id) {
-              if (!hierarchySelected[item.id].includes(id)) {
-                allChildrenSuggestionsSelected = false;
-              }
-            });
-
-            if (allChildrenSuggestionsSelected === true) {
-              // On supprime les enfants car déjà tous sélectionnés
-              idsInSuggestions.forEach(function (id) {
-                valueList.splice(valueList.indexOf(id), 1);
-                hiSelected[item.id].splice(hiSelected[item.id].indexOf(id), 1);
-              });
-            } else {
-              // On ajoute tous les enfants filtrés au éléments sélectionnés
-              valueList = (0, _helpers.arrayUnique)(valueList.concat(idsInSuggestions));
-              hiSelected[item.id] = (0, _helpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
-            }
-
-            _this.setState({
-              hierarchySelected: hiSelected
-            });
-          } else if (item.hasOwnProperty('parentId')) {
-            // Si item est un enfant on l'ajoute du tableau associatif des
-            // elmts sélectionnés
-            hiSelected[item.parentId].push(item.id);
-          }
+          // select _all options
+          onChange(event, options.map(function (option) {
+            return option.id;
+          }), item);
         }
-
-        _this.setState({
-          hierarchySelected: hiSelected
-        });
-
-        onChange(event, valueList, item);
+      } else if (value.includes(item.id)) {
+        // unselect item
+        onChange(event, value.filter(function (id) {
+          return id !== item.id;
+        }), item);
       } else {
-        onChange(event, item.id, item);
-
-        _this.handleClose();
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
     _this.handleSuggestions = function (suggestions) {
-      var _this$props2 = _this.props,
-          options = _this$props2.options,
-          hasAll = _this$props2.hasAll,
-          iconAll = _this$props2.iconAll,
-          translations = _this$props2.translations,
-          multiple = _this$props2.multiple;
+      var _this$props3 = _this.props,
+          hasAll = _this$props3.hasAll,
+          iconAll = _this$props3.iconAll,
+          translations = _this$props3.translations;
 
       if (suggestions.length === 0) {
-        // Handle No Result
-        // FIX to remove all item
-        suggestions = [];
-        suggestions.push({
-          id: '_no_result',
-          type: 'text',
-          disabled: true,
-          centered: true,
-          checkbox: false,
-          label: translations.no_result_match
+        // Add '_no_result' suggestion
+        _this.setState(function (prevState) {
+          return (0, _extends2.default)({}, prevState, {
+            suggestions: [{
+              id: '_no_result',
+              type: 'text',
+              disabled: true,
+              centered: true,
+              hideCheckbox: true,
+              label: translations.no_result_match
+            }]
+          });
         });
-      } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
-        // Handle 'All'
-        if (suggestions.filter(function (suggestion) {
-          return suggestion.id === '_all';
-        }).length === 0) {
-          var allItem = {
+      } else {
+        _this.setState({
+          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
-            icon: iconAll,
             label: translations.all
-          };
+          }, iconAll && {
+            type: 'icon',
+            icon: iconAll
+          })] : []), (0, _toConsumableArray2.default)(suggestions))
+        });
+      }
+    };
 
-          if (iconAll !== false) {
-            allItem.type = 'icon';
-          }
+    _this.handleSearch = function (e, inputValue) {
+      var searchValue = inputValue && e.target.value ? inputValue : e.target.value;
 
-          suggestions.unshift(allItem);
-        }
+      if (_this.props.onSearch) {
+        _this.props.onSearch(e, searchValue);
+      } else {
+        _this.setState({
+          searchValue: searchValue
+        });
       }
+    };
 
-      _this.setState({
-        suggestions: suggestions
-      });
+    _this.handleSearchReset = function () {
+      _this.handleSearch({
+        target: {
+          value: ''
+        }
+      }, '');
     };
 
     _this.state = {
       open: false,
       focused: false,
-      suggestions: [],
-      hierarchySelected: {},
-      hierarchy: {},
-      nbOptions: 0,
-      dynamic: _props.dynamic || false,
-      resultsPageNumber: 1
-    }; // Check if value is in options
-
-    var valueInOptions = false;
-    var _val = _props.value; // No options provided.
-
-    if (!_props.options.length || !_val || !_val.length) {
-      valueInOptions = true;
-    } else {
-      // Check if an option match value prop.
-      _props.options.forEach(function (item) {
-        if (!valueInOptions && _val.indexOf(item.id) !== -1) {
-          valueInOptions = true;
-        }
-      });
-
-      if (!valueInOptions && _props.pinnedItem) {
-        if (_props.value.indexOf(_props.pinnedItem.id) >= 0) {
-          valueInOptions = true;
-        }
-      }
-    }
-
-    if (!valueInOptions) {
-      throw new Error('prop value provided does not match any option.');
-    }
-
-    if (_props.hierarchic === true && _props.options.length > 1) {
-      var hierarchyTrees = _this.buildHierarchyTrees(_props);
-
-      _this.state.hierarchy = hierarchyTrees.hierarchy;
-      _this.state.hierarchySelected = hierarchyTrees.hierarchySelected;
-    }
-
-    if (_props.options.length > 0) {
-      // Get real options number (parent & _all are not real options)
-      var optionsLength = 0;
-
-      _props.options.forEach(function (option) {
-        if (option.hasChildren !== true && option.id !== '_all') {
-          optionsLength += 1;
-        }
-      });
-
-      _this.state.nbOptions = optionsLength;
-    } else if (!_props.dynamic) {
-      _this.state.dynamic = true;
-    }
-
+      searchValue: props.searchValue ? undefined : '',
+      suggestions: props.options,
+      openDown: true
+    };
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _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: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
-        this.handleSuggestions(nextProps.options);
-        var optionsLength = 0;
-        nextProps.options.forEach(function (option) {
-          if (option.hasChildren !== true && option.id !== '_all') {
-            optionsLength += 1;
-          }
-        });
-        this.setState({
-          nbOptions: optionsLength
-        });
-      }
-
-      if (nextProps.hierarchic === true && nextProps.options.length > 1) {
-        var hierarchyTrees = this.buildHierarchyTrees(nextProps);
-        this.setState({
-          hierarchy: hierarchyTrees.hierarchy,
-          hierarchySelected: hierarchyTrees.hierarchySelected
-        });
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.autoFocus) {
+        this.inputEl.focus();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          disabled = _this$props3.disabled,
-          error = _this$props3.error,
-          loading = _this$props3.loading,
-          options = _this$props3.options,
-          searchable = _this$props3.searchable,
-          displayAsChip = _this$props3.displayAsChip,
-          type = _this$props3.type,
-          value = _this$props3.value,
-          translations = _this$props3.translations,
-          parentItemSelectable = _this$props3.parentItemSelectable,
-          icon = _this$props3.icon,
-          parentIcon = _this$props3.parentIcon,
-          hoverIcon = _this$props3.hoverIcon,
-          checkedIcon = _this$props3.checkedIcon,
-          id = _this$props3.id,
-          placeholder = _this$props3.placeholder,
-          staticPosition = _this$props3.staticPosition,
-          pinnedItem = _this$props3.pinnedItem,
-          hasAll = _this$props3.hasAll,
-          infiniteScroll = _this$props3.infiniteScroll,
-          loadingMoreResults = _this$props3.loadingMoreResults,
-          multiple = _this$props3.multiple,
-          other = (0, _objectWithoutProperties2.default)(_this$props3, ["classes", "disabled", "error", "loading", "options", "searchable", "displayAsChip", "type", "value", "translations", "parentItemSelectable", "icon", "parentIcon", "hoverIcon", "checkedIcon", "id", "placeholder", "staticPosition", "pinnedItem", "hasAll", "infiniteScroll", "loadingMoreResults", "multiple"]);
-      var _this$state2 = this.state,
-          open = _this$state2.open,
-          stateSuggestions = _this$state2.suggestions,
-          focused = _this$state2.focused,
-          dynamic = _this$state2.dynamic;
-      var display = '';
-      var selectedIdList;
-
-      if (Array.isArray(value)) {
-        selectedIdList = value;
-      } else if (value) {
-        selectedIdList = [value];
-      } else {
-        selectedIdList = [];
-      }
-
-      var suggestions = (0, _toConsumableArray2.default)(stateSuggestions);
-
-      if (pinnedItem) {
-        suggestions.unshift(pinnedItem);
-      } // If loading
+      var _classNames,
+          _this2 = this;
+
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          disabled = _this$props4.disabled,
+          error = _this$props4.error,
+          loading = _this$props4.loading,
+          options = _this$props4.options,
+          searchable = _this$props4.searchable,
+          displayAsChip = _this$props4.displayAsChip,
+          type = _this$props4.type,
+          value = _this$props4.value,
+          multiple = _this$props4.multiple,
+          translations = _this$props4.translations,
+          hiSearchInputProps = _this$props4.hiSearchInputProps,
+          hiSelectableListProps = _this$props4.hiSelectableListProps,
+          hiSelectInputProps = _this$props4.hiSelectInputProps,
+          id = _this$props4.id,
+          onScrollReachBottom = _this$props4.onScrollReachBottom,
+          onSubmit = _this$props4.onSubmit,
+          placeholder = _this$props4.placeholder,
+          startAdornment = _this$props4.startAdornment,
+          staticPosition = _this$props4.staticPosition,
+          _this$props4$searchVa = _this$props4.searchValue,
+          searchValue = _this$props4$searchVa === void 0 ? this.state.searchValue : _this$props4$searchVa,
+          _this$props4$buildSel = _this$props4.buildSelectProps,
+          buildSelectProps = _this$props4$buildSel === void 0 ? this.buildSelectProps : _this$props4$buildSel;
+      var _this$state = this.state,
+          open = _this$state.open,
+          focused = _this$state.focused;
 
-
-      if (loading && !loadingMoreResults) {
-        suggestions.unshift({
-          id: '_loading',
-          type: 'loader',
-          disabled: true,
-          centered: true,
-          checkbox: false,
-          label: 'loading'
-        });
-      }
-
-      if ((dynamic || loading) && selectedIdList.length === 1) {
-        display = translations.one_item_selected;
-      } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
-        display = translations.n_items_selected.replace('%s', selectedIdList.length);
-      } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
-        display = translations.all;
-      } else if (selectedIdList.length === 1) {
-        var item = options.find(function (o) {
-          return o.id === selectedIdList[0];
-        });
-
-        if (item === undefined) {
-          display = translations.one_item_selected;
-        } else if (type !== 'icon') {
-          if (pinnedItem) {
-            item = pinnedItem;
-          }
-
-          display = item.label;
-        } else {
-          display = _react.default.createElement("span", {
-            className: classes.selectIconLabel
-          }, _react.default.createElement(_HiIcon.default, {
-            icon: item.icon,
-            className: classes.labelIcon
-          }), item.label);
+      if (multiple) {
+        if (!Array.isArray(value)) {
+          throw new Error('HiPay Material-UI: the `value` property must be an array ' + 'when using the `HiSelect` component with `multiple`.');
         }
       }
 
-      if (displayAsChip) {
-        var chipFilter = _react.default.createElement(_HiChip.default, {
-          label: placeholder || display,
-          onDelete: this.handleRequestDelete
-        });
+      var selectedItemIdList = [];
 
-        if (display) {
-          display = chipFilter;
-        }
+      if (value) {
+        selectedItemIdList = multiple ? (0, _toConsumableArray2.default)(value) : [value];
       }
 
-      var popperClass = (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)({}, classes.popperWidth, !this.props.containerWidth));
-      var allSelected = false;
-
-      if (selectedIdList.length === this.state.nbOptions) {
-        allSelected = true;
-      }
+      var _buildSelectProps = buildSelectProps(options, selectedItemIdList, searchValue, loading),
+          itemList = _buildSelectProps.itemList,
+          _buildSelectProps$inp = _buildSelectProps.inputValue,
+          inputValue = _buildSelectProps$inp === void 0 ? this.buildInputValue(options, selectedItemIdList, loading) : _buildSelectProps$inp;
 
       var popperStyle = {};
 
@@ -677,70 +564,82 @@ function (_React$PureComponent) {
         }
       }
 
-      if (infiniteScroll && loadingMoreResults) {
-        suggestions.push({
-          id: '_loading',
-          type: 'loader',
-          disabled: true,
-          centered: true,
-          checkbox: false,
-          label: 'loading'
-        });
+      var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
+
+      var searchInput = function searchInput(position) {
+        if (searchable) {
+          return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
+            value: searchValue,
+            autoFocus: true,
+            inputRef: _this2.getInputElement,
+            onKeyDown: _this2.handleKeyDownSearch,
+            onChange: _this2.handleSearch,
+            onReset: _this2.handleSearchReset,
+            placeholder: translations.search,
+            startAdornment: 'search',
+            tabIndex: 0,
+            className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.separator, position === 'top'))
+          }, hiSearchInputProps));
+        }
+
+        return null;
+      }; // Replace popper onSearch when popper displayed on top of selectButton
+
+
+      if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
+        // +1 for search input
+        var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+        popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
+      } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
+        popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
       }
 
-      var content = _react.default.createElement(_ClickAwayListener.default, {
-        onClickAway: this.handleClickAway
-      }, _react.default.createElement(_Grow.default, {
-        in: open,
-        id: "menu-list",
-        style: {
-          transformOrigin: '0 0 0'
+      var content = function content(_ref) {
+        var placement = _ref.placement;
+
+        if (placement !== _this2.placement) {
+          _this2.placement = placement;
         }
-      }, _react.default.createElement(_Paper.default, {
-        className: classes.paper
-      }, !!searchable && _react.default.createElement(_HiSearchField.default, {
-        itemList: options,
-        onFilteredList: this.handleSuggestions,
-        filterPropertyList: ['label'],
-        placeholder: translations.search,
-        autoFocus: true,
-        onSearch: this.props.onSearch,
-        inputRef: function inputRef(el) {
-          _this2.searchField = el;
-        },
-        onKeyDown: this.handleKeyDownSearch
-      }), _react.default.createElement(_reactCustomScrollbars.default, {
-        ref: function ref(contentEl) {
-          _this2.optionsContent = contentEl;
-        },
-        autoHeight: true,
-        autoHeightMax: 400,
-        onScroll: this.handleScroll
-      }, _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
-        type: type,
-        parentItemSelectable: parentItemSelectable,
-        itemList: suggestions,
-        onSelect: this.handleSelect,
-        selectedItemIdList: selectedIdList,
-        hideCheckbox: !multiple,
-        translations: translations,
-        icon: icon,
-        parentIcon: parentIcon,
-        hoverIcon: hoverIcon,
-        checkedIcon: checkedIcon,
-        allSelected: allSelected,
-        value: value,
-        onKeyDown: this.handleKeyDown
-      }, other))))));
+
+        return _react.default.createElement(_ClickAwayListener.default, {
+          onClickAway: _this2.handleClickAway
+        }, _react.default.createElement(_Grow.default, {
+          in: open,
+          id: "menu-list",
+          style: {
+            transformOrigin: '0 0 0'
+          }
+        }, _react.default.createElement(_Paper.default, {
+          className: classes.paper
+        }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+          ref: function ref(contentEl) {
+            _this2.optionsContent = contentEl;
+          },
+          autoHeight: true,
+          autoHeightMax: 430
+        }, onScrollReachBottom && {
+          onScroll: _this2.handleScroll
+        }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
+          type: type,
+          itemList: itemList,
+          onSelect: _this2.handleSelect,
+          selectedItemIdList: selectedItemIdList,
+          fallbackImage: _this2.props.fallbackImage,
+          overlay: _this2.overlay,
+          value: value
+        }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+      };
 
       return _react.default.createElement("div", {
         className: classes.root,
         ref: function ref(el) {
           _this2.overlay = el;
-        }
-      }, _react.default.createElement(_SelectInput.default, {
+        },
+        onKeyDown: this.handleKeyDown,
+        onKeyDownCapture: this.handleKeyDownCapture
+      }, _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
         id: id,
-        value: placeholder || display,
+        value: inputValue,
         open: open,
         focused: focused,
         type: type,
@@ -750,43 +649,65 @@ function (_React$PureComponent) {
         onClick: this.handleClick,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        onKeyDown: this.handleKeyDown,
+        onSubmit: onSubmit,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
+        onReset: this.props.onReset,
+        placeholder: placeholder
+      }, hiSelectInputProps, {
         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, {
+          _this2.inputEl = el;
+        }
+      })), open && staticPosition ? _react.default.createElement("div", {
+        style: popperStyle,
+        className: popperClass
+      }, content({})) : _react.default.createElement(_Popper.default, {
         anchorEl: this.inputEl,
         placement: "bottom-start",
         open: open,
         className: popperClass,
-        style: popperStyle,
-        disablePortal: true
+        disablePortal: true,
+        style: popperStyle
       }, content));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (nextProps.options !== prevState.suggestions) {
+        return (0, _extends2.default)({}, prevState, {
+          suggestions: nextProps.options
+        });
+      }
+
+      return null;
+    }
+    /**
+     * Build itemList & inputValue from select props
+     * @param options
+     * @param value
+     * @param search
+     * @param loading
+     * @returns {{itemList: *[], inputValue: *}}
+     */
+
   }]);
   return HiSelect;
 }(_react.default.PureComponent);
 
 HiSelect.defaultProps = {
-  containerWidth: 0,
+  align: 'left',
+  autoFocus: false,
   disabled: false,
   displayAsChip: false,
-  dynamic: false,
   error: false,
   hasAll: false,
-  hasMore: false,
-  hierarchic: false,
-  iconAll: false,
-  infiniteScroll: false,
-  loadingMoreResults: false,
+  hiSelectableListProps: {},
+  hiSelectInputProps: {},
+  hiSearchInputProps: {},
   multiple: false,
-  parentItemSelectable: false,
-  type: 'text',
+  placeholder: '',
+  searchable: false,
+  staticPosition: false,
   translations: {
     all: 'All',
     no_result_match: 'No result match',
@@ -796,14 +717,16 @@ HiSelect.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  searchable: false,
-  staticPosition: false
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  align: _propTypes.default.oneOf(['left', 'right']),
+
   /**
-   * Icon affiché lorsque l'item est sélectionné
+   * Permet de forcer le focus sur le composant
    */
-  checkedIcon: _propTypes.default.node,
+  autoFocus: _propTypes.default.bool,
 
   /**
    * Useful to extend the style applied to components.
@@ -825,77 +748,56 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   displayAsChip: _propTypes.default.bool,
 
-  /**
-   * Option permettant de définir si les options du select sont dynamiques.
-   * Si les options du select sont initialisées à vide, alors ce sera mis à true
-   * automatiquement.
-   */
-  dynamic: _propTypes.default.bool,
-
   /**
    * Applique le style error
    */
   error: _propTypes.default.bool,
 
   /**
-   * Affiche l'élément 'All'
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
    */
-  hasAll: _propTypes.default.bool,
+  fallbackImage: _propTypes.default.string,
+
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
 
   /**
-   * Indique si l'infinite scroll doit rechercher de nouveaux résultats
+   * Affiche l'élément 'All'
    */
-  hasMore: _propTypes.default.bool,
+  hasAll: _propTypes.default.bool,
 
   /**
-   * Les items sont hiérarchisés
+   * Override HiInput props (for search)
    */
-  hierarchic: _propTypes.default.bool,
+  hiSearchInputProps: _propTypes.default.object,
 
   /**
-   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+   * Override HiSelectableList props
    */
-  hoverIcon: _propTypes.default.node,
+  hiSelectableListProps: _propTypes.default.object,
 
   /**
-   * Icon affiché lorsque l'item n'est pas sélectionné
+   * Override HiSelectInput props
    */
-  icon: _propTypes.default.node,
+  hiSelectInputProps: _propTypes.default.object,
 
   /**
    * Nom de l'icône
    */
-  iconAll: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  iconAll: _propTypes.default.string,
 
   /**
    * id du select
    */
   id: _propTypes.default.string,
 
-  /**
-   * Infinite scroll dans le select dans le cas où il y a beaucoup de résultats à afficher
-   * afin d'éviter un lag du navigateur
-   */
-  infiniteScroll: _propTypes.default.bool,
-
   /**
    * Ajoute un loader
    */
   loading: _propTypes.default.bool,
 
-  /**
-   * Ajoute un loader en bas pour l'infiniteScroll
-   */
-  loadingMoreResults: _propTypes.default.bool,
-
-  /**
-   * Fonction de callback appelée lorsque l'utilisateur arrive en bas de la liste des options
-   * afin de charger les nouvelles options
-   *
-   * @param {int} pageNumber
-   */
-  loadMoreResults: _propTypes.default.func,
-
   /**
    * Autorise la sélection de plusieurs valeurs
    */
@@ -914,11 +816,6 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: _propTypes.default.func.isRequired,
 
-  /**
-   * Fonction de callback appelée click dans l'input
-   */
-  onClick: _propTypes.default.func,
-
   /**
    * Fonction de callback appelée lorsqu'on ferme le select
    */
@@ -940,18 +837,14 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   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
-   *
-   * @param {object} event
-   * @param {string} value
+   * Fonction de callback appelée lorsque le scroll atteint le bas de la liste
    */
-  onSearch: _propTypes.default.func,
+  onScrollReachBottom: _propTypes.default.func,
 
   /**
-   * Fonction de callback à la pression de la touche "Entrée"
+   * Fonction de callback appelée lorsque le champs de recherche est utilisé
    */
-  onSubmit: _propTypes.default.func,
+  onSearch: _propTypes.default.func,
 
   /**
    * Listes des options du select
@@ -959,23 +852,7 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   options: _propTypes.default.array.isRequired,
 
   /**
-   * Icon affiché lorsqu'un item parent n'est pas sélectionné
-   */
-  parentIcon: _propTypes.default.node,
-
-  /**
-   * Les items parents sont sélectionnables
-   */
-  parentItemSelectable: _propTypes.default.bool,
-
-  /**
-   * Item épinglé en début de liste
-   */
-  pinnedItem: _propTypes.default.object,
-
-  /**
-   * Placeholder affiché lorsque le select est fermé
-   * Surcharge le placeholder par défaut
+   * Placeholder affiché lorsque l'input est vide
    */
   placeholder: _propTypes.default.string,
 
@@ -985,7 +862,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   searchable: _propTypes.default.bool,
 
   /**
-   * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
+   * Node qui s'ajoute entre la barre de recherche et la liste de résultats
+   */
+  startAdornment: _propTypes.default.object,
+
+  /**
+   * Si true, le contenu du select sera dans une div static plutôt que dans une popper absolute
    */
   staticPosition: _propTypes.default.bool,
 
@@ -1005,7 +887,7 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelect'
 })(HiSelect);