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

package/dist/ComboBox.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; }
 
 /**
@@ -46,8 +24,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { vsTriangleDown } from '@deephaven/icons';
 import memoize from 'memoizee';
 import classNames from 'classnames';
-import SearchInput from './SearchInput';
-import { Popper } from './popper';
+import SearchInput from "./SearchInput.js";
+import { Popper } from "./popper/index.js";
 import "./ComboBox.css";
 var MENU_NAVIGATION_DIRECTION;
 
@@ -56,37 +34,25 @@ var MENU_NAVIGATION_DIRECTION;
   MENU_NAVIGATION_DIRECTION["DOWN"] = "DOWN";
 })(MENU_NAVIGATION_DIRECTION || (MENU_NAVIGATION_DIRECTION = {}));
 
-var ComboBox = /*#__PURE__*/function (_Component) {
-  _inherits(ComboBox, _Component);
-
-  var _super = _createSuper(ComboBox);
-
-  function ComboBox(props) {
-    var _this;
+class ComboBox extends Component {
+  constructor(props) {
+    super(props);
 
-    _classCallCheck(this, ComboBox);
+    _defineProperty(this, "popper", void 0);
 
-    _this = _super.call(this, props);
+    _defineProperty(this, "cbContainer", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "popper", void 0);
+    _defineProperty(this, "toggleButton", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "cbContainer", void 0);
+    _defineProperty(this, "menuContainer", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "toggleButton", void 0);
+    _defineProperty(this, "input", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "menuContainer", void 0);
+    _defineProperty(this, "searchInput", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "input", void 0);
+    _defineProperty(this, "getCachedFilteredOptions", memoize((options, input) => options.filter(option => option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0)));
 
-    _defineProperty(_assertThisInitialized(_this), "searchInput", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "getCachedFilteredOptions", memoize(function (options, input) {
-      return options.filter(function (option) {
-        return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-      });
-    }));
-
-    _this.state = {
+    this.state = {
       value: '',
       filter: '',
       filteredOptions: props.options,
@@ -94,461 +60,464 @@ var ComboBox = /*#__PURE__*/function (_Component) {
       menuIsOpen: false,
       inputWidth: 100
     };
-    _this.toggleMenu = _this.toggleMenu.bind(_assertThisInitialized(_this));
-    _this.handleMenuKeyDown = _this.handleMenuKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleMenuBlur = _this.handleMenuBlur.bind(_assertThisInitialized(_this));
-    _this.closeMenu = _this.closeMenu.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.handleFilterChange = _this.handleFilterChange.bind(_assertThisInitialized(_this));
-    _this.handleOptionClick = _this.handleOptionClick.bind(_assertThisInitialized(_this));
-    _this.handleOptionFocus = _this.handleOptionFocus.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.toggleButton = /*#__PURE__*/React.createRef();
-    _this.menuContainer = /*#__PURE__*/React.createRef();
-    _this.input = /*#__PURE__*/React.createRef();
-    _this.searchInput = /*#__PURE__*/React.createRef();
-    return _this;
+    this.toggleMenu = this.toggleMenu.bind(this);
+    this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);
+    this.handleMenuBlur = this.handleMenuBlur.bind(this);
+    this.closeMenu = this.closeMenu.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
+    this.handleInputBlur = this.handleInputBlur.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleOptionClick = this.handleOptionClick.bind(this);
+    this.handleOptionFocus = this.handleOptionFocus.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.toggleButton = /*#__PURE__*/React.createRef();
+    this.menuContainer = /*#__PURE__*/React.createRef();
+    this.input = /*#__PURE__*/React.createRef();
+    this.searchInput = /*#__PURE__*/React.createRef();
   }
 
-  _createClass(ComboBox, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$state = this.state,
-          menuIsOpen = _this$state.menuIsOpen,
-          keyboardOptionIndex = _this$state.keyboardOptionIndex;
+  componentDidUpdate() {
+    var {
+      menuIsOpen,
+      keyboardOptionIndex
+    } = this.state;
 
-      if (menuIsOpen && keyboardOptionIndex >= 0) {
-        this.scrollOptionIntoView();
-      }
-    }
-  }, {
-    key: "setInputWidth",
-    value: function setInputWidth() {
-      if (this.cbContainer.current) {
-        this.setState({
-          inputWidth: this.cbContainer.current.getBoundingClientRect().width
-        });
-      }
+    if (menuIsOpen && keyboardOptionIndex >= 0) {
+      this.scrollOptionIntoView();
     }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var _this$input$current;
+  }
 
-      (_this$input$current = this.input.current) === null || _this$input$current === void 0 ? void 0 : _this$input$current.focus();
-    }
-  }, {
-    key: "resetValue",
-    value: function resetValue() {
-      this.setState({
-        value: ''
-      });
-    }
-  }, {
-    key: "updateInputValue",
-    value: function updateInputValue(value) {
-      var onChange = this.props.onChange;
+  setInputWidth() {
+    if (this.cbContainer.current) {
       this.setState({
-        value: value
+        inputWidth: this.cbContainer.current.getBoundingClientRect().width
       });
-      onChange(value);
     }
-  }, {
-    key: "handleResize",
-    value: function handleResize() {
-      this.setInputWidth();
-    }
-  }, {
-    key: "handleMenuKeyDown",
-    value: function handleMenuKeyDown(event) {
-      var _menuOptions$keyboard, _this$input$current2;
-
-      var _this$state2 = this.state,
-          filter = _this$state2.filter,
-          filteredOptions = _this$state2.filteredOptions,
-          keyboardOptionIndex = _this$state2.keyboardOptionIndex;
-      var options = this.props.options;
-      var menuOptions = filter ? filteredOptions : options;
-
-      switch (event.key) {
-        case 'Enter':
-          if (((_menuOptions$keyboard = menuOptions[keyboardOptionIndex]) === null || _menuOptions$keyboard === void 0 ? void 0 : _menuOptions$keyboard.value) != null) {
-            this.updateInputValue(menuOptions[keyboardOptionIndex].value);
-          }
+  }
+
+  focus() {
+    var _this$input$current;
+
+    (_this$input$current = this.input.current) === null || _this$input$current === void 0 ? void 0 : _this$input$current.focus();
+  }
+
+  resetValue() {
+    this.setState({
+      value: ''
+    });
+  }
+
+  updateInputValue(value) {
+    var {
+      onChange
+    } = this.props;
+    this.setState({
+      value
+    });
+    onChange(value);
+  }
+
+  handleResize() {
+    this.setInputWidth();
+  }
+
+  handleMenuKeyDown(event) {
+    var _menuOptions$keyboard, _this$input$current2;
+
+    var {
+      filter,
+      filteredOptions,
+      keyboardOptionIndex
+    } = this.state;
+    var {
+      options
+    } = this.props;
+    var menuOptions = filter ? filteredOptions : options;
+
+    switch (event.key) {
+      case 'Enter':
+        if (((_menuOptions$keyboard = menuOptions[keyboardOptionIndex]) === null || _menuOptions$keyboard === void 0 ? void 0 : _menuOptions$keyboard.value) != null) {
+          this.updateInputValue(menuOptions[keyboardOptionIndex].value);
+        }
 
+        this.closeMenu();
+        (_this$input$current2 = this.input.current) === null || _this$input$current2 === void 0 ? void 0 : _this$input$current2.focus();
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+
+      case 'ArrowUp':
+        this.handleMenuNavigation(ComboBox.MENU_NAVIGATION_DIRECTION.UP);
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        this.handleMenuNavigation(ComboBox.MENU_NAVIGATION_DIRECTION.DOWN);
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+
+      case 'Escape':
+        if (filter !== '') {
+          this.setState({
+            filter: ''
+          });
+          event.stopPropagation(); // Don't trigger blur on input element
+        } else {
           this.closeMenu();
-          (_this$input$current2 = this.input.current) === null || _this$input$current2 === void 0 ? void 0 : _this$input$current2.focus();
-          event.stopPropagation();
-          event.preventDefault();
-          break;
-
-        case 'ArrowUp':
-          this.handleMenuNavigation(ComboBox.MENU_NAVIGATION_DIRECTION.UP);
-          event.stopPropagation();
-          event.preventDefault();
-          break;
-
-        case 'ArrowDown':
-          this.handleMenuNavigation(ComboBox.MENU_NAVIGATION_DIRECTION.DOWN);
-          event.stopPropagation();
-          event.preventDefault();
-          break;
-
-        case 'Escape':
-          if (filter !== '') {
-            this.setState({
-              filter: ''
-            });
-            event.stopPropagation(); // Don't trigger blur on input element
-          } else {
-            this.closeMenu();
-          }
-
-          break;
-
-        case 'Tab':
-          if (!event.shiftKey && keyboardOptionIndex === menuOptions.length - 1) {
-            this.closeMenu();
-          }
-
-          break;
-
-        default:
-          break;
-      }
-    }
-  }, {
-    key: "handleMenuNavigation",
-    value: function handleMenuNavigation(direction) {
-      var _this$state3 = this.state,
-          filter = _this$state3.filter,
-          filteredOptions = _this$state3.filteredOptions,
-          keyboardOptionIndex = _this$state3.keyboardOptionIndex;
-      var options = this.props.options;
-      var menuOptions = filter ? filteredOptions : options;
-      var menuOptionsLength = menuOptions.length;
-      var delta = 0;
-
-      switch (direction) {
-        case ComboBox.MENU_NAVIGATION_DIRECTION.UP:
-          delta = -1;
-          break;
-
-        case ComboBox.MENU_NAVIGATION_DIRECTION.DOWN:
-          delta = 1;
-          break;
-      }
+        }
 
-      if (delta !== 0) {
-        this.setState({
-          keyboardOptionIndex: (keyboardOptionIndex + delta + menuOptionsLength) % menuOptionsLength
-        });
-      }
-    }
-  }, {
-    key: "handleInputKeyDown",
-    value: function handleInputKeyDown(event) {
-      var onEnter = this.props.onEnter;
-      var menuIsOpen = this.state.menuIsOpen;
-
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-        if (!menuIsOpen) {
-          this.openMenu();
+        break;
+
+      case 'Tab':
+        if (!event.shiftKey && keyboardOptionIndex === menuOptions.length - 1) {
+          this.closeMenu();
         }
-      } else if (event.key === 'Enter') {
-        onEnter();
-      }
-    }
-  }, {
-    key: "handleInputChange",
-    value: function handleInputChange(event) {
-      this.updateInputValue(event.target.value);
-    }
-  }, {
-    key: "handleOptionClick",
-    value: function handleOptionClick(event) {
-      var _this$input$current3;
-
-      var optionIndex = Number(event.currentTarget.value);
-      var _this$state4 = this.state,
-          filter = _this$state4.filter,
-          filteredOptions = _this$state4.filteredOptions;
-      var options = this.props.options;
-      var menuOptions = filter ? filteredOptions : options;
-      this.updateInputValue(menuOptions[optionIndex].value);
-      this.closeMenu();
-      (_this$input$current3 = this.input.current) === null || _this$input$current3 === void 0 ? void 0 : _this$input$current3.focus();
+
+        break;
+
+      default:
+        break;
     }
-  }, {
-    key: "handleOptionFocus",
-    value: function handleOptionFocus(event) {
-      this.setState({
-        keyboardOptionIndex: Number(event.target.value)
-      });
+  }
+
+  handleMenuNavigation(direction) {
+    var {
+      filter,
+      filteredOptions,
+      keyboardOptionIndex
+    } = this.state;
+    var {
+      options
+    } = this.props;
+    var menuOptions = filter ? filteredOptions : options;
+    var menuOptionsLength = menuOptions.length;
+    var delta = 0;
+
+    switch (direction) {
+      case ComboBox.MENU_NAVIGATION_DIRECTION.UP:
+        delta = -1;
+        break;
+
+      case ComboBox.MENU_NAVIGATION_DIRECTION.DOWN:
+        delta = 1;
+        break;
     }
-  }, {
-    key: "handleFilterChange",
-    value: function handleFilterChange(event) {
-      var _this$popper$current;
-
-      var options = this.props.options;
-      var filter = event.target.value;
-      var filteredOptions = this.getCachedFilteredOptions(options, filter);
+
+    if (delta !== 0) {
       this.setState({
-        filter: filter,
-        filteredOptions: filteredOptions,
-        keyboardOptionIndex: 0
+        keyboardOptionIndex: (keyboardOptionIndex + delta + menuOptionsLength) % menuOptionsLength
       });
-      (_this$popper$current = this.popper.current) === null || _this$popper$current === void 0 ? void 0 : _this$popper$current.scheduleUpdate();
     }
-  }, {
-    key: "handleMenuBlur",
-    value: function handleMenuBlur(event) {
-      var _this$popper$current2;
-
-      // close if menu blurs, unless its an internal option or the toggleButton which triggers close via click
-      if (event.relatedTarget instanceof Element && (_this$popper$current2 = this.popper.current) !== null && _this$popper$current2 !== void 0 && _this$popper$current2.element.contains(event.relatedTarget) || event.relatedTarget === this.toggleButton.current) {
-        return;
-      }
+  }
 
-      this.closeMenu(false);
+  handleInputKeyDown(event) {
+    var {
+      onEnter
+    } = this.props;
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (!menuIsOpen) {
+        this.openMenu();
+      }
+    } else if (event.key === 'Enter') {
+      onEnter();
     }
-  }, {
-    key: "handleInputBlur",
-    value: function handleInputBlur(event) {
-      var _this$popper$current3;
+  }
 
-      // if blur event is caused by focusing on search input or open menu by keyboard, don't close the menu
-      var menuIsOpen = this.state.menuIsOpen;
+  handleInputChange(event) {
+    this.updateInputValue(event.target.value);
+  }
 
-      if (menuIsOpen && event.relatedTarget instanceof Element && (_this$popper$current3 = this.popper.current) !== null && _this$popper$current3 !== void 0 && _this$popper$current3.element.contains(event.relatedTarget)) {
-        return;
-      }
+  handleOptionClick(event) {
+    var _this$input$current3;
+
+    var optionIndex = Number(event.currentTarget.value);
+    var {
+      filter,
+      filteredOptions
+    } = this.state;
+    var {
+      options
+    } = this.props;
+    var menuOptions = filter ? filteredOptions : options;
+    this.updateInputValue(menuOptions[optionIndex].value);
+    this.closeMenu();
+    (_this$input$current3 = this.input.current) === null || _this$input$current3 === void 0 ? void 0 : _this$input$current3.focus();
+  }
+
+  handleOptionFocus(event) {
+    this.setState({
+      keyboardOptionIndex: Number(event.target.value)
+    });
+  }
+
+  handleFilterChange(event) {
+    var _this$popper$current;
+
+    var {
+      options
+    } = this.props;
+    var filter = event.target.value;
+    var filteredOptions = this.getCachedFilteredOptions(options, filter);
+    this.setState({
+      filter,
+      filteredOptions,
+      keyboardOptionIndex: 0
+    });
+    (_this$popper$current = this.popper.current) === null || _this$popper$current === void 0 ? void 0 : _this$popper$current.scheduleUpdate();
+  }
 
-      this.closeMenu(false);
+  handleMenuBlur(event) {
+    var _this$popper$current2;
+
+    // close if menu blurs, unless its an internal option or the toggleButton which triggers close via click
+    if (event.relatedTarget instanceof Element && (_this$popper$current2 = this.popper.current) !== null && _this$popper$current2 !== void 0 && _this$popper$current2.element.contains(event.relatedTarget) || event.relatedTarget === this.toggleButton.current) {
+      return;
     }
-  }, {
-    key: "handleMenuOpened",
-    value: function handleMenuOpened() {
-      var _this$searchInput$cur;
 
-      this.scrollOptionIntoView();
-      (_this$searchInput$cur = this.searchInput.current) === null || _this$searchInput$cur === void 0 ? void 0 : _this$searchInput$cur.focus();
+    this.closeMenu(false);
+  }
+
+  handleInputBlur(event) {
+    var _this$popper$current3;
+
+    // if blur event is caused by focusing on search input or open menu by keyboard, don't close the menu
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (menuIsOpen && 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: "handleMenuExited",
-    value: function handleMenuExited() {
-      var menuIsOpen = this.state.menuIsOpen;
-
-      if (menuIsOpen) {
-        var _this$popper$current4;
-
-        this.setState({
-          menuIsOpen: false
-        });
-        (_this$popper$current4 = this.popper.current) === null || _this$popper$current4 === void 0 ? void 0 : _this$popper$current4.hide();
-      }
+
+    this.closeMenu(false);
+  }
+
+  handleMenuOpened() {
+    var _this$searchInput$cur;
+
+    this.scrollOptionIntoView();
+    (_this$searchInput$cur = this.searchInput.current) === null || _this$searchInput$cur === void 0 ? void 0 : _this$searchInput$cur.focus();
+  }
+
+  handleMenuExited() {
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (menuIsOpen) {
+      var _this$popper$current4;
 
       this.setState({
-        filter: ''
+        menuIsOpen: false
       });
+      (_this$popper$current4 = this.popper.current) === null || _this$popper$current4 === void 0 ? void 0 : _this$popper$current4.hide();
     }
-  }, {
-    key: "toggleMenu",
-    value: function toggleMenu(event) {
-      var menuIsOpen = this.state.menuIsOpen;
 
-      if (menuIsOpen) {
-        this.closeMenu();
-      } else {
-        this.openMenu();
-      }
+    this.setState({
+      filter: ''
+    });
+  }
+
+  toggleMenu(event) {
+    var {
+      menuIsOpen
+    } = this.state;
 
-      event.stopPropagation();
+    if (menuIsOpen) {
+      this.closeMenu();
+    } else {
+      this.openMenu();
     }
-  }, {
-    key: "openMenu",
-    value: function openMenu() {
-      var _this2 = this;
 
-      this.updateKeyboardIndex();
-      this.setInputWidth();
-      this.setState({
-        menuIsOpen: true
-      });
-      window.requestAnimationFrame(function () {
-        var _this2$popper$current;
+    event.stopPropagation();
+  }
 
-        (_this2$popper$current = _this2.popper.current) === null || _this2$popper$current === void 0 ? void 0 : _this2$popper$current.show();
-      });
-    }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
+  openMenu() {
+    this.updateKeyboardIndex();
+    this.setInputWidth();
+    this.setState({
+      menuIsOpen: true
+    });
+    window.requestAnimationFrame(() => {
       var _this$popper$current5;
 
-      var focusInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setState({
-        menuIsOpen: false
-      });
+      (_this$popper$current5 = this.popper.current) === null || _this$popper$current5 === void 0 ? void 0 : _this$popper$current5.show();
+    });
+  }
 
-      if (focusInput) {
-        var _this$input$current4;
+  closeMenu() {
+    var _this$popper$current6;
 
-        (_this$input$current4 = this.input.current) === null || _this$input$current4 === void 0 ? void 0 : _this$input$current4.focus();
-      }
+    var focusInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    this.setState({
+      menuIsOpen: false
+    });
 
-      (_this$popper$current5 = this.popper.current) === null || _this$popper$current5 === void 0 ? void 0 : _this$popper$current5.hide();
-    }
-  }, {
-    key: "updateKeyboardIndex",
-    value: function updateKeyboardIndex() {
-      var _this$state5 = this.state,
-          value = _this$state5.value,
-          filter = _this$state5.filter,
-          filteredOptions = _this$state5.filteredOptions;
-      var options = this.props.options;
-      var menuOptions = filter ? filteredOptions : options;
-      var valueIndex = menuOptions.findIndex(function (option) {
-        return option.value === value;
-      });
-      this.setState({
-        keyboardOptionIndex: valueIndex
-      });
-    }
-  }, {
-    key: "scrollOptionIntoView",
-    value: function scrollOptionIntoView() {
-      var _this$menuContainer$c;
-
-      var activeOption = (_this$menuContainer$c = this.menuContainer.current) === null || _this$menuContainer$c === void 0 ? void 0 : _this$menuContainer$c.querySelector('.cb-option-btn.keyboard-active');
-
-      if (activeOption instanceof HTMLElement) {
-        activeOption.scrollIntoView({
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
-    }
-  }, {
-    key: "renderMenuElement",
-    value: function renderMenuElement() {
-      var searchPlaceholder = this.props.searchPlaceholder;
-      var _this$state6 = this.state,
-          filter = _this$state6.filter,
-          inputWidth = _this$state6.inputWidth;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "cb-menu-container",
-        ref: this.menuContainer,
-        role: "presentation",
-        onKeyDown: this.handleMenuKeyDown,
-        onClick: function onClick(event) {
-          event.stopPropagation();
-        },
-        style: {
-          width: inputWidth
-        },
-        onBlur: this.handleMenuBlur
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "cb-search-input-container"
-      }, /*#__PURE__*/React.createElement(SearchInput, {
-        value: filter,
-        ref: this.searchInput,
-        onChange: this.handleFilterChange,
-        className: "cb-search-input",
-        placeholder: searchPlaceholder
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "cb-options-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "cb-options"
-      }, this.renderOptions())));
+    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 options = this.props.options;
-      var _this$state7 = this.state,
-          keyboardOptionIndex = _this$state7.keyboardOptionIndex,
-          filter = _this$state7.filter,
-          filteredOptions = _this$state7.filteredOptions;
-      var menuOptions = filter ? filteredOptions : options;
-      return menuOptions.map(function (option, index) {
-        var key = "option-".concat(index, "-").concat(option.value);
-        return /*#__PURE__*/React.createElement("button", {
-          key: key,
-          type: "button",
-          value: index,
-          className: classNames('cb-option-btn', {
-            'keyboard-active': keyboardOptionIndex === index
-          }),
-          onClick: _this3.handleOptionClick,
-          onFocus: _this3.handleOptionFocus
-        }, option.title);
+
+    (_this$popper$current6 = this.popper.current) === null || _this$popper$current6 === void 0 ? void 0 : _this$popper$current6.hide();
+  }
+
+  updateKeyboardIndex() {
+    var {
+      value,
+      filter,
+      filteredOptions
+    } = this.state;
+    var {
+      options
+    } = this.props;
+    var menuOptions = filter ? filteredOptions : options;
+    var valueIndex = menuOptions.findIndex(option => option.value === value);
+    this.setState({
+      keyboardOptionIndex: valueIndex
+    });
+  }
+
+  scrollOptionIntoView() {
+    var _this$menuContainer$c;
+
+    var activeOption = (_this$menuContainer$c = this.menuContainer.current) === null || _this$menuContainer$c === void 0 ? void 0 : _this$menuContainer$c.querySelector('.cb-option-btn.keyboard-active');
+
+    if (activeOption instanceof HTMLElement) {
+      activeOption.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
       });
     }
-  }, {
-    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,
-          defaultValue = _this$props.defaultValue,
-          spellCheck = _this$props.spellCheck;
-      var value = this.state.value;
-      var popperOptions = this.props.popperOptions;
-      popperOptions = _objectSpread({
-        placement: 'bottom-end',
-        modifiers: {
-          preventOverflow: {
-            enabled: false
-          }
-        }
-      }, popperOptions);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "input-group cb-container",
-        ref: this.cbContainer
-      }, /*#__PURE__*/React.createElement("input", {
-        value: value || defaultValue,
-        className: classNames('form-control', className, 'cb-input'),
-        ref: this.input,
-        onChange: this.handleInputChange,
-        placeholder: inputPlaceholder || options[0] && options[0].title,
-        disabled: disabled,
-        onBlur: this.handleInputBlur,
-        onKeyDown: this.handleInputKeyDown,
-        spellCheck: spellCheck
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "input-group-append cb-dropdown"
-      }, /*#__PURE__*/React.createElement("button", {
+  }
+
+  renderMenuElement() {
+    var {
+      searchPlaceholder
+    } = this.props;
+    var {
+      filter,
+      inputWidth
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cb-menu-container",
+      ref: this.menuContainer,
+      role: "presentation",
+      onKeyDown: this.handleMenuKeyDown,
+      onClick: event => {
+        event.stopPropagation();
+      },
+      style: {
+        width: inputWidth
+      },
+      onBlur: this.handleMenuBlur
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cb-search-input-container"
+    }, /*#__PURE__*/React.createElement(SearchInput, {
+      value: filter,
+      ref: this.searchInput,
+      onChange: this.handleFilterChange,
+      className: "cb-search-input",
+      placeholder: searchPlaceholder
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "cb-options-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cb-options"
+    }, this.renderOptions())));
+  }
+
+  renderOptions() {
+    var {
+      options
+    } = this.props;
+    var {
+      keyboardOptionIndex,
+      filter,
+      filteredOptions
+    } = this.state;
+    var menuOptions = filter ? filteredOptions : options;
+    return menuOptions.map((option, index) => {
+      var key = "option-".concat(index, "-").concat(option.value);
+      return /*#__PURE__*/React.createElement("button", {
+        key: key,
         type: "button",
-        className: "btn cb-btn form-control",
-        ref: this.toggleButton,
-        onClick: this.toggleMenu,
-        onKeyDown: this.handleInputKeyDown,
-        disabled: disabled
-      }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: vsTriangleDown
-      }), /*#__PURE__*/React.createElement(Popper, {
-        ref: this.popper,
-        options: popperOptions,
-        className: classNames('combobox interactive'),
-        onEntered: this.handleMenuOpened,
-        onExited: this.handleMenuExited
-      }, this.renderMenuElement()))));
-    }
-  }]);
+        value: index,
+        className: classNames('cb-option-btn', {
+          'keyboard-active': keyboardOptionIndex === index
+        }),
+        onClick: this.handleOptionClick,
+        onFocus: this.handleOptionFocus
+      }, option.title);
+    });
+  }
+
+  render() {
+    var {
+      options,
+      inputPlaceholder,
+      disabled,
+      className,
+      defaultValue,
+      spellCheck
+    } = this.props;
+    var {
+      value
+    } = this.state;
+    var {
+      popperOptions
+    } = this.props;
+    popperOptions = _objectSpread({
+      placement: 'bottom-end',
+      modifiers: {
+        preventOverflow: {
+          enabled: false
+        }
+      }
+    }, popperOptions);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "input-group cb-container",
+      ref: this.cbContainer
+    }, /*#__PURE__*/React.createElement("input", {
+      value: value || defaultValue,
+      className: classNames('form-control', className, 'cb-input'),
+      ref: this.input,
+      onChange: this.handleInputChange,
+      placeholder: inputPlaceholder || options[0] && options[0].title,
+      disabled: disabled,
+      onBlur: this.handleInputBlur,
+      onKeyDown: this.handleInputKeyDown,
+      spellCheck: spellCheck
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "input-group-append cb-dropdown"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "btn cb-btn form-control",
+      ref: this.toggleButton,
+      onClick: this.toggleMenu,
+      onKeyDown: this.handleInputKeyDown,
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsTriangleDown
+    }), /*#__PURE__*/React.createElement(Popper, {
+      ref: this.popper,
+      options: popperOptions,
+      className: classNames('combobox interactive'),
+      onEntered: this.handleMenuOpened,
+      onExited: this.handleMenuExited
+    }, this.renderMenuElement()))));
+  }
 
-  return ComboBox;
-}(Component);
+}
 
 _defineProperty(ComboBox, "MENU_NAVIGATION_DIRECTION", MENU_NAVIGATION_DIRECTION);
 
@@ -574,8 +543,9 @@ _defineProperty(ComboBox, "propTypes", {
 });
 
 _defineProperty(ComboBox, "defaultProps", {
-  onChange: function onChange() {// no-op
+  onChange() {// no-op
   },
+
   inputPlaceholder: '',
   searchPlaceholder: 'Search',
   disabled: false,
@@ -583,8 +553,10 @@ _defineProperty(ComboBox, "defaultProps", {
   defaultValue: '',
   popperOptions: null,
   spellCheck: true,
-  onEnter: function onEnter() {// no-op
+
+  onEnter() {// no-op
   }
+
 });
 
 export default ComboBox;