baseui 10.6.0 → 10.7.3

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/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/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/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
         });
@@ -510,12 +510,15 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
             onPopperUpdate: this.onPopperUpdate,
             placement: this.state.placement
-          }, /*#__PURE__*/React.createElement(FocusLock, {
+          }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
             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
+            returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+            autoFocus: this.state.autoFocusAfterPositioning,
+            focusOptions: this.props.focusOptions
+          }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
+            disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
           }, this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(Hidden, {

package/esm/popover/stateful-container.js

@@ -206,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,
@@ -229,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/select/select-component.js

@@ -1147,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() {

package/esm/themes/shared/lighting.js

@@ -15,6 +15,10 @@ var lighting = {
   overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
   overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
   overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
-  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
+  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
+  shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
+  shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+  deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
+  deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)'
 };
 export default lighting;

package/esm/timepicker/timepicker.js

@@ -206,26 +206,31 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getTimeWindowInSeconds", function (step) {
       var _this$props = _this.props,
           min = _this$props.minTime,
-          max = _this$props.maxTime;
+          max = _this$props.maxTime,
+          ignoreMinMaxDateComponent = _this$props.ignoreMinMaxDateComponent;
 
-      var midnight = _this.setTime(_this.props.value, 0, 0, 0);
+      var dayStart = _this.setTime(_this.props.value, 0, 0, 0);
 
-      if (!min) {
-        min = midnight;
+      var dayEnd = _this.setTime(_this.props.value, 24, 0, 0);
+
+      if (!min || _this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
+        min = dayStart;
+      } else {
+        min = _this.setTime(_this.props.value, _this.props.adapter.getHours(min), _this.props.adapter.getMinutes(min), _this.props.adapter.getSeconds(min));
       }
 
-      if (!max) {
-        max = _this.setTime(_this.props.value, 24, 0, 0);
+      if (!max || _this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
+        max = dayEnd;
       } else {
-        // maxTime (if provided) should be inclusive, so add an extra step here
-        max = _this.props.adapter.setSeconds(_this.props.adapter.date(max), _this.props.adapter.getSeconds(max) + step);
+        max = _this.setTime(_this.props.value, _this.props.adapter.getHours(max), _this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
+        _this.props.adapter.getSeconds(max) + 1);
       }
 
       var minDate = _this.props.adapter.toJsDate(min);
 
       var maxDate = _this.props.adapter.toJsDate(max);
 
-      var midnightDate = _this.props.adapter.toJsDate(midnight);
+      var midnightDate = _this.props.adapter.toJsDate(dayStart);
 
       return {
         start: (minDate - midnightDate) / 1000,
@@ -312,7 +317,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           steps: steps,
           value: this.props.nullable ? undefined : {
             id: closestStep,
-            label: this.secondsToLabel(closestStep, undefined)
+            label: this.secondsToLabel(closestStep, this.props.format)
           }
         });
 
@@ -414,7 +419,8 @@ _defineProperty(TimePicker, "defaultProps", {
   format: '12',
   step: 900,
   creatable: false,
-  adapter: dateFnsAdapter
+  adapter: dateFnsAdapter,
+  ignoreMinMaxDateComponent: false
 });
 
 export default TimePicker;

package/esm/tooltip/tooltip.js

@@ -62,6 +62,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
         Inner: StyledInner
       }, this.props.overrides);
       return /*#__PURE__*/React.createElement(Popover, _extends({
+        autoFocus: false,
         "data-baseweb": "tooltip"
       }, this.props, {
         overrides: overrides

package/helper/helper.js

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

package/helper/helper.js.flow

@@ -36,6 +36,7 @@ export function Helper(props: PropsT) {
     <Popover
       data-baseweb="helper"
       {...restProps}
+      autoFocus={false}
       placement={placement}
       overrides={mergedOverrides}
     />

package/layer/layer.js

@@ -141,6 +141,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/layer/layer.js.flow

@@ -61,9 +61,18 @@ class LayerComponent extends React.Component<
     if (mountNode) {
       return;
     }
+
     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);
+      }
+    }
   }
 
   componentWillUnmount() {

package/map-marker/index.d.ts

@@ -40,11 +40,12 @@ export interface FLOATING_MARKER_ANCHOR_TYPES {
   square: 'square';
 }
 
-export type NeedleSizeT = ValueOf<NEEDLE_SIZES>;
-export type PinHeadT = ValueOf<PINHEAD_TYPES>;
-export type PinHeadSizeT = ValueOf<PINHEAD_SIZES_SHAPES>;
-export type AnchorPositionsT = ValueOf<FLOATING_MARKER_ANCHOR_POSITIONS>;
-export type FloatingMarkerSizeT = ValueOf<FLOATING_MARKER_SIZES>;
+export type NeedleSizeT = NEEDLE_SIZES[keyof NEEDLE_SIZES];
+export type PinHeadT = PINHEAD_TYPES[keyof PINHEAD_TYPES];
+export type PinHeadSizeT = PINHEAD_SIZES_SHAPES[keyof PINHEAD_SIZES_SHAPES];
+export type AnchorPositionsT = FLOATING_MARKER_ANCHOR_POSITIONS[keyof FLOATING_MARKER_ANCHOR_POSITIONS];
+export type FloatingMarkerSizeT = FLOATING_MARKER_SIZES[keyof FLOATING_MARKER_SIZES];
+export type FloatingMarkerAnchorTypeT = FLOATING_MARKER_ANCHOR_TYPES[keyof FLOATING_MARKER_ANCHOR_TYPES];
 
 export type FixedMarkerOverridesT = {
   Root?: Override<any>;

package/menu/maybe-child-menu.js

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

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

@@ -48,6 +48,7 @@ export default function MaybeChildMenu(props: PropsT) {
         return (
           <PopoverOverride
             focusLock={false}
+            autoFocus={false}
             isOpen={props.isOpen}
             renderAll={props.renderAll}
             content={ChildMenu}

package/modal/index.d.ts

@@ -47,7 +47,7 @@ export interface ModalProps {
   autofocus?: boolean;
   autoFocus?: boolean;
   focusLock?: boolean;
-  returnFocus?: boolean | FocusOptions;
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
   children?: React.ReactNode;
   closeable?: boolean;
   isOpen?: boolean;