baseui 10.6.0 → 10.7.0

package/esm/datepicker/calendar-header.js

@@ -58,7 +58,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';
 
@@ -271,8 +271,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides = _this.props.overrides,
-          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
+      var _this$props3 = _this.props,
+          _this$props3$override = _this$props3.overrides,
+          overrides = _this$props3$override === void 0 ? {} : _this$props3$override,
+          density = _this$props3.density;
 
       var allPrevDaysDisabled = _this.dateHelpers.monthDisabledBefore(date, _this.props);
 
@@ -322,7 +324,7 @@ var CalendarHeader = /*#__PURE__*/function (_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
@@ -337,8 +339,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides2 = _this.props.overrides,
-          overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
+      var _this$props4 = _this.props,
+          _this$props4$override = _this$props4.overrides,
+          overrides = _this$props4$override === void 0 ? {} : _this$props4$override,
+          density = _this$props4.density;
 
       var allNextDaysDisabled = _this.dateHelpers.monthDisabledAfter(date, _this.props);
 
@@ -392,7 +396,7 @@ var CalendarHeader = /*#__PURE__*/function (_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
@@ -418,10 +422,11 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var year = _this.dateHelpers.getYear(date);
 
-      var _this$props3 = _this.props,
-          locale = _this$props3.locale,
-          _this$props3$override = _this$props3.overrides,
-          overrides = _this$props3$override === void 0 ? {} : _this$props3$override;
+      var _this$props5 = _this.props,
+          locale = _this$props5.locale,
+          _this$props5$override = _this$props5.overrides,
+          overrides = _this$props5$override === void 0 ? {} : _this$props5$override,
+          density = _this$props5.density;
 
       var _getOverrides9 = getOverrides(overrides.MonthYearSelectButton, StyledMonthYearSelectButton),
           _getOverrides10 = _slicedToArray(_getOverrides9, 2),
@@ -519,6 +524,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -546,7 +552,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === DENSITY.high ? 16 : 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -600,6 +607,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -627,7 +635,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === DENSITY.high ? 16 : 24
       })))));
     });
 
@@ -664,8 +673,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props$overrides3 = this.props.overrides,
-          overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
+      var _this$props6 = this.props,
+          _this$props6$override = _this$props6.overrides,
+          overrides = _this$props6$override === void 0 ? {} : _this$props6$override,
+          density = _this$props6.density;
 
       var _getOverrides17 = getOverrides(overrides.CalendarHeader, StyledCalendarHeader),
           _getOverrides18 = _slicedToArray(_getOverrides17, 2),
@@ -686,6 +697,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
         return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CalendarHeader, _extends({}, calendarHeaderProps, {
+            $density: _this2.props.density,
             onFocus: forkFocus(calendarHeaderProps, _this2.handleFocus),
             onBlur: forkBlur(calendarHeaderProps, _this2.handleBlur)
           }), _this2.renderPreviousMonthButton({
@@ -702,7 +714,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
               key: offset,
               alt: _this2.dateHelpers.getWeekdayInLocale(day, _this2.props.locale)
-            }, weekdayHeaderProps), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
+            }, weekdayHeaderProps, {
+              $density: density
+            }), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
           })));
         });
       });

package/esm/datepicker/calendar.js

