baseui 13.0.0 → 15.0.0

package/select/select-component.js

@@ -1,1304 +1,993 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.isInteractive = isInteractive;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _overrides = require("../helpers/overrides");
-
 var _deleteAlt = _interopRequireDefault(require("../icon/delete-alt"));
-
 var _triangleDown = _interopRequireDefault(require("../icon/triangle-down"));
-
 var _search = _interopRequireDefault(require("../icon/search"));
-
 var _locale = require("../locale");
-
 var _popover = require("../popover");
-
 var _reactUid = require("react-uid");
-
 var _autosizeInput = _interopRequireDefault(require("./autosize-input"));
-
 var _constants = require("./constants");
-
 var _defaultProps = _interopRequireDefault(require("./default-props"));
-
 var _dropdown = _interopRequireDefault(require("./dropdown"));
-
 var _styledComponents = require("./styled-components");
-
 var _utils = require("./utils");
-
-var _excluded = ["$size"],
-    _excluded2 = ["$size"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
 // @ts-ignore
 function Noop() {
   return null;
-} // @ts-ignore
-
-
-var isClick = function isClick(event) {
-  return event.type === 'click';
-}; // @ts-ignore
-
-
-var isLeftClick = function isLeftClick(event) {
-  return event.button !== null && event.button !== undefined && event.button === 0;
-}; // @ts-ignore
+}
 
+// @ts-ignore
+const isClick = event => event.type === 'click';
+// @ts-ignore
+const isLeftClick = event => event.button !== null && event.button !== undefined && event.button === 0;
 
