@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/es/HiSelect/HiSelect.js

@@ -9,11 +9,9 @@ import Grow from 'material-ui/transitions/Grow';
 import { findDOMNode } from 'react-dom';
 import Paper from 'material-ui/Paper';
 import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
-import Collapse from 'material-ui/transitions/Collapse';
 import { Manager, Target, Popper } from 'react-popper';
 import { CheckboxBlankOutline, CheckboxMarked } from 'mdi-material-ui';
 import HiSelectableList from '../HiSelectableList';
-import HiSelectableListItem from '../HiSelectableList/HiSelectableListItem';
 import { HiSearchField } from '../HiForm';
 import SelectInput from './SelectInput';
 import HiChip from '../HiChip/HiChip';
@@ -30,8 +28,7 @@ export const styles = theme => ({
     },
     popper: {
         width: '100%',
-        transform: 'none !important',
-        zIndex: 9
+        zIndex: 11
     },
     paper: {
         borderRadius: '0px 2px',
@@ -72,231 +69,7 @@ class HiSelect extends React.PureComponent {
     constructor(props) {
         super(props);
 
-        this.handleClick = () => {
-            document.body.style.overflow = 'hidden';
-            this.setState({ open: true });
-            const 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
-                const searchField = this.searchField;
-                setTimeout(() => {
-                    searchField.focus();
-                }, 1);
-            } else if (this.overlay) {
-                // sinon focus sur le dernier élément selectionné
-                this.focusOnSelectedItem();
-            }
-        };
-
-        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];
-                    }
-                    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') {
-                document.body.style.overflow = 'auto';
-                this.setState({ open: false });
-            }
-            if (nextItem) {
-                nextItem.focus();
-            }
-        };
-
-        this.handleKeyDownSearch = event => {
-            if (this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-                this.focusOnSelectedItem();
-            }
-        };
-
-        this.handleFocus = () => {
-            this.setState({ focused: true });
-        };
-
-        this.handleBlur = () => {
-            this.setState({ focused: false });
-        };
-
-        this.handleClose = () => {
-            document.body.style.overflow = 'auto';
-            this.setState({
-                open: false
-            });
-
-            if (this.props.onClose) {
-                this.props.onClose();
-            }
-        };
-
-        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);
-                    }
-                }
-                this.setState({ hierarchySelected: hiSelected });
-                onChange(event, valueList);
-            } else {
-                onChange(event, item.id);
-                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, []);
-        };
+        _initialiseProps.call(this);
 
         this.state = {
             open: false,
@@ -308,28 +81,30 @@ class HiSelect extends React.PureComponent {
             dynamic: false
         };
 
-        if (props.hierarchic === true && props.options.length > 1) {
-            // 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);
-                    }
+        // 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;
                 }
             });
+        }
 
-            this.state.hierarchy = hierarchy;
-            this.state.hierarchySelected = hierarchySelected;
+        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) {
@@ -348,6 +123,7 @@ class HiSelect extends React.PureComponent {
         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);
@@ -365,6 +141,33 @@ class HiSelect extends React.PureComponent {
             });
             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
