baseui 10.12.1 → 11.0.2

package/datepicker/datepicker.js.flow

@@ -19,23 +19,26 @@ import {
   StyledStartDate,
   StyledEndDate,
 } from './styled-components.js';
-import type { DatepickerPropsT } from './types.js';
+import type { DatepickerPropsT, InputRoleT } from './types.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import type { LocaleT } from '../locale/types.js';
+import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants.js';
 
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
 
-const INPUT_DELIMITER = ' – ';
+const INPUT_DELIMITER = '–';
 
-const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', separatedInput) => {
+const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', inputRole) => {
   let inputValue = newInputValue;
-  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(INPUT_DELIMITER);
-  if (separatedInput === 'startDate' && prevEndDate) {
-    inputValue = `${inputValue} – ${prevEndDate}`;
+  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(
+    ` ${INPUT_DELIMITER} `
+  );
+  if (inputRole === INPUT_ROLE.startDate && prevEndDate) {
+    inputValue = `${inputValue} ${INPUT_DELIMITER} ${prevEndDate}`;
   }
-  if (separatedInput === 'endDate') {
-    inputValue = `${prevStartDate} – ${inputValue}`;
+  if (inputRole === INPUT_ROLE.endDate) {
+    inputValue = `${prevStartDate} ${INPUT_DELIMITER} ${inputValue}`;
   }
   return inputValue;
 };
@@ -43,6 +46,7 @@ const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', sepa
 type StateT = {|
   calendarFocused: boolean,
   isOpen: boolean,
+  selectedInput: ?InputRoleT,
   isPseudoFocused: boolean,
   lastActiveElm: ?HTMLElement,
   inputValue?: string,
@@ -62,32 +66,71 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
 
   constructor(props: DatepickerPropsT<T>) {
     super(props);
-    //$FlowFixMe
+    //$FlowFixMe[incompatible-call]
     this.dateHelpers = new DateHelpers(props.adapter);
     this.state = {
       calendarFocused: false,
       isOpen: false,
+      selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
       inputValue: this.formatDisplayValue(props.value) || '',
     };
   }
 
-  onChange: ({ date: ?T | Array<T> }) => void = (data) => {
+  handleChange: (?T | $ReadOnlyArray<?T>) => void = (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: any): Array<T>) });
+      }
+
+      if (onRangeChange) {
+        onRangeChange({ date: [...date] });
+      }
+    } else {
+      if (onChange) {
+        onChange({ date });
+      }
+
+      if (onRangeChange) {
+        onRangeChange({ date });
+      }
+    }
+  };
+
+  onCalendarSelect: ({ +date: ?T | Array<?T> }) => void = (data) => {
     let isOpen = false;
     let isPseudoFocused = false;
     let calendarFocused = false;
     let nextDate = data.date;
 
     if (Array.isArray(nextDate) && this.props.range) {
-      if (nextDate.length < 2) {
+      if (!nextDate[0] || !nextDate[1]) {
         isOpen = true;
         isPseudoFocused = true;
         calendarFocused = null;
-      } else if (nextDate.length === 2) {
+      } else if (nextDate[0] && nextDate[1]) {
         const [start, end] = nextDate;
         if (this.dateHelpers.isAfter(start, end)) {
-          nextDate = [start, start];
+          if (this.hasLockedBehavior()) {
+            nextDate = this.props.value;
+            isOpen = true;
+          } else {
+            nextDate = [start, start];
+          }
+        } else if (
+          this.dateHelpers.dateRangeIncludesDates(
+            // $FlowFixMe Cannot call `this.dateHelpers.dateRangeIncludesDates` with `nextDate` bound to the first parameter because  read-only array type [1] is incompatible with  array type [2]
+            nextDate,
+            this.props.excludeDates
+          )
+        ) {
+          nextDate = this.props.value;
+          isOpen = true;
         }
 
         if (this.state.lastActiveElm) {
@@ -131,28 +174,37 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       inputValue: this.formatDisplayValue(nextDate),
     });
 
-    this.props.onChange && this.props.onChange({ date: nextDate });
+    this.handleChange(nextDate);
   };
 
-  formatDate(date: ?T | Array<T>, formatString: string) {
-    const format = (date) => {
+  getNullDatePlaceholder(formatString: string) {
+    return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
+  }
+
+  formatDate(date: ?T | $ReadOnlyArray<?T>, formatString: string) {
+    const format = (date: T) => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.format(date, 'slashDate', this.props.locale);
       }
       return this.dateHelpers.formatDate(date, formatString, this.props.locale);
     };
+
     if (!date) {
       return '';
     } else if (Array.isArray(date) && !date[0] && !date[1]) {
       return '';
+    } else if (Array.isArray(date) && !date[0] && date[1]) {
+      const endDate = format(date[1]);
+      const startDate = this.getNullDatePlaceholder(formatString);
+      return [startDate, endDate].join(` ${INPUT_DELIMITER} `);
     } else if (Array.isArray(date)) {
-      return date.map((day) => format(day)).join(INPUT_DELIMITER);
+      return date.map((day) => (day ? format(day) : '')).join(` ${INPUT_DELIMITER} `);
     } else {
       return format(date);
     }
   }
 
-  formatDisplayValue: (?T | Array<T>) => string = (date: ?T | Array<T>) => {
+  formatDisplayValue: (?T | $ReadOnlyArray<?T>) => string = (date) => {
     const { displayValueAtRangeIndex, formatDisplayValue, range } = this.props;
     const formatString = this.normalizeDashes(this.props.formatString);
 
@@ -181,12 +233,13 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     return this.formatDate(date, formatString);
   };
 
-  open = () => {
+  open = (inputRole?: InputRoleT) => {
     this.setState(
       {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false,
+        selectedInput: inputRole,
       },
       this.props.onOpen
     );
@@ -197,6 +250,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     this.setState(
       {
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused,
         calendarFocused: false,
       },
@@ -229,19 +283,16 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     }
 
     if (range && !separateRangeInputs) {
-      return '9999/99/99 – 9999/99/99';
+      return `9999/99/99 ${INPUT_DELIMITER} 9999/99/99`;
     }
 
     return '9999/99/99';
   };
 
-  handleInputChange = (
-    event: SyntheticInputEvent<HTMLInputElement>,
-    separatedInput?: 'startDate' | 'endDate'
-  ) => {
+  handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>, inputRole?: InputRoleT) => {
     const inputValue =
       this.props.range && this.props.separateRangeInputs
-        ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput)
+        ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, inputRole)
         : event.currentTarget.value;
 
     const mask = this.getMask();
@@ -251,12 +302,10 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       (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);
       }
     }
 
@@ -270,7 +319,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     };
 
     if (this.props.range && typeof this.props.displayValueAtRangeIndex !== 'number') {
-      const [left, right] = this.normalizeDashes(inputValue).split(INPUT_DELIMITER);
+      const [left, right] = this.normalizeDashes(inputValue).split(` ${INPUT_DELIMITER} `);
 
       let startDate = this.dateHelpers.date(left);
       let endDate = this.dateHelpers.date(right);
@@ -280,18 +329,15 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         endDate = parseDateString(right);
       }
 
