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

package/HiSelect/HiSelect.js

@@ -1,130 +1,99 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _keys = require('babel-runtime/core-js/object/keys');
-
-var _keys2 = _interopRequireDefault(_keys);
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
+exports.default = exports.styles = exports.INFINITESCROLL_ERROR_MESSAGE = void 0;
 
-var _react = require('react');
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react2 = _interopRequireDefault(_react);
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _propTypes = require('prop-types');
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _classnames = require('classnames');
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _Grow = require('material-ui/transitions/Grow');
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _Grow2 = _interopRequireDefault(_Grow);
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _reactDom = require('react-dom');
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _Paper = require('material-ui/Paper');
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _Paper2 = _interopRequireDefault(_Paper);
+var _react = _interopRequireDefault(require("react"));
 
-var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactPopper = require('react-popper');
+var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
 
-var _mdiMaterialUi = require('mdi-material-ui');
+var _reactDom = require("react-dom");
 
-var _HiSelectableList = require('../HiSelectableList');
+var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));
 
-var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
-var _HiForm = require('../HiForm');
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
 
-var _SelectInput = require('./SelectInput');
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
-var _SelectInput2 = _interopRequireDefault(_SelectInput);
+var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
 
-var _HiChip = require('../HiChip/HiChip');
+var _HiSearchField = _interopRequireDefault(require("../HiForm/HiSearchField"));
 
-var _HiChip2 = _interopRequireDefault(_HiChip);
+var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 
-var _styles = require('../styles');
+var _HiChip = _interopRequireDefault(require("../HiChip/HiChip"));
 
-var _hiHelpers = require('../utils/hiHelpers');
+var _styles = require("../styles");
 
-var _HiIconBuilder = require('../utils/HiIconBuilder');
+var _helpers = require("../utils/helpers");
 
-var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 // @inheritedComponent Input
-
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: {
-            backgroundColor: theme.palette.background2,
-            maxWidth: 500,
-            width: '100%',
-            position: 'relative'
-        },
-        popper: {
-            width: '100%',
-            zIndex: 9
-        },
-        paper: {
-            borderRadius: '0px 2px',
-            maxHeight: 440,
-            transition: 'none !important'
-        },
-        labelIcon: {
-            marginRight: 10
-        },
-        selectIconLabel: (0, _extends3.default)({
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            paddingRight: 16
-        }, theme.typography.body1, {
-            display: 'inline-flex',
-            width: '100%'
-        })
-    };
+var INFINITESCROLL_ERROR_MESSAGE = 'La propriété "loadMoreResults" est obligatoire si la prop "infiniteScroll" est à true';
+exports.INFINITESCROLL_ERROR_MESSAGE = INFINITESCROLL_ERROR_MESSAGE;
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      backgroundColor: theme.palette.background2,
+      maxWidth: 500,
+      width: '100%',
+      position: 'relative'
+    },
+    popper: {
+      width: '100%',
+      zIndex: 1200
+    },
+    paper: {
+      borderRadius: '0px 2px',
+      maxHeight: 440,
+      transition: 'none !important'
+    },
+    labelIcon: {
+      marginRight: 10
+    },
+    selectIconLabel: (0, _extends2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 16
+    }, theme.typography.b1, {
+      display: 'inline-flex',
+      width: '100%'
+    })
+  };
 };
-
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -141,707 +110,895 @@ var styles = exports.styles = function styles(theme) {
  * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
  */
 
-var HiSelect = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiSelect, _React$PureComponent);
 
-    function HiSelect(props) {
-        (0, _classCallCheck3.default)(this, HiSelect);
+exports.styles = styles;
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSelect.__proto__ || (0, _getPrototypeOf2.default)(HiSelect)).call(this, props));
+var HiSelect =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelect, _React$PureComponent);
 
-        _initialiseProps.call(_this);
+  function HiSelect(_props) {
+    var _this;
 
-        _this.state = {
-            open: false,
-            focused: false,
-            suggestions: [],
-            hierarchySelected: {},
-            hierarchy: {},
-            nbOptions: 0,
-            dynamic: false
-        };
+    (0, _classCallCheck2.default)(this, HiSelect);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, _props));
 
