baseui 10.4.0 → 10.7.1

package/es/map-marker/constants.js

@@ -0,0 +1,69 @@
+/*
+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.
+*/
+export const NEEDLE_SIZES = Object.freeze({
+  none: 'none',
+  short: 'short',
+  medium: 'medium',
+  tall: 'tall'
+});
+export const NEEDLE_HEIGHTS = Object.freeze({
+  [NEEDLE_SIZES.none]: 0,
+  [NEEDLE_SIZES.short]: 4,
+  [NEEDLE_SIZES.medium]: 12,
+  [NEEDLE_SIZES.tall]: 20
+});
+export const PINHEAD_SIZES_SHAPES = Object.freeze({
+  xSmallCircle: 'x-small-circle',
+  xSmallSquare: 'x-small-square',
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+export const xSmallPinheadDimension = {
+  height: 16,
+  icon: 4
+};
+export const PINHEAD_DIMENSIONS = Object.freeze({
+  [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadDimension,
+  [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadDimension,
+  [PINHEAD_SIZES_SHAPES.small]: {
+    height: 24,
+    icon: 16
+  },
+  [PINHEAD_SIZES_SHAPES.medium]: {
+    height: 36,
+    icon: 16
+  },
+  [PINHEAD_SIZES_SHAPES.large]: {
+    height: 48,
+    icon: 24
+  }
+});
+export const PINHEAD_TYPES = Object.freeze({
+  floating: 'floating',
+  fixed: 'fixed'
+});
+export const FLOATING_MARKER_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+export const FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
+  none: 'none',
+  topLeft: 'top-left',
+  topRight: 'top-right',
+  bottomRight: 'bottom-right',
+  bottomLeft: 'bottom-left'
+});
+export const FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
+  circle: 'circle',
+  square: 'square'
+});
+export const dragShadowHeight = 4;
+export const dragShadowMarginTop = 6;
+export const dragShadowWidth = 6;
+export const anchorSize = 16;

package/es/map-marker/fixed-marker.js

@@ -0,0 +1,98 @@
+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); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { useStyletron } from '../styles/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { PINHEAD_TYPES, NEEDLE_SIZES, NEEDLE_HEIGHTS, PINHEAD_SIZES_SHAPES, dragShadowHeight, dragShadowMarginTop, dragShadowWidth } from './constants.js';
+import PinHead from './pin-head.js';
+import { FixedMarkerDragContainer as StyledFixedMarkerDragContainer, FixedMarkerRoot as StyledRoot, Needle as StyledNeedle, DragShadow as StyledDragShadow, DragShadowContainer as StyledDragShadowContainer } from './styled-components.js';
+
+const Needle = ({
+  size,
+  background,
+  overrides = {}
+}) => {
+  const [Needle, needleProps] = getOverrides(overrides.Needle, StyledNeedle);
+  return /*#__PURE__*/React.createElement(Needle, _extends({
+    $background: background,
+    $height: NEEDLE_HEIGHTS[size]
+  }, needleProps));
+};
+
+const DragShadow = ({
+  background,
+  dragging,
+  height,
+  overrides = {}
+}) => {
+  const [DragShadowContainer, dragShadowContainerProps] = getOverrides(overrides.DragShadowContainer, StyledDragShadowContainer);
+  const [DragShadow, dragShadowProps] = getOverrides(overrides.DragShadow, StyledDragShadow);
+  return /*#__PURE__*/React.createElement(DragShadowContainer, _extends({
+    $width: dragShadowWidth,
+    $height: height,
+    $dragging: dragging
+  }, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
+    $width: dragShadowWidth,
+    $background: background
+  }, dragShadowProps)));
+};
+
+const FixedMarker = ({
+  size = PINHEAD_SIZES_SHAPES.medium,
+  needle = NEEDLE_SIZES.medium,
+  label,
+  startEnhancer,
+  endEnhancer,
+  color,
+  background,
+  dragging = false,
+  overrides = {}
+}) => {
+  const [, theme] = useStyletron();
+  const {
+    colors: {
+      backgroundInversePrimary,
+      primaryB
+    }
+  } = theme;
+  color = color || primaryB;
+  background = background || backgroundInversePrimary;
+  const doesPinHeadTransformOnDrag = needle !== NEEDLE_SIZES.none;
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [FixedMarkerDragContainer, fixedMarkerDragContainerProps] = getOverrides(overrides.DragContainer, StyledFixedMarkerDragContainer);
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    "data-baseweb": "fixed-map-marker"
+  }, rootProps), /*#__PURE__*/React.createElement(FixedMarkerDragContainer, _extends({
+    $translateAmount: dragShadowMarginTop + dragShadowHeight,
+    $performTranslate: doesPinHeadTransformOnDrag && dragging
+  }, fixedMarkerDragContainerProps), /*#__PURE__*/React.createElement(PinHead, _extends({
+    size: size,
+    label: label
+  }, startEnhancer ? {
+    startEnhancer
+  } : {}, endEnhancer ? {
+    endEnhancer
+  } : {}, {
+    color: color,
+    background: background,
+    type: PINHEAD_TYPES.fixed,
+    overrides: overrides
+  })), /*#__PURE__*/React.createElement(Needle, {
+    size: needle,
+    background: background,
+    overrides: overrides
+  })), doesPinHeadTransformOnDrag && /*#__PURE__*/React.createElement(DragShadow, {
+    background: background,
+    dragging: dragging,
+    height: dragShadowMarginTop + dragShadowHeight,
+    overrides: overrides
+  }));
+};
+
+export default FixedMarker;

