baseui 10.12.1 → 11.0.2

package/es/datepicker/datepicker.js

@@ -18,19 +18,20 @@ 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 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);
+  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(` ${INPUT_DELIMITER} `);
 
-  if (separatedInput === 'startDate' && prevEndDate) {
-    inputValue = `${inputValue} – ${prevEndDate}`;
+  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;
@@ -38,28 +39,69 @@ const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', sepa
 
 export default class Datepicker extends React.Component {
   constructor(props) {
-    super(props); //$FlowFixMe
+    super(props); //$FlowFixMe[incompatible-call]
 
     _defineProperty(this, "calendar", void 0);
 
     _defineProperty(this, "dateHelpers", void 0);
 
-    _defineProperty(this, "onChange", data => {
+    _defineProperty(this, "handleChange", date => {
+      const onChange = this.props.onChange;
+      const 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: [...date]
+          });
+        }
+      } else {
+        if (onChange) {
+          onChange({
+            date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date
+          });
+        }
+      }
+    });
+
+    _defineProperty(this, "onCalendarSelect", 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) {
@@ -104,9 +146,7 @@ export default class Datepicker extends React.Component {
         }),
         inputValue: this.formatDisplayValue(nextDate)
       });
-      this.props.onChange && this.props.onChange({
-        date: nextDate
-      });
+      this.handleChange(nextDate);
     });
 
     _defineProperty(this, "formatDisplayValue", date => {
@@ -146,11 +186,12 @@ export default class Datepicker extends React.Component {
       return this.formatDate(date, formatString);
     });
 
-    _defineProperty(this, "open", () => {
+    _defineProperty(this, "open", inputRole => {
       this.setState({
         isOpen: true,
         isPseudoFocused: true,
-        calendarFocused: false
+        calendarFocused: false,
+        selectedInput: inputRole
       }, this.props.onOpen);
     });
 
@@ -158,6 +199,7 @@ export default class Datepicker extends React.Component {
       const isPseudoFocused = false;
       this.setState({
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused,
         calendarFocused: false
       }, this.props.onClose);
@@ -194,28 +236,22 @@ export default class Datepicker extends React.Component {
       }
 
       if (range && !separateRangeInputs) {
-        return '9999/99/99 – 9999/99/99';
+        return `9999/99/99 ${INPUT_DELIMITER} 9999/99/99`;
       }
 
       return '9999/99/99';
     });
 
-    _defineProperty(this, "handleInputChange", (event, separatedInput) => {
-      const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput) : event.currentTarget.value;
+    _defineProperty(this, "handleInputChange", (event, inputRole) => {
+      const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, inputRole) : event.currentTarget.value;
       const mask = this.getMask();
       const 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);
         }
       }
 
@@ -232,7 +268,7 @@ export default class Datepicker extends React.Component {
       };
 
       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);
 
@@ -241,18 +277,12 @@ export default class Datepicker extends React.Component {
           endDate = parseDateString(right);
         }
 
-        const onChange = this.props.onChange;
+        const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
 
-        if (onChange) {
-          const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
-
-          const rangeValid = this.dateHelpers.isAfter(endDate, startDate) || this.dateHelpers.isEqual(startDate, endDate);
+        const 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 {
         const dateString = this.normalizeDashes(inputValue);
@@ -268,12 +298,11 @@ export default class Datepicker extends React.Component {
 
         const {
           displayValueAtRangeIndex,
-          onChange,
           range,
           value
         } = this.props;
 
-        if (date && this.dateHelpers.isValid(date) && onChange) {
+        if (date && this.dateHelpers.isValid(date)) {
           if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
             let [left, right] = value;
 
@@ -281,22 +310,16 @@ export default class Datepicker extends 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: [...value]
-                  });
+                  this.handleChange([...value]);
                 }
               }
             } else if (displayValueAtRangeIndex === 1) {
@@ -304,26 +327,18 @@ export default class Datepicker extends 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: [...value]
-                  });
+                  this.handleChange([...value]);
                 }
               }
             }
           } else {
-            onChange({
-              date
-            });
+            this.handleChange(date);
           }
         }
       }
