@hipay/hipay-material-ui 2.0.0-beta.61 → 2.0.0-beta.63

package/es/HiSelect/HiSelect.js

@@ -1,24 +1,20 @@
 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/core/Grow';
-import { findDOMNode } from 'react-dom';
 import Scrollbars from 'react-custom-scrollbars';
+import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Popper from '@material-ui/core/Popper';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import HiSelectableList from '../HiSelectableList';
-import HiSearchField from '../HiForm/HiSearchField';
-import SelectInput from './SelectInput';
-import HiChip from '../HiChip/HiChip';
-import { withStyles } from '../styles';
-import { arrayUnique, getNextItemSelectable } from '../utils/helpers';
+import HiInput from '../HiForm/HiInput';
+import HiSelectInput from './HiSelectInput';
+import withStyles from '../styles/withStyles';
+import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import HiIcon from '../HiIcon';
-export const INFINITESCROLL_ERROR_MESSAGE = 'La propriété "loadMoreResults" est obligatoire si la prop "infiniteScroll" est à true';
+import keycode from 'keycode';
+import classNames from 'classnames';
 export const styles = theme => ({
   root: {
     backgroundColor: theme.palette.background2,
@@ -32,14 +28,24 @@ export const styles = theme => ({
   popperWidth: {
     width: '100% !important'
   },
+  popperRightAlign: {
+    right: 0,
+    left: 'unset!important'
+  },
   paper: {
     borderRadius: '0px 2px',
-    maxHeight: 440,
+    maxHeight: 480,
     transition: 'none !important'
   },
   labelIcon: {
     marginRight: 10
   },
+  labelImg: {
+    height: 18,
+    width: 'auto',
+    margin: '0 4px',
+    verticalAlign: 'middle'
+  },
   selectIconLabel: _objectSpread({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -48,8 +54,24 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     display: 'inline-flex',
     width: '100%'
-  })
+  }),
+  selectImgLabel: _objectSpread({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    paddingRight: 16
+  }, theme.typography.b1, {
+    display: 'inline-flex',
+    width: '100%'
+  }),
+  separator: {
+    borderTop: `1px solid ${theme.palette.input.bottomLine}`
+  }
 });
+
+function filterValue(item, search) {
+  return search === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1;
+}
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -58,83 +80,120 @@ export const styles = theme => ({
  * - avec / sans barre de recherche
  * - avec / sans option "All"
  * - prise en compte du type des éléments (text, image, icon, ...)
+ * - les actions du clavier son capturés avec KeyDown
  *
  * Ce composant réuni les sous-composants
- * - SelectInput : affiche l'élément dans le formulaire
- * - HiSearchField : intègre une barre de recherche dans le Popper,
- * il filtre la liste des suggestions
+ * - HiSelectInput : affiche l'élément dans le formulaire
+ * - HiSearchField : intègre une barre de recherche dans le Popper, il filtre la liste des suggestions
  * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
  */
 
+
 class HiSelect extends React.PureComponent {
-  constructor(_props) {
-    super(_props);
-
-    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);
-          }
-        }
-      });
+  constructor(props) {
+    super(props);
+
+    this.buildSelectProps = (options, value = [], search = '', loading = false) => {
+      // build item list
+      const itemList = [...(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : []), // simple one level filter on label
+      ...(search !== '' ? [...options.filter(item => this.props.filterFunc(item, search))] : [...(this.props.hasAll ? [_objectSpread({
+        id: '_all',
+        label: this.props.translations.all
+      }, this.props.iconAll && {
+        type: 'icon',
+        icon: this.props.iconAll
+      })] : []), ...options])];
       return {
-        hierarchy,
-        hierarchySelected
+        itemList,
+        inputValue: this.buildInputValue(options, value, loading)
       };
     };
 
-    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
+    this.buildInputValue = (options, value = [], loading = false) => {
+      const {
+        classes,
+        hasAll,
+        translations,
+        type
+      } = this.props; // build input value
+
+      let inputValue;
+
+      if (loading && value.length === 1) {
+        inputValue = translations.one_item_selected;
+      } else if (hasAll && options.length === value.length) {
+        inputValue = translations.all;
+        value.unshift('_all');
+      } else if (value.length > 1) {
+        inputValue = translations.n_items_selected.replace('%s', value.length);
+      } else if (value.length === 1) {
+        const item = options.find(o => o.id === value[0]);
+
+        if (item === undefined) {
+          inputValue = translations.one_item_selected;
+        } else if (type === 'icon' || item.type === 'icon') {
+          inputValue = React.createElement("span", {
+            className: classes.selectIconLabel
+          }, React.createElement(HiIcon, {
+            className: classes.labelIcon,
+            icon: item.icon
+          }), item.label);
+        } else if (type === 'image' || item.type === 'image') {
+          inputValue = React.createElement("span", {
+            className: classes.selectIconLabel
+          }, React.createElement("img", {
+            className: classes.labelImg,
+            src: item.img,
+            alt: item.label,
+            onError: e => {
+              if (item.fallbackImage) {
+                e.target.src = `${item.fallbackImage}`;
+              } else {
+                e.target.style.display = 'none';
+              }
+            }
+          }), item.label);
+        } else {
+          inputValue = item.label;
+        }
+      }
 
+      return inputValue;
+    };
 
-        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
+    this.focusOnFirstItem = () => {
+      if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(() => {
+          const item = this.overlay.getElementsByTagName('li')[0];
+          item.focus();
+        }, 1);
+      }
+    };
 
