baseui 10.0.0 → 10.3.0

package/esm/list/styled-components.js

@@ -41,7 +41,7 @@ export var StyledContent = styled('div', function (_ref2) {
     borderLeftStyle: 'none',
     display: 'flex',
     flexGrow: 1,
-    minHeight: $sublist ? '48px' : '72px',
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
     justifyContent: 'space-between'
   }, $theme.direction === 'rtl' ? {
     paddingLeft: $theme.sizing.scale600,
@@ -100,8 +100,104 @@ export var StyledLabelDescription = styled('p', function (_ref5) {
 StyledLabelDescription.displayName = "StyledLabelDescription";
 export var StyledLabelSublistContent = styled('p', function (_ref6) {
   var $theme = _ref6.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: $theme.sizing.scale500,
+    marginBottom: $theme.sizing.scale500
+  });
+});
+StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+export var StyledHeadingRoot = styled('div', function (_ref7) {
+  var $theme = _ref7.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: $theme.colors.backgroundPrimary,
+    overflow: 'hidden',
+    minHeight: $theme.sizing.scale1600
+  };
+});
+StyledHeadingRoot.displayName = "StyledHeadingRoot";
+export var StyledHeadingContent = styled('div', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return _objectSpread({
+    flexGrow: 1,
+    width: '100%',
+    minWidth: 0,
+    paddingTop: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300
+  }, $theme.direction === 'rtl' ? {
+    paddingLeft: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600
+  } : {
+    paddingRight: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
+  });
+});
+StyledHeadingContent.displayName = "StyledHeadingContent";
+export var StyledHeadingContentRow = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%'
+});
+StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
+export var StyledHeadingMainHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+function (_ref9) {
+  var _ref9$$maxLines = _ref9.$maxLines,
+      $maxLines = _ref9$$maxLines === void 0 ? 1 : _ref9$$maxLines,
+      $theme = _ref9.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  });
+});
+StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
+export var StyledHeadingSubHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+function (_ref10) {
+  var _ref10$$maxLines = _ref10.$maxLines,
+      $maxLines = _ref10$$maxLines === void 0 ? 1 : _ref10$$maxLines,
+      $theme = _ref10.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.ParagraphLarge), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  });
+});
+StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
+export var StyledHeadingEndEnhancerContainer = styled('div', function (_ref11) {
+  var $isText = _ref11.$isText,
+      $theme = _ref11.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    display: 'flex',
+    alignItems: $isText ? 'flex-end' : 'center',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  });
+});
+StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
+export var StyledHeadingEndEnhancerDescriptionContainer = styled('p', function (_ref12) {
+  var $theme = _ref12.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.ParagraphMedium), {}, {
-    color: $theme.colors.contentPrimary
+    marginTop: 0,
+    marginBottom: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
   });
 });
-StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";

package/esm/menu/stateful-container.js

@@ -1,5 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _extends() { _extends = Object.assign || 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 _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; }
@@ -38,19 +40,48 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react'; // Files
 
-import getBuiId from '../utils/get-bui-id.js';
 import { STATE_CHANGE_TYPES, KEY_STRINGS } from './constants.js';
 import { scrollItemIntoView } from './utils.js'; // Types
 
-var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
-  _inherits(MenuStatefulContainer, _React$Component);
+import { useUIDSeed } from 'react-uid';
+var DEFAULT_PROPS = {
+  // keeping it in defaultProps to satisfy Flow
+  initialState: {
+    // We start the index at -1 to indicate that no highlighting exists initially
+    highlightedIndex: -1,
+    isFocused: false
+  },
+  typeAhead: true,
+  keyboardControlNode: {
+    current: null
+  },
+  stateReducer: function (changeType, changes) {
+    return changes;
+  },
+  onItemSelect: function onItemSelect() {},
+  getRequiredItemProps: function getRequiredItemProps() {
+    return {};
+  },
+  children: function children() {
+    return null;
+  },
+  // from nested-menus context
+  addMenuToNesting: function addMenuToNesting() {},
+  removeMenuFromNesting: function removeMenuFromNesting() {},
+  getParentMenu: function getParentMenu() {},
+  getChildMenu: function getChildMenu() {},
+  forceHighlight: false
+};
+
+var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
+  _inherits(MenuStatefulContainerInner, _React$Component);
 
