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

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;

package/HiSelectableList/HiSelectableListItem.js

@@ -378,7 +378,7 @@ function (_React$PureComponent) {
         indeterminateIcon: indeterminateIcon
       }), type === 'image' && img && _react.default.createElement("img", {
         src: img,
-        alt: img,
+        alt: '',
         onError: function onError(e) {
           if (fallbackImage) {
             e.target.src = "".concat(fallbackImage);

package/README.md

@@ -240,8 +240,8 @@ npm install -g cz-conventional-changelog
 
 1. Changer la version dans package.json et dans packages/hipay-material-ui/package.json
 2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
-3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
-4. Build : ```npm run build```
+3. Commiter la release : ```git ci -am "chore(release): VERSION DATE (YYYY-mm-dd)```
+4. Build : ```cd packages/hipay-material-ui/ && npm run build```
 5. Publish :
 
 ```sh

package/es/HiDatePicker/HiDatePicker.js

@@ -18,8 +18,6 @@ import Weekday from './Weekday';
 import HiTextField from '../HiForm/HiTextField';
 import styles from './stylesheet';
 import { isMobile } from 'react-device-detect';
-import classNames from 'classnames';
-import HiFormControl from '../HiForm/HiFormControl';
 import HiDatePickerMobile from './HiDatePickerMobile';
 
 class HiDatePicker extends React.Component {

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -12,11 +12,14 @@ import withStyles from '../styles/withStyles';
 import classNames from 'classnames';
 export const styles = theme => ({
   summaryContent: {
-    display: 'inline-block',
+    display: 'flex',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
     border: 'none',
     '&$expanded': {
       margin: 'initial'
-    }
+    },
+    maxWidth: '100%'
   },
   summaryRoot: {
     borderBottom: '1px solid #E3E6E7',
@@ -46,17 +49,21 @@ export const 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'
@@ -116,10 +123,12 @@ class HiExpansionPanel extends React.PureComponent {
       }),
       expandIcon: !collapseDisable && _ref
     }, React.createElement("div", {
-      className: classes.secondaryHeading
-    }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled, secondaryHeadingIcon), React.createElement("div", {
       className: classes.heading
-    }, heading)), !!children && React.createElement(ExpansionPanelDetails, {
+    }, heading), React.createElement("div", {
+      className: classes.secondaryHeading
+    }, React.createElement("span", {
+      className: classes.secondaryHeadingSpan
+    }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && React.createElement(ExpansionPanelDetails, {
       className: classes.panelDetails
     }, children));
   }

package/es/HiForm/index.js

@@ -6,4 +6,6 @@ export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiSearchField } from './HiSearchField';
 export { default as HiSlider } from './HiSlider';
-export { default as HiTextField } from './HiTextField';
+export { default as HiTextField } from './HiTextField';
+export { default as HiUpload } from './HiUpload';
+export { default as HiUploadField } from './HiUploadField';

package/es/HiNotice/HiKPI.js

@@ -15,7 +15,11 @@ export const 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)',
@@ -109,21 +113,22 @@ class HiKPI extends React.Component {
       [classes.error]: color === 'error' && !disable,
       [classes.positive]: color === 'positive' && !disable,
       [classes.active]: active,
-      [classes.minify]: minify
+      [classes.minify]: minify,
+      [classes.rootDisable]: disable
     });
-    return React.createElement(Collapse, {
-      in: !minify,
-      timeout: "auto",
-      collapsedHeight: "88px"
-    }, React.createElement(ButtonBase, {
+    return React.createElement(ButtonBase, {
       className: rootclass,
       onClick: !disable ? this.handleClick(id) : undefined,
-      title: tooltip
+      title: tooltip,
+      disableRipple: disable
     }, title && React.createElement("h3", {
       className: classes.title
     }, title), React.createElement("div", {
       className: classes.body
-    }, minify && bodyMinify ? bodyMinify : body), subtitle && minify === false && React.createElement("div", {
+    }, minify && bodyMinify ? bodyMinify : body), React.createElement(Collapse, {
+      in: !minify,
+      timeout: 'auto'
+    }, React.createElement("div", {
       className: classes.subtitle
     }, subtitle)));
   }

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -276,7 +276,8 @@ class HiPaymentMeans extends React.Component {
         theme,
         translations,
         type,
-        yearMember
+        yearMember,
+        fallbackImage
       } = this.props;
       let formatNumber;
 
@@ -308,7 +309,27 @@ class HiPaymentMeans extends React.Component {
         username = `${translations.gender_male} ${cardUser}`;
       }
 
-      const creditDebit = translations.credit && translations.debit && (credit ? translations.credit : translations.debit).toUpperCase();
+      let creditDebit = null;
+
+      if (translations.credit && translations.debit) {
+        creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
+      }
+
+      const imgComponent = React.createElement("img", {
+        src: brandLogo,
+        alt: '',
+        className: classNames(classes.logo, {
+          [classes.logoLeft]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0,
+          [classes.logoRight]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0
+        }),
+        onError: e => {
+          if (fallbackImage) {
+            e.target.src = `${fallbackImage}`;
+          } else {
+            e.target.style.display = 'none';
+          }
+        }
+      });
       let cardLayout;
 
       switch (type) {
@@ -328,11 +349,7 @@ class HiPaymentMeans extends React.Component {
             className: classNames(classes.labelLarge, classes.userNameWallet)
           }, username), React.createElement("span", {
             className: classNames(classes.stripe, classes.stripeBottomLeft)
-          }, React.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: classNames(classes.logo, classes.logoLeft)
-          })), React.createElement("span", {
+          }, imgComponent), React.createElement("span", {
             className: classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
           })));
           break;
@@ -346,11 +363,7 @@ class HiPaymentMeans extends React.Component {
             }
           }, React.createElement("span", {
             className: classNames(classes.stripe, classes.stripeTopRight)
-          }, React.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: classNames(classes.logo, classes.logoRight)
-          })), React.createElement("span", {
+          }, imgComponent), React.createElement("span", {
             className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }), React.createElement("div", {
             className: classNames(classes.number, classes.cardNumber)
@@ -373,11 +386,7 @@ class HiPaymentMeans extends React.Component {
             }
           }, React.createElement("span", {
             className: classNames(classes.stripe, classes.stripeTopRight)
-          }, React.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: classNames(classes.logo, classes.logoRight)
-          })), React.createElement("span", {
+          }, imgComponent), React.createElement("span", {
             className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }, React.createElement("div", {
             className: classes.corporateLabel,
@@ -414,11 +423,7 @@ class HiPaymentMeans extends React.Component {
             }
           }, React.createElement("span", {
             className: classNames(classes.stripe, classes.stripeTopLeft)
-          }, React.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: classNames(classes.logo, classes.logoLeft)
-          })), React.createElement("span", {
+          }, imgComponent), React.createElement("span", {
             className: classNames(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
           }), cardNumber && React.createElement("div", {
             className: classNames(classes.labelMedium, classes.ibanLabel)
@@ -440,11 +445,7 @@ class HiPaymentMeans extends React.Component {
             }
           }, React.createElement("span", {
             className: classNames(classes.stripe, classes.stripeTopRight)
-          }, React.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: classNames(classes.logo, classes.logoRight)
-          })), React.createElement("span", {
+          }, imgComponent), React.createElement("span", {
             className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }, React.createElement("img", {
             src: logoMerchant,
@@ -467,11 +468,7 @@ class HiPaymentMeans extends React.Component {
             }
           }, React.createElement("span", {
             className: classNames(classes.stripe, classes.stripeTopRight)
-          }, React.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: classNames(classes.logo, classes.logoRight)
-          })), React.createElement("span", {
+          }, imgComponent), React.createElement("span", {
             className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }), React.createElement("div", {
             className: classNames(classes.number, classes.cardNumber)
@@ -579,6 +576,11 @@ HiPaymentMeans.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   credit: PropTypes.bool,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si le logo n'est pas trouvé
+   */
+  fallbackImage: PropTypes.string,
+
   /**
    * Logo du moyen de paiement
    */

package/es/HiSelect/HiSelect.js

@@ -148,6 +148,7 @@ class HiSelect extends React.PureComponent {
             className: classes.selectIconLabel
           }, React.createElement(HiIcon, {
             className: classes.labelIcon,
+            color: item.color,
             icon: item.icon
           }), item.label);
         } else if (type === 'image' || item.type === 'image') {
@@ -435,6 +436,20 @@ class HiSelect extends React.PureComponent {
       }, '');
     };
 
+    this.getLengthItemList = itemList => {
+      let itemListLength = 0;
+      itemList.forEach(parent => {
+        if (parent.displayed !== false) {
+          itemListLength += 1;
+
+          if (parent.children) {
+            itemListLength += this.getLengthItemList(parent.children);
+          }
+        }
+      });
+      return itemListLength;
+    };
+
     this.state = {
       alertOpen: false,
       open: false,
@@ -444,16 +459,6 @@ class HiSelect extends React.PureComponent {
       openDown: true,
       overlayWidth: 0
     };
-    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);
   }
 
   componentDidMount() {
@@ -487,20 +492,6 @@ class HiSelect extends React.PureComponent {
    */
 
 
-  getLengthItemList(itemList) {
-    let itemListLength = 0;
-    itemList.forEach(parent => {
-      if (parent.displayed !== false) {
-        itemListLength += 1;
-
-        if (parent.children) {
-          itemListLength += this.getLengthItemList(parent.children);
-        }
-      }
-    });
-    return itemListLength;
-  }
-
   render() {
     const {
       alert,
@@ -525,6 +516,7 @@ class HiSelect extends React.PureComponent {
       searchValue = this.state.searchValue,
       startAdornment,
       staticPosition,
+      maxOptionsDisplayed,
       buildSelectProps = this.buildSelectProps // use parent builder if defined
 
     } = this.props;
@@ -593,7 +585,7 @@ class HiSelect extends React.PureComponent {
       // In case we have a nested list
       const itemListLength = this.getLengthItemList(itemList); // +1 for search input
 
-      const nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
+      const nbItems = itemListLength <= maxOptionsDisplayed - 2 ? itemListLength + 1 : maxOptionsDisplayed - 1;
       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)';
@@ -606,6 +598,8 @@ class HiSelect extends React.PureComponent {
         this.placement = placement;
       }
 
+      const nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
+      const autoHeightMax = nbItemsDisplayed * 40 - 10;
       return React.createElement(ClickAwayListener, {
         onClickAway: this.handleClickAway
       }, React.createElement(Grow, {
@@ -615,13 +609,16 @@ class HiSelect extends React.PureComponent {
           transformOrigin: '0 0 0'
         }
       }, React.createElement(Paper, {
+        style: maxOptionsDisplayed < 12 ? {
+          maxHeight: 40 * maxOptionsDisplayed
+        } : {},
         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
+        autoHeightMax: autoHeightMax
       }, onScrollReachBottom && {
         onScroll: this.handleScroll
       }), React.createElement(HiSelectableList, _extends({
@@ -742,7 +739,8 @@ HiSelect.defaultProps = {
     one_child: '%s item'
   },
   type: 'text',
-  filterFunc: filterValue
+  filterFunc: filterValue,
+  maxOptionsDisplayed: 12
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -826,6 +824,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Nombre max d'items affichés
+   */
+  maxOptionsDisplayed: PropTypes.number,
+
   /**
    * Autorise la sélection de plusieurs valeurs
    */