-          if (multiple && selectedIdList.length > 0) {
-            itemToFocus = items[1];
-          }
+    this.getInputElement = el => {
+      this.searchField = el;
 
-          if (itemToFocus) {
-            itemToFocus.focus();
-          }
-        }
-      }, 1);
+      if (this.props.inputRef) {
+        this.props.inputRef(this.searchField);
+      }
     };
 
-    this.handleBlur = () => {
+    this.handleBlur = event => {
+      this.handleSearchReset();
       this.setState({
         focused: false
       });
+
+      if (this.props.onBlur && !this.inputEl.contains(event.relatedTarget) && !this.state.open) {
+        this.props.onBlur(event);
+      }
     };
 
     this.handleClick = () => {
@@ -144,40 +203,55 @@ class HiSelect extends React.PureComponent {
         this.setState({
           open: true
         });
-        const options = this.props.options.slice();
-        this.handleSuggestions(options);
-
-        if (this.props.onClick) {
-          this.props.onClick();
-        } // Gestion du focus
-
+        this.handleSuggestions(this.props.options);
+        if (this.props.onClick) this.props.onClick(); // Gestion du focus
 
         if (!this.props.searchable) {
-          // sinon focus sur le dernier élément selectionné
-          this.focusOnSelectedItem();
+          // Sinon focus sur l'élément sélectionné
+          this.focusOnSelectedItem(this.props.value);
         }
       }
     };
 
+    this.focusOnSelectedItem = selectedValue => {
+      if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(() => {
+          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+          let item = this.overlay.getElementsByTagName('li')[0];
+
+          if (selectedValue && typeof selectedValue === 'string') {
+            item = this.overlay.getElementsByTagName('li')[selectedValue];
+          } else if (selectedValue && typeof selectedValue === 'number') {
+            item = this.overlay.getElementsByTagName('li')[selectedValue - 1];
+          }
+
+          if (item) {
+            item.focus();
+          }
+        }, 1);
+      }
+    };
+
     this.handleClickAway = event => {
       // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!this.selectInputElement.contains(event.target)) {
+      if (!this.inputEl.contains(event.target)) {
         this.handleClose(event);
       }
     };
 
     this.handleClose = () => {
+      this.handleSearchReset();
+      this.setState({
+        open: false
+      });
+
       if (this.props.onClose) {
         this.props.onClose();
       }
 
-      if (this.selectInputElement) {
-        this.selectInputElement.focus();
+      if (this.inputEl) {
+        this.inputEl.focus();
       }
-
-      this.setState({
-        open: false
-      });
     };
 
     this.handleFocus = () => {
@@ -186,310 +260,199 @@ class HiSelect extends React.PureComponent {
       });
     };
 
