baseui 10.6.0 → 10.7.0

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,44 @@ 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) {
+    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);
@@ -215,7 +239,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false
-      });
+      }, _this.props.onOpen);
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function () {
@@ -246,9 +270,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 +281,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) {
@@ -296,8 +313,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 +322,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];
@@ -473,7 +488,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);
       }
@@ -488,8 +503,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 +515,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 +574,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 +639,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.length ? '' : // 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.length > 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)));
       });
     }

package/datepicker/datepicker.js.flow

@@ -13,10 +13,38 @@ 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 type {DatepickerPropsT} from './types.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
+import type {LocaleT} from '../locale/types.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;
+};
 
 type StateT = {|
   calendarFocused: boolean,
@@ -25,7 +53,6 @@ type StateT = {|
   lastActiveElm: ?HTMLElement,
   inputValue?: string,
 |};
-export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
 
 export default class Datepicker<T = Date> extends React.Component<
   DatepickerPropsT<T>,
@@ -128,7 +155,7 @@ export default class Datepicker<T = Date> 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);
     }
@@ -164,11 +191,14 @@ export default class Datepicker<T = Date> extends React.Component<
   };
 
   open = () => {
-    this.setState({
-      isOpen: true,
-      isPseudoFocused: true,
-      calendarFocused: false,
-    });
+    this.setState(
+      {
+        isOpen: true,
+        isPseudoFocused: true,
+        calendarFocused: false,
+      },
+      this.props.onOpen,
+    );
   };
 
   close = () => {
@@ -197,9 +227,12 @@ export default class Datepicker<T = Date> extends React.Component<
   };
 
   getMask = () => {
-    const {formatString, mask, range} = this.props;
+    const {formatString, mask, range, separateRangeInputs} = this.props;
 
-    if (mask === null) {
+    if (
+      mask === null ||
+      (mask === undefined && formatString !== DEFAULT_DATE_FORMAT)
+    ) {
       return null;
     }
 
@@ -207,28 +240,28 @@ export default class Datepicker<T = Date> 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';
   };
 
-  handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
-    const inputValue = event.currentTarget.value;
+  handleInputChange = (
+    event: SyntheticInputEvent<HTMLInputElement>,
+    separatedInput?: 'startDate' | 'endDate',
+  ) => {
+    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, ' ')) ||
@@ -245,7 +278,6 @@ export default class Datepicker<T = Date> extends React.Component<
 
     this.setState({inputValue});
 
-    const formatString = this.normalizeDashes(this.props.formatString);
     const parseDateString = dateString => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.parse(
@@ -265,7 +297,9 @@ export default class Datepicker<T = Date> extends React.Component<
       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);
@@ -391,12 +425,73 @@ export default class Datepicker<T = Date> extends React.Component<
     }
   }
 
-  render() {
+  renderInputComponent(
+    locale: LocaleT,
+    separatedInput?: 'startDate' | 'endDate',
+  ) {
     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 (
+      <InputComponent
+        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,
@@ -405,13 +500,18 @@ export default class Datepicker<T = Date> extends React.Component<
       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 (
       <LocaleContext.Consumer>
@@ -419,6 +519,7 @@ export default class Datepicker<T = Date> extends React.Component<
           <React.Fragment>
             <PopoverComponent
               focusLock={false}
+              autoFocus={false}
               mountNode={this.props.mountNode}
               placement={PLACEMENT.bottom}
               isOpen={this.state.isOpen}
@@ -436,33 +537,31 @@ export default class Datepicker<T = Date> extends React.Component<
               }
               {...popoverProps}
             >
-              <InputWrapper {...inputWrapperProps}>
-                <InputComponent
-                  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}
-                />
+              {}
+              <InputWrapper
+                {...inputWrapperProps}
+                $separateRangeInputs={
+                  this.props.range && this.props.separateRangeInputs
+                }
+              >
+                {this.props.range && this.props.separateRangeInputs ? (
+                  <>
+                    <StartDate {...startDateProps}>
+                      <InputLabel {...inputLabelProps}>
+                        {startDateLabel}
+                      </InputLabel>
+                      {this.renderInputComponent(locale, 'startDate')}
+                    </StartDate>
+                    <EndDate {...endDateProps}>
+                      <InputLabel {...inputLabelProps}>
+                        {endDateLabel}
+                      </InputLabel>
+                      {this.renderInputComponent(locale, 'endDate')}
+                    </EndDate>
+                  </>
+                ) : (
+                  <>{this.renderInputComponent(locale)}</>
+                )}
               </InputWrapper>
             </PopoverComponent>
             <p

package/datepicker/day.js

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

@@ -291,6 +291,7 @@ export default class Day<T = Date> extends React.Component<
     );
     return {
       $date: date,
+      $density: this.props.density,
       $disabled: this.props.disabled,
       $endDate:
         (Array.isArray(value) &&

package/datepicker/index.d.ts

@@ -148,6 +148,9 @@ export interface DatepickerOverrides<T> {
   Input?: Override<T>;
   InputWrapper?: Override<T>;
   Popover?: Override<T>;
+  StartDate?: Override<T>;
+  EndDate?: Override<T>;
+  InputLabel?: Override<T>;
 }
 export type DatepickerProps = CalendarProps & {
   'aria-label'?: string;
@@ -166,6 +169,10 @@ export type DatepickerProps = CalendarProps & {
   mask?: string | null;
   mountNode?: HTMLElement;
   onClose?: () => any;
+  onOpen?: () => any;
+  separateRangeInputs?: boolean;
+  startDateLabel?: string;
+  endDateLabel?: string;
 };
 export interface DatepickerState {
   calendarFocused: boolean;