baseui 10.12.1 → 11.0.2

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-calendar.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); } }
@@ -56,7 +58,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(_calendar.default, extendedProps);
+        return /*#__PURE__*/React.createElement(_calendar.default, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/stateful-calendar.js.flow

@@ -18,10 +18,17 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
     stateReducer: (type, nextState) => nextState,
     onSelect: () => {},
   };
+
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {(extendedProps) => <Calendar {...extendedProps} />}
+        {(extendedProps) => (
+          <Calendar
+            {...extendedProps}
+            // flowlint-next-line unclear-type:off
+            onChange={(extendedProps.onChange: any)}
+          />
+        )}
       </StatefulContainer>
     );
   }

package/datepicker/stateful-container.js

@@ -64,8 +64,29 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         value: date
       });
 
-      if (typeof _this.props.onChange === 'function') {
-        _this.props.onChange(data);
+      var onChange = _this.props.onChange;
+
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date: date
+          });
+        }
+      }
+
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date: date
+        });
       }
     });
 

package/datepicker/stateful-container.js.flow

@@ -33,11 +33,25 @@ class StatefulContainer<T = Date> extends React.Component<PropsT<T>, ContainerSt
     this.state = { value, ...props.initialState };
   }
 
-  onChange: ({ date: ?T | Array<T> }) => mixed = (data) => {
+  onChange: ({ +date: ?T | Array<?T> }) => mixed = (data) => {
     const { date } = data;
     this.internalSetState(STATE_CHANGE_TYPE.change, { value: date });
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(data);
+
+    const onChange = this.props.onChange;
+    if (onChange) {
+      if (Array.isArray(date)) {
+        if (date.every(Boolean)) {
+          // flowlint-next-line unclear-type:off
+          onChange({ date: ((date: any): Array<T>) });
+        }
+      } else {
+        onChange({ date });
+      }
+    }
+
+    const onRangeChange = this.props.onRangeChange;
+    if (onRangeChange) {
+      onRangeChange({ date });
     }
   };
 

package/datepicker/stateful-datepicker.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); } }
@@ -56,7 +58,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(_datepicker.default, extendedProps);
+        return /*#__PURE__*/React.createElement(_datepicker.default, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/stateful-datepicker.js.flow

@@ -21,7 +21,13 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {(extendedProps) => <Datepicker {...extendedProps} />}
+        {(extendedProps) => (
+          <Datepicker
+            {...extendedProps}
+            // flowlint-next-line unclear-type:off
+            onChange={(extendedProps.onChange: any)}
+          />
+        )}
       </StatefulContainer>
     );
   }

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