-        // 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;
-                }
-            });
-        }
+    _this.handleClick = function () {
+      if (_this.state.open) {
+        _this.handleClose();
+      } else {
+        _this.setState({
+          open: true
+        });
 
-        if (!valueInOptions) {
-            throw new Error('prop value provided does not match any option.');
-        }
+        var options = _this.props.options.slice();
+
+        _this.handleSuggestions(options);
+
+        if (_this.props.onClick) {
+          _this.props.onClick();
+        } // Gestion du focus
 
-        if (props.hierarchic === true && props.options.length > 1) {
-            var hierarchyTrees = _this.buildHierarchyTrees(props);
 
-            _this.state.hierarchy = hierarchyTrees.hierarchy;
-            _this.state.hierarchySelected = hierarchyTrees.hierarchySelected;
+        if (!_this.props.searchable) {
+          // sinon focus sur le dernier élément selectionné
+          _this.focusOnSelectedItem();
         }
+      }
+    };
 
-        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++;
-                }
-            });
-            _this.state.nbOptions = optionsLength;
-        } else {
-            _this.state.dynamic = true;
+    _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);
+          }
         }
+      });
+      return {
+        hierarchy: hierarchy,
+        hierarchySelected: hierarchySelected
+      };
+    };
 
-        _this.handleSelect = _this.handleSelect.bind(_this);
-        _this.handleClick = _this.handleClick.bind(_this);
-        _this.handleClose = _this.handleClose.bind(_this);
-        _this.handleRequestDelete = _this.handleRequestDelete.bind(_this);
-        _this.handleSuggestions = _this.handleSuggestions.bind(_this);
-        _this.handleFocus = _this.handleFocus.bind(_this);
-        _this.handleBlur = _this.handleBlur.bind(_this);
-        return _this;
-    }
+    _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
+
+
+        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
+
+          if (multiple && selectedIdList.length > 0) {
+            itemToFocus = items[1];
+          }
+
+          if (itemToFocus) {
+            itemToFocus.focus();
+          }
+        }
+      }, 1);
+    };
 
-    (0, _createClass3.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++;
-                    }
-                });
-                this.setState({ nbOptions: optionsLength });
-            }
+    _this.handleKeyDown = function (event) {
+      var nextItem;
 
-            if (nextProps.hierarchic === true && nextProps.options.length > 1) {
-                var hierarchyTrees = this.buildHierarchyTrees(nextProps);
-                this.setState({ hierarchy: hierarchyTrees.hierarchy, hierarchySelected: hierarchyTrees.hierarchySelected });
+      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') {
+        /* if (!this.props.staticPosition) {
+            document.body.style.overflow = 'auto';
+        } */
+        _this.setState({
+          open: false
+        });
+      } else if (event.key === 'Escape') {
+        _this.setState({
+          open: false
+        });
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
+    _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);
+      }
+    };
+
+    _this.handleFocus = function () {
+      _this.setState({
+        focused: true
+      });
+    };
+
+    _this.handleBlur = function () {
+      _this.setState({
+        focused: false
+      });
+    };
+
+    _this.handleClose = function () {
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+
+      if (_this.selectInputElement) {
+        _this.selectInputElement.focus();
+      }
+
+      _this.setState({
+        open: false
+      });
+    };
+
+    _this.handleClickAway = function (event) {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!_this.selectInputElement.contains(event.target)) {
+        _this.handleClose(event);
+      }
+    };
+
+    _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;
+
+        if (item.id === '_all') {
+          if (valueList.length === nbOptions) {
+            valueList = [];
+
+            if (hierarchic) {
+              // if hierarchic select => empty associative array of selected children
+              Object.keys(hiSelected).forEach(function (key) {
+                hiSelected[key] = [];
+              });
             }
-        }
-    }, {
-        key: 'buildHierarchyTrees',
-        value: function buildHierarchyTrees(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);
-                    }
-                }
+          } 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];
+              }
             });
-            return { hierarchy: hierarchy, hierarchySelected: hierarchySelected };
-        }
+          }
+        } 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;
+            });
+          }
 
