baseui 10.12.1 → 11.0.0

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
       };
     }
   }, {

package/datepicker/day.js.flow

@@ -14,6 +14,7 @@ import type { DayPropsT, DayStateT } from './types.js';
 import { LocaleContext } from '../locale/index.js';
 import type { LocaleT } from '../locale/types.js';
 import { isFocusVisible } from '../utils/focusVisible.js';
+import { INPUT_ROLE } from './constants.js';
 
 export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStateT> {
   static defaultProps = {
@@ -72,21 +73,58 @@ export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStat
       : this.props.month;
   };
 
+  /**
+   * Determines how the day value(s) should be updated when a new day is selected.
+   * Note: time values are incorporated into new day/date values downstream in `Calendar`.
+   * Note: Situations where Start Dates are after End Dates are handled downstream in `Datepicker`.
+   * */
   onSelect: (T) => void = (selectedDate) => {
     const { range, value } = this.props;
-    let date;
-    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];
+
+    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 (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 });
+
+    this.props.onSelect({ date: nextDate });
   };
 
   onKeyDown = (event: KeyboardEvent) => {
@@ -205,16 +243,21 @@ export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStat
   isPseudoSelected() {
     const date = this.getDateProp();
     const { 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) && value.length > 1) {
-      return this.dateHelpers.isDayInRange(
-        this.clampToDayStart(date),
-        this.clampToDayStart(value[0]),
-        this.clampToDayStart(value[1])
-      );
+
+    if (Array.isArray(value)) {
+      const [start, end] = value;
+
+      if (!start && !end) {
+        return false;
+      }
+
+      if (start && end) {
+        return this.dateHelpers.isDayInRange(
+          this.clampToDayStart(date),
+          this.clampToDayStart(start),
+          this.clampToDayStart(end)
+        );
+      }
     }
   }
 
@@ -222,46 +265,66 @@ export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStat
   isPseudoHighlighted() {
     const date = this.getDateProp();
     const { value, 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) && 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 (Array.isArray(value)) {
+      const [start, end] = value;
+
+      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 (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)
+          );
+        }
       }
     }
   }
 
   getSharedProps() {
     const date = this.getDateProp();
-    const { value, highlightedDate, range, highlighted } = this.props;
+    const { value, highlightedDate, range, 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)
+      ((value[0] && !value[1] && !this.dateHelpers.isSameDay(value[0], highlightedDate)) ||
+        (!value[0] && value[1] && !this.dateHelpers.isSameDay(value[1], highlightedDate)))
     );
-    const $outsideMonth = !this.props.peekNextMonth && this.isOutsideMonth();
+    const $outsideMonth = !peekNextMonth && this.isOutsideMonth();
     const $outsideMonthWithinRange = !!(
       Array.isArray(value) &&
       range &&
       $outsideMonth &&
-      !this.props.peekNextMonth &&
+      !peekNextMonth &&
       this.isOutsideOfMonthButWithinRange()
     );
     return {
@@ -270,7 +333,8 @@ export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStat
       $disabled: this.props.disabled,
       $endDate:
         (Array.isArray(value) &&
-          this.props.range &&
+          !!(value[0] && value[1]) &&
+          range &&
           $selected &&
           this.dateHelpers.isSameDay(date, value[1])) ||
         false,
@@ -280,9 +344,9 @@ export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStat
         Array.isArray(value) &&
         $hasRangeHighlighted &&
         highlightedDate &&
-        value[0] &&
-        this.dateHelpers.isAfter(highlightedDate, value[0]),
-      $hasRangeSelected: Array.isArray(value) ? value.length === 2 : false,
+        ((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,
@@ -292,19 +356,19 @@ export default class Day<T = Date> extends React.Component<DayPropsT<T>, DayStat
       $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
-      $peekNextMonth: this.props.peekNextMonth,
+      $peekNextMonth: peekNextMonth,
       $pseudoHighlighted:
-        this.props.range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
-      $pseudoSelected: this.props.range && !$selected ? this.isPseudoSelected() : false,
-      $range: this.props.range,
+        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])
+        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/datepicker/locale.js.flow

@@ -28,7 +28,6 @@ export type DatepickerLocaleT = {|
   quickSelectPlaceholder: string,
   timeSelectEndLabel: string,
   timeSelectStartLabel: string,
-  timePickerAriaLabel?: string,
   timePickerAriaLabel12Hour: string,
   timePickerAriaLabel24Hour: string,
   timezonePickerAriaLabel: string,

package/datepicker/month.js

@@ -143,7 +143,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/datepicker/month.js.flow

@@ -100,6 +100,8 @@ export default class CalendarMonth<T = Date> extends React.Component<MonthPropsT
           overrides={this.props.overrides}
           peekNextMonth={this.props.peekNextMonth}
           value={this.props.value}
+          hasLockedBehavior={this.props.hasLockedBehavior}
+          selectedInput={this.props.selectedInput}
         />
       );
       i++;

package/datepicker/stateful-container.js.flow

@@ -14,6 +14,7 @@ import type {
   StatefulContainerPropsT,
   StateChangeTypeT,
   StateReducerT,
+  DateValueT,
 } from './types.js';
 
 type InputProps<T> = CalendarPropsT<T> | DatepickerPropsT<T>;
@@ -33,7 +34,7 @@ class StatefulContainer<T = Date> extends React.Component<PropsT<T>, ContainerSt
     this.state = { value, ...props.initialState };
   }
 
