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

package/dist/commercetools-uikit-date-time-input.cjs.prod.js

@@ -11,7 +11,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 _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
 var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
@@ -22,7 +21,7 @@ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/ins
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
 var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var React = require('react');
+var react$1 = require('react');
 require('prop-types');
 var Downshift = require('downshift');
 var reactIntl = require('react-intl');
@@ -32,6 +31,7 @@ var calendarTimeUtils = require('@commercetools-uikit/calendar-time-utils');
 var calendarUtils = require('@commercetools-uikit/calendar-utils');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -48,16 +48,15 @@ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInsta
 var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
 var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var React__default = /*#__PURE__*/_interopDefault(React);
 var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 
 var getInputStyles = function getInputStyles() {
-  return /*#__PURE__*/react.css("width:100%;text-align:center;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designSystem.customProperties.fontSizeDefault, ";margin-top:", designSystem.customProperties.spacingS, ";color:", designSystem.customProperties.colorSolid, ";:disabled{background-color:", designSystem.customProperties.colorSurface, ";}" + ("" ));
+  return /*#__PURE__*/react.css("width:100%;text-align:center;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designSystem.customProperties.fontSizeDefault, ";margin-top:", designSystem.customProperties.spacingS, ";color:", designSystem.customProperties.colorSolid, ";:disabled{background-color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
 };
 
 var DateCalendarTimeInput = function DateCalendarTimeInput(props) {
-  return react.jsx("input", {
+  return jsxRuntime.jsx("input", {
     disabled: props.isDisabled,
     ref: props.timeInputRef,
     type: "text",
@@ -86,14 +85,14 @@ 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 _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source), true)).call(_context4, 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 _context5; _forEachInstanceProperty__default['default'](_context5 = ownKeys(Object(source))).call(_context5, 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 _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), true)).call(_context4, 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 _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, 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; } }
-var activationTypes = [Downshift__default['default'].stateChangeTypes.keyDownEnter, Downshift__default['default'].stateChangeTypes.clickItem];
+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 activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
 
 var preventDownshiftDefault = function preventDownshiftDefault(event) {
   // eslint-disable-next-line no-param-reassign
@@ -112,8 +111,8 @@ var createBlurHandler = function createBlurHandler(timeInputRef) {
   };
 };
 
-var DateTimeInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(DateTimeInput, _React$Component);
+var DateTimeInput = /*#__PURE__*/function (_Component) {
+  _inherits(DateTimeInput, _Component);
 
   var _super = _createSuper(DateTimeInput);
 
@@ -128,9 +127,9 @@ var DateTimeInput = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, _concatInstanceProperty__default['default'](_context = [this]).call(_context, args));
-    _this.inputRef = /*#__PURE__*/React__default['default'].createRef();
-    _this.timeInputRef = /*#__PURE__*/React__default['default'].createRef();
+    _this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context = [this]).call(_context, args));
+    _this.inputRef = /*#__PURE__*/react$1.createRef();
+    _this.timeInputRef = /*#__PURE__*/react$1.createRef();
     _this.state = {
       calendarDate: calendarTimeUtils.getToday(_this.props.timeZone),
       suggestedItems: [],
@@ -211,280 +210,284 @@ var DateTimeInput = /*#__PURE__*/function (_React$Component) {
       var _context2,
           _this2 = this;
 
-      return react.jsx(Constraints__default['default'].Horizontal, {
-        max: this.props.horizontalConstraint
-      }, react.jsx(Downshift__default['default'] // Setting the key to the timeZone conveniently forces a rerender
-      // when the time-zone changes. Otherwise we'd need to make
-      // inputValue a controlled property so that we can update
-      // the displayed value as downshift seems to ignore an updated
-      // itemToString function.
-      , {
-        key: _concatInstanceProperty__default['default'](_context2 = "".concat(this.props.timeZone, ":")).call(_context2, this.props.intl.locale),
-        inputId: this.props.id,
-        itemToString: calendarTimeUtils.createItemDateTimeToString(this.props.intl.locale, this.props.timeZone),
-        selectedItem: this.props.value === '' ? null : this.props.value,
-        highlightedIndex: this.state.highlightedIndex,
-        onChange: this.emit,
-        stateReducer: function stateReducer(state, changes) {
-          if (_includesInstanceProperty__default['default'](activationTypes).call(activationTypes, changes.type)) {
-            return _objectSpread(_objectSpread({}, changes), {}, {
-              isOpen: true
-            });
-          }
-
-          return changes;
-        },
-        onStateChange: function onStateChange(changes) {
-          /* eslint-disable no-prototype-builtins */
-          _this2.setState(function (prevState) {
-            if (_includesInstanceProperty__default['default'](activationTypes).call(activationTypes, changes.type)) {
-              return {
-                startDate: changes.isOpen ? prevState.startDate : null,
-                inputValue: changes.inputValue || prevState.inputValue,
-                timeString: changes.selectedItem ? calendarTimeUtils.formatTime(changes.selectedItem, _this2.props.intl.locale, _this2.props.timeZone) : prevState.timeString
-              };
-            }
-
-            if (changes.hasOwnProperty('inputValue')) {
-              var suggestedItems = calendarTimeUtils.createSuggestedItems(changes.inputValue, _this2.props.timeZone);
-              return {
-                suggestedItems: suggestedItems,
-                highlightedIndex: suggestedItems.length > 0 ? 0 : null
-              };
-            }
-
-            if (changes.hasOwnProperty('isOpen')) {
-              return {
-                inputValue: changes.inputValue || prevState.inputValue,
-                startDate: changes.isOpen ? prevState.startDate : null,
-                // set time input value to time from value when menu is opened
-                timeString: changes.isOpen && _this2.props.value !== '' ? calendarTimeUtils.formatTime(_this2.props.value, _this2.props.intl.locale, _this2.props.timeZone) : '',
-                // ensure calendar always opens on selected item, or on
-                // current month when there is no selected item
-                calendarDate: _this2.props.value === '' ? calendarTimeUtils.getToday() : _this2.props.value
-              };
-            }
-
-            if (changes.hasOwnProperty('highlightedIndex')) {
-              return {
-                highlightedIndex: changes.highlightedIndex
-              };
-            }
-
-            return null;
-          }, function () {
-            if (_includesInstanceProperty__default['default'](activationTypes).call(activationTypes, changes.type)) {
-              _this2.timeInputRef.current.focus();
-
-              _this2.timeInputRef.current.setSelectionRange(0, _this2.state.timeString.length);
+      return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxRuntime.jsx(Downshift__default["default"] // Setting the key to the timeZone conveniently forces a rerender
+        // when the time-zone changes. Otherwise we'd need to make
+        // inputValue a controlled property so that we can update
+        // the displayed value as downshift seems to ignore an updated
+        // itemToString function.
+        , {
+          inputId: this.props.id,
+          itemToString: calendarTimeUtils.createItemDateTimeToString(this.props.intl.locale, this.props.timeZone),
+          selectedItem: this.props.value === '' ? null : this.props.value,
+          highlightedIndex: this.state.highlightedIndex,
+          onChange: this.emit,
+          stateReducer: function stateReducer(state, changes) {
+            if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
+              return _objectSpread(_objectSpread({}, changes), {}, {
+                isOpen: true
+              });
             }
-          });
-          /* eslint-enable no-prototype-builtins */
 
-        }
-      }, function (_ref) {
-        var _context3;
-
-        var getInputProps = _ref.getInputProps,
-            getMenuProps = _ref.getMenuProps,
-            getItemProps = _ref.getItemProps,
-            getToggleButtonProps = _ref.getToggleButtonProps,
-            clearSelection = _ref.clearSelection,
-            highlightedIndex = _ref.highlightedIndex,
-            openMenu = _ref.openMenu,
-            closeMenu = _ref.closeMenu,
-            setHighlightedIndex = _ref.setHighlightedIndex,
-            selectedItem = _ref.selectedItem,
-            inputValue = _ref.inputValue,
-            isOpen = _ref.isOpen;
-        var suggestedItems = _this2.state.suggestedItems;
-        var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
-        var paddingDayCount = calendarTimeUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
-
-        var paddingDays = _fillInstanceProperty__default['default'](_context3 = Array(paddingDayCount)).call(_context3);
-
-        var weekdays = calendarTimeUtils.getWeekdayNames(_this2.props.intl.locale);
-        var today = calendarTimeUtils.getToday();
-        var isTimeInputVisible = Boolean(_this2.props.value) && _this2.props.value !== '';
-        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;
-              } // parse input when user presses enter on regular input,
-              // close menu and notify parent
-
-
-              if (event.key === 'Enter' && highlightedIndex === null) {
-                preventDownshiftDefault(event);
-                var parsedDate = calendarTimeUtils.parseInputText(inputValue, _this2.props.intl.locale, _this2.props.timeZone);
-
-                _this2.emit(parsedDate);
-
-                closeMenu();
-              } // 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); // eslint-disable-line no-param-reassign
-                  // then jump to start of next month
-
-                  _this2.jumpMonths(1, 0);
-                }
-              } // ArrowUp
-
-
-              if (event.keyCode === 38) {
-                var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[highlightedIndex]);
-
-                if (highlightedIndex <= 0) {
-                  // if it's the start of the month
-                  // then bypass normal arrow navigation
-                  preventDownshiftDefault(event); // eslint-disable-line no-param-reassign
-
-                  var numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
-
-                  _this2.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
-                }
-              }
-            },
-            onClick: _this2.props.isReadOnly ? undefined : openMenu,
-            onBlur: createBlurHandler(_this2.timeInputRef),
-            onChange: function onChange(event) {
-              // keep timeInput and regular input in sync when user
-              // types into regular input
-              if (!isOpen) return;
-              var time = event.target.value.split(' ')[1];
-              if (!time) return;
-              var parsedTime = utils.parseTime(time);
-
-              _this2.setState(function () {
-                if (!parsedTime) return {
-                  timeString: ''
+            return changes;
+          },
+          onStateChange: function onStateChange(changes) {
+            /* eslint-disable no-prototype-builtins */
+            _this2.setState(function (prevState) {
+              if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
+                return {
+                  startDate: changes.isOpen ? prevState.startDate : null,
+                  inputValue: changes.inputValue || prevState.inputValue,
+                  timeString: changes.selectedItem ? calendarTimeUtils.formatTime(changes.selectedItem, _this2.props.intl.locale, _this2.props.timeZone) : prevState.timeString
                 };
-                var date = calendarTimeUtils.getToday(_this2.props.timeZone);
+              }
 
-                if (parsedTime) {
-                  date = calendarTimeUtils.changeTime(date, _this2.props.timeZone, parsedTime);
-                }
+              if (changes.hasOwnProperty('inputValue')) {
+                var suggestedItems = calendarTimeUtils.createSuggestedItems(changes.inputValue, _this2.props.timeZone);
+                return {
+                  suggestedItems: suggestedItems,
+                  highlightedIndex: suggestedItems.length > 0 ? 0 : null
+                };
+              }
 
+              if (changes.hasOwnProperty('isOpen')) {
                 return {
-                  timeString: calendarTimeUtils.formatTime(date, _this2.props.intl.locale, _this2.props.timeZone)
+                  inputValue: changes.inputValue || prevState.inputValue,
+                  startDate: changes.isOpen ? prevState.startDate : null,
+                  // set time input value to time from value when menu is opened
+                  timeString: changes.isOpen && _this2.props.value !== '' ? calendarTimeUtils.formatTime(_this2.props.value, _this2.props.intl.locale, _this2.props.timeZone) : '',
+                  // ensure calendar always opens on selected item, or on
+                  // current month when there is no selected item
+                  calendarDate: _this2.props.value === '' ? calendarTimeUtils.getToday() : _this2.props.value
                 };
-              });
-            }
-          }, utils.filterDataAttributes(_this2.props))),
-          hasSelection: Boolean(selectedItem),
-          onClear: clearSelection,
-          isOpen: isOpen,
-          isDisabled: _this2.props.isDisabled,
-          isReadOnly: _this2.props.isReadOnly,
-          toggleButtonProps: getToggleButtonProps({
-            onBlur: createBlurHandler(_this2.timeInputRef)
-          }),
-          hasError: _this2.props.hasError,
-          hasWarning: _this2.props.hasWarning
-        }), isOpen && !_this2.props.isDisabled && react.jsx(calendarUtils.CalendarMenu, _extends({}, getMenuProps(), {
-          hasFooter: true,
-          hasError: _this2.props.hasError,
-          hasWarning: _this2.props.hasWarning
-        }), react.jsx(calendarUtils.CalendarHeader, {
-          monthLabel: calendarTimeUtils.getMonthCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
-          yearLabel: calendarTimeUtils.getYearCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
-          onPrevMonthClick: function onPrevMonthClick() {
-            return _this2.jumpMonths(-1);
-          },
-          onTodayClick: _this2.showToday,
-          onNextMonthClick: function onNextMonthClick() {
-            return _this2.jumpMonths(1);
-          },
-          onPrevYearClick: function onPrevYearClick() {
-            return _this2.jumpMonths(-12);
-          },
-          onNextYearClick: function onNextYearClick() {
-            return _this2.jumpMonths(12);
-          }
-        }), 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) {
-          return react.jsx(calendarUtils.CalendarDay, _extends({
-            key: item,
-            isToday: calendarTimeUtils.isSameDay(today, item)
-          }, getItemProps({
-            disabled: _this2.props.isDisabled,
-            item: item,
-            onMouseOut: function onMouseOut() {
-              setHighlightedIndex(null);
-            }
-          }), {
-            isHighlighted: suggestedItems.length + index === highlightedIndex,
-            isSelected: calendarTimeUtils.isSameDay(item, _this2.props.value)
-          }), calendarTimeUtils.getCalendarDayLabel(item, _this2.props.timeZone));
-        })), react.jsx(TimeInput, {
-          isDisabled: !isTimeInputVisible,
-          timeInputRef: _this2.timeInputRef,
-          placeholder: _this2.props.intl.formatMessage(messages.timePlaceholder),
-          value: _this2.state.timeString,
-          onChange: _this2.handleTimeChange,
-          onKeyDown: function onKeyDown(event) {
-            if (event.key === 'ArrowUp') {
-              setHighlightedIndex(null);
-
-              _this2.inputRef.current.focus();
-
-              return;
-            }
+              }
 
-            if (event.key === 'Enter') {
-              setHighlightedIndex(null);
+              if (changes.hasOwnProperty('highlightedIndex')) {
+                return {
+                  highlightedIndex: changes.highlightedIndex
+                };
+              }
 
-              _this2.inputRef.current.focus();
+              return null;
+            }, function () {
+              if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
+                _this2.timeInputRef.current.focus();
 
-              _this2.inputRef.current.setSelectionRange(0, 100);
+                _this2.timeInputRef.current.setSelectionRange(0, _this2.state.timeString.length);
+              }
+            });
+            /* eslint-enable no-prototype-builtins */
 
