baseui 10.12.1 → 11.0.0

package/esm/datepicker/datepicker.js

@@ -64,27 +64,28 @@ import { LocaleContext } from '../locale/index.js';
 import { StyledInputWrapper, StyledInputLabel, StyledStartDate, StyledEndDate } from './styled-components.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
+import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants.js';
 export var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
-var INPUT_DELIMITER = ' – ';
+var INPUT_DELIMITER = '–';
 
 var combineSeparatedInputs = function combineSeparatedInputs(newInputValue) {
   var prevCombinedInputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var separatedInput = arguments.length > 2 ? arguments[2] : undefined;
+  var inputRole = arguments.length > 2 ? arguments[2] : undefined;
   var inputValue = newInputValue;
 
-  var _prevCombinedInputVal = prevCombinedInputValue.split(INPUT_DELIMITER),
+  var _prevCombinedInputVal = prevCombinedInputValue.split(" ".concat(INPUT_DELIMITER, " ")),
       _prevCombinedInputVal2 = _slicedToArray(_prevCombinedInputVal, 2),
       _prevCombinedInputVal3 = _prevCombinedInputVal2[0],
       prevStartDate = _prevCombinedInputVal3 === void 0 ? '' : _prevCombinedInputVal3,
       _prevCombinedInputVal4 = _prevCombinedInputVal2[1],
       prevEndDate = _prevCombinedInputVal4 === void 0 ? '' : _prevCombinedInputVal4;
 
-  if (separatedInput === 'startDate' && prevEndDate) {
-    inputValue = "".concat(inputValue, " \u2013 ").concat(prevEndDate);
+  if (inputRole === INPUT_ROLE.startDate && prevEndDate) {
+    inputValue = "".concat(inputValue, " ").concat(INPUT_DELIMITER, " ").concat(prevEndDate);
   }
 
-  if (separatedInput === 'endDate') {
-    inputValue = "".concat(prevStartDate, " \u2013 ").concat(inputValue);
+  if (inputRole === INPUT_ROLE.endDate) {
+    inputValue = "".concat(prevStartDate, " ").concat(INPUT_DELIMITER, " ").concat(inputValue);
   }
 
   return inputValue;
@@ -100,7 +101,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, Datepicker);
 
-    _this = _super.call(this, props); //$FlowFixMe
+    _this = _super.call(this, props); //$FlowFixMe[incompatible-call]
 
     _defineProperty(_assertThisInitialized(_this), "calendar", void 0);
 
@@ -113,18 +114,27 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var nextDate = data.date;
 
       if (Array.isArray(nextDate) && _this.props.range) {
-        if (nextDate.length < 2) {
+        if (!nextDate[0] || !nextDate[1]) {
           isOpen = true;
           isPseudoFocused = true;
           calendarFocused = null;
-        } else if (nextDate.length === 2) {
+        } else if (nextDate[0] && nextDate[1]) {
           var _nextDate = nextDate,
               _nextDate2 = _slicedToArray(_nextDate, 2),
               start = _nextDate2[0],
               end = _nextDate2[1];
 
           if (_this.dateHelpers.isAfter(start, end)) {
-            nextDate = [start, start];
+            if (_this.hasLockedBehavior()) {
+              nextDate = _this.props.value;
+              isOpen = true;
+            } else {
+              nextDate = [start, start];
+            }
+          } else if (_this.dateHelpers.dateRangeIncludesDates( // $FlowFixMe Cannot call `this.dateHelpers.dateRangeIncludesDates` with `nextDate` bound to the first parameter because  read-only array type [1] is incompatible with  array type [2]
+          nextDate, _this.props.excludeDates)) {
+            nextDate = _this.props.value;
+            isOpen = true;
           }
 
           if (_this.state.lastActiveElm) {
@@ -216,11 +226,12 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return _this.formatDate(date, formatString);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "open", function () {
+    _defineProperty(_assertThisInitialized(_this), "open", function (inputRole) {
       _this.setState({
         isOpen: true,
         isPseudoFocused: true,
-        calendarFocused: false
+        calendarFocused: false,
+        selectedInput: inputRole
       }, _this.props.onOpen);
     });
 
@@ -229,6 +240,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused: isPseudoFocused,
         calendarFocused: false
       }, _this.props.onClose);
@@ -264,14 +276,14 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       }
 
       if (range && !separateRangeInputs) {
-        return '9999/99/99 – 9999/99/99';
+        return "9999/99/99 ".concat(INPUT_DELIMITER, " 9999/99/99");
       }
 
       return '9999/99/99';
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event, separatedInput) {
-      var inputValue = _this.props.range && _this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, _this.state.inputValue, separatedInput) : event.currentTarget.value;
+    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event, inputRole) {
+      var inputValue = _this.props.range && _this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, _this.state.inputValue, inputRole) : event.currentTarget.value;
 
       var mask = _this.getMask();
 
@@ -304,7 +316,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       };
 
       if (_this.props.range && typeof _this.props.displayValueAtRangeIndex !== 'number') {
-        var _this$normalizeDashes = _this.normalizeDashes(inputValue).split(INPUT_DELIMITER),
+        var _this$normalizeDashes = _this.normalizeDashes(inputValue).split(" ".concat(INPUT_DELIMITER, " ")),
             _this$normalizeDashes2 = _slicedToArray(_this$normalizeDashes, 2),
             left = _this$normalizeDashes2[0],
             right = _this$normalizeDashes2[1];
@@ -436,13 +448,18 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "normalizeDashes", function (inputValue) {
       // replacing both hyphens and em-dashes with en-dashes
-      return inputValue.replace(/-/g, '–').replace(/—/g, '–');
+      return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hasLockedBehavior", function () {
+      return _this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked && _this.props.range && _this.props.separateRangeInputs;
     });
 
     _this.dateHelpers = new DateHelpers(props.adapter);
     _this.state = {
       calendarFocused: false,
       isOpen: false,
+      selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
       inputValue: _this.formatDisplayValue(props.value) || ''
@@ -451,6 +468,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(Datepicker, [{
+    key: "getNullDatePlaceholder",
+    value: function getNullDatePlaceholder(formatString) {
+      return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
+    }
+  }, {
     key: "formatDate",
     value: function formatDate(date, formatString) {
       var _this2 = this;
@@ -467,10 +489,14 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         return '';
       } else if (Array.isArray(date) && !date[0] && !date[1]) {
         return '';
+      } else if (Array.isArray(date) && !date[0] && date[1]) {
+        var endDate = format(date[1]);
+        var startDate = this.getNullDatePlaceholder(formatString);
+        return [startDate, endDate].join(" ".concat(INPUT_DELIMITER, " "));
       } else if (Array.isArray(date)) {
         return date.map(function (day) {
-          return format(day);
-        }).join(INPUT_DELIMITER);
+          return day ? format(day) : '';
+        }).join(" ".concat(INPUT_DELIMITER, " "));
       } else {
         return format(date);
       }
@@ -486,7 +512,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderInputComponent",
-    value: function renderInputComponent(locale, separatedInput) {
+    value: function renderInputComponent(locale, inputRole) {
       var _this3 = this;
 
       var _this$props$overrides = this.props.overrides,
@@ -497,19 +523,19 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputComponent = _getOverrides2[0],
           inputProps = _getOverrides2[1];
 
-      var placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
+      var placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? "YYYY/MM/DD ".concat(INPUT_DELIMITER, " YYYY/MM/DD") : 'YYYY/MM/DD';
 
-      var _split = (this.state.inputValue || '').split(INPUT_DELIMITER),
+      var _split = (this.state.inputValue || '').split(" ".concat(INPUT_DELIMITER, " ")),
           _split2 = _slicedToArray(_split, 2),
           _split2$ = _split2[0],
           startDate = _split2$ === void 0 ? '' : _split2$,
           _split2$2 = _split2[1],
           endDate = _split2$2 === void 0 ? '' : _split2$2;
 
-      var value = separatedInput === 'startDate' ? startDate : separatedInput === 'endDate' ? endDate : this.state.inputValue;
+      var value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === INPUT_ROLE.endDate ? endDate : this.state.inputValue;
 
       var onChange = function onChange(event) {
-        return _this3.handleInputChange(event, separatedInput);
+        return _this3.handleInputChange(event, inputRole);
       };
 
       return /*#__PURE__*/React.createElement(InputComponent, _extends({
@@ -523,7 +549,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.disabled,
         size: this.props.size,
         value: value,
-        onFocus: this.open,
+        onFocus: function onFocus() {
+          return _this3.open(inputRole);
+        },
         onBlur: this.handleInputBlur,
         onKeyDown: this.handleKeyDown,
         onChange: onChange,
@@ -586,11 +614,13 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             trapTabbing: true,
             value: _this4.props.value
           }, _this4.props, {
-            onChange: _this4.onChange
+            onChange: _this4.onChange,
+            selectedInput: _this4.state.selectedInput,
+            hasLockedBehavior: _this4.hasLockedBehavior()
           }))
         }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
           $separateRangeInputs: _this4.props.range && _this4.props.separateRangeInputs
-        }), _this4.props.range && _this4.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), _this4.renderInputComponent(locale, 'startDate')), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, 'endDate'))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+        }), _this4.props.range && _this4.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), _this4.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
           id: _this4.props['aria-describedby'],
           style: {
             position: 'fixed',
@@ -621,11 +651,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clipPath: 'inset(100%)'
           }
         }, // No date selected
