baseui 10.12.0 → 11.0.1

package/datepicker/calendar.js.flow

@@ -22,7 +22,7 @@ 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 type { CalendarPropsT, CalendarInternalState, DateValueT } from './types.js';
 import { DENSITY, ORIENTATION } from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
@@ -134,7 +134,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)) {
@@ -337,21 +337,33 @@ export default class Calendar<T = Date> extends React.Component<
     this.props.onDayMouseLeave && this.props.onDayMouseLeave(data);
   };
 
-  handleDateChange: ({ date: ?T | Array<T> }) => void = (data) => {
+  /** Responsible for merging time values into date values. Note: the 'Day' component
+   * determines how the days themselves change when a new day is selected. */
+  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], data.date);
       updatedDate = newTimeState[0];
     }
+
     // Update the date in time values of internal state
     this.setState({ time: newTimeState });
     onChange({ date: updatedDate });
@@ -367,12 +379,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 });
@@ -452,6 +464,8 @@ export default class Calendar<T = Date> extends React.Component<
             value={this.props.value}
             peekNextMonth={this.props.peekNextMonth}
             fixedHeight={this.props.fixedHeight}
+            hasLockedBehavior={!!this.props.hasLockedBehavior}
+            selectedInput={this.props.selectedInput}
           />
         </CalendarContainer>
       );

package/datepicker/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+exports.RANGED_CALENDAR_BEHAVIOR = exports.INPUT_ROLE = 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.
@@ -40,4 +40,14 @@ var DENSITY = {
   high: 'high',
   default: 'default'
 };
-exports.DENSITY = DENSITY;
+exports.DENSITY = DENSITY;
+var INPUT_ROLE = {
+  startDate: 'startDate',
+  endDate: 'endDate'
+};
+exports.INPUT_ROLE = INPUT_ROLE;
+var RANGED_CALENDAR_BEHAVIOR = {
+  default: 'default',
+  locked: 'locked'
+};
+exports.RANGED_CALENDAR_BEHAVIOR = RANGED_CALENDAR_BEHAVIOR;

package/datepicker/constants.js.flow

@@ -33,6 +33,16 @@ export const DENSITY = {
   default: 'default',
 };
 
+export const INPUT_ROLE = {
+  startDate: 'startDate',
+  endDate: 'endDate',
+};
+
+export const RANGED_CALENDAR_BEHAVIOR = {
+  default: 'default',
+  locked: 'locked',
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/datepicker/datepicker.js

@@ -27,6 +27,8 @@ var _dateHelpers = _interopRequireDefault(require("./utils/date-helpers.js"));
 
 var _dateFnsAdapter = _interopRequireDefault(require("./utils/date-fns-adapter.js"));
 
+var _constants = require("./constants.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -83,26 +85,26 @@ 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 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 inputRole = arguments.length > 2 ? arguments[2] : undefined;
   var inputValue = newInputValue;
 
-  var _prevCombinedInputVal = prevCombinedInputValue.split(INPUT_DELIMITER),
+  var _prevCombinedInputVal = prevCombinedInputValue.split(" ".concat(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 (inputRole === _constants.INPUT_ROLE.startDate && prevEndDate) {
+    inputValue = "".concat(inputValue, " ").concat(INPUT_DELIMITER, " ").concat(prevEndDate);
   }
 
-  if (separatedInput === 'endDate') {
-    inputValue = "".concat(prevStartDate, " \u2013 ").concat(inputValue);
+  if (inputRole === _constants.INPUT_ROLE.endDate) {
+    inputValue = "".concat(prevStartDate, " ").concat(INPUT_DELIMITER, " ").concat(inputValue);
   }
 
   return inputValue;
@@ -118,7 +120,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, Datepicker);
 
-    _this = _super.call(this, props); //$FlowFixMe
+    _this = _super.call(this, props); //$FlowFixMe[incompatible-call]
 
     _defineProperty(_assertThisInitialized(_this), "calendar", void 0);
 
@@ -131,18 +133,27 @@ 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],
               end = _nextDate2[1];
 
           if (_this.dateHelpers.isAfter(start, end)) {
-            nextDate = [start, start];
+            if (_this.hasLockedBehavior()) {
+              nextDate = _this.props.value;
+              isOpen = true;
+            } else {
+              nextDate = [start, start];
+            }
+          } else if (_this.dateHelpers.dateRangeIncludesDates( // $FlowFixMe Cannot call `this.dateHelpers.dateRangeIncludesDates` with `nextDate` bound to the first parameter because  read-only array type [1] is incompatible with  array type [2]
+          nextDate, _this.props.excludeDates)) {
+            nextDate = _this.props.value;
+            isOpen = true;
           }
 
           if (_this.state.lastActiveElm) {
@@ -234,11 +245,12 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return _this.formatDate(date, formatString);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "open", function () {
+    _defineProperty(_assertThisInitialized(_this), "open", function (inputRole) {
       _this.setState({
         isOpen: true,
         isPseudoFocused: true,
-        calendarFocused: false
+        calendarFocused: false,
+        selectedInput: inputRole
       }, _this.props.onOpen);
     });
 
@@ -247,6 +259,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused: isPseudoFocused,
         calendarFocused: false
       }, _this.props.onClose);
@@ -282,14 +295,14 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       }
 
       if (range && !separateRangeInputs) {
-        return '9999/99/99 – 9999/99/99';
+        return "9999/99/99 ".concat(INPUT_DELIMITER, " 9999/99/99");
       }
 
       return '9999/99/99';
     });
 
