@hipay/hipay-material-ui 2.0.0-beta.76 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,80 @@
+# [2.1.0](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.1.0) (2019-08-29)
+
+
+### 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))
+* **HiAlertModal:** Title is not required anymore and will not create warning ([4019d33](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4019d33))
+* **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.76](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.76) (2019-07-18)
 
 

package/HiDatePicker/HiDatePicker.js

@@ -59,10 +59,6 @@ var _stylesheet = _interopRequireDefault(require("./stylesheet"));
 
 var _reactDeviceDetect = require("react-device-detect");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
-
 var _HiDatePickerMobile = _interopRequireDefault(require("./HiDatePickerMobile"));
 
 var HiDatePicker =

package/HiExpansionPanel/HiExpansionPanel.js

@@ -43,11 +43,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var styles = function styles(theme) {
   return {
     summaryContent: {
-      display: 'inline-block',
+      display: 'flex',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
       border: 'none',
       '&$expanded': {
         margin: 'initial'
-      }
+      },
+      maxWidth: '100%'
     },
     summaryRoot: {
       borderBottom: '1px solid #E3E6E7',
@@ -77,17 +80,21 @@ var styles = function styles(theme) {
       display: 'flex',
       alignItems: 'center',
       fontSize: 11,
-      lineHeight: '24px',
-      float: 'right',
-      marginRight: 32,
       '&>svg': {
         fontSize: 18,
         marginLeft: 3
       },
-      "&>button": {
+      '&>button': {
         marginRight: -12
-      }
+      },
+      marginLeft: 24,
+      overflow: 'hidden'
     }),
+    secondaryHeadingSpan: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    },
     panel: {
       boxShadow: 'none',
       border: 'none'
@@ -156,10 +163,12 @@ function (_React$PureComponent) {
         className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseDisable, collapseDisable)),
         expandIcon: !collapseDisable && _ref
       }, _react.default.createElement("div", {
-        className: classes.secondaryHeading
-      }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled, secondaryHeadingIcon), _react.default.createElement("div", {
         className: classes.heading
-      }, heading)), !!children && _react.default.createElement(_ExpansionPanelDetails.default, {
+      }, heading), _react.default.createElement("div", {
+        className: classes.secondaryHeading
+      }, _react.default.createElement("span", {
+        className: classes.secondaryHeadingSpan
+      }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && _react.default.createElement(_ExpansionPanelDetails.default, {
         className: classes.panelDetails
       }, children));
     }

package/HiForm/index.js

@@ -59,6 +59,18 @@ Object.defineProperty(exports, "HiTextField", {
     return _HiTextField.default;
   }
 });
+Object.defineProperty(exports, "HiUpload", {
+  enumerable: true,
+  get: function get() {
+    return _HiUpload.default;
+  }
+});
+Object.defineProperty(exports, "HiUploadField", {
+  enumerable: true,
+  get: function get() {
+    return _HiUploadField.default;
+  }
+});
 
 var _HiAddressField = _interopRequireDefault(require("./HiAddressField"));
 
@@ -76,4 +88,8 @@ var _HiSearchField = _interopRequireDefault(require("./HiSearchField"));
 
 var _HiSlider = _interopRequireDefault(require("./HiSlider"));
 
-var _HiTextField = _interopRequireDefault(require("./HiTextField"));
+var _HiTextField = _interopRequireDefault(require("./HiTextField"));
+
+var _HiUpload = _interopRequireDefault(require("./HiUpload"));
+
+var _HiUploadField = _interopRequireDefault(require("./HiUploadField"));

package/HiNotice/HiKPI.js

