@hipay/hipay-material-ui 2.0.0-beta.68 → 2.0.0-beta.69

package/CHANGELOG.md

@@ -1,3 +1,79 @@
+# [2.0.0-beta.64](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.64) (2019-04-04)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiAlertModal:** Correct styles and buttons positions ([2cfa2a9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2cfa2a9))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiDynamicSelect:** remove onSelect override ([b803044](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b803044))
+* **HiExpansionPanel:** fix props propagation collapseDisable || expanded ([eb18a96](https://gitlab.hipay.org/backend/hipay-material-ui/commit/eb18a96))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** forward event in onClick ([be94fe0](https://gitlab.hipay.org/backend/hipay-material-ui/commit/be94fe0))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiInput:** rename prop to spellCheck ([c11939f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c11939f))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** Forward event in onBlur ([76c6778](https://gitlab.hipay.org/backend/hipay-material-ui/commit/76c6778))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelect:** remove HiSelectNew calls ([cc5397d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cc5397d))
+* **HiSelectableList:** Add lazy props to activate lazyloading (default true) and fix unit tests ([b41f8d2](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b41f8d2))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiTable:** Fix test ([9a009a8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a009a8))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Code Refactoring
+
+* deleting the old HiSelect and replacing it by the new (PSYCHE-1382) ([d5fc252](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d5fc252))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiDatePicke:** add timezone props ([18360a5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/18360a5))
+* **HiDatePicker:** BREAKING CHANGE - add local prop to handle calendar translations ([b1b3743](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1b3743))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiInput:** Add inputProps to enable passing props directly to input element ([d57466c](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d57466c))
+* **HiInput:** add spellcheck property ([b2feac3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b2feac3))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* HiSelectNew no longer exist, make sure you're importing HiSelect instead
+* **HiDatePicker:** Required "local" props (use polyglot, p.currentLocal)
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
 # [2.0.0-beta.64](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.64) (2019-03-27)
 
 

package/HiExpansionPanel/HiExpansionPanel.js

@@ -33,7 +33,7 @@ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/E
 
 var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _HiIcon = _interopRequireDefault(require("./../HiIcon"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
@@ -64,20 +64,28 @@ var styles = function styles(theme) {
       pointerEvents: 'none'
     },
     heading: (0, _extends2.default)({}, theme.typography.b1, {
+      height: 48,
+      display: 'flex',
+      alignItems: 'center',
       fontSize: 20,
       lineHeight: '24px',
       fontWeight: theme.typography.fontWeightLight
     }),
     secondaryHeading: (0, _extends2.default)({}, theme.typography.b3, {
       color: theme.palette.neutral.light,
+      height: 48,
+      display: 'flex',
+      alignItems: 'center',
       fontSize: 11,
       lineHeight: '24px',
       float: 'right',
       marginRight: 32,
       '&>svg': {
         fontSize: 18,
-        marginLeft: 3,
-        marginBottom: -5
+        marginLeft: 3
+      },
+      "&>button": {
+        marginRight: -12
       }
     }),
     panel: {
@@ -101,7 +109,10 @@ var styles = function styles(theme) {
 
 exports.styles = styles;
 
-var _ref = _react.default.createElement(_ExpandMore.default, null);
+var _ref = _react.default.createElement(_HiIcon.default, {
+  icon: "mdi_menu_up",
+  size: 24
+});
 
 var HiExpansionPanel =
 /*#__PURE__*/

package/HiForm/HiInput.js

@@ -341,7 +341,8 @@ function (_React$PureComponent) {
           inputClassName = _this$props.inputClassName,
           onReset = _this$props.onReset,
           spellcheck = _this$props.spellcheck,
-          startAdornmentColor = _this$props.startAdornmentColor;
+          startAdornmentColor = _this$props.startAdornmentColor,
+          inputProps = _this$props.inputProps;
       var focused = this.state.focused;
       var overlayProps = (0, _extends2.default)({
         className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled && !error), (0, _defineProperty2.default)(_classNames, classes.inkbar, !disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error), _classNames), className)
@@ -420,10 +421,10 @@ function (_React$PureComponent) {
             _this2.endAdornmentNode = el;
           }
         }, eraseIcon, endAdornment),
-        inputProps: {
+        inputProps: (0, _extends2.default)({
           spellCheck: spellcheck ? "true" : "false",
           className: (0, _classnames.default)(inputClassName, classes.inputPropsClassName, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.inputText, !multiline), (0, _defineProperty2.default)(_classNames4, classes.inputTextArea, multiline), _classNames4))
-        }
+        }, inputProps)
       }));
     }
   }], [{
@@ -509,6 +510,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   inputId: _propTypes.default.string,
 
+  /**
+   * Passe des props directement à l'input
+   */
+  inputProps: _propTypes.default.object,
+
   /**
    * Passe une ref callback au composant input
    */

package/HiSelect/HiSelect.js

@@ -510,11 +510,28 @@ function (_React$PureComponent) {
         this.inputEl.focus();
       }
     }
+  }, {
+    key: "getLengthItemList",
+    value: function getLengthItemList(itemList) {
+      var _this2 = this;
+
+      var itemListLength = 0;
+      itemList.forEach(function (parent) {
+        if (parent.displayed && itemListLength < 10) {
+          itemListLength += 1;
+
+          if (parent.children && itemListLength < 10) {
+            itemListLength += _this2.getLengthItemList(parent.children);
+          }
+        }
+      });
+      return itemListLength;
+    }
   }, {
     key: "render",
     value: function render() {
       var _classNames,
-          _this2 = this;
+          _this3 = this;
 
       var _this$props4 = this.props,
           classes = _this$props4.classes,
@@ -581,10 +598,10 @@ function (_React$PureComponent) {
           return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
             value: searchValue,
             autoFocus: true,
-            inputRef: _this2.getInputElement,
-            onKeyDown: _this2.handleKeyDownSearch,
-            onChange: _this2.handleSearch,
-            onReset: _this2.handleSearchReset,
+            inputRef: _this3.getInputElement,
+            onKeyDown: _this3.handleKeyDownSearch,
+            onChange: _this3.handleSearch,
+            onReset: _this3.handleSearchReset,
             placeholder: translations.search,
             startAdornment: 'search',
             tabIndex: 0,
@@ -597,8 +614,10 @@ function (_React$PureComponent) {
 
 
       if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
-        // +1 for search input
-        var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+        // In case we have a nested list
+        var itemListLength = this.getLengthItemList(itemList); // +1 for search input
+
+        var nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
         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)';
@@ -607,12 +626,12 @@ function (_React$PureComponent) {
       var content = function content(_ref) {
         var placement = _ref.placement;
 
-        if (placement !== _this2.placement) {
-          _this2.placement = placement;
+        if (placement !== _this3.placement) {
+          _this3.placement = placement;
         }
 
         return _react.default.createElement(_ClickAwayListener.default, {
-          onClickAway: _this2.handleClickAway
+          onClickAway: _this3.handleClickAway
         }, _react.default.createElement(_Grow.default, {
           in: open,
           id: "menu-list",
@@ -621,29 +640,29 @@ function (_React$PureComponent) {
           }
         }, _react.default.createElement(_Paper.default, {
           className: classes.paper
-        }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+        }, (_this3.placement && _this3.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
           ref: function ref(contentEl) {
-            _this2.optionsContent = contentEl;
+            _this3.optionsContent = contentEl;
           },
           autoHeight: true,
           autoHeightMax: 430
         }, onScrollReachBottom && {
-          onScroll: _this2.handleScroll
+          onScroll: _this3.handleScroll
         }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
           type: type,
           itemList: itemList,
-          onSelect: _this2.handleSelect,
+          onSelect: _this3.handleSelect,
           selectedItemIdList: selectedItemIdList,
-          fallbackImage: _this2.props.fallbackImage,
-          overlay: _this2.overlay,
+          fallbackImage: _this3.props.fallbackImage,
+          overlay: _this3.overlay,
           value: value
-        }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+        }, hiSelectableListProps))), _this3.placement && _this3.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
       };
 
       return _react.default.createElement("div", {
         className: classes.root,
         ref: function ref(el) {
-          _this2.overlay = el;
+          _this3.overlay = el;
         },
         onKeyDown: this.handleKeyDown,
         onKeyDownCapture: this.handleKeyDownCapture
@@ -666,7 +685,7 @@ function (_React$PureComponent) {
         placeholder: placeholder
       }, hiSelectInputProps, {
         refElement: function refElement(el) {
-          _this2.inputEl = el;
+          _this3.inputEl = el;
         }
       })), open && staticPosition ? _react.default.createElement("div", {
         style: popperStyle,

package/HiSelectableList/HiSelectableList.js

@@ -163,9 +163,9 @@ function (_React$PureComponent) {
           overflow: true,
           placeholder: placeholderContent
         }, itemComponent);
-      } else {
-        return itemComponent;
       }
+
+      return itemComponent;
     };
 
     _this.compareItem = function (a, b) {

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import HiIcon from './../HiIcon';
 import withStyles from '../styles/withStyles';
 import classNames from 'classnames';
 export const styles = theme => ({
@@ -33,20 +33,28 @@ export const styles = theme => ({
     pointerEvents: 'none'
   },
   heading: _objectSpread({}, theme.typography.b1, {
+    height: 48,
+    display: 'flex',
+    alignItems: 'center',
     fontSize: 20,
     lineHeight: '24px',
     fontWeight: theme.typography.fontWeightLight
   }),
   secondaryHeading: _objectSpread({}, theme.typography.b3, {
     color: theme.palette.neutral.light,
+    height: 48,
+    display: 'flex',
+    alignItems: 'center',
     fontSize: 11,
     lineHeight: '24px',
     float: 'right',
     marginRight: 32,
     '&>svg': {
       fontSize: 18,
-      marginLeft: 3,
-      marginBottom: -5
+      marginLeft: 3
+    },
+    "&>button": {
+      marginRight: -12
     }
   }),
   panel: {
@@ -67,7 +75,10 @@ export const styles = theme => ({
   }
 });
 
-var _ref = React.createElement(ExpandMoreIcon, null);
+var _ref = React.createElement(HiIcon, {
+  icon: "mdi_menu_up",
+  size: 24
+});
 
 class HiExpansionPanel extends React.PureComponent {
   render() {

package/es/HiForm/HiInput.js

@@ -292,7 +292,8 @@ class HiInput extends React.PureComponent {
       inputClassName,
       onReset,
       spellcheck,
-      startAdornmentColor
+      startAdornmentColor,
+      inputProps
     } = this.props;
     const {
       focused
@@ -385,13 +386,13 @@ class HiInput extends React.PureComponent {
           this.endAdornmentNode = el;
         }
       }, eraseIcon, endAdornment),
-      inputProps: {
+      inputProps: _objectSpread({
         spellCheck: spellcheck ? "true" : "false",
         className: classNames(inputClassName, classes.inputPropsClassName, {
           [classes.inputText]: !multiline,
           [classes.inputTextArea]: multiline
         })
-      }
+      }, inputProps)
     }));
   }
 
@@ -465,6 +466,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   inputId: PropTypes.string,
 
+  /**
+   * Passe des props directement à l'input
+   */
+  inputProps: PropTypes.object,
+
   /**
    * Passe une ref callback au composant input
    */

package/es/HiSelect/HiSelect.js

@@ -432,6 +432,12 @@ class HiSelect extends React.PureComponent {
     this.getInputElement = this.getInputElement.bind(this);
   }
 
+  componentDidMount() {
+    if (this.props.autoFocus) {
+      this.inputEl.focus();
+    }
+  }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.options !== prevState.suggestions) {
       return _objectSpread({}, prevState, {
@@ -451,10 +457,18 @@ class HiSelect extends React.PureComponent {
    */
 
 
-  componentDidMount() {
-    if (this.props.autoFocus) {
-      this.inputEl.focus();
-    }
+  getLengthItemList(itemList) {
+    let itemListLength = 0;
+    itemList.forEach(parent => {
+      if (parent.displayed && itemListLength < 10) {
+        itemListLength += 1;
+
+        if (parent.children && itemListLength < 10) {
+          itemListLength += this.getLengthItemList(parent.children);
+        }
+      }
+    });
+    return itemListLength;
   }
 
   render() {
@@ -544,8 +558,10 @@ class HiSelect extends React.PureComponent {
 
 
     if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
-      // +1 for search input
-      const nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+      // In case we have a nested list
+      const itemListLength = this.getLengthItemList(itemList); // +1 for search input
+
+      const nbItems = itemListLength <= 10 ? itemListLength + 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)';

package/es/HiSelectableList/HiSelectableList.js

@@ -107,9 +107,9 @@ class HiSelectableList extends React.PureComponent {
           overflow: true,
           placeholder: placeholderContent
         }, itemComponent);
-      } else {
-        return itemComponent;
       }
+
+      return itemComponent;
     };
 
     this.compareItem = (a, b) => {

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.68
+/** @license HiPay-Material-UI v2.0.0-beta.69
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.68
+/** @license HiPay-Material-UI v2.0.0-beta.69
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.68",
+  "version": "2.0.0-beta.69",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.68
+/** @license HiPay-Material-UI v2.0.0-beta.69
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -72923,7 +72923,8 @@
                       inputClassName = _this$props.inputClassName,
                       onReset = _this$props.onReset,
                       spellcheck = _this$props.spellcheck,
-                      startAdornmentColor = _this$props.startAdornmentColor;
+                      startAdornmentColor = _this$props.startAdornmentColor,
+                      inputProps = _this$props.inputProps;
                   var focused = this.state.focused;
 
                   var overlayProps = _extends_1({
@@ -73003,10 +73004,10 @@
                         _this2.endAdornmentNode = el;
                       }
                     }, eraseIcon, endAdornment),
-                    inputProps: {
+                    inputProps: _extends_1({
                       spellCheck: spellcheck ? "true" : "false",
                       className: classnames(inputClassName, classes.inputPropsClassName, (_classNames4 = {}, defineProperty(_classNames4, classes.inputText, !multiline), defineProperty(_classNames4, classes.inputTextArea, multiline), _classNames4))
-                    }
+                    }, inputProps)
                   }));
                 }
               }], [{
@@ -73093,6 +73094,11 @@
                */
               inputId: propTypes.string,
 
+              /**
+               * Passe des props directement à l'input
+               */
+              inputProps: propTypes.object,
+
               /**
                * Passe une ref callback au composant input
                */
@@ -80183,9 +80189,9 @@
                       overflow: true,
                       placeholder: placeholderContent
                     }, itemComponent);
-                  } else {
-                    return itemComponent;
                   }
+
+                  return itemComponent;
                 };
 
                 _this.compareItem = function (a, b) {
@@ -108961,11 +108967,28 @@
                     this.inputEl.focus();
                   }
                 }
