baseui 10.12.1 → 11.0.2

package/esm/datepicker/datepicker.js

@@ -2,6 +2,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 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."); }
@@ -10,10 +14,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); } }
@@ -64,27 +64,28 @@ import { LocaleContext } from '../locale/index.js';
 import { StyledInputWrapper, StyledInputLabel, StyledStartDate, StyledEndDate } from './styled-components.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
+import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants.js';
 export var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
-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 === INPUT_ROLE.startDate && prevEndDate) {
+    inputValue = "".concat(inputValue, " ").concat(INPUT_DELIMITER, " ").concat(prevEndDate);
   }
 
-  if (separatedInput === 'endDate') {
-    inputValue = "".concat(prevStartDate, " \u2013 ").concat(inputValue);
+  if (inputRole === INPUT_ROLE.endDate) {
+    inputValue = "".concat(prevStartDate, " ").concat(INPUT_DELIMITER, " ").concat(inputValue);
   }
 
   return inputValue;
@@ -100,31 +101,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) {
@@ -174,9 +216,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) {
@@ -216,11 +256,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);
     });
 
@@ -229,6 +270,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused: isPseudoFocused,
         calendarFocused: false
       }, _this.props.onClose);
@@ -264,30 +306,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);
         }
       }
 
@@ -304,7 +340,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];
@@ -318,19 +354,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);
@@ -348,11 +378,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],
@@ -362,22 +391,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) {
@@ -385,26 +408,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);
           }
         }
       }
@@ -436,13 +451,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 === RANGED_CALENDAR_BEHAVIOR.locked && _this.props.range && _this.props.separateRangeInputs;
     });
 
     _this.dateHelpers = new DateHelpers(props.adapter);
     _this.state = {
       calendarFocused: false,
       isOpen: false,
+      selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
       inputValue: _this.formatDisplayValue(props.value) || ''
@@ -451,6 +471,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;
@@ -467,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(" ".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);
       }
@@ -486,7 +515,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,
@@ -497,21 +526,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 === INPUT_ROLE.startDate ? startDate : inputRole === 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),
@@ -523,10 +547,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,
@@ -586,11 +614,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, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
           id: _this4.props['aria-describedby'],
           style: {
             position: 'fixed',
@@ -621,11 +651,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) ? getInterpolatedString(locale.datepicker.selectedDate, {
           date: _this4.state.inputValue || ''
         }) : // Start and end dates are selected in a range picker