@@ -45,7 +45,11 @@ var styles = function styles(theme) {
       textAlign: 'center',
       flexDirection: 'column',
       alignItems: 'center',
-      fontFamily: theme.typography.fontFamily
+      fontFamily: theme.typography.fontFamily,
+      transition: 'height .5s ease-out'
+    },
+    rootDisable: {
+      cursor: 'default'
     },
     error: {
       boxShadow: '0px 2px 4px 0px rgba(213, 0, 0, 0.24)',
@@ -149,20 +153,20 @@ function (_React$Component) {
           id = _this$props.id,
           tooltip = _this$props.tooltip,
           disable = _this$props.disable;
-      var rootclass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.inherit, color === 'inherit' && !disable), (0, _defineProperty2.default)(_classNames, classes.warning, color === 'warning' && !disable), (0, _defineProperty2.default)(_classNames, classes.error, color === 'error' && !disable), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive' && !disable), (0, _defineProperty2.default)(_classNames, classes.active, active), (0, _defineProperty2.default)(_classNames, classes.minify, minify), _classNames));
-      return _react.default.createElement(_Collapse.default, {
-        in: !minify,
-        timeout: "auto",
-        collapsedHeight: "88px"
-      }, _react.default.createElement(_ButtonBase.default, {
+      var rootclass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.inherit, color === 'inherit' && !disable), (0, _defineProperty2.default)(_classNames, classes.warning, color === 'warning' && !disable), (0, _defineProperty2.default)(_classNames, classes.error, color === 'error' && !disable), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive' && !disable), (0, _defineProperty2.default)(_classNames, classes.active, active), (0, _defineProperty2.default)(_classNames, classes.minify, minify), (0, _defineProperty2.default)(_classNames, classes.rootDisable, disable), _classNames));
+      return _react.default.createElement(_ButtonBase.default, {
         className: rootclass,
         onClick: !disable ? this.handleClick(id) : undefined,
-        title: tooltip
+        title: tooltip,
+        disableRipple: disable
       }, title && _react.default.createElement("h3", {
         className: classes.title
       }, title), _react.default.createElement("div", {
         className: classes.body
-      }, minify && bodyMinify ? bodyMinify : body), subtitle && minify === false && _react.default.createElement("div", {
+      }, minify && bodyMinify ? bodyMinify : body), _react.default.createElement(_Collapse.default, {
+        in: !minify,
+        timeout: 'auto'
+      }, _react.default.createElement("div", {
         className: classes.subtitle
       }, subtitle)));
     }

package/HiPaymentMeans/HiPaymentMeans.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -301,6 +303,8 @@ function (_React$Component) {
     _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiPaymentMeans)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _this.buildPaymentLayoutByType = function () {
+      var _classNames;
+
       var _this$props = _this.props,
           businessName = _this$props.businessName,
           cardNumber = _this$props.cardNumber,
@@ -317,7 +321,8 @@ function (_React$Component) {
           theme = _this$props.theme,
           translations = _this$props.translations,
           type = _this$props.type,
-          yearMember = _this$props.yearMember;
+          yearMember = _this$props.yearMember,
+          fallbackImage = _this$props.fallbackImage;
       var formatNumber;
 
       if (type === 'credit-card' || type === 'debit-card' || type === 'prepaid-card') {
@@ -348,7 +353,25 @@ function (_React$Component) {
         username = "".concat(translations.gender_male, " ").concat(cardUser);
       }
 
-      var creditDebit = translations.credit && translations.debit && (credit ? translations.credit : translations.debit).toUpperCase();
+      var creditDebit = null;
+
+      if (translations.credit && translations.debit) {
+        creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
+      }
+
+      var imgComponent = _react.default.createElement("img", {
+        src: brandLogo,
+        alt: '',
+        className: (0, _classnames.default)(classes.logo, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.logoLeft, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0), (0, _defineProperty2.default)(_classNames, classes.logoRight, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0), _classNames)),
+        onError: function onError(e) {
+          if (fallbackImage) {
+            e.target.src = "".concat(fallbackImage);
+          } else {
+            e.target.style.display = 'none';
+          }
+        }
+      });
+
       var cardLayout;
 
       switch (type) {
@@ -368,11 +391,7 @@ function (_React$Component) {
             className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet)
           }, username), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoLeft)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
           })));
           break;
@@ -386,11 +405,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.number, classes.cardNumber)
@@ -413,11 +428,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }, _react.default.createElement("div", {
             className: classes.corporateLabel,
@@ -454,11 +465,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopLeft)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoLeft)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
           }), cardNumber && _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelMedium, classes.ibanLabel)
@@ -479,11 +486,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }, _react.default.createElement("img", {
             src: logoMerchant,
@@ -506,11 +509,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.number, classes.cardNumber)
@@ -622,6 +621,11 @@ HiPaymentMeans.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   credit: _propTypes.default.bool,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si le logo n'est pas trouvé
+   */
+  fallbackImage: _propTypes.default.string,
+
   /**
    * Logo du moyen de paiement
    */

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"));
@@ -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') {
@@ -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
    */