-        !_this4.props.value || Array.isArray(_this4.props.value) && !_this4.props.value.length ? '' : // Date selected in a non-range picker
+        !_this4.props.value || Array.isArray(_this4.props.value) && !_this4.props.value[0] && !_this4.props.value[1] ? '' : // Date selected in a non-range picker
         !Array.isArray(_this4.props.value) ? getInterpolatedString(locale.datepicker.selectedDate, {
           date: _this4.state.inputValue || ''
         }) : // Start and end dates are selected in a range picker
-        _this4.props.value.length > 1 ? getInterpolatedString(locale.datepicker.selectedDateRange, {
+        _this4.props.value[0] && _this4.props.value[1] ? getInterpolatedString(locale.datepicker.selectedDateRange, {
           startDate: _this4.formatDisplayValue(_this4.props.value[0]),
           endDate: _this4.formatDisplayValue( // $FlowFixMe
           _this4.props.value[1])

package/esm/datepicker/day.js

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

package/esm/datepicker/month.js

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

package/esm/datepicker/styled-components.js

@@ -1,3 +1,15 @@
+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; }
@@ -12,7 +24,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 { ORIENTATION, DENSITY } from './constants.js';
+import { ORIENTATION, DENSITY, INPUT_ROLE } from './constants.js';
 /**
  * Main component container element
  */
@@ -427,6 +439,9 @@ export var StyledDay = 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,
@@ -448,6 +463,13 @@ export var StyledDay = 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 === INPUT_ROLE.startDate ? endDate !== null && typeof endDate !== 'undefined' : startDate !== null && typeof startDate !== 'undefined';
+  var shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
   return _objectSpread(_objectSpread(_objectSpread({}, $density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium), {}, {
     boxSizing: 'border-box',
     position: 'relative',
@@ -509,7 +531,7 @@ export var StyledDay = 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/esm/datepicker/types.js

@@ -7,4 +7,4 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import { ORIENTATION, STATE_CHANGE_TYPE, DENSITY } from './constants.js';
+import { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants.js';

package/esm/datepicker/utils/date-helpers.js

@@ -1,3 +1,15 @@
+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; }
@@ -223,6 +235,24 @@ var DateHelpers = function DateHelpers(_adapter) {
     return false;
   });
 
+  _defineProperty(this, "dateRangeIncludesDates", function (dateRange, dates) {
+    var _dateRange = _slicedToArray(dateRange, 2),
+        startDate = _dateRange[0],
+        endDate = _dateRange[1];
+
+    if (startDate && endDate && Array.isArray(dates) && dates.length) {
+      for (var i = 0; i < dates.length; i++) {
+        var _day = dates[i];
+
+        if (_this.isDayInRange(_day, startDate, endDate)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  });
+
   _defineProperty(this, "subDays", function (date, days) {
     return _this.adapter.addDays(date, days * -1);
   });

package/esm/datepicker/week.js

@@ -101,7 +101,9 @@ var Week = /*#__PURE__*/function (_React$Component) {
             onMouseLeave: _this.props.onDayMouseLeave,
             overrides: _this.props.overrides,
             peekNextMonth: _this.props.peekNextMonth,
-            value: _this.props.value
+            value: _this.props.value,
+            hasLockedBehavior: _this.props.hasLockedBehavior,
+            selectedInput: _this.props.selectedInput
           })
         );
       }));

package/esm/file-uploader/file-uploader.js

@@ -35,7 +35,7 @@ import { useStyletron } from '../styles/index.js';
 import { Button, KIND, SHAPE, SIZE as BUTTON_SIZE } from '../button/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { ProgressBar } from '../progress-bar/index.js';
-import { StyledSpinnerNext, SIZE as SPINNER_SIZE } from '../spinner/index.js';
+import { Spinner, SIZE as SPINNER_SIZE } from '../spinner/index.js';
 import { StyledRoot, StyledFileDragAndDrop, StyledContentMessage, StyledContentSeparator, StyledErrorMessage, StyledHiddenInput } from './styled-components.js';
 
 function prependStyleProps(styleProps) {
@@ -88,7 +88,7 @@ function FileUploader(props) {
       ButtonComponent = _getOverrides14[0],
       buttonProps = _getOverrides14[1];
 
-  var _getOverrides15 = getOverrides(overrides.Spinner, StyledSpinnerNext),
+  var _getOverrides15 = getOverrides(overrides.Spinner, Spinner),
       _getOverrides16 = _slicedToArray(_getOverrides15, 2),
       SpinnerComponent = _getOverrides16[0],
       spinnerProps = _getOverrides16[1];
@@ -153,7 +153,7 @@ function FileUploader(props) {
           marginBottom: theme.sizing.scale300
         }
       }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(ButtonComponent, {
-        kind: KIND.minimal,
+        kind: KIND.tertiary,
         onClick: function onClick() {
           props.onRetry && props.onRetry();
         },
@@ -161,7 +161,7 @@ function FileUploader(props) {
         "aria-describedby": props['aria-describedby'],
         "aria-errormessage": props.errorMessage
       }, locale.fileuploader.retry) : /*#__PURE__*/React.createElement(ButtonComponent, {
-        kind: KIND.minimal,
+        kind: KIND.tertiary,
         onClick: function onClick() {
           props.onCancel && props.onCancel();
         },

package/esm/header-navigation/styled-components.js

@@ -16,15 +16,15 @@ export var Root = styled('nav', function (props) {
   var $theme = props.$theme;
   var scale500 = $theme.sizing.scale500,
       font300 = $theme.typography.font300,
-      border = $theme.colors.border;
+      borderOpaque = $theme.colors.borderOpaque;
   return _objectSpread(_objectSpread({}, font300), {}, {
     display: 'flex',
     paddingBottom: scale500,
     paddingTop: scale500,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: "".concat(border),
-    backgroundColor: $theme.colors.headerNavigationFill
+    borderBottomColor: "".concat(borderOpaque),
+    backgroundColor: $theme.colors.backgroundPrimary
   });
 });
 Root.displayName = "Root";

package/esm/helpers/overrides.js

@@ -85,8 +85,7 @@ export function toObjectOverride(override) {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-
-/* flowlint unclear-type:off */
+// flowlint unclear-type:off
 
 export function getOverrides(override, defaultComponent) {
   var Component = getOverride(override) || defaultComponent;

package/esm/input/styled-components.js

@@ -120,10 +120,10 @@ function getRootColors($disabled, $isFocused, $error) {
 
   if ($isFocused) {
     return {
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive
     };
   }