@@ -398,14 +201,12 @@ class HiSelect extends React.PureComponent {
             classes,
             disabled,
             error,
-            multiple,
             options,
             checkbox,
             searchable,
             displayAsChip,
             type,
             value,
-            hasSelectedCount = multiple,
             translations,
             parentItemSelectable,
             icon,
@@ -413,23 +214,35 @@ class HiSelect extends React.PureComponent {
             hoverIcon,
             checkedIcon,
             hierarchic,
-            id
+            id,
+            placeholder,
+            staticPosition,
+            pinnedItem
         } = this.props;
 
         const { open, suggestions, focused } = this.state;
 
         let display = '';
-        const selectedIdList = Array.isArray(value) ? value : [value];
+        const selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
+
+        let _suggestions = [...suggestions];
+        if (pinnedItem) {
+            _suggestions = [pinnedItem, ...suggestions];
+        }
 
         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) {
+        } 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;
+                let item = options.find(o => o.id === selectedIdList[0]);
+                if (!item && pinnedItem) {
+                    item = pinnedItem;
+                }
+                display = item.label;
             } else {
                 const optionSelected = options.find(o => o.id === selectedIdList[0]);
                 display = React.createElement(
@@ -442,7 +255,7 @@ class HiSelect extends React.PureComponent {
         }
 
         if (displayAsChip) {
-            const chipFilter = React.createElement(HiChip, { label: display, onDelete: this.handleRequestDelete });
+            const chipFilter = React.createElement(HiChip, { label: placeholder || display, onDelete: this.handleRequestDelete });
             if (display) {
                 display = chipFilter;
             }
@@ -462,6 +275,50 @@ class HiSelect extends React.PureComponent {
             popperStyle = { width: this.props.containerWidth };
         }
 
+        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,
+                        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
+                    })
+                )
+            )
+        );
+
         return React.createElement(
             'div',
             {
@@ -478,7 +335,7 @@ class HiSelect extends React.PureComponent {
                     null,
                     React.createElement(SelectInput, {
                         id: id,
-                        value: display,
+                        value: placeholder || display,
                         open: open,
                         focused: focused,
                         type: type,
@@ -489,10 +346,17 @@ class HiSelect extends React.PureComponent {
                         onFocus: this.handleFocus,
                         onBlur: this.handleBlur,
                         onMouseEnter: this.props.onMouseEnter,
-                        onMouseLeave: this.props.onMouseLeave
+                        onMouseLeave: this.props.onMouseLeave,
+                        refElement: el => {
+                            this.selectInputElement = el;
+                        }
                     })
                 ),
-                open && React.createElement(
+                open && (staticPosition ? React.createElement(
+                    'div',
+                    { style: popperStyle },
+                    content
+                ) : React.createElement(
                     Popper,
                     {
                         placement: 'bottom-start',
@@ -500,69 +364,8 @@ class HiSelect extends React.PureComponent {
                         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
-                                }),
-                                !!hasSelectedCount && React.createElement(
-                                    Collapse,
-                                    {
-                                        'in': selectedIdList.length > 0,
-                                        timeout: 'auto',
-                                        unmountOnExit: true
-                                    },
-                                    React.createElement(HiSelectableListItem, {
-                                        key: '_selected_count',
-                                        item: {
-                                            id: '_selected_count',
-                                            type: 'text',
-                                            disabled: true,
-                                            checkbox: false,
-                                            label: selectedIdList.length < 2 ? translations.one_item_selected.replace('%s', selectedIdList.length) : translations.n_items_selected.replace('%s', selectedIdList.length),
-                                            centered: true
-                                        }
-                                    })
-                                ),
-                                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
-                                })
-                            )
-                        )
-                    )
-                )
+                    content
+                ))
             )
         );
     }
@@ -592,8 +395,272 @@ HiSelect.defaultProps = {
         one_item_selected: '%s item selected',
         n_children: '%s items',
         one_child: '%s item'
-    }
+    },
+    staticPosition: false
 };
+
+var _initialiseProps = function () {
+    this.handleClick = () => {
+        if (this.state.open) {
+            this.handleClose();
+        } else {
+            if (!this.props.staticPosition) {
+                //document.body.style.overflow = 'hidden';
+            }
+            this.setState({ open: true });
+            const 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
+                const searchField = this.searchField;
+                setTimeout(() => {
+                    searchField.focus();
+                }, 1);
+            } else if (this.overlay) {
+                // sinon focus sur le dernier élément selectionné
+                this.focusOnSelectedItem();
+            }
+        }
+    };
+
+    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);
+    };
+
+    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') {
+            if (!this.props.staticPosition) {
+                //document.body.style.overflow = 'auto';
+            }
+            this.setState({ open: false });
+        }
+        if (nextItem) {
+            nextItem.focus();
+        }
+    };
+
+    this.handleKeyDownSearch = event => {
+        if (this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            this.focusOnSelectedItem();
+        }
+    };
+
+    this.handleFocus = () => {
+        this.setState({ focused: true });
+    };
+
+    this.handleBlur = () => {
+        this.setState({ focused: false });
+    };
+
+    this.handleClose = () => {
+        if (!this.props.staticPosition) {
+            //document.body.style.overflow = 'auto';
+        }
+        this.setState({
+            open: false
+        });
+
+        if (this.props.onClose) {
+            this.props.onClose();
+        }
+        if (this.selectInputElement) {
+            this.selectInputElement.focus();
+        }
+    };
+
+    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, onChange, options, hierarchic, pinnedItem } = 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 {
+                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);
+
+                    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;
+                        }
+                    });
+
+                    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({ hierarchySelected: hiSelected });
+            onChange(event, valueList);
+        } else {
+            onChange(event, item.id);
+            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, []);
+    };
+};
+
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Affiche une checkbox pour chaque éléments, par défaut si options est nested
@@ -623,10 +690,6 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Affiche l'élément 'All'
      */
     hasAll: PropTypes.bool,
-    /**
-     * Affiche le compte d'éléments sélectionnés en haut de la liste
-     */
-    hasSelectedCount: PropTypes.bool,
     /**
      * Les items sont hiérarchisés
      */
@@ -678,6 +741,7 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * 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,
@@ -693,10 +757,23 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * 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)
      */