baseui 10.12.1 → 11.0.2

package/datepicker/calendar.js.flow

@@ -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: ?T | $ReadOnlyArray<?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,23 +337,38 @@ 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: ?T | Array<?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];
-      });
+      // We'll need to update the date in time values of internal state
+      const newTimeState = [...this.state.time];
+      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];
+      }
+      // Update the date in time values of internal state
+      this.setState({ time: newTimeState });
     } else if (!Array.isArray(this.props.value) && data.date) {
-      newTimeState[0] = this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-      updatedDate = newTimeState[0];
+      const newTimeState = this.dateHelpers.applyDateToTime(this.state.time[0], data.date);
+      updatedDate = newTimeState;
+
+      // Update the date in time values of internal state
+      this.setState({ time: [newTimeState] });
     }
-    // Update the date in time values of internal state
-    this.setState({ time: newTimeState });
+
     onChange({ date: updatedDate });
   };
 
@@ -367,12 +382,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 +467,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; }
@@ -35,6 +37,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -43,10 +49,6 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.it
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-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 _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); } }
@@ -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,31 +120,72 @@ 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);
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
+      var onChange = _this.props.onChange;
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (Array.isArray(date)) {
+        if (onChange && date.every(Boolean)) {
+          // flowlint-next-line unclear-type:off
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: _toConsumableArray(date)
+          });
+        }
+      } else {
+        if (onChange) {
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: date
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (data) {
       var isOpen = false;
       var isPseudoFocused = false;
       var calendarFocused = false;
       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) {
@@ -192,9 +235,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         inputValue: _this.formatDisplayValue(nextDate)
       }));
 
-      _this.props.onChange && _this.props.onChange({
-        date: nextDate
-      });
+      _this.handleChange(nextDate);
     });
 
     _defineProperty(_assertThisInitialized(_this), "formatDisplayValue", function (date) {
@@ -234,11 +275,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 +289,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused: isPseudoFocused,
         calendarFocused: false
       }, _this.props.onClose);
@@ -282,30 +325,24 @@ 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();
 
       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) {
-            _this.props.onChange({
-              date: []
-            });
-          } else {
-            _this.props.onChange({
-              date: null
-            });
-          }
+        if (_this.props.range) {
+          _this.handleChange([]);
+        } else {
+          _this.handleChange(null);
         }
       }
 
@@ -322,7 +359,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];
@@ -336,19 +373,13 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           endDate = parseDateString(right);
         }
 
-        var onChange = _this.props.onChange;
-
-        if (onChange) {
-          var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
+        var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
 
 
-          var rangeValid = _this.dateHelpers.isAfter(endDate, startDate) || _this.dateHelpers.isEqual(startDate, endDate);
+        var rangeValid = _this.dateHelpers.isAfter(endDate, startDate) || _this.dateHelpers.isEqual(startDate, endDate);
 
-          if (datesValid && rangeValid) {
-            onChange({
-              date: [startDate, endDate]
-            });
-          }
+        if (datesValid && rangeValid) {
+          _this.handleChange([startDate, endDate]);
         }
       } else {
         var dateString = _this.normalizeDashes(inputValue);
@@ -366,11 +397,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
         var _this$props3 = _this.props,
             displayValueAtRangeIndex = _this$props3.displayValueAtRangeIndex,
-            _onChange = _this$props3.onChange,
             range = _this$props3.range,
             value = _this$props3.value;
 
-        if (date && _this.dateHelpers.isValid(date) && _onChange) {
+        if (date && _this.dateHelpers.isValid(date)) {
           if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
             var _value = _slicedToArray(value, 2),
                 _left = _value[0],
@@ -380,22 +410,16 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
               _left = date;
 
               if (!_right) {
-                _onChange({
-                  date: [_left]
-                });
+                _this.handleChange([_left]);
               } else {
                 if (_this.dateHelpers.isAfter(_right, _left) || _this.dateHelpers.isEqual(_left, _right)) {
-                  _onChange({
-                    date: [_left, _right]
-                  });
+                  _this.handleChange([_left, _right]);
                 } else {
                   // Is resetting back to previous value appropriate? Invalid range is not
                   // communicated to the user, but if it was not reset the text value would
                   // show one value and date value another. This seems a bit better but clearly
                   // has a downside.
-                  _onChange({
-                    date: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             } else if (displayValueAtRangeIndex === 1) {
@@ -403,26 +427,18 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
               if (!_left) {
                 // If start value is not defined, set start/end to the same day.
-                _onChange({
-                  date: [_right, _right]
-                });
+                _this.handleChange([_right, _right]);
               } else {
                 if (_this.dateHelpers.isAfter(_right, _left) || _this.dateHelpers.isEqual(_left, _right)) {
-                  _onChange({
-                    date: [_left, _right]
-                  });
+                  _this.handleChange([_left, _right]);
                 } else {
                   // See comment above about resetting dates on invalid range
-                  _onChange({
-                    date: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             }
           } else {
-            _onChange({
-              date: date
-            });
+            _this.handleChange(date);
           }
         }
       }
@@ -454,13 +470,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 +490,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 +511,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 +534,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,21 +545,16 @@ 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 onChange = function onChange(event) {
-        return _this3.handleInputChange(event, separatedInput);
-      };
-
+      var value = inputRole === _constants.INPUT_ROLE.startDate ? startDate : inputRole === _constants.INPUT_ROLE.endDate ? endDate : this.state.inputValue;
       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),
@@ -541,10 +566,14 @@ 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,
+        onChange: function onChange(event) {
+          return _this3.handleInputChange(event, inputRole);
+        },
         placeholder: placeholder,
         mask: this.getMask(),
         required: this.props.required,
@@ -604,11 +633,13 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             trapTabbing: true,
             value: _this4.props.value
           }, _this4.props, {
-            onChange: _this4.onChange
+            onChange: _this4.onCalendarSelect,
+            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])