@hipay/hipay-material-ui 3.15.2 → 3.15.3-beta.1

package/es/HiSelect/HiSelect.js

@@ -1,75 +1,42 @@
 "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 = function styles(theme) {
+var styles = exports.styles = function styles(theme) {
   return {
     root: {
       backgroundColor: theme.palette.background2,
@@ -124,12 +91,10 @@ var 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.
@@ -145,19 +110,21 @@ 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] : '';
@@ -184,30 +151,25 @@ 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) {
@@ -217,7 +179,6 @@ 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') {
@@ -226,7 +187,6 @@ 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
@@ -235,7 +195,6 @@ 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);
@@ -258,40 +217,31 @@ 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();
@@ -305,11 +255,10 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           open: true,
           alertOpen: false
         });
-
         _this.handleSuggestions(_this.props.options);
+        if (_this.props.onClick) _this.props.onClick();
 
-        if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
-
+        // Gestion du focus
         setTimeout(function () {
           if (!_this.props.searchable) {
             // Sinon focus sur l'élément sélectionné
@@ -318,38 +267,31 @@ 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();
             }
@@ -357,70 +299,59 @@ 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) {
@@ -432,7 +363,6 @@ 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
@@ -441,7 +371,6 @@ 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();
@@ -459,15 +388,13 @@ 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({
@@ -475,21 +402,32 @@ 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 () {
@@ -521,13 +459,17 @@ 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) {
@@ -554,10 +496,8 @@ 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 {
@@ -566,7 +506,6 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         });
       }
     };
-
     _this.handleSearchReset = function () {
       _this.handleSearch({
         target: {
@@ -574,13 +513,11 @@ 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);
           }
@@ -588,10 +525,9 @@ 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,
@@ -603,10 +539,9 @@ 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,
@@ -618,7 +553,6 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
         style: inlineStyle
       }));
     };
-
     _this.state = {
       alertOpen: false,
       open: false,
@@ -630,14 +564,12 @@ 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
@@ -647,76 +579,65 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _classNames,
-          _this2 = this;
-
+      var _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, (_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 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 searchInput = function searchInput(position) {
         if (searchable) {
           return /*#__PURE__*/_react.default.createElement(_HiInput.default, (0, _extends2.default)({
@@ -732,28 +653,24 @@ 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, {
@@ -789,7 +706,6 @@ 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) {
@@ -878,22 +794,11 @@ 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,
@@ -921,10 +826,7 @@ HiSelect.defaultProps = {
   filterFunc: filterValue,
   maxOptionsDisplayed: 12
 };
-
-var _default = (0, _withStyles.default)(styles, {
+var _default = exports.default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelect'
-})(HiSelect);
-
-exports.default = _default;
+})(HiSelect);