@hipay/hipay-material-ui 1.0.0-beta.28 → 1.0.0-beta.3

package/HiSelect/HiSelect.js

@@ -3,23 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.styles = exports.INFINITESCROLL_ERROR_MESSAGE = undefined;
-
-var _keys = require('babel-runtime/core-js/object/keys');
-
-var _keys2 = _interopRequireDefault(_keys);
+exports.styles = undefined;
 
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
-var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
-
-var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+var _keys = require('babel-runtime/core-js/object/keys');
 
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+var _keys2 = _interopRequireDefault(_keys);
 
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
@@ -71,18 +63,22 @@ var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
 
 var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
 
-var _reactPopper = require('react-popper');
+var _Collapse = require('material-ui/transitions/Collapse');
 
-var _mdiMaterialUi = require('mdi-material-ui');
+var _Collapse2 = _interopRequireDefault(_Collapse);
 
-var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
+var _reactPopper = require('react-popper');
 
-var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
+var _mdiMaterialUi = require('mdi-material-ui');
 
 var _HiSelectableList = require('../HiSelectableList');
 
 var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
 
+var _HiSelectableListItem = require('../HiSelectableList/HiSelectableListItem');
+
+var _HiSelectableListItem2 = _interopRequireDefault(_HiSelectableListItem);
+
 var _HiForm = require('../HiForm');
 
 var _SelectInput = require('./SelectInput');
@@ -103,7 +99,7 @@ var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var INFINITESCROLL_ERROR_MESSAGE = exports.INFINITESCROLL_ERROR_MESSAGE = 'La propriété "loadMoreResults" est obligatoire si la prop "infiniteScroll" est à true'; // @inheritedComponent Input
+// @inheritedComponent Input
 
 var styles = exports.styles = function styles(theme) {
     return {
@@ -115,7 +111,7 @@ var styles = exports.styles = function styles(theme) {
         },
         popper: {
             width: '100%',
-            zIndex: 1200
+            zIndex: 9
         },
         paper: {
             borderRadius: '0px 2px',
@@ -161,7 +157,249 @@ var HiSelect = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiSelect.__proto__ || (0, _getPrototypeOf2.default)(HiSelect)).call(this, props));
 
-        _initialiseProps.call(_this);
+        _this.handleClick = function () {
+            document.body.style.overflow = 'hidden';
+            _this.setState({ open: true });
+            var options = _this.props.options.slice();
+            _this.handleSuggestions(options);
+
+            if (_this.props.onClick) {
+                _this.props.onClick();
+            }
+
+            // Gestion du focus
+            if (_this.searchField) {
+                // si searchable, focus sur le champs de recherche
+                var searchField = _this.searchField;
+                setTimeout(function () {
+                    searchField.focus();
+                }, 1);
+            } else if (_this.overlay) {
+                // sinon focus sur le dernier élément selectionné
+                _this.focusOnSelectedItem();
+            }
+        };
+
+        _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="' + 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];
+                    }
+                    itemToFocus.focus();
+                }
+            }, 1);
+        };
+
+        _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';
+                _this.setState({ open: false });
+            }
+            if (nextItem) {
+                nextItem.focus();
+            }
+        };
+
+        _this.handleKeyDownSearch = function (event) {
+            if (_this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                _this.focusOnSelectedItem();
+            }
+        };
+
+        _this.handleFocus = function () {
+            _this.setState({ focused: true });
+        };
+
+        _this.handleBlur = function () {
+            _this.setState({ focused: false });
+        };
+
+        _this.handleClose = function () {
+            document.body.style.overflow = 'auto';
+            _this.setState({
+                open: false
+            });
+
+            if (_this.props.onClose) {
+                _this.props.onClose();
+            }
+        };
+
+        _this.handleSelect = function (event, item) {
+            var _this$props = _this.props,
+                multiple = _this$props.multiple,
+                value = _this$props.value,
+                name = _this$props.name,
+                onChange = _this$props.onChange,
+                options = _this$props.options,
+                hierarchic = _this$props.hierarchic;
+            var _this$state = _this.state,
+                hierarchySelected = _this$state.hierarchySelected,
+                hierarchy = _this$state.hierarchy,
+                nbOptions = _this$state.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 !_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 {
+                    // 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 = [];
+                        _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, _hiHelpers.arrayUnique)(valueList.concat(idsInSuggestions));
+                            hiSelected[item.id] = (0, _hiHelpers.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);
+                    }
+                }
+                _this.setState({ hierarchySelected: hiSelected });
+                onChange(event, valueList);
+            } else {
+                onChange(event, item.id);
+                _this.handleClose();
+            }
+        };
+
+        _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);
+                }
+            }
+
+            _this.setState({
+                suggestions: suggestions
+            });
+        };
+
+        _this.handleRequestDelete = function (evt) {
+            evt.stopPropagation();
+            _this.props.onChange(_this.props.name, []);
+        };
 
         _this.state = {
             open: false,
@@ -170,39 +408,31 @@ var HiSelect = function (_React$PureComponent) {
             hierarchySelected: {},
             hierarchy: {},
             nbOptions: 0,
-            dynamic: props.dynamic || false,
-            resultsPageNumber: 1
+            dynamic: false
         };
 
-        // 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 (props.hierarchic === true && props.options.length > 1) {
+            // 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);
+                    }
                 }
             });