package/es/map-marker/floating-marker.js

@@ -0,0 +1,65 @@
+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); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { useStyletron } from '../styles/index.js';
+import PinHead from './pin-head.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { FloatingMarkerRoot as StyledRoot, FloatingMarkerAnchorContainer as StyledFloatingMarkerAnchorContainer, FloatingMarkerPinHeadContainer as StyledFloatingMarkerPinHeadContainer } from './styled-components.js';
+import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, anchorSize } from './constants.js';
+
+const FloatingMarker = ({
+  color,
+  background,
+  label,
+  size = PINHEAD_SIZES_SHAPES.medium,
+  anchor = FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft,
+  endEnhancer,
+  startEnhancer,
+  anchorType = FLOATING_MARKER_ANCHOR_TYPES.circle,
+  overrides = {}
+}) => {
+  const [, theme] = useStyletron();
+  const {
+    colors: {
+      backgroundPrimary,
+      backgroundInversePrimary,
+      primaryA,
+      primaryB
+    }
+  } = theme;
+  color = color || primaryA;
+  background = background || backgroundPrimary;
+  const anchorPinHeadSize = anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle ? PINHEAD_SIZES_SHAPES.xSmallCircle : PINHEAD_SIZES_SHAPES.xSmallSquare;
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [FloatingMarkerPinHeadContainer, floatingMarkerPinHeadContainerProps] = getOverrides(overrides.PinHeadContainer, StyledFloatingMarkerPinHeadContainer);
+  const [FloatingMarkerAnchorContainer, floatingMarkerAnchorContainerProps] = getOverrides(overrides.AnchorContainer, StyledFloatingMarkerAnchorContainer);
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    "data-baseweb": "floating-map-marker"
+  }, rootProps), /*#__PURE__*/React.createElement(FloatingMarkerPinHeadContainer, _extends({
+    $anchor: anchor,
+    $anchorSize: anchorSize
+  }, floatingMarkerPinHeadContainerProps), /*#__PURE__*/React.createElement(PinHead, {
+    size: size,
+    color: color,
+    background: background,
+    type: PINHEAD_TYPES.floating,
+    label: label,
+    startEnhancer: startEnhancer,
+    endEnhancer: endEnhancer,
+    overrides: overrides
+  })), anchor !== FLOATING_MARKER_ANCHOR_POSITIONS.none && /*#__PURE__*/React.createElement(FloatingMarkerAnchorContainer, floatingMarkerAnchorContainerProps, /*#__PURE__*/React.createElement(PinHead, {
+    size: anchorPinHeadSize,
+    color: primaryB,
+    background: backgroundInversePrimary,
+    type: PINHEAD_TYPES.fixed,
+    overrides: overrides
+  })));
+};
+
+export default FloatingMarker;

package/es/map-marker/index.js

@@ -0,0 +1,9 @@
+/*
+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.
+*/
+export { default as FixedMarker } from './fixed-marker.js';
+export { default as FloatingMarker } from './floating-marker.js';
+export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES } from './constants.js';