-        // Key down on list items
-
-
-        // Key down on search input
-
-
-        /**
-         * Call onChange with the updated value
-         *
-         * - handle single value
-         * - handle multiple value
-         * - handle '_all' id
-         *
-         * @param event
-         * @param item
-         */
-
-
-        /**
-         * Update suggestions list
-         * - add '_no_result' item if suggestion list is empty
-         * - add '_all' item if suggestion list is complete
-         * @param suggestions
-         */
-
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this2 = this;
-
-            var _props = this.props,
-                classes = _props.classes,
-                disabled = _props.disabled,
-                error = _props.error,
-                options = _props.options,
-                checkbox = _props.checkbox,
-                searchable = _props.searchable,
-                displayAsChip = _props.displayAsChip,
-                type = _props.type,
-                value = _props.value,
-                translations = _props.translations,
-                parentItemSelectable = _props.parentItemSelectable,
-                icon = _props.icon,
-                parentIcon = _props.parentIcon,
-                hoverIcon = _props.hoverIcon,
-                checkedIcon = _props.checkedIcon,
-                hierarchic = _props.hierarchic,
-                id = _props.id,
-                placeholder = _props.placeholder;
-            var _state = this.state,
-                open = _state.open,
-                suggestions = _state.suggestions,
-                focused = _state.focused;
-
-
-            var display = '';
-            var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
-
-            if (this.state.dynamic && selectedIdList.length === 1) {
-                display = translations.one_item_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions !== selectedIdList.length && 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) {
-                if (type !== 'icon') {
-                    display = options.find(function (o) {
-                        return o.id === selectedIdList[0];
-                    }).label;
-                } else {
-                    var optionSelected = options.find(function (o) {
-                        return o.id === selectedIdList[0];
-                    });
-                    display = _react2.default.createElement(
-                        'span',
-                        { className: classes.selectIconLabel },
-                        _react2.default.createElement(_HiIconBuilder2.default, { icon: optionSelected.icon, className: classes.labelIcon }),
-                        optionSelected.label
-                    );
-                }
-            }
+          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);
+          }
+        } 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 (displayAsChip) {
-                var chipFilter = _react2.default.createElement(_HiChip2.default, { label: placeholder || display, onDelete: this.handleRequestDelete });
-                if (display) {
-                    display = chipFilter;
-                }
+            if (pinnedItem && valueList.includes(pinnedItem.id)) {
+              valueList.splice(valueList.indexOf(pinnedItem.id), 1);
             }
+          }
 
-            var popperClass = (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open));
+          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 allSelected = false;
-            if (selectedIdList.length === this.state.nbOptions) {
-                allSelected = true;
-            }
 
-            var popperStyle = {};
-            if (this.props.containerWidth > 0) {
-                popperStyle = { width: this.props.containerWidth };
+            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));
             }
 