-    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' || event.key === 'Escape') {
-        /* if (!this.props.staticPosition) {
-            document.body.style.overflow = 'auto';
-        } */
-        this.setState({
-          open: false
-        });
+    this.handleKeyDownCapture = event => {
+      const key = keycode(event);
+
+      if (key === 'enter') {
+        if (this.state.open) {
+          if (this.props.multiple) {
+            event.stopPropagation();
+            this.handleClose();
+          }
+        }
       }
+    };
+
+    this.handleKeyDown = event => {
+      const key = keycode(event);
+
+      if (key === 'esc') {
+        event.preventDefault();
+        this.handleClose();
+      } else if (key === 'enter') {
+        if (this.state.open) {
+          if (this.props.multiple) {
+            this.handleClose();
+          }
+        }
+      } else if (key === 'space') {
+        event.preventDefault();
 
-      if (nextItem) {
-        nextItem.focus();
+        if (this.state.open) {
+          if (!this.props.multiple) {
+            this.setState({
+              open: false
+            });
+          }
+        } else {
+          this.setState({
+            open: true
+          });
+        }
+      } else if (key === 'tab') {
+        this.handleClose();
       }
     };
 
     this.handleKeyDownSearch = event => {
-      if (this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-        this.focusOnSelectedItem();
-      } else if (event.key === 'Enter' && this.props.onSubmit) {
-        this.props.onSubmit(event);
-      } else if (event.key === 'Tab' || event.key === 'Escape') {
+      const key = keycode(event);
+
+      if (this.overlay && (key === 'down' || key === 'up')) {
+        this.focusOnFirstItem();
+      } else if (this.overlay && key === 'esc' || key === 'enter') {
+        event.preventDefault();
+        this.handleClose();
+      } else if (key === 'tab') {
         this.setState({
           open: false
         });
       }
     };
 
-    this.handleRequestDelete = event => {
-      event.stopPropagation();
-      this.props.onChange(this.props.name, []);
-    };
-
-    this.handleReset = event => {
-      if (this.props.onReset) {
-        event.stopPropagation();
-        this.props.onReset(event);
-      }
-    };
-
-    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.handleScroll = e => {
+      if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
+        this.props.onScrollReachBottom();
       }
     };
 
     this.handleSelect = (event, item) => {
       const {
+        hasAll,
         multiple,
-        value,
         onChange,
         options,
-        hierarchic,
-        pinnedItem
+        value
       } = 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] = [];
-              });
-            }
-          } 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);
-          }
+      if (!multiple) {
+        // single value
+        this.handleClose();
+        onChange(event, item.id, item);
+      } else if (hasAll && item.id === '_all') {
+        if (value.length === options.length) {
+          // unselect _all options
+          onChange(event, [], item);
         } else {
-          if (pinnedItem && item.id === pinnedItem.id) {
-            Object.keys(hiSelected).map(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);
-          }
+          // select _all options
+          onChange(event, options.map(option => option.id), item);
         }
-
-        this.setState({
-          hierarchySelected: hiSelected
-        });
-        onChange(event, valueList, item);
+      } else if (value.includes(item.id)) {
+        // unselect item
+        onChange(event, value.filter(id => id !== item.id), item);
       } else {
-        onChange(event, item.id, item);
-        this.handleClose();
+        onChange(event, [...value, item.id], item);
       }
     };
 
     this.handleSuggestions = suggestions => {
       const {
-        options,
         hasAll,
         iconAll,
-        translations,
-        multiple
+        translations
       } = 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 = {
+        // Add '_no_result' suggestion
+        this.setState(prevState => _objectSpread({}, prevState, {
+          suggestions: [{
+            id: '_no_result',
+            type: 'text',
+            disabled: true,
+            centered: true,
+            hideCheckbox: true,
+            label: translations.no_result_match
+          }]
+        }));
+      } else {
+        this.setState({
+          suggestions: [// Add '_all' suggestion
+          ...(hasAll ? [_objectSpread({
             id: '_all',
-            icon: iconAll,
             label: translations.all
-          };
+          }, iconAll && {
+            type: 'icon',
+            icon: iconAll
+          })] : []), ...suggestions]
+        });
+      }
+    };
 