-            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.state.hierarchy = hierarchy;
+            _this.state.hierarchySelected = hierarchySelected;
         }
 
         if (props.options.length > 0) {
@@ -214,14 +444,13 @@ var HiSelect = function (_React$PureComponent) {
                 }
             });
             _this.state.nbOptions = optionsLength;
-        } else if (!props.dynamic) {
+        } else {
             _this.state.dynamic = true;
         }
 
         _this.handleSelect = _this.handleSelect.bind(_this);
         _this.handleClick = _this.handleClick.bind(_this);
         _this.handleClose = _this.handleClose.bind(_this);
-        _this.handleClickAway = _this.handleClickAway.bind(_this);
         _this.handleRequestDelete = _this.handleRequestDelete.bind(_this);
         _this.handleSuggestions = _this.handleSuggestions.bind(_this);
         _this.handleFocus = _this.handleFocus.bind(_this);
@@ -230,24 +459,6 @@ var HiSelect = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(HiSelect, [{
-        key: 'componentDidUpdate',
-        value: function componentDidUpdate(prevProps, prevState, prevContext) {
-            var _this2 = this;
-
-            if (this.props.infiniteScroll && !prevState.open && this.state.open && this.optionsContent) {
-                var optionList = this.optionsContent.querySelector('div').querySelector('div');
-                optionList.addEventListener('scroll', function (event) {
-                    if (optionList.scrollTop >= event.target.scrollHeight - optionList.offsetHeight && !_this2.props.loadingMoreResults && _this2.props.hasMore) {
-                        _this2.props.loadMoreResults(_this2.state.resultsPageNumber + 1);
-                        _this2.setState({ resultsPageNumber: _this2.state.resultsPageNumber + 1 });
-                    }
-                });
-            } else if (this.optionsContent && this.props.infiniteScroll && !this.state.open && prevState.open) {
-                var _optionList = this.optionsContent.querySelector('div').querySelector('div');
-                _optionList.removeEventListener('scroll');
-            }
-        }
-    }, {
         key: 'componentWillReceiveProps',
         value: function componentWillReceiveProps(nextProps) {
             if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
@@ -260,42 +471,6 @@ var HiSelect = function (_React$PureComponent) {
                 });
                 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: '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);
-                    }
-                }
-            });
-            return { hierarchy: hierarchy, hierarchySelected: hierarchySelected };
-        }
-    }, {
-        key: 'handleReset',
-        value: function handleReset(event) {
-            if (this.props.onReset) {
-                event.stopPropagation();
-                this.props.onReset(event);
-            }
         }
 
         // Key down on list items
@@ -326,13 +501,12 @@ var HiSelect = function (_React$PureComponent) {
     }, {
         key: 'render',
         value: function render() {
-            var _this3 = this;
+            var _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
                 disabled = _props.disabled,
                 error = _props.error,
-                loading = _props.loading,
                 options = _props.options,
                 checkbox = _props.checkbox,
                 searchable = _props.searchable,
@@ -346,73 +520,42 @@ var HiSelect = function (_React$PureComponent) {
                 hoverIcon = _props.hoverIcon,
                 checkedIcon = _props.checkedIcon,
                 hierarchic = _props.hierarchic,
-                id = _props.id,
-                placeholder = _props.placeholder,
-                staticPosition = _props.staticPosition,
-                pinnedItem = _props.pinnedItem,
-                hasAll = _props.hasAll,
-                infiniteScroll = _props.infiniteScroll,
-                loadingMoreResults = _props.loadingMoreResults,
-                showNoResults = _props.showNoResults,
-                showMinLength = _props.showMinLength,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabled', 'error', 'loading', 'options', 'checkbox', 'searchable', 'displayAsChip', 'type', 'value', 'translations', 'parentItemSelectable', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'hierarchic', 'id', 'placeholder', 'staticPosition', 'pinnedItem', 'hasAll', 'infiniteScroll', 'loadingMoreResults', 'showNoResults', 'showMinLength']);
+                id = _props.id;
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
-                focused = _state.focused,
-                dynamic = _state.dynamic;
+                focused = _state.focused;
 
 
             var display = '';
-            var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
-
-            var _suggestions = [].concat((0, _toConsumableArray3.default)(suggestions));
-
-            if (pinnedItem) {
-                _suggestions.unshift(pinnedItem);
-            }
+            var selectedIdList = Array.isArray(value) ? value : [value];
 
-            // 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) {
+            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) {
+            } else if (this.state.nbOptions === selectedIdList.length) {
                 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;
+                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: item.icon, className: classes.labelIcon }),
-                        item.label
+                        _react2.default.createElement(_HiIconBuilder2.default, { icon: optionSelected.icon, className: classes.labelIcon }),
+                        optionSelected.label
                     );
                 }
             }
 
             if (displayAsChip) {
-                var chipFilter = _react2.default.createElement(_HiChip2.default, { label: placeholder || display, onDelete: this.handleRequestDelete });
+                var chipFilter = _react2.default.createElement(_HiChip2.default, { label: display, onDelete: this.handleRequestDelete });
                 if (display) {
                     display = chipFilter;
                 }
@@ -430,84 +573,12 @@ var HiSelect = function (_React$PureComponent) {
                 popperStyle = { width: this.props.containerWidth };
             }
 
-            if (infiniteScroll && loadingMoreResults) {
-                _suggestions.push({
-                    id: '_loading',
-                    type: 'loader',
-                    disabled: true,
-                    centered: true,
-                    checkbox: false,
-                    label: 'loading'
-                });
-            }
-
-            if (!loading && !loadingMoreResults && _suggestions.length === 0 && (showNoResults || showMinLength)) {
-                suggestions.push({
-                    id: '_no_result',
-                    type: 'text',
-                    disabled: true,
-                    centered: true,
-                    checkbox: false,
-                    label: showNoResults ? translations.no_result_match : translations.min_length
-                });
-            }
-
-            var content = _react2.default.createElement(
-                _ClickAwayListener2.default,
-                { onClickAway: this.handleClickAway },
-                _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) {
-                                _this3.searchField = el;
-                            },
-                            onKeyDown: this.handleKeyDownSearch
-                        }),
-                        _react2.default.createElement(
-                            'div',
-                            { ref: function ref(content) {
-                                    return _this3.optionsContent = content;
-                                } },
-                            _react2.default.createElement(_HiSelectableList2.default, (0, _extends3.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
-                            }, other))
-                        )
-                    )
-                )
-            );
-
             return _react2.default.createElement(
                 'div',
                 {
                     className: classes.root,
                     ref: function ref(el) {
-                        _this3.overlay = el;
+                        _this2.overlay = el;
                     }
                 },
                 _react2.default.createElement(
@@ -518,7 +589,7 @@ var HiSelect = function (_React$PureComponent) {
                         null,
                         _react2.default.createElement(_SelectInput2.default, {
                             id: id,
-                            value: placeholder || display,
+                            value: display,
                             open: open,
                             focused: focused,
                             type: type,
@@ -529,19 +600,10 @@ var HiSelect = function (_React$PureComponent) {
                             onFocus: this.handleFocus,
                             onBlur: this.handleBlur,
                             onMouseEnter: this.props.onMouseEnter,
-                            onMouseLeave: this.props.onMouseLeave,
-                            refElement: function refElement(el) {
-                                _this3.selectInputElement = el;
-                            },
-                            onSubmit: this.props.onSubmit,
-                            onReset: this.props.onReset
+                            onMouseLeave: this.props.onMouseLeave
                         })
                     ),
-                    open && (staticPosition ? _react2.default.createElement(
-                        'div',
-                        { style: popperStyle },
-                        content
-                    ) : _react2.default.createElement(
+                    open && _react2.default.createElement(
                         _reactPopper.Popper,
                         {
                             placement: 'bottom-start',
@@ -549,8 +611,50 @@ var HiSelect = function (_React$PureComponent) {
                             className: popperClass,
                             style: popperStyle
                         },
-                        content
-                    ))
+                        _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
+                                    })
+                                )
+                            )
+                        )
+                    )
                 )
             );
         }
