"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = exports.DEFAULT_VALUE_PARSER = exports.DEFAULT_POPOVER_PROPS = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _Input = _interopRequireDefault(require("../Input"));
var _omit = _interopRequireDefault(require("omit"));
var _DropdownLayout = _interopRequireDefault(require("../DropdownLayout/DropdownLayout"));
var _InputWithOptionsSt = require("./InputWithOptions.st.css.js");
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _HighlightContext = _interopRequireDefault(require("./HighlightContext"));
var _PopoverNext = _interopRequireDefault(require("../PopoverNext/PopoverNext"));
var _context = require("../WixDesignSystemProvider/context");
var _Drawer = _interopRequireDefault(require("../Drawer"));
var _excluded = ["appendTo", "fixed", "flip", "placement", "dynamicWidth"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/InputWithOptions/InputWithOptions.jsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var DEFAULT_VALUE_PARSER = exports.DEFAULT_VALUE_PARSER = function DEFAULT_VALUE_PARSER(option) {
  return typeof option.value === 'string' ? option.value : option.label;
};
var INPUT_WITH_OPTIONS_DOUBLE_CLICK_THRESHOLD = 2000;
var DEFAULT_POPOVER_PROPS = exports.DEFAULT_POPOVER_PROPS = {
  appendTo: 'parent',
  flip: false,
  fixed: true,
  placement: 'bottom',
  width: '100%',
  minWidth: 192,
  onMouseEnter: undefined,
  onMouseLeave: undefined
};
var InputWithOptions = /*#__PURE__*/function (_Component) {
  function InputWithOptions(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, InputWithOptions);
    _this = _callSuper(this, InputWithOptions, [props]);
    _this.input = /*#__PURE__*/_react["default"].createRef();
    _this._onOptionMarked = function (option, optionElementId) {
      var onOptionMarked = _this.props.onOptionMarked;
      _this.setState({
        activeDescendentId: optionElementId
      });
      if (onOptionMarked) {
        onOptionMarked(option, optionElementId);
      }
    };
    /** Checks if focus event is related to selecting an option */
    _this._didSelectOption = function (event) {
      var focusedElement = event && event.relatedTarget;
      var dropdownContainer = _this.dropdownLayout && _this.dropdownLayout.containerRef.current;
      // Check if user has focused other input component
      var isInput = focusedElement instanceof HTMLInputElement;
      if (!focusedElement || !dropdownContainer || isInput) {
        return false;
      }
      var isInDropdown = dropdownContainer.contains(focusedElement);

      // Returns true if element is the dropdown container or is inside of it
      return isInDropdown;
    };
    /**
     * Clears the input.
     *
     * @param event delegated to the onClear call
     */
    _this.clear = function (event) {
      _this.input.current && _this.input.current.clear(event);
    };
    _this.state = {
      inputValue: props.value || '',
      showOptions: false,
      lastOptionsShow: 0,
      isEditing: false
    };
    _this.uniqueId = (0, _uniqueId["default"])('InputWithOptions');
    _this._onSelect = _this._onSelect.bind(_this);
    _this._onFocus = _this._onFocus.bind(_this);
    _this._onBlur = _this._onBlur.bind(_this);
    _this._onChange = _this._onChange.bind(_this);
    _this._onKeyDown = _this._onKeyDown.bind(_this);
    _this.focus = _this.focus.bind(_this);
    _this.blur = _this.blur.bind(_this);
    _this.select = _this.select.bind(_this);
    _this.hideOptions = _this.hideOptions.bind(_this);
    _this.showOptions = _this.showOptions.bind(_this);
    _this._onManuallyInput = _this._onManuallyInput.bind(_this);
    _this._renderDropdownLayout = _this._renderDropdownLayout.bind(_this);
    _this.isDropdownLayoutVisible = _this.isDropdownLayoutVisible.bind(_this);
    _this._onInputClicked = _this._onInputClicked.bind(_this);
    _this._onOpenChange = _this._onOpenChange.bind(_this);
    _this.closeOnSelect = _this.closeOnSelect.bind(_this);
    _this.onCompositionChange = _this.onCompositionChange.bind(_this);
    return _this;
  }
  (0, _inherits2["default"])(InputWithOptions, _Component);
  return (0, _createClass2["default"])(InputWithOptions, [{
    key: "inputClasses",
    value:
    // Abstraction
    function inputClasses() {}
  }, {
    key: "dropdownClasses",
    value: function dropdownClasses() {}
  }, {
    key: "dropdownAdditionalProps",
    value: function dropdownAdditionalProps() {}
  }, {
    key: "inputAdditionalProps",
    value: function inputAdditionalProps() {}
  }, {
    key: "rootAdditionalProps",
    value: function rootAdditionalProps() {
      return {};
    }

    /**
     * An array of key codes that act as manual submit. Will be used within
     * onKeyDown(event).
     *
     * @returns {KeyboardEvent.key[]}
     */
  }, {
    key: "getManualSubmitKeys",
    value: function getManualSubmitKeys() {
      return ['Enter', 'Tab'];
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (!this.props.showOptionsIfEmptyInput && (!prevProps.value && this.props.value || !prevState.inputValue && this.state.inputValue)) {
        this.showOptions();
      }

      // Clear value in controlled mode
      if (prevProps.value !== this.props.value && this.props.value === '') {
        this.setState({
          inputValue: ''
        });
      }
    }
  }, {
    key: "onCompositionChange",
    value: function onCompositionChange(isComposing) {
      this.setState({
        isComposing: isComposing
      });
    }
  }, {
    key: "renderInput",
    value: function renderInput(mobile) {
      var _this2 = this;
      var inputAdditionalProps = this.inputAdditionalProps();
      var inputProps = Object.assign((0, _omit["default"])(['onChange', 'dataHook', 'dropDirectionUp', 'focusOnSelectedOption', 'onClose', 'onSelect', 'onOptionMarked', 'overflow', 'visible', 'options', 'selectedId', 'tabIndex', 'fixedHeader', 'fixedFooter', 'maxHeightPixels', 'minWidthPixels', 'withArrow', 'closeOnSelect', 'onMouseEnter', 'onMouseLeave', 'itemHeight', 'selectedHighlight', 'inContainer', 'infiniteScroll', 'loadMore', 'hasMore', 'markedOption', 'className'], this.props), inputAdditionalProps);
      var inputElement = inputProps.inputElement;
      return /*#__PURE__*/_react["default"].cloneElement(inputElement, _objectSpread(_objectSpread({
        menuArrow: true,
        ref: this.input,
        ariaExpanded: this.state.showOptions,
        ariaControls: "".concat(this.uniqueId, "-listbox"),
        ariaActivedescendant: this.state.activeDescendentId
      }, inputProps), {}, {
        onChange: this._onChange,
        onInputClicked: function onInputClicked(event) {
          return _this2._onInputClicked(event, mobile);
        },
        onFocus: this._onFocus,
        onBlur: this._onBlur,
        onCompositionChange: this.onCompositionChange,
        width: inputElement.props.width,
        textOverflow: this.props.textOverflow || inputElement.props.textOverflow,
        tabIndex: this.props["native"] ? -1 : 0
      }));
    }
  }, {
    key: "isDropdownLayoutVisible",
    value: function isDropdownLayoutVisible() {
      return this.state.showOptions && (this.props.showOptionsIfEmptyInput || this.state.inputValue.length > 0);
    }
  }, {
    key: "_renderDropdownLayout",
    value: function _renderDropdownLayout() {
      var _this3 = this;
      var _this$props = this.props,
        highlight = _this$props.highlight,
        value = _this$props.value;
      var inputPropNames = ['children', 'dataHook', 'className', 'id', 'role', 'ariaControls', 'ariaDescribedby', 'ariaLabel', 'autoFocus', 'autoSelect', 'autocomplete', 'defaultValue', 'disabled', 'status', 'statusMessage', 'statusMessageTooltipProps', 'hideStatusSuffix', 'forceFocus', 'forceHover', 'maxLength', 'menuArrow', 'clearButton', 'focusOnClearClick', 'name', 'border', 'noLeftBorderRadius', 'noRightBorderRadius', 'onBlur', 'onChange', 'onClear', 'onCompositionChange', 'onEnterPressed', 'onEscapePressed', 'onFocus', 'onInputClicked', 'onKeyDown', 'onKeyUp', 'onPaste', 'onCopy', 'placeholder', 'prefix', 'readOnly', 'disableEditing', 'rtl', 'size', 'suffix', 'textOverflow', 'tooltipPlacement', 'type', 'value', 'withSelection', 'required', 'min', 'max', 'step', 'customInput', 'pattern', 'inputRef', 'inputmode', 'ariaRoledescription', 'clearButtonTooltipContent', 'clearButtonTooltipProps', 'clearButtonAriaLabel', 'inputElementRef'];
      var inputOnlyProps = inputPropNames.filter(function (k) {
        return k !== 'tabIndex';
      });
      var dropdownProps = Object.assign((0, _omit["default"])(inputOnlyProps.concat(['dataHook', 'onClickOutside']), this.props), this.dropdownAdditionalProps());
      var customStyle = {
        marginLeft: this.props.dropdownOffsetLeft,
        width: 'inherit'
      };
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(this.uniqueId, " ").concat(this.dropdownClasses()),
        style: customStyle,
        "data-hook": "dropdown-layout-wrapper",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 252,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_HighlightContext["default"].Provider, {
        value: {
          highlight: highlight,
          match: value
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 257,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_DropdownLayout["default"], (0, _extends2["default"])({
        ref: function ref(dropdownLayout) {
          _this3.dropdownLayout = dropdownLayout;
        }
      }, dropdownProps, {
        dataHook: "inputwithoptions-dropdownlayout",
        visible: true,
        className: _InputWithOptionsSt.classes.dropdownLayout,
        onClose: this.hideOptions,
        onSelect: this._onSelect,
        onOptionMarked: this._onOptionMarked,
        isComposing: this.state.isComposing,
        listboxId: "".concat(this.uniqueId, "-listbox"),
        inContainer: true,
        tabIndex: -1,
        onDrillOut: function onDrillOut() {
          return _this3.focus();
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 258,
          columnNumber: 11
        }
      }))));
    }
  }, {
    key: "_renderNativeSelect",
    value: function _renderNativeSelect() {
      var _this4 = this;
      var _this$props2 = this.props,
        options = _this$props2.options,
        onSelect = _this$props2.onSelect,
        disabled = _this$props2.disabled;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _InputWithOptionsSt.classes.nativeSelectWrapper,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 283,
          columnNumber: 7
        }
      }, this.renderInput(), /*#__PURE__*/_react["default"].createElement("select", {
        disabled: disabled,
        "data-hook": "native-select",
        className: _InputWithOptionsSt.classes.nativeSelect,
        onChange: function onChange(event) {
          _this4._onChange(event);

          // In this case we don't use DropdownLayout so we need to invoke `onSelect` manually
          onSelect(options[event.target.selectedIndex]);
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 285,
          columnNumber: 9
        }
      }, options.map(function (option, index) {
        return /*#__PURE__*/_react["default"].createElement("option", {
          "data-hook": "native-option-".concat(option.id),
          "data-index": index,
          key: option.id,
          value: option.value,
          __self: _this4,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 297,
            columnNumber: 13
          }
        }, option.value);
      })));
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;
      if (!!this.props["native"]) {
        return this._renderNativeSelect();
      }
      var _this$props3 = this.props,
        dataHook = _this$props3.dataHook,
        _this$props3$popoverP = _this$props3.popoverProps,
        popoverAppendTo = _this$props3$popoverP.appendTo,
        popoverFixed = _this$props3$popoverP.fixed,
        popoverFlip = _this$props3$popoverP.flip,
        popoverPlacement = _this$props3$popoverP.placement,
        popoverDynamicWidth = _this$props3$popoverP.dynamicWidth,
        restPopoverFields = (0, _objectWithoutProperties2["default"])(_this$props3$popoverP, _excluded),
        dropDirectionUp = _this$props3.dropDirectionUp,
        dropdownWidth = _this$props3.dropdownWidth,
        className = _this$props3.className;
      var placement = dropDirectionUp ? 'top' : popoverPlacement;
      var dynamicWidth = popoverDynamicWidth !== null && popoverDynamicWidth !== void 0 ? popoverDynamicWidth : popoverAppendTo === 'window';
      var rootProps = this.rootAdditionalProps();
      return /*#__PURE__*/_react["default"].createElement(_context.WixDesignSystemContext.Consumer, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 335,
          columnNumber: 7
        }
      }, function (_ref) {
        var _this5$props, _rootProps$className;
        var mobile = _ref.mobile;
        return mobile && _this5.props.showDrawerOnMobile ? /*#__PURE__*/_react["default"].createElement("div", {
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 338,
            columnNumber: 13
          }
        }, /*#__PURE__*/_react["default"].createElement("div", {
          "data-input-parent": true,
          className: _this5.inputClasses(),
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 339,
            columnNumber: 15
          }
        }, _this5.renderInput(mobile)), /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
          dataHook: dataHook,
          open: _this5.isDropdownLayoutVisible(),
          onClose: _this5._onOpenChange,
          zIndex: (_this5$props = _this5.props) == null || (_this5$props = _this5$props.popoverProps) == null ? void 0 : _this5$props.zIndex,
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 342,
            columnNumber: 15
          }
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: _InputWithOptionsSt.classes.drawerContent,
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 348,
            columnNumber: 17
          }
        }, _this5.props.customDropdownContent || _this5._renderDropdownLayout()))) : /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], (0, _extends2["default"])({
          className: (0, _InputWithOptionsSt.st)(_InputWithOptionsSt.classes.root, {
            size: 'medium'
          }, (_rootProps$className = rootProps.className) !== null && _rootProps$className !== void 0 ? _rootProps$className : className),
          open: _this5.isDropdownLayoutVisible(),
          onOpenChange: _this5._onOpenChange,
          appendTo: popoverAppendTo !== null && popoverAppendTo !== void 0 ? popoverAppendTo : DEFAULT_POPOVER_PROPS.appendTo,
          flip: popoverFlip !== null && popoverFlip !== void 0 ? popoverFlip : DEFAULT_POPOVER_PROPS.flip,
          fixed: popoverFixed !== null && popoverFixed !== void 0 ? popoverFixed : DEFAULT_POPOVER_PROPS.fixed,
          placement: placement !== null && placement !== void 0 ? placement : DEFAULT_POPOVER_PROPS.placement,
          dynamicWidth: dynamicWidth,
          excludeClass: _this5.uniqueId,
          focusManagerEnabled: false,
          onClickOutside: _this5.props.onClickOutside
        }, restPopoverFields, {
          minWidth: dynamicWidth ? 'fit-content' : DEFAULT_POPOVER_PROPS.minWidth,
          width: dropdownWidth !== null && dropdownWidth !== void 0 ? dropdownWidth : dynamicWidth ? null : DEFAULT_POPOVER_PROPS.width,
          dataHook: dataHook,
          onKeyDown: _this5._onKeyDown,
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 355,
            columnNumber: 13
          }
        }), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 382,
            columnNumber: 15
          }
        }, /*#__PURE__*/_react["default"].createElement("div", {
          "data-input-parent": true,
          className: _this5.inputClasses(),
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 383,
            columnNumber: 17
          }
        }, _this5.renderInput())), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
          __self: _this5,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 387,
            columnNumber: 15
          }
        }, _this5.props.customDropdownContent || _this5._renderDropdownLayout()));
      });
    }

    /**
     * Shows dropdown options
     */
  }, {
    key: "showOptions",
    value: function showOptions() {
      if (!this.state.showOptions) {
        this.setState({
          showOptions: true,
          lastOptionsShow: Date.now()
        });
        this.props.onOptionsShow && this.props.onOptionsShow();
      }
    }

    /**
     * Hides dropdown options
     */
  }, {
    key: "hideOptions",
    value: function hideOptions() {
      if (this.state.showOptions) {
        this.setState({
          showOptions: false,
          activeDescendentId: undefined
        });
        this.props.onOptionsHide && this.props.onOptionsHide();
        this.props.onClose && this.props.onClose();
      }
    }
  }, {
    key: "closeOnSelect",
    value: function closeOnSelect() {
      return this.props.closeOnSelect;
    }
  }, {
    key: "isReadOnly",
    get: function get() {
      var _ref2 = this.inputAdditionalProps() || {
          readOnly: this.props.readOnly
        },
        readOnly = _ref2.readOnly;
      return readOnly;
    }

    /**
     * Determine if the provided key should cause the dropdown to be opened.
     *
     * @param {KeyboardEvent.key}
     * @returns {boolean}
     */
  }, {
    key: "shouldOpenDropdown",
    value: function shouldOpenDropdown(key) {
      var openKeys = this.isReadOnly ? ['Enter', 'Spacebar', ' ', 'ArrowDown'] : ['ArrowDown'];
      return openKeys.includes(key);
    }

    /**
     * Determine if the provided key should delegate the keydown event to the
     * DropdownLayout.
     *
     * @param {KeyboardEvent.key}
     * @returns {boolean}
     */
  }, {
    key: "shouldDelegateKeyDown",
    value: function shouldDelegateKeyDown(key) {
      return this.isReadOnly || !['Spacebar', ' '].includes(key) || this.shouldPerformManualSubmit(' ');
    }

    /**
     * Determine if the provided key should cause manual submit.
     *
     * @param {KeyboardEvent.key}
     * @returns {boolean}
     */
  }, {
    key: "shouldPerformManualSubmit",
    value: function shouldPerformManualSubmit(key) {
      return this.getManualSubmitKeys().includes(key);
    }
  }, {
    key: "_onManuallyInput",
    value: function _onManuallyInput() {
      var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
      if (this.state.isComposing) {
        return;
      }
      inputValue = inputValue.trim();
      var suggestedOption = this.props.options.find(function (element) {
        return element.value === inputValue;
      });
      if (this.props.onManuallyInput) {
        this.props.onManuallyInput(inputValue, suggestedOption);
      }
    }
  }, {
    key: "_onSelect",
    value: function _onSelect(option, isSelectedOption) {
      var onSelect = this.props.onSelect;
      if (this.closeOnSelect() || isSelectedOption) {
        this._onOpenChange(false, 'select-option');
      }
      if (onSelect) {
        onSelect(this.props.highlight ? this.props.options.find(function (opt) {
          return opt.id === option.id;
        }) : option);
      }
    }
  }, {
    key: "_onChange",
    value: function _onChange(event) {
      this.setState({
        inputValue: event.target.value
      });
      if (this.props.onChange) {
        this.props.onChange(event);
      }

      // If the input value is not empty, should show the options
      if (event.target.value.trim() && !this.props["native"]) {
        this.showOptions();
      }
    }
  }, {
    key: "_onInputClicked",
    value: function _onInputClicked(event, mobile) {
      var _this$props$onInputCl, _this$props4;
      if (mobile) {
        this._onOpenChange(true);
      }
      (_this$props$onInputCl = (_this$props4 = this.props).onInputClicked) == null || _this$props$onInputCl.call(_this$props4, event);
    }
  }, {
    key: "_onOpenChange",
    value: function _onOpenChange(open, reason) {
      var doubleClickThreshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_WITH_OPTIONS_DOUBLE_CLICK_THRESHOLD;
      if (this.props.disabled || this.isReadOnly) {
        return;
      }
      if (open) {
        this.showOptions();
      } else if (reason === 'outside-press' || reason === 'select-option') {
        this.hideOptions();
      } else if (Date.now() - this.state.lastOptionsShow > doubleClickThreshold) {
        this.hideOptions();
      }
    }
  }, {
    key: "_onFocus",
    value: function _onFocus(e) {
      /** Don't call onFocus if input is already focused or is disabled
       * can occur when input is re-focused after selecting an option
       */
      if (this._focused || this.props.disabled) {
        return;
      }
      this._focused = true;
      this.setState({
        isEditing: false
      });
      if (this.props.onFocus) {
        this.props.onFocus(e);
      }
    }
  }, {
    key: "_onBlur",
    value: function _onBlur(event) {
      var isFocusInsideDropdown = this._didSelectOption(event);
      if (isFocusInsideDropdown) {
        var focusedEl = event.relatedTarget;
        if ((focusedEl == null ? void 0 : focusedEl.tabIndex) >= 0) {
          return;
        }
        this.focus();
        return;
      }
      this._focused = false;
      if (this.props.onBlur) {
        this.props.onBlur(event);
      }
    }
  }, {
    key: "_onKeyDown",
    value: function _onKeyDown(event) {
      if (this.props.disabled || this.isReadOnly) {
        return;
      }
      var key = event.key;

      /* Enter - prevent a wrapping form from submitting when hitting Enter */
      /* ArrowUp - prevent input's native behaviour from moving the text cursor to the beginning */
      if (key === 'Enter' || key === 'ArrowUp') {
        event.preventDefault();
      }
      if (key !== 'ArrowDown' && key !== 'ArrowUp') {
        this.setState({
          isEditing: true
        });
      }
      if (this.shouldOpenDropdown(key)) {
        this.showOptions();
        event.preventDefault();
      }
      if (this.shouldDelegateKeyDown(key)) {
        // Delegate event and get result

        if (this.dropdownLayout) {
          var eventWasHandled = this.dropdownLayout._onSelectListKeyDown(event);
          if (eventWasHandled || this.isReadOnly) {
            // Stop propagation when Escape is handled to prevent it from bubbling to parent elements
            if (key === 'Escape' && eventWasHandled) {
              event.stopPropagation();
            }
            return;
          }
        }

        // For editing mode, we want to *submit* only for specific keys.
        if (this.shouldPerformManualSubmit(key)) {
          this._onManuallyInput(this.state.inputValue, event);
          var inputIsEmpty = !event.target.value;
          if (this.closeOnSelect() || key === 'Tab' && inputIsEmpty) {
            this.hideOptions();
          }
        }
      }
    }

    /**
     * Sets focus on the input element
     * @param {FocusOptions} options
     */
  }, {
    key: "focus",
    value: function focus() {
      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      this.input.current && this.input.current.focus(options);
    }

    /**
     * Removes focus on the input element
     */
  }, {
    key: "blur",
    value: function blur() {
      this.input.current && this.input.current.blur();
    }

    /**
     * Selects all text in the input element
     */
  }, {
    key: "select",
    value: function select() {
      this.input.current && this.input.current.select();
    }
  }]);
}(_react.Component);
InputWithOptions.defaultProps = _objectSpread(_objectSpread(_objectSpread({}, _Input["default"].defaultProps), _DropdownLayout["default"].defaultProps), {}, {
  onSelect: function onSelect() {},
  options: [],
  closeOnSelect: true,
  inputElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 673,
      columnNumber: 17
    }
  }),
  valueParser: DEFAULT_VALUE_PARSER,
  dropdownWidth: null,
  popoverProps: DEFAULT_POPOVER_PROPS,
  dropdownOffsetLeft: '0',
  showOptionsIfEmptyInput: true,
  autocomplete: 'off',
  "native": false,
  showDrawerOnMobile: true
});
InputWithOptions.displayName = 'InputWithOptions';
var _default = exports["default"] = InputWithOptions;