baseui 0.0.0-alpha-cfc8585 → 0.0.0-alpha-fd35cbd

package/datepicker/styled-components.js.flow

@@ -8,12 +8,36 @@ LICENSE file in the root directory of this source tree.
 import {styled} from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
 import type {SharedStylePropsT, CalendarPropsT} from './types.js';
-import {ORIENTATION} from './constants.js';
+import {ORIENTATION, DENSITY} from './constants.js';
 
 /**
  * Main component container element
  */
-export const StyledInputWrapper = styled<SharedStylePropsT>('div', () => ({
+export const StyledInputWrapper = styled<{
+  ...SharedStylePropsT,
+  $separateRangeInputs: boolean,
+}>('div', props => {
+  const {$separateRangeInputs} = props;
+
+  return {
+    width: '100%',
+    ...($separateRangeInputs
+      ? {display: 'flex', justifyContent: 'center'}
+      : {}),
+  };
+});
+
+export const StyledInputLabel = styled<{}>('div', ({$theme}) => ({
+  ...$theme.typography.LabelMedium,
+  marginBottom: $theme.sizing.scale300,
+}));
+
+export const StyledStartDate = styled<{}>('div', ({$theme}) => ({
+  width: '100%',
+  marginRight: $theme.sizing.scale300,
+}));
+
+export const StyledEndDate = styled<{}>('div', ({$theme}) => ({
   width: '100%',
 }));
 
@@ -52,12 +76,14 @@ export const StyledCalendarContainer = styled<SharedStylePropsT>(
   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,
     };
   },
 );
@@ -77,15 +103,19 @@ export const StyledSelectorContainer = styled<SharedStylePropsT>(
 
 export const StyledCalendarHeader = styled<SharedStylePropsT>('div', props => {
   const {
-    $theme: {borders, colors, sizing},
+    $theme: {typography, borders, colors, sizing},
+    $density,
   } = props;
   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,
@@ -94,7 +124,10 @@ export const StyledCalendarHeader = styled<SharedStylePropsT>('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,
   };
 });
 
@@ -106,25 +139,30 @@ export const StyledMonthHeader = styled<SharedStylePropsT>('div', props => {
   };
 });
 
-export const StyledMonthYearSelectButton = styled<{$isFocusVisible: boolean}>(
+export const StyledMonthYearSelectButton = styled<SharedStylePropsT>(
   'button',
   props => {
+    const {
+      $theme: {typography, colors},
+      $isFocusVisible,
+      $density,
+    } = props;
     return {
-      ...props.$theme.typography.font200,
+      ...($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',
       },
     };
   },
@@ -143,6 +181,7 @@ export const StyledMonthYearSelectIconContainer = styled<{}>('span', props => {
 function getArrowBtnStyle({$theme, $disabled, $isFocusVisible}) {
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled
       ? $theme.colors.calendarHeaderForegroundDisabled
       : $theme.colors.calendarHeaderForeground,
@@ -156,8 +195,6 @@ function getArrowBtnStyle({$theme, $disabled, $isFocusVisible}) {
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -197,7 +234,7 @@ export const StyledWeek = styled<SharedStylePropsT>('div', props => {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100,
+    marginBottom: sizing.scale0,
   };
 });
 
@@ -402,24 +439,45 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
     $outsideMonth,
     $outsideMonthWithinRange,
     $hasDateLabel,
-    $theme: {colors, sizing},
+    $density,
+    $theme: {colors, typography, sizing},
   } = props;
   const code = getDayStateCode(props);
+
+  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,
@@ -444,10 +502,14 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
         : $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,
@@ -463,10 +525,10 @@ export const StyledDay = styled<SharedStylePropsT>('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} : {}),
     },
@@ -527,17 +589,21 @@ export const StyledDayLabel = styled<SharedStylePropsT>('div', props => {
 
 export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', props => {
   const {
-    $theme: {sizing},
+    $theme: {typography, colors, sizing},
+    $density,
   } = props;
   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,
@@ -546,7 +612,6 @@ export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', props => {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent',
   }: {});
 });

package/datepicker/types.js.flow

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import type {OverrideT} from '../helpers/overrides.js';
 import type {SizeT} from '../input/types.js';
-import {ORIENTATION, STATE_CHANGE_TYPE} from './constants.js';
+import {ORIENTATION, STATE_CHANGE_TYPE, DENSITY} from './constants.js';
 import type {DateIOAdapter} from './utils/types.js';
 import type {
   TimePickerPropsT as TimePickerPropsTBase,
@@ -21,7 +21,11 @@ import type {OptionT} from '../select/index.js';
 // eslint-disable-next-line flowtype/no-weak-types
 type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/locale/index.js.flow
 
-type onChangeT<T> = ({date: ?T | Array<T>}) => mixed;
+export type DateValueT<T> = ?T | Array<?T>;
+
+type onChangeT<T> = ({date: DateValueT<T>}) => mixed;
+
+export type DensityT = $Keys<typeof DENSITY>;
 
 export type DatepickerOverridesT = {
   Root?: OverrideT,
@@ -57,12 +61,16 @@ export type DatepickerOverridesT = {
   InputWrapper?: OverrideT,
   /** Override for reused Popover component. Popover is **not a styled  element** but a react component that can be replaced */
   Popover?: OverrideT,
+  StartDate?: OverrideT,
+  EndDate?: OverrideT,
+  InputLabel?: OverrideT,
 };
 
 export type DayPropsT<T = Date> = {
   disabled: boolean,
   date: T,
   dateLabel: ?(day: T) => React.Node,
+  density: DensityT,
   filterDate: ?(day: T) => boolean,
   highlightedDate: ?T,
   includeDates: ?Array<T>,
@@ -76,13 +84,13 @@ export type DayPropsT<T = Date> = {
   month: ?number,
   onBlur: ({event: Event, date: T}) => mixed,
   onFocus: ({event: Event, date: T}) => mixed,
-  onSelect: ({date: ?T | Array<T>}) => mixed,
+  onSelect: ({date: DateValueT<T>}) => mixed,
   onClick: ({event: Event, date: T}) => mixed,
   onMouseOver: ({event: Event, date: T}) => mixed,
   onMouseLeave: ({event: Event, date: T}) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: ?T | Array<T>,
+  value: DateValueT<T>,
 };
 
 export type DayStateT = {
@@ -93,6 +101,7 @@ export type DayStateT = {
 export type WeekPropsT<T = Date> = {
   date: T,
   dateLabel: ?(date: T) => React.Node,
+  density: DensityT,
   excludeDates: ?Array<T>,
   filterDate: ?(day: T) => boolean,
   // highlighted while keyboard navigating or hovered
@@ -113,7 +122,7 @@ export type WeekPropsT<T = Date> = {
   onChange?: onChangeT<T>,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: ?T | Array<T>,
+  value: DateValueT<T>,
 };
 
 export type MonthPropsT<T = Date> = WeekPropsT<T> & {
@@ -126,12 +135,14 @@ export type CalendarInternalState<T = Date> = {
   date: T,
   quickSelectId: ?string,
   rootElement: ?HTMLElement,
-  time: Array<T>,
+  time: Array<?T>,
 };
 
 export type CalendarPropsT<T = Date> = {
   /** Defines if the calendar is set to be focused on an initial render. */
   autoFocusCalendar?: boolean,
+  /** Determines the density of the calendar */
+  density?: DensityT,
   /** A list of dates to disable. */
   excludeDates?: ?Array<T>,
   /** Display select for quickly choosing date ranges. `range` must be true as well. */
@@ -185,7 +196,7 @@ export type CalendarPropsT<T = Date> = {
   /** Defines if tabbing inside the calendar is circled within it. */
   trapTabbing?: boolean,
   /** Currently selected date. */
-  value?: ?T | Array<T>,
+  value?: DateValueT<T>,
   fixedHeight?: boolean,
 };
 
@@ -213,24 +224,32 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   required?: boolean,
   clearable?: boolean,
   displayValueAtRangeIndex?: number,
-  formatDisplayValue?: (date: ?T | Array<T>, formatString: string) => string,
+  formatDisplayValue?: (date: DateValueT<T>, formatString: string) => string,
   formatString: string,
   /** Where to mount the popover */
   mountNode?: HTMLElement,
   /** Called when calendar is closed */
   onClose?: () => mixed,
+  /** Called when calendar is opened */
+  onOpen?: () => mixed,
   mask?: string | null,
+  /** Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true. */
+  separateRangeInputs?: boolean,
+  startDateLabel?: string,
+  endDateLabel?: string,
 };
 
 export type SharedStylePropsT = {
   // eslint-disable-next-line flowtype/no-weak-types
   $date: any,
   $disabled: ?boolean,
+  $density: DensityT,
   $endDate: ?boolean,
   $endOfMonth: ?boolean,
   $isHighlighted: ?boolean,
   $isHovered: ?boolean,
   $isFocusVisible: ?boolean,
+  $month: ?number,
   $outsideMonth: ?boolean,
   $outsideMonthWithinRange: ?boolean,
   $peekNextMonth: ?boolean,
@@ -251,7 +270,7 @@ export type StateChangeTypeT = ?$Values<typeof STATE_CHANGE_TYPE>;
 
 export type ContainerStateT<T = Date> = {
   /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: ?T | Array<T>,
+  value?: DateValueT<T>,
 };
 
 export type NavigationContainerStateT<T = Date> = {
@@ -307,7 +326,7 @@ export type NavigationContainerPropsT<T = Date> = {
   /** Event handler that is called when the current rendered year is changed. */
   onYearChange?: ({date: T}) => mixed,
   /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: ?T | Array<T>,
+  value?: DateValueT<T>,
   stateReducer: NavigationContainerStateReducerT<T>,
   trapTabbing: boolean,
 };

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFilteredMonthItems = exports.filterMonthItems = void 0;
+
+var _constants = require("../constants.js");
+
+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; }
+
+var getDefaultMonthItems = function getDefaultMonthItems(formatMonthLabel) {
+  return _constants.DEFAULT_MONTHS.map(function (month) {
+    return {
+      id: month.toString(),
+      label: formatMonthLabel(month)
+    };
+  });
+};
+
+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;
+  });
+};
+
+exports.filterMonthItems = filterMonthItems;
+
+var getFilteredMonthItems = function getFilteredMonthItems(_ref) {
+  var filterMonthsList = _ref.filterMonthsList,
+      formatMonthLabel = _ref.formatMonthLabel;
+  var monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};
+
+exports.getFilteredMonthItems = getFilteredMonthItems;

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

@@ -0,0 +1,53 @@
+/*
+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.
+*/
+// @flow
+import {DEFAULT_MONTHS} from '../constants.js';
+
+export type OptionT = {
+  id: string,
+  label: string,
+  disabled?: boolean,
+};
+
+type GetMonthItemsArgsT = {
+  filterMonthsList: number[] | null,
+  formatMonthLabel: number => string,
+};
+
+const getDefaultMonthItems = (formatMonthLabel: number => string) =>
+  DEFAULT_MONTHS.map<OptionT>(month => ({
+    id: month.toString(),
+    label: formatMonthLabel(month),
+  }));
+
+export const filterMonthItems = (monthItems: OptionT[], filterList: number[]) =>
+  monthItems.map<OptionT>(month => {
+    if (!filterList.includes(Number(month.id))) {
+      return {
+        ...month,
+        disabled: true,
+      };
+    }
+    return month;
+  });
+
+export const getFilteredMonthItems = ({
+  filterMonthsList,
+  formatMonthLabel,
+}: GetMonthItemsArgsT) => {
+  let monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/datepicker/utils/date-helpers.js

@@ -51,7 +51,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/datepicker/utils/date-helpers.js.flow

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

package/datepicker/week.js

@@ -92,6 +92,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/datepicker/week.js.flow

@@ -52,6 +52,7 @@ export default class Week<T = Date> extends React.Component<WeekPropsT<T>> {
             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/dnd-list/index.js.flow

@@ -5,7 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-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';

package/dnd-list/list.js

@@ -220,8 +220,7 @@ var StatelessList = /*#__PURE__*/function (_React$Component) {
               display: 'flex'
             })
           }), /*#__PURE__*/React.createElement(DragHandle, _extends({}, sharedProps, dragHandleProps), /*#__PURE__*/React.createElement(_grab.default, {
-            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/dnd-list/list.js.flow

@@ -136,7 +136,7 @@ class StatelessList extends React.Component<
                   style={{...props.style, display: 'flex'}}
                 >
                   <DragHandle {...sharedProps} {...dragHandleProps}>
-                    <Grab size={24} color="#CCC" />
+                    <Grab size={24} />
                   </DragHandle>
                   <Label {...sharedProps} {...labelProps}>
                     {value}

package/dnd-list/styled-components.js

@@ -94,7 +94,7 @@ var DragHandle = (0, _index.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;
 });
 exports.DragHandle = DragHandle;
 DragHandle.displayName = "DragHandle";

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

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

package/drawer/drawer.js

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

package/drawer/drawer.js.flow

@@ -253,7 +253,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
       <LocaleContext.Consumer>
         {locale => {
           return (
-            <FocusLock returnFocus autoFocus={autoFocus}>
+            <FocusLock returnFocus autoFocus={autoFocus} noFocusGuards={true}>
               <Root
                 data-baseweb="drawer"
                 ref={this.getRef('Root')}

package/es/app-nav-bar/user-menu.js

@@ -96,6 +96,7 @@ export default function UserMenuComponent(props) {
         close();
       }
     }, userMenuProps)),
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: () => setIsOpen(true),

package/es/button/styled-components.js

@@ -39,7 +39,7 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   },
   marginLeft: 0,

package/es/card/styled-components.js

@@ -80,7 +80,6 @@ export const Title = styled('h1', ({
   $theme
 }) => ({ ...$theme.typography.HeadingSmall,
   color: $theme.colors.contentPrimary,
-  fontWeight: 500,
   marginLeft: 0,
   marginTop: 0,
   marginRight: 0,