-    _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;
+    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event, inputRole) {
+      var inputValue = _this.props.range && _this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, _this.state.inputValue, inputRole) : event.currentTarget.value;
 
       var mask = _this.getMask();
 
@@ -322,7 +335,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       };
 
       if (_this.props.range && typeof _this.props.displayValueAtRangeIndex !== 'number') {
-        var _this$normalizeDashes = _this.normalizeDashes(inputValue).split(INPUT_DELIMITER),
+        var _this$normalizeDashes = _this.normalizeDashes(inputValue).split(" ".concat(INPUT_DELIMITER, " ")),
             _this$normalizeDashes2 = _slicedToArray(_this$normalizeDashes, 2),
             left = _this$normalizeDashes2[0],
             right = _this$normalizeDashes2[1];
@@ -454,13 +467,18 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "normalizeDashes", function (inputValue) {
       // replacing both hyphens and em-dashes with en-dashes
-      return inputValue.replace(/-/g, '–').replace(/—/g, '–');
+      return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hasLockedBehavior", function () {
+      return _this.props.rangedCalendarBehavior === _constants.RANGED_CALENDAR_BEHAVIOR.locked && _this.props.range && _this.props.separateRangeInputs;
     });
 
     _this.dateHelpers = new _dateHelpers.default(props.adapter);
     _this.state = {
       calendarFocused: false,
       isOpen: false,
+      selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
       inputValue: _this.formatDisplayValue(props.value) || ''
@@ -469,6 +487,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(Datepicker, [{
+    key: "getNullDatePlaceholder",
+    value: function getNullDatePlaceholder(formatString) {
+      return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
+    }
+  }, {
     key: "formatDate",
     value: function formatDate(date, formatString) {
       var _this2 = this;
@@ -485,10 +508,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(" ".concat(INPUT_DELIMITER, " "));
       } else if (Array.isArray(date)) {
         return date.map(function (day) {
-          return format(day);
-        }).join(INPUT_DELIMITER);
+          return day ? format(day) : '';
+        }).join(" ".concat(INPUT_DELIMITER, " "));
       } else {
         return format(date);
       }
@@ -504,7 +531,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderInputComponent",
-    value: function renderInputComponent(locale, separatedInput) {
+    value: function renderInputComponent(locale, inputRole) {
       var _this3 = this;
 
       var _this$props$overrides = this.props.overrides,
@@ -515,19 +542,19 @@ 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 placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? "YYYY/MM/DD ".concat(INPUT_DELIMITER, " YYYY/MM/DD") : 'YYYY/MM/DD';
 
-      var _split = (this.state.inputValue || '').split(INPUT_DELIMITER),
+      var _split = (this.state.inputValue || '').split(" ".concat(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 value = inputRole === _constants.INPUT_ROLE.startDate ? startDate : inputRole === _constants.INPUT_ROLE.endDate ? endDate : this.state.inputValue;
 
       var onChange = function onChange(event) {
-        return _this3.handleInputChange(event, separatedInput);
+        return _this3.handleInputChange(event, inputRole);
       };
 
       return /*#__PURE__*/React.createElement(InputComponent, _extends({
@@ -541,7 +568,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.disabled,
         size: this.props.size,
         value: value,
-        onFocus: this.open,
+        onFocus: function onFocus() {
+          return _this3.open(inputRole);
+        },
         onBlur: this.handleInputBlur,
         onKeyDown: this.handleKeyDown,
         onChange: onChange,
@@ -604,11 +633,13 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             trapTabbing: true,
             value: _this4.props.value
           }, _this4.props, {
-            onChange: _this4.onChange
+            onChange: _this4.onChange,
+            selectedInput: _this4.state.selectedInput,
+            hasLockedBehavior: _this4.hasLockedBehavior()
           }))
         }, 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", {
+        }), _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, _constants.INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, _constants.INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
           id: _this4.props['aria-describedby'],
           style: {
             position: 'fixed',
@@ -639,11 +670,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clipPath: 'inset(100%)'
           }
         }, // No date selected
-        !_this4.props.value || Array.isArray(_this4.props.value) && !_this4.props.value.length ? '' : // Date selected in a non-range picker
+        !_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
-        _this4.props.value.length > 1 ? (0, _i18nInterpolation.default)(locale.datepicker.selectedDateRange, {
+        _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])

package/datepicker/datepicker.js.flow

@@ -19,23 +19,26 @@ import {
   StyledStartDate,
   StyledEndDate,
 } from './styled-components.js';
-import type { DatepickerPropsT } from './types.js';
+import type { DatepickerPropsT, DateValueT, InputRoleT } 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';
+import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants.js';
 
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
 
-const INPUT_DELIMITER = ' – ';
+const INPUT_DELIMITER = '–';
 
-const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', separatedInput) => {
+const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', inputRole) => {
   let inputValue = newInputValue;
-  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(INPUT_DELIMITER);
-  if (separatedInput === 'startDate' && prevEndDate) {
-    inputValue = `${inputValue} – ${prevEndDate}`;
+  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(
+    ` ${INPUT_DELIMITER} `
+  );
+  if (inputRole === INPUT_ROLE.startDate && prevEndDate) {
+    inputValue = `${inputValue} ${INPUT_DELIMITER} ${prevEndDate}`;
   }
-  if (separatedInput === 'endDate') {
-    inputValue = `${prevStartDate} – ${inputValue}`;
+  if (inputRole === INPUT_ROLE.endDate) {
+    inputValue = `${prevStartDate} ${INPUT_DELIMITER} ${inputValue}`;
   }
   return inputValue;
 };
@@ -43,6 +46,7 @@ const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', sepa
 type StateT = {|
   calendarFocused: boolean,
   isOpen: boolean,
+  selectedInput: ?InputRoleT,
   isPseudoFocused: boolean,
   lastActiveElm: ?HTMLElement,
   inputValue?: string,
@@ -62,32 +66,47 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
 
   constructor(props: DatepickerPropsT<T>) {
     super(props);
-    //$FlowFixMe
+    //$FlowFixMe[incompatible-call]
     this.dateHelpers = new DateHelpers(props.adapter);
     this.state = {
       calendarFocused: false,
       isOpen: false,
+      selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
       inputValue: this.formatDisplayValue(props.value) || '',
     };
   }
 
-  onChange: ({ date: ?T | Array<T> }) => void = (data) => {
+  onChange: ({ date: DateValueT<T> }) => void = (data) => {
     let isOpen = false;
     let isPseudoFocused = false;
     let calendarFocused = false;
     let 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]) {
         const [start, end] = nextDate;
         if (this.dateHelpers.isAfter(start, end)) {
-          nextDate = [start, start];
+          if (this.hasLockedBehavior()) {
+            nextDate = this.props.value;
+            isOpen = true;
+          } else {
+            nextDate = [start, start];
+          }
+        } else if (
+          this.dateHelpers.dateRangeIncludesDates(
+            // $FlowFixMe Cannot call `this.dateHelpers.dateRangeIncludesDates` with `nextDate` bound to the first parameter because  read-only array type [1] is incompatible with  array type [2]
+            nextDate,
+            this.props.excludeDates
+          )
+        ) {
+          nextDate = this.props.value;
+          isOpen = true;
         }
 
         if (this.state.lastActiveElm) {
@@ -134,25 +153,34 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     this.props.onChange && this.props.onChange({ date: nextDate });
   };
 
-  formatDate(date: ?T | Array<T>, formatString: string) {
-    const format = (date) => {
+  getNullDatePlaceholder(formatString: string) {
+    return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
+  }
+
+  formatDate(date: DateValueT<T>, formatString: string) {
+    const format = (date: T) => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.format(date, 'slashDate', this.props.locale);
       }
       return this.dateHelpers.formatDate(date, formatString, this.props.locale);
     };
+
     if (!date) {
       return '';
     } else if (Array.isArray(date) && !date[0] && !date[1]) {
       return '';
+    } else if (Array.isArray(date) && !date[0] && date[1]) {
+      const endDate = format(date[1]);
+      const startDate = this.getNullDatePlaceholder(formatString);
+      return [startDate, endDate].join(` ${INPUT_DELIMITER} `);
     } else if (Array.isArray(date)) {
-      return date.map((day) => format(day)).join(INPUT_DELIMITER);
+      return date.map((day) => (day ? format(day) : '')).join(` ${INPUT_DELIMITER} `);
     } else {
       return format(date);
     }
   }
 
-  formatDisplayValue: (?T | Array<T>) => string = (date: ?T | Array<T>) => {
+  formatDisplayValue: (DateValueT<T>) => string = (date: DateValueT<T>) => {
     const { displayValueAtRangeIndex, formatDisplayValue, range } = this.props;
     const formatString = this.normalizeDashes(this.props.formatString);
 
@@ -181,12 +209,13 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     return this.formatDate(date, formatString);
   };
 
-  open = () => {
+  open = (inputRole?: InputRoleT) => {
     this.setState(
       {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false,
+        selectedInput: inputRole,
       },
       this.props.onOpen
     );
@@ -197,6 +226,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     this.setState(
       {
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused,
         calendarFocused: false,
       },
@@ -229,19 +259,16 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     }
 
     if (range && !separateRangeInputs) {
-      return '9999/99/99 – 9999/99/99';
+      return `9999/99/99 ${INPUT_DELIMITER} 9999/99/99`;
     }
 
     return '9999/99/99';
   };
 
-  handleInputChange = (
-    event: SyntheticInputEvent<HTMLInputElement>,
-    separatedInput?: 'startDate' | 'endDate'
-  ) => {
+  handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>, inputRole?: InputRoleT) => {
     const inputValue =
       this.props.range && this.props.separateRangeInputs
-        ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput)
+        ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, inputRole)
         : event.currentTarget.value;
 
     const mask = this.getMask();
@@ -270,7 +297,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     };
 
     if (this.props.range && typeof this.props.displayValueAtRangeIndex !== 'number') {
-      const [left, right] = this.normalizeDashes(inputValue).split(INPUT_DELIMITER);
+      const [left, right] = this.normalizeDashes(inputValue).split(` ${INPUT_DELIMITER} `);
 
       let startDate = this.dateHelpers.date(left);
       let endDate = this.dateHelpers.date(right);
@@ -370,7 +397,15 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
 
   normalizeDashes = (inputValue: string) => {
     // replacing both hyphens and em-dashes with en-dashes
-    return inputValue.replace(/-/g, '–').replace(/—/g, '–');
+    return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
+  };
+
+  hasLockedBehavior = () => {
+    return (
+      this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked &&
+      this.props.range &&
+      this.props.separateRangeInputs
+    );
   };
 
   componentDidUpdate(prevProps: DatepickerPropsT<T>) {
@@ -381,7 +416,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     }
   }
 
-  renderInputComponent(locale: LocaleT, separatedInput?: 'startDate' | 'endDate') {
+  renderInputComponent(locale: LocaleT, inputRole?: InputRoleT) {
     const { overrides = {} } = this.props;
 
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
@@ -390,19 +425,21 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       this.props.placeholder || this.props.placeholder === ''
         ? this.props.placeholder
         : this.props.range && !this.props.separateRangeInputs
-        ? 'YYYY/MM/DD – YYYY/MM/DD'
+        ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD`
         : 'YYYY/MM/DD';
 
-    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(INPUT_DELIMITER);
+    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(
+      ` ${INPUT_DELIMITER} `
+    );
 
     const value =
-      separatedInput === 'startDate'
+      inputRole === INPUT_ROLE.startDate
         ? startDate
-        : separatedInput === 'endDate'
+        : inputRole === INPUT_ROLE.endDate
         ? endDate
         : this.state.inputValue;
 
-    const onChange = (event) => this.handleInputChange(event, separatedInput);
+    const onChange = (event) => this.handleInputChange(event, inputRole);
 
     return (
       <InputComponent
@@ -419,7 +456,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         disabled={this.props.disabled}
         size={this.props.size}
         value={value}
-        onFocus={this.open}
+        onFocus={() => this.open(inputRole)}
         onBlur={this.handleInputBlur}
         onKeyDown={this.handleKeyDown}
         onChange={onChange}
@@ -463,6 +500,8 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                   value={this.props.value}
                   {...this.props}
                   onChange={this.onChange}
+                  selectedInput={this.state.selectedInput}
+                  hasLockedBehavior={this.hasLockedBehavior()}
                 />
               }
               {...popoverProps}
@@ -476,11 +515,11 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                   <>
                     <StartDate {...startDateProps}>
                       <InputLabel {...inputLabelProps}>{startDateLabel}</InputLabel>
-                      {this.renderInputComponent(locale, 'startDate')}
+                      {this.renderInputComponent(locale, INPUT_ROLE.startDate)}
                     </StartDate>
                     <EndDate {...endDateProps}>
                       <InputLabel {...inputLabelProps}>{endDateLabel}</InputLabel>
-                      {this.renderInputComponent(locale, 'endDate')}
+                      {this.renderInputComponent(locale, INPUT_ROLE.endDate)}
                     </EndDate>
                   </>
                 ) : (
@@ -524,7 +563,8 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
             >
               {
                 // No date selected
-                !this.props.value || (Array.isArray(this.props.value) && !this.props.value.length)
+                !this.props.value ||
+                (Array.isArray(this.props.value) && !this.props.value[0] && !this.props.value[1])
                   ? ''
                   : // Date selected in a non-range picker
                   !Array.isArray(this.props.value)
@@ -532,7 +572,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                       date: this.state.inputValue || '',
                     })
                   : // Start and end dates are selected in a range picker
-                  this.props.value.length > 1
+                  this.props.value[0] && this.props.value[1]
                   ? getInterpolatedString(locale.datepicker.selectedDateRange, {
                       startDate: this.formatDisplayValue(this.props.value[0]),
                       endDate: this.formatDisplayValue(