@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.2

package/lib/es/components/autosuggest/AutoSuggest.js

@@ -1,485 +1,322 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.AutoSuggest = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
-var _get = _interopRequireDefault(require("lodash/fp/get"));
-var _ClearableInput = _interopRequireDefault(require("../clearableInput/ClearableInput"));
-var _Spinner = _interopRequireDefault(require("../spinner/Spinner"));
-var _scrollItemIntoView = _interopRequireWildcard(require("../../utils/scrollItemIntoView"));
-var _getDropDirection = _interopRequireDefault(require("../../utils/getDropDirection"));
-var _DropdownHeader = _interopRequireDefault(require("../selects/DropdownHeader"));
-var _MenuItem = _interopRequireDefault(require("../menuItems/MenuItem"));
-var _excluded = ["icon", "value", "showSelectedItemsInInput"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-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 NoItemMessage = function NoItemMessage(_ref) {
-  var message = _ref.message;
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    className: 'no-item-message disabled',
-    disabled: true
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    role: 'button'
-  }, /*#__PURE__*/_react["default"].createElement("i", null, message)));
-};
-var AutoSuggest = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(AutoSuggest, _Component);
-  var _super = _createSuper(AutoSuggest);
-  function AutoSuggest(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, AutoSuggest);
-    _this = _super.call(this, props);
-    _this.state = {
-      open: false,
-      value: props.inputProps.value || '',
-      dropup: props.dropup,
-      pullRight: props.pullRight,
-      highlightedItemIndex: -1
-    };
-    _this.openMenu = _this.openMenu.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.closeMenu = _this.closeMenu.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.setInputValue = _this.setInputValue.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.clearInputValue = _this.clearInputValue.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleInputChange = _this.handleInputChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.onMouseEnter = _this.onMouseEnter.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-  (0, _createClass2["default"])(AutoSuggest, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.props.onSuggestionsFetchRequested({
-        value: this.state.value
-      });
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoSuggest = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_onclickoutside_1 = tslib_1.__importDefault(require("react-onclickoutside"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const get_1 = tslib_1.__importDefault(require("lodash/fp/get"));
+const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
+const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
+const scrollItemIntoView_1 = require("../../utils/scrollItemIntoView");
+const getDropDirection_1 = tslib_1.__importDefault(require("../../utils/getDropDirection"));
+const DropdownHeader_1 = tslib_1.__importDefault(require("../selects/DropdownHeader"));
+const MenuItem_1 = tslib_1.__importDefault(require("../menuItems/MenuItem"));
+const NoItemMessage = ({ message }) => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'no-item-message disabled', disabled: true }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'button' }, { children: (0, jsx_runtime_1.jsx)("i", { children: message }) })) })));
+class AutoSuggest extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false,
+            value: props.inputProps.value || '',
+            dropup: props.dropup,
+            pullRight: props.pullRight,
+            highlightedItemIndex: -1,
+        };
+        this.openMenu = this.openMenu.bind(this);
+        this.closeMenu = this.closeMenu.bind(this);
+        this.setInputValue = this.setInputValue.bind(this);
+        this.clearInputValue = this.clearInputValue.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.onMouseEnter = this.onMouseEnter.bind(this);
+    }
+    UNSAFE_componentWillMount() {
+        this.props.onSuggestionsFetchRequested({ value: this.state.value });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.props.onSuggestionHighlighted) {
-        var currentHighlightedSuggestion = this.getHighlightedSuggestion();
-        var prevHighlightedSuggestion = prevState.highlightedSuggestion;
-        if (currentHighlightedSuggestion !== prevHighlightedSuggestion) {
-          this.props.onSuggestionHighlighted({
-            suggestion: currentHighlightedSuggestion
-          });
+    componentDidUpdate(prevProps, prevState) {
+        if (this.props.onSuggestionHighlighted) {
+            const currentHighlightedSuggestion = this.getHighlightedSuggestion();
+            const prevHighlightedSuggestion = prevState.highlightedSuggestion;
+            if (currentHighlightedSuggestion !== prevHighlightedSuggestion) {
+                this.props.onSuggestionHighlighted({
+                    suggestion: currentHighlightedSuggestion,
+                });
+            }
+        }
+        // Update internal value state from outside
+        const updatedValueFromProps = (0, get_1.default)('inputProps.value')(this.props);
+        if (!(0, isEqual_1.default)(updatedValueFromProps, this.state.value)) {
+            this.setState(() => ({
+                value: updatedValueFromProps,
+            }));
         }
-      }
-
-      // Update internal value state from outside
-      var updatedValueFromProps = (0, _get["default"])('inputProps.value')(this.props);
-      if (!(0, _isEqual["default"])(updatedValueFromProps, this.state.value)) {
-        this.setState(function () {
-          return {
-            value: updatedValueFromProps
-          };
-        });
-      }
     }
-  }, {
-    key: "getHighlightedSuggestion",
-    value: function getHighlightedSuggestion() {
-      if (this.state.highlightedItemIndex === -1) {
-        return null;
-      }
-      return this.props.suggestions[this.state.highlightedItemIndex];
+    getHighlightedSuggestion() {
+        if (this.state.highlightedItemIndex === -1) {
+            return null;
+        }
+        return this.props.suggestions[this.state.highlightedItemIndex];
     }
-  }, {
-    key: "openMenu",
-    value: function openMenu( /*event*/
-    ) {
-      var dropDirection = {};
-      if (this.refDropdownMenu && this.isAutoDropActive() && !this.state.open) {
-        dropDirection = (0, _getDropDirection["default"])(this.refDropdownMenu.parentNode, this.refDropdownMenu);
-      }
-      this.setState(_objectSpread({
-        open: true
-      }, dropDirection));
+    openMenu( /* event*/) {
+        let dropDirection = {};
+        if (this.refDropdownMenu && this.isAutoDropActive() && !this.state.open) {
+            dropDirection = (0, getDropDirection_1.default)(this.refDropdownMenu.parentNode, this.refDropdownMenu);
+        }
+        this.setState(Object.assign({ open: true }, dropDirection));
     }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      this.setState({
-        open: false
-      });
+    closeMenu() {
+        this.setState({
+            open: false,
+        });
     }
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside() {
-      this.closeMenu();
+    handleClickOutside() {
+        this.closeMenu();
     }
-  }, {
-    key: "handleFocus",
-    value: function handleFocus(event) {
-      var _this$props = this.props,
-        openOnFocus = _this$props.openOnFocus,
-        inputProps = _this$props.inputProps;
-      if (openOnFocus) {
-        this.openMenu();
-      }
-      if (inputProps.onFocus) {
-        inputProps.onFocus(event);
-      }
+    handleFocus(event) {
+        const { openOnFocus, inputProps } = this.props;
+        if (openOnFocus) {
+            this.openMenu();
+        }
+        if (inputProps.onFocus) {
+            inputProps.onFocus(event);
+        }
     }
-  }, {
-    key: "isAutoDropActive",
-    value: function isAutoDropActive() {
-      return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
+    isAutoDropActive() {
+        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
     }
-  }, {
-    key: "getDropdownDOMNode",
-    value: function getDropdownDOMNode() {
-      return _reactDom["default"].findDOMNode(this.refDropdownMenu);
+    getDropdownDOMNode() {
+        return react_dom_1.default.findDOMNode(this.refDropdownMenu);
     }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(event) {
-      var _this2 = this;
-      var keyCode = event.keyCode;
-      var highlightedItemIndex = this.state.highlightedItemIndex;
-      var suggestions = this.props.suggestions;
-      switch (keyCode) {
-        case 40:
-          // select below on arrow down key
-          if (this.state.open && suggestions.length > highlightedItemIndex + 1) {
-            this.setState({
-              highlightedItemIndex: highlightedItemIndex + 1
-            }, function () {
-              (0, _scrollItemIntoView["default"])(_scrollItemIntoView.DOWN, _this2.getDropdownDOMNode(), _this2.getFocusedOptionNode());
-            });
-          }
-          return;
-        case 38:
-          // select above on arrow up key
-          if (this.state.open && highlightedItemIndex > 0) {
-            this.setState({
-              highlightedItemIndex: highlightedItemIndex - 1
-            }, function () {
-              (0, _scrollItemIntoView["default"])(_scrollItemIntoView.UP, _this2.getDropdownDOMNode(), _this2.getFocusedOptionNode());
-            });
-          }
-          return;
-        case 13:
-          // select on enter
-          if (this.state.open && suggestions[highlightedItemIndex]) {
-            this.onSuggestionClicked(event, suggestions[highlightedItemIndex]);
-          } else {
-            this.openMenu(event);
-          }
-          break;
-        case 27:
-          // close on esc key or on tab
-          this.closeMenu();
-          break;
-        case 9:
-          // close on tab
-          this.closeMenu();
-          break;
-        default:
-          break;
-      }
+    handleKeyDown(event) {
+        const { keyCode } = event;
+        const { highlightedItemIndex } = this.state;
+        const { suggestions } = this.props;
+        switch (keyCode) {
+            case 40:
+                // select below on arrow down key
+                if (this.state.open && suggestions.length > highlightedItemIndex + 1) {
+                    this.setState({
+                        highlightedItemIndex: highlightedItemIndex + 1,
+                    }, () => {
+                        (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.DOWN, this.getDropdownDOMNode(), this.getFocusedOptionNode());
+                    });
+                }
+                return;
+            case 38:
+                // select above on arrow up key
+                if (this.state.open && highlightedItemIndex > 0) {
+                    this.setState({
+                        highlightedItemIndex: highlightedItemIndex - 1,
+                    }, () => {
+                        (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.UP, this.getDropdownDOMNode(), this.getFocusedOptionNode());
+                    });
+                }
+                return;
+            case 13:
+                // select on enter
+                if (this.state.open && suggestions[highlightedItemIndex]) {
+                    this.onSuggestionClicked(event, suggestions[highlightedItemIndex]);
+                }
+                else {
+                    this.openMenu(event);
+                }
+                break;
+            case 27:
+                // close on esc key or on tab
+                this.closeMenu();
+                break;
+            case 9:
+                // close on tab
+                this.closeMenu();
+                break;
+            default:
+                break;
+        }
     }
-  }, {
-    key: "getOptionNodes",
-    value: function getOptionNodes() {
-      var node = _reactDom["default"].findDOMNode(this.refDropdownMenu);
-      return node && node.getElementsByTagName('li') || [];
+    getOptionNodes() {
+        const node = react_dom_1.default.findDOMNode(this.refDropdownMenu);
+        return (node && node.getElementsByTagName('li')) || [];
     }
-  }, {
-    key: "getFocusedOptionNode",
-    value: function getFocusedOptionNode() {
-      var optionNodes = this.getOptionNodes();
-      return (0, _toConsumableArray2["default"])(optionNodes).find(function (item) {
-        return item.className.includes('active');
-      });
+    getFocusedOptionNode() {
+        const optionNodes = this.getOptionNodes();
+        return [...optionNodes].find(item => item.className.includes('active'));
     }
-  }, {
-    key: "handleInputChange",
-    value: function handleInputChange(value, event) {
-      if (this.state.value !== value) {
-        this.setInputValue(value, event);
-      }
+    handleInputChange(value, event) {
+        if (this.state.value !== value) {
+            this.setInputValue(value, event);
+        }
     }
-  }, {
-    key: "setInputValue",
-    value: function setInputValue(newValue) {
-      var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var shouldCloseMenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var closeMenuEventually = shouldCloseMenu ? false : this.state.open;
-      this.setState({
-        open: !this.state.open ? true : closeMenuEventually,
-        value: newValue,
-        highlightedItemIndex: -1
-      });
-
-      // Fire callback so the parent component can filter the suggestions accordingly
-      this.props.onSuggestionsFetchRequested({
-        value: newValue
-      });
-      var _this$props$inputProp = this.props.inputProps,
-        value = _this$props$inputProp.value,
-        _this$props$inputProp2 = _this$props$inputProp.onChange,
-        onChange = _this$props$inputProp2 === void 0 ? function () {} : _this$props$inputProp2;
-      if (newValue !== value) {
-        onChange(event, {
-          newValue: newValue
+    setInputValue(newValue, event = {}, shouldCloseMenu = false) {
+        const closeMenuEventually = shouldCloseMenu ? false : this.state.open;
+        this.setState({
+            open: !this.state.open ? true : closeMenuEventually,
+            value: newValue,
+            highlightedItemIndex: -1,
         });
-      }
-    }
-  }, {
-    key: "getInputNode",
-    value: function getInputNode() {
-      return this.refComponent.getElementsByTagName('input')[0];
+        // Fire callback so the parent component can filter the suggestions accordingly
+        this.props.onSuggestionsFetchRequested({ value: newValue });
+        const { value, onChange = () => { } } = this.props.inputProps;
+        if (newValue !== value) {
+            onChange(event, { newValue });
+        }
     }
-  }, {
-    key: "clearInputValue",
-    value: function clearInputValue(event) {
-      this.setState({
-        value: '',
-        highlightedItemIndex: -1
-      });
-
-      // Focus the input field after clearing it's value in order to allow
-      // entering new values right away
-      var node = this.getInputNode();
-      if (node) {
-        _reactDom["default"].findDOMNode(node).focus();
-      }
-
-      // Reset filter value so all suggestions are shown again
-      this.props.onSuggestionsFetchRequested({
-        value: ''
-      });
-
-      // Additionally, fire the onClear callback as the service may react on it
-      if (this.props.inputProps.onClear) {
-        this.props.inputProps.onClear(event);
-      }
+    getInputNode() {
+        return this.refComponent.getElementsByTagName('input')[0];
     }
-  }, {
-    key: "onSuggestionClicked",
-    value: function onSuggestionClicked(event, suggestion) {
-      this.setInputValue(this.props.getSuggestionValue(suggestion), event, this.props.closeOnSelect);
-
-      // fire callback with the selected item
-      this.props.onSuggestionSelected(event, {
-        suggestion: suggestion,
-        suggestionValue: this.props.getSuggestionValue(suggestion),
-        highlightedItemIndex: -1
-      });
+    clearInputValue(event) {
+        this.setState({
+            value: '',
+            highlightedItemIndex: -1,
+        });
+        // Focus the input field after clearing it's value in order to allow
+        // entering new values right away
+        const node = this.getInputNode();
+        if (node) {
+            react_dom_1.default.findDOMNode(node).focus();
+        }
+        // Reset filter value so all suggestions are shown again
+        this.props.onSuggestionsFetchRequested({ value: '' });
+        // Additionally, fire the onClear callback as the service may react on it
+        if (this.props.inputProps.onClear) {
+            this.props.inputProps.onClear(event);
+        }
     }
-  }, {
-    key: "onMouseEnter",
-    value: function onMouseEnter(event) {
-      var newIndex = event.currentTarget.getAttribute('data-item-index');
-      if (newIndex) {
-        this.setState(function () {
-          return {
-            highlightedItemIndex: newIndex
-          };
+    onSuggestionClicked(event, suggestion) {
+        this.setInputValue(this.props.getSuggestionValue(suggestion), event, this.props.closeOnSelect);
+        // fire callback with the selected item
+        this.props.onSuggestionSelected(event, {
+            suggestion,
+            suggestionValue: this.props.getSuggestionValue(suggestion),
+            highlightedItemIndex: -1,
         });
-      }
     }
-  }, {
-    key: "wrapAddons",
-    value: function wrapAddons(iconClass, leadingInputAddons, child, trailingInputAddons) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'input-group width-100pct'
-      }, leadingInputAddons && leadingInputAddons, iconClass && /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'input-group-addon'
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "rioglyph ".concat(iconClass),
-        "aria-hidden": 'true'
-      })), child, trailingInputAddons && trailingInputAddons);
+    onMouseEnter(event) {
+        const newIndex = event.currentTarget.getAttribute('data-item-index');
+        if (newIndex) {
+            this.setState(() => ({
+                highlightedItemIndex: newIndex,
+            }));
+        }
+    }
+    wrapAddons(iconClass, leadingInputAddons, child, trailingInputAddons) {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [leadingInputAddons && leadingInputAddons, iconClass && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconClass}`, "aria-hidden": 'true' }) }))), child, trailingInputAddons && trailingInputAddons] })));
     }
-  }, {
-    key: "renderInput",
-    value: function renderInput() {
-      var _this$props2 = this.props,
-        leadingInputAddons = _this$props2.leadingInputAddons,
-        trailingInputAddons = _this$props2.trailingInputAddons;
-      var _this$props$inputProp3 = this.props.inputProps,
-        icon = _this$props$inputProp3.icon,
-        value = _this$props$inputProp3.value,
-        showSelectedItemsInInput = _this$props$inputProp3.showSelectedItemsInInput,
-        remainingProps = (0, _objectWithoutProperties2["default"])(_this$props$inputProp3, _excluded);
-      var input = /*#__PURE__*/_react["default"].createElement(_ClearableInput["default"], (0, _extends2["default"])({}, remainingProps, {
-        autoComplete: this.props.autoComplete,
-        onChange: this.handleInputChange,
-        onClear: this.clearInputValue,
-        onClick: this.openMenu,
-        onFocus: this.handleFocus,
-        value: !showSelectedItemsInInput && value
-      }));
-      if (icon || leadingInputAddons || trailingInputAddons) {
-        return this.wrapAddons(icon, leadingInputAddons, input, trailingInputAddons);
-      }
-      return input;
+    renderInput() {
+        const { leadingInputAddons, trailingInputAddons } = this.props;
+        const _a = this.props.inputProps, { icon, 
+        // tabIndex,
+        // hasError,
+        // placeholder,
+        value, 
+        // className,
+        // disabled,
+        // onBlur,
+        // onFocus,
+        // inputRef,
+        showSelectedItemsInInput } = _a, remainingProps = tslib_1.__rest(_a, ["icon", "value", "showSelectedItemsInInput"]);
+        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, Object.assign({}, remainingProps, { autoComplete: this.props.autoComplete, onChange: this.handleInputChange, onClear: this.clearInputValue, onClick: this.openMenu, onFocus: this.handleFocus, value: !showSelectedItemsInInput && value })));
+        if (icon || leadingInputAddons || trailingInputAddons) {
+            return this.wrapAddons(icon, leadingInputAddons, input, trailingInputAddons);
+        }
+        return input;
     }
-  }, {
-    key: "renderLoadingIndicator",
-    value: function renderLoadingIndicator(dropdownMenuClasses) {
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        className: dropdownMenuClasses
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'display-flex justify-content-center padding-10'
-      }, /*#__PURE__*/_react["default"].createElement(_Spinner["default"], null)));
+    renderLoadingIndicator(dropdownMenuClasses) {
+        return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: dropdownMenuClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })) })));
     }
-  }, {
-    key: "renderDropdownMenu",
-    value: function renderDropdownMenu() {
-      var _this3 = this;
-      var _this$props3 = this.props,
-        suggestions = _this$props3.suggestions,
-        pullRight = _this$props3.pullRight,
-        dropdownClassName = _this$props3.dropdownClassName,
-        noItemMessage = _this$props3.noItemMessage,
-        isLoading = _this$props3.isLoading,
-        renderSuggestion = _this$props3.renderSuggestion;
-      var dropdownMenuClasses = (0, _classnames["default"])('dropdown-menu', pullRight && 'pull-right', dropdownClassName && dropdownClassName);
-      if (isLoading) {
-        return this.renderLoadingIndicator(dropdownMenuClasses);
-      }
-      var hasNoSuggestions = (0, _isEmpty["default"])(suggestions);
-      if (hasNoSuggestions && !noItemMessage) {
-        return null;
-      }
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        role: 'menu',
-        className: dropdownMenuClasses,
-        ref: function ref(node) {
-          return _this3.refDropdownMenu = node;
+    renderDropdownMenu() {
+        const { suggestions, pullRight, dropdownClassName, noItemMessage, isLoading, renderSuggestion } = this.props;
+        const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', pullRight && 'pull-right', dropdownClassName && dropdownClassName);
+        if (isLoading) {
+            return this.renderLoadingIndicator(dropdownMenuClasses);
         }
-      }, hasNoSuggestions && noItemMessage && /*#__PURE__*/_react["default"].createElement(NoItemMessage, {
-        key: 'NoItemMessage',
-        message: noItemMessage
-      }), suggestions.map(function (suggestion, index) {
-        if (suggestion.header) {
-          return /*#__PURE__*/_react["default"].createElement(_DropdownHeader["default"], {
-            key: suggestion.label,
-            label: suggestion.label
-          });
+        const hasNoSuggestions = (0, isEmpty_1.default)(suggestions);
+        if (hasNoSuggestions && !noItemMessage) {
+            return null;
         }
-        var item = {
-          value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion),
-          onSelect: function onSelect(idx, event) {
-            return _this3.onSuggestionClicked(event, suggestion);
-          },
-          active: index === _this3.state.highlightedItemIndex,
-          disabled: suggestion.disabled
-        };
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], (0, _extends2["default"])({
-          key: index
-        }, item, {
-          index: index,
-          onMouseEnter: _this3.onMouseEnter
-        }));
-      }));
+        return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: node => (this.refDropdownMenu = node) }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
+                    if (suggestion.header) {
+                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, suggestion.label);
+                    }
+                    const item = {
+                        value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion),
+                        onSelect: (idx, event) => this.onSuggestionClicked(event, suggestion),
+                        active: index === this.state.highlightedItemIndex,
+                        disabled: suggestion.disabled,
+                    };
+                    return (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({}, item, { index: index, onMouseEnter: this.onMouseEnter }), index);
+                })] })));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var classes = (0, _classnames["default"])('AutoSuggest', 'dropdown', this.state.open && 'open', this.state.dropup && 'dropup', this.props.className && this.props.className);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes,
-        onKeyDown: this.handleKeyDown,
-        ref: function ref(node) {
-          return _this4.refComponent = node;
-        }
-      }, this.renderInput(), this.renderDropdownMenu());
+    render() {
+        const classes = (0, classnames_1.default)('AutoSuggest', 'dropdown', this.state.open && 'open', this.state.dropup && 'dropup', this.props.className && this.props.className);
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, onKeyDown: this.handleKeyDown, ref: node => (this.refComponent = node) }, { children: [this.renderInput(), this.renderDropdownMenu()] })));
     }
-  }]);
-  return AutoSuggest;
-}(_react.Component);
+}
 exports.AutoSuggest = AutoSuggest;
 AutoSuggest.defaultProps = {
-  onSuggestionSelected: function onSuggestionSelected() {},
-  onSuggestionsFetchRequested: function onSuggestionsFetchRequested() {},
-  renderSuggestion: function renderSuggestion(suggestion) {
-    return suggestion.label;
-  },
-  getSuggestionValue: function getSuggestionValue(suggestion) {
-    return suggestion.label;
-  },
-  suggestions: [],
-  autoDropDirection: true,
-  pullRight: false,
-  dropup: false,
-  isLoading: false,
-  openOnFocus: false,
-  closeOnSelect: true,
-  showSelectedItemsInInput: true,
-  autoComplete: 'off',
-  inputProps: {
-    disabled: false,
-    onChange: function onChange() {},
-    onClear: function onClear() {},
-    onBlur: function onBlur() {},
-    onFocus: function onFocus() {},
-    placeholder: 'Start typing ...',
-    hasError: false,
-    tabIndex: 0
-  }
+    onSuggestionSelected: () => { },
+    onSuggestionsFetchRequested: () => { },
+    renderSuggestion: suggestion => suggestion.label,
+    getSuggestionValue: suggestion => suggestion.label,
+    suggestions: [],
+    autoDropDirection: true,
+    pullRight: false,
+    dropup: false,
+    isLoading: false,
+    openOnFocus: false,
+    closeOnSelect: true,
+    showSelectedItemsInInput: true,
+    autoComplete: 'off',
+    inputProps: {
+        disabled: false,
+        onChange: () => { },
+        onClear: () => { },
+        onBlur: () => { },
+        onFocus: () => { },
+        placeholder: 'Start typing ...',
+        hasError: false,
+        tabIndex: 0,
+    },
 };
 AutoSuggest.propTypes = {
-  onSuggestionSelected: _propTypes["default"].func.isRequired,
-  onSuggestionsFetchRequested: _propTypes["default"].func.isRequired,
-  onSuggestionHighlighted: _propTypes["default"].func,
-  suggestions: _propTypes["default"].array.isRequired,
-  renderSuggestion: _propTypes["default"].func,
-  getSuggestionValue: _propTypes["default"].func,
-  dropup: _propTypes["default"].bool,
-  pullRight: _propTypes["default"].bool,
-  autoDropDirection: _propTypes["default"].bool,
-  className: _propTypes["default"].string,
-  dropdownClassName: _propTypes["default"].string,
-  isLoading: _propTypes["default"].bool,
-  openOnFocus: _propTypes["default"].bool,
-  closeOnSelect: _propTypes["default"].bool,
-  showSelectedItemsInInput: _propTypes["default"].bool,
-  autoComplete: _propTypes["default"].string,
-  noItemMessage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  inputProps: _propTypes["default"].shape({
-    disabled: _propTypes["default"].bool,
-    onChange: _propTypes["default"].func,
-    onClear: _propTypes["default"].func,
-    onFocus: _propTypes["default"].func,
-    onBlur: _propTypes["default"].func,
-    className: _propTypes["default"].string,
-    placeholder: _propTypes["default"].string,
-    icon: _propTypes["default"].string,
-    value: _propTypes["default"].string,
-    hasError: _propTypes["default"].bool,
-    tabIndex: _propTypes["default"].number,
-    inputRef: _propTypes["default"].func
-  }).isRequired,
-  leadingInputAddons: _propTypes["default"].oneOfType([_propTypes["default"].node]),
-  trailingInputAddons: _propTypes["default"].oneOfType([_propTypes["default"].node])
+    onSuggestionSelected: prop_types_1.default.func.isRequired,
+    onSuggestionsFetchRequested: prop_types_1.default.func.isRequired,
+    onSuggestionHighlighted: prop_types_1.default.func,
+    suggestions: prop_types_1.default.array.isRequired,
+    renderSuggestion: prop_types_1.default.func,
+    getSuggestionValue: prop_types_1.default.func,
+    dropup: prop_types_1.default.bool,
+    pullRight: prop_types_1.default.bool,
+    autoDropDirection: prop_types_1.default.bool,
+    className: prop_types_1.default.string,
+    dropdownClassName: prop_types_1.default.string,
+    isLoading: prop_types_1.default.bool,
+    openOnFocus: prop_types_1.default.bool,
+    closeOnSelect: prop_types_1.default.bool,
+    showSelectedItemsInInput: prop_types_1.default.bool,
+    autoComplete: prop_types_1.default.string,
+    noItemMessage: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    inputProps: prop_types_1.default.shape({
+        disabled: prop_types_1.default.bool,
+        onChange: prop_types_1.default.func,
+        onClear: prop_types_1.default.func,
+        onFocus: prop_types_1.default.func,
+        onBlur: prop_types_1.default.func,
+        className: prop_types_1.default.string,
+        placeholder: prop_types_1.default.string,
+        icon: prop_types_1.default.string,
+        value: prop_types_1.default.string,
+        hasError: prop_types_1.default.bool,
+        tabIndex: prop_types_1.default.number,
+        inputRef: prop_types_1.default.func,
+    }).isRequired,
+    leadingInputAddons: prop_types_1.default.oneOfType([prop_types_1.default.node]),
+    trailingInputAddons: prop_types_1.default.oneOfType([prop_types_1.default.node]),
 };
-var _default = (0, _reactOnclickoutside["default"])(AutoSuggest);
-exports["default"] = _default;
+exports.default = (0, react_onclickoutside_1.default)(AutoSuggest);