-var containsNode = function containsNode(parent, child) {
+// @ts-ignore
+const containsNode = (parent, child) => {
   if (typeof document !== 'undefined') {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return child && parent && parent.contains(child);
   }
 };
-
 function isInteractive(rootTarget, rootElement) {
   if (rootTarget instanceof Element) {
-    var target = rootTarget;
-
+    let target = rootTarget;
     while (target && target !== rootElement) {
-      var role = target.getAttribute('role');
-
+      const role = target.getAttribute('role');
       if (role === 'button' || role === 'link') {
         return true;
       }
-
       if (target.tagName) target = target.parentElement;
     }
   }
-
   return false;
 }
-
-var Select = /*#__PURE__*/function (_React$Component) {
-  _inherits(Select, _React$Component);
-
-  var _super = _createSuper(Select);
-
-  // anchor is a ref that refers to the outermost element rendered when the dropdown menu is not
-  // open. This is required so that we can check if clicks are on/off the anchor element.
-  // dropdown is a ref that refers to the popover element. This is required so that we can check if
-  // clicks are on/off the dropdown element.
-  // dragging is a flag to track whether a mobile device is currently scrolling versus clicking.
-  // @ts-ignore
-  // focusAfterClear is a flag to indicate that the dropdowm menu should open after a selected
-  // option has been cleared.
-  // @ts-ignore
-  // openAfterFocus is a flag to indicate that the dropdown menu should open when the component is
-  // focused. Developers have the option to disable initial clicks opening the dropdown menu. If not
-  // disabled, clicks will set this flag to true. Upon focusing, look to this to see if the menu should
-  // be opened, or only focus.
-  // @ts-ignore
-  // When an item is selected, it also triggers handleClickOutside and since the selected item is
-  // already out of the menu (DOM), it will not recognize it as a subnode and triggers handleBlur
-  // that sets isOpen to false. That's a faulty logic causing visible problems when
-  // closeOnSelect is false. This flag helps to detect that selection was just made.
-  // @ts-ignore
-  // the select components can accept an array of options or an object where properties are optgroups
-  // and values are arrays of options. this class property is constructed and updated in a normalized
-  // shape where optgroup titles are stored on the option in the __optgroup field.
-  function Select(props) {
-    var _this;
-
-    _classCallCheck(this, Select);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "anchor", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "dropdown", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "input", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "dragging", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "focusAfterClear", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "openAfterFocus", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "justSelected", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "options", []);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+class Select extends React.Component {
+  constructor(props) {
+    super(props);
+    // anchor is a ref that refers to the outermost element rendered when the dropdown menu is not
+    // open. This is required so that we can check if clicks are on/off the anchor element.
+    _defineProperty(this, "anchor", /*#__PURE__*/React.createRef());
+    // dropdown is a ref that refers to the popover element. This is required so that we can check if
+    // clicks are on/off the dropdown element.
+    _defineProperty(this, "dropdown", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "input", void 0);
+    // dragging is a flag to track whether a mobile device is currently scrolling versus clicking.
+    // @ts-ignore
+    _defineProperty(this, "dragging", void 0);
+    // focusAfterClear is a flag to indicate that the dropdowm menu should open after a selected
+    // option has been cleared.
+    // @ts-ignore
+    _defineProperty(this, "focusAfterClear", void 0);
+    // openAfterFocus is a flag to indicate that the dropdown menu should open when the component is
+    // focused. Developers have the option to disable initial clicks opening the dropdown menu. If not
+    // disabled, clicks will set this flag to true. Upon focusing, look to this to see if the menu should
+    // be opened, or only focus.
+    // @ts-ignore
+    _defineProperty(this, "openAfterFocus", void 0);
+    // When an item is selected, it also triggers handleClickOutside and since the selected item is
+    // already out of the menu (DOM), it will not recognize it as a subnode and triggers handleBlur
+    // that sets isOpen to false. That's a faulty logic causing visible problems when
+    // closeOnSelect is false. This flag helps to detect that selection was just made.
+    // @ts-ignore
+    _defineProperty(this, "justSelected", void 0);
+    // the select components can accept an array of options or an object where properties are optgroups
+    // and values are arrays of options. this class property is constructed and updated in a normalized
+    // shape where optgroup titles are stored on the option in the __optgroup field.
+    _defineProperty(this, "options", []);
+    // @ts-ignore
+    _defineProperty(this, "state", {
       // @ts-ignore
       activeDescendant: null,
       inputValue: '',
       isFocused: false,
-      isOpen: _this.props.startOpen,
+      isOpen: this.props.startOpen,
       isPseudoFocused: false
     });
-
-    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
-
-    _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
-      if (containsNode(_this.dropdown.current, event.target)) return;
-
-      if (!containsNode(_this.anchor.current, event.target)) {
-        _this.closeMenu();
+    _defineProperty(this, "isItMounted", false);
+    // Handle touch outside on mobile to dismiss menu, ensures that the
+    // touch target is not within the anchor DOM node.
+    _defineProperty(this, "handleTouchOutside", event => {
+      if (containsNode(this.dropdown.current, event.target)) return;
+      if (!containsNode(this.anchor.current, event.target)) {
+        this.closeMenu();
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTouchMove", function () {
-      return _this.dragging = true;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () {
-      return _this.dragging = false;
+    // Track dragging state to filter false-positive actions where a user
+    // intends to drag/scroll the page.
+    _defineProperty(this, "handleTouchMove", () => this.dragging = true);
+    _defineProperty(this, "handleTouchStart", () => this.dragging = false);
+    _defineProperty(this, "handleTouchEnd", event => {
+      if (this.dragging) return;
+      this.handleClick(event);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function (event) {
-      if (_this.dragging) return;
-
-      _this.handleClick(event);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
-      if (_this.props.disabled || !isClick(event) && !isLeftClick(event)) {
+    _defineProperty(this, "handleClick", event => {
+      if (this.props.disabled || !isClick(event) && !isLeftClick(event)) {
         return;
-      } // Case comes up when text has been typed into the input field. If no text provided,
+      }
+
+      // Case comes up when text has been typed into the input field. If no text provided,
       // the 'input' element will have essentially 0 width therefore will not be clickable.
       // When click outside does not reset input, text provided will stay rendered after clicks away
       // from the select component. Upon subsequent clicks on the provided text, open the dropdown
       // menu, in addition to text edit operations.
-
-
-      if (event.target === _this.input) {
+      if (event.target === this.input) {
         // CHASE: not sure why this condition is here. I cannot replicate a situation where clicks
         // on provided text break into here.
-        if (!_this.state.isFocused) {
+        if (!this.state.isFocused) {
           // @ts-ignore
-          _this.openAfterFocus = _this.props.openOnClick;
-
-          _this.focus();
+          this.openAfterFocus = this.props.openOnClick;
+          this.focus();
         }
-
-        if (!_this.state.isOpen) {
-          _this.setState({
+        if (!this.state.isOpen) {
+          this.setState({
             isOpen: true,
             isFocused: true,
             isPseudoFocused: false
           });
         }
-
         return;
-      } // Ensures that interactive elements within the Select component do not trigger the outer click
+      }
+
+      // Ensures that interactive elements within the Select component do not trigger the outer click
       // handler. For example, after an option is selected clicks on the 'clear' icon call here. We
       // should ignore those events. This comes after case where click is on input element, so that
       // those are handled on their own.
       // @ts-ignore
-
-
-      if (_this.input && isInteractive(event.target, _this.input)) {
+      if (this.input && isInteractive(event.target, this.input)) {
         return;
-      } // For the simple case where clicking on the Select does not allow for providing
-      // text input to filter the dropdown options.
-
-
-      if (!_this.props.searchable) {
-        _this.focus();
+      }
 
-        if (_this.state.isOpen) {
-          _this.setState({
+      // For the simple case where clicking on the Select does not allow for providing
+      // text input to filter the dropdown options.
+      if (!this.props.searchable) {
+        this.focus();
+        if (this.state.isOpen) {
+          this.setState({
             isOpen: false,
             isFocused: false
           });
         } else {
-          _this.setState({
+          this.setState({
             isOpen: true,
             isFocused: true
           });
         }
-
         return;
-      } // Cases below only apply to searchable Select component.
-
+      }
 
-      if (_this.state.isFocused) {
+      // Cases below only apply to searchable Select component.
+      if (this.state.isFocused) {
         // iOS ignores programmatic calls to input.focus() that were not triggered by a click event.
         // This component can get into a state where isFocused is true, but the DOM node is not
         // focused. Call focus here again to ensure.
-        _this.focus(); // Case comes up when click outside does not reset input - once text has been provided to
+        this.focus();
+
+        // Case comes up when click outside does not reset input - once text has been provided to
         // the input, and the user closes the dropdown menu the provided text is maintained. After
         // this, if the user focuses back into the select component then clicks on the component,
         // the provided text highlights rather than position's the cursor at the end of the input.
-
-
-        if (_this.input) _this.input.value = '';
-
-        _this.setState(function (prev) {
-          return {
-            isOpen: !_this.focusAfterClear && !prev.isOpen,
-            isPseudoFocused: false
-          };
-        });
-
-        _this.focusAfterClear = false;
+        if (this.input) this.input.value = '';
+        this.setState(prev => ({
+          isOpen: !this.focusAfterClear && !prev.isOpen,
+          isPseudoFocused: false
+        }));
+        this.focusAfterClear = false;
       } else {
         // When clear button is clicked, need to click twice to open control container - https://github.com/uber/baseweb/issues/4285
         // Setting focusAfterClear to false, resolves the issue
-        _this.focusAfterClear = false; // @ts-ignore
-
-        _this.openAfterFocus = _this.props.openOnClick;
-
-        _this.focus();
+        this.focusAfterClear = false;
+        // @ts-ignore
+        this.openAfterFocus = this.props.openOnClick;
+        this.focus();
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleInputFocus", function (event) {
-      if (_this.props.disabled) return;
-      if (_this.props.onFocus) _this.props.onFocus(event);
-      var toOpen = _this.state.isOpen || _this.openAfterFocus; // if focus happens after clear values, don't open dropdown yet.
-
-      toOpen = !_this.focusAfterClear && toOpen;
-
-      _this.setState({
+    _defineProperty(this, "handleInputFocus", event => {
+      if (this.props.disabled) return;
+      if (this.props.onFocus) this.props.onFocus(event);
+      let toOpen = this.state.isOpen || this.openAfterFocus;
+      // if focus happens after clear values, don't open dropdown yet.
+      toOpen = !this.focusAfterClear && toOpen;
+      this.setState({
         isFocused: true,
         isOpen: !!toOpen
       });
-
-      _this.focusAfterClear = false;
-      _this.openAfterFocus = false;
+      this.focusAfterClear = false;
+      this.openAfterFocus = false;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
+    _defineProperty(this, "handleBlur", event => {
       if (event.relatedTarget) {
-        if (containsNode(_this.anchor.current, event.relatedTarget) || containsNode(_this.dropdown.current, event.relatedTarget)) {
+        if (containsNode(this.anchor.current, event.relatedTarget) || containsNode(this.dropdown.current, event.relatedTarget)) {
           return;
         }
-      } else if (containsNode(_this.anchor.current, event.target)) {
+      } else if (containsNode(this.anchor.current, event.target)) {
         return;
       }
-
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
+      if (this.props.onBlur) {
+        this.props.onBlur(event);
       }
-
-      if (_this.isItMounted) {
-        _this.setState({
+      if (this.isItMounted) {
+        this.setState({
           isFocused: false,
           isOpen: false,
           isPseudoFocused: false,
-          inputValue: _this.props.onBlurResetsInput ? '' : _this.state.inputValue
+          inputValue: this.props.onBlurResetsInput ? '' : this.state.inputValue
         });
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (event) {
-      if (_this.justSelected) {
-        _this.justSelected = false;
+    _defineProperty(this, "handleClickOutside", event => {
+      if (this.justSelected) {
+        this.justSelected = false;
         return;
       }
-
-      if (containsNode(_this.dropdown.current, event.target)) return;
-      var isFocused = _this.state.isFocused || _this.state.isPseudoFocused;
-
-      if (isFocused && !containsNode(_this.anchor.current, event.target)) {
-        _this.handleBlur(event);
+      if (containsNode(this.dropdown.current, event.target)) return;
+      const isFocused = this.state.isFocused || this.state.isPseudoFocused;
+      if (isFocused && !containsNode(this.anchor.current, event.target)) {
+        this.handleBlur(event);
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event) {
-      var newInputValue = event.target.value;
-
-      _this.setState({
+    _defineProperty(this, "handleInputChange", event => {
+      let newInputValue = event.target.value;
+      this.setState({
         inputValue: newInputValue,
         isOpen: true,
         isPseudoFocused: false
       });
-
-      if (_this.props.onInputChange) {
-        _this.props.onInputChange(event);
+      if (this.props.onInputChange) {
+        this.props.onInputChange(event);
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      if (_this.props.disabled) return;
-
+    _defineProperty(this, "handleKeyDown", event => {
+      if (this.props.disabled) return;
       switch (event.keyCode) {
         case 8:
           // backspace
-          if (!_this.state.inputValue && _this.props.backspaceRemoves) {
+          if (!this.state.inputValue && this.props.clearable && this.props.backspaceRemoves) {
             event.preventDefault();
-
-            _this.backspaceValue();
+            this.backspaceValue();
           }
-
           break;
-
         case 9:
           // tab
-          _this.setState(function (prevState) {
-            return {
-              isPseudoFocused: false,
-              isFocused: false,
-              isOpen: false,
-              inputValue: !_this.props.onCloseResetsInput || !_this.props.onBlurResetsInput ? prevState.inputValue : ''
-            };
-          });
-
+          this.setState(prevState => ({
+            isPseudoFocused: false,
+            isFocused: false,
+            isOpen: false,
+            inputValue: !this.props.onCloseResetsInput || !this.props.onBlurResetsInput ? prevState.inputValue : ''
+          }));
           break;
-
         case 27:
           // escape
-          if (!_this.state.isOpen && _this.props.clearable && _this.props.escapeClearsValue) {
-            _this.clearValue(event);
-
-            _this.setState({
+          if (!this.state.isOpen && this.props.clearable && this.props.escapeClearsValue) {
+            this.clearValue(event);
+            this.setState({
               isFocused: false,
               isPseudoFocused: false
             });
           }
-
           break;
-
         case 32:
           // space
-          if (_this.props.searchable) {
+          if (this.props.searchable) {
             break;
           }
-
           event.preventDefault();
-
-          if (!_this.state.isOpen) {
-            _this.setState({
+          if (!this.state.isOpen) {
+            this.setState({
               isOpen: true
             });
           }
-
           break;
-
         case 38:
           // up
           event.preventDefault();
-
-          if (!_this.state.isOpen) {
-            _this.setState({
+          if (!this.state.isOpen) {
+            this.setState({
               isOpen: true
             });
           }
-
           break;
-
         case 40:
           // down
           event.preventDefault();
-
-          if (!_this.state.isOpen) {
-            _this.setState({
+          if (!this.state.isOpen) {
+            this.setState({
               isOpen: true
             });
           }
-
           break;
-
         case 33:
           // page up
           event.preventDefault();
-
-          if (!_this.state.isOpen) {
-            _this.setState({
+          if (!this.state.isOpen) {
+            this.setState({
               isOpen: true
             });
           }
-
           break;
-
         case 34:
           // page down
           event.preventDefault();
-
-          if (!_this.state.isOpen) {
-            _this.setState({
+          if (!this.state.isOpen) {
+            this.setState({
               isOpen: true
             });
           }
-
           break;
-
         case 35:
           // end key
           if (event.shiftKey) {
             break;
           }
-
           event.preventDefault();
-
-          if (!_this.state.isOpen) {
-            _this.setState({
+          if (!this.state.isOpen) {
+            this.setState({
               isOpen: true
             });
           }
-
           break;
-
         case 36:
           // home key
           if (event.shiftKey) {
             break;
           }
-
           event.preventDefault();
-
-          if (!_this.state.isOpen) {
-            _this.setState({
+          if (!this.state.isOpen) {
+            this.setState({
               isOpen: true
             });
           }
-
           break;
-
         case 46:
           // delete
-          if (!_this.state.inputValue && _this.props.deleteRemoves) {
+          if (!this.state.inputValue && this.props.deleteRemoves) {
             event.preventDefault();
-
-            _this.popValue();
+            this.popValue();
           }
-
           break;
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getOptionLabel", function (locale, _ref) {
-      var option = _ref.option;
-      return option.isCreatable ? // @ts-ignore
-      "".concat(locale.select.create, " \u201C").concat(option[_this.props.labelKey], "\u201D") : // @ts-ignore
-      option[_this.props.labelKey];
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getValueLabel", function (_ref2) {
-      var option = _ref2.option;
+    _defineProperty(this, "getOptionLabel", (locale, {
+      option
+    }) => option.isCreatable ?
+    // @ts-ignore
+    `${locale.select.create} “${option[this.props.labelKey]}”` :
+    // @ts-ignore
+    option[this.props.labelKey]);
+    _defineProperty(this, "getValueLabel", ({
+      option
+    }) => {
       // @ts-ignore
-      return option[_this.props.labelKey];
+      return option[this.props.labelKey];
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleActiveDescendantChange", function (id) {
+    _defineProperty(this, "handleActiveDescendantChange", id => {
       if (id) {
-        _this.setState({
+        this.setState({
           activeDescendant: id
         });
       } else {
-        _this.setState({
+        this.setState({
           activeDescendant: null
         });
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
-      _this.input = input;
-
-      if (typeof _this.props.inputRef === 'function') {
-        _this.props.inputRef(input);
-      } else if (_this.props.inputRef) {
+    _defineProperty(this, "handleInputRef", input => {
+      this.input = input;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(input);
+      } else if (this.props.inputRef) {
         // @ts-expect-error todo(flow->ts) MutableRefObject
-        _this.props.inputRef.current = input;
+        this.props.inputRef.current = input;
       }
-
-      if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
+      if (this.props.controlRef && typeof this.props.controlRef === 'function') {
         // @ts-expect-error todo(flow->ts) according to types this code is not reachable
-        _this.props.controlRef(input);
+        this.props.controlRef(input);
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "selectValue", function (_ref3) {
-      var item = _ref3.item;
-
+    _defineProperty(this, "selectValue", ({
+      item
+    }) => {
       if (item.disabled) {
         return;
       }
-
-      _this.justSelected = true; // NOTE: we add/set the value in a callback to make sure the
+      this.justSelected = true;
+      // NOTE: we add/set the value in a callback to make sure the
       // input value is empty to avoid styling issues in Chrome
-
-      var updatedValue = _this.props.onSelectResetsInput ? '' : _this.state.inputValue;
-
-      if (_this.props.multi) {
-        _this.setState({
+      const updatedValue = this.props.onSelectResetsInput ? '' : this.state.inputValue;
+      if (this.props.multi) {
+        this.setState({
           inputValue: updatedValue,
-          isOpen: !_this.props.closeOnSelect
-        }, function () {
-          var valueArray = _this.props.value; // @ts-ignore
-
-          if (valueArray.some(function (i) {
-            return i[_this.props.valueKey] === item[_this.props.valueKey];
-          })) {
-            _this.removeValue(item);
+          isOpen: !this.props.closeOnSelect
+        }, () => {
+          const valueArray = this.props.value;
+          // @ts-ignore
+          if (valueArray.some(i => i[this.props.valueKey] === item[this.props.valueKey])) {
+            this.removeValue(item);
           } else {
-            _this.addValue(item);
+            this.addValue(item);
           }
         });
       } else {
-        _this.focus();
-
-        _this.setState({
+        this.focus();
+        this.setState({
           inputValue: updatedValue,
-          isOpen: !_this.props.closeOnSelect,
+          isOpen: !this.props.closeOnSelect,
           isFocused: true,
           isPseudoFocused: false
-        }, function () {
-          _this.setValue([item], item, _constants.STATE_CHANGE_TYPE.select);
+        }, () => {
+          this.setValue([item], item, _constants.STATE_CHANGE_TYPE.select);
         });
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "addValue", function (item) {
-      var valueArray = _toConsumableArray(_this.props.value);
-
-      _this.setValue(valueArray.concat(item), item, _constants.STATE_CHANGE_TYPE.select);
+    _defineProperty(this, "addValue", item => {
+      const valueArray = [...this.props.value];
+      this.setValue(valueArray.concat(item), item, _constants.STATE_CHANGE_TYPE.select);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "backspaceValue", function () {
-      var item = _this.popValue();
-
+    _defineProperty(this, "backspaceValue", () => {
+      const item = this.popValue();
       if (!item) {
         return;
-      } // @ts-ignore
-
-
-      var valueLength = _this.props.value.length;
-      var renderLabel = _this.props.getValueLabel || _this.getValueLabel;
-      var labelForInput = renderLabel({
+      }
+      // @ts-ignore
+      const valueLength = this.props.value.length;
+      const renderLabel = this.props.getValueLabel || this.getValueLabel;
+      const labelForInput = renderLabel({
         option: item,
         index: valueLength - 1
-      }); // label might not be a string, it might be a Node of another kind.
-
-      if (!_this.props.backspaceClearsInputValue && typeof labelForInput === 'string') {
-        var remainingInput = labelForInput.slice(0, -1);
-
-        _this.setState({
+      });
+      // label might not be a string, it might be a Node of another kind.
+      if (!this.props.backspaceClearsInputValue && typeof labelForInput === 'string') {
+        const remainingInput = labelForInput.slice(0, -1);
+        this.setState({
           inputValue: remainingInput,
           isOpen: true
         });
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "popValue", function () {
+    _defineProperty(this, "popValue", () => {
       // @ts-ignore
-      var valueArray = _toConsumableArray(_this.props.value);
-
-      var valueLength = valueArray.length;
+      const valueArray = [...this.props.value];
+      const valueLength = valueArray.length;
       if (!valueLength) return;
       if (valueArray[valueLength - 1].clearableValue === false) return;
-      var item = valueArray.pop();
-
-      _this.setValue(valueArray, item, _constants.STATE_CHANGE_TYPE.remove);
-
+      const item = valueArray.pop();
+      this.setValue(valueArray, item, _constants.STATE_CHANGE_TYPE.remove);
       return item;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "removeValue", function (item) {
-      var valueArray = _toConsumableArray(_this.props.value);
-
-      _this.setValue( // @ts-ignore
-      valueArray.filter(function (i) {
-        return i[_this.props.valueKey] !== item[_this.props.valueKey];
-      }), item, _constants.STATE_CHANGE_TYPE.remove);
-
-      _this.focus();
+    _defineProperty(this, "removeValue", item => {
+      const valueArray = [...this.props.value];
+      this.setValue(
+      // @ts-ignore
+      valueArray.filter(i => i[this.props.valueKey] !== item[this.props.valueKey]), item, _constants.STATE_CHANGE_TYPE.remove);
+      this.focus();
     });
-
-    _defineProperty(_assertThisInitialized(_this), "clearValue", function (event) {
+    _defineProperty(this, "clearValue", event => {
       if (isClick(event) && !isLeftClick(event)) return;
-
-      if (_this.props.value) {
-        var resetValue = _this.props.value.filter(function (item) {
-          return item.clearableValue === false;
-        });
-
-        _this.setValue(resetValue, null, _constants.STATE_CHANGE_TYPE.clear);
+      if (this.props.value) {
+        const resetValue = this.props.value.filter(item => item.clearableValue === false);
+        this.setValue(resetValue, null, _constants.STATE_CHANGE_TYPE.clear);
       }
-
-      _this.setState({
+      this.setState({
         inputValue: '',
         isOpen: false
       });
-
-      _this.focus();
-
-      _this.focusAfterClear = true;
+      this.focus();
+      this.focusAfterClear = true;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "shouldShowPlaceholder", function () {
-      return !(_this.state.inputValue || _this.props.value && _this.props.value.length);
+    _defineProperty(this, "shouldShowPlaceholder", () => {
+      return !(this.state.inputValue || this.props.value && this.props.value.length);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "shouldShowValue", function () {
-      return !_this.state.inputValue;
+    _defineProperty(this, "shouldShowValue", () => {
+      return !this.state.inputValue;
     });
-
-    _this.options = (0, _utils.normalizeOptions)(props.options);
-    return _this;
-  } // @ts-ignore
-
-
-  _createClass(Select, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.autoFocus) {
-        this.focus();
-      }
-
-      this.isItMounted = true;
-      var controlRef = this.props.controlRef;
-
-      if (controlRef && typeof controlRef !== 'function') {
-        controlRef.current = {
-          setDropdownOpen: this.handleDropdownOpen.bind(this),
-          setInputValue: this.handleSetInputValue.bind(this),
-          setInputFocus: this.handleSetInputFocus.bind(this),
-          setInputBlur: this.handleSetInputBlur.bind(this),
-          // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
-          focus: this.handleSetInputFocus.bind(this),
-          blur: this.handleSetInputBlur.bind(this)
-        };
-      }
+    this.options = (0, _utils.normalizeOptions)(props.options);
+  }
+  componentDidMount() {
+    if (this.props.autoFocus) {
+      this.focus();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this2 = this;
-
-      if (typeof document !== 'undefined') {
-        if (prevState.isOpen !== this.state.isOpen) {
-          if (this.state.isOpen) {
-            this.props.onOpen && this.props.onOpen();
-            document.addEventListener('touchstart', this.handleTouchOutside);
-          } else {
-            this.props.onClose && this.props.onClose();
-            document.removeEventListener('touchstart', this.handleTouchOutside);
-          }
-        }
-
-        if (!prevState.isFocused && this.state.isFocused) {
-          setTimeout(function () {
-            return document.addEventListener('click', _this2.handleClickOutside);
-          }, 0);
+    this.isItMounted = true;
+    const {
+      controlRef
+    } = this.props;
+    if (controlRef && typeof controlRef !== 'function') {
+      controlRef.current = {
+        setDropdownOpen: this.handleDropdownOpen.bind(this),
+        setInputValue: this.handleSetInputValue.bind(this),
+        setInputFocus: this.handleSetInputFocus.bind(this),
+        setInputBlur: this.handleSetInputBlur.bind(this),
+        // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+        focus: this.handleSetInputFocus.bind(this),
+        blur: this.handleSetInputBlur.bind(this)
+      };
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (typeof document !== 'undefined') {
+      if (prevState.isOpen !== this.state.isOpen) {
+        if (this.state.isOpen) {
+          this.props.onOpen && this.props.onOpen();
+          document.addEventListener('touchstart', this.handleTouchOutside);
+        } else {
+          this.props.onClose && this.props.onClose();
+          document.removeEventListener('touchstart', this.handleTouchOutside);
         }
       }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (typeof document !== 'undefined') {
-        document.removeEventListener('touchstart', this.handleTouchOutside);
-        document.removeEventListener('click', this.handleClickOutside);
+      if (!prevState.isFocused && this.state.isFocused) {
+        setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
       }
-
-      this.isItMounted = false;
     }
-  }, {
-    key: "focus",
-    value: function focus() {
-      if (!this.input) return;
-      this.input.focus();
+  }
+  componentWillUnmount() {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('touchstart', this.handleTouchOutside);
+      document.removeEventListener('click', this.handleClickOutside);
     }
-  }, {
-    key: "handleDropdownOpen",
-    value: function handleDropdownOpen(nextOpenState) {
+    this.isItMounted = false;
+  }
+  focus() {
+    if (!this.input) return;
+    this.input.focus();
+  }
+  handleDropdownOpen(nextOpenState) {
+    this.setState({
+      isOpen: nextOpenState
+    });
+  }
+  handleSetInputValue(newInputValue) {
+    this.setState({
+      inputValue: newInputValue
+    });
+  }
+  handleSetInputFocus() {
+    // @ts-ignore
+    this.input.focus();
+  }
+  handleSetInputBlur() {
+    // @ts-ignore
+    this.input.blur();
+  }
+  closeMenu() {
+    if (this.props.onCloseResetsInput) {
       this.setState({
-        isOpen: nextOpenState
+        inputValue: '',
+        isOpen: false,
+        isPseudoFocused: this.state.isFocused && !this.props.multi
       });
-    }
-  }, {
-    key: "handleSetInputValue",
-    value: function handleSetInputValue(newInputValue) {
+    } else {
       this.setState({
-        inputValue: newInputValue
+        isOpen: false,
+        isPseudoFocused: this.state.isFocused && !this.props.multi
       });
     }
-  }, {
-    key: "handleSetInputFocus",
-    value: function handleSetInputFocus() {
-      // @ts-ignore
-      this.input.focus();
-    }
-  }, {
-    key: "handleSetInputBlur",
-    value: function handleSetInputBlur() {
-      // @ts-ignore
-      this.input.blur();
-    } // Handle touch outside on mobile to dismiss menu, ensures that the
-    // touch target is not within the anchor DOM node.
-
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      if (this.props.onCloseResetsInput) {
-        this.setState({
-          inputValue: '',
-          isOpen: false,
-          isPseudoFocused: this.state.isFocused && !this.props.multi
-        });
-      } else {
-        this.setState({
-          isOpen: false,
-          isPseudoFocused: this.state.isFocused && !this.props.multi
-        });
-      }
+  }
+  /**
+   * Extends the value into an array from the given options
+   */
+  getValueArray(value) {
+    if (!Array.isArray(value)) {
+      if (value === null || value === undefined) return [];
+      value = [value];
     }
-  }, {
-    key: "getValueArray",
-    value:
-    /**
-     * Extends the value into an array from the given options
-     */
-    function getValueArray(value) {
-      var _this3 = this;
-
-      if (!Array.isArray(value)) {
-        if (value === null || value === undefined) return [];
-        value = [value];
-      }
-
-      return value.map(function (value) {
-        return (0, _utils.expandValue)(value, _this3.props);
+    return value.map(value => (0, _utils.expandValue)(value, this.props));
+  }
+  setValue(value, option, type) {
+    if (this.props.onChange) {
+      this.props.onChange({
+        value,
+        option,
+        type
       });
     }
-  }, {
-    key: "setValue",
-    value: function setValue(value, option, type) {
-      if (this.props.onChange) {
-        this.props.onChange({
-          value: value,
-          option: option,
-          type: type
-        });
+  }
+  renderLoading() {
+    if (!this.props.isLoading) return;
+    const {
+      overrides = {}
+    } = this.props;
+    const [LoadingIndicator, loadingIndicatorProps] = (0, _overrides.getOverrides)(overrides.LoadingIndicator, _styledComponents.StyledLoadingIndicator);
+    return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
+      role: "status"
+    }, loadingIndicatorProps), /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        padding: 0,
+        margin: '-1px',
+        overflow: 'hidden',
+        clip: 'rect(0,0,0,0)',
+        whiteSpace: 'nowrap',
+        border: 0
       }
+    }, "Loading"));
+  }
+  renderValue(valueArray) {
+    const {
+      overrides = {}
+    } = this.props;
+    const sharedProps = this.getSharedProps();
+    const renderLabel = this.props.getValueLabel || this.getValueLabel;
+    const Value = this.props.valueComponent || Noop;
+    if (!valueArray.length) {
+      return null;
     }
-  }, {
-    key: "renderLoading",
-    value: function renderLoading() {
-      if (!this.props.isLoading) return;
-      var _this$props$overrides = this.props.overrides,
-          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
-
-      var _getOverrides = (0, _overrides.getOverrides)(overrides.LoadingIndicator, _styledComponents.StyledLoadingIndicator),
-          _getOverrides2 = _slicedToArray(_getOverrides, 2),
-          LoadingIndicator = _getOverrides2[0],
-          loadingIndicatorProps = _getOverrides2[1];
-
-      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
-        role: "status"
-      }, loadingIndicatorProps), /*#__PURE__*/React.createElement("span", {
-        style: {
-          position: 'absolute',
-          width: '1px',
-          height: '1px',
-          padding: 0,
-          margin: '-1px',
-          overflow: 'hidden',
-          clip: 'rect(0,0,0,0)',
-          whiteSpace: 'nowrap',
-          border: 0
-        }
-      }, "Loading"));
-    }
-  }, {
-    key: "renderValue",
-    value: function renderValue(valueArray) {
-      var _this4 = this;
-
-      var _this$props$overrides2 = this.props.overrides,
-          overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
-      var sharedProps = this.getSharedProps();
-      var renderLabel = this.props.getValueLabel || this.getValueLabel;
-      var Value = this.props.valueComponent || Noop;
-
-      if (!valueArray.length) {
-        return null;
-      }
-
-      if (this.props.multi) {
-        return valueArray.map(function (value, i) {
-          var disabled = sharedProps.$disabled || value.clearableValue === false;
-          return /*#__PURE__*/React.createElement(Value, _extends({
-            value: value // @ts-ignore
-            ,
-            key: "value-".concat(i, "-").concat(value[_this4.props.valueKey]),
-            removeValue: function removeValue() {
-              return _this4.removeValue(value);
-            },
-            disabled: disabled,
-            overrides: {
-              Tag: overrides.Tag,
-              MultiValue: overrides.MultiValue
-            }
-          }, sharedProps, {
-            $disabled: disabled
-          }), renderLabel({
-            option: value,
-            index: i
-          }));
-        });
-      } else if (this.shouldShowValue()) {
-        return /*#__PURE__*/React.createElement(Value // @ts-ignore
-        , _extends({
-          value: valueArray[0][this.props.valueKey],
-          disabled: this.props.disabled,
+    if (this.props.multi) {
+      return valueArray.map((value, i) => {
+        const disabled = sharedProps.$disabled || value.clearableValue === false;
+        return /*#__PURE__*/React.createElement(Value, _extends({
+          value: value
+          // @ts-ignore
+          ,
+          key: `value-${i}-${value[this.props.valueKey]}`,
+          removeValue: () => this.removeValue(value),
+          disabled: disabled,
           overrides: {
-            SingleValue: overrides.SingleValue
+            Tag: overrides.Tag,
+            MultiValue: overrides.MultiValue
           }
-        }, sharedProps), renderLabel({
-          option: valueArray[0]
+        }, sharedProps, {
+          $disabled: disabled
+        }), renderLabel({
+          option: value,
+          index: i
         }));
-      }
+      });
+    } else if (this.shouldShowValue()) {
+      return /*#__PURE__*/React.createElement(Value
+      // @ts-ignore
+      , _extends({
+        value: valueArray[0][this.props.valueKey],
+        disabled: this.props.disabled,
+        overrides: {
+          SingleValue: overrides.SingleValue
+        }
+      }, sharedProps), renderLabel({
+        option: valueArray[0]
+      }));
     }
-  }, {
-    key: "renderInput",
-    value: function renderInput(listboxId) {
-      var _this5 = this;
-
-      var _this$props$overrides3 = this.props.overrides,
-          overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
-
-      var _getOverrides3 = (0, _overrides.getOverrides)(overrides.InputContainer, _styledComponents.StyledInputContainer),
-          _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-          InputContainer = _getOverrides4[0],
-          inputContainerProps = _getOverrides4[1];
-
-      var sharedProps = this.getSharedProps();
-      var isOpen = this.state.isOpen; // @ts-ignore
-
-      var selected = this.getValueArray(this.props.value) // @ts-ignore
-      .map(function (v) {
-        return v[_this5.props.labelKey];
-      }).join(', ');
-      var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
-      var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
-
-      if (!this.props.searchable) {
-        return /*#__PURE__*/React.createElement(InputContainer, _extends({
-          "aria-activedescendant": this.state.activeDescendant,
-          "aria-describedby": this.props['aria-describedby'],
-          "aria-errormessage": this.props['aria-errormessage'],
-          "aria-disabled": this.props.disabled,
-          "aria-labelledby": this.props['aria-labelledby'],
-          "aria-owns": this.state.isOpen ? listboxId : null,
-          "aria-required": this.props.required || null,
-          onFocus: this.handleInputFocus,
-          tabIndex: 0
-        }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
-          "aria-hidden": true // @ts-ignore
-          ,
-          id: this.props.id || null,
-          ref: this.handleInputRef,
-          style: {
-            opacity: 0,
-            width: 0,
-            overflow: 'hidden',
-            border: 'none',
-            padding: 0
-          },
-          tabIndex: -1
-        }, overrides.Input ? overrides.Input.props ? // $FlowExpectedError[not-an-object]
-        overrides.Input.props : {} : {})));
-      }
-
-      return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(_autosizeInput.default, _extends({
+  }
+  renderInput(listboxId) {
+    const {
+      overrides = {}
+    } = this.props;
+    const [InputContainer, inputContainerProps] = (0, _overrides.getOverrides)(overrides.InputContainer, _styledComponents.StyledInputContainer);
+    const sharedProps = this.getSharedProps();
+    const isOpen = this.state.isOpen;
+    // @ts-ignore
+    const selected = this.getValueArray(this.props.value)
+    // @ts-ignore
+    .map(v => v[this.props.labelKey]).join(', ');
+    const selectedLabel = selected.length ? `Selected ${selected}. ` : '';
+    const label = `${selectedLabel}${this.props['aria-label'] || ''}`;
+    if (!this.props.searchable) {
+      return /*#__PURE__*/React.createElement(InputContainer, _extends({
         "aria-activedescendant": this.state.activeDescendant,
-        "aria-autocomplete": "list",
-        "aria-controls": this.state.isOpen ? listboxId : null,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
-        "aria-disabled": this.props.disabled || null,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-label": label,
+        "aria-disabled": this.props.disabled,
         "aria-labelledby": this.props['aria-labelledby'],
+        "aria-label": label,
+        "aria-owns": this.state.isOpen ? listboxId : null,
         "aria-required": this.props.required || null,
-        disabled: this.props.disabled || null,
-        id: this.props.id || null,
-        inputRef: this.handleInputRef,
-        onChange: this.handleInputChange,
         onFocus: this.handleInputFocus,
-        overrides: {
-          Input: overrides.Input
-        } // @ts-ignore
-        ,
-        required: this.props.required && !this.props.value.length || null,
-        role: "combobox",
-        value: this.state.inputValue,
         tabIndex: 0
-      }, sharedProps)));
-    }
-  }, {
-    key: "renderClear",
-    value: function renderClear() {
-      var _sizes;
-
-      var isValueEntered = Boolean(this.props.value && this.props.value.length || this.state.inputValue);
-
-      if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
-        return;
-      } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-
-      var _this$getSharedProps = this.getSharedProps(),
-          $size = _this$getSharedProps.$size,
-          sharedProps = _objectWithoutProperties(_this$getSharedProps, _excluded);
-
-      var _this$props$overrides4 = this.props.overrides,
-          overrides = _this$props$overrides4 === void 0 ? {} : _this$props$overrides4;
-
-      var _getOverrides5 = (0, _overrides.getOverrides)(overrides.ClearIcon, _deleteAlt.default),
-          _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-          ClearIcon = _getOverrides6[0],
-          clearIconProps = _getOverrides6[1];
-
-      var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
-      var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.mini, 15), _defineProperty(_sizes, _constants.SIZE.compact, 15), _defineProperty(_sizes, _constants.SIZE.default, 18), _defineProperty(_sizes, _constants.SIZE.large, 22), _sizes);
-      return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        title: ariaLabel,
-        "aria-label": ariaLabel,
-        onClick: this.clearValue,
-        role: "button" // @ts-ignore
+      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
+        "aria-hidden": true
+        // @ts-ignore
         ,
-        size: sizes[this.props.size] || sizes[_constants.SIZE.default]
-      }, sharedProps, clearIconProps));
-    }
-  }, {
-    key: "renderArrow",
-    value: function renderArrow() {
-      var _sizes2;
-
-      if (this.props.type !== _constants.TYPE.select) {
-        return null;
-      } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-
-      var _this$getSharedProps2 = this.getSharedProps(),
-          $size = _this$getSharedProps2.$size,
-          sharedProps = _objectWithoutProperties(_this$getSharedProps2, _excluded2);
-
-      var _this$props$overrides5 = this.props.overrides,
-          overrides = _this$props$overrides5 === void 0 ? {} : _this$props$overrides5;
-
-      var _getOverrides7 = (0, _overrides.getOverrides)(overrides.SelectArrow, _triangleDown.default),
-          _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-          SelectArrow = _getOverrides8[0],
-          selectArrowProps = _getOverrides8[1];
-
-      selectArrowProps.overrides = (0, _overrides.mergeOverrides)({
-        Svg: {
-          style: function style(_ref4) {
-            var $theme = _ref4.$theme,
-                $disabled = _ref4.$disabled;
-            return {
-              color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
-            };
-          }
-        }
-      }, selectArrowProps.overrides);
-      var sizes = (_sizes2 = {}, _defineProperty(_sizes2, _constants.SIZE.mini, 16), _defineProperty(_sizes2, _constants.SIZE.compact, 16), _defineProperty(_sizes2, _constants.SIZE.default, 20), _defineProperty(_sizes2, _constants.SIZE.large, 24), _sizes2);
-      return /*#__PURE__*/React.createElement(SelectArrow // @ts-ignore
-      , _extends({
-        size: sizes[this.props.size] || sizes[_constants.SIZE.default],
-        title: 'open'
-      }, sharedProps, selectArrowProps));
+        id: this.props.id || null,
+        ref: this.handleInputRef,
+        style: {
+          opacity: 0,
+          width: 0,
+          overflow: 'hidden',
+          border: 'none',
+          padding: 0
+        },
+        tabIndex: -1
+      }, overrides.Input ? overrides.Input.props ?
+      // $FlowExpectedError[not-an-object]
+      overrides.Input.props : {} : {})));
     }
-  }, {
-    key: "renderSearch",
-    value: function renderSearch() {
-      if (this.props.type !== _constants.TYPE.search) {
-        return null;
+    return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(_autosizeInput.default, _extends({
+      "aria-activedescendant": this.state.activeDescendant,
+      "aria-autocomplete": "list",
+      "aria-controls": this.state.isOpen ? listboxId : null,
+      "aria-describedby": this.props['aria-describedby'],
+      "aria-errormessage": this.props['aria-errormessage'],
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-label": label,
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-required": this.props.required || null,
+      disabled: this.props.disabled || null,
+      id: this.props.id || null,
+      inputRef: this.handleInputRef,
+      onChange: this.handleInputChange,
+      onFocus: this.handleInputFocus,
+      overrides: {
+        Input: overrides.Input
       }
-
-      var _this$props$overrides6 = this.props.overrides,
-          overrides = _this$props$overrides6 === void 0 ? {} : _this$props$overrides6;
-
-      var _getOverrides9 = (0, _overrides.getOverrides)(overrides.SearchIconContainer, _styledComponents.StyledSearchIconContainer),
-          _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-          SearchIconContainer = _getOverrides10[0],
-          searchIconContainerProps = _getOverrides10[1];
-
-      var _getOverrides11 = (0, _overrides.getOverrides)(overrides.SearchIcon, _search.default),
-          _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-          SearchIcon = _getOverrides12[0],
-          searchIconProps = _getOverrides12[1];
-
-      var sharedProps = this.getSharedProps();
-      return /*#__PURE__*/React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
-        size: 16,
-        title: 'search'
-      }, sharedProps, searchIconProps)));
+      // @ts-ignore
+      ,
+      required: this.props.required && !this.props.value.length || null,
+      role: "combobox",
+      value: this.state.inputValue,
+      tabIndex: 0
+    }, sharedProps)));
+  }
+  renderClear() {
+    const isValueEntered = Boolean(this.props.value && this.props.value.length || this.state.inputValue);
+    if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
+      return;
     }
-  }, {
-    key: "filterOptions",
-    value: function filterOptions(excludeOptions) {
-      var _this6 = this;
-
-      var filterValue = this.state.inputValue.trim(); // apply filter function
 
-      if (this.props.filterOptions) {
-        this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
-          // @ts-ignore
-          valueKey: this.props.valueKey,
-          // @ts-ignore
-          labelKey: this.props.labelKey
-        });
-      } // can user create a new option + there's no exact match already
-
-
-      var filterDoesNotMatchOption = this.props.ignoreCase ? // @ts-ignore
-      function (opt) {
-        return opt[_this6.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
-      } : // @ts-ignore
-      function (opt) {
-        return opt[_this6.props.labelKey] !== filterValue.trim();
-      };
-
-      if (filterValue && this.props.creatable && // @ts-ignore
-      this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
-        var _this$options$push;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
+    const {
+      overrides = {}
+    } = this.props;
+    const [ClearIcon, clearIconProps] = (0, _overrides.getOverrides)(overrides.ClearIcon, _deleteAlt.default);
+    const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+    const sizes = {
+      [_constants.SIZE.mini]: 15,
+      [_constants.SIZE.compact]: 15,
+      [_constants.SIZE.default]: 18,
+      [_constants.SIZE.large]: 22
+    };
+    return /*#__PURE__*/React.createElement(ClearIcon, _extends({
+      title: ariaLabel,
+      "aria-label": ariaLabel,
+      onClick: this.clearValue,
+      role: "button"
+      // @ts-ignore
+      ,
+      size: sizes[this.props.size] || sizes[_constants.SIZE.default]
+    }, sharedProps, clearIconProps));
+  }
+  renderArrow() {
+    if (this.props.type !== _constants.TYPE.select) {
+      return null;
+    }
 
-        // @ts-expect-error todo(flow->ts) this.options is typed as a read-only array
-        this.options.push((_this$options$push = {
-          id: filterValue
-        }, _defineProperty(_this$options$push, this.props.labelKey, filterValue), _defineProperty(_this$options$push, this.props.valueKey, filterValue), _defineProperty(_this$options$push, "isCreatable", true), _this$options$push));
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
+    const {
+      overrides = {}
+    } = this.props;
+    const [SelectArrow, selectArrowProps] = (0, _overrides.getOverrides)(overrides.SelectArrow, _triangleDown.default);
+    selectArrowProps.overrides = (0, _overrides.mergeOverrides)({
+      Svg: {
+        style: ({
+          $theme,
+          $disabled
+        }) => {
+          return {
+            color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
+          };
+        }
       }
-
-      return this.options;
+    }, selectArrowProps.overrides);
+    const sizes = {
+      [_constants.SIZE.mini]: 16,
+      [_constants.SIZE.compact]: 16,
+      [_constants.SIZE.default]: 20,
+      [_constants.SIZE.large]: 24
+    };
+    return /*#__PURE__*/React.createElement(SelectArrow
+    // @ts-ignore
+    , _extends({
+      size: sizes[this.props.size] || sizes[_constants.SIZE.default],
+      title: 'open'
+    }, sharedProps, selectArrowProps));
+  }
+  renderSearch() {
+    if (this.props.type !== _constants.TYPE.search) {
+      return null;
     }
-  }, {
-    key: "getSharedProps",
-    value: function getSharedProps() {
-      var _this$props = this.props,
-          clearable = _this$props.clearable,
-          creatable = _this$props.creatable,
-          disabled = _this$props.disabled,
-          error = _this$props.error,
-          positive = _this$props.positive,
-          isLoading = _this$props.isLoading,
-          multi = _this$props.multi,
-          required = _this$props.required,
-          size = _this$props.size,
-          searchable = _this$props.searchable,
-          type = _this$props.type,
-          value = _this$props.value;
-      var _this$state = this.state,
-          isOpen = _this$state.isOpen,
-          isFocused = _this$state.isFocused,
-          isPseudoFocused = _this$state.isPseudoFocused;
-      return {
-        $clearable: clearable,
-        $creatable: creatable,
-        $disabled: disabled,
-        $error: error,
-        $positive: positive,
-        $isFocused: isFocused,
-        $isLoading: isLoading,
-        $isOpen: isOpen,
-        $isPseudoFocused: isPseudoFocused,
-        $multi: multi,
-        $required: required,
-        $searchable: searchable,
-        $size: size,
-        $type: type,
+    const {
+      overrides = {}
+    } = this.props;
+    const [SearchIconContainer, searchIconContainerProps] = (0, _overrides.getOverrides)(overrides.SearchIconContainer, _styledComponents.StyledSearchIconContainer);
+    const [SearchIcon, searchIconProps] = (0, _overrides.getOverrides)(overrides.SearchIcon, _search.default);
+    const sharedProps = this.getSharedProps();
+    return /*#__PURE__*/React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
+      size: 16,
+      title: 'search'
+    }, sharedProps, searchIconProps)));
+  }
+  filterOptions(excludeOptions) {
+    const filterValue = this.state.inputValue.trim();
+    // apply filter function
+    if (this.props.filterOptions) {
+      this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
         // @ts-ignore
-        $isEmpty: !this.getValueArray(value).length
-      };
+        valueKey: this.props.valueKey,
+        // @ts-ignore
+        labelKey: this.props.labelKey
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this7 = this;
-
-      this.options = (0, _utils.normalizeOptions)(this.props.options);
-      var _this$props2 = this.props,
-          _this$props2$override = _this$props2.overrides,
-          overrides = _this$props2$override === void 0 ? {} : _this$props2$override,
-          type = _this$props2.type,
-          multi = _this$props2.multi,
-          noResultsMsg = _this$props2.noResultsMsg,
-          value = _this$props2.value,
-          filterOutSelected = _this$props2.filterOutSelected;
-
-      if (process.env.NODE_ENV !== "production") {
-        // value may be nullish, only warn if value is defined
-        if (value && !Array.isArray(value)) {
-          console.warn('The Select component expects an array as the value prop. For more information, please visit the docs at https://baseweb.design/components/select/');
-        }
+    // can user create a new option + there's no exact match already
+    const filterDoesNotMatchOption = this.props.ignoreCase ?
+    // @ts-ignore
+    opt => opt[this.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim() :
+    // @ts-ignore
+    opt => opt[this.props.labelKey] !== filterValue.trim();
+    if (filterValue && this.props.creatable &&
+    // @ts-ignore
+    this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
+      // @ts-expect-error todo(flow->ts) this.options is typed as a read-only array
+      this.options.push({
+        id: filterValue,
+        // @ts-ignore
+        [this.props.labelKey]: filterValue,
+        // @ts-ignore
+        [this.props.valueKey]: filterValue,
+        isCreatable: true
+      });
+    }
+    return this.options;
+  }
+  getSharedProps() {
+    const {
+      clearable,
+      creatable,
+      disabled,
+      error,
+      positive,
+      isLoading,
+      multi,
+      required,
+      size,
+      searchable,
+      type,
+      value
+    } = this.props;
+    const {
+      isOpen,
+      isFocused,
+      isPseudoFocused
+    } = this.state;
+    return {
+      $clearable: clearable,
+      $creatable: creatable,
+      $disabled: disabled,
+      $error: error,
+      $positive: positive,
+      $isFocused: isFocused,
+      $isLoading: isLoading,
+      $isOpen: isOpen,
+      $isPseudoFocused: isPseudoFocused,
+      $multi: multi,
+      $required: required,
+      $searchable: searchable,
+      $size: size,
+      $type: type,
+      // @ts-ignore
+      $isEmpty: !this.getValueArray(value).length
+    };
+  }
+  render() {
+    this.options = (0, _utils.normalizeOptions)(this.props.options);
+    const {
+      overrides = {},
+      type,
+      multi,
+      noResultsMsg,
+      value,
+      filterOutSelected
+    } = this.props;
+    if (process.env.NODE_ENV !== "production") {
+      // value may be nullish, only warn if value is defined
+      if (value && !Array.isArray(value)) {
+        console.warn('The Select component expects an array as the value prop. For more information, please visit the docs at https://baseweb.design/components/select/');
       }
-
-      var _getOverrides13 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
-          _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-          Root = _getOverrides14[0],
-          rootProps = _getOverrides14[1];
-
-      var _getOverrides15 = (0, _overrides.getOverrides)(overrides.ControlContainer, _styledComponents.StyledControlContainer),
-          _getOverrides16 = _slicedToArray(_getOverrides15, 2),
-          ControlContainer = _getOverrides16[0],
-          controlContainerProps = _getOverrides16[1];
-
-      var _getOverrides17 = (0, _overrides.getOverrides)(overrides.ValueContainer, _styledComponents.StyledValueContainer),
-          _getOverrides18 = _slicedToArray(_getOverrides17, 2),
-          ValueContainer = _getOverrides18[0],
-          valueContainerProps = _getOverrides18[1];
-
-      var _getOverrides19 = (0, _overrides.getOverrides)(overrides.IconsContainer, _styledComponents.StyledIconsContainer),
-          _getOverrides20 = _slicedToArray(_getOverrides19, 2),
-          IconsContainer = _getOverrides20[0],
-          iconsContainerProps = _getOverrides20[1];
-
-      var _getOverrides21 = (0, _overrides.getOverrides)(overrides.Popover, _popover.Popover),
-          _getOverrides22 = _slicedToArray(_getOverrides21, 2),
-          PopoverOverride = _getOverrides22[0],
-          popoverProps = _getOverrides22[1];
-
-      var _getOverrides23 = (0, _overrides.getOverrides)(overrides.Placeholder, _styledComponents.StyledPlaceholder),
-          _getOverrides24 = _slicedToArray(_getOverrides23, 2),
-          Placeholder = _getOverrides24[0],
-          placeholderProps = _getOverrides24[1];
-
-      var sharedProps = this.getSharedProps(); // @ts-ignore
-
-      var valueArray = this.getValueArray(value);
-      var options = this.filterOptions(multi && filterOutSelected ? valueArray : null);
-      var isOpen = this.state.isOpen;
-      sharedProps.$isOpen = isOpen;
-
-      if (process.env.NODE_ENV !== "production") {
-        if (this.props.error && this.props.positive) {
-          // eslint-disable-next-line no-console
-          console.warn("[Select] `error` and `positive` are both set to `true`. `error` will take precedence but this may not be what you want.");
-        }
+    }
+    const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
+    const [ControlContainer, controlContainerProps] = (0, _overrides.getOverrides)(overrides.ControlContainer, _styledComponents.StyledControlContainer);
+    const [ValueContainer, valueContainerProps] = (0, _overrides.getOverrides)(overrides.ValueContainer, _styledComponents.StyledValueContainer);
+    const [IconsContainer, iconsContainerProps] = (0, _overrides.getOverrides)(overrides.IconsContainer, _styledComponents.StyledIconsContainer);
+    const [PopoverOverride, popoverProps] = (0, _overrides.getOverrides)(overrides.Popover, _popover.Popover);
+    const [Placeholder, placeholderProps] = (0, _overrides.getOverrides)(overrides.Placeholder, _styledComponents.StyledPlaceholder);
+    const sharedProps = this.getSharedProps();
+
+    // @ts-ignore
+    const valueArray = this.getValueArray(value);
+    const options = this.filterOptions(multi && filterOutSelected ? valueArray : null);
+    const isOpen = this.state.isOpen;
+    sharedProps.$isOpen = isOpen;
+    if (process.env.NODE_ENV !== "production") {
+      if (this.props.error && this.props.positive) {
+        // eslint-disable-next-line no-console
+        console.warn(`[Select] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`);
       }
-
-      return /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (listboxId) {
-        return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
-          return /*#__PURE__*/React.createElement(PopoverOverride // Popover does not provide ability to forward refs through, and if we were to simply
-          // apply the ref to the Root component below it would be overwritten before the popover
-          // renders it. Using this strategy, we will get a ref to the popover, then reuse its
-          // anchorRef so we can check if clicks are on the select component or not.
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          , _extends({
-            innerRef: function innerRef(ref) {
-              if (!ref) return;
-              _this7.anchor = ref.anchorRef;
-            },
-            accessibilityType: _popover.ACCESSIBILITY_TYPE.none,
-            autoFocus: false,
-            focusLock: false,
-            mountNode: _this7.props.mountNode,
-            onEsc: function onEsc() {
-              return _this7.closeMenu();
-            },
-            isOpen: isOpen,
-            popoverMargin: 0,
-            content: function content() {
-              var dropdownProps = {
-                error: _this7.props.error,
-                positive: _this7.props.positive,
-                getOptionLabel: _this7.props.getOptionLabel || _this7.getOptionLabel.bind(_this7, locale),
-                id: listboxId,
-                isLoading: _this7.props.isLoading,
-                labelKey: _this7.props.labelKey,
-                maxDropdownHeight: _this7.props.maxDropdownHeight,
-                multi: multi,
-                noResultsMsg: noResultsMsg,
-                onActiveDescendantChange: _this7.handleActiveDescendantChange,
-                onItemSelect: _this7.selectValue,
-                options: options,
-                overrides: overrides,
-                required: _this7.props.required,
-                searchable: _this7.props.searchable,
-                size: _this7.props.size,
-                type: type,
-                value: valueArray,
-                valueKey: _this7.props.valueKey,
-                width: _this7.anchor.current ? _this7.anchor.current.clientWidth : null,
-                keyboardControlNode: _this7.anchor
-              }; // @ts-ignore
-
-              return /*#__PURE__*/React.createElement(_dropdown.default, _extends({
-                innerRef: _this7.dropdown
-              }, dropdownProps));
-            },
-            placement: _popover.PLACEMENT.bottom
-          }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
-            onBlur: _this7.handleBlur,
-            "data-baseweb": "select"
-          }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
-            onKeyDown: _this7.handleKeyDown,
-            onClick: _this7.handleClick,
-            onTouchEnd: _this7.handleTouchEnd,
-            onTouchMove: _this7.handleTouchMove,
-            onTouchStart: _this7.handleTouchStart
-          }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === _constants.TYPE.select ? _this7.renderArrow() : null))));
-        });
-      });
     }
-  }]);
-
-  return Select;
-}(React.Component);
+    return /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, listboxId => /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(PopoverOverride
+    // Popover does not provide ability to forward refs through, and if we were to simply
+    // apply the ref to the Root component below it would be overwritten before the popover
+    // renders it. Using this strategy, we will get a ref to the popover, then reuse its
+    // anchorRef so we can check if clicks are on the select component or not.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    , _extends({
+      innerRef: ref => {
+        if (!ref) return;
+        this.anchor = ref.anchorRef;
+      },
+      accessibilityType: _popover.ACCESSIBILITY_TYPE.none,
+      autoFocus: false,
+      focusLock: false,
+      mountNode: this.props.mountNode,
+      onEsc: () => this.closeMenu(),
+      isOpen: isOpen,
+      popoverMargin: 0,
+      content: () => {
+        const dropdownProps = {
+          error: this.props.error,
+          positive: this.props.positive,
+          getOptionLabel: this.props.getOptionLabel || this.getOptionLabel.bind(this, locale),
+          id: listboxId,
+          isLoading: this.props.isLoading,
+          labelKey: this.props.labelKey,
+          maxDropdownHeight: this.props.maxDropdownHeight,
+          multi,
+          noResultsMsg,
+          onActiveDescendantChange: this.handleActiveDescendantChange,
+          onItemSelect: this.selectValue,
+          options,
+          overrides,
+          required: this.props.required,
+          searchable: this.props.searchable,
+          size: this.props.size,
+          type,
+          value: valueArray,
+          valueKey: this.props.valueKey,
+          width: this.anchor.current ? this.anchor.current.clientWidth : null,
+          keyboardControlNode: this.anchor
+        };
 
+        // @ts-ignore
+        return /*#__PURE__*/React.createElement(_dropdown.default, _extends({
+          innerRef: this.dropdown
+        }, dropdownProps));
+      },
+      placement: _popover.PLACEMENT.bottom
+    }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
+      onBlur: this.handleBlur,
+      "data-baseweb": "select"
+    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
+      onKeyDown: this.handleKeyDown,
+      onClick: this.handleClick,
+      onTouchEnd: this.handleTouchEnd,
+      onTouchMove: this.handleTouchMove,
+      onTouchStart: this.handleTouchStart
+    }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? this.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), this.renderValue(valueArray), this.renderInput(listboxId), this.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof this.props.placeholder !== 'undefined' ? this.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), this.renderLoading(), this.renderClear(), type === _constants.TYPE.select ? this.renderArrow() : null))))));
+  }
+}
 _defineProperty(Select, "defaultProps", _defaultProps.default);
-
-var _default = Select;
-exports.default = _default;
+var _default = exports.default = Select;