@hipay/hipay-material-ui 2.1.0-RC1 → 2.2.0-RC1

package/HiSelect/HiSelect.js

@@ -19,8 +19,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -158,22 +156,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
+      var itemList = (0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return _this.props.filterFunc(item, search);
-      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []), (0, _toConsumableArray2.default)(options))));
+      })] : []).concat((0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList,
         inputValue: _this.buildInputValue(options, value, loading)
@@ -210,6 +208,7 @@ function (_React$PureComponent) {
             className: classes.selectIconLabel
           }, _react.default.createElement(_HiIcon.default, {
             className: classes.labelIcon,
+            color: item.color,
             icon: item.icon
           }), item.label);
         } else if (type === 'image' || item.type === 'image') {
@@ -455,7 +454,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
+        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
       }
     };
 
@@ -481,13 +480,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []), (0, _toConsumableArray2.default)(suggestions))
+          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -512,6 +511,20 @@ function (_React$PureComponent) {
       }, '');
     };
 
+    _this.getLengthItemList = function (itemList) {
+      var itemListLength = 0;
+      itemList.forEach(function (parent) {
+        if (parent.displayed !== false) {
+          itemListLength += 1;
+
+          if (parent.children) {
+            itemListLength += _this.getLengthItemList(parent.children);
+          }
+        }
+      });
+      return itemListLength;
+    };
+
     _this.state = {
       alertOpen: false,
       open: false,
@@ -521,16 +534,6 @@ function (_React$PureComponent) {
       openDown: true,
       overlayWidth: 0
     };
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)(_this));
-    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -547,28 +550,11 @@ function (_React$PureComponent) {
         });
       }
     }
