@deephaven/components 0.5.2-beta.0 → 0.6.1-demo.8

package/dist/AutoCompleteInput.js

@@ -1,29 +1,7 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-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; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /**
@@ -49,7 +27,7 @@ import PropTypes from 'prop-types';
 import memoize from 'memoizee';
 import classNames from 'classnames';
 import debounce from 'lodash.debounce';
-import { Popper } from './popper';
+import { Popper } from "./popper/index.js";
 import "./AutoCompleteInput.css";
 var DEBOUNCE_DELAY = 100;
 var MENU_NAVIGATION_DIRECTION;
@@ -59,34 +37,24 @@ var MENU_NAVIGATION_DIRECTION;
   MENU_NAVIGATION_DIRECTION["DOWN"] = "DOWN";
 })(MENU_NAVIGATION_DIRECTION || (MENU_NAVIGATION_DIRECTION = {}));
 
-var AutoCompleteInput = /*#__PURE__*/function (_Component) {
-  _inherits(AutoCompleteInput, _Component);
+class AutoCompleteInput extends Component {
+  constructor(props) {
+    super(props);
 
-  var _super = _createSuper(AutoCompleteInput);
+    _defineProperty(this, "popper", void 0);
 
-  function AutoCompleteInput(props) {
-    var _this;
+    _defineProperty(this, "cbContainer", void 0);
 
-    _classCallCheck(this, AutoCompleteInput);
+    _defineProperty(this, "menuContainer", void 0);
 
-    _this = _super.call(this, props);
+    _defineProperty(this, "input", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "popper", void 0);
+    _defineProperty(this, "getCachedFilteredOptions", memoize((options, input) => options.filter( // supports partial match
+    option => option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0)));
 
-    _defineProperty(_assertThisInitialized(_this), "cbContainer", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "menuContainer", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "input", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "getCachedFilteredOptions", memoize(function (options, input) {
-      return options.filter( // supports partial match
-      function (option) {
-        return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-      });
-    }));
-
-    var popperOptions = _this.props.popperOptions;
+    var {
+      popperOptions
+    } = this.props;
     popperOptions = _objectSpread({
       placement: 'bottom-end',
       modifiers: {
@@ -95,479 +63,470 @@ var AutoCompleteInput = /*#__PURE__*/function (_Component) {
         }
       }
     }, popperOptions);
-    _this.state = {
+    this.state = {
       title: '',
       filteredOptions: [],
       keyboardOptionIndex: 0,
       menuIsOpen: false,
       inputWidth: 100,
       invalid: false,
-      popperOptions: popperOptions
+      popperOptions
     };
-    _this.handleMenuKeyDown = _this.handleMenuKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleMenuBlur = _this.handleMenuBlur.bind(_assertThisInitialized(_this));
-    _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
-    _this.handleInputKeyDown = _this.handleInputKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleInputBlur = _this.handleInputBlur.bind(_assertThisInitialized(_this));
-    _this.handelInputFocus = _this.handelInputFocus.bind(_assertThisInitialized(_this));
-    _this.handleInputClick = _this.handleInputClick.bind(_assertThisInitialized(_this));
-    _this.updateInputValue = debounce(_this.updateInputValue, DEBOUNCE_DELAY);
-    _this.handleOptionClick = _this.handleOptionClick.bind(_assertThisInitialized(_this));
-    _this.handleMenuOpened = _this.handleMenuOpened.bind(_assertThisInitialized(_this));
-    _this.handleMenuExited = _this.handleMenuExited.bind(_assertThisInitialized(_this));
-    _this.popper = /*#__PURE__*/React.createRef();
-    _this.cbContainer = /*#__PURE__*/React.createRef();
-    _this.menuContainer = /*#__PURE__*/React.createRef();
-    _this.input = /*#__PURE__*/React.createRef();
-    return _this;
+    this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);
+    this.handleMenuBlur = this.handleMenuBlur.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
+    this.handleInputBlur = this.handleInputBlur.bind(this);
+    this.handelInputFocus = this.handelInputFocus.bind(this);
+    this.handleInputClick = this.handleInputClick.bind(this);
+    this.updateInputValue = debounce(this.updateInputValue, DEBOUNCE_DELAY);
+    this.handleOptionClick = this.handleOptionClick.bind(this);
+    this.handleMenuOpened = this.handleMenuOpened.bind(this);
+    this.handleMenuExited = this.handleMenuExited.bind(this);
+    this.popper = /*#__PURE__*/React.createRef();
+    this.cbContainer = /*#__PURE__*/React.createRef();
+    this.menuContainer = /*#__PURE__*/React.createRef();
+    this.input = /*#__PURE__*/React.createRef();
   }
 
-  _createClass(AutoCompleteInput, [{
-    key: "setInputWidth",
-    value: function setInputWidth() {
-      if (this.cbContainer.current) {
-        this.setState({
-          inputWidth: this.cbContainer.current.getBoundingClientRect().width
-        });
-      }
-    }
-  }, {
-    key: "getValueAndValidate",
-    value: // validation needs to be an exact case-sensitve match on value
-    function getValueAndValidate(title) {
-      if (!title) {
-        this.setState({
-          invalid: false
-        });
-        return {
-          value: title,
-          isValid: false
-        };
-      } // validate
-
-
-      var options = this.props.options;
-      var result = options.filter(function (option) {
-        return option.title.toLowerCase() === title.toLowerCase();
+  setInputWidth() {
+    if (this.cbContainer.current) {
+      this.setState({
+        inputWidth: this.cbContainer.current.getBoundingClientRect().width
       });
+    }
+  }
 
-      if (result.length < 1) {
-        this.setState({
-          invalid: true
-        });
-        return {
-          value: title,
-          isValid: false
-        };
-      }
-
+  // validation needs to be an exact case-sensitve match on value
+  getValueAndValidate(title) {
+    if (!title) {
       this.setState({
         invalid: false
       });
       return {
-        value: result[0].value,
-        isValid: true
+        value: title,
+        isValid: false
       };
-    } // validate typed entries emit change event using value
+    } // validate
 
-  }, {
-    key: "updateInputValue",
-    value: function updateInputValue(title) {
-      var menuIsOpen = this.state.menuIsOpen;
 
-      var _this$getValueAndVali = this.getValueAndValidate(title),
-          value = _this$getValueAndVali.value,
-          isValid = _this$getValueAndVali.isValid;
+    var {
+      options
+    } = this.props;
+    var result = options.filter(option => option.title.toLowerCase() === title.toLowerCase());
 
-      if (menuIsOpen) this.processFilterChange(title);
-      this.fireOnChange(value, isValid);
-    }
-  }, {
-    key: "fireOnChange",
-    value: function fireOnChange(value) {
-      var isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var onChange = this.props.onChange;
-      onChange(value, isValid);
-    }
-  }, {
-    key: "processFilterChange",
-    value: function processFilterChange(filter) {
-      var _this$popper$current;
-
-      var options = this.props.options;
-      var menuIsOpen = this.state.menuIsOpen;
-      var filteredOptions = filter ? this.getCachedFilteredOptions(options, filter) : options;
-      var perfectMatch = filteredOptions.length === 1 && filteredOptions[0].title === filter;
+    if (result.length < 1) {
       this.setState({
-        filteredOptions: filteredOptions,
-        keyboardOptionIndex: 0
+        invalid: true
       });
+      return {
+        value: title,
+        isValid: false
+      };
+    }
 
-      if (perfectMatch && menuIsOpen) {
-        this.closeMenu();
-        return;
-      }
+    this.setState({
+      invalid: false
+    });
+    return {
+      value: result[0].value,
+      isValid: true
+    };
+  } // validate typed entries emit change event using value
+
+
+  updateInputValue(title) {
+    var {
+      menuIsOpen
+    } = this.state;
+    var {
+      value,
+      isValid
+    } = this.getValueAndValidate(title);
+    if (menuIsOpen) this.processFilterChange(title);
+    this.fireOnChange(value, isValid);
+  }
 
-      (_this$popper$current = this.popper.current) === null || _this$popper$current === void 0 ? void 0 : _this$popper$current.scheduleUpdate(); // filtered options list can change size, may need to be repositioned
-    }
-  }, {
-    key: "resetValue",
-    value: function resetValue() {
-      this.setState({
-        title: ''
-      });
-      this.fireOnChange('');
-    }
-  }, {
-    key: "handleResize",
-    value: function handleResize() {
-      this.setInputWidth();
+  fireOnChange(value) {
+    var isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var {
+      onChange
+    } = this.props;
+    onChange(value, isValid);
+  }
+
+  processFilterChange(filter) {
+    var _this$popper$current;
+
+    var {
+      options
+    } = this.props;
+    var {
+      menuIsOpen
+    } = this.state;
+    var filteredOptions = filter ? this.getCachedFilteredOptions(options, filter) : options;
+    var perfectMatch = filteredOptions.length === 1 && filteredOptions[0].title === filter;
+    this.setState({
+      filteredOptions,
+      keyboardOptionIndex: 0
+    });
+
+    if (perfectMatch && menuIsOpen) {
+      this.closeMenu();
+      return;
     }
-  }, {
-    key: "handleMenuKeyDown",
-    value: function handleMenuKeyDown(event) {
-      var _this$input$current;
-
-      var _this$state = this.state,
-          filteredOptions = _this$state.filteredOptions,
-          keyboardOptionIndex = _this$state.keyboardOptionIndex;
-      var option = filteredOptions[keyboardOptionIndex];
-
-      switch (event.key) {
-        case 'Enter':
-        case 'ArrowRight':
-          event.stopPropagation();
-          event.preventDefault();
-
-          if (option) {
-            this.setState({
-              title: option.title,
-              invalid: false
-            });
-            this.fireOnChange(option.value);
-          }
-
-          this.closeMenu();
-          (_this$input$current = this.input.current) === null || _this$input$current === void 0 ? void 0 : _this$input$current.focus();
-          break;
 
-        case 'ArrowUp':
-          event.stopPropagation();
-          event.preventDefault();
-          this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);
-          break;
+    (_this$popper$current = this.popper.current) === null || _this$popper$current === void 0 ? void 0 : _this$popper$current.scheduleUpdate(); // filtered options list can change size, may need to be repositioned
+  }
 
-        case 'ArrowDown':
-          event.stopPropagation();
-          event.preventDefault();
-          this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);
-          break;
+  resetValue() {
+    this.setState({
+      title: ''
+    });
+    this.fireOnChange('');
+  }
 
-        case 'Tab':
-          event.stopPropagation();
-          event.preventDefault();
+  handleResize() {
+    this.setInputWidth();
+  }
 
-          if (event.shiftKey) {
-            this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);
-            break;
-          }
+  handleMenuKeyDown(event) {
+    var _this$input$current;
 
-          this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);
-          break;
+    var {
+      filteredOptions,
+      keyboardOptionIndex
+    } = this.state;
+    var option = filteredOptions[keyboardOptionIndex];
 
-        case 'Escape':
-          event.preventDefault();
-          event.stopPropagation();
-          this.closeMenu();
-          break;
+    switch (event.key) {
+      case 'Enter':
+      case 'ArrowRight':
+        event.stopPropagation();
+        event.preventDefault();
 
-        default:
-          break;
-      }
-    }
-  }, {
-    key: "navigateMenu",
-    value: function navigateMenu(direction) {
-      var _this$state2 = this.state,
-          filteredOptions = _this$state2.filteredOptions,
-          keyboardOptionIndex = _this$state2.keyboardOptionIndex;
-      var newKeyboardOptionIndex = keyboardOptionIndex;
-
-      if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP) {
-        if (keyboardOptionIndex > 0) {
-          newKeyboardOptionIndex = (newKeyboardOptionIndex - 1) % filteredOptions.length;
+        if (option) {
           this.setState({
-            keyboardOptionIndex: newKeyboardOptionIndex
-          });
-        } else if (keyboardOptionIndex === 0) {
-          newKeyboardOptionIndex = filteredOptions.length - 1;
-          this.setState({
-            keyboardOptionIndex: newKeyboardOptionIndex
+            title: option.title,
+            invalid: false
           });
+          this.fireOnChange(option.value);
         }
-      } else if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN) {
-        if (keyboardOptionIndex < filteredOptions.length) {
-          newKeyboardOptionIndex = (newKeyboardOptionIndex + 1) % filteredOptions.length;
-          this.setState({
-            keyboardOptionIndex: newKeyboardOptionIndex
-          });
+
+        this.closeMenu();
+        (_this$input$current = this.input.current) === null || _this$input$current === void 0 ? void 0 : _this$input$current.focus();
+        break;
+
+      case 'ArrowUp':
+        event.stopPropagation();
+        event.preventDefault();
+        this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);
+        break;
+
+      case 'ArrowDown':
+        event.stopPropagation();
+        event.preventDefault();
+        this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);
+        break;
+
+      case 'Tab':
+        event.stopPropagation();
+        event.preventDefault();
+
+        if (event.shiftKey) {
+          this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP);
+          break;
         }
-      }
 
-      this.scrollOptionIntoView(newKeyboardOptionIndex);
-    }
-  }, {
-    key: "handleInputKeyDown",
-    value: function handleInputKeyDown(event) {
-      var onEnter = this.props.onEnter;
-      var menuIsOpen = this.state.menuIsOpen;
-
-      if (menuIsOpen) {
-        this.handleMenuKeyDown(event);
-      } else if (event.key === 'Enter') {
-        onEnter();
-      } else if (event.key === 'Escape') {
-        this.resetValue();
+        this.navigateMenu(AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN);
+        break;
+
+      case 'Escape':
         event.preventDefault();
         event.stopPropagation();
-      } else if (!(event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'Tab' || event.key === 'Shift')) {
-        this.openMenu();
-      }
-    }
-  }, {
-    key: "handleInputChange",
-    value: function handleInputChange(event) {
-      this.setState({
-        title: event.target.value
-      });
-      this.updateInputValue(event.target.value);
-    }
-  }, {
-    key: "handleOptionClick",
-    value: function handleOptionClick(option) {
-      var _this$input$current2;
+        this.closeMenu();
+        break;
 
-      this.setState({
-        title: option.title,
-        invalid: false
-      });
-      this.fireOnChange(option.value);
-      this.closeMenu();
-      (_this$input$current2 = this.input.current) === null || _this$input$current2 === void 0 ? void 0 : _this$input$current2.focus();
+      default:
+        break;
     }
-  }, {
-    key: "handelInputFocus",
-    value: function handelInputFocus() {
-      var menuIsOpen = this.state.menuIsOpen;
+  }
 
-      if (!menuIsOpen) {
-        this.openMenu();
+  navigateMenu(direction) {
+    var {
+      filteredOptions,
+      keyboardOptionIndex
+    } = this.state;
+    var newKeyboardOptionIndex = keyboardOptionIndex;
+
+    if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.UP) {
+      if (keyboardOptionIndex > 0) {
+        newKeyboardOptionIndex = (newKeyboardOptionIndex - 1) % filteredOptions.length;
+        this.setState({
+          keyboardOptionIndex: newKeyboardOptionIndex
+        });
+      } else if (keyboardOptionIndex === 0) {
+        newKeyboardOptionIndex = filteredOptions.length - 1;
+        this.setState({
+          keyboardOptionIndex: newKeyboardOptionIndex
+        });
+      }
+    } else if (direction === AutoCompleteInput.MENU_NAVIGATION_DIRECTION.DOWN) {
+      if (keyboardOptionIndex < filteredOptions.length) {
+        newKeyboardOptionIndex = (newKeyboardOptionIndex + 1) % filteredOptions.length;
+        this.setState({
+          keyboardOptionIndex: newKeyboardOptionIndex
+        });
       }
     }
-  }, {
-    key: "handleInputClick",
-    value: function handleInputClick() {
-      var menuIsOpen = this.state.menuIsOpen;
 
-      if (!menuIsOpen) {
-        this.openMenu();
-      }
+    this.scrollOptionIntoView(newKeyboardOptionIndex);
+  }
+
+  handleInputKeyDown(event) {
+    var {
+      onEnter
+    } = this.props;
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (menuIsOpen) {
+      this.handleMenuKeyDown(event);
+    } else if (event.key === 'Enter') {
+      onEnter();
+    } else if (event.key === 'Escape') {
+      this.resetValue();
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (!(event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'Tab' || event.key === 'Shift')) {
+      this.openMenu();
     }
-  }, {
-    key: "handleInputBlur",
-    value: function handleInputBlur(event) {
-      var _this$popper$current2;
+  }
 
-      var menuIsOpen = this.state.menuIsOpen;
+  handleInputChange(event) {
+    this.setState({
+      title: event.target.value
+    });
+    this.updateInputValue(event.target.value);
+  }
 
-      if (menuIsOpen && event.relatedTarget instanceof Element && (_this$popper$current2 = this.popper.current) !== null && _this$popper$current2 !== void 0 && _this$popper$current2.element.contains(event.relatedTarget)) {
-        return;
-      }
+  handleOptionClick(option) {
+    var _this$input$current2;
 
-      this.closeMenu(false);
-    }
-  }, {
-    key: "handleMenuBlur",
-    value: function handleMenuBlur(event) {
-      var _this$popper$current3;
-
-      // if blur event is caused by focusing on the input or focus on options don't close menu
-      if (event.relatedTarget === this.input.current || event.relatedTarget instanceof Element && (_this$popper$current3 = this.popper.current) !== null && _this$popper$current3 !== void 0 && _this$popper$current3.element.contains(event.relatedTarget)) {
-        return;
-      }
+    this.setState({
+      title: option.title,
+      invalid: false
+    });
+    this.fireOnChange(option.value);
+    this.closeMenu();
+    (_this$input$current2 = this.input.current) === null || _this$input$current2 === void 0 ? void 0 : _this$input$current2.focus();
+  }
+
+  handelInputFocus() {
+    var {
+      menuIsOpen
+    } = this.state;
 
-      this.closeMenu(false);
+    if (!menuIsOpen) {
+      this.openMenu();
     }
-  }, {
-    key: "handleMenuOpened",
-    value: function handleMenuOpened() {
-      var _this$input$current3;
+  }
 
-      (_this$input$current3 = this.input.current) === null || _this$input$current3 === void 0 ? void 0 : _this$input$current3.focus();
+  handleInputClick() {
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (!menuIsOpen) {
+      this.openMenu();
     }
-  }, {
-    key: "handleMenuExited",
-    value: function handleMenuExited() {
-      var menuIsOpen = this.state.menuIsOpen;
+  }
 
-      if (menuIsOpen) {
-        this.setState({
-          menuIsOpen: false,
-          keyboardOptionIndex: 0
-        });
-      }
+  handleInputBlur(event) {
+    var _this$popper$current2;
+
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (menuIsOpen && event.relatedTarget instanceof Element && (_this$popper$current2 = this.popper.current) !== null && _this$popper$current2 !== void 0 && _this$popper$current2.element.contains(event.relatedTarget)) {
+      return;
     }
-  }, {
-    key: "openMenu",
-    value: function openMenu() {
-      var _this2 = this;
-
-      var title = this.state.title;
-      this.processFilterChange(title);
-      this.setInputWidth();
-      this.setState({
-        menuIsOpen: true
-      }); // https://github.com/reactjs/react-transition-group/issues/382
 
-      window.requestAnimationFrame(function () {
-        var _this2$popper$current;
+    this.closeMenu(false);
+  }
 
-        (_this2$popper$current = _this2.popper.current) === null || _this2$popper$current === void 0 ? void 0 : _this2$popper$current.show();
-      });
+  handleMenuBlur(event) {
+    var _this$popper$current3;
+
+    // if blur event is caused by focusing on the input or focus on options don't close menu
+    if (event.relatedTarget === this.input.current || event.relatedTarget instanceof Element && (_this$popper$current3 = this.popper.current) !== null && _this$popper$current3 !== void 0 && _this$popper$current3.element.contains(event.relatedTarget)) {
+      return;
     }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      var _this$popper$current4;
 
-      var focusInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    this.closeMenu(false);
+  }
+
+  handleMenuOpened() {
+    var _this$input$current3;
+
+    (_this$input$current3 = this.input.current) === null || _this$input$current3 === void 0 ? void 0 : _this$input$current3.focus();
+  }
+
+  handleMenuExited() {
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (menuIsOpen) {
       this.setState({
         menuIsOpen: false,
         keyboardOptionIndex: 0
       });
+    }
+  }
 
-      if (focusInput) {
-        var _this$input$current4;
+  openMenu() {
+    var {
+      title
+    } = this.state;
+    this.processFilterChange(title);
+    this.setInputWidth();
+    this.setState({
+      menuIsOpen: true
+    }); // https://github.com/reactjs/react-transition-group/issues/382
+
+    window.requestAnimationFrame(() => {
+      var _this$popper$current4;
 
-        (_this$input$current4 = this.input.current) === null || _this$input$current4 === void 0 ? void 0 : _this$input$current4.focus();
-      }
+      (_this$popper$current4 = this.popper.current) === null || _this$popper$current4 === void 0 ? void 0 : _this$popper$current4.show();
+    });
+  }
 
-      (_this$popper$current4 = this.popper.current) === null || _this$popper$current4 === void 0 ? void 0 : _this$popper$current4.hide();
-    }
-  }, {
-    key: "scrollOptionIntoView",
-    value: function scrollOptionIntoView(index) {
-      if (this.menuContainer.current) {
-        var _this$menuContainer$c;
-
-        (_this$menuContainer$c = this.menuContainer.current.children.item(index)) === null || _this$menuContainer$c === void 0 ? void 0 : _this$menuContainer$c.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest'
-        });
-      }
-    }
-  }, {
-    key: "renderMenuElement",
-    value: function renderMenuElement() {
-      var inputWidth = this.state.inputWidth;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames('aci-options'),
-        ref: this.menuContainer,
-        role: "presentation",
-        onKeyDown: this.handleMenuKeyDown,
-        style: {
-          width: inputWidth
-        },
-        onBlur: this.handleMenuBlur
-      }, this.renderOptions());
+  closeMenu() {
+    var _this$popper$current5;
+
+    var focusInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    this.setState({
+      menuIsOpen: false,
+      keyboardOptionIndex: 0
+    });
+
+    if (focusInput) {
+      var _this$input$current4;
+
+      (_this$input$current4 = this.input.current) === null || _this$input$current4 === void 0 ? void 0 : _this$input$current4.focus();
     }
-  }, {
-    key: "renderOptions",
-    value: function renderOptions() {
-      var _this3 = this;
-
-      var noMatchText = this.props.noMatchText;
-      var _this$state3 = this.state,
-          title = _this$state3.title,
-          filteredOptions = _this$state3.filteredOptions;
-
-      if (title && filteredOptions.length === 0) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "no-match"
-        }, noMatchText);
-      }
 
-      return filteredOptions.map(function (option, index) {
-        return _this3.renderOption(option, index);
+    (_this$popper$current5 = this.popper.current) === null || _this$popper$current5 === void 0 ? void 0 : _this$popper$current5.hide();
+  }
+
+  scrollOptionIntoView(index) {
+    if (this.menuContainer.current) {
+      var _this$menuContainer$c;
+
+      (_this$menuContainer$c = this.menuContainer.current.children.item(index)) === null || _this$menuContainer$c === void 0 ? void 0 : _this$menuContainer$c.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
       });
     }
-  }, {
-    key: "renderOption",
-    value: function renderOption(option, index) {
-      var _this4 = this;
-
-      var keyboardOptionIndex = this.state.keyboardOptionIndex;
-      var key = "option-".concat(index, "-").concat(option.value);
-      return /*#__PURE__*/React.createElement("button", {
-        key: key,
-        type: "button",
-        className: classNames('aci-option-btn', {
-          'keyboard-active': keyboardOptionIndex === index
-        }),
-        onClick: function onClick() {
-          return _this4.handleOptionClick(option);
-        },
-        onFocus: function onFocus() {
-          return _this4.setState({
-            keyboardOptionIndex: index
-          });
-        }
-      }, option.title);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          options = _this$props.options,
-          inputPlaceholder = _this$props.inputPlaceholder,
-          disabled = _this$props.disabled,
-          className = _this$props.className,
-          defaultTitle = _this$props.defaultTitle,
-          spellCheck = _this$props.spellCheck;
-      var _this$state4 = this.state,
-          title = _this$state4.title,
-          menuIsOpen = _this$state4.menuIsOpen,
-          popperOptions = _this$state4.popperOptions,
-          invalid = _this$state4.invalid;
+  }
+
+  renderMenuElement() {
+    var {
+      inputWidth
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('aci-options'),
+      ref: this.menuContainer,
+      role: "presentation",
+      onKeyDown: this.handleMenuKeyDown,
+      style: {
+        width: inputWidth
+      },
+      onBlur: this.handleMenuBlur
+    }, this.renderOptions());
+  }
+
+  renderOptions() {
+    var {
+      noMatchText
+    } = this.props;
+    var {
+      title,
+      filteredOptions
+    } = this.state;
+
+    if (title && filteredOptions.length === 0) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "aci-container",
-        ref: this.cbContainer
-      }, /*#__PURE__*/React.createElement("input", {
-        value: title || defaultTitle,
-        className: classNames('form-control', className, 'aci-input', {
-          'is-invalid': invalid && !menuIsOpen
-        }),
-        ref: this.input,
-        onChange: this.handleInputChange,
-        placeholder: inputPlaceholder || options[0].title,
-        disabled: disabled,
-        onFocus: this.handelInputFocus,
-        onClick: this.handleInputClick,
-        onBlur: this.handleInputBlur,
-        onKeyDown: this.handleInputKeyDown,
-        spellCheck: spellCheck
-      }), /*#__PURE__*/React.createElement(Popper, {
-        ref: this.popper,
-        options: popperOptions,
-        className: classNames('aci-options-popper interactive'),
-        onEntered: this.handleMenuOpened,
-        onExited: this.handleMenuExited
-      }, this.renderMenuElement()));
+        className: "no-match"
+      }, noMatchText);
     }
