baseui 10.3.0 → 10.7.0

package/es/datepicker/datepicker.js

@@ -15,10 +15,27 @@ import Calendar from './calendar.js';
 import { getOverrides } from '../helpers/overrides.js';
 import getInterpolatedString from '../helpers/i18n-interpolation.js';
 import { LocaleContext } from '../locale/index.js';
-import { StyledInputWrapper } from './styled-components.js';
+import { StyledInputWrapper, StyledInputLabel, StyledStartDate, StyledEndDate } from './styled-components.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
+const INPUT_DELIMITER = ' – ';
+
+const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', separatedInput) => {
+  let inputValue = newInputValue;
+  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(INPUT_DELIMITER);
+
+  if (separatedInput === 'startDate' && prevEndDate) {
+    inputValue = `${inputValue} – ${prevEndDate}`;
+  }
+
+  if (separatedInput === 'endDate') {
+    inputValue = `${prevStartDate} – ${inputValue}`;
+  }
+
+  return inputValue;
+};
+
 export default class Datepicker extends React.Component {
   constructor(props) {
     super(props);
@@ -134,7 +151,7 @@ export default class Datepicker extends React.Component {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false
-      });
+      }, this.props.onOpen);
     });
 
     _defineProperty(this, "close", () => {
@@ -164,10 +181,11 @@ export default class Datepicker extends React.Component {
       const {
         formatString,
         mask,
-        range
+        range,
+        separateRangeInputs
       } = this.props;
 
-      if (mask === null) {
+      if (mask === null || mask === undefined && formatString !== DEFAULT_DATE_FORMAT) {
         return null;
       }
 
@@ -175,26 +193,17 @@ export default class Datepicker extends React.Component {
         return this.normalizeDashes(mask);
       }
 
-      const normalizedFormatString = this.normalizeDashes(formatString);
-
-      if (formatString) {
-        if (range) {
-          return `${normalizedFormatString} – ${normalizedFormatString}`.replace(/[a-z]/gi, '9');
-        } else {
-          return normalizedFormatString.replace(/[a-z]/gi, '9');
-        }
-      }
-
-      if (range) {
+      if (range && !separateRangeInputs) {
         return '9999/99/99 – 9999/99/99';
       }
 
       return '9999/99/99';
     });
 
-    _defineProperty(this, "handleInputChange", event => {
-      const inputValue = event.currentTarget.value;
+    _defineProperty(this, "handleInputChange", (event, separatedInput) => {
+      const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput) : event.currentTarget.value;
       const mask = this.getMask();
+      const formatString = this.normalizeDashes(this.props.formatString);
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
         if (this.props.onChange) {
@@ -213,7 +222,6 @@ export default class Datepicker extends React.Component {
       this.setState({
         inputValue
       });
-      const formatString = this.normalizeDashes(this.props.formatString);
 
       const parseDateString = dateString => {
         if (formatString === DEFAULT_DATE_FORMAT) {
@@ -224,7 +232,7 @@ export default class Datepicker extends React.Component {
       };
 
       if (this.props.range && typeof this.props.displayValueAtRangeIndex !== 'number') {
-        const [left, right] = this.normalizeDashes(inputValue).split(' – ');
+        const [left, right] = this.normalizeDashes(inputValue).split(INPUT_DELIMITER);
         let startDate = this.dateHelpers.date(left);
         let endDate = this.dateHelpers.date(right);
 
@@ -372,7 +380,7 @@ export default class Datepicker extends React.Component {
     } else if (Array.isArray(date) && !date[0] && !date[1]) {
       return '';
     } else if (Array.isArray(date)) {
-      return date.map(day => format(day)).join(' – ');
+      return date.map(day => format(day)).join(INPUT_DELIMITER);
     } else {
       return format(date);
     }
@@ -386,16 +394,53 @@ export default class Datepicker extends React.Component {
     }
   }
 
-  render() {
+  renderInputComponent(locale, separatedInput) {
     const {
       overrides = {}
     } = this.props;
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
+    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
+    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(INPUT_DELIMITER);
+    const value = separatedInput === 'startDate' ? startDate : separatedInput === 'endDate' ? endDate : this.state.inputValue;
+
+    const onChange = event => this.handleInputChange(event, separatedInput);
+
+    return /*#__PURE__*/React.createElement(InputComponent, _extends({
+      "aria-disabled": this.props.disabled,
+      "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
+      error: this.props.error,
+      positive: this.props.positive,
+      "aria-describedby": this.props['aria-describedby'],
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-required": this.props.required || null,
+      disabled: this.props.disabled,
+      size: this.props.size,
+      value: value,
+      onFocus: this.open,
+      onBlur: this.handleInputBlur,
+      onKeyDown: this.handleKeyDown,
+      onChange: onChange,
+      placeholder: placeholder,
+      mask: this.getMask(),
+      required: this.props.required,
+      clearable: this.props.clearable
+    }, inputProps));
+  }
+
+  render() {
+    const {
+      overrides = {},
+      startDateLabel = 'Start Date',
+      endDateLabel = 'End Date'
+    } = this.props;
     const [PopoverComponent, popoverProps] = getOverrides(overrides.Popover, Popover);
     const [InputWrapper, inputWrapperProps] = getOverrides(overrides.InputWrapper, StyledInputWrapper);
-    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
+    const [StartDate, startDateProps] = getOverrides(overrides.StartDate, StyledStartDate);
+    const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
+    const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
       focusLock: false,
+      autoFocus: false,
       mountNode: this.props.mountNode,
       placement: PLACEMENT.bottom,
       isOpen: this.state.isOpen,
@@ -409,26 +454,9 @@ export default class Datepicker extends React.Component {
       }, this.props, {
         onChange: this.onChange
       }))
-    }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, inputWrapperProps, /*#__PURE__*/React.createElement(InputComponent, _extends({
-      "aria-disabled": this.props.disabled,
-      "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
-      error: this.props.error,
-      positive: this.props.positive,
-      "aria-describedby": this.props['aria-describedby'],
-      "aria-labelledby": this.props['aria-labelledby'],
-      "aria-required": this.props.required || null,
-      disabled: this.props.disabled,
-      size: this.props.size,
-      value: this.state.inputValue,
-      onFocus: this.open,
-      onBlur: this.handleInputBlur,
-      onKeyDown: this.handleKeyDown,
-      onChange: this.handleInputChange,
-      placeholder: placeholder,
-      mask: this.getMask(),
-      required: this.props.required,
-      clearable: this.props.clearable
-    }, inputProps)))), /*#__PURE__*/React.createElement("p", {
+    }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
+      $separateRangeInputs: this.props.range && this.props.separateRangeInputs
+    }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, 'startDate')), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, 'endDate'))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
       id: this.props['aria-describedby'],
       style: {
         position: 'fixed',

package/es/datepicker/day.js

@@ -280,6 +280,7 @@ export default class Day extends React.Component {
     const $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !this.props.peekNextMonth && this.isOutsideOfMonthButWithinRange());
     return {
       $date: date,
+      $density: this.props.density,
       $disabled: this.props.disabled,
       $endDate: Array.isArray(value) && this.props.range && $selected && this.dateHelpers.isSameDay(date, value[1]) || false,
       $hasDateLabel: !!this.props.dateLabel,
@@ -292,6 +293,7 @@ export default class Day extends React.Component {
       $isFocusVisible: this.state.isFocusVisible,
       $startOfMonth: this.dateHelpers.isStartOfMonth(date),
       $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+      $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
       $peekNextMonth: this.props.peekNextMonth,

package/es/datepicker/month.js

@@ -12,8 +12,10 @@ import { StyledMonth } from './styled-components.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import { getOverrides } from '../helpers/overrides.js';
+import { DENSITY } from './constants.js';
 const defaultProps = {
   dateLabel: null,
+  density: DENSITY.high,
   excludeDates: null,
   filterDate: null,
   highlightDates: null,
@@ -60,6 +62,7 @@ export default class CalendarMonth extends React.Component {
           adapter: this.props.adapter,
           date: currentWeekStart,
           dateLabel: this.props.dateLabel,
+          density: this.props.density,
           excludeDates: this.props.excludeDates,
           filterDate: this.props.filterDate,
           highlightedDate: this.props.highlightedDate,

package/es/datepicker/styled-components.js

@@ -6,19 +6,47 @@ 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 const StyledInputWrapper = styled('div', () => ({
+export const StyledInputWrapper = styled('div', props => {
+  const {
+    $separateRangeInputs
+  } = props;
+  return {
+    width: '100%',
+    ...($separateRangeInputs ? {
+      display: 'flex',
+      justifyContent: 'center'
+    } : {})
+  };
+});
+StyledInputWrapper.displayName = "StyledInputWrapper";
+export const StyledInputLabel = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.LabelMedium,
+  marginBottom: $theme.sizing.scale300
+}));
+StyledInputLabel.displayName = "StyledInputLabel";
+export const StyledStartDate = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  marginRight: $theme.sizing.scale300
+}));
+StyledStartDate.displayName = "StyledStartDate";
+export const StyledEndDate = styled('div', ({
+  $theme
+}) => ({
   width: '100%'
 }));
 /**
  * Main component container element
  */
 
-StyledInputWrapper.displayName = "StyledInputWrapper";
+StyledEndDate.displayName = "StyledEndDate";
 export const StyledRoot = styled('div', props => {
   const {
     $theme: {
@@ -53,13 +81,14 @@ export const StyledCalendarContainer = styled('div', props => {
   const {
     $theme: {
       sizing
-    }
+    },
+    $density
   } = props;
   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";
@@ -78,18 +107,20 @@ StyledSelectorContainer.displayName = "StyledSelectorContainer";
 export const StyledCalendarHeader = styled('div', props => {
   const {
     $theme: {
+      typography,
       borders,
       colors,
       sizing
-    }
+    },
+    $density
   } = props;
-  return {
+  return { ...($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,
@@ -98,7 +129,7 @@ export const StyledCalendarHeader = styled('div', props => {
     borderBottomRightRadius: 0,
     borderBottomLeftRadius: 0,
     // account for the left/right arrow heights
-    minHeight: `calc(${sizing.scale800} + ${sizing.scale0})`
+    minHeight: $density === DENSITY.high ? `calc(${sizing.scale800} + ${sizing.scale0})` : sizing.scale950
   };
 });
 StyledCalendarHeader.displayName = "StyledCalendarHeader";
@@ -111,19 +142,27 @@ export const StyledMonthHeader = styled('div', props => {
 });
 StyledMonthHeader.displayName = "StyledMonthHeader";
 export const StyledMonthYearSelectButton = styled('button', props => {
-  return { ...props.$theme.typography.font200,
+  const {
+    $theme: {
+      typography,
+      colors
+    },
+    $isFocusVisible,
+    $density
+  } = props;
+  return { ...($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 ${props.$theme.colors.accent}` : 'none'
+      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none'
     }
   };
 });
@@ -145,6 +184,7 @@ function getArrowBtnStyle({
 }) {
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
     cursor: $disabled ? 'default' : 'pointer',
     backgroundColor: 'transparent',
@@ -156,8 +196,6 @@ function getArrowBtnStyle({
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -186,7 +224,7 @@ export const StyledWeek = styled('div', props => {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100
+    marginBottom: sizing.scale0
   };
 });
 StyledWeek.displayName = "StyledWeek";
@@ -408,26 +446,45 @@ export const StyledDay = styled('div', props => {
     $outsideMonth,
     $outsideMonthWithinRange,
     $hasDateLabel,
+    $density,
     $theme: {
       colors,
+      typography,
       sizing
     }
   } = props;
   const code = getDayStateCode(props);
-  return {
+  let height;
+
+  if ($hasDateLabel) {
+    if ($density === DENSITY.high) {
+      height = '60px';
+    } else {
+      height = '70px';
+    }
+  } else {
+    if ($density === DENSITY.high) {
+      height = '40px';
+    } else {
+      height = '48px';
+    }
+  }
+
+  return { ...($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,
@@ -448,10 +505,10 @@ export const StyledDay = styled('div', props => {
       display: 'inline-block',
       boxShadow: $isFocusVisible ? `0 0 0 3px ${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,
@@ -467,10 +524,10 @@ export const StyledDay = styled('div', 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
@@ -532,18 +589,23 @@ StyledDayLabel.displayName = "StyledDayLabel";
 export const StyledWeekdayHeader = styled('div', props => {
   const {
     $theme: {
+      typography,
+      colors,
       sizing
-    }
+    },
+    $density
   } = props;
-  return {
+  return { ...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,
@@ -552,7 +614,6 @@ export const StyledWeekdayHeader = styled('div', props => {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent'
   };
 });

package/es/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/es/datepicker/utils/calendar-header-helpers.js

@@ -0,0 +1,34 @@
+/*
+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';
+
+const getDefaultMonthItems = formatMonthLabel => DEFAULT_MONTHS.map(month => ({
+  id: month.toString(),
+  label: formatMonthLabel(month)
+}));
+
+export const filterMonthItems = (monthItems, filterList) => monthItems.map(month => {
+  if (!filterList.includes(Number(month.id))) {
+    return { ...month,
+      disabled: true
+    };
+  }
+
+  return month;
+});
+export const getFilteredMonthItems = ({
+  filterMonthsList,
+  formatMonthLabel
+}) => {
+  let monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};

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

@@ -35,7 +35,7 @@ class DateHelpers {
             monthNumber: 'M',
             dayOfMonthNumber: 'd',
             weekday: 'EEEE',
-            weekdaymin: 'EEEEE',
+            weekdaymin: 'EEEEEE',
             slashDate: 'yyyy/MM/dd',
             fullOrdinalWeek: 'EEEE, MMMM do yyyy',
             quarter: 'QQQ'

package/es/datepicker/week.js

@@ -34,6 +34,7 @@ export default class Week extends 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/es/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/es/dnd-list/list.js

@@ -127,8 +127,7 @@ class StatelessList extends 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: evt => {
             evt.preventDefault();

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

@@ -89,6 +89,7 @@ export const DragHandle = styled('div', ({
   return {
     [marginDir]: $theme.sizing.scale600,
     width: $theme.sizing.scale800,
+    color: '#CCC',
     display: 'flex',
     alignItems: 'center'
   };

package/es/drawer/close-icon.js

@@ -6,9 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import Delete from '../icon/delete.js';
-export function CloseIcon() {
+export function CloseIcon(props) {
   return /*#__PURE__*/React.createElement(Delete, {
     size: "inherit",
-    color: "inherit"
+    color: "inherit",
+    title: props.title
   });
 }

package/es/drawer/drawer.js

@@ -252,7 +252,8 @@ class Drawer extends React.Component {
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => {
       return /*#__PURE__*/React.createElement(FocusLock, {
         returnFocus: true,
-        autoFocus: autoFocus
+        autoFocus: autoFocus,
+        noFocusGuards: true
       }, /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "drawer",
         ref: this.getRef('Root')
@@ -264,7 +265,9 @@ class Drawer extends React.Component {
       }, sharedProps, closeProps, {
         onFocus: forkFocus(closeProps, this.handleFocus),
         onBlur: forkBlur(closeProps, this.handleBlur)
-      }), /*#__PURE__*/React.createElement(CloseIcon, null)) : null)));
+      }), /*#__PURE__*/React.createElement(CloseIcon, {
+        title: locale.drawer.close
+      })) : null)));
     });
   }
 

package/es/helper/helper.js

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

package/es/layer/layer.js

@@ -94,6 +94,14 @@ class LayerComponent extends 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);
+      }
+    }
   }
 
   componentWillUnmount() {