baseui 10.6.0 → 10.7.0

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,
@@ -23,6 +23,8 @@ type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/
 
 type onChangeT<T> = ({date: ?T | Array<T>}) => mixed;
 
+export type DensityT = $Keys<typeof DENSITY>;
+
 export type DatepickerOverridesT = {
   Root?: OverrideT,
   /** Override for reused Select component. QuickSelect is **not a styled  element** but a react component that can be replaced */
@@ -57,12 +59,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>,
@@ -93,6 +99,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
@@ -132,6 +139,8 @@ export type CalendarInternalState<T = Date> = {
 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. */
@@ -219,13 +228,20 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   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,

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/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/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/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,

package/es/combobox/combobox.js

@@ -235,7 +235,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: PLACEMENT.bottomLeft,

package/es/data-table/column-datetime.js

@@ -29,6 +29,7 @@ import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -326,6 +327,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

package/es/datepicker/calendar-header.js

@@ -20,7 +20,7 @@ import { Popover } from '../popover/index.js';
 import { LocaleContext } from '../locale/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 import { StyledCalendarHeader, StyledPrevButton, StyledNextButton, StyledMonthHeader, StyledWeekdayHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer } from './styled-components.js';
-import { ORIENTATION, WEEKDAYS } from './constants.js';
+import { ORIENTATION, WEEKDAYS, DENSITY } from './constants.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
@@ -205,7 +205,8 @@ export default class CalendarHeader extends React.Component {
     }) => {
       const date = this.getDateProp();
       const {
-        overrides = {}
+        overrides = {},
+        density
       } = this.props;
       const allPrevDaysDisabled = this.dateHelpers.monthDisabledBefore(date, this.props);
       let isDisabled = false;
@@ -245,7 +246,7 @@ export default class CalendarHeader extends React.Component {
         $disabled: isDisabled,
         $order: this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: '24px',
+        size: density === DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -260,7 +261,8 @@ export default class CalendarHeader extends React.Component {
     }) => {
       const date = this.getDateProp();
       const {
-        overrides = {}
+        overrides = {},
+        density
       } = this.props;
       const allNextDaysDisabled = this.dateHelpers.monthDisabledAfter(date, this.props);
       let isDisabled = false;
@@ -304,7 +306,7 @@ export default class CalendarHeader extends React.Component {
         $isFocusVisible: this.state.isFocusVisible,
         $order: this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: '24px',
+        size: density === DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -329,7 +331,8 @@ export default class CalendarHeader extends React.Component {
       const year = this.dateHelpers.getYear(date);
       const {
         locale,
-        overrides = {}
+        overrides = {},
+        density
       } = this.props;
       const [MonthYearSelectButton, monthYearSelectButtonProps] = getOverrides(overrides.MonthYearSelectButton, StyledMonthYearSelectButton);
       const [MonthYearSelectIconContainer, monthYearSelectIconContainerProps] = getOverrides(overrides.MonthYearSelectIconContainer, StyledMonthYearSelectIconContainer);
@@ -394,6 +397,7 @@ export default class CalendarHeader extends React.Component {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: this.state.isFocusVisible,
+        $density: density,
         onKeyUp: event => {
           if (this.canArrowsOpenDropdown(event)) {
             this.setState({
@@ -421,7 +425,8 @@ export default class CalendarHeader extends React.Component {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === DENSITY.high ? 16 : 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -465,6 +470,7 @@ export default class CalendarHeader extends React.Component {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: this.state.isFocusVisible,
+        $density: density,
         onKeyUp: event => {
           if (this.canArrowsOpenDropdown(event)) {
             this.setState({
@@ -492,7 +498,8 @@ export default class CalendarHeader extends React.Component {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === DENSITY.high ? 16 : 24
       })))));
     });
 
@@ -523,13 +530,15 @@ export default class CalendarHeader extends React.Component {
 
   render() {
     const {
-      overrides = {}
+      overrides = {},
+      density
     } = this.props;
     const [CalendarHeader, calendarHeaderProps] = getOverrides(overrides.CalendarHeader, StyledCalendarHeader);
     const [MonthHeader, monthHeaderProps] = getOverrides(overrides.MonthHeader, StyledMonthHeader);
     const [WeekdayHeader, weekdayHeaderProps] = getOverrides(overrides.WeekdayHeader, StyledWeekdayHeader);
     const startOfWeek = this.dateHelpers.getStartOfWeek(this.getDateProp(), this.props.locale);
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarHeader, _extends({}, calendarHeaderProps, {
+      $density: this.props.density,
       onFocus: forkFocus(calendarHeaderProps, this.handleFocus),
       onBlur: forkBlur(calendarHeaderProps, this.handleBlur)
     }), this.renderPreviousMonthButton({
@@ -545,7 +554,9 @@ export default class CalendarHeader extends React.Component {
       return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
         key: offset,
         alt: this.dateHelpers.getWeekdayInLocale(day, this.props.locale)
-      }, weekdayHeaderProps), this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale));
+      }, weekdayHeaderProps, {
+        $density: density
+      }), this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale));
     })))));
   }
 

package/es/datepicker/calendar.js

@@ -19,7 +19,7 @@ import { StyledCalendarContainer, StyledMonthContainer, StyledRoot, StyledSelect
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import { ORIENTATION } from './constants.js';
+import { DENSITY, ORIENTATION } from './constants.js';
 export default class Calendar extends React.Component {
   constructor(props) {
     super(props);
@@ -329,10 +329,13 @@ export default class Calendar extends React.Component {
           "aria-roledescription": translations.ariaRoleDescCalMonth,
           "aria-multiselectable": this.props.range || null,
           onKeyDown: this.onKeyDown
-        }, calendarContainerProps), /*#__PURE__*/React.createElement(Month, {
+        }, calendarContainerProps, {
+          $density: this.props.density
+        }), /*#__PURE__*/React.createElement(Month, {
           adapter: this.props.adapter,
           date: monthDate,
           dateLabel: this.props.dateLabel,
+          density: this.props.density,
           excludeDates: this.props.excludeDates,
           filterDate: this.props.filterDate,
           highlightedDate: this.state.highlightedDate,
@@ -571,6 +574,7 @@ export default class Calendar extends React.Component {
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [startDate, endDate] = [].concat(this.props.value);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
+      $density: this.props.density,
       "data-baseweb": "calendar",
       role: "application",
       "aria-roledescription": "datepicker",
@@ -593,6 +597,7 @@ export default class Calendar extends React.Component {
 _defineProperty(Calendar, "defaultProps", {
   autoFocusCalendar: false,
   dateLabel: null,
+  density: DENSITY.default,
   excludeDates: null,
   filterDate: null,
   highlightedDate: null,

package/es/datepicker/constants.js

@@ -21,4 +21,8 @@ export const STATE_CHANGE_TYPE = Object.freeze({
   mouseLeave: 'mouseLeave'
 });
 export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
-export const DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+export const DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+export const DENSITY = {
+  high: 'high',
+  default: 'default'
+};

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,

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,