@@ -353,19 +368,28 @@ export default class Datepicker extends React.Component {
 
     _defineProperty(this, "normalizeDashes", 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(this, "hasLockedBehavior", () => {
+      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) || ''
     };
   }
 
+  getNullDatePlaceholder(formatString) {
+    return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
+  }
+
   formatDate(date, formatString) {
     const format = date => {
       if (formatString === DEFAULT_DATE_FORMAT) {
@@ -379,8 +403,12 @@ export default class Datepicker extends React.Component {
       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);
     }
@@ -394,17 +422,14 @@ export default class Datepicker extends React.Component {
     }
   }
 
-  renderInputComponent(locale, separatedInput) {
+  renderInputComponent(locale, inputRole) {
     const {
       overrides = {}
     } = this.props;
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
-    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
-    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(INPUT_DELIMITER);
-    const value = separatedInput === 'startDate' ? startDate : separatedInput === 'endDate' ? endDate : this.state.inputValue;
-
-    const onChange = event => this.handleInputChange(event, separatedInput);
-
+    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD';
+    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(` ${INPUT_DELIMITER} `);
+    const 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),
@@ -416,10 +441,10 @@ export default class Datepicker extends React.Component {
       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,
+      onChange: event => this.handleInputChange(event, inputRole),
       placeholder: placeholder,
       mask: this.getMask(),
       required: this.props.required,
@@ -452,11 +477,13 @@ export default class Datepicker extends React.Component {
         trapTabbing: true,
         value: this.props.value
       }, this.props, {
-        onChange: this.onChange
+        onChange: this.onCalendarSelect,
+        selectedInput: this.state.selectedInput,
+        hasLockedBehavior: this.hasLockedBehavior()
       }))
     }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
       $separateRangeInputs: this.props.range && this.props.separateRangeInputs
-    }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, 'startDate')), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, 'endDate'))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+    }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
       id: this.props['aria-describedby'],
       style: {
         position: 'fixed',
@@ -487,11 +514,11 @@ export default class Datepicker extends React.Component {
         clipPath: 'inset(100%)'
       }
     }, // No date selected
-    !this.props.value || Array.isArray(this.props.value) && !this.props.value.length ? '' : // Date selected in a non-range picker
+    !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) ? getInterpolatedString(locale.datepicker.selectedDate, {
       date: this.state.inputValue || ''
     }) : // Start and end dates are selected in a range picker
-    this.props.value.length > 1 ? getInterpolatedString(locale.datepicker.selectedDateRange, {
+    this.props.value[0] && this.props.value[1] ? getInterpolatedString(locale.datepicker.selectedDateRange, {
       startDate: this.formatDisplayValue(this.props.value[0]),
       endDate: this.formatDisplayValue( // $FlowFixMe
       this.props.value[1])

package/es/datepicker/day.js

@@ -15,6 +15,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';
 export default class Day extends React.Component {
   constructor(props) {
     super(props);
@@ -41,22 +42,46 @@ export default class Day extends React.Component {
         range,
         value
       } = this.props;
-      let date;
+      let nextDate;
+
+      if (Array.isArray(value) && range && this.props.hasLockedBehavior) {
+        const currentDate = this.props.value;
+        let nextStartDate = null;
+        let 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) {
+        const [start, end] = value; // 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: nextDate
       });
     });
 
@@ -233,13 +258,16 @@ export default class Day extends React.Component {
       value
     } = this.props;
 
-    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)) {
+      const [start, end] = value;
 
+      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
 
@@ -251,16 +279,27 @@ export default class Day extends React.Component {
       highlightedDate
     } = this.props;
 
-    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)) {
+      const [start, end] = value;
 
+      if (!start && !end) {
+        return false;
+      }
 
-    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, 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 (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));
+        }
       }
     }
   }
@@ -271,22 +310,23 @@ export default class Day extends React.Component {
       value,
       highlightedDate,
       range,
-      highlighted
+      highlighted,
+      peekNextMonth
     } = this.props;
     const $isHighlighted = highlighted;
     const $selected = this.isSelected();
-    const $hasRangeHighlighted = !!(Array.isArray(value) && range && value.length === 1 && highlightedDate && !this.dateHelpers.isSameDay(value[0], highlightedDate));
-    const $outsideMonth = !this.props.peekNextMonth && this.isOutsideMonth();
-    const $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !this.props.peekNextMonth && this.isOutsideOfMonthButWithinRange());
+    const $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)));
+    const $outsideMonth = !peekNextMonth && this.isOutsideMonth();
+    const $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,
-      $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,
       $isHovered: this.state.isHovered,
@@ -296,12 +336,15 @@ export default class Day extends React.Component {
       $month: this.getMonthProp(),
       $outsideMonth,
       $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,
-      $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/es/datepicker/month.js

@@ -82,7 +82,9 @@ export default class CalendarMonth extends 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/es/datepicker/stateful-calendar.js

@@ -1,3 +1,5 @@
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
@@ -12,7 +14,10 @@ import Calendar from './calendar.js';
 
 class StatefulComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Calendar, extendedProps));
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Calendar, _extends({}, extendedProps, {
+      // flowlint-next-line unclear-type:off
+      onChange: extendedProps.onChange
+    })));
   }
 
 }

package/es/datepicker/stateful-container.js

@@ -20,9 +20,29 @@ class StatefulContainer extends React.Component {
       this.internalSetState(STATE_CHANGE_TYPE.change, {
         value: date
       });
+      const onChange = this.props.onChange;
 
-      if (typeof this.props.onChange === 'function') {
-        this.props.onChange(data);
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date
+          });
+        }
+      }
+
+      const onRangeChange = this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date
+        });
       }
     });
 

package/es/datepicker/stateful-datepicker.js

@@ -1,3 +1,5 @@
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
@@ -12,7 +14,10 @@ import Datepicker from './datepicker.js';
 
 class StatefulComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Datepicker, extendedProps));
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Datepicker, _extends({}, extendedProps, {
+      // flowlint-next-line unclear-type:off
+      onChange: extendedProps.onChange
+    })));
   }
 
 }