@hipay/hipay-material-ui 2.3.1-rc3 → 2.3.1-rc4

package/es/HiSelect/HiSelect.js

@@ -1,69 +1,31 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-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("@material-ui/core/Grow"));
-
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-
-var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
-
-var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
-
-var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
-
-var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
-
-var _HiSelectInput = _interopRequireDefault(require("./HiSelectInput"));
-
-var _styles = require("@material-ui/core/styles");
-
-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");
-
-var styles = function styles(theme) {
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import Scrollbars from 'react-custom-scrollbars';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import HiSelectableList from '../HiSelectableList';
+import HiInput from '../HiForm/HiInput';
+import HiSelectInput from './HiSelectInput';
+import { withStyles } from '@material-ui/core/styles';
+import { foldAccents } from '../utils/helpers';
+import HiIcon from '../HiIcon';
+import keycode from 'keycode';
+import classNames from 'classnames';
+import HiAlertModal from '../HiAlertModal';
+import { isMobile } from 'react-device-detect';
+import HiSelectMobile from './HiSelectMobile';
+import { findDOMNode } from 'react-dom';
+export var styles = function styles(theme) {
   return {
     root: {
       backgroundColor: theme.palette.background2,
@@ -96,7 +58,7 @@ var styles = function styles(theme) {
       margin: '0 4px',
       verticalAlign: 'text-bottom'
     },
-    selectIconLabel: (0, _objectSpread2.default)({
+    selectIconLabel: _objectSpread({
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
@@ -105,7 +67,7 @@ var styles = function styles(theme) {
       display: 'inline-block',
       width: '100%'
     }),
-    selectImgLabel: (0, _objectSpread2.default)({
+    selectImgLabel: _objectSpread({
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
@@ -120,10 +82,8 @@ 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;
+  return search === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1;
 }
 /**
  *
@@ -145,40 +105,43 @@ function filterValue(item, search) {
 var HiSelect =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(HiSelect, _React$PureComponent);
+  _inherits(HiSelect, _React$PureComponent);
 
   function HiSelect(props) {
     var _this;
 
-    (0, _classCallCheck2.default)(this, HiSelect);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, props));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildSelectProps", function (options) {
+    _classCallCheck(this, HiSelect);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(HiSelect).call(this, props));
+
+    _defineProperty(_assertThisInitialized(_this), "buildSelectProps", function (options) {
       var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
+      var itemList = [].concat(_toConsumableArray(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []), _toConsumableArray(search !== '' ? _toConsumableArray(options.filter(function (item) {
         return _this.props.filterFunc(item, search);
-      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _objectSpread2.default)({
+      })) : [].concat(_toConsumableArray(_this.props.hasAll ? [_objectSpread({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []), (0, _toConsumableArray2.default)(options))));
+      })] : []), _toConsumableArray(options))));
       return {
         itemList: itemList,
         inputValue: _this.buildInputValue(options, value, loading)
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildInputValue", function (options) {
+
+    _defineProperty(_assertThisInitialized(_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,
@@ -204,17 +167,17 @@ function (_React$PureComponent) {
         if (item === undefined) {
           inputValue = translations.one_item_selected;
         } else if (type === 'icon' || item.type === 'icon') {
-          inputValue = _react.default.createElement("span", {
+          inputValue = React.createElement("span", {
             className: classes.selectIconLabel
-          }, _react.default.createElement(_HiIcon.default, {
+          }, React.createElement(HiIcon, {
             className: classes.labelIcon,
             color: item.color,
             icon: item.icon
           }), item.label);
         } else if (type === 'image' || item.type === 'image') {
-          inputValue = _react.default.createElement("span", {
+          inputValue = React.createElement("span", {
             className: classes.selectIconLabel
-          }, item.img && _react.default.createElement("img", {
+          }, item.img && React.createElement("img", {
             className: classes.labelImg,
             src: item.img,
             alt: item.label,
@@ -233,7 +196,8 @@ function (_React$PureComponent) {
 
       return inputValue;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusOnFirstItem", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "focusOnFirstItem", function () {
       if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
         setTimeout(function () {
           var item = _this.overlay.getElementsByTagName('li')[0];
@@ -242,14 +206,16 @@ function (_React$PureComponent) {
         }, 1);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInputElement", function (el) {
+
+    _defineProperty(_assertThisInitialized(_this), "getInputElement", function (el) {
       _this.searchField = el;
 
       if (_this.props.inputRef) {
         _this.props.inputRef(_this.searchField);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function (event) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
       _this.handleSearchReset();
 
       _this.setState({
@@ -260,7 +226,8 @@ function (_React$PureComponent) {
         _this.props.onBlur(event);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
       if (_this.state.open) {
         _this.handleClose();
       } else if (_this.props.alert && !_this.state.alertOpen) {
@@ -286,21 +253,26 @@ function (_React$PureComponent) {
         }, 1);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmitAlert", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubmitAlert", function () {
       _this.handleClick();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCancelAlert", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleCancelAlert", function () {
       _this.handleClose();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleExitedAlert", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleExitedAlert", function () {
       if (_this.searchField) {
         _this.searchField.focus();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseAlert", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleCloseAlert", function () {
       _this.handleClose();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusOnSelectedItem", function (selectedValue) {
+
+    _defineProperty(_assertThisInitialized(_this), "focusOnSelectedItem", function (selectedValue) {
       if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
         setTimeout(function () {
           if (_this.overlay) {
@@ -320,13 +292,15 @@ function (_React$PureComponent) {
         }, 1);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClickAway", function (event) {
+
+    _defineProperty(_assertThisInitialized(_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);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
       _this.handleSearchReset();
 
       _this.setState({
@@ -342,13 +316,15 @@ function (_React$PureComponent) {
         _this.inputEl.focus();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
       _this.setState({
         focused: true
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownCapture", function (event) {
-      var key = (0, _keycode.default)(event);
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDownCapture", function (event) {
+      var key = keycode(event);
 
       if (key === 'enter') {
         if (_this.state.open) {
@@ -360,8 +336,9 @@ function (_React$PureComponent) {
         }
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      var key = (0, _keycode.default)(event);
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      var key = keycode(event);
 
       if (!_this.state.alertOpen) {
         if (key === 'esc') {
@@ -383,8 +360,9 @@ function (_React$PureComponent) {
         }
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownSearch", function (event) {
-      var key = (0, _keycode.default)(event);
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDownSearch", function (event) {
+      var key = keycode(event);
 
       if (_this.overlay && (key === 'down' || key === 'up')) {
         _this.focusOnFirstItem();
@@ -398,12 +376,14 @@ function (_React$PureComponent) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleScroll", function (e) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleScroll", function (e) {
       if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
         _this.props.onScrollReachBottom();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelect", function (event, item) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (event, item) {
       var _this$props2 = _this.props,
           hasAll = _this$props2.hasAll,
           multiple = _this$props2.multiple,
@@ -426,7 +406,7 @@ function (_React$PureComponent) {
             return option.id;
           }), item);
         }
-      } else if (_reactDeviceDetect.isMobile && multiple) {
+      } else if (isMobile && multiple) {
         // Array of selected values
         onChange(event, item.map(function (option) {
           return option.id;
@@ -437,10 +417,11 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
+        onChange(event, [].concat(_toConsumableArray(value), [item.id]), item);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSuggestions", function (suggestions) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleSuggestions", function (suggestions) {
       var _this$props3 = _this.props,
           hasAll = _this$props3.hasAll,
           iconAll = _this$props3.iconAll,
@@ -449,7 +430,7 @@ function (_React$PureComponent) {
       if (suggestions.length === 0) {
         // Add '_no_result' suggestion
         _this.setState(function (prevState) {
-          return (0, _objectSpread2.default)({}, prevState, {
+          return _objectSpread({}, prevState, {
             suggestions: [{
               id: '_no_result',
               type: 'text',
@@ -462,17 +443,18 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _objectSpread2.default)({
+          suggestions: [].concat(_toConsumableArray(hasAll ? [_objectSpread({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []), (0, _toConsumableArray2.default)(suggestions))
+          })] : []), _toConsumableArray(suggestions))
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearch", function (e, inputValue) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleSearch", function (e, inputValue) {
       var searchValue = inputValue && e.target.value ? inputValue : e.target.value;
 
       if (_this.props.onSearch) {
@@ -483,14 +465,16 @@ function (_React$PureComponent) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearchReset", function () {
+
+    _defineProperty(_assertThisInitialized(_this), "handleSearchReset", function () {
       _this.handleSearch({
         target: {
           value: ''
         }
       }, '');
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLengthItemList", function (itemList) {
+
+    _defineProperty(_assertThisInitialized(_this), "getLengthItemList", function (itemList) {
       var itemListLength = 0;
       itemList.forEach(function (parent) {
         if (parent.displayed !== false) {
@@ -503,6 +487,7 @@ function (_React$PureComponent) {
       });
       return itemListLength;
     });
+
     _this.state = {
       alertOpen: false,
       open: false,
@@ -515,7 +500,7 @@ function (_React$PureComponent) {
     return _this;
   }
 
-  (0, _createClass2.default)(HiSelect, [{
+  _createClass(HiSelect, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.props.autoFocus) {
@@ -524,7 +509,7 @@ function (_React$PureComponent) {
 
       if (this.overlay) {
         this.setState({
-          overlayWidth: (0, _reactDom.findDOMNode)(this.overlay).clientWidth
+          overlayWidth: findDOMNode(this.overlay).clientWidth
         });
       }
     }
@@ -575,7 +560,7 @@ function (_React$PureComponent) {
       var selectedItemIdList = [];
 
       if (value) {
-        selectedItemIdList = multiple ? (0, _toConsumableArray2.default)(value) : [value];
+        selectedItemIdList = multiple ? _toConsumableArray(value) : [value];
       }
 
       var _buildSelectProps = buildSelectProps(options, selectedItemIdList, searchValue, loading),
@@ -595,11 +580,11 @@ function (_React$PureComponent) {
         }
       }
 
-      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 = classNames(classes.popper, (_classNames = {}, _defineProperty(_classNames, classes.popperWidth, !this.props.containerWidth), _defineProperty(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
 
       var searchInput = function searchInput(position) {
         if (searchable) {
-          return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
+          return React.createElement(HiInput, Object.assign({
             value: searchValue,
             autoFocus: true,
             inputRef: _this2.getInputElement,
@@ -609,7 +594,7 @@ function (_React$PureComponent) {
             placeholder: translations.search,
             startAdornment: 'search',
             tabIndex: 0,
-            className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.separator, position === 'top'))
+            className: classNames(_defineProperty({}, classes.separator, position === 'top'))
           }, hiSearchInputProps));
         }
 
@@ -636,20 +621,20 @@ function (_React$PureComponent) {
 
         var nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
         var autoHeightMax = nbItemsDisplayed * 40 - 10;
-        return _react.default.createElement(_ClickAwayListener.default, {
+        return React.createElement(ClickAwayListener, {
           onClickAway: _this2.handleClickAway
-        }, _react.default.createElement(_Grow.default, {
+        }, React.createElement(Grow, {
           in: open,
           id: "menu-list",
           style: {
             transformOrigin: '0 0 0'
           }
-        }, _react.default.createElement(_Paper.default, {
+        }, React.createElement(Paper, {
           style: maxOptionsDisplayed < 12 ? {
             maxHeight: 40 * maxOptionsDisplayed
           } : {},
           className: classes.paper
-        }, (_this2.placement && _this2.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.createElement(Scrollbars, Object.assign({
           ref: function ref(contentEl) {
             _this2.optionsContent = contentEl;
           },
@@ -657,7 +642,7 @@ function (_React$PureComponent) {
           autoHeightMax: autoHeightMax
         }, onScrollReachBottom && {
           onScroll: _this2.handleScroll
-        }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
+        }), React.createElement(HiSelectableList, Object.assign({
           type: type,
           itemList: itemList,
           onSelect: _this2.handleSelect,
@@ -668,14 +653,14 @@ function (_React$PureComponent) {
         }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
       };
 
-      return !_reactDeviceDetect.isMobile ? _react.default.createElement("div", {
+      return !isMobile ? React.createElement("div", {
         className: classes.root,
         ref: function ref(el) {
           _this2.overlay = el;
         },
         onKeyDown: this.handleKeyDown,
         onKeyDownCapture: this.handleKeyDownCapture
-      }, alert && _react.default.createElement(_HiAlertModal.default, {
+      }, alert && React.createElement(HiAlertModal, {
         open: alertOpen,
         title: alert.title,
         content: alert.content,
@@ -685,7 +670,7 @@ function (_React$PureComponent) {
         onExited: this.handleExitedAlert,
         labelSubmitButton: alert.submitButton,
         labelCancelButton: alert.cancelButton
-      }), _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
+      }), React.createElement(HiSelectInput, Object.assign({
         id: id,
         value: inputValue,
         open: open,
@@ -706,21 +691,21 @@ function (_React$PureComponent) {
         refElement: function refElement(el) {
           _this2.inputEl = el;
         }
-      })), open && staticPosition ? _react.default.createElement("div", {
+      })), open && staticPosition ? React.createElement("div", {
         style: popperStyle,
         className: popperClass
-      }, content({})) : _react.default.createElement(_Popper.default, {
+      }, content({})) : React.createElement(Popper, {
         anchorEl: this.inputEl,
         placement: "bottom-start",
         open: open,
         className: popperClass,
         disablePortal: true,
         style: popperStyle
-      }, content)) : _react.default.createElement("div", {
+      }, content)) : React.createElement("div", {
         ref: function ref(el) {
           _this2.overlay = el;
         }
-      }, _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
+      }, React.createElement(HiSelectInput, Object.assign({
         id: id,
         value: inputValue,
         open: open,
@@ -739,7 +724,7 @@ function (_React$PureComponent) {
         refElement: function refElement(el) {
           _this2.inputEl = el;
         }
-      })), _react.default.createElement(_HiSelectMobile.default, {
+      })), React.createElement(HiSelectMobile, {
         onChange: this.handleSelect,
         multiple: multiple,
         id: id,
@@ -752,7 +737,7 @@ function (_React$PureComponent) {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
       if (nextProps.options !== prevState.suggestions) {
-        return (0, _objectSpread2.default)({}, prevState, {
+        return _objectSpread({}, prevState, {
           suggestions: nextProps.options
         });
       }
@@ -769,10 +754,11 @@ function (_React$PureComponent) {
      */
 
   }]);
+
   return HiSelect;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(HiSelect, "defaultProps", {
+_defineProperty(HiSelect, "defaultProps", {
   align: 'left',
   autoFocus: false,
   disabled: false,
@@ -800,9 +786,7 @@ function (_React$PureComponent) {
   maxOptionsDisplayed: 12
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HmuiHiSelect'
-})(HiSelect);
-
-exports.default = _default;
+})(HiSelect);