@@ -65,7 +65,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';
 
 var Calendar = /*#__PURE__*/function (_React$Component) {
   _inherits(Calendar, _React$Component);
@@ -408,10 +408,13 @@ var Calendar = /*#__PURE__*/function (_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,
@@ -693,6 +696,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(Root, _extends({
+          $density: _this2.props.density,
           "data-baseweb": "calendar",
           role: "application",
           "aria-roledescription": "datepicker",
@@ -722,6 +726,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Calendar, "defaultProps", {
   autoFocusCalendar: false,
   dateLabel: null,
+  density: DENSITY.default,
   excludeDates: null,
   filterDate: null,
   highlightedDate: null,

package/esm/datepicker/constants.js

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

package/esm/datepicker/datepicker.js

@@ -14,18 +14,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -48,6 +36,18 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -61,10 +61,34 @@ 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 var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
+var INPUT_DELIMITER = ' – ';
+
+var combineSeparatedInputs = function combineSeparatedInputs(newInputValue) {
+  var prevCombinedInputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var separatedInput = arguments.length > 2 ? arguments[2] : undefined;
+  var inputValue = newInputValue;
+
+  var _prevCombinedInputVal = prevCombinedInputValue.split(INPUT_DELIMITER),
+      _prevCombinedInputVal2 = _slicedToArray(_prevCombinedInputVal, 2),
+      _prevCombinedInputVal3 = _prevCombinedInputVal2[0],
+      prevStartDate = _prevCombinedInputVal3 === void 0 ? '' : _prevCombinedInputVal3,
+      _prevCombinedInputVal4 = _prevCombinedInputVal2[1],
+      prevEndDate = _prevCombinedInputVal4 === void 0 ? '' : _prevCombinedInputVal4;
+
+  if (separatedInput === 'startDate' && prevEndDate) {
+    inputValue = "".concat(inputValue, " \u2013 ").concat(prevEndDate);
+  }
+
+  if (separatedInput === 'endDate') {
+    inputValue = "".concat(prevStartDate, " \u2013 ").concat(inputValue);
+  }
+
+  return inputValue;
+};
 
 var Datepicker = /*#__PURE__*/function (_React$Component) {
   _inherits(Datepicker, _React$Component);
@@ -197,7 +221,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false
-      });
+      }, _this.props.onOpen);
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function () {
@@ -228,9 +252,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
           formatString = _this$props2.formatString,
           mask = _this$props2.mask,
-          range = _this$props2.range;
+          range = _this$props2.range,
+          separateRangeInputs = _this$props2.separateRangeInputs;
 
-      if (mask === null) {
+      if (mask === null || mask === undefined && formatString !== DEFAULT_DATE_FORMAT) {
         return null;
       }
 
@@ -238,28 +263,20 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         return _this.normalizeDashes(mask);
       }
 
-      var normalizedFormatString = _this.normalizeDashes(formatString);
-
-      if (formatString) {
-        if (range) {
-          return "".concat(normalizedFormatString, " \u2013 ").concat(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(_assertThisInitialized(_this), "handleInputChange", function (event) {
-      var inputValue = event.currentTarget.value;
+    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event, separatedInput) {
+      var inputValue = _this.props.range && _this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, _this.state.inputValue, separatedInput) : event.currentTarget.value;
 
       var mask = _this.getMask();
 
+      var formatString = _this.normalizeDashes(_this.props.formatString);
+
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
         if (_this.props.onChange) {
           if (_this.props.range) {
@@ -278,8 +295,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         inputValue: inputValue
       });
 
-      var formatString = _this.normalizeDashes(_this.props.formatString);
-
       var parseDateString = function parseDateString(dateString) {
         if (formatString === DEFAULT_DATE_FORMAT) {
           return _this.dateHelpers.parse(dateString, 'slashDate', _this.props.locale);
@@ -289,7 +304,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       };
 
       if (_this.props.range && typeof _this.props.displayValueAtRangeIndex !== 'number') {
-        var _this$normalizeDashes = _this.normalizeDashes(inputValue).split(' – '),
+        var _this$normalizeDashes = _this.normalizeDashes(inputValue).split(INPUT_DELIMITER),
             _this$normalizeDashes2 = _slicedToArray(_this$normalizeDashes, 2),
             left = _this$normalizeDashes2[0],
             right = _this$normalizeDashes2[1];
@@ -455,7 +470,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       } else if (Array.isArray(date)) {
         return date.map(function (day) {
           return format(day);
-        }).join(' – ');
+        }).join(INPUT_DELIMITER);
       } else {
         return format(date);
       }
@@ -470,8 +485,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "renderInputComponent",
+    value: function renderInputComponent(locale, separatedInput) {
       var _this3 = this;
 
       var _this$props$overrides = this.props.overrides,
@@ -482,6 +497,55 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputComponent = _getOverrides2[0],
           inputProps = _getOverrides2[1];
 
+      var 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';
+
+      var _split = (this.state.inputValue || '').split(INPUT_DELIMITER),
+          _split2 = _slicedToArray(_split, 2),
+          _split2$ = _split2[0],
+          startDate = _split2$ === void 0 ? '' : _split2$,
+          _split2$2 = _split2[1],
+          endDate = _split2$2 === void 0 ? '' : _split2$2;
+
+      var value = separatedInput === 'startDate' ? startDate : separatedInput === 'endDate' ? endDate : this.state.inputValue;
+
+      var onChange = function onChange(event) {
+        return _this3.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));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _this$props4 = this.props,
+          _this$props4$override = _this$props4.overrides,
+          overrides = _this$props4$override === void 0 ? {} : _this$props4$override,
+          _this$props4$startDat = _this$props4.startDateLabel,
+          startDateLabel = _this$props4$startDat === void 0 ? 'Start Date' : _this$props4$startDat,
+          _this$props4$endDateL = _this$props4.endDateLabel,
+          endDateLabel = _this$props4$endDateL === void 0 ? 'End Date' : _this$props4$endDateL;
+
       var _getOverrides3 = getOverrides(overrides.Popover, Popover),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
           PopoverComponent = _getOverrides4[0],
@@ -492,44 +556,42 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputWrapper = _getOverrides6[0],
           inputWrapperProps = _getOverrides6[1];
 
-      var placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
+      var _getOverrides7 = getOverrides(overrides.StartDate, StyledStartDate),
+          _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+          StartDate = _getOverrides8[0],
+          startDateProps = _getOverrides8[1];
+
+      var _getOverrides9 = getOverrides(overrides.EndDate, StyledEndDate),
+          _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+          EndDate = _getOverrides10[0],
+          endDateProps = _getOverrides10[1];
+
+      var _getOverrides11 = getOverrides(overrides.InputLabel, StyledInputLabel),
+          _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+          InputLabel = _getOverrides12[0],
+          inputLabelProps = _getOverrides12[1];
+
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           focusLock: false,
-          mountNode: _this3.props.mountNode,
+          autoFocus: false,
+          mountNode: _this4.props.mountNode,
           placement: PLACEMENT.bottom,
-          isOpen: _this3.state.isOpen,
-          onClickOutside: _this3.close,
-          onEsc: _this3.handleEsc,
+          isOpen: _this4.state.isOpen,
+          onClickOutside: _this4.close,
+          onEsc: _this4.handleEsc,
           content: /*#__PURE__*/React.createElement(Calendar, _extends({
-            adapter: _this3.props.adapter,
-            autoFocusCalendar: _this3.state.calendarFocused,
+            adapter: _this4.props.adapter,
+            autoFocusCalendar: _this4.state.calendarFocused,
             trapTabbing: true,
-            value: _this3.props.value
-          }, _this3.props, {
-            onChange: _this3.onChange
+            value: _this4.props.value
+          }, _this4.props, {
+            onChange: _this4.onChange
           }))
-        }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, inputWrapperProps, /*#__PURE__*/React.createElement(InputComponent, _extends({
-          "aria-disabled": _this3.props.disabled,
-          "aria-label": _this3.props['aria-label'] || (_this3.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
-          error: _this3.props.error,
-          positive: _this3.props.positive,
-          "aria-describedby": _this3.props['aria-describedby'],
-          "aria-labelledby": _this3.props['aria-labelledby'],
-          "aria-required": _this3.props.required || null,
-          disabled: _this3.props.disabled,
-          size: _this3.props.size,
-          value: _this3.state.inputValue,
-          onFocus: _this3.open,
-          onBlur: _this3.handleInputBlur,
-          onKeyDown: _this3.handleKeyDown,
-          onChange: _this3.handleInputChange,
-          placeholder: placeholder,
-          mask: _this3.getMask(),
-          required: _this3.props.required,
-          clearable: _this3.props.clearable
-        }, inputProps)))), /*#__PURE__*/React.createElement("p", {
-          id: _this3.props['aria-describedby'],
+        }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
+          $separateRangeInputs: _this4.props.range && _this4.props.separateRangeInputs
+        }), _this4.props.range && _this4.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), _this4.renderInputComponent(locale, 'startDate')), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, 'endDate'))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+          id: _this4.props['aria-describedby'],
           style: {
             position: 'fixed',
             width: '0px',
@@ -559,17 +621,17 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clipPath: 'inset(100%)'
           }
         }, // No date selected