-            return _react2.default.createElement(
-                'div',
-                {
-                    className: classes.root,
-                    ref: function ref(el) {
-                        _this2.overlay = el;
-                    }
-                },
-                _react2.default.createElement(
-                    _reactPopper.Manager,
-                    null,
-                    _react2.default.createElement(
-                        _reactPopper.Target,
-                        null,
-                        _react2.default.createElement(_SelectInput2.default, {
-                            id: id,
-                            value: placeholder || display,
-                            open: open,
-                            focused: focused,
-                            type: type,
-                            disabled: disabled,
-                            noButton: displayAsChip,
-                            error: error,
-                            onClick: this.handleClick,
-                            onFocus: this.handleFocus,
-                            onBlur: this.handleBlur,
-                            onMouseEnter: this.props.onMouseEnter,
-                            onMouseLeave: this.props.onMouseLeave,
-                            refElement: function refElement(el) {
-                                _this2.selectInputElement = el;
-                            }
-                        })
-                    ),
-                    open && _react2.default.createElement(
-                        _reactPopper.Popper,
-                        {
-                            placement: 'bottom-start',
-                            eventsEnabled: open,
-                            className: popperClass,
-                            style: popperStyle
-                        },
-                        _react2.default.createElement(
-                            _ClickAwayListener2.default,
-                            { onClickAway: this.handleClose },
-                            _react2.default.createElement(
-                                _Grow2.default,
-                                { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
-                                _react2.default.createElement(
-                                    _Paper2.default,
-                                    { className: classes.paper },
-                                    !!searchable && _react2.default.createElement(_HiForm.HiSearchField, {
-                                        itemList: options,
-                                        callbackFilteredList: this.handleSuggestions,
-                                        filterPropertyList: ['label'],
-                                        placeholder: translations.search,
-                                        autoFocus: true,
-                                        onSearch: this.props.onSearch,
-                                        inputRef: function inputRef(el) {
-                                            _this2.searchField = el;
-                                        },
-                                        onKeyDown: this.handleKeyDownSearch
-                                    }),
-                                    _react2.default.createElement(_HiSelectableList2.default, {
-                                        type: type,
-                                        parentItemSelectable: parentItemSelectable,
-                                        itemList: suggestions,
-                                        onSelect: this.handleSelect,
-                                        selectedIdList: selectedIdList,
-                                        checkbox: checkbox,
-                                        hierarchy: this.state.hierarchy,
-                                        hierarchic: hierarchic,
-                                        hierarchySelected: this.state.hierarchySelected,
-                                        translations: translations,
-                                        icon: icon,
-                                        parentIcon: parentIcon,
-                                        hoverIcon: hoverIcon,
-                                        checkedIcon: checkedIcon,
-                                        allSelected: allSelected,
-                                        value: value,
-                                        onKeyDown: this.handleKeyDown
-                                    })
-                                )
-                            )
-                        )
-                    )
-                )
-            );
+            _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);
+          }
         }
-    }]);
-    return HiSelect;
-}(_react2.default.PureComponent);
 
-HiSelect.defaultProps = {
-    disabled: false,
-    error: false,
-    multiple: false,
-    type: 'text',
-    checkbox: false,
-    searchable: false,
-    hasAll: false,
-    iconAll: false,
-    hierarchic: false,
-    parentItemSelectable: false,
-    displayAsChip: false,
-    icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    checkedIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxMarked, { style: { width: 20, height: 20 } }),
-    translations: {
-        all: 'All',
-        no_result_match: 'No result match',
-        search: 'Search',
-        n_items_selected: '%s items selected',
-        one_item_selected: '%s item selected',
-        n_children: '%s items',
-        one_child: '%s item'
-    }
-};
+        _this.setState({
+          hierarchySelected: hiSelected
+        });
 
-var _initialiseProps = function _initialiseProps() {
-    var _this3 = this;
+        onChange(event, valueList, item);
+      } else {
+        onChange(event, item.id, item);
 
-    this.handleClick = function () {
-        document.body.style.overflow = 'hidden';
-        _this3.setState({ open: true });
-        var options = _this3.props.options.slice();
-        _this3.handleSuggestions(options);
+        _this.handleClose();
+      }
+    };
 
-        if (_this3.props.onClick) {
-            _this3.props.onClick();
+    _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;
+
+      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
+        });
+      } 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 = {
+            id: '_all',
+            icon: iconAll,
+            label: translations.all
+          };
+
+          if (iconAll !== false) {
+            allItem.type = 'icon';
+          }
+
+          suggestions.unshift(allItem);
         }
+      }
 
-        // Gestion du focus
-        if (_this3.searchField) {
-            // si searchable, focus sur le champs de recherche
-            var searchField = _this3.searchField;
-            setTimeout(function () {
-                searchField.focus();
-            }, 1);
-        } else if (_this3.overlay) {
-            // sinon focus sur le dernier élément selectionné
-            _this3.focusOnSelectedItem();
-        }
+      _this.setState({
+        suggestions: suggestions
+      });
     };
 
-    this.focusOnSelectedItem = function () {
-        // On récupère la div parent "overlay"
-        var overlay = (0, _reactDom.findDOMNode)(_this3.overlay);
-        var multiple = _this3.props.multiple;
-        var value = _this3.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="' + 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
-            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
-                if (multiple && selectedIdList.length > 0) {
-                    itemToFocus = items[1];
-                }
-                if (itemToFocus) {
-                    itemToFocus.focus();
-                }
-            }
-        }, 1);
+    _this.handleRequestDelete = function (evt) {
+      evt.stopPropagation();
+
+      _this.props.onChange(_this.props.name, []);
     };
 
