@commercetools-uikit/date-range-input 12.2.2 → 12.2.6

package/dist/commercetools-uikit-date-range-input.cjs.dev.js

@@ -10,7 +10,6 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _extends = require('@babel/runtime-corejs3/helpers/extends');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
 var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
@@ -24,14 +23,14 @@ var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
 var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
-var React = require('react');
+var react = require('react');
 var PropTypes = require('prop-types');
 var Downshift = require('downshift');
 var reactIntl = require('react-intl');
 var Constraints = require('@commercetools-uikit/constraints');
 var utils = require('@commercetools-uikit/utils');
 var calendarUtils = require('@commercetools-uikit/calendar-utils');
-var react = require('@emotion/react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -49,7 +48,6 @@ var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceP
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
 var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
-var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
@@ -62,13 +60,13 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](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) { var _context6; _forEachInstanceProperty__default['default'](_context6 = ownKeys(Object(source), true)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context7; _forEachInstanceProperty__default['default'](_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context6; _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source), true)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context7; _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default['default'](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default['default']) return false; if (_Reflect$construct__default['default'].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default['default'](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var preventDownshiftDefault = function preventDownshiftDefault(event) {
   // eslint-disable-next-line no-param-reassign
@@ -78,8 +76,8 @@ var preventDownshiftDefault = function preventDownshiftDefault(event) {
 var parseRangeText = function parseRangeText(text, locale) {
   var _context, _context2;
 
-  var parts = _filterInstanceProperty__default['default'](_context = _mapInstanceProperty__default['default'](_context2 = text.split(' - ')).call(_context2, function (part) {
-    var parsedDate = calendarUtils.parseInputToDate(_trimInstanceProperty__default['default'](part).call(part), locale);
+  var parts = _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = text.split(' - ')).call(_context2, function (part) {
+    var parsedDate = calendarUtils.parseInputToDate(_trimInstanceProperty__default["default"](part).call(part), locale);
     return parsedDate === '' ? null : parsedDate;
   })).call(_context, Boolean);
 
@@ -133,8 +131,8 @@ var getRange = function getRange(_ref) {
   };
 };
 
-var DateRangeCalendar = /*#__PURE__*/function (_React$Component) {
-  _inherits(DateRangeCalendar, _React$Component);
+var DateRangeCalendar = /*#__PURE__*/function (_Component) {
+  _inherits(DateRangeCalendar, _Component);
 
   var _super = _createSuper(DateRangeCalendar);
 
@@ -149,8 +147,8 @@ var DateRangeCalendar = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, _concatInstanceProperty__default['default'](_context3 = [this]).call(_context3, args));
-    _this.inputRef = /*#__PURE__*/React__default['default'].createRef();
+    _this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context3 = [this]).call(_context3, args));
+    _this.inputRef = /*#__PURE__*/react.createRef();
     _this.state = {
       calendarDate: _this.props.value.length === 2 ? _this.props.value[0] : calendarUtils.getToday(),
       suggestedItems: [],
@@ -201,7 +199,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_React$Component) {
         target: {
           id: _this.props.id,
           name: _this.props.name,
-          value: _sortInstanceProperty__default['default'](unsortedRange).call(unsortedRange)
+          value: _sortInstanceProperty__default["default"](unsortedRange).call(unsortedRange)
         }
       });
     };
@@ -214,279 +212,283 @@ var DateRangeCalendar = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      return react.jsx(Constraints__default['default'].Horizontal, {
-        max: this.props.horizontalConstraint
-      }, react.jsx(Downshift__default['default'], {
-        key: this.props.intl.locale,
-        inputId: this.props.id,
-        itemToString: calendarUtils.createItemRangeToString(this.props.intl.locale),
-        inputValue: this.state.inputValue,
-        selectedItem: null,
-        highlightedIndex: this.state.highlightedIndex,
-        onInputValueChange: function onInputValueChange(inputValue, changes) {
-          // only attempt to parse input when the user typed into the input
-          // field
-          if (changes.type !== Downshift__default['default'].stateChangeTypes.changeInput) return;
-
-          _this2.setState(function () {
-            var parsedRange = parseRangeText(inputValue, _this2.props.intl.locale);
-            if (parsedRange.length === 0) return {
-              suggestedItems: [],
-              highlightedIndex: null,
-              inputValue: inputValue,
-              startDate: null
-            };
-
-            if (parsedRange.length === 1) {
-              var calendarDate = parsedRange[0];
-              return {
+      return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxRuntime.jsx(Downshift__default["default"], {
+          inputId: this.props.id,
+          itemToString: calendarUtils.createItemRangeToString(this.props.intl.locale),
+          inputValue: this.state.inputValue,
+          selectedItem: null,
+          highlightedIndex: this.state.highlightedIndex,
+          onInputValueChange: function onInputValueChange(inputValue, changes) {
+            // only attempt to parse input when the user typed into the input
+            // field
+            if (changes.type !== Downshift__default["default"].stateChangeTypes.changeInput) return;
+
+            _this2.setState(function () {
+              var parsedRange = parseRangeText(inputValue, _this2.props.intl.locale);
+              if (parsedRange.length === 0) return {
                 suggestedItems: [],
-                highlightedIndex: calendarUtils.getDateInMonth(calendarDate) - 1,
-                inputValue: inputValue,
-                startDate: parsedRange[0],
-                calendarDate: calendarDate
-              };
-            }
-
-            if (parsedRange.length === 2) {
-              var _calendarDate = parsedRange[1];
-              return {
-                suggestedItems: [],
-                highlightedIndex: calendarUtils.getDateInMonth(_calendarDate) - 1,
-                inputValue: inputValue,
-                startDate: parsedRange[0],
-                calendarDate: _calendarDate
-              };
-            }
-
-            return null;
-          });
-        },
-        onStateChange: function onStateChange(changes) {
-          /* eslint-disable no-prototype-builtins */
-          _this2.setState(function (prevState) {
-            // ensure input value matches prop value when menu is closed
-            if (changes.type === Downshift__default['default'].stateChangeTypes.mouseUp || changes.type === Downshift__default['default'].stateChangeTypes.blurInput) {
-              return {
                 highlightedIndex: null,
-                isOpen: false,
-                inputValue: calendarUtils.formatRange(_this2.props.value, _this2.props.intl.locale)
-              };
-            }
-
-            if (changes.hasOwnProperty('selectedItem')) {
-              var hasStartedRangeSelection = Boolean(!prevState.startDate && changes.selectedItem);
-              var hasFinishedRangeSelection = Boolean(prevState.startDate && changes.selectedItem);
-              return {
-                highlightedIndex: prevState.highlightedIndex,
-                startDate: prevState.startDate ? null : changes.selectedItem,
-                calendarDate: changes.selectedItem,
-                isOpen: !hasFinishedRangeSelection,
-                inputValue: function () {
-                  if (hasFinishedRangeSelection) {
-                    return calendarUtils.formatRange([prevState.startDate, changes.selectedItem], _this2.props.intl.locale);
-                  }
-
-                  if (hasStartedRangeSelection) {
-                    return calendarUtils.formatRange([changes.selectedItem], _this2.props.intl.locale);
-                  }
-
-                  return '';
-                }()
-              };
-            }
-
-            if (changes.hasOwnProperty('isOpen')) {
-              return {
-                isOpen: changes.isOpen,
-                highlightedIndex: changes.highlightedIndex || null,
-                inputValue: changes.inputValue || prevState.inputValue,
-                // Reset range selection progress when menu opens/closes
-                startDate: null,
-                // Ensure calendar opens on selected date.
-                // Open on the current day as a fallback.
-                calendarDate: _this2.props.value.length === 2 ? _this2.props.value[0] : calendarUtils.getToday()
+                inputValue: inputValue,
+                startDate: null
               };
-            }
 
-            if (changes.hasOwnProperty('highlightedIndex')) {
-              return {
-                highlightedIndex: changes.highlightedIndex
-              };
-            }
-
-            return null;
-          });
-          /* eslint-enable no-prototype-builtins */
-
-        },
-        onChange: function onChange(selectedItem) {
-          if (_this2.state.startDate && selectedItem) {
-            _this2.emit([_this2.state.startDate, selectedItem]);
-          } else {
-            _this2.emit([]);
-          }
-        },
-        isOpen: this.state.isOpen
-      }, function (_ref2) {
-        var _context4, _context5;
-
-        var getInputProps = _ref2.getInputProps,
-            getMenuProps = _ref2.getMenuProps,
-            getItemProps = _ref2.getItemProps,
-            getToggleButtonProps = _ref2.getToggleButtonProps,
-            clearSelection = _ref2.clearSelection,
-            highlightedIndex = _ref2.highlightedIndex,
-            openMenu = _ref2.openMenu,
-            setHighlightedIndex = _ref2.setHighlightedIndex,
-            isOpen = _ref2.isOpen,
-            inputValue = _ref2.inputValue;
-        var calendarItems = calendarUtils.createCalendarItems(_this2.state.calendarDate, _this2.props.intl);
-
-        var allItems = _concatInstanceProperty__default['default'](_context4 = []).call(_context4, _toConsumableArray(_this2.state.suggestedItems), _toConsumableArray(calendarItems));
-
-        var paddingDayCount = calendarUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale);
-
-        var paddingDays = _fillInstanceProperty__default['default'](_context5 = Array(paddingDayCount)).call(_context5);
-
-        var weekdays = calendarUtils.getWeekdayNames(_this2.props.intl.locale);
-        var today = calendarUtils.getToday();
-        return react.jsx("div", {
-          onFocus: _this2.props.onFocus,
-          onBlur: _this2.handleBlur
-        }, react.jsx(calendarUtils.CalendarBody, {
-          inputRef: _this2.inputRef,
-          inputProps: getInputProps(_objectSpread({
-            // Unset the aria-labelledby as it interfers with the link
-            // between the <label for> and the <input id>.
-            'aria-labelledby': undefined,
-            name: _this2.props.name,
-            placeholder: typeof _this2.props.placeholder === 'string' ? _this2.props.placeholder : _this2.props.intl.formatMessage(messages.placeholder),
-            onMouseEnter: function onMouseEnter() {
-              // we remove the highlight so that the user can use the
-              // arrow keys to move the cursor when hovering
-              if (isOpen) setHighlightedIndex(null);
-            },
-            onKeyDown: function onKeyDown(event) {
-              if (_this2.props.isReadOnly) {
-                preventDownshiftDefault(event);
-                return;
+              if (parsedRange.length === 1) {
+                var calendarDate = parsedRange[0];
+                return {
+                  suggestedItems: [],
+                  highlightedIndex: calendarUtils.getDateInMonth(calendarDate) - 1,
+                  inputValue: inputValue,
+                  startDate: parsedRange[0],
+                  calendarDate: calendarDate
+                };
               }
 
-              if (event.key === 'Enter' && _trimInstanceProperty__default['default'](inputValue).call(inputValue) === '' && // do not clear value when user presses Enter to
-              // select the end date (so only clear when there is no
-              // startDate)
-              !_this2.state.startDate && _this2.props.isClearable) {
-                clearSelection();
-
-                _this2.emit([]);
-              } // ArrowDown
-
-
-              if (event.keyCode === 40) {
-                if (highlightedIndex + 1 >= calendarItems.length) {
-                  // if it's the end of the month
-                  // then bypass normal arrow navigation
-                  preventDownshiftDefault(event); // then jump to start of next month
-
-                  _this2.jumpMonth(1, 0);
-                }
-              } // ArrowUp
+              if (parsedRange.length === 2) {
+                var _calendarDate = parsedRange[1];
+                return {
+                  suggestedItems: [],
+                  highlightedIndex: calendarUtils.getDateInMonth(_calendarDate) - 1,
+                  inputValue: inputValue,
+                  startDate: parsedRange[0],
+                  calendarDate: _calendarDate
+                };
+              }
 
+              return null;
+            });
+          },
+          onStateChange: function onStateChange(changes) {
+            /* eslint-disable no-prototype-builtins */
+            _this2.setState(function (prevState) {
+              // ensure input value matches prop value when menu is closed
+              if (changes.type === Downshift__default["default"].stateChangeTypes.mouseUp || changes.type === Downshift__default["default"].stateChangeTypes.blurInput) {
+                return {
+                  highlightedIndex: null,
+                  isOpen: false,
+                  inputValue: calendarUtils.formatRange(_this2.props.value, _this2.props.intl.locale)
+                };
+              }
 
-              if (event.keyCode === 38) {
-                var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
+              if (changes.hasOwnProperty('selectedItem')) {
+                var hasStartedRangeSelection = Boolean(!prevState.startDate && changes.selectedItem);
+                var hasFinishedRangeSelection = Boolean(prevState.startDate && changes.selectedItem);
+                return {
+                  highlightedIndex: prevState.highlightedIndex,
+                  startDate: prevState.startDate ? null : changes.selectedItem,
+                  calendarDate: changes.selectedItem,
+                  isOpen: !hasFinishedRangeSelection,
+                  inputValue: function () {
+                    if (hasFinishedRangeSelection) {
+                      return calendarUtils.formatRange([prevState.startDate, changes.selectedItem], _this2.props.intl.locale);
+                    }
+
+                    if (hasStartedRangeSelection) {
+                      return calendarUtils.formatRange([changes.selectedItem], _this2.props.intl.locale);
+                    }
+
+                    return '';
+                  }()
+                };
+              }
 
-                if (highlightedIndex <= 0) {
-                  // if it's the start of the month
-                  // then bypass normal arrow navigation
-                  preventDownshiftDefault(event);
-                  var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
+              if (changes.hasOwnProperty('isOpen')) {
+                return {
+                  isOpen: changes.isOpen,
+                  highlightedIndex: changes.highlightedIndex || null,
+                  inputValue: changes.inputValue || prevState.inputValue,
+                  // Reset range selection progress when menu opens/closes
+                  startDate: null,
+                  // Ensure calendar opens on selected date.
+                  // Open on the current day as a fallback.
+                  calendarDate: _this2.props.value.length === 2 ? _this2.props.value[0] : calendarUtils.getToday()
+                };
+              }
 
-                  _this2.jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
-                }
+              if (changes.hasOwnProperty('highlightedIndex')) {
+                return {
+                  highlightedIndex: changes.highlightedIndex
+                };
               }
-            },
-            // we only do this for readOnly because the input
-            // doesn't ignore these events, unlike when its disabled
-            onClick: _this2.props.isReadOnly ? undefined : openMenu
-          }, utils.filterDataAttributes(_this2.props))),
-          hasSelection: _this2.props.value.length === 2,
-          isClearable: _this2.props.isClearable,
-          onClear: function onClear() {
-            _this2.setState({
-              startDate: null
-            });
 
-            _this2.emit([]);
+              return null;
+            });
+            /* eslint-enable no-prototype-builtins */
 
-            clearSelection();
-          },
-          isOpen: isOpen,
-          isDisabled: _this2.props.isDisabled,
-          isReadOnly: _this2.props.isReadOnly,
-          toggleButtonProps: getToggleButtonProps(),
-          hasError: _this2.props.hasError,
-          hasWarning: _this2.props.hasWarning
-        }), isOpen && !_this2.props.isDisabled && react.jsx(calendarUtils.CalendarMenu, _extends({}, getMenuProps(), {
-          hasError: _this2.props.hasError,
-          hasWarning: _this2.props.hasWarning
-        }), react.jsx(calendarUtils.CalendarHeader, {
-          monthLabel: calendarUtils.getMonthCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
-          yearLabel: calendarUtils.getYearCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
-          onPrevMonthClick: function onPrevMonthClick() {
-            return _this2.jumpMonth(-1);
-          },
-          onTodayClick: _this2.showToday,
-          onNextMonthClick: function onNextMonthClick() {
-            return _this2.jumpMonth(1);
           },
-          onPrevYearClick: function onPrevYearClick() {
-            return _this2.jumpMonth(-12);
+          onChange: function onChange(selectedItem) {
+            if (_this2.state.startDate && selectedItem) {
+              _this2.emit([_this2.state.startDate, selectedItem]);
+            } else {
+              _this2.emit([]);
+            }
           },
-          onNextYearClick: function onNextYearClick() {
-            return _this2.jumpMonth(12);
+          isOpen: this.state.isOpen,
+          children: function children(_ref2) {
+            var _context4, _context5;
+
+            var getInputProps = _ref2.getInputProps,
+                getMenuProps = _ref2.getMenuProps,
+                getItemProps = _ref2.getItemProps,
+                getToggleButtonProps = _ref2.getToggleButtonProps,
+                clearSelection = _ref2.clearSelection,
+                highlightedIndex = _ref2.highlightedIndex,
+                openMenu = _ref2.openMenu,
+                setHighlightedIndex = _ref2.setHighlightedIndex,
+                isOpen = _ref2.isOpen,
+                inputValue = _ref2.inputValue;
+            var calendarItems = calendarUtils.createCalendarItems(_this2.state.calendarDate, _this2.props.intl);
+
+            var allItems = _concatInstanceProperty__default["default"](_context4 = []).call(_context4, _toConsumableArray(_this2.state.suggestedItems), _toConsumableArray(calendarItems));
+
+            var paddingDayCount = calendarUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale);
+
+            var paddingDays = _fillInstanceProperty__default["default"](_context5 = Array(paddingDayCount)).call(_context5);
+
+            var weekdays = calendarUtils.getWeekdayNames(_this2.props.intl.locale);
+            var today = calendarUtils.getToday();
+            return jsxRuntime.jsxs("div", {
+              onFocus: _this2.props.onFocus,
+              onBlur: _this2.handleBlur,
+              children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
+                inputRef: _this2.inputRef,
+                inputProps: getInputProps(_objectSpread({
+                  // Unset the aria-labelledby as it interfers with the link
+                  // between the <label for> and the <input id>.
+                  'aria-labelledby': undefined,
+                  name: _this2.props.name,
+                  placeholder: typeof _this2.props.placeholder === 'string' ? _this2.props.placeholder : _this2.props.intl.formatMessage(messages.placeholder),
+                  onMouseEnter: function onMouseEnter() {
+                    // we remove the highlight so that the user can use the
+                    // arrow keys to move the cursor when hovering
+                    if (isOpen) setHighlightedIndex(null);
+                  },
+                  onKeyDown: function onKeyDown(event) {
+                    if (_this2.props.isReadOnly) {
+                      preventDownshiftDefault(event);
+                      return;
+                    }
+
+                    if (event.key === 'Enter' && _trimInstanceProperty__default["default"](inputValue).call(inputValue) === '' && // do not clear value when user presses Enter to
+                    // select the end date (so only clear when there is no
+                    // startDate)
+                    !_this2.state.startDate && _this2.props.isClearable) {
+                      clearSelection();
+
+                      _this2.emit([]);
+                    } // ArrowDown
+
+
+                    if (event.keyCode === 40) {
+                      if (highlightedIndex + 1 >= calendarItems.length) {
+                        // if it's the end of the month
+                        // then bypass normal arrow navigation
+                        preventDownshiftDefault(event); // then jump to start of next month
+
+                        _this2.jumpMonth(1, 0);
+                      }
+                    } // ArrowUp
+
+
+                    if (event.keyCode === 38) {
+                      var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
+
+                      if (highlightedIndex <= 0) {
+                        // if it's the start of the month
+                        // then bypass normal arrow navigation
+                        preventDownshiftDefault(event);
+                        var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
+
+                        _this2.jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
+                      }
+                    }
+                  },
+                  // we only do this for readOnly because the input
+                  // doesn't ignore these events, unlike when its disabled
+                  onClick: _this2.props.isReadOnly ? undefined : openMenu
+                }, utils.filterDataAttributes(_this2.props))),
+                hasSelection: _this2.props.value.length === 2,
+                isClearable: _this2.props.isClearable,
+                onClear: function onClear() {
+                  _this2.setState({
+                    startDate: null
+                  });
+
+                  _this2.emit([]);
+
+                  clearSelection();
+                },
+                isOpen: isOpen,
+                isDisabled: _this2.props.isDisabled,
+                isReadOnly: _this2.props.isReadOnly,
+                toggleButtonProps: getToggleButtonProps(),
+                hasError: _this2.props.hasError,
+                hasWarning: _this2.props.hasWarning
+              }), isOpen && !_this2.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                hasError: _this2.props.hasError,
+                hasWarning: _this2.props.hasWarning,
+                children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
+                  monthLabel: calendarUtils.getMonthCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
+                  yearLabel: calendarUtils.getYearCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
+                  onPrevMonthClick: function onPrevMonthClick() {
+                    return _this2.jumpMonth(-1);
+                  },
+                  onTodayClick: _this2.showToday,
+                  onNextMonthClick: function onNextMonthClick() {
+                    return _this2.jumpMonth(1);
+                  },
+                  onPrevYearClick: function onPrevYearClick() {
+                    return _this2.jumpMonth(-12);
+                  },
+                  onNextYearClick: function onNextYearClick() {
+                    return _this2.jumpMonth(12);
+                  }
+                }), jsxRuntime.jsxs(calendarUtils.CalendarContent, {
+                  children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, function (weekday) {
+                    return jsxRuntime.jsx(calendarUtils.CalendarDay, {
+                      type: "heading",
+                      children: weekday
+                    }, weekday);
+                  }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (day, index) {
+                    return jsxRuntime.jsx(calendarUtils.CalendarDay, {
+                      type: "spacing"
+                    }, index);
+                  }), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, function (item, index) {
+                    var isHighlighted = _this2.state.suggestedItems.length + index === highlightedIndex;
+
+                    var _getRange = getRange({
+                      item: item,
+                      value: _this2.props.value,
+                      startDate: _this2.state.startDate,
+                      highlightedItem: allItems[_this2.state.highlightedIndex]
+                    }),
+                        isRangeStart = _getRange.isRangeStart,
+                        isRangeBetween = _getRange.isRangeBetween,
+                        isRangeEnd = _getRange.isRangeEnd;
+
+                    return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
+                      isToday: calendarUtils.isSameDay(today, item)
+                    }, getItemProps({
+                      disabled: _this2.props.isDisabled,
+                      item: item,
+                      onMouseOut: function onMouseOut() {
+                        setHighlightedIndex(null);
+                      }
+                    })), {}, {
+                      isHighlighted: isHighlighted,
+                      isRangeStart: isRangeStart,
+                      isRangeBetween: isRangeBetween,
+                      isRangeEnd: isRangeEnd,
+                      children: calendarUtils.getCalendarDayLabel(item)
+                    }), item);
+                  })]
+                })]
+              }))]
+            });
           }