-  }, {
-    key: "getLengthItemList",
-    value: function getLengthItemList(itemList) {
-      var _this2 = this;
-
-      var itemListLength = 0;
-      itemList.forEach(function (parent) {
-        if (parent.displayed !== false) {
-          itemListLength += 1;
-
-          if (parent.children) {
-            itemListLength += _this2.getLengthItemList(parent.children);
-          }
-        }
-      });
-      return itemListLength;
-    }
   }, {
     key: "render",
     value: function render() {
       var _classNames,
-          _this3 = this;
+          _this2 = this;
 
       var _this$props4 = this.props,
           alert = _this$props4.alert,
@@ -594,6 +580,7 @@ function (_React$PureComponent) {
           searchValue = _this$props4$searchVa === void 0 ? this.state.searchValue : _this$props4$searchVa,
           startAdornment = _this$props4.startAdornment,
           staticPosition = _this$props4.staticPosition,
+          maxOptionsDisplayed = _this$props4.maxOptionsDisplayed,
           _this$props4$buildSel = _this$props4.buildSelectProps,
           buildSelectProps = _this$props4$buildSel === void 0 ? this.buildSelectProps : _this$props4$buildSel;
       var _this$state = this.state,
@@ -637,10 +624,10 @@ function (_React$PureComponent) {
           return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
             value: searchValue,
             autoFocus: true,
-            inputRef: _this3.getInputElement,
-            onKeyDown: _this3.handleKeyDownSearch,
-            onChange: _this3.handleSearch,
-            onReset: _this3.handleSearchReset,
+            inputRef: _this2.getInputElement,
+            onKeyDown: _this2.handleKeyDownSearch,
+            onChange: _this2.handleSearch,
+            onReset: _this2.handleSearchReset,
             placeholder: translations.search,
             startAdornment: 'search',
             tabIndex: 0,
@@ -656,7 +643,7 @@ function (_React$PureComponent) {
         // In case we have a nested list
         var itemListLength = this.getLengthItemList(itemList); // +1 for search input
 
-        var nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
+        var nbItems = itemListLength <= maxOptionsDisplayed - 2 ? itemListLength + 1 : maxOptionsDisplayed - 1;
         popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
       } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
         popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
@@ -665,12 +652,14 @@ function (_React$PureComponent) {
       var content = function content(_ref) {
         var placement = _ref.placement;
 
-        if (placement !== _this3.placement) {
-          _this3.placement = placement;
+        if (placement !== _this2.placement) {
+          _this2.placement = placement;
         }
 
+        var nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
+        var autoHeightMax = nbItemsDisplayed * 40 - 10;
         return _react.default.createElement(_ClickAwayListener.default, {
-          onClickAway: _this3.handleClickAway
+          onClickAway: _this2.handleClickAway
         }, _react.default.createElement(_Grow.default, {
           in: open,
           id: "menu-list",
@@ -678,30 +667,33 @@ function (_React$PureComponent) {
             transformOrigin: '0 0 0'
           }
         }, _react.default.createElement(_Paper.default, {
+          style: maxOptionsDisplayed < 12 ? {
+            maxHeight: 40 * maxOptionsDisplayed
+          } : {},
           className: classes.paper
-        }, (_this3.placement && _this3.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+        }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
           ref: function ref(contentEl) {
-            _this3.optionsContent = contentEl;
+            _this2.optionsContent = contentEl;
           },
           autoHeight: true,
-          autoHeightMax: 430
+          autoHeightMax: autoHeightMax
         }, onScrollReachBottom && {
-          onScroll: _this3.handleScroll
+          onScroll: _this2.handleScroll
         }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
           type: type,
           itemList: itemList,
-          onSelect: _this3.handleSelect,
+          onSelect: _this2.handleSelect,
           selectedItemIdList: selectedItemIdList,
-          fallbackImage: _this3.props.fallbackImage,
-          overlay: _this3.overlay,
+          fallbackImage: _this2.props.fallbackImage,
+          overlay: _this2.overlay,
           value: value
-        }, hiSelectableListProps))), _this3.placement && _this3.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+        }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
       };
 
       return !_reactDeviceDetect.isMobile ? _react.default.createElement("div", {
         className: classes.root,
         ref: function ref(el) {
-          _this3.overlay = el;
+          _this2.overlay = el;
         },
         onKeyDown: this.handleKeyDown,
         onKeyDownCapture: this.handleKeyDownCapture
@@ -734,7 +726,7 @@ function (_React$PureComponent) {
         placeholder: placeholder
       }, hiSelectInputProps, {
         refElement: function refElement(el) {
-          _this3.inputEl = el;
+          _this2.inputEl = el;
         }
       })), open && staticPosition ? _react.default.createElement("div", {
         style: popperStyle,
@@ -748,7 +740,7 @@ function (_React$PureComponent) {
         style: popperStyle
       }, content)) : _react.default.createElement("div", {
         ref: function ref(el) {
-          _this3.overlay = el;
+          _this2.overlay = el;
         }
       }, _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
         id: id,
@@ -767,7 +759,7 @@ function (_React$PureComponent) {
         placeholder: placeholder
       }, hiSelectInputProps, {
         refElement: function refElement(el) {
-          _this3.inputEl = el;
+          _this2.inputEl = el;
         }
       })), _react.default.createElement(_HiSelectMobile.default, {
         onChange: this.handleSelect,
@@ -826,7 +818,8 @@ HiSelect.defaultProps = {
     one_child: '%s item'
   },
   type: 'text',
-  filterFunc: filterValue
+  filterFunc: filterValue,
+  maxOptionsDisplayed: 12
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -910,6 +903,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   loading: _propTypes.default.bool,
 
+  /**
+   * Nombre max d'items affichés
+   */
+  maxOptionsDisplayed: _propTypes.default.number,
+
   /**
    * Autorise la sélection de plusieurs valeurs
    */

package/HiSelect/HiSelectContent.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -179,7 +179,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
+        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
       }
     };
 
@@ -209,13 +209,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []), (0, _toConsumableArray2.default)(suggestions))
+          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -251,22 +251,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
+      var itemList = (0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return item.label && _this.props.filterFunc(item, search);
-      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []), (0, _toConsumableArray2.default)(options))));
+      })] : []).concat((0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList
       };
@@ -286,10 +286,10 @@ function (_React$PureComponent) {
       searchValue: props.searchValue ? undefined : '',
       suggestions: props.options
     };
-    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiSelect/HiSelectInput.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -234,11 +234,11 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiSelect/HiSuggestSelect.js

@@ -19,8 +19,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -87,7 +85,8 @@ function (_React$PureComponent) {
     value: function getDerivedStateFromProps(props, state) {
       if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
         return {
-          options: props.options
+          options: props.options,
+          suggestionFocusIndex: -1
         };
       }
 
@@ -101,6 +100,14 @@ function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, HiSuggestSelect);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSuggestSelect).call(this, props));
 
+    _this.getInputElement = function (el) {
+      _this.textInput = el;
+
+      if (_this.props.inputRef) {
+        _this.props.inputRef(_this.textInput);
+      }
+    };
+
     _this.handleSelect = function (event, value) {
       document.body.style.overflow = 'auto';
 
@@ -144,74 +151,73 @@ function (_React$PureComponent) {
     };
 
     _this.handleKeyDownSearch = function (event) {
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-        document.body.style.overflow = 'hidden'; // On récupère la div parent "overlay"
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
 
-        var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
-        setTimeout(function () {
-          // On recupère tous les items
-          var items = overlay.getElementsByTagName('li');
+        if (_this.state.suggestionFocusIndex < _this.props.options.length - 1) {
+          _this.setState(function (prevState) {
+            return {
+              suggestionFocusIndex: prevState.suggestionFocusIndex + 1
+            };
+          });
+        }
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
 
-          if (items.length) {
-            // On focus sur le premier
-            items[0].focus();
-          }
-        }, 1);
+        if (_this.state.suggestionFocusIndex >= 0) {
+          _this.setState(function (prevState) {
+            return {
+              suggestionFocusIndex: prevState.suggestionFocusIndex - 1
+            };
+          });
+        }
+      } else if (event.key === 'Enter' && _this.state.suggestionFocusIndex >= 0) {
+        event.preventDefault(); // Suggestion focused
+
+        _this.handleSelect(event, _this.state.options[_this.state.suggestionFocusIndex]);
       } else if (event.key === 'Escape') {
         _this.setState({
-          options: []
+          options: [],
+          suggestionFocusIndex: -1
         });
       }
     };
 