-        !_this3.props.value || Array.isArray(_this3.props.value) && !_this3.props.value.length ? '' : // Date selected in a non-range picker
-        !Array.isArray(_this3.props.value) ? getInterpolatedString(locale.datepicker.selectedDate, {
-          date: _this3.state.inputValue || ''
+        !_this4.props.value || Array.isArray(_this4.props.value) && !_this4.props.value.length ? '' : // Date selected in a non-range picker
+        !Array.isArray(_this4.props.value) ? getInterpolatedString(locale.datepicker.selectedDate, {
+          date: _this4.state.inputValue || ''
         }) : // Start and end dates are selected in a range picker
-        _this3.props.value.length > 1 ? getInterpolatedString(locale.datepicker.selectedDateRange, {
-          startDate: _this3.formatDisplayValue(_this3.props.value[0]),
-          endDate: _this3.formatDisplayValue( // $FlowFixMe
-          _this3.props.value[1])
+        _this4.props.value.length > 1 ? getInterpolatedString(locale.datepicker.selectedDateRange, {
+          startDate: _this4.formatDisplayValue(_this4.props.value[0]),
+          endDate: _this4.formatDisplayValue( // $FlowFixMe
+          _this4.props.value[1])
         }) : // A single date selected in a range picker
         "".concat(getInterpolatedString(locale.datepicker.selectedDate, {
-          date: _this3.formatDisplayValue(_this3.props.value[0])
+          date: _this4.formatDisplayValue(_this4.props.value[0])
         }), " ").concat(locale.datepicker.selectSecondDatePrompt)));
       });
     }

package/esm/datepicker/day.js

@@ -332,6 +332,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
       var $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/esm/datepicker/month.js

@@ -46,8 +46,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';
 var defaultProps = {
   dateLabel: null,
+  density: DENSITY.high,
   excludeDates: null,
   filterDate: null,
   highlightDates: null,
@@ -107,6 +109,7 @@ var CalendarMonth = /*#__PURE__*/function (_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,