@@ -570,309 +674,20 @@ HiSelect.defaultProps = {
     hierarchic: false,
     parentItemSelectable: false,
     displayAsChip: false,
-    dynamic: false,
-    infiniteScroll: 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',
-        min_length: 'Veuillez saisir 3 caractères minimum',
         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'
-    },
-    staticPosition: false,
-    loadingMoreResults: false,
-    hasMore: false
-};
-
-var _initialiseProps = function _initialiseProps() {
-    var _this4 = this;
-
-    this.handleClick = function () {
-        if (_this4.state.open) {
-            _this4.handleClose();
-        } else {
-            /*if (!this.props.staticPosition) {
-                // document.body.style.overflow = 'hidden';
-            }*/
-            _this4.setState({ open: true });
-            var options = _this4.props.options.slice();
-            _this4.handleSuggestions(options);
-
-            if (_this4.props.onClick) {
-                _this4.props.onClick();
-            }
-
-            // Gestion du focus
-            if (!_this4.props.searchable) {
-                // sinon focus sur le dernier élément selectionné
-                _this4.focusOnSelectedItem();
-            }
-        }
-    };
-
-    this.focusOnSelectedItem = function () {
-        // On récupère la div parent "overlay"
-        var overlay = (0, _reactDom.findDOMNode)(_this4.overlay);
-        var multiple = _this4.props.multiple;
-        var value = _this4.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.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') {
-            /* if (!this.props.staticPosition) {
-                document.body.style.overflow = 'auto';
-            } */
-            _this4.setState({ open: false });
-        } else if (event.key === 'Escape') {
-            _this4.setState({ open: false });
-        }
-        if (nextItem) {
-            nextItem.focus();
-        }
-    };
-
-    this.handleKeyDownSearch = function (event) {
-        if (_this4.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            _this4.focusOnSelectedItem();
-        } else if (event.key === 'Enter' && _this4.props.onSubmit) {
-            _this4.props.onSubmit(event);
-        }
-    };
-
-    this.handleFocus = function () {
-        _this4.setState({ focused: true });
-    };
-
-    this.handleBlur = function () {
-        _this4.setState({ focused: false });
-    };
-
-    this.handleClose = function () {
-        if (!_this4.props.staticPosition) {
-            //document.body.style.overflow = 'auto';
-        }
-        _this4.setState({
-            open: false
-        });
-
-        if (_this4.props.onClose) {
-            _this4.props.onClose();
-        }
-        if (_this4.selectInputElement) {
-            _this4.selectInputElement.focus();
-        }
-    };
-
-    this.handleClickAway = function (event) {
-        // Au clic sur le bouton, on laisse le handleClick fermer le select
-        if (!_this4.selectInputElement.contains(event.target)) {
-            _this4.handleClose(event);
-        }
-    };
-
-    this.handleSelect = function (event, item) {
-        var _props2 = _this4.props,
-            multiple = _props2.multiple,
-            value = _props2.value,
-            onChange = _props2.onChange,
-            options = _props2.options,
-            hierarchic = _props2.hierarchic,
-            pinnedItem = _props2.pinnedItem;
-        var _state2 = _this4.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 !_this4.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) {
-                    (0, _keys2.default)(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 = [];
-                    _this4.state.suggestions.forEach(function (suggestion) {
-                        if (_this4.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));
-                    }
-
-                    _this4.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);
-                }
-            }
-            _this4.setState({ hierarchySelected: hiSelected });
-            onChange(event, valueList, item);
-        } else {
-            onChange(event, item.id, item);
-            _this4.handleClose();
-        }
-    };
-
-    this.handleSuggestions = function (suggestions) {
-        var _props3 = _this4.props,
-            options = _props3.options,
-            hasAll = _props3.hasAll,
-            iconAll = _props3.iconAll,
-            translations = _props3.translations,
-            multiple = _props3.multiple,
-            showNoResults = _props3.showNoResults,
-            showMinLength = _props3.showMinLength;
-
-
-        if (suggestions.length === 0 && (showNoResults || showMinLength)) {
-            // Handle No Result
-            // FIX to remove all item
-            suggestions = [];
-            suggestions.push({
-                id: '_no_result',
-                type: 'text',
-                disabled: true,
-                centered: true,
-                checkbox: false,
-                label: showNoResults ? translations.no_result_match : translations.min_length
-            });
-        } 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);
-            }
-        }
-
-        _this4.setState({
-            suggestions: suggestions
-        });
-    };
-
-    this.handleRequestDelete = function (evt) {
-        evt.stopPropagation();
-        _this4.props.onChange(_this4.props.name, []);
-    };
+    }
 };