-          if (iconAll !== false) {
-            allItem.type = 'icon';
-          }
+    this.handleSearch = (e, inputValue) => {
+      const searchValue = inputValue && e.target.value ? inputValue : e.target.value;
 
-          suggestions.unshift(allItem);
-        }
+      if (this.props.onSearch) {
+        this.props.onSearch(e, searchValue);
+      } else {
+        this.setState({
+          searchValue
+        });
       }
+    };
 
-      this.setState({
-        suggestions
-      });
+    this.handleSearchReset = () => {
+      this.handleSearch({
+        target: {
+          value: ''
+        }
+      }, '');
     };
 
     this.state = {
       open: false,
       focused: false,
-      suggestions: [],
-      hierarchySelected: {},
-      hierarchy: {},
-      nbOptions: 0,
-      dynamic: _props.dynamic || false,
-      resultsPageNumber: 1
-    }; // Check if value is in options
-
-    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;
+      searchValue: props.searchValue ? undefined : '',
+      suggestions: props.options,
+      openDown: true
+    };
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleClickAway = this.handleClickAway.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSearchReset = this.handleSearchReset.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleSuggestions = this.handleSuggestions.bind(this);
+    this.getInputElement = this.getInputElement.bind(this);
+  }
 
-      _props.options.forEach(option => {
-        if (option.hasChildren !== true && option.id !== '_all') {
-          optionsLength += 1;
-        }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.options !== prevState.suggestions) {
+      return _objectSpread({}, prevState, {
+        suggestions: nextProps.options
       });
-
-      this.state.nbOptions = optionsLength;
-    } else if (!_props.dynamic) {
-      this.state.dynamic = true;
     }
+
+    return null;
   }
+  /**
+   * Build itemList & inputValue from select props
+   * @param options
+   * @param value
+   * @param search
+   * @param loading
+   * @returns {{itemList: *[], inputValue: *}}
+   */
 