-        }), react.jsx(calendarUtils.CalendarContent, null, _mapInstanceProperty__default['default'](weekdays).call(weekdays, function (weekday) {
-          return react.jsx(calendarUtils.CalendarDay, {
-            key: weekday,
-            type: "heading"
-          }, weekday);
-        }), _mapInstanceProperty__default['default'](paddingDays).call(paddingDays, function (day, index) {
-          return react.jsx(calendarUtils.CalendarDay, {
-            key: index,
-            type: "spacing"
-          });
-        }), _mapInstanceProperty__default['default'](calendarItems).call(calendarItems, function (item, index) {
-          var isHighlighted = _this2.state.suggestedItems.length + index === highlightedIndex;
-
-          var _getRange = getRange({
-            item: item,
-            value: _this2.props.value,
-            startDate: _this2.state.startDate,
-            highlightedItem: allItems[_this2.state.highlightedIndex]
-          }),
-              isRangeStart = _getRange.isRangeStart,
-              isRangeBetween = _getRange.isRangeBetween,
-              isRangeEnd = _getRange.isRangeEnd;
-
-          return react.jsx(calendarUtils.CalendarDay, _extends({
-            key: item,
-            isToday: calendarUtils.isSameDay(today, item)
-          }, getItemProps({
-            disabled: _this2.props.isDisabled,
-            item: item,
-            onMouseOut: function onMouseOut() {
-              setHighlightedIndex(null);
-            }
-          }), {
-            isHighlighted: isHighlighted,
-            isRangeStart: isRangeStart,
-            isRangeBetween: isRangeBetween,
-            isRangeEnd: isRangeEnd
-          }), calendarUtils.getCalendarDayLabel(item));
-        }))));
-      }));
+        }, this.props.intl.locale)
+      });
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -507,7 +509,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return DateRangeCalendar;
-}(React__default['default'].Component);
+}(react.Component);
 
 DateRangeCalendar.displayName = 'DateRangeCalendar';
 DateRangeCalendar.defaultProps = {
@@ -519,82 +521,82 @@ DateRangeCalendar.isEmpty = function (range) {
 };
 
 DateRangeCalendar.propTypes = process.env.NODE_ENV !== "production" ? {
-  intl: PropTypes__default['default'].shape({
-    locale: PropTypes__default['default'].string.isRequired,
-    formatMessage: PropTypes__default['default'].func.isRequired
+  intl: PropTypes__default["default"].shape({
+    locale: PropTypes__default["default"].string.isRequired,
+    formatMessage: PropTypes__default["default"].func.isRequired
   }).isRequired,
 
   /**
    * Horizontal size limit of the input field.
    */
-  horizontalConstraint: PropTypes__default['default'].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  horizontalConstraint: PropTypes__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
 
   /**
    * The selected date range, must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD".
    */
-  value: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string).isRequired,
+  value: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired,
 
   /**
    * Called when the date range changes. Called with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD".
    * <br />
    * Signature: `(event) => void`
    */
-  onChange: PropTypes__default['default'].func.isRequired,
+  onChange: PropTypes__default["default"].func.isRequired,
 
   /**
    * Allows the range to be cleared
    */
-  isClearable: PropTypes__default['default'].bool,
+  isClearable: PropTypes__default["default"].bool,
 
   /**
    * Called when the date input gains focus.
    */
-  onFocus: PropTypes__default['default'].func,
+  onFocus: PropTypes__default["default"].func,
 
   /**
    * Called when the date input loses focus.
    */
-  onBlur: PropTypes__default['default'].func,
+  onBlur: PropTypes__default["default"].func,
 
   /**
    * Used as the HTML `id` attribute.
    */
-  id: PropTypes__default['default'].string,
+  id: PropTypes__default["default"].string,
 
   /**
    * Used as the HTML `name` attribute.
    */
-  name: PropTypes__default['default'].string,
+  name: PropTypes__default["default"].string,
 
   /**
    * Placeholder value to show in the input field
    */
-  placeholder: PropTypes__default['default'].string,
+  placeholder: PropTypes__default["default"].string,
 
   /**
    * Disables the date picker
    */
-  isDisabled: PropTypes__default['default'].bool,
+  isDisabled: PropTypes__default["default"].bool,
 
   /**
    * Disables the date picker menu and makes input field read-only
    */
-  isReadOnly: PropTypes__default['default'].bool,
+  isReadOnly: PropTypes__default["default"].bool,
 
   /**
    * Indicates the input field has an error
    */
-  hasError: PropTypes__default['default'].bool,
+  hasError: PropTypes__default["default"].bool,
 
   /**
    * Indicates the input field has warning
    */
-  hasWarning: PropTypes__default['default'].bool
+  hasWarning: PropTypes__default["default"].bool
 } : {};
 var dateRangeInput = reactIntl.injectIntl(DateRangeCalendar);
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.2';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.6";
 
-exports['default'] = dateRangeInput;
+exports["default"] = dateRangeInput;
 exports.version = version;