-    _this.state = {
-      focused: false,
-      options: props.options
-    };
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
-    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  }
-
-  (0, _createClass2.default)(HiSuggestSelect, [{
-    key: "getInputElement",
-    value: function getInputElement(el) {
-      this.textInput = el;
-
-      if (this.props.inputRef) {
-        this.props.inputRef(this.textInput);
-      }
-    }
-  }, {
-    key: "handleFocus",
-    value: function handleFocus(event) {
-      this.setState({
+    _this.handleFocus = function (event) {
+      _this.setState({
         focused: true
       });
 
-      if (this.props.onFocusInput) {
-        this.props.onFocusInput(event);
+      if (_this.props.onFocusInput) {
+        _this.props.onFocusInput(event);
       }
-    }
-  }, {
-    key: "handleBlur",
-    value: function handleBlur(event) {
+    };
+
+    _this.handleBlur = function (event) {
       // Si on click sur un élément de HiInput, on garde le focus
       // Par exemple sur l'icone reset
-      if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
-        this.setState({
+      if (!event.relatedTarget || !_this.overlay || !_this.overlay.contains(event.relatedTarget)) {
+        _this.setState({
           options: [],
-          focused: false
+          focused: false,
+          suggestionFocusIndex: -1
         });
 
-        if (this.props.onBlurInput) {
-          this.props.onBlurInput(event);
+        if (_this.props.onBlurInput) {
+          _this.props.onBlurInput(event);
         }
       }
-    }
-  }, {
+    };
+
+    _this.state = {
+      focused: false,
+      options: props.options,
+      suggestionFocusIndex: -1
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiSuggestSelect, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -229,7 +235,8 @@ function (_React$PureComponent) {
           otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
       var _this$state = this.state,
           focused = _this$state.focused,
-          options = _this$state.options;
+          options = _this$state.options,
+          suggestionFocusIndex = _this$state.suggestionFocusIndex;
       var optionsShown = options; // If loading
 
       if (loading) {
@@ -288,7 +295,8 @@ function (_React$PureComponent) {
         hideCheckbox: true,
         onSelect: this.handleSelect,
         translations: translations,
-        onKeyDown: this.handleKeyDown
+        onKeyDown: this.handleKeyDown,
+        suggestionFocusIndex: suggestionFocusIndex
       })))));
     }
   }]);

package/HiSelectableList/HiSelectableList.js

@@ -11,6 +11,8 @@ exports.default = exports.styles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -39,10 +41,16 @@ var _keycode = _interopRequireDefault(require("keycode"));
 
 var _reactLazyload = _interopRequireWildcard(require("react-lazyload"));
 
-var styles = function styles() {
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var styles = function styles(theme) {
   return {
     root: {
       padding: 0
+    },
+    suggestionFocus: {
+      backgroundColor: theme.palette.action.hover,
+      fontWeight: theme.typography.fontWeightMedium
     }
   };
 };
@@ -96,8 +104,8 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.buildRecursiveListItem = function (item) {
-      var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    _this.buildRecursiveListItem = function (item, index) {
+      var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       var _this$props = _this.props,
           checkedIcon = _this$props.checkedIcon,
           disabled = _this$props.disabled,
@@ -110,7 +118,9 @@ function (_React$PureComponent) {
           sort = _this$props.sort,
           onKeyDown = _this$props.onKeyDown,
           onKeyUp = _this$props.onKeyUp,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
+          suggestionFocusIndex = _this$props.suggestionFocusIndex,
+          classes = _this$props.classes,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
@@ -147,11 +157,14 @@ function (_React$PureComponent) {
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
         ,
-        item: item
+        item: item,
+        classes: {
+          listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
+        }
       }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
-        return _this.buildRecursiveListItem(subItem, level + 1);
+        return _this.buildRecursiveListItem(subItem, index, level + 1);
       }));
 
       if (lazy) {
@@ -255,8 +268,8 @@ function (_React$PureComponent) {
       }, itemList.filter(function (item) {
         return !(item.displayed === false);
       }) // don't remove if undefined
-      .map(function (item) {
-        return _this3.buildRecursiveListItem(item);
+      .map(function (item, index) {
+        return _this3.buildRecursiveListItem(item, index);
       }));
     }
   }]);
@@ -347,6 +360,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   selectedItemIdList: _propTypes.default.array,
 
+  /**
+   * Index de l'item "focus"
+   */
+  suggestionFocusIndex: _propTypes.default.number,
+
   /**
    * Tri des éléments selon leur label
    */
@@ -365,7 +383,8 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
 
 var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectableList'
+  name: 'HmuiHiSelectableList',
+  index: 51
 })(HiSelectableList);
 
 exports.default = _default;