-        _this4.props.value.length > 1 ? getInterpolatedString(locale.datepicker.selectedDateRange, {
+        _this4.props.value[0] && _this4.props.value[1] ? getInterpolatedString(locale.datepicker.selectedDateRange, {
           startDate: _this4.formatDisplayValue(_this4.props.value[0]),
           endDate: _this4.formatDisplayValue( // $FlowFixMe
           _this4.props.value[1])

package/esm/datepicker/day.js

@@ -49,6 +49,7 @@ import DateHelpers from './utils/date-helpers.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { LocaleContext } from '../locale/index.js';
 import { isFocusVisible } from '../utils/focusVisible.js';
+import { INPUT_ROLE } from './constants.js';
 
 var Day = /*#__PURE__*/function (_React$Component) {
   _inherits(Day, _React$Component);
@@ -83,22 +84,49 @@ var Day = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           range = _this$props.range,
           value = _this$props.value;
-      var date;
+      var nextDate;
+
+      if (Array.isArray(value) && range && _this.props.hasLockedBehavior) {
+        var currentDate = _this.props.value;
+        var nextStartDate = null;
+        var nextEndDate = null;
+
+        if (_this.props.selectedInput === INPUT_ROLE.startDate) {
+          nextStartDate = selectedDate;
+          nextEndDate = Array.isArray(currentDate) && currentDate[1] ? currentDate[1] : null;
+        } else if (_this.props.selectedInput === INPUT_ROLE.endDate) {
+          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null;
+          nextEndDate = selectedDate;
+        }
+
+        nextDate = [nextStartDate];
 
-      if (Array.isArray(value) && range) {
-        if (!value.length || value.length > 1) {
-          date = [selectedDate];
-        } else if (_this.dateHelpers.isAfter(selectedDate, value[0])) {
-          date = [value[0], selectedDate];
+        if (nextEndDate) {
+          nextDate.push(nextEndDate);
+        }
+      } else if (Array.isArray(value) && range && !_this.props.hasLockedBehavior) {
+        var _value = _slicedToArray(value, 2),
+            start = _value[0],
+            end = _value[1]; // Starting a new range
+
+
+        if (!start && !end || start && end) {
+          nextDate = [selectedDate, null]; // EndDate needs a StartDate, SelectedDate comes before EndDate
+        } else if (!start && end && _this.dateHelpers.isAfter(end, selectedDate)) {
+          nextDate = [selectedDate, end]; // EndDate needs a StartDate, but SelectedDate comes after EndDate
+        } else if (!start && end && _this.dateHelpers.isAfter(selectedDate, end)) {
+          nextDate = [end, selectedDate]; // StartDate needs an EndDate, SelectedDate comes after StartDate
+        } else if (start && !end && _this.dateHelpers.isAfter(selectedDate, start)) {
+          nextDate = [start, selectedDate];
         } else {
-          date = [selectedDate, value[0]];
+          nextDate = [selectedDate, start];
         }
       } else {
-        date = selectedDate;
+        nextDate = selectedDate;
       }
 
       _this.props.onSelect({
-        date: date
+        date: nextDate
       });
     });
 
@@ -285,13 +313,18 @@ var Day = /*#__PURE__*/function (_React$Component) {
       var date = this.getDateProp();
       var value = this.props.value;
 
-      if (Array.isArray(value) && !value[0] && !value[1]) {
-        return false;
-      } // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
+      if (Array.isArray(value)) {
+        var _value2 = _slicedToArray(value, 2),
+            start = _value2[0],
+            end = _value2[1];
 
+        if (!start && !end) {
+          return false;
+        }
 
-      if (Array.isArray(value) && value.length > 1) {
-        return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(value[0]), this.clampToDayStart(value[1]));
+        if (start && end) {
+          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(start), this.clampToDayStart(end));
+        }
       }
     } // calculated for range case only
 
@@ -303,16 +336,29 @@ var Day = /*#__PURE__*/function (_React$Component) {
           value = _this$props4.value,
           highlightedDate = _this$props4.highlightedDate;
 
-      if (Array.isArray(value) && !value[0] && !value[1]) {
-        return false;
-      } // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
+      if (Array.isArray(value)) {
+        var _value3 = _slicedToArray(value, 2),
+            start = _value3[0],
+            end = _value3[1];
+
+        if (!start && !end) {
+          return false;
+        }
 
+        if (highlightedDate && start && !end) {
+          if (this.dateHelpers.isAfter(highlightedDate, start)) {
+            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(start), this.clampToDayStart(highlightedDate));
+          } else {
+            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(start));
+          }
+        }
 
-      if (Array.isArray(value) && highlightedDate && value[0] && !value[1]) {
-        if (this.dateHelpers.isAfter(highlightedDate, value[0])) {
-          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(value[0]), this.clampToDayStart(highlightedDate));
-        } else {
-          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(value[0]));
+        if (highlightedDate && !start && end) {
+          if (this.dateHelpers.isAfter(highlightedDate, end)) {
+            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(end), this.clampToDayStart(highlightedDate));
+          } else {
+            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(end));
+          }
         }
       }
     }