-    this.handleKeyDown = function (event) {
-        var nextItem = void 0;
-        if (event.key === 'ArrowDown') {
-            nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'down');
-        } else if (event.key === 'ArrowUp') {
-            nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
-        } else if (event.key === 'Tab') {
-            document.body.style.overflow = 'auto';
-            _this3.setState({ open: false });
+    _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.setState(function (prevState) {
+          return {
+            resultsPageNumber: prevState.resultsPageNumber + 1
+          };
+        });
+      }
+    };
+
+    _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 (nextItem) {
-            nextItem.focus();
+      });
+
+      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;
+    }
 
-    this.handleKeyDownSearch = function (event) {
-        if (_this3.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            _this3.focusOnSelectedItem();
+    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.handleFocus = function () {
-        _this3.setState({ focused: true });
-    };
+      _this.state.nbOptions = optionsLength;
+    } else if (!_props.dynamic) {
+      _this.state.dynamic = true;
+    }
 
-    this.handleBlur = function () {
-        _this3.setState({ focused: false });
-    };
+    _this.handleSelect = _this.handleSelect.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.handleRequestDelete = _this.handleRequestDelete.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleScroll = _this.handleScroll.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
+        });
+      }
 
-    this.handleClose = function () {
-        document.body.style.overflow = 'auto';
-        _this3.setState({
-            open: false
+      if (nextProps.hierarchic === true && nextProps.options.length > 1) {
+        var hierarchyTrees = this.buildHierarchyTrees(nextProps);
+        this.setState({
+          hierarchy: hierarchyTrees.hierarchy,
+          hierarchySelected: hierarchyTrees.hierarchySelected
+        });
+      }
+    }
+  }, {
+    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
+
+
+      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 (_this3.props.onClose) {
-            _this3.props.onClose();
-        }
-        if (_this3.selectInputElement) {
-            _this3.selectInputElement.focus();
-        }
-    };
+        if (item === undefined) {
+          display = translations.one_item_selected;
+        } else if (type !== 'icon') {
+          if (pinnedItem) {
+            item = pinnedItem;
+          }
 
-    this.handleSelect = function (event, item) {
-        var _props2 = _this3.props,
-            multiple = _props2.multiple,
-            value = _props2.value,
-            name = _props2.name,
-            onChange = _props2.onChange,
-            options = _props2.options,
-            hierarchic = _props2.hierarchic;
-        var _state2 = _this3.state,
-            hierarchySelected = _state2.hierarchySelected,
-            hierarchy = _state2.hierarchy,
-            nbOptions = _state2.nbOptions;
-
-        var hiSelected = (0, _extends3.default)({}, hierarchySelected);
-
-        if (multiple) {
-            var valueList = value;
-            if (item.id === '_all') {
-                if (valueList.length === nbOptions) {
-                    valueList = [];
-                    if (hierarchic) {
-                        // if hierarchic select => empty associative array of selected children
-                        (0, _keys2.default)(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 (item.hasChildren === true) {
-                    // remove all children
-                    valueList = valueList.filter(function (val) {
-                        return !_this3.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);
-                }
-            } else {
-                // item non sélectionné => on le sélectionne
-                if (item.hasChildren !== true) valueList.push(item.id);
-
-                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 = [];
-                    _this3.state.suggestions.forEach(function (suggestion) {
-                        if (_this3.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, _hiHelpers.arrayUnique)(valueList.concat(idsInSuggestions));
-                        hiSelected[item.id] = (0, _hiHelpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
-                    }
-
-                    _this3.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);
-                }
-            }
-            _this3.setState({ hierarchySelected: hiSelected });
-            onChange(event, valueList);
+          display = item.label;
         } else {
-            onChange(event, item.id);
-            _this3.handleClose();
+          display = _react.default.createElement("span", {
+            className: classes.selectIconLabel
+          }, _react.default.createElement(_HiIcon.default, {
+            icon: item.icon,
+            className: classes.labelIcon
+          }), item.label);
         }
-    };
+      }
 
-    this.handleSuggestions = function (suggestions) {
-        var _props3 = _this3.props,
-            options = _props3.options,
-            hasAll = _props3.hasAll,
-            iconAll = _props3.iconAll,
-            translations = _props3.translations,
-            multiple = _props3.multiple;
-
-
-        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
-            });
-        } 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 = {
-                    id: '_all',
-                    icon: iconAll,
-                    label: translations.all
-                };
-                if (iconAll !== false) {
-                    allItem.type = 'icon';
-                }
-                suggestions.unshift(allItem);
-            }
+      if (displayAsChip) {
+        var chipFilter = _react.default.createElement(_HiChip.default, {
+          label: placeholder || display,
+          onDelete: this.handleRequestDelete
+        });
+
+        if (display) {
+          display = chipFilter;
         }
+      }
 
-        _this3.setState({
-            suggestions: suggestions
+      var popperClass = (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)({}, classes.popperClose, !open));
+      var allSelected = false;
+
+      if (selectedIdList.length === this.state.nbOptions) {
+        allSelected = true;
+      }
+
+      var popperStyle = {};
+
+      if (this.props.containerWidth > 0) {
+        popperStyle = {
+          width: this.props.containerWidth
+        };
+      }
+
+      if (infiniteScroll && loadingMoreResults) {
+        suggestions.push({
+          id: '_loading',
+          type: 'loader',
+          disabled: true,
+          centered: true,
+          checkbox: false,
+          label: 'loading'
         });
-    };
+      }
+
+      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'
+        }
+      }, _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("div", {
+        className: classes.root,
+        ref: function ref(el) {
+          _this2.overlay = el;
+        }
+      }, _react.default.createElement(_SelectInput.default, {
+        id: id,
+        value: placeholder || display,
+        open: open,
+        focused: focused,
+        type: type,
+        disabled: disabled,
+        noButton: displayAsChip,
+        error: error,
+        onClick: this.handleClick,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onMouseEnter: this.props.onMouseEnter,
+        onMouseLeave: this.props.onMouseLeave,
+        refElement: function refElement(el) {
+          _this2.selectInputElement = el;
+        }
+      }), 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
+      }, content));
+    }
+  }]);
+  return HiSelect;
+}(_react.default.PureComponent);
 
