@hipay/hipay-material-ui 4.0.0 → 4.0.1-beta5

package/es/HiSelect/HiSelect.js

@@ -1,42 +1,75 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.styles = exports.default = void 0;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));
+
 var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
+
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
+
 var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
+
 var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
+
 var _HiSelectInput = _interopRequireDefault(require("./HiSelectInput"));
+
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
 var _helpers = require("../utils/helpers");
+
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
 var _keycode = _interopRequireDefault(require("keycode"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _HiAlertModal = _interopRequireDefault(require("../HiAlertModal"));
+
 var _reactDeviceDetect = require("react-device-detect");
+
 var _HiSelectMobile = _interopRequireDefault(require("./HiSelectMobile"));
+
 var _reactDom = require("react-dom");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var styles = exports.styles = function styles(theme) {
+
+var styles = function styles(theme) {
   return {
     root: {
       backgroundColor: theme.palette.background2,
@@ -91,10 +124,12 @@ var styles = exports.styles = function styles(theme) {
     }
   };
 };
+
+exports.styles = styles;
+
 function filterValue(item, search) {
   return search === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
 }
-
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -110,21 +145,19 @@ function filterValue(item, search) {
  * - HiSearchField : intègre une barre de recherche dans le Popper, il filtre la liste des suggestions
  * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
  */
+
+
 var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HiSelect, _React$PureComponent);
+
   var _super = _createSuper(HiSelect);
+
   function HiSelect(_props) {
     var _this;
+
     (0, _classCallCheck2.default)(this, HiSelect);
     _this = _super.call(this, _props);
-    /**
-     * Build itemList & inputValue from select props
-     * @param options
-     * @param value
-     * @param search
-     * @param loading
-     * @returns {{itemList: *[], inputValue: *}}
-     */
+
     _this.buildSelectProps = function (options) {
       var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -151,25 +184,30 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         inputValue: _this.buildInputValue(options, value, loading)
       };
     };
+
     _this.findRecursively = function (arr, id) {
       for (var i = 0; i < arr.length; i++) {
         if (arr[i].id === id) {
           return arr[i];
         } else if (arr[i].children && arr[i].children.length) {
           var found = _this.findRecursively(arr[i].children, id);
+
           if (found) return found;
         }
       }
     };
+
     _this.buildInputValue = function (options) {
       var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var _this$props = _this.props,
-        classes = _this$props.classes,
-        hasAll = _this$props.hasAll,
-        translations = _this$props.translations,
-        type = _this$props.type; // build input value
+          classes = _this$props.classes,
+          hasAll = _this$props.hasAll,
+          translations = _this$props.translations,
+          type = _this$props.type; // build input value
+
       var inputValue;
+
       if (loading && value.length === 1) {
         inputValue = translations.one_item_selected;
       } else if (hasAll && options.length === value.length) {
@@ -179,6 +217,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         inputValue = translations.n_items_selected.replace('%s', value.length);
       } else if (value.length === 1) {
         var item = _this.findRecursively(options, value[0]);
+
         if (item === undefined) {
           inputValue = translations.one_item_selected;
         } else if (type === 'icon' || item.type === 'icon') {
@@ -187,6 +226,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
             color: item.color
           };
           var icon;
+
           if (typeof item.icon === 'string') {
             icon = /*#__PURE__*/_react.default.createElement(_HiIcon.default, (0, _extends2.default)({
               icon: item.icon
@@ -195,6 +235,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
             icon = (0, _objectSpread2.default)({}, item.icon);
             icon.props = (0, _objectSpread2.default)({}, icon.props, {}, iconProps);
           }
+
           inputValue = /*#__PURE__*/_react.default.createElement("span", {
             className: classes.selectIconLabel
           }, icon, item.label);
@@ -217,31 +258,40 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           inputValue = item.label;
         }
       }
+
       return inputValue;
     };
+
     _this.focusOnFirstItem = function () {
       if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
         setTimeout(function () {
           var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
+
           item.focus();
         }, 1);
       }
     };
+
     _this.getInputElement = function (el) {
       _this.searchField = el;
+
       if (_this.props.inputRef) {
         _this.props.inputRef(_this.searchField);
       }
     };
+
     _this.handleBlur = function (event) {
       _this.handleSearchReset();
+
       _this.setState({
         focused: false
       });
+
       if (_this.props.onBlur && !_this.inputEl.contains(event.relatedTarget) && !_this.state.open) {
         _this.props.onBlur(event);
       }
     };
+
     _this.handleClick = function (event) {
       if (_this.state.open) {
         _this.handleClose();
@@ -255,10 +305,11 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           open: true,
           alertOpen: false
         });
+
         _this.handleSuggestions(_this.props.options);
-        if (_this.props.onClick) _this.props.onClick();
 
-        // Gestion du focus
+        if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
+
         setTimeout(function () {
           if (!_this.props.searchable) {
             // Sinon focus sur l'élément sélectionné
@@ -267,31 +318,38 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         }, 1);
       }
     };
+
     _this.handleSubmitAlert = function () {
       _this.handleClick();
     };
+
     _this.handleCancelAlert = function () {
       _this.handleClose();
     };
+
     _this.handleExitedAlert = function () {
       if (_this.searchField) {
         _this.searchField.focus();
       }
     };
+
     _this.handleCloseAlert = function () {
       _this.handleClose();
     };
+
     _this.focusOnSelectedItem = function (selectedValue) {
       if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
         setTimeout(function () {
           if (_this.overlay) {
             // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
             var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
+
             if (selectedValue && typeof selectedValue === 'string') {
               item = _this.overlay.getElementsByTagName('li').namedItem(selectedValue);
             } else if (selectedValue && typeof selectedValue === 'number') {
               item = _this.overlay.querySelector('li:not([tabindex^="-"])')[selectedValue - 1];
             }
+
             if (item) {
               item.focus();
             }
@@ -299,59 +357,70 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         }, 1);
       }
     };
+
     _this.handleClickAway = function (event) {
       // Au clic sur le bouton, on laisse le handleClick fermer le select
       if (!_this.inputEl.contains(event.target)) {
         _this.handleClose(event);
       }
     };
+
     _this.handleClose = function () {
       _this.handleSearchReset();
+
       _this.setState({
         open: false,
         alertOpen: false
       });
+
       if (_this.props.onClose) {
         _this.props.onClose();
       }
+
       if (_this.inputEl) {
         setTimeout(function () {
           _this.inputEl.focus();
         }, 100);
       }
     };
+
     _this.handleFocus = function () {
       _this.setState({
         focused: true
       });
     };
-    // Stop the propagation of the event before it reach the childrens
+
     _this.handleKeyDownCapture = function (event) {
       var key = (0, _keycode.default)(event);
+
       if (key === 'enter') {
         if (_this.state.open) {
           if (_this.props.multiple) {
             event.stopPropagation();
+
             _this.handleClose();
           }
         }
       }
     };
-    // Key down on input
+
     _this.handleKeyDown = function (event) {
       var key = (0, _keycode.default)(event);
+
       if (!_this.state.alertOpen) {
         if (event.target === _this.inputEl && _this.state.open && key === 'down') {
           // Focus on list 1st item
           event.stopPropagation();
           event.preventDefault();
           var firstLi = document.querySelector("#".concat(_this.props.id, " + div ul > li"));
+
           if (!!firstLi) {
             firstLi.focus();
           }
         } else if (key === 'esc' && _this.state.open) {
           event.stopPropagation();
           event.preventDefault();
+
           _this.handleClose();
         } else if (key === 'enter') {
           if (_this.state.open) {
@@ -363,6 +432,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           event.preventDefault();
         } else if (key === 'tab' && (_this.state.open || _this.state.alertOpen)) {
           event.stopPropagation();
+
           _this.handleClose();
         } else if (key === 'down' && event.target.id.includes('_subheader')) {
           // Focus on parent, next item is child
@@ -371,6 +441,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else if (key === 'down' && !event.target.nextSibling) {
           var _document$getElementB, _document$getElementB2;
+
           // Focus on parent, next item is child
           if ((_document$getElementB = document.getElementById(event.target.dataset.group)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.nextSibling) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.nextSibling) {
             document.getElementById(event.target.dataset.group).nextSibling.nextSibling.focus();
@@ -388,13 +459,15 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
     };
-    // Key down on search input
+
     _this.handleKeyDownSearch = function (event) {
       var key = (0, _keycode.default)(event);
+
       if (_this.overlay && (key === 'down' || key === 'up')) {
         _this.focusOnFirstItem();
       } else if (_this.overlay && (key === 'esc' || key === 'enter')) {
         event.preventDefault();
+
         _this.handleClose();
       } else if (key === 'tab') {
         _this.setState({
@@ -402,32 +475,21 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         });
       }
     };
-    /**
-     * Call onScrollReachBottom
-     * @param e
-     */
+
     _this.handleScroll = function (e) {
       if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
         _this.props.onScrollReachBottom();
       }
     };
-    /**
-     * Call onChange with the updated value
-     *
-     * - handle single value
-     * - handle multiple value
-     * - handle '_all' id
-     *
-     * @param event
-     * @param item
-     */
+
     _this.handleSelect = function (event, item) {
       var _this$props2 = _this.props,
-        hasAll = _this$props2.hasAll,
-        multiple = _this$props2.multiple,
-        onChange = _this$props2.onChange,
-        options = _this$props2.options,
-        value = _this$props2.value;
+          hasAll = _this$props2.hasAll,
+          multiple = _this$props2.multiple,
+          onChange = _this$props2.onChange,
+          options = _this$props2.options,
+          value = _this$props2.value;
+
       if (!multiple) {
         // This is a fix to prevent select open after select => TODO improve ?
         setTimeout(function () {
@@ -459,17 +521,13 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
-    /**
-     * Update suggestions list
-     * - add '_no_result' item if suggestion list is empty
-     * - add '_all' item if suggestion list is complete
-     * @param suggestions
-     */
+
     _this.handleSuggestions = function (suggestions) {
       var _this$props3 = _this.props,
-        hasAll = _this$props3.hasAll,
-        iconAll = _this$props3.iconAll,
-        translations = _this$props3.translations;
+          hasAll = _this$props3.hasAll,
+          iconAll = _this$props3.iconAll,
+          translations = _this$props3.translations;
+
       if (suggestions.length === 0) {
         // Add '_no_result' suggestion
         _this.setState(function (prevState) {
@@ -496,8 +554,10 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         });
       }
     };
+
     _this.handleSearch = function (e, inputValue) {
       var searchValue = inputValue && e.target.value ? inputValue : e.target.value;
+
       if (_this.props.onSearch) {
         _this.props.onSearch(e, searchValue);
       } else {
@@ -506,6 +566,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         });
       }
     };
+
     _this.handleSearchReset = function () {
       _this.handleSearch({
         target: {
@@ -513,11 +574,13 @@ var HiSelect = /*#__PURE__*/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);
           }
@@ -525,9 +588,10 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       });
       return itemListLength;
     };
+
     _this.renderScrollbarTrackHorizontal = function (props) {
       var style = props.style,
-        otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
+          otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
       var inlineStyle = (0, _objectSpread2.default)({}, style, {
         zIndex: 10,
         right: 2,
@@ -539,9 +603,10 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         style: inlineStyle
       }));
     };
+
     _this.renderScrollbarTrackVertical = function (props) {
       var style = props.style,
-        otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
+          otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
       var inlineStyle = (0, _objectSpread2.default)({}, style, {
         zIndex: 10,
         right: 2,
@@ -553,6 +618,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         style: inlineStyle
       }));
     };
+
     _this.state = {
       alertOpen: false,
       open: false,
@@ -564,12 +630,14 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
     };
     return _this;
   }
+
   (0, _createClass2.default)(HiSelect, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.props.autoFocus) {
         this.inputEl.focus();
       }
+
       if (this.overlay) {
         this.setState({
           overlayWidth: (0, _reactDom.findDOMNode)(this.overlay).clientWidth
@@ -579,65 +647,76 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _classNames,
+          _this2 = this;
+
       var _this$props4 = this.props,
-        alert = _this$props4.alert,
-        classes = _this$props4.classes,
-        disabled = _this$props4.disabled,
-        error = _this$props4.error,
-        loading = _this$props4.loading,
-        options = _this$props4.options,
-        searchable = _this$props4.searchable,
-        displayAsChip = _this$props4.displayAsChip,
-        type = _this$props4.type,
-        value = _this$props4.value,
-        multiple = _this$props4.multiple,
-        translations = _this$props4.translations,
-        hiSearchInputProps = _this$props4.hiSearchInputProps,
-        hiSelectableListProps = _this$props4.hiSelectableListProps,
-        hiSelectInputProps = _this$props4.hiSelectInputProps,
-        id = _this$props4.id,
-        onScrollReachBottom = _this$props4.onScrollReachBottom,
-        onSubmit = _this$props4.onSubmit,
-        placeholder = _this$props4.placeholder,
-        _this$props4$searchVa = _this$props4.searchValue,
-        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;
+          alert = _this$props4.alert,
+          classes = _this$props4.classes,
+          disabled = _this$props4.disabled,
+          error = _this$props4.error,
+          loading = _this$props4.loading,
+          options = _this$props4.options,
+          searchable = _this$props4.searchable,
+          displayAsChip = _this$props4.displayAsChip,
+          type = _this$props4.type,
+          value = _this$props4.value,
+          multiple = _this$props4.multiple,
+          translations = _this$props4.translations,
+          hiSearchInputProps = _this$props4.hiSearchInputProps,
+          hiSelectableListProps = _this$props4.hiSelectableListProps,
+          hiSelectInputProps = _this$props4.hiSelectInputProps,
+          id = _this$props4.id,
+          onScrollReachBottom = _this$props4.onScrollReachBottom,
+          onSubmit = _this$props4.onSubmit,
+          placeholder = _this$props4.placeholder,
+          _this$props4$searchVa = _this$props4.searchValue,
+          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,
-        alertOpen = _this$state.alertOpen,
-        open = _this$state.open,
-        focused = _this$state.focused;
+          alertOpen = _this$state.alertOpen,
+          open = _this$state.open,
+          focused = _this$state.focused;
+
       if (multiple) {
         if (!Array.isArray(value)) {
           throw new Error('HiPay Material-UI: the `value` property must be an array ' + 'when using the `HiSelect` component with `multiple`.');
         }
       }
+
       var selectedItemIdList = [];
+
       if (value) {
         selectedItemIdList = multiple ? (0, _toConsumableArray2.default)(value) : [value];
       }
+
       var _buildSelectProps = buildSelectProps(options, selectedItemIdList, searchValue, loading),
-        itemList = _buildSelectProps.itemList,
-        _buildSelectProps$inp = _buildSelectProps.inputValue,
-        inputValue = _buildSelectProps$inp === void 0 ? this.buildInputValue(options, selectedItemIdList, loading) : _buildSelectProps$inp;
+          itemList = _buildSelectProps.itemList,
+          _buildSelectProps$inp = _buildSelectProps.inputValue,
+          inputValue = _buildSelectProps$inp === void 0 ? this.buildInputValue(options, selectedItemIdList, loading) : _buildSelectProps$inp;
+
       var popperStyle = {
         position: staticPosition ? 'relative' : 'fix',
         top: 0,
         left: 0
       };
+
       if (this.props.containerWidth > 0) {
         popperStyle = {
           width: this.props.containerWidth
         };
+
         if (!staticPosition) {
           popperStyle.position = 'absolute';
         }
       }
-      var popperClass = (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, classes.popperWidth, !this.props.containerWidth), classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'));
+
+      var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
+
       var searchInput = function searchInput(position) {
         if (searchable) {
           return /*#__PURE__*/_react.default.createElement(_HiInput.default, (0, _extends2.default)({
@@ -653,24 +732,28 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
             className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.separator, position === 'top'))
           }, hiSearchInputProps));
         }
+
         return null;
-      };
+      }; // Replace popper onSearch when popper displayed on top of selectButton
+
 
-      // Replace popper onSearch when popper displayed on top of selectButton
       if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
         // In case we have a nested list
-        var itemListLength = this.getLengthItemList(itemList);
-        // +1 for search input
+        var itemListLength = this.getLengthItemList(itemList); // +1 for search input
+
         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)';
       }
+
       var content = function content(_ref) {
         var placement = _ref.placement;
+
         if (placement !== _this2.placement) {
           _this2.placement = placement;
         }
+
         var nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
         var autoHeightMax = nbItemsDisplayed * 40 - 10;
         return /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
@@ -706,6 +789,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           value: value
         }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
       };
+
       return !_reactDeviceDetect.isMobile ? /*#__PURE__*/_react.default.createElement("div", {
         className: classes.root,
         ref: function ref(el) {
@@ -794,11 +878,22 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           suggestions: nextProps.options
         });
       }
+
       return null;
     }
+    /**
+     * Build itemList & inputValue from select props
+     * @param options
+     * @param value
+     * @param search
+     * @param loading
+     * @returns {{itemList: *[], inputValue: *}}
+     */
+
   }]);
   return HiSelect;
 }(_react.default.PureComponent);
+
 HiSelect.defaultProps = {
   align: 'left',
   autoFocus: false,
@@ -826,7 +921,10 @@ HiSelect.defaultProps = {
   filterFunc: filterValue,
   maxOptionsDisplayed: 12
 };
-var _default = exports.default = (0, _withStyles.default)(styles, {
+
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelect'
-})(HiSelect);
+})(HiSelect);
+
+exports.default = _default;