@commercetools-uikit/date-time-input 15.15.0 → 16.0.0

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

@@ -51,22 +51,18 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 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.designTokens.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designSystem.designTokens.fontSizeDefault, ";margin-top:", designSystem.designTokens.spacing20, ";color:", designSystem.designTokens.colorSolid, ";:disabled{background-color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" );
-};
-
-var DateCalendarTimeInput = function DateCalendarTimeInput(props) {
-  return jsxRuntime.jsx("input", {
-    disabled: props.isDisabled,
-    ref: props.timeInputRef,
-    type: "text",
-    value: props.value,
-    onChange: props.onChange,
-    onKeyDown: props.onKeyDown,
-    placeholder: props.placeholder,
-    css: getInputStyles()
-  });
-};
+const getInputStyles = () => /*#__PURE__*/react.css("width:100%;text-align:center;border:0;border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designSystem.designTokens.fontSizeDefault, ";margin-top:", designSystem.designTokens.spacing20, ";color:", designSystem.designTokens.colorSolid, ";:disabled{background-color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" );
+
+const DateCalendarTimeInput = props => jsxRuntime.jsx("input", {
+  disabled: props.isDisabled,
+  ref: props.timeInputRef,
+  type: "text",
+  value: props.value,
+  onChange: props.onChange,
+  onKeyDown: props.onKeyDown,
+  placeholder: props.placeholder,
+  css: getInputStyles()
+});
 
 DateCalendarTimeInput.propTypes = {};
 DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
@@ -74,37 +70,33 @@ var TimeInput = DateCalendarTimeInput;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, 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 _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];
+const activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
 
-var preventDownshiftDefault = function preventDownshiftDefault(event) {
+const preventDownshiftDefault = event => {
   event.nativeEvent.preventDownshiftDefault = true;
 }; // This keeps the menu open when the user focuses the time input (thereby
 // blurring the regular input/toggle button)
 
 
-var createBlurHandler = function createBlurHandler(timeInputRef) {
-  return function (event) {
-    event.persist();
+const createBlurHandler = timeInputRef => event => {
+  event.persist();
 
-    if (event.relatedTarget === timeInputRef.current) {
-      preventDownshiftDefault(event);
-    }
-  };
+  if (event.relatedTarget === timeInputRef.current) {
+    preventDownshiftDefault(event);
+  }
 };
 
-var DateTimeInput = /*#__PURE__*/function (_Component) {
+let DateTimeInput = /*#__PURE__*/function (_Component) {
   _inherits(DateTimeInput, _Component);
 
   var _super = _createSuper(DateTimeInput);
 
   function DateTimeInput() {
-    var _context;
-
     var _this;
 
     _classCallCheck(this, DateTimeInput);
@@ -113,7 +105,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context = [this]).call(_context, args));
+    _this = _super.call(this, ...args);
     _this.inputRef = /*#__PURE__*/react$1.createRef();
     _this.timeInputRef = /*#__PURE__*/react$1.createRef();
     _this.state = {
@@ -124,10 +116,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
     };
 
     _this.jumpMonths = function (amount) {
-      var dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-      _this.setState(function (prevState) {
-        var nextDate = calendarTimeUtils.changeMonth(prevState.calendarDate, _this.props.timeZone, amount);
+      _this.setState(prevState => {
+        const nextDate = calendarTimeUtils.changeMonth(prevState.calendarDate, _this.props.timeZone, amount);
         return {
           calendarDate: nextDate,
           highlightedIndex: dayToHighlight
@@ -135,22 +127,20 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
       });
     };
 
-    _this.showToday = function () {
-      var today = calendarTimeUtils.getToday(_this.props.timeZone);
+    _this.showToday = () => {
+      const today = calendarTimeUtils.getToday(_this.props.timeZone);
 
-      _this.setState(function (prevState) {
-        return {
-          calendarDate: today,
-          highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
-        };
-      }, function () {
+      _this.setState(prevState => ({
+        calendarDate: today,
+        highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
+      }), () => {
         var _this$inputRef$curren;
 
         return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
       });
     };
 
-    _this.handleBlur = function () {
+    _this.handleBlur = () => {
       if (_this.props.onBlur) _this.props.onBlur({
         target: {
           id: _this.props.id,
@@ -159,8 +149,8 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
       });
     };
 
-    _this.handleTimeChange = function (event) {
-      var parsedTime = utils.parseTime(event.target.value);
+    _this.handleTimeChange = event => {
+      const parsedTime = utils.parseTime(event.target.value);
 
       _this.setState({
         timeString: event.target.value
@@ -168,7 +158,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
 
 
       if (_this.props.value === '') return;
-      var date = calendarTimeUtils.getStartOf(_this.props.value, _this.props.timeZone);
+      let date = calendarTimeUtils.getStartOf(_this.props.value, _this.props.timeZone);
 
       if (parsedTime) {
         date = calendarTimeUtils.changeTime(date, _this.props.timeZone, parsedTime);
@@ -177,7 +167,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
       _this.emit(date);
     };
 
-    _this.emit = function (value) {
+    _this.emit = value => {
       var _this$props$onChange, _this$props;
 
       return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
@@ -197,8 +187,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
   _createClass(DateTimeInput, [{
     key: "render",
     value: function render() {
-      var _context2,
-          _this2 = this;
+      var _context;
 
       if (!this.props.isReadOnly) ;
 
@@ -215,7 +204,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
           selectedItem: this.props.value === '' ? null : this.props.value,
           highlightedIndex: this.state.highlightedIndex,
           onChange: this.emit,
-          stateReducer: function stateReducer(_, changes) {
+          stateReducer: (_, changes) => {
             if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
               return _objectSpread(_objectSpread({}, changes), {}, {
                 isOpen: true
@@ -224,20 +213,20 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
 
             return changes;
           },
-          onStateChange: function onStateChange(changes) {
-            _this2.setState(function (prevState) {
+          onStateChange: changes => {
+            this.setState(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
+                  timeString: changes.selectedItem ? calendarTimeUtils.formatTime(changes.selectedItem, this.props.intl.locale, this.props.timeZone) : prevState.timeString
                 };
               }
 
               if (changes.hasOwnProperty('inputValue')) {
-                var suggestedItems = calendarTimeUtils.createSuggestedItems(changes.inputValue, _this2.props.timeZone);
+                const suggestedItems = calendarTimeUtils.createSuggestedItems(changes.inputValue, this.props.timeZone);
                 return {
-                  suggestedItems: suggestedItems,
+                  suggestedItems,
                   highlightedIndex: suggestedItems.length > 0 ? 0 : null
                 };
               }
@@ -247,10 +236,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
                   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) : '',
+                  timeString: changes.isOpen && this.props.value !== '' ? calendarTimeUtils.formatTime(this.props.value, this.props.intl.locale, this.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.timeZone) : _this2.props.value
+                  calendarDate: this.props.value === '' ? calendarTimeUtils.getToday(this.props.timeZone) : this.props.value
                 };
               }
 
@@ -261,19 +250,19 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
               }
 
               return null;
-            }, function () {
+            }, () => {
               if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
-                var _this2$timeInputRef$c, _this2$timeInputRef$c2;
+                var _this$timeInputRef$cu, _this$timeInputRef$cu2;
 
-                (_this2$timeInputRef$c = _this2.timeInputRef.current) === null || _this2$timeInputRef$c === void 0 ? void 0 : _this2$timeInputRef$c.focus();
-                (_this2$timeInputRef$c2 = _this2.timeInputRef.current) === null || _this2$timeInputRef$c2 === void 0 ? void 0 : _this2$timeInputRef$c2.setSelectionRange(0, _this2.state.timeString.length);
+                (_this$timeInputRef$cu = this.timeInputRef.current) === null || _this$timeInputRef$cu === void 0 ? void 0 : _this$timeInputRef$cu.focus();
+                (_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 ? void 0 : _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
               }
             });
           },
-          children: function children(_ref) {
-            var _context3;
+          children: _ref => {
+            var _context2;
 
-            var getInputProps = _ref.getInputProps,
+            let getInputProps = _ref.getInputProps,
                 getMenuProps = _ref.getMenuProps,
                 getItemProps = _ref.getItemProps,
                 getToggleButtonProps = _ref.getToggleButtonProps,
@@ -285,36 +274,36 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
                 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.timeZone);
-            var paddingDayCount = calendarTimeUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
+            const suggestedItems = this.state.suggestedItems;
+            const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
+            const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
 
-            var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3, undefined);
+            const paddingDays = _fillInstanceProperty__default["default"](_context2 = Array(paddingDayCount)).call(_context2, undefined);
 
-            var weekdays = calendarTimeUtils.getWeekdayNames(_this2.props.intl.locale);
-            var today = calendarTimeUtils.getToday(_this2.props.timeZone);
-            var isTimeInputVisible = Boolean(_this2.props.value) && _this2.props.value !== '';
+            const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
+            const today = calendarTimeUtils.getToday(this.props.timeZone);
+            const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
             return jsxRuntime.jsxs("div", {
-              onFocus: _this2.props.onFocus,
-              onBlur: _this2.handleBlur,
+              onFocus: this.props.onFocus,
+              onBlur: this.handleBlur,
               children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
-                inputRef: _this2.inputRef,
+                inputRef: this.inputRef,
                 inputProps: getInputProps(_objectSpread({
                   /* ARIA */
-                  'aria-invalid': _this2.props['aria-invalid'],
-                  'aria-errormessage': _this2.props['aria-errormessage'],
+                  'aria-invalid': this.props['aria-invalid'],
+                  'aria-errormessage': this.props['aria-errormessage'],
                   // 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 : calendarTimeUtils.getLocalizedDateTimeFormatPattern(_this2.props.intl.locale, 'full'),
-                  onMouseEnter: function onMouseEnter() {
+                  name: this.props.name,
+                  placeholder: typeof this.props.placeholder === 'string' ? this.props.placeholder : calendarTimeUtils.getLocalizedDateTimeFormatPattern(this.props.intl.locale, 'full'),
+                  onMouseEnter: () => {
                     // we remove the highlight so that the user can use the
                     // arrow keys to move the cursor when hovering
                     if (isOpen) setHighlightedIndex(-1);
                   },
-                  onKeyDown: function onKeyDown(event) {
-                    if (_this2.props.isReadOnly) {
+                  onKeyDown: event => {
+                    if (this.props.isReadOnly) {
                       preventDownshiftDefault(event);
                       return;
                     } // parse input when user presses enter on regular input,
@@ -323,10 +312,8 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
 
                     if (event.key === 'Enter' && highlightedIndex === null) {
                       preventDownshiftDefault(event);
-                      var parsedDate = calendarTimeUtils.parseInputText(inputValue, _this2.props.intl.locale, _this2.props.timeZone);
-
-                      _this2.emit(parsedDate);
-
+                      const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
+                      this.emit(parsedDate);
                       closeMenu();
                     } // ArrowDown
 
@@ -337,128 +324,113 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
                         // then bypass normal arrow navigation
                         preventDownshiftDefault(event); // then jump to start of next month
 
-                        _this2.jumpMonths(1, 0);
+                        this.jumpMonths(1, 0);
                       }
                     } // ArrowUp
 
 
                     if (event.key === 'ArrowUp') {
-                      var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
+                      const previousDay = calendarTimeUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
 
                       if (Number(highlightedIndex) <= 0) {
                         // if it's the start of the month
                         // then bypass normal arrow navigation
                         preventDownshiftDefault(event);
-                        var numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay, _this2.props.timeZone); // then jump to the last day of the previous month
+                        const numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay, this.props.timeZone); // then jump to the last day of the previous month
 
-                        _this2.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
+                        this.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
                       }
                     }
                   },
-                  onClick: _this2.props.isReadOnly ? undefined : openMenu,
-                  onBlur: createBlurHandler(_this2.timeInputRef),
-                  onChange: function onChange(event) {
+                  onClick: this.props.isReadOnly ? undefined : openMenu,
+                  onBlur: createBlurHandler(this.timeInputRef),
+                  onChange: event => {
                     var _event$target$value;
 
                     // keep timeInput and regular input in sync when user
                     // types into regular input
                     if (!isOpen) return;
-                    var time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
+                    const time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
                     if (!time) return;
-                    var parsedTime = utils.parseTime(time);
-
-                    _this2.setState(function () {
+                    const parsedTime = utils.parseTime(time);
+                    this.setState(() => {
                       if (!parsedTime) return {
                         timeString: ''
                       };
-                      var date = calendarTimeUtils.getToday(_this2.props.timeZone);
+                      let date = calendarTimeUtils.getToday(this.props.timeZone);
 
                       if (parsedTime) {
-                        date = calendarTimeUtils.changeTime(date, _this2.props.timeZone, parsedTime);
+                        date = calendarTimeUtils.changeTime(date, this.props.timeZone, parsedTime);
                       }
 
                       return {
-                        timeString: calendarTimeUtils.formatTime(date, _this2.props.intl.locale, _this2.props.timeZone)
+                        timeString: calendarTimeUtils.formatTime(date, this.props.intl.locale, this.props.timeZone)
                       };
                     });
                   }
-                }, utils.filterDataAttributes(_this2.props))),
+                }, utils.filterDataAttributes(this.props))),
                 hasSelection: Boolean(selectedItem),
                 onClear: clearSelection,
                 isOpen: isOpen,
-                isDisabled: _this2.props.isDisabled,
-                isReadOnly: _this2.props.isReadOnly,
+                isDisabled: this.props.isDisabled,
+                isReadOnly: this.props.isReadOnly,
                 toggleButtonProps: getToggleButtonProps({
-                  onBlur: createBlurHandler(_this2.timeInputRef)
+                  onBlur: createBlurHandler(this.timeInputRef)
                 }),
-                hasError: _this2.props.hasError,
-                hasWarning: _this2.props.hasWarning
-              }), isOpen && !_this2.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                hasError: this.props.hasError,
+                hasWarning: this.props.hasWarning
+              }), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
                 hasFooter: true,
-                hasError: _this2.props.hasError,
-                hasWarning: _this2.props.hasWarning,
+                hasError: this.props.hasError,
+                hasWarning: this.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);
-                  }
+                  monthLabel: calendarTimeUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
+                  yearLabel: calendarTimeUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
+                  onPrevMonthClick: () => this.jumpMonths(-1),
+                  onTodayClick: this.showToday,
+                  onNextMonthClick: () => this.jumpMonths(1),
+                  onPrevYearClick: () => this.jumpMonths(-12),
+                  onNextYearClick: () => this.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 (_, 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(-1);
-                      }
-                    })), {}, {
-                      isHighlighted: suggestedItems.length + index === highlightedIndex,
-                      isSelected: calendarTimeUtils.isSameDay(item, _this2.props.value),
-                      children: calendarTimeUtils.getCalendarDayLabel(item, _this2.props.timeZone)
-                    }), item);
-                  })]
+                  children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, weekday => jsxRuntime.jsx(calendarUtils.CalendarDay, {
+                    type: "heading",
+                    children: weekday
+                  }, weekday)), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, (_, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, {
+                    type: "spacing"
+                  }, index)), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, (item, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
+                    isToday: calendarTimeUtils.isSameDay(today, item)
+                  }, getItemProps({
+                    disabled: this.props.isDisabled,
+                    item,
+                    onMouseOut: () => {
+                      setHighlightedIndex(-1);
+                    }
+                  })), {}, {
+                    isHighlighted: suggestedItems.length + index === highlightedIndex,
+                    isSelected: calendarTimeUtils.isSameDay(item, this.props.value),
+                    children: calendarTimeUtils.getCalendarDayLabel(item, this.props.timeZone)
+                  }), item))]
                 }), jsxRuntime.jsx(TimeInput, {
                   isDisabled: !isTimeInputVisible,
-                  timeInputRef: _this2.timeInputRef,
-                  placeholder: calendarTimeUtils.getLocalizedDateTimeFormatPattern(_this2.props.intl.locale, 'time'),
-                  value: _this2.state.timeString,
-                  onChange: _this2.handleTimeChange,
-                  onKeyDown: function onKeyDown(event) {
+                  timeInputRef: this.timeInputRef,
+                  placeholder: calendarTimeUtils.getLocalizedDateTimeFormatPattern(this.props.intl.locale, 'time'),
+                  value: this.state.timeString,
+                  onChange: this.handleTimeChange,
+                  onKeyDown: event => {
                     if (event.key === 'ArrowUp') {
-                      var _this2$inputRef$curre;
+                      var _this$inputRef$curren2;
 
                       setHighlightedIndex(-1);
-                      (_this2$inputRef$curre = _this2.inputRef.current) === null || _this2$inputRef$curre === void 0 ? void 0 : _this2$inputRef$curre.focus();
+                      (_this$inputRef$curren2 = this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.focus();
                       return;
                     }
 
                     if (event.key === 'Enter') {
-                      var _this2$inputRef$curre2, _this2$inputRef$curre3;
+                      var _this$inputRef$curren3, _this$inputRef$curren4;
 
                       setHighlightedIndex(-1);
-                      (_this2$inputRef$curre2 = _this2.inputRef.current) === null || _this2$inputRef$curre2 === void 0 ? void 0 : _this2$inputRef$curre2.focus();
-                      (_this2$inputRef$curre3 = _this2.inputRef.current) === null || _this2$inputRef$curre3 === void 0 ? void 0 : _this2$inputRef$curre3.setSelectionRange(0, 100);
+                      (_this$inputRef$curren3 = this.inputRef.current) === null || _this$inputRef$curren3 === void 0 ? void 0 : _this$inputRef$curren3.focus();
+                      (_this$inputRef$curren4 = this.inputRef.current) === null || _this$inputRef$curren4 === void 0 ? void 0 : _this$inputRef$curren4.setSelectionRange(0, 100);
                       closeMenu();
                     }
                   }
@@ -466,7 +438,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
               }))]
             });
           }
-        }, _concatInstanceProperty__default["default"](_context2 = "".concat(this.props.timeZone, ":")).call(_context2, this.props.intl.locale))
+        }, _concatInstanceProperty__default["default"](_context = "".concat(this.props.timeZone, ":")).call(_context, this.props.intl.locale))
       });
     }
   }]);
@@ -479,7 +451,7 @@ DateTimeInput.propTypes = {};
 var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "16.0.0";
 
 exports["default"] = dateTimeInput;
 exports.version = version;