-      const onChange = this.props.onChange;
-      if (onChange) {
-        const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate);
+      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);
+      // 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);
 
-        if (datesValid && rangeValid) {
-          onChange({ date: [startDate, endDate] });
-        }
+      if (datesValid && rangeValid) {
+        this.handleChange([startDate, endDate]);
       }
     } else {
       const dateString = this.normalizeDashes(inputValue);
@@ -306,41 +352,41 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         date = parseDateString(dateString);
       }
 
-      const { displayValueAtRangeIndex, onChange, range, value } = this.props;
-      if (date && this.dateHelpers.isValid(date) && onChange) {
+      const { displayValueAtRangeIndex, range, value } = this.props;
+      if (date && this.dateHelpers.isValid(date)) {
         if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
           let [left, right] = value;
           if (displayValueAtRangeIndex === 0) {
             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) {
             right = date;
             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);
         }
       }
     }
@@ -370,7 +416,15 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
 
   normalizeDashes = (inputValue: string) => {
     // replacing both hyphens and em-dashes with en-dashes
-    return inputValue.replace(/-/g, '–').replace(/—/g, '–');
+    return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
+  };
+
+  hasLockedBehavior = () => {
+    return (
+      this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked &&
+      this.props.range &&
+      this.props.separateRangeInputs
+    );
   };
 
   componentDidUpdate(prevProps: DatepickerPropsT<T>) {
@@ -381,7 +435,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     }
   }
 
