baseui 10.5.0 → 10.7.2

package/esm/datepicker/styled-components.js

@@ -12,12 +12,38 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
-import { ORIENTATION } from './constants.js';
+import { ORIENTATION, DENSITY } from './constants.js';
 /**
  * Main component container element
  */
 
-export var StyledInputWrapper = styled('div', function () {
+export var StyledInputWrapper = styled('div', function (props) {
+  var $separateRangeInputs = props.$separateRangeInputs;
+  return _objectSpread({
+    width: '100%'
+  }, $separateRangeInputs ? {
+    display: 'flex',
+    justifyContent: 'center'
+  } : {});
+});
+StyledInputWrapper.displayName = "StyledInputWrapper";
+export var StyledInputLabel = styled('div', function (_ref) {
+  var $theme = _ref.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    marginBottom: $theme.sizing.scale300
+  });
+});
+StyledInputLabel.displayName = "StyledInputLabel";
+export var StyledStartDate = styled('div', function (_ref2) {
+  var $theme = _ref2.$theme;
+  return {
+    width: '100%',
+    marginRight: $theme.sizing.scale300
+  };
+});
+StyledStartDate.displayName = "StyledStartDate";
+export var StyledEndDate = styled('div', function (_ref3) {
+  var $theme = _ref3.$theme;
   return {
     width: '100%'
   };
@@ -26,7 +52,7 @@ export var StyledInputWrapper = styled('div', function () {
  * Main component container element
  */
 
-StyledInputWrapper.displayName = "StyledInputWrapper";
+StyledEndDate.displayName = "StyledEndDate";
 export var StyledRoot = styled('div', function (props) {
   var _props$$theme = props.$theme,
       typography = _props$$theme.typography,
@@ -53,17 +79,18 @@ export var StyledMonthContainer = styled('div', function (props) {
 });
 StyledMonthContainer.displayName = "StyledMonthContainer";
 export var StyledCalendarContainer = styled('div', function (props) {
-  var sizing = props.$theme.sizing;
+  var sizing = props.$theme.sizing,
+      $density = props.$density;
   return {
-    paddingTop: sizing.scale400,
-    paddingBottom: sizing.scale500,
-    paddingLeft: sizing.scale600,
-    paddingRight: sizing.scale600
+    paddingTop: sizing.scale300,
+    paddingBottom: $density === DENSITY.high ? sizing.scale400 : sizing.scale300,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500
   };
 });
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
-export var StyledSelectorContainer = styled('div', function (_ref) {
-  var $theme = _ref.$theme;
+export var StyledSelectorContainer = styled('div', function (_ref4) {
+  var $theme = _ref4.$theme;
   var textAlign = $theme.direction === 'rtl' ? 'right' : 'left';
   return {
     marginBottom: $theme.sizing.scale600,
@@ -75,16 +102,18 @@ export var StyledSelectorContainer = styled('div', function (_ref) {
 StyledSelectorContainer.displayName = "StyledSelectorContainer";
 export var StyledCalendarHeader = styled('div', function (props) {
   var _props$$theme2 = props.$theme,
+      typography = _props$$theme2.typography,
       borders = _props$$theme2.borders,
       colors = _props$$theme2.colors,
-      sizing = _props$$theme2.sizing;
-  return {
+      sizing = _props$$theme2.sizing,
+      $density = props.$density;
+  return _objectSpread(_objectSpread({}, $density === DENSITY.high ? typography.LabelMedium : typography.LabelLarge), {}, {
     color: colors.calendarHeaderForeground,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: sizing.scale500,
-    paddingBottom: sizing.scale500,
+    paddingTop: sizing.scale600,
+    paddingBottom: sizing.scale300,
     paddingLeft: sizing.scale600,
     paddingRight: sizing.scale600,
     backgroundColor: colors.calendarHeaderBackground,
@@ -93,8 +122,8 @@ export var StyledCalendarHeader = styled('div', function (props) {
     borderBottomRightRadius: 0,
     borderBottomLeftRadius: 0,
     // account for the left/right arrow heights
-    minHeight: "calc(".concat(sizing.scale800, " + ").concat(sizing.scale0, ")")
-  };
+    minHeight: $density === DENSITY.high ? "calc(".concat(sizing.scale800, " + ").concat(sizing.scale0, ")") : sizing.scale950
+  });
 });
 StyledCalendarHeader.displayName = "StyledCalendarHeader";
 export var StyledMonthHeader = styled('div', function (props) {
@@ -106,19 +135,24 @@ export var StyledMonthHeader = styled('div', function (props) {
 });
 StyledMonthHeader.displayName = "StyledMonthHeader";
 export var StyledMonthYearSelectButton = styled('button', function (props) {
-  return _objectSpread(_objectSpread({}, props.$theme.typography.font200), {}, {
+  var _props$$theme3 = props.$theme,
+      typography = _props$$theme3.typography,
+      colors = _props$$theme3.colors,
+      $isFocusVisible = props.$isFocusVisible,
+      $density = props.$density;
+  return _objectSpread(_objectSpread({}, $density === DENSITY.high ? typography.LabelMedium : typography.LabelLarge), {}, {
     alignItems: 'center',
     backgroundColor: 'transparent',
     borderLeftWidth: 0,
     borderRightWidth: 0,
     borderTopWidth: 0,
     borderBottomWidth: 0,
-    color: props.$theme.colors.calendarHeaderForeground,
+    color: colors.calendarHeaderForeground,
     cursor: 'pointer',
     display: 'flex',
     outline: 'none',
     ':focus': {
-      boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : 'none'
+      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none'
     }
   });
 });
@@ -132,12 +166,13 @@ export var StyledMonthYearSelectIconContainer = styled('span', function (props)
 });
 StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
 
-function getArrowBtnStyle(_ref3) {
-  var $theme = _ref3.$theme,
-      $disabled = _ref3.$disabled,
-      $isFocusVisible = _ref3.$isFocusVisible;
+function getArrowBtnStyle(_ref6) {
+  var $theme = _ref6.$theme,
+      $disabled = _ref6.$disabled,
+      $isFocusVisible = _ref6.$isFocusVisible;
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
     cursor: $disabled ? 'default' : 'pointer',
     backgroundColor: 'transparent',
@@ -149,8 +184,6 @@ function getArrowBtnStyle(_ref3) {
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -175,22 +208,22 @@ export var StyledWeek = styled('div', function (props) {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100
+    marginBottom: sizing.scale0
   };
 });
 StyledWeek.displayName = "StyledWeek";
 
 function generateDayStyles(defaultCode, defaultStyle) {
-  var _ref4;
+  var _ref7;
 
   var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
   var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
-  return _ref4 = {}, _defineProperty(_ref4, defaultCode, defaultStyle), _defineProperty(_ref4, codeForSM, defaultStyle), _defineProperty(_ref4, codeForEM, defaultStyle), _ref4;
+  return _ref7 = {}, _defineProperty(_ref7, defaultCode, defaultStyle), _defineProperty(_ref7, codeForSM, defaultStyle), _defineProperty(_ref7, codeForEM, defaultStyle), _ref7;
 } // eslint-disable-next-line flowtype/no-weak-types
 
 
-function getDayStyles(code, _ref5) {
-  var colors = _ref5.colors;
+function getDayStyles(code, _ref8) {
+  var colors = _ref8.colors;
   var undefinedDayStyle = {
     ':before': {
       content: null
@@ -393,24 +426,43 @@ export var StyledDay = styled('div', function (props) {
       $outsideMonth = props.$outsideMonth,
       $outsideMonthWithinRange = props.$outsideMonthWithinRange,
       $hasDateLabel = props.$hasDateLabel,
-      _props$$theme3 = props.$theme,
-      colors = _props$$theme3.colors,
-      sizing = _props$$theme3.sizing;
+      $density = props.$density,
+      _props$$theme4 = props.$theme,
+      colors = _props$$theme4.colors,
+      typography = _props$$theme4.typography,
+      sizing = _props$$theme4.sizing;
   var code = getDayStateCode(props);
-  return _objectSpread(_objectSpread({
+  var height;
+
+  if ($hasDateLabel) {
+    if ($density === DENSITY.high) {
+      height = '60px';
+    } else {
+      height = '70px';
+    }
+  } else {
+    if ($density === DENSITY.high) {
+      height = '40px';
+    } else {
+      height = '48px';
+    }
+  }
+
+  return _objectSpread(_objectSpread(_objectSpread({}, $density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium), {}, {
     boxSizing: 'border-box',
     position: 'relative',
     cursor: $disabled || !$peekNextMonth && $outsideMonth ? 'default' : 'pointer',
     color: colors.calendarForeground,
     display: 'inline-block',
-    width: sizing.scale1000,
-    height: $hasDateLabel ? '60px' : sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === DENSITY.high ? '42px' : '50px',
+    height: height,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: $density === DENSITY.high ? sizing.scale700 : sizing.scale900,
     textAlign: 'center',
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
-    paddingLeft: sizing.scale200,
-    paddingRight: sizing.scale200,
+    paddingLeft: sizing.scale300,
+    paddingRight: sizing.scale300,
     marginTop: 0,
     marginBottom: 0,
     marginLeft: 0,
@@ -431,10 +483,10 @@ export var StyledDay = styled('div', function (props) {
       display: 'inline-block',
       boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
-      height: '100%',
+      height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -450,10 +502,10 @@ export var StyledDay = styled('div', function (props) {
       borderBottomColor: colors.borderSelected,
       borderRightColor: colors.borderSelected,
       borderLeftColor: colors.borderSelected,
-      borderTopLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderTopRightRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomRightRadius: $hasDateLabel ? sizing.scale700 : '100%'
+      borderTopLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderTopRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomRightRadius: $hasDateLabel ? sizing.scale800 : '100%'
     }, getDayStyles(code, props.$theme)[':after'] || {}), $outsideMonthWithinRange ? {
       content: null
     } : {})
@@ -495,9 +547,9 @@ export var StyledDay = styled('div', function (props) {
 });
 StyledDay.displayName = "StyledDay";
 export var StyledDayLabel = styled('div', function (props) {
-  var _props$$theme4 = props.$theme,
-      typography = _props$$theme4.typography,
-      colors = _props$$theme4.colors,
+  var _props$$theme5 = props.$theme,
+      typography = _props$$theme5.typography,
+      colors = _props$$theme5.colors,
       $selected = props.$selected;
   return _objectSpread(_objectSpread({}, typography.ParagraphXSmall), {}, {
     color: $selected ? colors.contentInverseTertiary : colors.contentTertiary
@@ -505,16 +557,22 @@ export var StyledDayLabel = styled('div', function (props) {
 });
 StyledDayLabel.displayName = "StyledDayLabel";
 export var StyledWeekdayHeader = styled('div', function (props) {
-  var sizing = props.$theme.sizing;
-  return {
+  var _props$$theme6 = props.$theme,
+      typography = _props$$theme6.typography,
+      colors = _props$$theme6.colors,
+      sizing = _props$$theme6.sizing,
+      $density = props.$density;
+  return _objectSpread(_objectSpread({}, typography.LabelMedium), {}, {
+    color: colors.contentTertiary,
     boxSizing: 'border-box',
     position: 'relative',
     cursor: 'default',
     display: 'inline-block',
-    width: sizing.scale1000,
-    height: sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === DENSITY.high ? '42px' : '50px',
+    height: $density === DENSITY.high ? '40px' : '48px',
     textAlign: 'center',
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: sizing.scale900,
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
     paddingLeft: sizing.scale200,
@@ -523,8 +581,7 @@ export var StyledWeekdayHeader = styled('div', function (props) {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent'
-  };
+  });
 });
 StyledWeekdayHeader.displayName = "StyledWeekdayHeader";

package/esm/datepicker/types.js

@@ -7,4 +7,4 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
+import { ORIENTATION, STATE_CHANGE_TYPE, DENSITY } from './constants.js';

package/esm/datepicker/utils/calendar-header-helpers.js

@@ -0,0 +1,45 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+/*
+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 { DEFAULT_MONTHS } from '../constants.js';
+
+var getDefaultMonthItems = function getDefaultMonthItems(formatMonthLabel) {
+  return DEFAULT_MONTHS.map(function (month) {
+    return {
+      id: month.toString(),
+      label: formatMonthLabel(month)
+    };
+  });
+};
+
+export var filterMonthItems = function filterMonthItems(monthItems, filterList) {
+  return monthItems.map(function (month) {
+    if (!filterList.includes(Number(month.id))) {
+      return _objectSpread(_objectSpread({}, month), {}, {
+        disabled: true
+      });
+    }
+
+    return month;
+  });
+};
+export var getFilteredMonthItems = function getFilteredMonthItems(_ref) {
+  var filterMonthsList = _ref.filterMonthsList,
+      formatMonthLabel = _ref.formatMonthLabel;
+  var monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};

package/esm/datepicker/utils/date-helpers.js

@@ -44,7 +44,7 @@ var DateHelpers = function DateHelpers(_adapter) {
           monthNumber: 'M',
           dayOfMonthNumber: 'd',
           weekday: 'EEEE',
-          weekdaymin: 'EEEEE',
+          weekdaymin: 'EEEEEE',
           slashDate: 'yyyy/MM/dd',
           fullOrdinalWeek: 'EEEE, MMMM do yyyy',
           quarter: 'QQQ'

package/esm/datepicker/week.js

@@ -79,6 +79,7 @@ var Week = /*#__PURE__*/function (_React$Component) {
             adapter: _this.props.adapter,
             date: day,
             dateLabel: _this.props.dateLabel,
+            density: _this.props.density,
             disabled: _this.dateHelpers.isDayDisabled(day, _this.props),
             excludeDates: _this.props.excludeDates,
             filterDate: _this.props.filterDate,

package/esm/dnd-list/index.js

@@ -4,7 +4,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.
 */
-export { arrayMove, arrayRemove } from 'react-movable';
+import { arrayMove, arrayRemove } from 'react-movable';
+export { arrayMove, arrayRemove };
 export { default as StatefulList } from './stateful-list.js';
 export { default as StatefulListContainer } from './stateful-list-container.js';
 export { default as List } from './list.js'; // Constants

package/esm/dnd-list/list.js

@@ -206,8 +206,7 @@ var StatelessList = /*#__PURE__*/function (_React$Component) {
               display: 'flex'
             })
           }), /*#__PURE__*/React.createElement(DragHandle, _extends({}, sharedProps, dragHandleProps), /*#__PURE__*/React.createElement(Grab, {
-            size: 24,
-            color: "#CCC"
+            size: 24
           })), /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), value), removable && /*#__PURE__*/React.createElement(CloseHandle, _extends({}, sharedProps, {
             onClick: function onClick(evt) {
               evt.preventDefault();

package/esm/dnd-list/styled-components.js

@@ -90,7 +90,7 @@ export var DragHandle = styled('div', function (_ref4) {
 
   var $theme = _ref4.$theme;
   var marginDir = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
-  return _ref5 = {}, _defineProperty(_ref5, marginDir, $theme.sizing.scale600), _defineProperty(_ref5, "width", $theme.sizing.scale800), _defineProperty(_ref5, "display", 'flex'), _defineProperty(_ref5, "alignItems", 'center'), _ref5;
+  return _ref5 = {}, _defineProperty(_ref5, marginDir, $theme.sizing.scale600), _defineProperty(_ref5, "width", $theme.sizing.scale800), _defineProperty(_ref5, "color", '#CCC'), _defineProperty(_ref5, "display", 'flex'), _defineProperty(_ref5, "alignItems", 'center'), _ref5;
 });
 DragHandle.displayName = "DragHandle";
 DragHandle.displayName = 'StyledDragHandle';

package/esm/drawer/drawer.js

@@ -331,7 +331,8 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(FocusLock, {
           returnFocus: true,
-          autoFocus: autoFocus
+          autoFocus: autoFocus,
+          noFocusGuards: true
         }, /*#__PURE__*/React.createElement(Root, _extends({
           "data-baseweb": "drawer",
           ref: _this3.getRef('Root')

package/esm/helper/helper.js

@@ -44,6 +44,7 @@ export function Helper(props) {
     React.createElement(Popover, _extends({
       "data-baseweb": "helper"
     }, restProps, {
+      autoFocus: false,
       placement: placement,
       overrides: mergedOverrides
     }))

package/esm/layer/layer.js

@@ -132,6 +132,14 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       if (host && host !== prevProps.host && prevProps.host === null) {
         this.addContainer(host);
       }
+
+      if (prevProps.isHoverLayer != this.props.isHoverLayer) {
+        if (this.props.isHoverLayer) {
+          this.context.removeDocClickHandler(this.onDocumentClick);
+        } else {
+          this.context.addDocClickHandler(this.onDocumentClick);
+        }
+      }
     }
   }, {
     key: "componentWillUnmount",

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

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

package/esm/popover/popover.js

@@ -39,7 +39,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';
@@ -202,7 +202,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function 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
         });
@@ -514,9 +514,10 @@ var PopoverInner = /*#__PURE__*/function (_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/esm/popover/stateful-container.js

@@ -64,6 +64,10 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(e);
       }
 
+      if (_this.props.focusLock || _this.props.autoFocus) {
+        return;
+      }
+
       _this.close();
     });
 
@@ -202,7 +206,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
           returnFocus = _this$props.returnFocus,
           showArrow = _this$props.showArrow,
           triggerType = _this$props.triggerType,
-          popoverMargin = _this$props.popoverMargin;
+          popoverMargin = _this$props.popoverMargin,
+          focusOptions = _this$props.focusOptions;
       var popoverProps = {
         accessibilityType: accessibilityType,
         autoFocus: autoFocus,
@@ -225,7 +230,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         returnFocus: returnFocus,
         showArrow: showArrow,
         triggerType: triggerType,
-        popoverMargin: popoverMargin
+        popoverMargin: popoverMargin,
+        focusOptions: focusOptions
       };
 
       if (dismissOnClickOutside) {

package/esm/rating/emoticon-rating.js

@@ -213,8 +213,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "emoticon-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/esm/rating/star-rating.js

@@ -216,8 +216,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "star-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/esm/select/select-component.js

@@ -159,7 +159,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -307,7 +307,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -661,7 +661,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
 
       if (this.props.methodsRef) {
         var methodsRef = this.props.methodsRef;
@@ -697,7 +697,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",
@@ -926,7 +926,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
@@ -1148,6 +1147,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
               if (!ref) return;
               _this6.anchor = ref.anchorRef;
             },
+            autoFocus: false,
             focusLock: false,
             mountNode: _this6.props.mountNode,
             onEsc: function onEsc() {