@@ -324,21 +370,22 @@ var Day = /*#__PURE__*/function (_React$Component) {
           value = _this$props5.value,
           highlightedDate = _this$props5.highlightedDate,
           range = _this$props5.range,
-          highlighted = _this$props5.highlighted;
+          highlighted = _this$props5.highlighted,
+          peekNextMonth = _this$props5.peekNextMonth;
       var $isHighlighted = highlighted;
       var $selected = this.isSelected();
-      var $hasRangeHighlighted = !!(Array.isArray(value) && range && value.length === 1 && highlightedDate && !this.dateHelpers.isSameDay(value[0], highlightedDate));
-      var $outsideMonth = !this.props.peekNextMonth && this.isOutsideMonth();
-      var $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !this.props.peekNextMonth && this.isOutsideOfMonthButWithinRange());
+      var $hasRangeHighlighted = !!(Array.isArray(value) && range && highlightedDate && (value[0] && !value[1] && !this.dateHelpers.isSameDay(value[0], highlightedDate) || !value[0] && value[1] && !this.dateHelpers.isSameDay(value[1], highlightedDate)));
+      var $outsideMonth = !peekNextMonth && this.isOutsideMonth();
+      var $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !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,
+        $endDate: Array.isArray(value) && !!(value[0] && value[1]) && range && $selected && this.dateHelpers.isSameDay(date, value[1]) || false,
         $hasDateLabel: !!this.props.dateLabel,
         $hasRangeHighlighted: $hasRangeHighlighted,
-        $hasRangeOnRight: Array.isArray(value) && $hasRangeHighlighted && highlightedDate && value[0] && this.dateHelpers.isAfter(highlightedDate, value[0]),
-        $hasRangeSelected: Array.isArray(value) ? value.length === 2 : false,
+        $hasRangeOnRight: Array.isArray(value) && $hasRangeHighlighted && highlightedDate && (value[0] && this.dateHelpers.isAfter(highlightedDate, value[0]) || value[1] && this.dateHelpers.isAfter(highlightedDate, value[1])),
+        $hasRangeSelected: Array.isArray(value) ? !!(value[0] && value[1]) : false,
         $highlightedDate: highlightedDate,
         $isHighlighted: $isHighlighted,
         $isHovered: this.state.isHovered,
@@ -348,12 +395,15 @@ var Day = /*#__PURE__*/function (_React$Component) {
         $month: this.getMonthProp(),
         $outsideMonth: $outsideMonth,
         $outsideMonthWithinRange: $outsideMonthWithinRange,
-        $peekNextMonth: this.props.peekNextMonth,
-        $pseudoHighlighted: this.props.range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
-        $pseudoSelected: this.props.range && !$selected ? this.isPseudoSelected() : false,
-        $range: this.props.range,
+        $peekNextMonth: peekNextMonth,
+        $pseudoHighlighted: range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
+        $pseudoSelected: range && !$selected ? this.isPseudoSelected() : false,
+        $range: range,
         $selected: $selected,
-        $startDate: Array.isArray(this.props.value) && this.props.value.length > 1 && this.props.range && $selected ? this.dateHelpers.isSameDay(date, this.props.value[0]) : false
+        $startDate: Array.isArray(value) && value[0] && value[1] && range && $selected ? this.dateHelpers.isSameDay(date, value[0]) : false,
+        $hasLockedBehavior: this.props.hasLockedBehavior,
+        $selectedInput: this.props.selectedInput,
+        $value: this.props.value
       };
     }
   }, {

package/esm/datepicker/month.js

@@ -129,7 +129,9 @@ var CalendarMonth = /*#__PURE__*/function (_React$Component) {
           onChange: _this.props.onChange,
           overrides: _this.props.overrides,
           peekNextMonth: _this.props.peekNextMonth,
-          value: _this.props.value
+          value: _this.props.value,
+          hasLockedBehavior: _this.props.hasLockedBehavior,
+          selectedInput: _this.props.selectedInput
         }));
         i++;
         currentWeekStart = _this.dateHelpers.addWeeks(currentWeekStart, 1); // It will break on the next week if the week is out of the month

package/esm/datepicker/stateful-calendar.js

@@ -1,5 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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 _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); } }
@@ -47,7 +49,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(StatefulContainer, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(Calendar, extendedProps);
+        return /*#__PURE__*/React.createElement(Calendar, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);