-  onChange: ({ date: ?T | Array<T> }) => mixed = (data) => {
+  onChange: ({ date: DateValueT<T> }) => mixed = (data) => {
     const { date } = data;
     this.internalSetState(STATE_CHANGE_TYPE.change, { value: date });
     if (typeof this.props.onChange === 'function') {

package/datepicker/styled-components.js

@@ -13,6 +13,18 @@ var _constants = require("./constants.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return 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; }
@@ -448,6 +460,9 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       $outsideMonthWithinRange = props.$outsideMonthWithinRange,
       $hasDateLabel = props.$hasDateLabel,
       $density = props.$density,
+      $hasLockedBehavior = props.$hasLockedBehavior,
+      $selectedInput = props.$selectedInput,
+      $value = props.$value,
       _props$$theme4 = props.$theme,
       colors = _props$$theme4.colors,
       typography = _props$$theme4.typography,
@@ -469,6 +484,13 @@ var StyledDay = (0, _index.styled)('div', function (props) {
     }
   }
 
+  var _ref9 = Array.isArray($value) ? $value : [$value, null],
+      _ref10 = _slicedToArray(_ref9, 2),
+      startDate = _ref10[0],
+      endDate = _ref10[1];
+
+  var oppositeInputIsPopulated = $selectedInput === _constants.INPUT_ROLE.startDate ? endDate !== null && typeof endDate !== 'undefined' : startDate !== null && typeof startDate !== 'undefined';
+  var shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
   return _objectSpread(_objectSpread(_objectSpread({}, $density === _constants.DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium), {}, {
     boxSizing: 'border-box',
     position: 'relative',
@@ -530,7 +552,7 @@ var StyledDay = (0, _index.styled)('div', function (props) {
     }, getDayStyles(code, props.$theme)[':after'] || {}), $outsideMonthWithinRange ? {
       content: null
     } : {})
-  }, $range ? {
+  }, shouldHighlightRange ? {
     // :before pseudo element defines a grey background style that extends
     // the selected/highlighted day's circle and spans through a range
     ':before': _objectSpread(_objectSpread({

package/datepicker/styled-components.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
 import type { SharedStylePropsT, CalendarPropsT } from './types.js';
-import { ORIENTATION, DENSITY } from './constants.js';
+import { ORIENTATION, DENSITY, INPUT_ROLE } from './constants.js';
 
 /**
  * Main component container element
@@ -408,6 +408,9 @@ export const StyledDay = styled<SharedStylePropsT>('div', (props) => {
     $outsideMonthWithinRange,
     $hasDateLabel,
     $density,
+    $hasLockedBehavior,
+    $selectedInput,
+    $value,
     $theme: { colors, typography, sizing },
   } = props;
   const code = getDayStateCode(props);
@@ -427,6 +430,13 @@ export const StyledDay = styled<SharedStylePropsT>('div', (props) => {
     }
   }
 
+  const [startDate, endDate] = Array.isArray($value) ? $value : [$value, null];
+  const oppositeInputIsPopulated =
+    $selectedInput === INPUT_ROLE.startDate
+      ? endDate !== null && typeof endDate !== 'undefined'
+      : startDate !== null && typeof startDate !== 'undefined';
+  const shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
+
   return ({
     ...($density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium),
     boxSizing: 'border-box',
@@ -496,7 +506,7 @@ export const StyledDay = styled<SharedStylePropsT>('div', (props) => {
       ...(getDayStyles(code, props.$theme)[':after'] || {}),
       ...($outsideMonthWithinRange ? { content: null } : {}),
     },
-    ...($range
+    ...(shouldHighlightRange
       ? {
           // :before pseudo element defines a grey background style that extends
           // the selected/highlighted day's circle and spans through a range