-  }]);
 
-  return AutoCompleteInput;
-}(Component);
+    return filteredOptions.map((option, index) => this.renderOption(option, index));
+  }
+
+  renderOption(option, index) {
+    var {
+      keyboardOptionIndex
+    } = this.state;
+    var key = "option-".concat(index, "-").concat(option.value);
+    return /*#__PURE__*/React.createElement("button", {
+      key: key,
+      type: "button",
+      className: classNames('aci-option-btn', {
+        'keyboard-active': keyboardOptionIndex === index
+      }),
+      onClick: () => this.handleOptionClick(option),
+      onFocus: () => this.setState({
+        keyboardOptionIndex: index
+      })
+    }, option.title);
+  }
+
+  render() {
+    var {
+      options,
+      inputPlaceholder,
+      disabled,
+      className,
+      defaultTitle,
+      spellCheck
+    } = this.props;
+    var {
+      title,
+      menuIsOpen,
+      popperOptions,
+      invalid
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "aci-container",
+      ref: this.cbContainer
+    }, /*#__PURE__*/React.createElement("input", {
+      value: title || defaultTitle,
+      className: classNames('form-control', className, 'aci-input', {
+        'is-invalid': invalid && !menuIsOpen
+      }),
+      ref: this.input,
+      onChange: this.handleInputChange,
+      placeholder: inputPlaceholder || options[0].title,
+      disabled: disabled,
+      onFocus: this.handelInputFocus,
+      onClick: this.handleInputClick,
+      onBlur: this.handleInputBlur,
+      onKeyDown: this.handleInputKeyDown,
+      spellCheck: spellCheck
+    }), /*#__PURE__*/React.createElement(Popper, {
+      ref: this.popper,
+      options: popperOptions,
+      className: classNames('aci-options-popper interactive'),
+      onEntered: this.handleMenuOpened,
+      onExited: this.handleMenuExited
+    }, this.renderMenuElement()));
+  }
+
+}
 
 _defineProperty(AutoCompleteInput, "propTypes", {
   options: PropTypes.arrayOf(PropTypes.shape({
@@ -586,16 +545,19 @@ _defineProperty(AutoCompleteInput, "propTypes", {
 });
 
 _defineProperty(AutoCompleteInput, "defaultProps", {
-  onChange: function onChange() {// no-op
+  onChange() {// no-op
   },
+
   inputPlaceholder: '',
   disabled: false,
   className: '',
   defaultTitle: '',
   popperOptions: null,
   spellCheck: true,
-  onEnter: function onEnter() {// no-op
+
+  onEnter() {// no-op
   },
+
   noMatchText: 'No matching items found'
 });