-
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Affiche une checkbox pour chaque éléments, par défaut si options est nested
@@ -894,12 +709,6 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Option permettant d'afficher les sélection sous forme de Chip.
      */
     displayAsChip: _propTypes2.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: _propTypes2.default.bool.isRequired,
     /**
      * Applique le style error
      */
@@ -912,10 +721,6 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items sont hiérarchisés
      */
     hierarchic: _propTypes2.default.bool,
-    /**
-     * Indique si l'infinite scroll doit rechercher de nouveaux résultats
-     */
-    hasMore: _propTypes2.default.bool,
     /**
      * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
      */
@@ -932,28 +737,6 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id du select
      */
     id: _propTypes2.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: _propTypes2.default.bool.isRequired,
-    /**
-     * Ajoute un loader
-     */
-    loading: _propTypes2.default.bool,
-    /**
-     * Ajoute un loader en bas pour l'infiniteScroll
-     */
-    loadingMoreResults: _propTypes2.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: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.func, function (props) {
-        return props.hasOwnProperty('infiniteScroll') && props.infiniteScroll === true;
-    }, INFINITESCROLL_ERROR_MESSAGE),
     /**
      * Autorise la sélection de plusieurs valeurs
      */
@@ -981,22 +764,13 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback appelée lorsque le curseur quitte le champs
      */
     onMouseLeave: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée lorsqu'on vide le champs
-     */
-    onReset: _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,
-    /**
-     * Fonction de callback à la pression de la touche "Entrée"
-     */
-    onSubmit: _propTypes2.default.func,
     /**
      * Listes des options du select
      */
@@ -1009,31 +783,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
-    /**
-     * Item épinglé en début de liste
-     */
-    pinnedItem: _propTypes2.default.object,
-    /**
-     * 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,
-    /**
-     * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
-     */
-    staticPosition: _propTypes2.default.bool,
-    /**
-     * Permet d'afficher un message si pas assez de caractères
-     */
-    showMinLength: _propTypes2.default.bool,
-    /**
-     * Permet d'afficher un message si aucune options n'est présente
-     */
-    showNoResults: _propTypes2.default.bool,
     /**
      * Traductions (par défaut en anglais)
      */