@atlaskit/react-select 0.0.2

package/dist/esm/select.js

@@ -0,0 +1,1794 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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) { _defineProperty(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 _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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React, { Component } from 'react';
+import { isAppleDevice } from './accessibility/helpers';
+import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
+import { defaultComponents } from './components';
+import { DummyInput, RequiredInput, ScrollManager } from './components/internal';
+import LiveRegion from './components/live-region';
+import { MenuPlacer } from './components/menu';
+import { createFilter } from './filters';
+import { defaultStyles } from './styles';
+import { defaultTheme } from './theme';
+import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
+export var defaultProps = {
+  'aria-live': 'polite',
+  backspaceRemovesValue: true,
+  blurInputOnSelect: isTouchCapable(),
+  captureMenuScroll: !isTouchCapable(),
+  classNames: {},
+  closeMenuOnSelect: true,
+  closeMenuOnScroll: false,
+  components: {},
+  controlShouldRenderValue: true,
+  escapeClearsValue: false,
+  filterOption: createFilter(),
+  formatGroupLabel: formatGroupLabelBuiltin,
+  getOptionLabel: getOptionLabelBuiltin,
+  getOptionValue: getOptionValueBuiltin,
+  isDisabled: false,
+  isLoading: false,
+  isMulti: false,
+  isRtl: false,
+  isSearchable: true,
+  isOptionDisabled: isOptionDisabledBuiltin,
+  loadingMessage: function loadingMessage() {
+    return 'Loading...';
+  },
+  maxMenuHeight: 300,
+  minMenuHeight: 140,
+  menuIsOpen: false,
+  menuPlacement: 'bottom',
+  menuPosition: 'absolute',
+  menuShouldBlockScroll: false,
+  menuShouldScrollIntoView: !isMobileDevice(),
+  noOptionsMessage: function noOptionsMessage() {
+    return 'No options';
+  },
+  openMenuOnFocus: false,
+  openMenuOnClick: true,
+  options: [],
+  pageSize: 5,
+  placeholder: 'Select...',
+  screenReaderStatus: function screenReaderStatus(_ref) {
+    var count = _ref.count;
+    return "".concat(count, " result").concat(count !== 1 ? 's' : '', " available");
+  },
+  styles: {},
+  tabIndex: 0,
+  tabSelectsValue: true,
+  unstyled: false
+};
+function toCategorizedOption(props, option, selectValue, index) {
+  var isDisabled = _isOptionDisabled(props, option, selectValue);
+  var isSelected = _isOptionSelected(props, option, selectValue);
+  var label = getOptionLabel(props, option);
+  var value = getOptionValue(props, option);
+  return {
+    type: 'option',
+    data: option,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    label: label,
+    value: value,
+    index: index
+  };
+}
+function buildCategorizedOptions(props, selectValue) {
+  return props.options.map(function (groupOrOption, groupOrOptionIndex) {
+    //@ts-ignore
+    if ('options' in groupOrOption) {
+      var categorizedOptions = groupOrOption.options.map(function (option, optionIndex) {
+        return toCategorizedOption(props, option, selectValue, optionIndex);
+      }).filter(function (categorizedOption) {
+        return isFocusable(props, categorizedOption);
+      });
+      return categorizedOptions.length > 0 ? {
+        type: 'group',
+        data: groupOrOption,
+        options: categorizedOptions,
+        index: groupOrOptionIndex
+      } : undefined;
+    }
+    var categorizedOption = toCategorizedOption(props, groupOrOption, selectValue, groupOrOptionIndex);
+    return isFocusable(props, categorizedOption) ? categorizedOption : undefined;
+  }).filter(notNullish);
+}
+function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
+  return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
+    if (categorizedOption.type === 'group') {
+      optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
+        return option.data;
+      })));
+    } else {
+      optionsAccumulator.push(categorizedOption.data);
+    }
+    return optionsAccumulator;
+  }, []);
+}
+function buildFocusableOptionsWithIds(categorizedOptions, optionId) {
+  return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
+    if (categorizedOption.type === 'group') {
+      optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
+        return {
+          data: option.data,
+          id: "".concat(optionId, "-").concat(categorizedOption.index, "-").concat(option.index)
+        };
+      })));
+    } else {
+      optionsAccumulator.push({
+        data: categorizedOption.data,
+        id: "".concat(optionId, "-").concat(categorizedOption.index)
+      });
+    }
+    return optionsAccumulator;
+  }, []);
+}
+function buildFocusableOptions(props, selectValue) {
+  return buildFocusableOptionsFromCategorizedOptions(buildCategorizedOptions(props, selectValue));
+}
+function isFocusable(props, categorizedOption) {
+  var _props$inputValue = props.inputValue,
+    inputValue = _props$inputValue === void 0 ? '' : _props$inputValue;
+  var data = categorizedOption.data,
+    isSelected = categorizedOption.isSelected,
+    label = categorizedOption.label,
+    value = categorizedOption.value;
+  return (!shouldHideSelectedOptions(props) || !isSelected) && _filterOption(props, {
+    label: label,
+    value: value,
+    data: data
+  }, inputValue);
+}
+function getNextFocusedValue(state, nextSelectValue) {
+  var focusedValue = state.focusedValue,
+    lastSelectValue = state.selectValue;
+  var lastFocusedIndex = lastSelectValue.indexOf(focusedValue);
+  if (lastFocusedIndex > -1) {
+    var nextFocusedIndex = nextSelectValue.indexOf(focusedValue);
+    if (nextFocusedIndex > -1) {
+      // the focused value is still in the selectValue, return it
+      return focusedValue;
+    } else if (lastFocusedIndex < nextSelectValue.length) {
+      // the focusedValue is not present in the next selectValue array by
+      // reference, so return the new value at the same index
+      return nextSelectValue[lastFocusedIndex];
+    }
+  }
+  return null;
+}
+function getNextFocusedOption(state, options) {
+  var lastFocusedOption = state.focusedOption;
+  return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
+}
+var getFocusedOptionId = function getFocusedOptionId(focusableOptionsWithIds, focusedOption) {
+  var _focusableOptionsWith;
+  var focusedOptionId = (_focusableOptionsWith = focusableOptionsWithIds.find(function (option) {
+    return option.data === focusedOption;
+  })) === null || _focusableOptionsWith === void 0 ? void 0 : _focusableOptionsWith.id;
+  return focusedOptionId || null;
+};
+var getOptionLabel = function getOptionLabel(props, data) {
+  return props.getOptionLabel(data);
+};
+var getOptionValue = function getOptionValue(props, data) {
+  return props.getOptionValue(data);
+};
+function _isOptionDisabled(props, option, selectValue) {
+  return typeof props.isOptionDisabled === 'function' ? props.isOptionDisabled(option, selectValue) : false;
+}
+function _isOptionSelected(props, option, selectValue) {
+  if (selectValue.indexOf(option) > -1) {
+    return true;
+  }
+  if (typeof props.isOptionSelected === 'function') {
+    return props.isOptionSelected(option, selectValue);
+  }
+  var candidate = getOptionValue(props, option);
+  return selectValue.some(function (i) {
+    return getOptionValue(props, i) === candidate;
+  });
+}
+function _filterOption(props, option, inputValue) {
+  return props.filterOption ? props.filterOption(option, inputValue) : true;
+}
+var shouldHideSelectedOptions = function shouldHideSelectedOptions(props) {
+  var hideSelectedOptions = props.hideSelectedOptions,
+    isMulti = props.isMulti;
+  if (hideSelectedOptions === undefined) {
+    return isMulti;
+  }
+  return hideSelectedOptions;
+};
+var instanceId = 1;
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var Select = /*#__PURE__*/function (_Component) {
+  _inherits(Select, _Component);
+  var _super = _createSuper(Select);
+  // Lifecycle
+  // ------------------------------
+
+  function Select(_props) {
+    var _this;
+    _classCallCheck(this, Select);
+    _this = _super.call(this, _props);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      ariaSelection: null,
+      focusedOption: null,
+      focusedOptionId: null,
+      focusableOptionsWithIds: [],
+      focusedValue: null,
+      inputIsHidden: false,
+      isFocused: false,
+      selectValue: [],
+      clearFocusValueOnUpdate: false,
+      prevWasFocused: false,
+      inputIsHiddenAfterUpdate: undefined,
+      prevProps: undefined,
+      instancePrefix: ''
+    });
+    // Misc. Instance Properties
+    // ------------------------------
+    _defineProperty(_assertThisInitialized(_this), "blockOptionHover", false);
+    _defineProperty(_assertThisInitialized(_this), "isComposing", false);
+    // TODO
+    _defineProperty(_assertThisInitialized(_this), "initialTouchX", 0);
+    _defineProperty(_assertThisInitialized(_this), "initialTouchY", 0);
+    _defineProperty(_assertThisInitialized(_this), "openAfterFocus", false);
+    _defineProperty(_assertThisInitialized(_this), "scrollToFocusedOptionOnUpdate", false);
+    _defineProperty(_assertThisInitialized(_this), "isAppleDevice", isAppleDevice());
+    // Refs
+    // ------------------------------
+    _defineProperty(_assertThisInitialized(_this), "controlRef", null);
+    _defineProperty(_assertThisInitialized(_this), "getControlRef", function (ref) {
+      _this.controlRef = ref;
+    });
+    _defineProperty(_assertThisInitialized(_this), "focusedOptionRef", null);
+    _defineProperty(_assertThisInitialized(_this), "getFocusedOptionRef", function (ref) {
+      _this.focusedOptionRef = ref;
+    });
+    _defineProperty(_assertThisInitialized(_this), "menuListRef", null);
+    _defineProperty(_assertThisInitialized(_this), "getMenuListRef", function (ref) {
+      _this.menuListRef = ref;
+    });
+    _defineProperty(_assertThisInitialized(_this), "inputRef", null);
+    _defineProperty(_assertThisInitialized(_this), "getInputRef", function (ref) {
+      _this.inputRef = ref;
+    });
+    // aliased for consumers
+    _defineProperty(_assertThisInitialized(_this), "focus", _this.focusInput);
+    _defineProperty(_assertThisInitialized(_this), "blur", _this.blurInput);
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (newValue, actionMeta) {
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        name = _this$props.name;
+      actionMeta.name = name;
+      _this.ariaOnChange(newValue, actionMeta);
+      onChange(newValue, actionMeta);
+    });
+    _defineProperty(_assertThisInitialized(_this), "setValue", function (newValue, action, option) {
+      var _this$props2 = _this.props,
+        closeMenuOnSelect = _this$props2.closeMenuOnSelect,
+        isMulti = _this$props2.isMulti,
+        inputValue = _this$props2.inputValue;
+      _this.onInputChange('', {
+        action: 'set-value',
+        prevInputValue: inputValue
+      });
+      if (closeMenuOnSelect) {
+        _this.setState({
+          inputIsHiddenAfterUpdate: !isMulti
+        });
+        _this.onMenuClose();
+      }
+      // when the select value should change, we should reset focusedValue
+      _this.setState({
+        clearFocusValueOnUpdate: true
+      });
+      _this.onChange(newValue, {
+        action: action,
+        option: option
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "selectOption", function (newValue) {
+      var _this$props3 = _this.props,
+        blurInputOnSelect = _this$props3.blurInputOnSelect,
+        isMulti = _this$props3.isMulti,
+        name = _this$props3.name;
+      var selectValue = _this.state.selectValue;
+      var deselected = isMulti && _this.isOptionSelected(newValue, selectValue);
+      var isDisabled = _this.isOptionDisabled(newValue, selectValue);
+      if (deselected) {
+        var candidate = _this.getOptionValue(newValue);
+        _this.setValue(multiValueAsValue(selectValue.filter(function (i) {
+          return _this.getOptionValue(i) !== candidate;
+        })), 'deselect-option', newValue);
+      } else if (!isDisabled) {
+        // Select option if option is not disabled
+        if (isMulti) {
+          _this.setValue(multiValueAsValue([].concat(_toConsumableArray(selectValue), [newValue])), 'select-option', newValue);
+        } else {
+          _this.setValue(singleValueAsValue(newValue), 'select-option');
+        }
+      } else {
+        _this.ariaOnChange(singleValueAsValue(newValue), {
+          action: 'select-option',
+          option: newValue,
+          name: name
+        });
+        return;
+      }
+      if (blurInputOnSelect) {
+        _this.blurInput();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "removeValue", function (removedValue) {
+      var isMulti = _this.props.isMulti;
+      var selectValue = _this.state.selectValue;
+      var candidate = _this.getOptionValue(removedValue);
+      var newValueArray = selectValue.filter(function (i) {
+        return _this.getOptionValue(i) !== candidate;
+      });
+      var newValue = valueTernary(isMulti, newValueArray, newValueArray[0] || null);
+      _this.onChange(newValue, {
+        action: 'remove-value',
+        removedValue: removedValue
+      });
+      _this.focusInput();
+    });
+    _defineProperty(_assertThisInitialized(_this), "clearValue", function () {
+      var selectValue = _this.state.selectValue;
+      _this.onChange(valueTernary(_this.props.isMulti, [], null), {
+        action: 'clear',
+        removedValues: selectValue
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "popValue", function () {
+      var isMulti = _this.props.isMulti;
+      var selectValue = _this.state.selectValue;
+      var lastSelectedValue = selectValue[selectValue.length - 1];
+      var newValueArray = selectValue.slice(0, selectValue.length - 1);
+      var newValue = valueTernary(isMulti, newValueArray, newValueArray[0] || null);
+      _this.onChange(newValue, {
+        action: 'pop-value',
+        removedValue: lastSelectedValue
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "getFocusedOptionId", function (focusedOption) {
+      return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getFocusableOptionsWithIds", function () {
+      return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
+    });
+    _defineProperty(_assertThisInitialized(_this), "getValue", function () {
+      return _this.state.selectValue;
+    });
+    _defineProperty(_assertThisInitialized(_this), "cx", function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return classNames.apply(void 0, [_this.props.classNamePrefix].concat(args));
+    });
+    _defineProperty(_assertThisInitialized(_this), "getOptionLabel", function (data) {
+      return getOptionLabel(_this.props, data);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getOptionValue", function (data) {
+      return getOptionValue(_this.props, data);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getStyles", function (key, props) {
+      var unstyled = _this.props.unstyled;
+      var base = defaultStyles[key](props, unstyled);
+      base.boxSizing = 'border-box';
+      var custom = _this.props.styles[key];
+      return custom ? custom(base, props) : base;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getClassNames", function (key, props) {
+      var _this$props$className, _this$props$className2;
+      return (_this$props$className = (_this$props$className2 = _this.props.classNames)[key]) === null || _this$props$className === void 0 ? void 0 : _this$props$className.call(_this$props$className2, props);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getElementId", function (element) {
+      return "".concat(_this.state.instancePrefix, "-").concat(element);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getComponents", function () {
+      return defaultComponents(_this.props);
+    });
+    _defineProperty(_assertThisInitialized(_this), "buildCategorizedOptions", function () {
+      return buildCategorizedOptions(_this.props, _this.state.selectValue);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getCategorizedOptions", function () {
+      return _this.props.menuIsOpen ? _this.buildCategorizedOptions() : [];
+    });
+    _defineProperty(_assertThisInitialized(_this), "buildFocusableOptions", function () {
+      return buildFocusableOptionsFromCategorizedOptions(_this.buildCategorizedOptions());
+    });
+    _defineProperty(_assertThisInitialized(_this), "getFocusableOptions", function () {
+      return _this.props.menuIsOpen ? _this.buildFocusableOptions() : [];
+    });
+    // ==============================
+    // Helpers
+    // ==============================
+    _defineProperty(_assertThisInitialized(_this), "ariaOnChange", function (value, actionMeta) {
+      _this.setState({
+        ariaSelection: _objectSpread({
+          value: value
+        }, actionMeta)
+      });
+    });
+    // ==============================
+    // Mouse Handlers
+    // ==============================
+    _defineProperty(_assertThisInitialized(_this), "onMenuMouseDown", function (event) {
+      if (event.button !== 0) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      _this.focusInput();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMenuMouseMove", function (event) {
+      _this.blockOptionHover = false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onControlMouseDown", function (event) {
+      // Event captured by dropdown indicator
+      if (event.defaultPrevented) {
+        return;
+      }
+      var openMenuOnClick = _this.props.openMenuOnClick;
+      if (!_this.state.isFocused) {
+        if (openMenuOnClick) {
+          _this.openAfterFocus = true;
+        }
+        _this.focusInput();
+      } else if (!_this.props.menuIsOpen) {
+        if (openMenuOnClick) {
+          _this.openMenu('first');
+        }
+      } else {
+        if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
+          _this.onMenuClose();
+        }
+      }
+      if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
+        event.preventDefault();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDropdownIndicatorMouseDown", function (event) {
+      // ignore mouse events that weren't triggered by the primary button
+      if (event && event.type === 'mousedown' && event.button !== 0) {
+        return;
+      }
+      if (_this.props.isDisabled) {
+        return;
+      }
+      var _this$props4 = _this.props,
+        isMulti = _this$props4.isMulti,
+        menuIsOpen = _this$props4.menuIsOpen;
+      _this.focusInput();
+      if (menuIsOpen) {
+        _this.setState({
+          inputIsHiddenAfterUpdate: !isMulti
+        });
+        _this.onMenuClose();
+      } else {
+        _this.openMenu('first');
+      }
+      event.preventDefault();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onClearIndicatorMouseDown", function (event) {
+      // ignore mouse events that weren't triggered by the primary button
+      if (event && event.type === 'mousedown' && event.button !== 0) {
+        return;
+      }
+      _this.clearValue();
+      event.preventDefault();
+      _this.openAfterFocus = false;
+      if (event.type === 'touchend') {
+        _this.focusInput();
+      } else {
+        setTimeout(function () {
+          return _this.focusInput();
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onScroll", function (event) {
+      if (typeof _this.props.closeMenuOnScroll === 'boolean') {
+        if (event.target instanceof HTMLElement && isDocumentElement(event.target)) {
+          _this.props.onMenuClose();
+        }
+      } else if (typeof _this.props.closeMenuOnScroll === 'function') {
+        if (_this.props.closeMenuOnScroll(event)) {
+          _this.props.onMenuClose();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCompositionStart", function () {
+      _this.isComposing = true;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCompositionEnd", function () {
+      _this.isComposing = false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onTouchStart", function (_ref2) {
+      var touches = _ref2.touches;
+      var touch = touches && touches.item(0);
+      if (!touch) {
+        return;
+      }
+      _this.initialTouchX = touch.clientX;
+      _this.initialTouchY = touch.clientY;
+      _this.userIsDragging = false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onTouchMove", function (_ref3) {
+      var touches = _ref3.touches;
+      var touch = touches && touches.item(0);
+      if (!touch) {
+        return;
+      }
+      var deltaX = Math.abs(touch.clientX - _this.initialTouchX);
+      var deltaY = Math.abs(touch.clientY - _this.initialTouchY);
+      var moveThreshold = 5;
+      _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (event) {
+      if (_this.userIsDragging) {
+        return;
+      }
+
+      // close the menu if the user taps outside
+      // we're checking on event.target here instead of event.currentTarget, because we want to assert information
+      // on events on child elements, not the document (which we've attached this handler to).
+      if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) {
+        _this.blurInput();
+      }
+
+      // reset move vars
+      _this.initialTouchX = 0;
+      _this.initialTouchY = 0;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onControlTouchEnd", function (event) {
+      if (_this.userIsDragging) {
+        return;
+      }
+      _this.onControlMouseDown(event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onClearIndicatorTouchEnd", function (event) {
+      if (_this.userIsDragging) {
+        return;
+      }
+      _this.onClearIndicatorMouseDown(event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDropdownIndicatorTouchEnd", function (event) {
+      if (_this.userIsDragging) {
+        return;
+      }
+      _this.onDropdownIndicatorMouseDown(event);
+    });
+    // ==============================
+    // Focus Handlers
+    // ==============================
+    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event) {
+      var prevInputValue = _this.props.inputValue;
+      var inputValue = event.currentTarget.value;
+      _this.setState({
+        inputIsHiddenAfterUpdate: false
+      });
+      _this.onInputChange(inputValue, {
+        action: 'input-change',
+        prevInputValue: prevInputValue
+      });
+      if (!_this.props.menuIsOpen) {
+        _this.onMenuOpen();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onInputFocus", function (event) {
+      if (_this.props.onFocus) {
+        _this.props.onFocus(event);
+      }
+      _this.setState({
+        inputIsHiddenAfterUpdate: false,
+        isFocused: true
+      });
+      if (_this.openAfterFocus || _this.props.openMenuOnFocus) {
+        _this.openMenu('first');
+      }
+      _this.openAfterFocus = false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onInputBlur", function (event) {
+      var prevInputValue = _this.props.inputValue;
+      if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) {
+        _this.inputRef.focus();
+        return;
+      }
+      if (_this.props.onBlur) {
+        _this.props.onBlur(event);
+      }
+      _this.onInputChange('', {
+        action: 'input-blur',
+        prevInputValue: prevInputValue
+      });
+      _this.onMenuClose();
+      _this.setState({
+        focusedValue: null,
+        isFocused: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onOptionHover", function (focusedOption) {
+      if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
+        return;
+      }
+      var options = _this.getFocusableOptions();
+      var focusedOptionIndex = options.indexOf(focusedOption);
+      _this.setState({
+        focusedOption: focusedOption,
+        focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "shouldHideSelectedOptions", function () {
+      return shouldHideSelectedOptions(_this.props);
+    });
+    // If the hidden input gets focus through form submit,
+    // redirect focus to focusable input.
+    _defineProperty(_assertThisInitialized(_this), "onValueInputFocus", function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      _this.focus();
+    });
+    // ==============================
+    // Keyboard Handlers
+    // ==============================
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      var _this$props5 = _this.props,
+        isMulti = _this$props5.isMulti,
+        backspaceRemovesValue = _this$props5.backspaceRemovesValue,
+        escapeClearsValue = _this$props5.escapeClearsValue,
+        inputValue = _this$props5.inputValue,
+        isClearable = _this$props5.isClearable,
+        isDisabled = _this$props5.isDisabled,
+        menuIsOpen = _this$props5.menuIsOpen,
+        onKeyDown = _this$props5.onKeyDown,
+        tabSelectsValue = _this$props5.tabSelectsValue,
+        openMenuOnFocus = _this$props5.openMenuOnFocus;
+      var _this$state = _this.state,
+        focusedOption = _this$state.focusedOption,
+        focusedValue = _this$state.focusedValue,
+        selectValue = _this$state.selectValue;
+      if (isDisabled) {
+        return;
+      }
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+      }
+
+      // Block option hover events when the user has just pressed a key
+      _this.blockOptionHover = true;
+      switch (event.key) {
+        case 'ArrowLeft':
+          if (!isMulti || inputValue) {
+            return;
+          }
+          _this.focusValue('previous');
+          break;
+        case 'ArrowRight':
+          if (!isMulti || inputValue) {
+            return;
+          }
+          _this.focusValue('next');
+          break;
+        case 'Delete':
+        case 'Backspace':
+          if (inputValue) {
+            return;
+          }
+          if (focusedValue) {
+            _this.removeValue(focusedValue);
+          } else {
+            if (!backspaceRemovesValue) {
+              return;
+            }
+            if (isMulti) {
+              _this.popValue();
+            } else if (isClearable) {
+              _this.clearValue();
+            }
+          }
+          break;
+        case 'Tab':
+          if (_this.isComposing) {
+            return;
+          }
+          if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption ||
+          // don't capture the event if the menu opens on focus and the focused
+          // option is already selected; it breaks the flow of navigation
+          openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) {
+            return;
+          }
+          _this.selectOption(focusedOption);
+          break;
+        case 'Enter':
+          if (event.keyCode === 229) {
+            // ignore the keydown event from an Input Method Editor(IME)
+            // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
+            break;
+          }
+          if (menuIsOpen) {
+            if (!focusedOption) {
+              return;
+            }
+            if (_this.isComposing) {
+              return;
+            }
+            _this.selectOption(focusedOption);
+            break;
+          }
+          return;
+        case 'Escape':
+          if (menuIsOpen) {
+            _this.setState({
+              inputIsHiddenAfterUpdate: false
+            });
+            _this.onInputChange('', {
+              action: 'menu-close',
+              prevInputValue: inputValue
+            });
+            _this.onMenuClose();
+          } else if (isClearable && escapeClearsValue) {
+            _this.clearValue();
+          }
+          break;
+        case ' ':
+          // space
+          if (inputValue) {
+            return;
+          }
+          if (!menuIsOpen) {
+            _this.openMenu('first');
+            break;
+          }
+          if (!focusedOption) {
+            return;
+          }
+          _this.selectOption(focusedOption);
+          break;
+        case 'ArrowUp':
+          if (menuIsOpen) {
+            _this.focusOption('up');
+          } else {
+            _this.openMenu('last');
+          }
+          break;
+        case 'ArrowDown':
+          if (menuIsOpen) {
+            _this.focusOption('down');
+          } else {
+            _this.openMenu('first');
+          }
+          break;
+        case 'PageUp':
+          if (!menuIsOpen) {
+            return;
+          }
+          _this.focusOption('pageup');
+          break;
+        case 'PageDown':
+          if (!menuIsOpen) {
+            return;
+          }
+          _this.focusOption('pagedown');
+          break;
+        case 'Home':
+          if (!menuIsOpen) {
+            return;
+          }
+          _this.focusOption('first');
+          break;
+        case 'End':
+          if (!menuIsOpen) {
+            return;
+          }
+          _this.focusOption('last');
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+    });
+    _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
+    //@ts-ignore
+    _this.state.selectValue = cleanValue(_props.value);
+    // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
+    if (_props.menuIsOpen && _this.state.selectValue.length) {
+      var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
+      var focusableOptions = _this.buildFocusableOptions();
+      var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
+      _this.state.focusableOptionsWithIds = focusableOptionsWithIds;
+      _this.state.focusedOption = focusableOptions[optionIndex];
+      _this.state.focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusableOptions[optionIndex]);
+    }
+    return _this;
+  }
+  _createClass(Select, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.startListeningComposition();
+      this.startListeningToTouch();
+      if (this.props.closeMenuOnScroll && document && document.addEventListener) {
+        // Listen to all scroll events, and filter them out inside of 'onScroll'
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.addEventListener('scroll', this.onScroll, true);
+      }
+      if (this.props.autoFocus) {
+        this.focusInput();
+      }
+
+      // Scroll focusedOption into view if menuIsOpen is set on mount (e.g. defaultMenuIsOpen)
+      if (this.props.menuIsOpen && this.state.focusedOption && this.menuListRef && this.focusedOptionRef) {
+        scrollIntoView(this.menuListRef, this.focusedOptionRef);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props6 = this.props,
+        isDisabled = _this$props6.isDisabled,
+        menuIsOpen = _this$props6.menuIsOpen;
+      var isFocused = this.state.isFocused;
+      if (
+      // ensure focus is restored correctly when the control becomes enabled
+      isFocused && !isDisabled && prevProps.isDisabled ||
+      // ensure focus is on the Input when the menu opens
+      isFocused && menuIsOpen && !prevProps.menuIsOpen) {
+        this.focusInput();
+      }
+      if (isFocused && isDisabled && !prevProps.isDisabled) {
+        // ensure select state gets blurred in case Select is programmatically disabled while focused
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          isFocused: false
+        }, this.onMenuClose);
+      } else if (!isFocused && !isDisabled && prevProps.isDisabled && this.inputRef === document.activeElement) {
+        // ensure select state gets focused in case Select is programatically re-enabled while focused (Firefox)
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          isFocused: true
+        });
+      }
+
+      // scroll the focused option into view if necessary
+      if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) {
+        scrollIntoView(this.menuListRef, this.focusedOptionRef);
+        this.scrollToFocusedOptionOnUpdate = false;
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.stopListeningComposition();
+      this.stopListeningToTouch();
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      document.removeEventListener('scroll', this.onScroll, true);
+    }
+
+    // ==============================
+    // Consumer Handlers
+    // ==============================
+  }, {
+    key: "onMenuOpen",
+    value: function onMenuOpen() {
+      this.props.onMenuOpen();
+    }
+  }, {
+    key: "onMenuClose",
+    value: function onMenuClose() {
+      this.onInputChange('', {
+        action: 'menu-close',
+        prevInputValue: this.props.inputValue
+      });
+      this.props.onMenuClose();
+    }
+  }, {
+    key: "onInputChange",
+    value: function onInputChange(newValue, actionMeta) {
+      this.props.onInputChange(newValue, actionMeta);
+    }
+
+    // ==============================
+    // Methods
+    // ==============================
+  }, {
+    key: "focusInput",
+    value: function focusInput() {
+      if (!this.inputRef) {
+        return;
+      }
+      this.inputRef.focus();
+    }
+  }, {
+    key: "blurInput",
+    value: function blurInput() {
+      if (!this.inputRef) {
+        return;
+      }
+      this.inputRef.blur();
+    }
+  }, {
+    key: "openMenu",
+    value: function openMenu(focusOption) {
+      var _this2 = this;
+      var _this$state2 = this.state,
+        selectValue = _this$state2.selectValue,
+        isFocused = _this$state2.isFocused;
+      var focusableOptions = this.buildFocusableOptions();
+      var openAtIndex = focusOption === 'first' ? 0 : focusableOptions.length - 1;
+      if (!this.props.isMulti) {
+        var selectedIndex = focusableOptions.indexOf(selectValue[0]);
+        if (selectedIndex > -1) {
+          openAtIndex = selectedIndex;
+        }
+      }
+
+      // only scroll if the menu isn't already open
+      this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);
+      this.setState({
+        inputIsHiddenAfterUpdate: false,
+        focusedValue: null,
+        focusedOption: focusableOptions[openAtIndex],
+        focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex])
+      }, function () {
+        return _this2.onMenuOpen();
+      });
+    }
+  }, {
+    key: "focusValue",
+    value: function focusValue(direction) {
+      var _this$state3 = this.state,
+        selectValue = _this$state3.selectValue,
+        focusedValue = _this$state3.focusedValue;
+
+      // Only multiselects support value focusing
+      if (!this.props.isMulti) {
+        return;
+      }
+      this.setState({
+        focusedOption: null
+      });
+      var focusedIndex = selectValue.indexOf(focusedValue);
+      if (!focusedValue) {
+        focusedIndex = -1;
+      }
+      var lastIndex = selectValue.length - 1;
+      var nextFocus = -1;
+      if (!selectValue.length) {
+        return;
+      }
+      switch (direction) {
+        case 'previous':
+          if (focusedIndex === 0) {
+            // don't cycle from the start to the end
+            nextFocus = 0;
+          } else if (focusedIndex === -1) {
+            // if nothing is focused, focus the last value first
+            nextFocus = lastIndex;
+          } else {
+            nextFocus = focusedIndex - 1;
+          }
+          break;
+        case 'next':
+          if (focusedIndex > -1 && focusedIndex < lastIndex) {
+            nextFocus = focusedIndex + 1;
+          }
+          break;
+      }
+      this.setState({
+        inputIsHidden: nextFocus !== -1,
+        focusedValue: selectValue[nextFocus]
+      });
+    }
+  }, {
+    key: "focusOption",
+    value: function focusOption() {
+      var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first';
+      var pageSize = this.props.pageSize;
+      var focusedOption = this.state.focusedOption;
+      var options = this.getFocusableOptions();
+      if (!options.length) {
+        return;
+      }
+      var nextFocus = 0; // handles 'first'
+      var focusedIndex = options.indexOf(focusedOption);
+      if (!focusedOption) {
+        focusedIndex = -1;
+      }
+      if (direction === 'up') {
+        nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1;
+      } else if (direction === 'down') {
+        nextFocus = (focusedIndex + 1) % options.length;
+      } else if (direction === 'pageup') {
+        nextFocus = focusedIndex - pageSize;
+        if (nextFocus < 0) {
+          nextFocus = 0;
+        }
+      } else if (direction === 'pagedown') {
+        nextFocus = focusedIndex + pageSize;
+        if (nextFocus > options.length - 1) {
+          nextFocus = options.length - 1;
+        }
+      } else if (direction === 'last') {
+        nextFocus = options.length - 1;
+      }
+      this.scrollToFocusedOptionOnUpdate = true;
+      this.setState({
+        focusedOption: options[nextFocus],
+        focusedValue: null,
+        focusedOptionId: this.getFocusedOptionId(options[nextFocus])
+      });
+    }
+  }, {
+    key: "getTheme",
+    value:
+    // ==============================
+    // Getters
+    // ==============================
+
+    function getTheme() {
+      // Use the default theme if there are no customisations.
+      if (!this.props.theme) {
+        return defaultTheme;
+      }
+      // If the theme prop is a function, assume the function
+      // knows how to merge the passed-in default theme with
+      // its own modifications.
+      if (typeof this.props.theme === 'function') {
+        return this.props.theme(defaultTheme);
+      }
+      // Otherwise, if a plain theme object was passed in,
+      // overlay it with the default theme.
+      return _objectSpread(_objectSpread({}, defaultTheme), this.props.theme);
+    }
+  }, {
+    key: "getCommonProps",
+    value: function getCommonProps() {
+      var clearValue = this.clearValue,
+        cx = this.cx,
+        getStyles = this.getStyles,
+        getClassNames = this.getClassNames,
+        getValue = this.getValue,
+        selectOption = this.selectOption,
+        setValue = this.setValue,
+        props = this.props;
+      var isMulti = props.isMulti,
+        isRtl = props.isRtl,
+        options = props.options;
+      var hasValue = this.hasValue();
+      return {
+        clearValue: clearValue,
+        cx: cx,
+        getStyles: getStyles,
+        getClassNames: getClassNames,
+        getValue: getValue,
+        hasValue: hasValue,
+        isMulti: isMulti,
+        isRtl: isRtl,
+        options: options,
+        selectOption: selectOption,
+        selectProps: props,
+        setValue: setValue,
+        theme: this.getTheme()
+      };
+    }
+  }, {
+    key: "hasValue",
+    value: function hasValue() {
+      var selectValue = this.state.selectValue;
+      return selectValue.length > 0;
+    }
+  }, {
+    key: "hasOptions",
+    value: function hasOptions() {
+      return !!this.getFocusableOptions().length;
+    }
+  }, {
+    key: "isClearable",
+    value: function isClearable() {
+      var _this$props7 = this.props,
+        isClearable = _this$props7.isClearable,
+        isMulti = _this$props7.isMulti;
+
+      // single select, by default, IS NOT clearable
+      // multi select, by default, IS clearable
+      if (isClearable === undefined) {
+        return isMulti;
+      }
+      return isClearable;
+    }
+  }, {
+    key: "isOptionDisabled",
+    value: function isOptionDisabled(option, selectValue) {
+      return _isOptionDisabled(this.props, option, selectValue);
+    }
+  }, {
+    key: "isOptionSelected",
+    value: function isOptionSelected(option, selectValue) {
+      return _isOptionSelected(this.props, option, selectValue);
+    }
+  }, {
+    key: "filterOption",
+    value: function filterOption(option, inputValue) {
+      return _filterOption(this.props, option, inputValue);
+    }
+  }, {
+    key: "formatOptionLabel",
+    value: function formatOptionLabel(data, context) {
+      if (typeof this.props.formatOptionLabel === 'function') {
+        var _inputValue = this.props.inputValue;
+        var _selectValue = this.state.selectValue;
+        return this.props.formatOptionLabel(data, {
+          context: context,
+          inputValue: _inputValue,
+          selectValue: _selectValue
+        });
+      } else {
+        return this.getOptionLabel(data);
+      }
+    }
+  }, {
+    key: "formatGroupLabel",
+    value: function formatGroupLabel(data) {
+      return this.props.formatGroupLabel(data);
+    }
+  }, {
+    key: "startListeningComposition",
+    value:
+    // ==============================
+    // Composition Handlers
+    // ==============================
+
+    function startListeningComposition() {
+      if (document && document.addEventListener) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.addEventListener('compositionstart', this.onCompositionStart, false);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.addEventListener('compositionend', this.onCompositionEnd, false);
+      }
+    }
+  }, {
+    key: "stopListeningComposition",
+    value: function stopListeningComposition() {
+      if (document && document.removeEventListener) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.removeEventListener('compositionstart', this.onCompositionStart);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.removeEventListener('compositionend', this.onCompositionEnd);
+      }
+    }
+  }, {
+    key: "startListeningToTouch",
+    value:
+    // ==============================
+    // Touch Handlers
+    // ==============================
+
+    function startListeningToTouch() {
+      if (document && document.addEventListener) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.addEventListener('touchstart', this.onTouchStart, false);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.addEventListener('touchmove', this.onTouchMove, false);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.addEventListener('touchend', this.onTouchEnd, false);
+      }
+    }
+  }, {
+    key: "stopListeningToTouch",
+    value: function stopListeningToTouch() {
+      if (document && document.removeEventListener) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.removeEventListener('touchstart', this.onTouchStart);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.removeEventListener('touchmove', this.onTouchMove);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.removeEventListener('touchend', this.onTouchEnd);
+      }
+    }
+  }, {
+    key: "renderInput",
+    value:
+    // ==============================
+    // Renderers
+    // ==============================
+    function renderInput() {
+      var _this$props8 = this.props,
+        isDisabled = _this$props8.isDisabled,
+        isSearchable = _this$props8.isSearchable,
+        inputId = _this$props8.inputId,
+        inputValue = _this$props8.inputValue,
+        tabIndex = _this$props8.tabIndex,
+        form = _this$props8.form,
+        menuIsOpen = _this$props8.menuIsOpen,
+        required = _this$props8.required;
+      var _this$getComponents = this.getComponents(),
+        Input = _this$getComponents.Input;
+      var _this$state4 = this.state,
+        inputIsHidden = _this$state4.inputIsHidden,
+        ariaSelection = _this$state4.ariaSelection;
+      var commonProps = this.commonProps;
+      var id = inputId || this.getElementId('input');
+
+      // aria attributes makes the JSX "noisy", separated for clarity
+      var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
+        'aria-autocomplete': 'list',
+        'aria-expanded': menuIsOpen,
+        'aria-haspopup': 'listbox',
+        'aria-errormessage': this.props['aria-errormessage'],
+        'aria-describedby': this.props['aria-describedby'],
+        'aria-invalid': this.props['aria-invalid'],
+        'aria-label': this.props['aria-label'],
+        'aria-labelledby': this.props['aria-labelledby'],
+        'aria-required': required,
+        role: 'combobox',
+        'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
+      }, menuIsOpen && {
+        'aria-controls': this.getElementId('listbox')
+      }), !isSearchable && {
+        'aria-readonly': true
+      }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
+        'aria-describedby': this.getElementId('live-region')
+      } : {
+        'aria-describedby': this.getElementId('placeholder')
+      });
+      if (!isSearchable) {
+        // use a dummy input to maintain focus/blur functionality
+        return (
+          /*#__PURE__*/
+          //@ts-ignore
+          React.createElement(DummyInput, _extends({
+            id: id,
+            innerRef: this.getInputRef,
+            onBlur: this.onInputBlur,
+            onChange: noop,
+            onFocus: this.onInputFocus,
+            disabled: isDisabled,
+            tabIndex: tabIndex,
+            inputMode: "none",
+            form: form,
+            value: ""
+          }, ariaAttributes))
+        );
+      }
+      return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
+        autoCapitalize: "none",
+        autoComplete: "off",
+        autoCorrect: "off",
+        id: id,
+        innerRef: this.getInputRef,
+        isDisabled: isDisabled,
+        isHidden: inputIsHidden,
+        onBlur: this.onInputBlur,
+        onChange: this.handleInputChange,
+        onFocus: this.onInputFocus,
+        spellCheck: "false",
+        tabIndex: tabIndex,
+        form: form,
+        type: "text",
+        value: inputValue
+      }, ariaAttributes));
+    }
+  }, {
+    key: "renderPlaceholderOrValue",
+    value: function renderPlaceholderOrValue() {
+      var _this3 = this;
+      var _this$getComponents2 = this.getComponents(),
+        MultiValue = _this$getComponents2.MultiValue,
+        MultiValueContainer = _this$getComponents2.MultiValueContainer,
+        MultiValueLabel = _this$getComponents2.MultiValueLabel,
+        MultiValueRemove = _this$getComponents2.MultiValueRemove,
+        SingleValue = _this$getComponents2.SingleValue,
+        Placeholder = _this$getComponents2.Placeholder;
+      var commonProps = this.commonProps;
+      var _this$props9 = this.props,
+        controlShouldRenderValue = _this$props9.controlShouldRenderValue,
+        isDisabled = _this$props9.isDisabled,
+        isMulti = _this$props9.isMulti,
+        inputValue = _this$props9.inputValue,
+        placeholder = _this$props9.placeholder;
+      var _this$state5 = this.state,
+        selectValue = _this$state5.selectValue,
+        focusedValue = _this$state5.focusedValue,
+        isFocused = _this$state5.isFocused;
+      if (!this.hasValue() || !controlShouldRenderValue) {
+        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends({}, commonProps, {
+          key: "placeholder",
+          isDisabled: isDisabled,
+          isFocused: isFocused,
+          innerProps: {
+            id: this.getElementId('placeholder')
+          }
+        }), placeholder);
+      }
+      if (isMulti) {
+        return selectValue.map(function (opt, index) {
+          var isOptionFocused = opt === focusedValue;
+          var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
+          return /*#__PURE__*/React.createElement(MultiValue, _extends({}, commonProps, {
+            components: {
+              Container: MultiValueContainer,
+              Label: MultiValueLabel,
+              Remove: MultiValueRemove
+            },
+            isFocused: isOptionFocused,
+            isDisabled: isDisabled,
+            key: key,
+            index: index,
+            removeProps: {
+              onClick: function onClick() {
+                return _this3.removeValue(opt);
+              },
+              onTouchEnd: function onTouchEnd() {
+                return _this3.removeValue(opt);
+              },
+              onMouseDown: function onMouseDown(e) {
+                e.preventDefault();
+              }
+            },
+            data: opt
+          }), _this3.formatOptionLabel(opt, 'value'));
+        });
+      }
+      if (inputValue) {
+        return null;
+      }
+      var singleValue = selectValue[0];
+      return /*#__PURE__*/React.createElement(SingleValue, _extends({}, commonProps, {
+        data: singleValue,
+        isDisabled: isDisabled
+      }), this.formatOptionLabel(singleValue, 'value'));
+    }
+  }, {
+    key: "renderClearIndicator",
+    value: function renderClearIndicator() {
+      var _this$getComponents3 = this.getComponents(),
+        ClearIndicator = _this$getComponents3.ClearIndicator;
+      var commonProps = this.commonProps;
+      var _this$props10 = this.props,
+        isDisabled = _this$props10.isDisabled,
+        isLoading = _this$props10.isLoading;
+      var isFocused = this.state.isFocused;
+      if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
+        return null;
+      }
+      var innerProps = {
+        onMouseDown: this.onClearIndicatorMouseDown,
+        onTouchEnd: this.onClearIndicatorTouchEnd,
+        'aria-hidden': 'true'
+      };
+      return /*#__PURE__*/React.createElement(ClearIndicator, _extends({}, commonProps, {
+        innerProps: innerProps,
+        isFocused: isFocused
+      }));
+    }
+  }, {
+    key: "renderLoadingIndicator",
+    value: function renderLoadingIndicator() {
+      var _this$getComponents4 = this.getComponents(),
+        LoadingIndicator = _this$getComponents4.LoadingIndicator;
+      var commonProps = this.commonProps;
+      var _this$props11 = this.props,
+        isDisabled = _this$props11.isDisabled,
+        isLoading = _this$props11.isLoading;
+      var isFocused = this.state.isFocused;
+      if (!LoadingIndicator || !isLoading) {
+        return null;
+      }
+      var innerProps = {
+        'aria-hidden': 'true'
+      };
+      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
+        innerProps: innerProps,
+        isDisabled: isDisabled,
+        isFocused: isFocused
+      }));
+    }
+  }, {
+    key: "renderIndicatorSeparator",
+    value: function renderIndicatorSeparator() {
+      var _this$getComponents5 = this.getComponents(),
+        DropdownIndicator = _this$getComponents5.DropdownIndicator,
+        IndicatorSeparator = _this$getComponents5.IndicatorSeparator;
+
+      // separator doesn't make sense without the dropdown indicator
+      if (!DropdownIndicator || !IndicatorSeparator) {
+        return null;
+      }
+      var commonProps = this.commonProps;
+      var isDisabled = this.props.isDisabled;
+      var isFocused = this.state.isFocused;
+      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends({}, commonProps, {
+        isDisabled: isDisabled,
+        isFocused: isFocused
+      }));
+    }
+  }, {
+    key: "renderDropdownIndicator",
+    value: function renderDropdownIndicator() {
+      var _this$getComponents6 = this.getComponents(),
+        DropdownIndicator = _this$getComponents6.DropdownIndicator;
+      if (!DropdownIndicator) {
+        return null;
+      }
+      var commonProps = this.commonProps;
+      var isDisabled = this.props.isDisabled;
+      var isFocused = this.state.isFocused;
+      var innerProps = {
+        onMouseDown: this.onDropdownIndicatorMouseDown,
+        onTouchEnd: this.onDropdownIndicatorTouchEnd,
+        'aria-hidden': 'true'
+      };
+      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
+        innerProps: innerProps,
+        isDisabled: isDisabled,
+        isFocused: isFocused
+      }));
+    }
+  }, {
+    key: "renderMenu",
+    value: function renderMenu() {
+      var _this4 = this;
+      var _this$getComponents7 = this.getComponents(),
+        Group = _this$getComponents7.Group,
+        GroupHeading = _this$getComponents7.GroupHeading,
+        Menu = _this$getComponents7.Menu,
+        MenuList = _this$getComponents7.MenuList,
+        MenuPortal = _this$getComponents7.MenuPortal,
+        LoadingMessage = _this$getComponents7.LoadingMessage,
+        NoOptionsMessage = _this$getComponents7.NoOptionsMessage,
+        Option = _this$getComponents7.Option;
+      var commonProps = this.commonProps;
+      var focusedOption = this.state.focusedOption;
+      var _this$props12 = this.props,
+        captureMenuScroll = _this$props12.captureMenuScroll,
+        inputValue = _this$props12.inputValue,
+        isLoading = _this$props12.isLoading,
+        loadingMessage = _this$props12.loadingMessage,
+        minMenuHeight = _this$props12.minMenuHeight,
+        maxMenuHeight = _this$props12.maxMenuHeight,
+        menuIsOpen = _this$props12.menuIsOpen,
+        menuPlacement = _this$props12.menuPlacement,
+        menuPosition = _this$props12.menuPosition,
+        menuPortalTarget = _this$props12.menuPortalTarget,
+        menuShouldBlockScroll = _this$props12.menuShouldBlockScroll,
+        menuShouldScrollIntoView = _this$props12.menuShouldScrollIntoView,
+        noOptionsMessage = _this$props12.noOptionsMessage,
+        onMenuScrollToTop = _this$props12.onMenuScrollToTop,
+        onMenuScrollToBottom = _this$props12.onMenuScrollToBottom;
+      if (!menuIsOpen) {
+        return null;
+      }
+
+      // TODO: Internal Option Type here
+      var render = function render(props, id) {
+        var type = props.type,
+          data = props.data,
+          isDisabled = props.isDisabled,
+          isSelected = props.isSelected,
+          label = props.label,
+          value = props.value;
+        var isFocused = focusedOption === data;
+        var onHover = isDisabled ? undefined : function () {
+          return _this4.onOptionHover(data);
+        };
+        var onSelect = isDisabled ? undefined : function () {
+          return _this4.selectOption(data);
+        };
+        var optionId = "".concat(_this4.getElementId('option'), "-").concat(id);
+        var innerProps = {
+          id: optionId,
+          onClick: onSelect,
+          onMouseMove: onHover,
+          onMouseOver: onHover,
+          role: 'option',
+          'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
+        };
+        return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
+          innerProps: innerProps,
+          data: data,
+          isDisabled: isDisabled,
+          isSelected: isSelected,
+          key: optionId,
+          label: label,
+          type: type,
+          value: value,
+          isFocused: isFocused,
+          innerRef: isFocused ? _this4.getFocusedOptionRef : undefined
+        }), _this4.formatOptionLabel(props.data, 'menu'));
+      };
+      var menuUI;
+      if (this.hasOptions()) {
+        menuUI = this.getCategorizedOptions().map(function (item) {
+          if (item.type === 'group') {
+            var _data = item.data,
+              options = item.options,
+              groupIndex = item.index;
+            var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
+            var headingId = "".concat(groupId, "-heading");
+            return /*#__PURE__*/React.createElement(Group, _extends({}, commonProps, {
+              key: groupId,
+              data: _data,
+              options: options,
+              Heading: GroupHeading,
+              headingProps: {
+                id: headingId,
+                data: item.data
+              },
+              label: _this4.formatGroupLabel(item.data)
+            }), item.options.map(function (option) {
+              return render(option, "".concat(groupIndex, "-").concat(option.index));
+            }));
+          } else if (item.type === 'option') {
+            return render(item, "".concat(item.index));
+          }
+        });
+      } else if (isLoading) {
+        var message = loadingMessage({
+          inputValue: inputValue
+        });
+        if (message === null) {
+          return null;
+        }
+        menuUI = /*#__PURE__*/React.createElement(LoadingMessage, commonProps, message);
+      } else {
+        var _message = noOptionsMessage({
+          inputValue: inputValue
+        });
+        if (_message === null) {
+          return null;
+        }
+        menuUI = /*#__PURE__*/React.createElement(NoOptionsMessage, commonProps, _message);
+      }
+      var menuPlacementProps = {
+        minMenuHeight: minMenuHeight,
+        maxMenuHeight: maxMenuHeight,
+        menuPlacement: menuPlacement,
+        menuPosition: menuPosition,
+        menuShouldScrollIntoView: menuShouldScrollIntoView
+      };
+      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
+        var ref = _ref4.ref,
+          _ref4$placerProps = _ref4.placerProps,
+          placement = _ref4$placerProps.placement,
+          maxHeight = _ref4$placerProps.maxHeight;
+        return /*#__PURE__*/React.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
+          innerRef: ref,
+          innerProps: {
+            onMouseDown: _this4.onMenuMouseDown,
+            onMouseMove: _this4.onMenuMouseMove
+          },
+          isLoading: isLoading,
+          placement: placement
+        }), /*#__PURE__*/React.createElement(ScrollManager, {
+          captureEnabled: captureMenuScroll,
+          onTopArrive: onMenuScrollToTop,
+          onBottomArrive: onMenuScrollToBottom,
+          lockEnabled: menuShouldBlockScroll
+        }, function (scrollTargetRef) {
+          return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
+            innerRef: function innerRef(instance) {
+              _this4.getMenuListRef(instance);
+              scrollTargetRef(instance);
+            },
+            innerProps: {
+              role: 'listbox',
+              'aria-multiselectable': commonProps.isMulti,
+              id: _this4.getElementId('listbox')
+            },
+            isLoading: isLoading,
+            maxHeight: maxHeight,
+            focusedOption: focusedOption
+          }), menuUI);
+        }));
+      });
+
+      // positioning behaviour is almost identical for portalled and fixed,
+      // so we use the same component. the actual portalling logic is forked
+      // within the component based on `menuPosition`
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends({}, commonProps, {
+        appendTo: menuPortalTarget,
+        controlElement: this.controlRef,
+        menuPlacement: menuPlacement,
+        menuPosition: menuPosition
+      }), menuElement) : menuElement;
+    }
+  }, {
+    key: "renderFormField",
+    value: function renderFormField() {
+      var _this5 = this;
+      var _this$props13 = this.props,
+        delimiter = _this$props13.delimiter,
+        isDisabled = _this$props13.isDisabled,
+        isMulti = _this$props13.isMulti,
+        name = _this$props13.name,
+        required = _this$props13.required;
+      var selectValue = this.state.selectValue;
+      if (required && !this.hasValue() && !isDisabled) {
+        return /*#__PURE__*/React.createElement(RequiredInput, {
+          name: name,
+          onFocus: this.onValueInputFocus
+        });
+      }
+      if (!name || isDisabled) {
+        return;
+      }
+      if (isMulti) {
+        if (delimiter) {
+          var value = selectValue.map(function (opt) {
+            return _this5.getOptionValue(opt);
+          }).join(delimiter);
+          return /*#__PURE__*/React.createElement("input", {
+            name: name,
+            type: "hidden",
+            value: value
+          });
+        } else {
+          var input = selectValue.length > 0 ? selectValue.map(function (opt, i) {
+            return /*#__PURE__*/React.createElement("input", {
+              key: "i-".concat(i),
+              name: name,
+              type: "hidden",
+              value: _this5.getOptionValue(opt)
+            });
+          }) : /*#__PURE__*/React.createElement("input", {
+            name: name,
+            type: "hidden",
+            value: ""
+          });
+          return /*#__PURE__*/React.createElement("div", null, input);
+        }
+      } else {
+        var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';
+        return /*#__PURE__*/React.createElement("input", {
+          name: name,
+          type: "hidden",
+          value: _value
+        });
+      }
+    }
+  }, {
+    key: "renderLiveRegion",
+    value: function renderLiveRegion() {
+      var commonProps = this.commonProps;
+      var _this$state6 = this.state,
+        ariaSelection = _this$state6.ariaSelection,
+        focusedOption = _this$state6.focusedOption,
+        focusedValue = _this$state6.focusedValue,
+        isFocused = _this$state6.isFocused,
+        selectValue = _this$state6.selectValue;
+      var focusableOptions = this.getFocusableOptions();
+      return /*#__PURE__*/React.createElement(LiveRegion, _extends({}, commonProps, {
+        id: this.getElementId('live-region'),
+        ariaSelection: ariaSelection,
+        focusedOption: focusedOption,
+        focusedValue: focusedValue,
+        isFocused: isFocused,
+        selectValue: selectValue,
+        focusableOptions: focusableOptions,
+        isAppleDevice: this.isAppleDevice
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$getComponents8 = this.getComponents(),
+        Control = _this$getComponents8.Control,
+        IndicatorsContainer = _this$getComponents8.IndicatorsContainer,
+        SelectContainer = _this$getComponents8.SelectContainer,
+        ValueContainer = _this$getComponents8.ValueContainer;
+      var _this$props14 = this.props,
+        className = _this$props14.className,
+        id = _this$props14.id,
+        isDisabled = _this$props14.isDisabled,
+        menuIsOpen = _this$props14.menuIsOpen;
+      var isFocused = this.state.isFocused;
+      var commonProps = this.commonProps = this.getCommonProps();
+      return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        className: className,
+        innerProps: {
+          id: id,
+          onKeyDown: this.onKeyDown
+        },
+        isDisabled: isDisabled,
+        isFocused: isFocused
+      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
+        innerRef: this.getControlRef,
+        innerProps: {
+          onMouseDown: this.onControlMouseDown,
+          onTouchEnd: this.onControlTouchEnd
+        },
+        isDisabled: isDisabled,
+        isFocused: isFocused,
+        menuIsOpen: menuIsOpen
+      }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
+        isDisabled: isDisabled
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
+        isDisabled: isDisabled
+      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var prevProps = state.prevProps,
+        clearFocusValueOnUpdate = state.clearFocusValueOnUpdate,
+        inputIsHiddenAfterUpdate = state.inputIsHiddenAfterUpdate,
+        ariaSelection = state.ariaSelection,
+        isFocused = state.isFocused,
+        prevWasFocused = state.prevWasFocused,
+        instancePrefix = state.instancePrefix;
+      var options = props.options,
+        value = props.value,
+        menuIsOpen = props.menuIsOpen,
+        inputValue = props.inputValue,
+        isMulti = props.isMulti;
+      //@ts-ignore
+      var selectValue = cleanValue(value);
+      var newMenuOptionsState = {};
+      if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
+        var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
+        var focusableOptionsWithIds = menuIsOpen ? buildFocusableOptionsWithIds(buildCategorizedOptions(props, selectValue), "".concat(instancePrefix, "-option")) : [];
+        var focusedValue = clearFocusValueOnUpdate ? getNextFocusedValue(state, selectValue) : null;
+        var focusedOption = getNextFocusedOption(state, focusableOptions);
+        var focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusedOption);
+        newMenuOptionsState = {
+          selectValue: selectValue,
+          focusedOption: focusedOption,
+          focusedOptionId: focusedOptionId,
+          focusableOptionsWithIds: focusableOptionsWithIds,
+          focusedValue: focusedValue,
+          clearFocusValueOnUpdate: false
+        };
+      }
+      // some updates should toggle the state of the input visibility
+      var newInputIsHiddenState = inputIsHiddenAfterUpdate != null && props !== prevProps ? {
+        inputIsHidden: inputIsHiddenAfterUpdate,
+        inputIsHiddenAfterUpdate: undefined
+      } : {};
+      var newAriaSelection = ariaSelection;
+      var hasKeptFocus = isFocused && prevWasFocused;
+      if (isFocused && !hasKeptFocus) {
+        // If `value` or `defaultValue` props are not empty then announce them
+        // when the Select is initially focused
+        newAriaSelection = {
+          value: valueTernary(isMulti, selectValue, selectValue[0] || null),
+          options: selectValue,
+          action: 'initial-input-focus'
+        };
+        hasKeptFocus = !prevWasFocused;
+      }
+
+      // If the 'initial-input-focus' action has been set already
+      // then reset the ariaSelection to null
+      if ((ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus') {
+        newAriaSelection = null;
+      }
+      return _objectSpread(_objectSpread(_objectSpread({}, newMenuOptionsState), newInputIsHiddenState), {}, {
+        prevProps: props,
+        ariaSelection: newAriaSelection,
+        prevWasFocused: hasKeptFocus
+      });
+    }
+  }]);
+  return Select;
+}(Component);
+_defineProperty(Select, "defaultProps", defaultProps);
+export { Select as default };