+              }, {
+                key: "getLengthItemList",
+                value: function getLengthItemList(itemList) {
+                  var _this2 = this;
+
+                  var itemListLength = 0;
+                  itemList.forEach(function (parent) {
+                    if (parent.displayed && itemListLength < 10) {
+                      itemListLength += 1;
+
+                      if (parent.children && itemListLength < 10) {
+                        itemListLength += _this2.getLengthItemList(parent.children);
+                      }
+                    }
+                  });
+                  return itemListLength;
+                }
               }, {
                 key: "render",
                 value: function render() {
                   var _classNames,
-                      _this2 = this;
+                      _this3 = this;
 
                   var _this$props4 = this.props,
                       classes = _this$props4.classes,
@@ -109032,10 +109055,10 @@
                       return React.createElement(HiInput$1, _extends_1({
                         value: searchValue,
                         autoFocus: true,
-                        inputRef: _this2.getInputElement,
-                        onKeyDown: _this2.handleKeyDownSearch,
-                        onChange: _this2.handleSearch,
-                        onReset: _this2.handleSearchReset,
+                        inputRef: _this3.getInputElement,
+                        onKeyDown: _this3.handleKeyDownSearch,
+                        onChange: _this3.handleSearch,
+                        onReset: _this3.handleSearchReset,
                         placeholder: translations.search,
                         startAdornment: 'search',
                         tabIndex: 0,
@@ -109048,8 +109071,10 @@
 
 
                   if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
-                    // +1 for search input
-                    var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+                    // In case we have a nested list
+                    var itemListLength = this.getLengthItemList(itemList); // +1 for search input
+
+                    var nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
                     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)';
@@ -109058,12 +109083,12 @@
                   var content = function content(_ref) {
                     var placement = _ref.placement;
 
-                    if (placement !== _this2.placement) {
-                      _this2.placement = placement;
+                    if (placement !== _this3.placement) {
+                      _this3.placement = placement;
                     }
 
                     return React.createElement(ClickAwayListener$2, {
-                      onClickAway: _this2.handleClickAway
+                      onClickAway: _this3.handleClickAway
                     }, React.createElement(Grow$2, {
                       in: open,
                       id: "menu-list",
@@ -109072,29 +109097,29 @@
                       }
                     }, React.createElement(Paper$2, {
                       className: classes.paper
-                    }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends_1({
+                    }, (_this3.placement && _this3.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends_1({
                       ref: function ref(contentEl) {
-                        _this2.optionsContent = contentEl;
+                        _this3.optionsContent = contentEl;
                       },
                       autoHeight: true,
                       autoHeightMax: 430
                     }, onScrollReachBottom && {
-                      onScroll: _this2.handleScroll
+                      onScroll: _this3.handleScroll
                     }), React.createElement(HiSelectableList$1, _extends_1({
                       type: type,
                       itemList: itemList,
-                      onSelect: _this2.handleSelect,
+                      onSelect: _this3.handleSelect,
                       selectedItemIdList: selectedItemIdList,
-                      fallbackImage: _this2.props.fallbackImage,
-                      overlay: _this2.overlay,
+                      fallbackImage: _this3.props.fallbackImage,
+                      overlay: _this3.overlay,
                       value: value
-                    }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+                    }, hiSelectableListProps))), _this3.placement && _this3.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
                   };
 
                   return React.createElement("div", {
                     className: classes.root,
                     ref: function ref(el) {
-                      _this2.overlay = el;
+                      _this3.overlay = el;
                     },
                     onKeyDown: this.handleKeyDown,
                     onKeyDownCapture: this.handleKeyDownCapture
@@ -109117,7 +109142,7 @@
                     placeholder: placeholder
                   }, hiSelectInputProps, {
                     refElement: function refElement(el) {
-                      _this2.inputEl = el;
+                      _this3.inputEl = el;
                     }
                   })), open && staticPosition ? React.createElement("div", {
                     style: popperStyle,