-  var _super = _createSuper(MenuStatefulContainer);
+  var _super = _createSuper(MenuStatefulContainerInner);
 
-  function MenuStatefulContainer() {
+  function MenuStatefulContainerInner() {
     var _this;
 
-    _classCallCheck(this, MenuStatefulContainer);
+    _classCallCheck(this, MenuStatefulContainerInner);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -263,7 +294,7 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
       if (!itemRef) {
         itemRef = /*#__PURE__*/React.createRef();
         _this.refList[index] = itemRef;
-        _this.optionIds[index] = getBuiId();
+        _this.optionIds[index] = _this.props.uidSeed(index);
       }
 
       var _this$props$getRequir = _this.props.getRequiredItemProps(item, index),
@@ -321,7 +352,7 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(MenuStatefulContainer, [{
+  _createClass(MenuStatefulContainerInner, [{
     key: "getItems",
     value: function getItems() {
       var _this2 = this;
@@ -413,6 +444,8 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
+
       // omit the stateful-container's props and don't pass it down
       // to the children (stateless menu)
       var _this$props = this.props,
@@ -430,7 +463,9 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
       return this.props.children(_objectSpread(_objectSpread({}, restProps), {}, {
         rootRef: this.props.rootRef ? this.props.rootRef : this.rootRef,
         activedescendantId: this.optionIds[this.state.highlightedIndex],
-        getRequiredItemProps: this.getRequiredItemProps,
+        getRequiredItemProps: function getRequiredItemProps(item, index) {
+          return _this3.getRequiredItemProps(item, index);
+        },
         handleMouseLeave: this.handleMouseLeave,
         highlightedIndex: this.state.highlightedIndex,
         isFocused: this.state.isFocused,
@@ -441,36 +476,17 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return MenuStatefulContainer;
-}(React.Component);
+  return MenuStatefulContainerInner;
+}(React.Component); // Remove when MenuStatefulContainer is converted to a functional component.
 
-_defineProperty(MenuStatefulContainer, "defaultProps", {
-  // keeping it in defaultProps to satisfy Flow
-  initialState: {
-    // We start the index at -1 to indicate that no highlighting exists initially
-    highlightedIndex: -1,
-    isFocused: false
-  },
-  typeAhead: true,
-  keyboardControlNode: {
-    current: null
-  },
-  stateReducer: function (changeType, changes) {
-    return changes;
-  },
-  onItemSelect: function onItemSelect() {},
-  getRequiredItemProps: function getRequiredItemProps() {
-    return {};
-  },
-  children: function children() {
-    return null;
-  },
-  // from nested-menus context
-  addMenuToNesting: function addMenuToNesting() {},
-  removeMenuFromNesting: function removeMenuFromNesting() {},
-  getParentMenu: function getParentMenu() {},
-  getChildMenu: function getChildMenu() {},
-  forceHighlight: false
-});
 
-export { MenuStatefulContainer as default };
+_defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
+
+var MenuStatefulContainer = function MenuStatefulContainer(props) {
+  return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
+    uidSeed: useUIDSeed()
+  }, props));
+};
+
+MenuStatefulContainer.defaultProps = DEFAULT_PROPS;
+export default MenuStatefulContainer;

package/esm/phone-input/base-country-picker.js

@@ -101,6 +101,8 @@ export default function CountryPicker(props) {
         width: 0
       },
       props: {
+        // https://github.com/uber/baseweb/issues/3846
+        autoComplete: 'chrome-off',
         'aria-label': 'Select country'
       }
     },

package/esm/popover/popover.js

@@ -41,22 +41,22 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
-import getBuiId from '../utils/get-bui-id.js';
 import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, ANIMATE_OUT_TIME, ANIMATE_IN_TIME, POPOVER_MARGIN } from './constants.js';
 import { Layer, TetherBehavior } from '../layer/index.js';
 import { Arrow as StyledArrow, Body as StyledBody, Inner as StyledInner, Hidden } from './styled-components.js';
 import { fromPopperPlacement } from './utils.js';
 import defaultProps from './default-props.js';
+import { useUID } from 'react-uid';
 
-var Popover = /*#__PURE__*/function (_React$Component) {
-  _inherits(Popover, _React$Component);
+var PopoverInner = /*#__PURE__*/function (_React$Component) {
+  _inherits(PopoverInner, _React$Component);
 
-  var _super = _createSuper(Popover);
+  var _super = _createSuper(PopoverInner);
 
-  function Popover() {
+  function PopoverInner() {
     var _this;
 
-    _classCallCheck(this, Popover);
+    _classCallCheck(this, PopoverInner);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -74,8 +74,6 @@ var Popover = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onMouseLeaveTimer", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "generatedId", '');
-
     _defineProperty(_assertThisInitialized(_this), "anchorRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/React.createRef());
@@ -192,10 +190,9 @@ var Popover = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(Popover, [{
+  _createClass(PopoverInner, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.generatedId = getBuiId();
       this.setState({
         isMounted: true
       });
@@ -330,7 +327,7 @@ var Popover = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getPopoverIdAttr",
     value: function getPopoverIdAttr() {
-      return this.props.id || this.generatedId || null;
+      return this.props.id || null;
     }
   }, {
     key: "getAnchorProps",
@@ -480,7 +477,8 @@ var Popover = /*#__PURE__*/function (_React$Component) {
       var defaultPopperOptions = {
         modifiers: {
           preventOverflow: {
-            enabled: !this.props.ignoreBoundary
+            enabled: !this.props.ignoreBoundary,
+            padding: 0
           }
         }
       }; // Only render popover on the browser (portals aren't supported server-side)
@@ -491,7 +489,8 @@ var Popover = /*#__PURE__*/function (_React$Component) {
             key: "new-layer",
             mountNode: this.props.mountNode,
             onEscape: this.props.onEsc,
-            onDocumentClick: this.onDocumentClick,
+            onDocumentClick: this.isHoverTrigger() ? undefined : this.onDocumentClick,
+            isHoverLayer: this.isHoverTrigger(),
             onMount: function onMount() {
               return _this4.setState({
                 isLayerMounted: true
@@ -529,10 +528,20 @@ var Popover = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return Popover;
-}(React.Component);
+  return PopoverInner;
+}(React.Component); // Remove when Popover is converted to a functional component.
+
+
+_defineProperty(PopoverInner, "defaultProps", defaultProps);
 
-_defineProperty(Popover, "defaultProps", defaultProps);
+var Popover = function Popover(props) {
+  var innerRef = props.innerRef;
+  return /*#__PURE__*/React.createElement(PopoverInner, _extends({
+    id: props.id || useUID(),
+    ref: innerRef
+  }, props));
+};
 
+Popover.defaultProps = defaultProps;
 export default Popover;
 /* eslint-enable react/no-find-dom-node */

package/esm/select/select-component.js

@@ -60,7 +60,7 @@ import SearchIconComponent from '../icon/search.js';
 import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
 import { Spinner } from '../spinner/index.js';
-import getBuiId from '../utils/get-bui-id.js';
+import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
 import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
 import defaultProps from './default-props.js';
@@ -128,7 +128,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
   // 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.
-  // id generated for the listbox. used by screenreaders to associate the input with the menu it controls
   function Select(props) {
     var _this;
 
@@ -152,8 +151,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "options", []);
 
-    _defineProperty(_assertThisInitialized(_this), "listboxId", getBuiId());
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       activeDescendant: null,
       inputValue: '',
@@ -209,18 +206,17 @@ var Select = /*#__PURE__*/function (_React$Component) {
           _this.openAfterFocus = _this.props.openOnClick;
 
           _this.focus();
-
-          return;
         }
 
         if (!_this.state.isOpen) {
           _this.setState({
             isOpen: true,
+            isFocused: true,
             isPseudoFocused: false
           });
-
-          return;
         }
+
+        return;
       } // 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
@@ -236,11 +232,17 @@ var Select = /*#__PURE__*/function (_React$Component) {
       if (!_this.props.searchable) {
         _this.focus();
 
-        _this.setState(function (prev) {
-          return {
-            isOpen: !prev.isOpen
-          };
-        });
+        if (_this.state.isOpen) {
+          _this.setState({
+            isOpen: false,
+            isFocused: false
+          });
+        } else {
+          _this.setState({
+            isOpen: true,
+            isFocused: true
+          });
+        }
 
         return;
       } // Cases below only apply to searchable Select component.
@@ -816,7 +818,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderInput",
-    value: function renderInput() {
+    value: function renderInput(listboxId) {
       var _this4 = this;
 
       var _this$props$overrides3 = this.props.overrides,
@@ -845,25 +847,29 @@ var Select = /*#__PURE__*/function (_React$Component) {
           "aria-disabled": this.props.disabled,
           "aria-label": label,
           "aria-labelledby": this.props['aria-labelledby'],
-          "aria-owns": this.state.isOpen ? this.listboxId : null,
+          "aria-owns": this.state.isOpen ? listboxId : null,
           "aria-required": this.props.required || null,
           onFocus: this.handleInputFocus,
-          ref: this.handleInputRef,
           tabIndex: 0
         }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
-          "aria-hidden": "true",
+          "aria-hidden": true,
           id: this.props.id || null,
-          onFocus: this.handleInputFocus,
+          ref: this.handleInputRef,
           style: {
-            display: 'none'
-          }
+            opacity: 0,
+            width: 0,
+            overflow: 'hidden',
+            border: 'none',
+            padding: 0
+          },
+          tabIndex: -1
         }));
       }
 
       return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
         "aria-activedescendant": this.state.activeDescendant,
         "aria-autocomplete": "list",
-        "aria-controls": this.state.isOpen ? this.listboxId : null,
+        "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,
@@ -986,7 +992,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function filterOptions(excludeOptions) {
       var _this5 = this;
 
-      var filterValue = this.state.inputValue; // apply filter function
+      var filterValue = this.state.inputValue.trim(); // apply filter function
 
       if (this.props.filterOptions) {
         this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
@@ -1116,63 +1122,65 @@ var Select = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement(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 flowtype/no-weak-types
-        , _extends({
-          ref: function ref(_ref4) {
-            if (!_ref4) return;
-            _this6.anchor = _ref4.anchorRef;
-          },
-          focusLock: false,
-          mountNode: _this6.props.mountNode,
-          onEsc: function onEsc() {
-            return _this6.closeMenu();
-          },
-          isOpen: isOpen,
-          popoverMargin: 0,
-          content: function content() {
-            var dropdownProps = {
-              error: _this6.props.error,
-              positive: _this6.props.positive,
-              getOptionLabel: _this6.props.getOptionLabel || _this6.getOptionLabel.bind(_this6, locale),
-              id: _this6.listboxId,
-              isLoading: _this6.props.isLoading,
-              labelKey: _this6.props.labelKey,
-              maxDropdownHeight: _this6.props.maxDropdownHeight,
-              multi: multi,
-              noResultsMsg: noResultsMsg,
-              onActiveDescendantChange: _this6.handleActiveDescendantChange,
-              onItemSelect: _this6.selectValue,
-              options: options,
-              overrides: overrides,
-              required: _this6.props.required,
-              searchable: _this6.props.searchable,
-              size: _this6.props.size,
-              type: type,
-              value: valueArray,
-              valueKey: _this6.props.valueKey,
-              width: _this6.anchor.current ? _this6.anchor.current.clientWidth : null,
-              keyboardControlNode: _this6.anchor
-            };
-            return /*#__PURE__*/React.createElement(SelectDropdown, _extends({
-              innerRef: _this6.dropdown
-            }, dropdownProps));
-          },
-          placement: PLACEMENT.bottom
-        }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
-          onBlur: _this6.handleBlur,
-          "data-baseweb": "select"
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
-          onKeyDown: _this6.handleKeyDown,
-          onClick: _this6.handleClick,
-          onTouchEnd: _this6.handleTouchEnd,
-          onTouchMove: _this6.handleTouchMove,
-          onTouchStart: _this6.handleTouchStart
-        }, sharedProps, controlContainerProps), type === TYPE.search ? _this6.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this6.renderValue(valueArray, isOpen, locale), _this6.renderInput(), _this6.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this6.props.placeholder !== 'undefined' ? _this6.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this6.renderLoading(), _this6.renderClear(), type === TYPE.select ? _this6.renderArrow() : null))));
+      return /*#__PURE__*/React.createElement(UIDConsumer, null, function (listboxId) {
+        return /*#__PURE__*/React.createElement(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 flowtype/no-weak-types
+          , _extends({
+            innerRef: function innerRef(ref) {
+              if (!ref) return;
+              _this6.anchor = ref.anchorRef;
+            },
+            focusLock: false,
+            mountNode: _this6.props.mountNode,
+            onEsc: function onEsc() {
+              return _this6.closeMenu();
+            },
+            isOpen: isOpen,
+            popoverMargin: 0,
+            content: function content() {
+              var dropdownProps = {
+                error: _this6.props.error,
+                positive: _this6.props.positive,
+                getOptionLabel: _this6.props.getOptionLabel || _this6.getOptionLabel.bind(_this6, locale),
+                id: listboxId,
+                isLoading: _this6.props.isLoading,
+                labelKey: _this6.props.labelKey,
+                maxDropdownHeight: _this6.props.maxDropdownHeight,
+                multi: multi,
+                noResultsMsg: noResultsMsg,
+                onActiveDescendantChange: _this6.handleActiveDescendantChange,
+                onItemSelect: _this6.selectValue,
+                options: options,
+                overrides: overrides,
+                required: _this6.props.required,
+                searchable: _this6.props.searchable,
+                size: _this6.props.size,
+                type: type,
+                value: valueArray,
+                valueKey: _this6.props.valueKey,
+                width: _this6.anchor.current ? _this6.anchor.current.clientWidth : null,
+                keyboardControlNode: _this6.anchor
+              };
+              return /*#__PURE__*/React.createElement(SelectDropdown, _extends({
+                innerRef: _this6.dropdown
+              }, dropdownProps));
+            },
+            placement: PLACEMENT.bottom
+          }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
+            onBlur: _this6.handleBlur,
+            "data-baseweb": "select"
+          }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
+            onKeyDown: _this6.handleKeyDown,
+            onClick: _this6.handleClick,
+            onTouchEnd: _this6.handleTouchEnd,
+            onTouchMove: _this6.handleTouchMove,
+            onTouchStart: _this6.handleTouchStart
+          }, sharedProps, controlContainerProps), type === TYPE.search ? _this6.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this6.renderValue(valueArray, isOpen, locale), _this6.renderInput(listboxId), _this6.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this6.props.placeholder !== 'undefined' ? _this6.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this6.renderLoading(), _this6.renderClear(), type === TYPE.select ? _this6.renderArrow() : null))));
+        });
       });
     }
   }]);