-  renderInputComponent(locale: LocaleT, separatedInput?: 'startDate' | 'endDate') {
+  renderInputComponent(locale: LocaleT, inputRole?: InputRoleT) {
     const { overrides = {} } = this.props;
 
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
@@ -390,20 +444,20 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       this.props.placeholder || this.props.placeholder === ''
         ? this.props.placeholder
         : this.props.range && !this.props.separateRangeInputs
-        ? 'YYYY/MM/DD – YYYY/MM/DD'
+        ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD`
         : 'YYYY/MM/DD';
 
-    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(INPUT_DELIMITER);
+    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(
+      ` ${INPUT_DELIMITER} `
+    );
 
     const value =
-      separatedInput === 'startDate'
+      inputRole === INPUT_ROLE.startDate
         ? startDate
-        : separatedInput === 'endDate'
+        : inputRole === INPUT_ROLE.endDate
         ? endDate
         : this.state.inputValue;
 
-    const onChange = (event) => this.handleInputChange(event, separatedInput);
-
     return (
       <InputComponent
         aria-disabled={this.props.disabled}
@@ -419,10 +473,10 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         disabled={this.props.disabled}
         size={this.props.size}
         value={value}
-        onFocus={this.open}
+        onFocus={() => this.open(inputRole)}
         onBlur={this.handleInputBlur}
         onKeyDown={this.handleKeyDown}
-        onChange={onChange}
+        onChange={(event) => this.handleInputChange(event, inputRole)}
         placeholder={placeholder}
         mask={this.getMask()}
         required={this.props.required}
@@ -462,7 +516,9 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                   trapTabbing={true}
                   value={this.props.value}
                   {...this.props}
-                  onChange={this.onChange}
+                  onChange={this.onCalendarSelect}
+                  selectedInput={this.state.selectedInput}
+                  hasLockedBehavior={this.hasLockedBehavior()}
                 />
               }
               {...popoverProps}
@@ -476,11 +532,11 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                   <>
                     <StartDate {...startDateProps}>
                       <InputLabel {...inputLabelProps}>{startDateLabel}</InputLabel>
-                      {this.renderInputComponent(locale, 'startDate')}
+                      {this.renderInputComponent(locale, INPUT_ROLE.startDate)}
                     </StartDate>
                     <EndDate {...endDateProps}>
                       <InputLabel {...inputLabelProps}>{endDateLabel}</InputLabel>
-                      {this.renderInputComponent(locale, 'endDate')}
+                      {this.renderInputComponent(locale, INPUT_ROLE.endDate)}
                     </EndDate>
                   </>
                 ) : (
@@ -524,7 +580,8 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
             >
               {
                 // No date selected
-                !this.props.value || (Array.isArray(this.props.value) && !this.props.value.length)
+                !this.props.value ||
+                (Array.isArray(this.props.value) && !this.props.value[0] && !this.props.value[1])
                   ? ''
                   : // Date selected in a non-range picker
                   !Array.isArray(this.props.value)
@@ -532,7 +589,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                       date: this.state.inputValue || '',
                     })
                   : // Start and end dates are selected in a range picker
-                  this.props.value.length > 1
+                  this.props.value[0] && this.props.value[1]
                   ? getInterpolatedString(locale.datepicker.selectedDateRange, {
                       startDate: this.formatDisplayValue(this.props.value[0]),
                       endDate: this.formatDisplayValue(

package/datepicker/day.js

@@ -21,6 +21,8 @@ var _index = require("../locale/index.js");
 
 var _focusVisible = require("../utils/focusVisible.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; }
@@ -96,22 +98,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 === _constants.INPUT_ROLE.startDate) {
+          nextStartDate = selectedDate;
+          nextEndDate = Array.isArray(currentDate) && currentDate[1] ? currentDate[1] : null;
+        } else if (_this.props.selectedInput === _constants.INPUT_ROLE.endDate) {
+          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null;
+          nextEndDate = selectedDate;
+        }
 
-      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];
+        nextDate = [nextStartDate];
+
+        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
       });
     });
 
@@ -298,13 +327,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
 
@@ -316,16 +350,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 (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));
+          }
         }
       }
     }
@@ -337,21 +384,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,
@@ -361,12 +409,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
       };
     }
   }, {