-    this.handleRequestDelete = function (evt) {
-        evt.stopPropagation();
-        _this3.props.onChange(_this3.props.name, []);
-    };
+HiSelect.defaultProps = {
+  containerWidth: 0,
+  disabled: false,
+  displayAsChip: false,
+  dynamic: false,
+  error: false,
+  hasAll: false,
+  hasMore: false,
+  hierarchic: false,
+  iconAll: false,
+  infiniteScroll: false,
+  loadingMoreResults: false,
+  multiple: false,
+  parentItemSelectable: false,
+  type: 'text',
+  translations: {
+    all: 'All',
+    no_result_match: 'No result match',
+    search: 'Search',
+    n_items_selected: '%s items selected',
+    one_item_selected: '%s item selected',
+    n_children: '%s items',
+    one_child: '%s item'
+  },
+  searchable: false,
+  staticPosition: false
 };
-
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Affiche une checkbox pour chaque éléments, par défaut si options est nested
-     */
-    checkbox: _propTypes2.default.bool,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: _propTypes2.default.node,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Inactif
-     */
-    disabled: _propTypes2.default.bool,
-    /**
-     * Option permettant d'afficher les sélection sous forme de Chip.
-     */
-    displayAsChip: _propTypes2.default.bool,
-    /**
-     * Applique le style error
-     */
-    error: _propTypes2.default.bool,
-    /**
-     * Affiche l'élément 'All'
-     */
-    hasAll: _propTypes2.default.bool,
-    /**
-     * Les items sont hiérarchisés
-     */
-    hierarchic: _propTypes2.default.bool,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: _propTypes2.default.node,
-    /**
-     * Nom de l'icône
-     */
-    iconAll: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
-    /**
-     * id du select
-     */
-    id: _propTypes2.default.string,
-    /**
-     * Autorise la sélection de plusieurs valeurs
-     */
-    multiple: _propTypes2.default.bool,
-    /**
-     * Nom du champ de formulaire
-     */
-    name: _propTypes2.default.string.isRequired,
-    /**
-     * Fonction de callback qui renvoit la/les valeurs sélectionnées
-     *
-     * @param {object} event
-     * @param {string || array} value
-     */
-    onChange: _propTypes2.default.func.isRequired,
-    /**
-     * Fonction de callback appelée lorsqu'on ferme le select
-     */
-    onClose: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée lorsqu'on survole le champs
-     */
-    onMouseEnter: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée lorsque le curseur quitte le champs
-     */
-    onMouseLeave: _propTypes2.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
-     */
-    onSearch: _propTypes2.default.func,
-    /**
-     * Listes des options du select
-     */
-    options: _propTypes2.default.array.isRequired,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: _propTypes2.default.node,
-    /**
-     * Les items parents sont sélectionnables
-     */
-    parentItemSelectable: _propTypes2.default.bool,
-    /**
-     * Placeholder affiché lorsque le select est fermé
-     * Surcharge le placeholder par défaut
-     */
-    placeholder: _propTypes2.default.string,
-    /**
-     * Affiche un input de recherche permettant de filtrer les options
-     */
-    searchable: _propTypes2.default.bool,
-    /**
-     * Traductions (par défaut en anglais)
-     */
-    translations: _propTypes2.default.object,
-    /**
-     * Type des éléments du select, définit le rendu d'un élément
-     */
-    type: _propTypes2.default.oneOf(['icon', 'text', 'image', 'primary-highlight']),
-    /**
-     * Value(s) du select
-     */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.array])
+  /**
+   * Icon affiché lorsque l'item est sélectionné
+   */
+  checkedIcon: _propTypes.default.node,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Popper width
+   */
+  containerWidth: _propTypes.default.number,
+
+  /**
+   * Inactif
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Option permettant d'afficher les sélection sous forme de Chip.
+   */
+  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'
+   */
+  hasAll: _propTypes.default.bool,
+
+  /**
+   * Indique si l'infinite scroll doit rechercher de nouveaux résultats
+   */
+  hasMore: _propTypes.default.bool,
+
+  /**
+   * Les items sont hiérarchisés
+   */
+  hierarchic: _propTypes.default.bool,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+   */
+  hoverIcon: _propTypes.default.node,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné
+   */
+  icon: _propTypes.default.node,
+
+  /**
+   * Nom de l'icône
+   */
+  iconAll: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+
+  /**
+   * 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
+   */
+  multiple: _propTypes.default.bool,
+
+  /**
+   * Nom du champ de formulaire
+   */
+  name: _propTypes.default.string.isRequired,
+
+  /**
+   * Fonction de callback qui renvoit la/les valeurs sélectionnées
+   *
+   * @param {object} event
+   * @param {string || array} value
+   */
+  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
+   */
+  onClose: _propTypes.default.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on survole le champs
+   */
+  onMouseEnter: _propTypes.default.func,
+
+  /**
+   * Fonction de callback appelée lorsque le curseur quitte le champs
+   */
+  onMouseLeave: _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
+   */
+  onSearch: _propTypes.default.func,
+
+  /**
+   * Fonction de callback à la pression de la touche "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
+  /**
+   * Listes des options du select
+   */
+  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: _propTypes.default.string,
+
+  /**
+   * Affiche un input de recherche permettant de filtrer les options
+   */
+  searchable: _propTypes.default.bool,
+
+  /**
+   * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
+   */
+  staticPosition: _propTypes.default.bool,
+
+  /**
+   * Traductions (par défaut en anglais)
+   */
+  translations: _propTypes.default.object,
+
+  /**
+   * Type des éléments du select, définit le rendu d'un élément
+   */
+  type: _propTypes.default.oneOf(['icon', 'text', 'image', 'primary-highlight']),
+
+  /**
+   * Value(s) du select
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
-exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiSelect' })(HiSelect);
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelect'
+})(HiSelect);
+
+exports.default = _default;