-  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
-      });
+  componentDidMount() {
+    if (this.props.autoFocus) {
+      this.inputEl.focus();
     }
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       classes,
       disabled,
       error,
@@ -499,105 +462,42 @@ class HiSelect extends React.PureComponent {
       displayAsChip,
       type,
       value,
+      multiple,
       translations,
-      parentItemSelectable,
-      icon,
-      parentIcon,
-      hoverIcon,
-      checkedIcon,
+      hiSearchInputProps,
+      hiSelectableListProps,
+      hiSelectInputProps,
       id,
+      onScrollReachBottom,
+      onSubmit,
       placeholder,
+      searchValue = this.state.searchValue,
+      startAdornment,
       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"]);
+      buildSelectProps = this.buildSelectProps // use parent builder if defined
 
+    } = this.props;
     const {
       open,
-      suggestions: stateSuggestions,
-      focused,
-      dynamic
+      focused
     } = 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;
+    if (multiple) {
+      if (!Array.isArray(value)) {
+        throw new Error('HiPay Material-UI: the `value` property must be an array ' + 'when using the `HiSelect` component with `multiple`.');
       }
     }
 
-    const popperClass = classNames(classes.popper, {
-      [classes.popperWidth]: !this.props.containerWidth
-    });
-    let allSelected = false;
+    let selectedItemIdList = [];
 
-    if (selectedIdList.length === this.state.nbOptions) {
-      allSelected = true;
+    if (value) {
+      selectedItemIdList = multiple ? [...value] : [value];
     }
 
+    const {
+      itemList,
+      inputValue = this.buildInputValue(options, selectedItemIdList, loading)
+    } = buildSelectProps(options, selectedItemIdList, searchValue, loading);
     let popperStyle = {};
 
     if (this.props.containerWidth > 0) {
@@ -610,69 +510,87 @@ class HiSelect extends React.PureComponent {
       }
     }
 
-    if (infiniteScroll && loadingMoreResults) {
-      suggestions.push({
-        id: '_loading',
-        type: 'loader',
-        disabled: true,
-        centered: true,
-        checkbox: false,
-        label: 'loading'
-      });
+    const popperClass = classNames(classes.popper, {
+      [classes.popperWidth]: !this.props.containerWidth,
+      [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right'
+    });
+
+    const searchInput = position => {
+      if (searchable) {
+        return React.createElement(HiInput, _extends({
+          value: searchValue,
+          autoFocus: true,
+          inputRef: this.getInputElement,
+          onKeyDown: this.handleKeyDownSearch,
+          onChange: this.handleSearch,
+          onReset: this.handleSearchReset,
+          placeholder: translations.search,
+          startAdornment: 'search',
+          tabIndex: 0,
+          className: classNames({
+            [classes.separator]: position === 'top'
+          })
+        }, hiSearchInputProps));
+      }
+
+      return null;
+    }; // Replace popper onSearch when popper displayed on top of selectButton
+
+
+    if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
+      // +1 for search input
+      const nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+      popperStyle.transform = `translate3d(-1px, -${nbItems * 40 + 2}px, 0px)`;
+    } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
+      popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
     }
 
-    const content = React.createElement(ClickAwayListener, {
-      onClickAway: this.handleClickAway
-    }, React.createElement(Grow, {
-      in: open,
-      id: "menu-list",
-      style: {
-        transformOrigin: '0 0 0'
+    const content = ({
+      placement
+    }) => {
+      if (placement !== this.placement) {
+        this.placement = placement;
       }
-    }, 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(ClickAwayListener, {
+        onClickAway: this.handleClickAway
+      }, React.createElement(Grow, {
+        in: open,
+        id: "menu-list",
+        style: {
+          transformOrigin: '0 0 0'
+        }
+      }, React.createElement(Paper, {
+        className: classes.paper
+      }, (this.placement && this.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends({
+        ref: contentEl => {
+          this.optionsContent = contentEl;
+        },
+        autoHeight: true,
+        autoHeightMax: 430
+      }, onScrollReachBottom && {
+        onScroll: this.handleScroll
+      }), React.createElement(HiSelectableList, _extends({
+        type: type,
+        itemList: itemList,
+        onSelect: this.handleSelect,
+        selectedItemIdList: selectedItemIdList,
+        fallbackImage: this.props.fallbackImage,
+        overlay: this.overlay,
+        value: value
+      }, hiSelectableListProps))), this.placement && this.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+    };
+
     return React.createElement("div", {
       className: classes.root,
       ref: el => {
         this.overlay = el;
-      }
-    }, React.createElement(SelectInput, {
+      },
+      onKeyDown: this.handleKeyDown,
+      onKeyDownCapture: this.handleKeyDownCapture
+    }, React.createElement(HiSelectInput, _extends({
       id: id,
-      value: placeholder || display,
+      value: inputValue,
       open: open,
       focused: focused,
       type: type,
@@ -682,42 +600,44 @@ class HiSelect extends React.PureComponent {
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      onKeyDown: this.handleKeyDown,
+      onSubmit: onSubmit,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
+      onReset: this.props.onReset,
+      placeholder: placeholder
+    }, hiSelectInputProps, {
       refElement: el => {
-        this.selectInputElement = el;
-      },
-      onReset: this.props.onReset
-    }), open && staticPosition ? React.createElement("div", {
-      style: popperStyle
-    }, content) : React.createElement(Popper, {
+        this.inputEl = el;
+      }
+    })), open && staticPosition ? React.createElement("div", {
+      style: popperStyle,
+      className: popperClass
+    }, content({})) : React.createElement(Popper, {
       anchorEl: this.inputEl,
       placement: "bottom-start",
       open: open,
       className: popperClass,
-      style: popperStyle,
-      disablePortal: true
+      disablePortal: true,
+      style: popperStyle
     }, content));
   }
 
 }
 
 HiSelect.defaultProps = {
-  containerWidth: 0,
+  align: 'left',
+  autoFocus: false,
   disabled: false,
   displayAsChip: false,
-  dynamic: false,
   error: false,
   hasAll: false,
-  hasMore: false,
-  hierarchic: false,
-  iconAll: false,
-  infiniteScroll: false,
-  loadingMoreResults: false,
+  hiSelectableListProps: {},
+  hiSelectInputProps: {},
+  hiSearchInputProps: {},
   multiple: false,
-  parentItemSelectable: false,
-  type: 'text',
+  placeholder: '',
+  searchable: false,
+  staticPosition: false,
   translations: {
     all: 'All',
     no_result_match: 'No result match',
@@ -727,14 +647,16 @@ HiSelect.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  searchable: false,
-  staticPosition: false
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  align: PropTypes.oneOf(['left', 'right']),
+
   /**
-   * Icon affiché lorsque l'item est sélectionné
+   * Permet de forcer le focus sur le composant
    */
-  checkedIcon: PropTypes.node,
+  autoFocus: PropTypes.bool,
 
   /**
    * Useful to extend the style applied to components.
@@ -756,77 +678,56 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   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'
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
    */
-  hasAll: PropTypes.bool,
+  fallbackImage: PropTypes.string,
+
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
 
   /**
-   * Indique si l'infinite scroll doit rechercher de nouveaux résultats
+   * Affiche l'élément 'All'
    */
-  hasMore: PropTypes.bool,
+  hasAll: PropTypes.bool,
 
   /**
-   * Les items sont hiérarchisés
+   * Override HiInput props (for search)
    */
-  hierarchic: PropTypes.bool,
+  hiSearchInputProps: PropTypes.object,
 
   /**
-   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+   * Override HiSelectableList props
    */
-  hoverIcon: PropTypes.node,
+  hiSelectableListProps: PropTypes.object,
 
   /**
-   * Icon affiché lorsque l'item n'est pas sélectionné
+   * Override HiSelectInput props
    */
-  icon: PropTypes.node,
+  hiSelectInputProps: PropTypes.object,
 
   /**
    * Nom de l'icône
    */
-  iconAll: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  iconAll: PropTypes.string,
 
   /**
    * 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
    */
@@ -837,6 +738,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   name: PropTypes.string.isRequired,
 
+  /**
+   * Fonction de callback appelée lorsqu'on perd le focus
+   */
+  onBlur: PropTypes.func,
+
   /**
    * Fonction de callback qui renvoit la/les valeurs sélectionnées
    *
@@ -845,11 +751,6 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   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
    */
@@ -871,18 +772,14 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   onReset: 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
+   * Fonction de callback appelée lorsque le scroll atteint le bas de la liste
    */
-  onSearch: PropTypes.func,
+  onScrollReachBottom: PropTypes.func,
 
   /**
-   * Fonction de callback à la pression de la touche "Entrée"
+   * Fonction de callback appelée lorsque le champs de recherche est utilisé
    */
-  onSubmit: PropTypes.func,
+  onSearch: PropTypes.func,
 
   /**
    * Listes des options du select
@@ -890,23 +787,7 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   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 affiché lorsque l'input est vide
    */
   placeholder: PropTypes.string,
 
@@ -916,7 +797,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   searchable: PropTypes.bool,
 
   /**
-   * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
+   * Node qui s'ajoute entre la barre de recherche et la liste de résultats
+   */
+  startAdornment: PropTypes.object,
+
+  /**
+   * Si true, le contenu du select sera dans une div static plutôt que dans une popper absolute
    */
   staticPosition: PropTypes.bool,