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

package/es/HiSelect/HiSelect.js

@@ -1,54 +1,53 @@
-import _Object$keys from 'babel-runtime/core-js/object/keys';
-import _extends from 'babel-runtime/helpers/extends';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 // @inheritedComponent Input
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Grow from 'material-ui/transitions/Grow';
+import Grow from '@material-ui/core/Grow';
 import { findDOMNode } from 'react-dom';
-import Paper from 'material-ui/Paper';
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
-import { Manager, Target, Popper } from 'react-popper';
-import { CheckboxBlankOutline, CheckboxMarked } from 'mdi-material-ui';
+import Scrollbars from 'react-custom-scrollbars';
+import Paper from '@material-ui/core/Paper';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Popper from '@material-ui/core/Popper';
 import HiSelectableList from '../HiSelectableList';
-import { HiSearchField } from '../HiForm';
+import HiSearchField from '../HiForm/HiSearchField';
 import SelectInput from './SelectInput';
 import HiChip from '../HiChip/HiChip';
 import { withStyles } from '../styles';
-import { arrayUnique, getNextItemSelectable } from '../utils/hiHelpers';
-import HiIconBuilder from '../utils/HiIconBuilder';
-
+import { arrayUnique, getNextItemSelectable } from '../utils/helpers';
+import HiIcon from '../HiIcon';
+export const INFINITESCROLL_ERROR_MESSAGE = 'La propriété "loadMoreResults" est obligatoire si la prop "infiniteScroll" est à true';
 export const styles = theme => ({
-    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: _extends({
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        paddingRight: 16
-    }, theme.typography.body1, {
-        display: 'inline-flex',
-        width: '100%'
-    })
+  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: _objectSpread({
+    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.
@@ -64,671 +63,870 @@ export const styles = theme => ({
  * il filtre la liste des suggestions
  * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
  */
-class HiSelect extends React.PureComponent {
-
-    constructor(props) {
-        super(props);
-
-        _initialiseProps.call(this);
-
-        this.state = {
-            open: false,
-            focused: false,
-            suggestions: [],
-            hierarchySelected: {},
-            hierarchy: {},
-            nbOptions: 0,
-            dynamic: false
-        };
-
-        // Check if value is in options
-        let valueInOptions = false;
-        const 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(item => {
-                if (!valueInOptions && val.indexOf(item.id) !== -1) {
-                    valueInOptions = true;
-                }
-            });
-        }
-
-        if (!valueInOptions) {
-            throw new Error('prop value provided does not match any option.');
-        }
-
-        if (props.hierarchic === true && props.options.length > 1) {
-            const hierarchyTrees = this.buildHierarchyTrees(props);
-
-            this.state.hierarchy = hierarchyTrees.hierarchy;
-            this.state.hierarchySelected = hierarchyTrees.hierarchySelected;
-        }
-
-        if (props.options.length > 0) {
-            // Get real options number (parent & _all are not real options)
-            let optionsLength = 0;
-            props.options.forEach(option => {
-                if (option.hasChildren !== true && option.id !== '_all') {
-                    optionsLength++;
-                }
-            });
-            this.state.nbOptions = optionsLength;
-        } else {
-            this.state.dynamic = true;
-        }
-
-        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);
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
-            this.handleSuggestions(nextProps.options);
-            let optionsLength = 0;
-            nextProps.options.forEach(option => {
-                if (option.hasChildren !== true && option.id !== '_all') {
-                    optionsLength++;
-                }
-            });
-            this.setState({ nbOptions: optionsLength });
-        }
-
-        if (nextProps.hierarchic === true && nextProps.options.length > 1) {
-            const hierarchyTrees = this.buildHierarchyTrees(nextProps);
-            this.setState({ hierarchy: hierarchyTrees.hierarchy, hierarchySelected: hierarchyTrees.hierarchySelected });
-        }
-    }
-
-    buildHierarchyTrees(props) {
-        // Construct two associative arrays
-        // hierarchy[parentId] => children
-        // hierarchySelected[parentId] => selected children
-        const hierarchy = {};
-        const hierarchySelected = {};
-        let value = props.value || [];
-        if (!Array.isArray(value)) value = [props.value];
-        props.options.forEach(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, hierarchySelected };
-    }
-
-    // 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
-     */
-
-
-    render() {
-        const {
-            classes,
-            disabled,
-            error,
-            options,
-            checkbox,
-            searchable,
-            displayAsChip,
-            type,
-            value,
-            translations,
-            parentItemSelectable,
-            icon,
-            parentIcon,
-            hoverIcon,
-            checkedIcon,
-            hierarchic,
-            id,
-            placeholder
-        } = this.props;
-
-        const { open, suggestions, focused } = this.state;
-
-        let display = '';
-        const 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(o => o.id === selectedIdList[0]).label;
-            } else {
-                const optionSelected = options.find(o => o.id === selectedIdList[0]);
-                display = React.createElement(
-                    'span',
-                    { className: classes.selectIconLabel },
-                    React.createElement(HiIconBuilder, { icon: optionSelected.icon, className: classes.labelIcon }),
-                    optionSelected.label
-                );
-            }
-        }
-
-        if (displayAsChip) {
-            const chipFilter = React.createElement(HiChip, { label: placeholder || display, onDelete: this.handleRequestDelete });
-            if (display) {
-                display = chipFilter;
-            }
-        }
-
-        const popperClass = classNames(classes.popper, {
-            [classes.popperClose]: !open
-        });
-
-        let allSelected = false;
-        if (selectedIdList.length === this.state.nbOptions) {
-            allSelected = true;
-        }
-
-        let popperStyle = {};
-        if (this.props.containerWidth > 0) {
-            popperStyle = { width: this.props.containerWidth };
-        }
-
-        return React.createElement(
-            'div',
-            {
-                className: classes.root,
-                ref: el => {
-                    this.overlay = el;
-                }
-            },
-            React.createElement(
-                Manager,
-                null,
-                React.createElement(
-                    Target,
-                    null,
-                    React.createElement(SelectInput, {
-                        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: el => {
-                            this.selectInputElement = el;
-                        }
-                    })
-                ),
-                open && React.createElement(
-                    Popper,
-                    {
-                        placement: 'bottom-start',
-                        eventsEnabled: open,
-                        className: popperClass,
-                        style: popperStyle
-                    },
-                    React.createElement(
-                        ClickAwayListener,
-                        { onClickAway: this.handleClose },
-                        React.createElement(
-                            Grow,
-                            { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
-                            React.createElement(
-                                Paper,
-                                { className: classes.paper },
-                                !!searchable && React.createElement(HiSearchField, {
-                                    itemList: options,
-                                    callbackFilteredList: this.handleSuggestions,
-                                    filterPropertyList: ['label'],
-                                    placeholder: translations.search,
-                                    autoFocus: true,
-                                    onSearch: this.props.onSearch,
-                                    inputRef: el => {
-                                        this.searchField = el;
-                                    },
-                                    onKeyDown: this.handleKeyDownSearch
-                                }),
-                                React.createElement(HiSelectableList, {
-                                    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
-                                })
-                            )
-                        )
-                    )
-                )
-            )
-        );
-    }
-}
 
-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: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    parentIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    hoverIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    checkedIcon: React.createElement(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'
-    }
-};
+class HiSelect extends React.PureComponent {
+  constructor(_props) {
+    super(_props);
 
-var _initialiseProps = function () {
     this.handleClick = () => {
-        document.body.style.overflow = 'hidden';
-        this.setState({ open: true });
+      if (this.state.open) {
+        this.handleClose();
+      } else {
+        this.setState({
+          open: true
+        });
         const options = this.props.options.slice();
         this.handleSuggestions(options);
 
         if (this.props.onClick) {
-            this.props.onClick();
+          this.props.onClick();
+        } // Gestion du focus
+
+
+        if (!this.props.searchable) {
+          // sinon focus sur le dernier élément selectionné
+          this.focusOnSelectedItem();
         }
+      }
+    };
 
-        // Gestion du focus
-        if (this.searchField) {
-            // si searchable, focus sur le champs de recherche
-            const searchField = this.searchField;
-            setTimeout(() => {
-                searchField.focus();
-            }, 1);
-        } else if (this.overlay) {
-            // sinon focus sur le dernier élément selectionné
-            this.focusOnSelectedItem();
+    this.buildHierarchyTrees = props => {
+      // Construct two associative arrays
+      // hierarchy[parentId] => children
+      // hierarchySelected[parentId] => selected children
+      const hierarchy = {};
+      const hierarchySelected = {};
+      let value = props.value || [];
+      if (!Array.isArray(value)) value = [props.value];
+      props.options.forEach(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,
+        hierarchySelected
+      };
     };
 
     this.focusOnSelectedItem = () => {
-        // On récupère la div parent "overlay"
-        const overlay = findDOMNode(this.overlay);
-        const multiple = this.props.multiple;
-        const value = this.props.value;
-        const selectedIdList = Array.isArray(value) ? value : [value];
-        setTimeout(() => {
-            let focused = false;
-            // Si un ou plusieurs items sont selectionnés, on focus sur le dernier
-            if (selectedIdList.length > 0) {
-                const 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
-                const items = overlay.getElementsByTagName('li');
-                let 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);
+      // On récupère la div parent "overlay"
+      const overlay = findDOMNode(this.overlay);
+      const multiple = this.props.multiple;
+      const value = this.props.value;
+      const selectedIdList = Array.isArray(value) ? value : [value];
+      setTimeout(() => {
+        let focused = false; // Si un ou plusieurs items sont selectionnés, on focus sur le dernier
+
+        if (selectedIdList.length > 0) {
+          const 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
+          const items = overlay.getElementsByTagName('li');
+          let 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 = event => {
-        let nextItem;
-        if (event.key === 'ArrowDown') {
-            nextItem = getNextItemSelectable(document.activeElement, 'down');
-        } else if (event.key === 'ArrowUp') {
-            nextItem = getNextItemSelectable(document.activeElement, 'up');
-        } else if (event.key === 'Tab') {
+      let nextItem;
+
+      if (event.key === 'ArrowDown') {
+        nextItem = getNextItemSelectable(document.activeElement, 'down');
+      } else if (event.key === 'ArrowUp') {
+        nextItem = getNextItemSelectable(document.activeElement, 'up');
+      } else if (event.key === 'Tab') {
+        /* if (!this.props.staticPosition) {
             document.body.style.overflow = 'auto';
-            this.setState({ open: false });
-        }
-        if (nextItem) {
-            nextItem.focus();
-        }
+        } */
+        this.setState({
+          open: false
+        });
+      } else if (event.key === 'Escape') {
+        this.setState({
+          open: false
+        });
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
     };
 
     this.handleKeyDownSearch = event => {
-        if (this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            this.focusOnSelectedItem();
-        }
+      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 = () => {
-        this.setState({ focused: true });
+      this.setState({
+        focused: true
+      });
     };
 
     this.handleBlur = () => {
-        this.setState({ focused: false });
+      this.setState({
+        focused: false
+      });
     };
 
     this.handleClose = () => {
-        document.body.style.overflow = 'auto';
-        this.setState({
-            open: false
-        });
+      if (this.props.onClose) {
+        this.props.onClose();
+      }
 
-        if (this.props.onClose) {
-            this.props.onClose();
-        }
-        if (this.selectInputElement) {
-            this.selectInputElement.focus();
-        }
+      if (this.selectInputElement) {
+        this.selectInputElement.focus();
+      }
+
+      this.setState({
+        open: false
+      });
+    };
+
+    this.handleClickAway = event => {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!this.selectInputElement.contains(event.target)) {
+        this.handleClose(event);
+      }
     };
 
     this.handleSelect = (event, item) => {
-        const { multiple, value, name, onChange, options, hierarchic } = this.props;
-        const { hierarchySelected, hierarchy, nbOptions } = this.state;
-        const hiSelected = _extends({}, hierarchySelected);
-
-        if (multiple) {
-            let 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(key => {
-                            hiSelected[key] = [];
-                        });
-                    }
-                } else {
-                    options.forEach(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(val => {
-                        return val !== item.id;
-                    });
-                }
-
-                if (item.hasChildren === true) {
-                    // remove all children
-                    valueList = valueList.filter(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)
-                    const idsInSuggestions = [];
-                    this.state.suggestions.forEach(suggestion => {
-                        if (this.state.hierarchy[item.id].includes(suggestion.id)) {
-                            idsInSuggestions.push(suggestion.id);
-                        }
-                    });
-                    // if(hierarchySelected[item.id].length > 0) {}
-                    let allChildrenSuggestionsSelected = true;
-                    idsInSuggestions.forEach(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(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 = arrayUnique(valueList.concat(idsInSuggestions));
-                        hiSelected[item.id] = 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);
-                }
+      const {
+        multiple,
+        value,
+        onChange,
+        options,
+        hierarchic,
+        pinnedItem
+      } = this.props;
+      const {
+        hierarchySelected,
+        hierarchy,
+        nbOptions
+      } = this.state;
+
+      const hiSelected = _objectSpread({}, hierarchySelected);
+
+      if (multiple) {
+        let 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(key => {
+                hiSelected[key] = [];
+              });
             }
-            this.setState({ hierarchySelected: hiSelected });
-            onChange(event, valueList);
+          } else {
+            options.forEach(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(val => {
+              return val !== item.id;
+            });
+          }
+
+          if (item.hasChildren === true) {
+            // remove all children
+            valueList = valueList.filter(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 {
-            onChange(event, item.id);
-            this.handleClose();
-        }
-    };
+          if (pinnedItem && item.id === pinnedItem.id) {
+            Object.keys(hiSelected).map(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);
 
-    this.handleSuggestions = suggestions => {
-        const { options, hasAll, iconAll, translations, multiple } = this.props;
-
-        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
+            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)
+            const idsInSuggestions = [];
+            this.state.suggestions.forEach(suggestion => {
+              if (this.state.hierarchy[item.id].includes(suggestion.id)) {
+                idsInSuggestions.push(suggestion.id);
+              }
+            }); // if(hierarchySelected[item.id].length > 0) {}
+
+            let allChildrenSuggestionsSelected = true;
+            idsInSuggestions.forEach(id => {
+              if (!hierarchySelected[item.id].includes(id)) {
+                allChildrenSuggestionsSelected = false;
+              }
             });
-        } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
-            // Handle 'All'
-            if (suggestions.filter(suggestion => suggestion.id === '_all').length === 0) {
-                const allItem = {
-                    id: '_all',
-                    icon: iconAll,
-                    label: translations.all
-                };
-                if (iconAll !== false) {
-                    allItem.type = 'icon';
-                }
-                suggestions.unshift(allItem);
+
+            if (allChildrenSuggestionsSelected === true) {
+              // On supprime les enfants car déjà tous sélectionnés
+              idsInSuggestions.forEach(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 = arrayUnique(valueList.concat(idsInSuggestions));
+              hiSelected[item.id] = 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({
-            suggestions
+          hierarchySelected: hiSelected
         });
+        onChange(event, valueList, item);
+      } else {
+        onChange(event, item.id, item);
+        this.handleClose();
+      }
+    };
+
+    this.handleSuggestions = suggestions => {
+      const {
+        options,
+        hasAll,
+        iconAll,
+        translations,
+        multiple
+      } = this.props;
+
+      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(suggestion => suggestion.id === '_all').length === 0) {
+          const allItem = {
+            id: '_all',
+            icon: iconAll,
+            label: translations.all
+          };
+
+          if (iconAll !== false) {
+            allItem.type = 'icon';
+          }
+
+          suggestions.unshift(allItem);
+        }
+      }
+
+      this.setState({
+        suggestions
+      });
     };
 
     this.handleRequestDelete = evt => {
-        evt.stopPropagation();
-        this.props.onChange(this.props.name, []);
+      evt.stopPropagation();
+      this.props.onChange(this.props.name, []);
     };
-};
 
+    this.handleScroll = 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(prevState => ({
+          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
+
+    let valueInOptions = false;
+    const _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(item => {
+        if (!valueInOptions && _val.indexOf(item.id) !== -1) {
+          valueInOptions = true;
+        }
+      });
+
+      if (!valueInOptions && _props.pinnedItem) {
+        if (_props.value.indexOf(_props.pinnedItem.id) >= 0) {
+          valueInOptions = true;
+        }
+      }
+    }
+
+    if (!valueInOptions) {
+      throw new Error('prop value provided does not match any option.');
+    }
+
+    if (_props.hierarchic === true && _props.options.length > 1) {
+      const hierarchyTrees = this.buildHierarchyTrees(_props);
+      this.state.hierarchy = hierarchyTrees.hierarchy;
+      this.state.hierarchySelected = hierarchyTrees.hierarchySelected;
+    }
+
+    if (_props.options.length > 0) {
+      // Get real options number (parent & _all are not real options)
+      let optionsLength = 0;
+
+      _props.options.forEach(option => {
+        if (option.hasChildren !== true && option.id !== '_all') {
+          optionsLength += 1;
+        }
+      });
+
+      this.state.nbOptions = optionsLength;
+    } else if (!_props.dynamic) {
+      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);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
+      this.handleSuggestions(nextProps.options);
+      let optionsLength = 0;
+      nextProps.options.forEach(option => {
+        if (option.hasChildren !== true && option.id !== '_all') {
+          optionsLength += 1;
+        }
+      });
+      this.setState({
+        nbOptions: optionsLength
+      });
+    }
+
+    if (nextProps.hierarchic === true && nextProps.options.length > 1) {
+      const hierarchyTrees = this.buildHierarchyTrees(nextProps);
+      this.setState({
+        hierarchy: hierarchyTrees.hierarchy,
+        hierarchySelected: hierarchyTrees.hierarchySelected
+      });
+    }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      disabled,
+      error,
+      loading,
+      options,
+      searchable,
+      displayAsChip,
+      type,
+      value,
+      translations,
+      parentItemSelectable,
+      icon,
+      parentIcon,
+      hoverIcon,
+      checkedIcon,
+      id,
+      placeholder,
+      staticPosition,
+      pinnedItem,
+      hasAll,
+      infiniteScroll,
+      loadingMoreResults,
+      multiple
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["classes", "disabled", "error", "loading", "options", "searchable", "displayAsChip", "type", "value", "translations", "parentItemSelectable", "icon", "parentIcon", "hoverIcon", "checkedIcon", "id", "placeholder", "staticPosition", "pinnedItem", "hasAll", "infiniteScroll", "loadingMoreResults", "multiple"]);
+
+    const {
+      open,
+      suggestions: stateSuggestions,
+      focused,
+      dynamic
+    } = this.state;
+    let display = '';
+    let selectedIdList;
+
+    if (Array.isArray(value)) {
+      selectedIdList = value;
+    } else if (value) {
+      selectedIdList = [value];
+    } else {
+      selectedIdList = [];
+    }
+
+    const suggestions = [...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) {
+      let item = options.find(o => o.id === selectedIdList[0]);
+
+      if (item === undefined) {
+        display = translations.one_item_selected;
+      } else if (type !== 'icon') {
+        if (pinnedItem) {
+          item = pinnedItem;
+        }
+
+        display = item.label;
+      } else {
+        display = React.createElement("span", {
+          className: classes.selectIconLabel
+        }, React.createElement(HiIcon, {
+          icon: item.icon,
+          className: classes.labelIcon
+        }), item.label);
+      }
+    }
+
+    if (displayAsChip) {
+      const chipFilter = React.createElement(HiChip, {
+        label: placeholder || display,
+        onDelete: this.handleRequestDelete
+      });
+
+      if (display) {
+        display = chipFilter;
+      }
+    }
+
+    const popperClass = classNames(classes.popper, {
+      [classes.popperClose]: !open
+    });
+    let allSelected = false;
+
+    if (selectedIdList.length === this.state.nbOptions) {
+      allSelected = true;
+    }
+
+    let 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'
+      });
+    }
+
+    const content = React.createElement(ClickAwayListener, {
+      onClickAway: this.handleClickAway
+    }, React.createElement(Grow, {
+      in: open,
+      id: "menu-list",
+      style: {
+        transformOrigin: '0 0 0'
+      }
+    }, React.createElement(Paper, {
+      className: classes.paper
+    }, !!searchable && React.createElement(HiSearchField, {
+      itemList: options,
+      onFilteredList: this.handleSuggestions,
+      filterPropertyList: ['label'],
+      placeholder: translations.search,
+      autoFocus: true,
+      onSearch: this.props.onSearch,
+      inputRef: el => {
+        this.searchField = el;
+      },
+      onKeyDown: this.handleKeyDownSearch
+    }), React.createElement(Scrollbars, {
+      ref: contentEl => {
+        this.optionsContent = contentEl;
+      },
+      autoHeight: true,
+      autoHeightMax: 400,
+      onScroll: this.handleScroll
+    }, React.createElement(HiSelectableList, _extends({
+      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.createElement("div", {
+      className: classes.root,
+      ref: el => {
+        this.overlay = el;
+      }
+    }, React.createElement(SelectInput, {
+      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: el => {
+        this.selectInputElement = el;
+      }
+    }), open && staticPosition ? React.createElement("div", {
+      style: popperStyle
+    }, content) : React.createElement(Popper, {
+      anchorEl: this.inputEl,
+      placement: "bottom-start",
+      open: open,
+      eventsEnabled: open,
+      className: popperClass,
+      style: popperStyle,
+      disablePortal: true
+    }, content));
+  }
+
+}
+
+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: PropTypes.bool,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: PropTypes.node,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Inactif
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Option permettant d'afficher les sélection sous forme de Chip.
-     */
-    displayAsChip: PropTypes.bool,
-    /**
-     * Applique le style error
-     */
-    error: PropTypes.bool,
-    /**
-     * Affiche l'élément 'All'
-     */
-    hasAll: PropTypes.bool,
-    /**
-     * Les items sont hiérarchisés
-     */
-    hierarchic: PropTypes.bool,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: PropTypes.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: PropTypes.node,
-    /**
-     * Nom de l'icône
-     */
-    iconAll: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    /**
-     * id du select
-     */
-    id: PropTypes.string,
-    /**
-     * Autorise la sélection de plusieurs valeurs
-     */
-    multiple: PropTypes.bool,
-    /**
-     * Nom du champ de formulaire
-     */
-    name: PropTypes.string.isRequired,
-    /**
-     * Fonction de callback qui renvoit la/les valeurs sélectionnées
-     *
-     * @param {object} event
-     * @param {string || array} value
-     */
-    onChange: PropTypes.func.isRequired,
-    /**
-     * Fonction de callback appelée lorsqu'on ferme le select
-     */
-    onClose: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on survole le champs
-     */
-    onMouseEnter: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsque le curseur quitte le champs
-     */
-    onMouseLeave: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
-     * A utiliser pour les selects avec des données dynamiques
-     *
-     * @param {object} event
-     * @param {string} value
-     */
-    onSearch: PropTypes.func,
-    /**
-     * Listes des options du select
-     */
-    options: PropTypes.array.isRequired,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: PropTypes.node,
-    /**
-     * Les items parents sont sélectionnables
-     */
-    parentItemSelectable: PropTypes.bool,
-    /**
-     * Placeholder affiché lorsque le select est fermé
-     * Surcharge le placeholder par défaut
-     */
-    placeholder: PropTypes.string,
-    /**
-     * Affiche un input de recherche permettant de filtrer les options
-     */
-    searchable: PropTypes.bool,
-    /**
-     * Traductions (par défaut en anglais)
-     */
-    translations: PropTypes.object,
-    /**
-     * Type des éléments du select, définit le rendu d'un élément
-     */
-    type: PropTypes.oneOf(['icon', 'text', 'image', 'primary-highlight']),
-    /**
-     * Value(s) du select
-     */
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
+  /**
+   * Icon affiché lorsque l'item est sélectionné
+   */
+  checkedIcon: PropTypes.node,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Popper width
+   */
+  containerWidth: PropTypes.number,
+
+  /**
+   * Inactif
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Option permettant d'afficher les sélection sous forme de Chip.
+   */
+  displayAsChip: PropTypes.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.bool,
+
+  /**
+   * Applique le style error
+   */
+  error: PropTypes.bool,
+
+  /**
+   * Affiche l'élément 'All'
+   */
+  hasAll: PropTypes.bool,
+
+  /**
+   * Indique si l'infinite scroll doit rechercher de nouveaux résultats
+   */
+  hasMore: PropTypes.bool,
+
+  /**
+   * Les items sont hiérarchisés
+   */
+  hierarchic: PropTypes.bool,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+   */
+  hoverIcon: PropTypes.node,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné
+   */
+  icon: PropTypes.node,
+
+  /**
+   * Nom de l'icône
+   */
+  iconAll: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
+  /**
+   * id du select
+   */
+  id: PropTypes.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.bool,
+
+  /**
+   * Ajoute un loader
+   */
+  loading: PropTypes.bool,
+
+  /**
+   * Ajoute un loader en bas pour l'infiniteScroll
+   */
+  loadingMoreResults: PropTypes.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.func,
+
+  /**
+   * Autorise la sélection de plusieurs valeurs
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * Nom du champ de formulaire
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Fonction de callback qui renvoit la/les valeurs sélectionnées
+   *
+   * @param {object} event
+   * @param {string || array} value
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Fonction de callback appelée click dans l'input
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on ferme le select
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on survole le champs
+   */
+  onMouseEnter: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsque le curseur quitte le champs
+   */
+  onMouseLeave: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
+   * A utiliser pour les selects avec des données dynamiques
+   *
+   * @param {object} event
+   * @param {string} value
+   */
+  onSearch: PropTypes.func,
+
+  /**
+   * Fonction de callback à la pression de la touche "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
+  /**
+   * Listes des options du select
+   */
+  options: PropTypes.array.isRequired,
+
+  /**
+   * Icon affiché lorsqu'un item parent n'est pas sélectionné
+   */
+  parentIcon: PropTypes.node,
+
+  /**
+   * Les items parents sont sélectionnables
+   */
+  parentItemSelectable: PropTypes.bool,
+
+  /**
+   * Item épinglé en début de liste
+   */
+  pinnedItem: PropTypes.object,
+
+  /**
+   * Placeholder affiché lorsque le select est fermé
+   * Surcharge le placeholder par défaut
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Affiche un input de recherche permettant de filtrer les options
+   */
+  searchable: PropTypes.bool,
+
+  /**
+   * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
+   */
+  staticPosition: PropTypes.bool,
+
+  /**
+   * Traductions (par défaut en anglais)
+   */
+  translations: PropTypes.object,
+
+  /**
+   * Type des éléments du select, définit le rendu d'un élément
+   */
+  type: PropTypes.oneOf(['icon', 'text', 'image', 'primary-highlight']),
+
+  /**
+   * Value(s) du select
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
 } : {};
-export default withStyles(styles, { name: 'HmuiHiSelect' })(HiSelect);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelect'
+})(HiSelect);