package/es/map-marker/pin-head.js

@@ -0,0 +1,108 @@
+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); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { useStyletron, styled } from '../styles/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { InnerXSmallAnchor as StyledInnerXSmallAnchor, OuterXSmallAnchor as StyledOuterXSmallAnchor, PinHead as StyledPinHead } from './styled-components.js';
+import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES } from './constants.js';
+export const _ContentItem = styled('div', ({
+  $theme,
+  $color,
+  $height,
+  $size
+}) => {
+  const match = {
+    [PINHEAD_SIZES_SHAPES.xSmallCircle]: 'LabelSmall',
+    [PINHEAD_SIZES_SHAPES.xSmallSquare]: 'LabelSmall',
+    [PINHEAD_SIZES_SHAPES.small]: 'LabelSmall',
+    [PINHEAD_SIZES_SHAPES.medium]: 'LabelMedium',
+    [PINHEAD_SIZES_SHAPES.large]: 'LabelLarge'
+  };
+  return { ...$theme.typography[match[$size]],
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    lineHeight: `${$height}px`,
+    height: `${$height}px`,
+    color: $color
+  };
+});
+_ContentItem.displayName = "_ContentItem";
+
+const PinHead = ({
+  size = PINHEAD_SIZES_SHAPES.medium,
+  label = '',
+  startEnhancer: StartEnhancer,
+  endEnhancer: EndEnhancer,
+  color,
+  background,
+  type = PINHEAD_TYPES.fixed,
+  anchorType,
+  overrides = {}
+}) => {
+  const [, theme] = useStyletron();
+  const {
+    colors: {
+      backgroundPrimary,
+      primaryA
+    }
+  } = theme;
+  color = color || backgroundPrimary;
+  background = background || primaryA;
+  const activeElements = [label, StartEnhancer, EndEnhancer].filter(x => x);
+  const gridTemplateColumns = activeElements.map(() => 'auto').join(' ');
+  const forceCircle = activeElements.length === 1 && !label;
+  const {
+    height,
+    icon
+  } = PINHEAD_DIMENSIONS[size];
+  const [PinHead, pinHeadProps] = getOverrides(overrides.PinHead, StyledPinHead);
+  const [ContentItem, contentItemProps] = getOverrides(overrides.PinHeadContent, _ContentItem);
+  const [InnerXSmallAnchor, innerXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor);
+  const [OuterXSmallAnchor, outerXSmallAnchorProps] = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor);
+
+  if (type === PINHEAD_TYPES.fixed && (size === PINHEAD_SIZES_SHAPES.xSmallSquare || size === PINHEAD_SIZES_SHAPES.xSmallCircle)) {
+    const round = size === PINHEAD_SIZES_SHAPES.xSmallCircle;
+    return /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
+      $round: round,
+      $background: background,
+      $size: height
+    }, outerXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXSmallAnchor, _extends({
+      $color: color,
+      $round: round,
+      $size: icon
+    }, innerXSmallAnchorProps)));
+  }
+
+  return /*#__PURE__*/React.createElement(PinHead, _extends({
+    $background: background,
+    $height: height,
+    $gridTemplateColumns: gridTemplateColumns,
+    $forceCircle: forceCircle,
+    $type: type
+  }, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
+    $height: height,
+    $color: color,
+    $size: size
+  }, contentItemProps), /*#__PURE__*/React.createElement(StartEnhancer, {
+    size: icon
+  })), label && /*#__PURE__*/React.createElement(ContentItem, _extends({
+    $height: height,
+    $color: color,
+    $size: size
+  }, contentItemProps), label), EndEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
+    $height: height,
+    $color: color,
+    $size: size
+  }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
+    size: icon
+  })));
+};
+
+export default PinHead;

package/es/map-marker/styled-components.js