-              closeMenu();
-            }
+          },
+          children: function children(_ref) {
+            var _context3;
+
+            var getInputProps = _ref.getInputProps,
+                getMenuProps = _ref.getMenuProps,
+                getItemProps = _ref.getItemProps,
+                getToggleButtonProps = _ref.getToggleButtonProps,
+                clearSelection = _ref.clearSelection,
+                highlightedIndex = _ref.highlightedIndex,
+                openMenu = _ref.openMenu,
+                closeMenu = _ref.closeMenu,
+                setHighlightedIndex = _ref.setHighlightedIndex,
+                selectedItem = _ref.selectedItem,
+                inputValue = _ref.inputValue,
+                isOpen = _ref.isOpen;
+            var suggestedItems = _this2.state.suggestedItems;
+            var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
+            var paddingDayCount = calendarTimeUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
+
+            var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3);
+
+            var weekdays = calendarTimeUtils.getWeekdayNames(_this2.props.intl.locale);
+            var today = calendarTimeUtils.getToday();
+            var isTimeInputVisible = Boolean(_this2.props.value) && _this2.props.value !== '';
+            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;
+                    } // parse input when user presses enter on regular input,
+                    // close menu and notify parent
+
+
+                    if (event.key === 'Enter' && highlightedIndex === null) {
+                      preventDownshiftDefault(event);
+                      var parsedDate = calendarTimeUtils.parseInputText(inputValue, _this2.props.intl.locale, _this2.props.timeZone);
+
+                      _this2.emit(parsedDate);
+
+                      closeMenu();
+                    } // 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); // eslint-disable-line no-param-reassign
+                        // then jump to start of next month
+
+                        _this2.jumpMonths(1, 0);
+                      }
+                    } // ArrowUp
+
+
+                    if (event.keyCode === 38) {
+                      var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[highlightedIndex]);
+
+                      if (highlightedIndex <= 0) {
+                        // if it's the start of the month
+                        // then bypass normal arrow navigation
+                        preventDownshiftDefault(event); // eslint-disable-line no-param-reassign
+
+                        var numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
+
+                        _this2.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
+                      }
+                    }
+                  },
+                  onClick: _this2.props.isReadOnly ? undefined : openMenu,
+                  onBlur: createBlurHandler(_this2.timeInputRef),
+                  onChange: function onChange(event) {
+                    // keep timeInput and regular input in sync when user
+                    // types into regular input
+                    if (!isOpen) return;
+                    var time = event.target.value.split(' ')[1];
+                    if (!time) return;
+                    var parsedTime = utils.parseTime(time);
+
+                    _this2.setState(function () {
+                      if (!parsedTime) return {
+                        timeString: ''
+                      };
+                      var date = calendarTimeUtils.getToday(_this2.props.timeZone);
+
+                      if (parsedTime) {
+                        date = calendarTimeUtils.changeTime(date, _this2.props.timeZone, parsedTime);
+                      }
+
+                      return {
+                        timeString: calendarTimeUtils.formatTime(date, _this2.props.intl.locale, _this2.props.timeZone)
+                      };
+                    });
+                  }
+                }, utils.filterDataAttributes(_this2.props))),
+                hasSelection: Boolean(selectedItem),
+                onClear: clearSelection,
+                isOpen: isOpen,
+                isDisabled: _this2.props.isDisabled,
+                isReadOnly: _this2.props.isReadOnly,
+                toggleButtonProps: getToggleButtonProps({
+                  onBlur: createBlurHandler(_this2.timeInputRef)
+                }),
+                hasError: _this2.props.hasError,
+                hasWarning: _this2.props.hasWarning
+              }), isOpen && !_this2.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                hasFooter: true,
+                hasError: _this2.props.hasError,
+                hasWarning: _this2.props.hasWarning,
+                children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
+                  monthLabel: calendarTimeUtils.getMonthCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
+                  yearLabel: calendarTimeUtils.getYearCalendarLabel(_this2.state.calendarDate, _this2.props.intl.locale),
+                  onPrevMonthClick: function onPrevMonthClick() {
+                    return _this2.jumpMonths(-1);
+                  },
+                  onTodayClick: _this2.showToday,
+                  onNextMonthClick: function onNextMonthClick() {
+                    return _this2.jumpMonths(1);
+                  },
+                  onPrevYearClick: function onPrevYearClick() {
+                    return _this2.jumpMonths(-12);
+                  },
+                  onNextYearClick: function onNextYearClick() {
+                    return _this2.jumpMonths(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) {
+                    return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
+                      isToday: calendarTimeUtils.isSameDay(today, item)
+                    }, getItemProps({
+                      disabled: _this2.props.isDisabled,
+                      item: item,
+                      onMouseOut: function onMouseOut() {
+                        setHighlightedIndex(null);
+                      }
+                    })), {}, {
+                      isHighlighted: suggestedItems.length + index === highlightedIndex,
+                      isSelected: calendarTimeUtils.isSameDay(item, _this2.props.value),
+                      children: calendarTimeUtils.getCalendarDayLabel(item, _this2.props.timeZone)
+                    }), item);
+                  })]
+                }), jsxRuntime.jsx(TimeInput, {
+                  isDisabled: !isTimeInputVisible,
+                  timeInputRef: _this2.timeInputRef,
+                  placeholder: _this2.props.intl.formatMessage(messages.timePlaceholder),
+                  value: _this2.state.timeString,
+                  onChange: _this2.handleTimeChange,
+                  onKeyDown: function onKeyDown(event) {
+                    if (event.key === 'ArrowUp') {
+                      setHighlightedIndex(null);
+
+                      _this2.inputRef.current.focus();
+
+                      return;
+                    }
+
+                    if (event.key === 'Enter') {
+                      setHighlightedIndex(null);
+
+                      _this2.inputRef.current.focus();
+
+                      _this2.inputRef.current.setSelectionRange(0, 100);
+
+                      closeMenu();
+                    }
+                  }
+                })]
+              }))]
+            });
           }
-        })));
-      }));
+        }, _concatInstanceProperty__default["default"](_context2 = "".concat(this.props.timeZone, ":")).call(_context2, this.props.intl.locale))
+      });
     }
   }]);
 
   return DateTimeInput;
-}(React__default['default'].Component);
+}(react$1.Component);
 
 DateTimeInput.displayName = 'DateTimeInput';
 DateTimeInput.propTypes = {};
 var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
 
-// 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'] = dateTimeInput;
+exports["default"] = dateTimeInput;
 exports.version = version;