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

package/datepicker/calendar.js.flow

@@ -22,8 +22,12 @@ import {
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import type {CalendarPropsT, CalendarInternalState} from './types.js';
-import {ORIENTATION} from './constants.js';
+import type {
+  CalendarPropsT,
+  CalendarInternalState,
+  DateValueT,
+} from './types.js';
+import {DENSITY, ORIENTATION} from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
   CalendarPropsT<T>,
@@ -32,6 +36,7 @@ export default class Calendar<T = Date> extends React.Component<
   static defaultProps: {adapter: DateIOAdapter<Date>} = {
     autoFocusCalendar: false,
     dateLabel: null,
+    density: DENSITY.default,
     excludeDates: null,
     filterDate: null,
     highlightedDate: null,
@@ -139,7 +144,7 @@ export default class Calendar<T = Date> extends React.Component<
     return monthDelta >= 0 && monthDelta < (this.props.monthsShown || 1);
   }
 
-  getSingleDate(value: ?T | Array<T>): ?T {
+  getSingleDate(value: DateValueT<T>): ?T {
     // need to check this.props.range but flow would complain
     // at the return value in the else clause
     if (Array.isArray(value)) {
@@ -345,20 +350,26 @@ export default class Calendar<T = Date> extends React.Component<
     this.props.onDayMouseLeave && this.props.onDayMouseLeave(data);
   };
 
-  handleDateChange: ({date: ?T | Array<T>}) => void = data => {
+  handleDateChange: ({date: DateValueT<T>}) => void = data => {
     const {onChange = params => {}} = this.props;
     let updatedDate = data.date;
     // We'll need to update the date in time values of internal state
     const newTimeState = [...this.state.time];
     // Apply the currently selected time values (saved in state) to the updated date
     if (Array.isArray(data.date)) {
-      updatedDate = data.date.map((date, index) => {
-        newTimeState[index] = this.dateHelpers.applyDateToTime(
-          newTimeState[index],
-          date,
-        );
-        return newTimeState[index];
-      });
+      const start = data.date[0]
+        ? this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0])
+        : null;
+      const end = data.date[1]
+        ? this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1])
+        : null;
+      newTimeState[0] = start;
+      if (end) {
+        updatedDate = [start, end];
+        newTimeState[1] = end;
+      } else {
+        updatedDate = [start];
+      }
     } else if (!Array.isArray(this.props.value) && data.date) {
       newTimeState[0] = this.dateHelpers.applyDateToTime(
         newTimeState[0],
@@ -366,6 +377,7 @@ export default class Calendar<T = Date> extends React.Component<
       );
       updatedDate = newTimeState[0];
     }
+
     // Update the date in time values of internal state
     this.setState({time: newTimeState});
     onChange({date: updatedDate});
@@ -384,12 +396,12 @@ export default class Calendar<T = Date> extends React.Component<
     // with the date value set to the date with updated time
     if (Array.isArray(this.props.value)) {
       const dates = this.props.value.map((date, i) => {
-        if (index === i) {
+        if (date && index === i) {
           return this.dateHelpers.applyTimeToDate(date, time);
         }
         return date;
       });
-      onChange({date: dates});
+      onChange({date: [dates[0], dates[1]]});
     } else {
       const date = this.dateHelpers.applyTimeToDate(this.props.value, time);
       onChange({date});
@@ -442,11 +454,13 @@ export default class Calendar<T = Date> extends React.Component<
           aria-multiselectable={this.props.range || null}
           onKeyDown={this.onKeyDown}
           {...calendarContainerProps}
+          $density={this.props.density}
         >
           <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}
@@ -643,6 +657,7 @@ export default class Calendar<T = Date> extends React.Component<
       <LocaleContext.Consumer>
         {locale => (
           <Root
+            $density={this.props.density}
             data-baseweb="calendar"
             role="application"
             aria-roledescription="datepicker"

package/datepicker/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
+exports.DENSITY = exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -33,4 +33,11 @@ var STATE_CHANGE_TYPE = Object.freeze({
 });
 exports.STATE_CHANGE_TYPE = STATE_CHANGE_TYPE;
 var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
-exports.WEEKDAYS = WEEKDAYS;
+exports.WEEKDAYS = WEEKDAYS;
+var DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+exports.DEFAULT_MONTHS = DEFAULT_MONTHS;
+var DENSITY = {
+  high: 'high',
+  default: 'default'
+};
+exports.DENSITY = DENSITY;

package/datepicker/constants.js.flow

@@ -26,6 +26,13 @@ export const STATE_CHANGE_TYPE = Object.freeze({
 
 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 DENSITY = {
+  high: 'high',
+  default: 'default',
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/datepicker/datepicker.js

@@ -47,18 +47,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); } }
@@ -81,8 +69,45 @@ 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; }
+
 var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
 exports.DEFAULT_DATE_FORMAT = DEFAULT_DATE_FORMAT;
+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) {
+    // TODO(LUKE): use INPUT_DELIMITER below
+    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);
@@ -107,11 +132,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var nextDate = data.date;
 
       if (Array.isArray(nextDate) && _this.props.range) {
-        if (nextDate.length < 2) {
+        if (!nextDate[0] || !nextDate[1]) {
           isOpen = true;
           isPseudoFocused = true;
           calendarFocused = null;
-        } else if (nextDate.length === 2) {
+        } else if (nextDate[0] && nextDate[1]) {
           var _nextDate = nextDate,
               _nextDate2 = _slicedToArray(_nextDate, 2),
               start = _nextDate2[0],
@@ -215,7 +240,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false
-      });
+      }, _this.props.onOpen);
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function () {
@@ -246,9 +271,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;
       }
 
@@ -256,28 +282,21 @@ 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) {
+        // TODO(LUKE): use INPUT_DELIMITER below
         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) {
@@ -296,8 +315,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);
@@ -307,7 +324,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];
@@ -454,6 +471,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(Datepicker, [{
+    key: "getNullDatePlaceholder",
+    value: function getNullDatePlaceholder(formatString) {
+      return (this.getMask() || formatString).split('–')[0].replace(/[0-9]|[a-z]/g, ' ');
+    }
+  }, {
     key: "formatDate",
     value: function formatDate(date, formatString) {
       var _this2 = this;
@@ -470,10 +492,14 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         return '';
       } else if (Array.isArray(date) && !date[0] && !date[1]) {
         return '';
+      } else if (Array.isArray(date) && !date[0] && date[1]) {
+        var endDate = format(date[1]);
+        var startDate = this.getNullDatePlaceholder(formatString);
+        return [startDate, endDate].join(INPUT_DELIMITER);
       } else if (Array.isArray(date)) {
         return date.map(function (day) {
-          return format(day);
-        }).join(' – ');
+          return day ? format(day) : '';
+        }).join(INPUT_DELIMITER);
       } else {
         return format(date);
       }
@@ -488,8 +514,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,
@@ -500,6 +526,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 = (0, _overrides.getOverrides)(overrides.Popover, _index2.Popover),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
           PopoverComponent = _getOverrides4[0],
@@ -510,44 +585,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 = (0, _overrides.getOverrides)(overrides.StartDate, _styledComponents.StyledStartDate),
+          _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+          StartDate = _getOverrides8[0],
+          startDateProps = _getOverrides8[1];
+
+      var _getOverrides9 = (0, _overrides.getOverrides)(overrides.EndDate, _styledComponents.StyledEndDate),
+          _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+          EndDate = _getOverrides10[0],
+          endDateProps = _getOverrides10[1];
+
+      var _getOverrides11 = (0, _overrides.getOverrides)(overrides.InputLabel, _styledComponents.StyledInputLabel),
+          _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+          InputLabel = _getOverrides12[0],
+          inputLabelProps = _getOverrides12[1];
+
       return /*#__PURE__*/React.createElement(_index3.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: _index2.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.default, _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',
@@ -577,17 +650,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) ? (0, _i18nInterpolation.default)(locale.datepicker.selectedDate, {
-          date: _this3.state.inputValue || ''
+        !_this4.props.value || Array.isArray(_this4.props.value) && !_this4.props.value[0] && !_this4.props.value[1] ? '' : // Date selected in a non-range picker
+        !Array.isArray(_this4.props.value) ? (0, _i18nInterpolation.default)(locale.datepicker.selectedDate, {
+          date: _this4.state.inputValue || ''
         }) : // Start and end dates are selected in a range picker
-        _this3.props.value.length > 1 ? (0, _i18nInterpolation.default)(locale.datepicker.selectedDateRange, {
-          startDate: _this3.formatDisplayValue(_this3.props.value[0]),
-          endDate: _this3.formatDisplayValue( // $FlowFixMe
-          _this3.props.value[1])
+        _this4.props.value[0] && _this4.props.value[1] ? (0, _i18nInterpolation.default)(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((0, _i18nInterpolation.default)(locale.datepicker.selectedDate, {
-          date: _this3.formatDisplayValue(_this3.props.value[0])
+          date: _this4.formatDisplayValue(_this4.props.value[0])
         }), " ").concat(locale.datepicker.selectSecondDatePrompt)));
       });
     }