@@ -0,0 +1,156 @@
+/*
+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.
+*/
+import { styled } from '../styles/index.js';
+import { FLOATING_MARKER_ANCHOR_POSITIONS, xSmallPinheadDimension } from './constants.js';
+export const getAnchorTransform = (anchor, anchorSize) => ({
+  [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
+  [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
+  [FLOATING_MARKER_ANCHOR_POSITIONS.topRight]: `translate(-100%, ${anchorSize}px)`,
+  [FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft]: `translate(${anchorSize}px, -100%)`,
+  [FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`
+})[anchor];
+export const DragShadowContainer = styled('div', ({
+  $theme,
+  $height,
+  $width,
+  $dragging
+}) => ({
+  width: `${$width}px`,
+  height: `${$height}px`,
+  opacity: $dragging ? 1 : 0,
+  visibility: $dragging ? 'visible' : 'hidden',
+  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+  position: 'relative',
+  boxShadow: $theme.lighting.shadow600
+}));
+DragShadowContainer.displayName = "DragShadowContainer";
+export const DragShadow = styled('div', ({
+  $theme,
+  $background,
+  $width
+}) => ({
+  background: $background,
+  borderRadius: '50%',
+  width: `${$width}px`,
+  height: `${4}px`,
+  position: 'absolute',
+  bottom: 0
+}));
+DragShadow.displayName = "DragShadow";
+export const Needle = styled('div', ({
+  $theme,
+  $background,
+  $height
+}) => ({
+  background: $background,
+  width: '4px',
+  height: `${$height}px`,
+  boxShadow: $theme.lighting.shadow600
+}));
+Needle.displayName = "Needle";
+export const FloatingMarkerRoot = styled('div', () => ({
+  position: 'relative',
+  height: `${xSmallPinheadDimension.height}px`,
+  width: `${xSmallPinheadDimension.height}px`
+}));
+FloatingMarkerRoot.displayName = "FloatingMarkerRoot";
+export const FloatingMarkerPinHeadContainer = styled('div', ({
+  $theme,
+  $anchor,
+  $anchorSize
+}) => ({
+  position: 'absolute',
+  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+  transform: getAnchorTransform($anchor, $anchorSize)
+}));
+FloatingMarkerPinHeadContainer.displayName = "FloatingMarkerPinHeadContainer";
+export const FloatingMarkerAnchorContainer = styled('div', () => ({
+  position: 'absolute'
+}));
+FloatingMarkerAnchorContainer.displayName = "FloatingMarkerAnchorContainer";
+export const FixedMarkerRoot = styled('div', () => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column'
+}));
+FixedMarkerRoot.displayName = "FixedMarkerRoot";
+export const FixedMarkerDragContainer = styled('div', ({
+  $theme,
+  $translateAmount,
+  $performTranslate
+}) => {
+  return {
+    transform: `translateY(${$performTranslate ? '0px' : `${$translateAmount}px`})`,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column'
+  };
+});
+FixedMarkerDragContainer.displayName = "FixedMarkerDragContainer";
+export const OuterXSmallAnchor = styled('div', ({
+  $theme,
+  $round,
+  $background,
+  $size
+}) => ({
+  background: $background,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+  boxShadow: $theme.lighting.shadow600
+}));
+OuterXSmallAnchor.displayName = "OuterXSmallAnchor";
+export const InnerXSmallAnchor = styled('div', ({
+  $round,
+  $color,
+  $size
+}) => ({
+  background: $color,
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0
+}));
+InnerXSmallAnchor.displayName = "InnerXSmallAnchor";
+export const PinHead = styled('div', ({
+  $theme,
+  $height,
+  $background,
+  $gridTemplateColumns,
+  $type,
+  $forceCircle
+}) => {
+  const sharedStyles = {
+    fixed: {
+      padding: '0px 12px',
+      borderRadius: `${$height}px`
+    },
+    floating: {
+      padding: '0px 8px'
+    }
+  };
+  return {
+    background: $background,
+    height: `${$height}px`,
+    display: 'grid',
+    gridTemplateColumns: $gridTemplateColumns,
+    gap: '8px',
+    boxShadow: $theme.lighting.shadow600,
+    whiteSpace: 'nowrap',
+    ...sharedStyles[$type],
+    ...($forceCircle && {
+      width: `${$height}px`,
+      display: 'flex',
+      justifyContent: 'center',
+      boxSizing: 'border-box'
+    })
+  };
+});
+PinHead.displayName = "PinHead";

package/es/map-marker/types.js

@@ -0,0 +1,8 @@
+/*
+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.
+*/
+import * as React from 'react';
+import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES } from './constants.js';

package/es/menu/maybe-child-menu.js

@@ -28,6 +28,7 @@ export default function MaybeChildMenu(props) {
   return /*#__PURE__*/React.createElement(NestedMenuContext.Consumer, null, ctx => {
     return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
       focusLock: false,
+      autoFocus: false,
       isOpen: props.isOpen,
       renderAll: props.renderAll,
       content: ChildMenu,

package/es/popover/popover.js

@@ -13,7 +13,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 import { getOverride, getOverrideProps } from '../helpers/overrides.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';
@@ -156,7 +156,7 @@ class PopoverInner extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     this.init(prevProps, prevState);
 
-    if (this.props.autoFocus && this.props.focusLock && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+    if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
       this.setState({
         autoFocusAfterPositioning: true
       });
@@ -451,9 +451,10 @@ class PopoverInner extends React.Component {
           disabled: !this.props.focusLock,
           noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
           ,
-          returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
-          autoFocus: this.state.autoFocusAfterPositioning
-        }, this.renderPopover(renderedContent)))));
+          returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+          autoFocus: this.state.autoFocusAfterPositioning,
+          focusOptions: this.props.focusOptions
+        }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {
           key: "hidden-layer"

package/es/popover/stateful-container.js

@@ -25,6 +25,10 @@ class StatefulContainer extends React.Component {
         this.props.onBlur(e);
       }
 
+      if (this.props.focusLock || this.props.autoFocus) {
+        return;
+      }
+
       this.close();
     });
 
@@ -158,7 +162,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     } = this.props;
     const popoverProps = {
       accessibilityType,
@@ -182,7 +187,8 @@ class StatefulContainer extends React.Component {
       returnFocus,
       showArrow,
       triggerType,
-      popoverMargin
+      popoverMargin,
+      focusOptions
     };
 
     if (dismissOnClickOutside) {

package/es/rating/emoticon-rating.js

@@ -144,7 +144,9 @@ class EmoticonRating extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "emoticon-rating",
       role: "radiogroup",
-      onBlur: () => this.updatePreview(undefined),
+      onBlur: e => {
+        if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
+      },
       onMouseLeave: () => this.updatePreview(undefined)
     }, rootProps), this.renderRatingContents());
   }

package/es/rating/star-rating.js

@@ -147,7 +147,9 @@ class StarRating extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "star-rating",
       role: "radiogroup",
-      onBlur: () => this.updatePreview(undefined),
+      onBlur: e => {
+        if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
+      },
       onMouseLeave: () => this.updatePreview(undefined)
     }, rootProps), this.renderRatingContents());
   }

package/es/select/select-component.js

@@ -105,7 +105,7 @@ class Select extends React.Component {
       isPseudoFocused: false
     });
 
-    _defineProperty(this, "isMounted", false);
+    _defineProperty(this, "isItMounted", false);
 
     _defineProperty(this, "handleTouchOutside", event => {
       if (containsNode(this.dropdown.current, event.target)) return;
@@ -238,7 +238,7 @@ class Select extends React.Component {
         this.props.onBlur(event);
       }
 
-      if (this.isMounted) {
+      if (this.isItMounted) {
         this.setState({
           isFocused: false,
           isOpen: false,
@@ -565,7 +565,16 @@ class Select extends React.Component {
       this.focus();
     }
 
-    this.isMounted = true;
+    this.isItMounted = true;
+
+    if (this.props.methodsRef) {
+      const {
+        methodsRef
+      } = this.props;
+      methodsRef.current = {
+        setDropdownOpen: this.handleDropdownOpen.bind(this)
+      };
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -592,12 +601,18 @@ class Select extends React.Component {
       document.removeEventListener('click', this.handleClickOutside);
     }
 
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
     if (!this.input) return;
     this.input.focus();
+  }
+
+  handleDropdownOpen(nextOpenState) {
+    this.setState({
+      isOpen: nextOpenState
+    });
   } // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
 
@@ -782,7 +797,6 @@ class Select extends React.Component {
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
     return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-      size: 16,
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
@@ -956,6 +970,7 @@ class Select extends React.Component {
         if (!ref) return;
         this.anchor = ref.anchorRef;
       },
+      autoFocus: false,
       focusLock: false,
       mountNode: this.props.mountNode,
       onEsc: () => this.closeMenu(),