@commercetools-uikit/date-input 12.2.9 → 13.0.0

package/README.md

@@ -45,22 +45,36 @@ export default Example;
 
 ## Properties
 
-| Props                  | Type                                                                                      | Required | Default | Description                                                                                                                                                                           |
-| ---------------------- | ----------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `horizontalConstraint` | `enum`<br/>Possible values:<br/>`6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          |         | Horizontal size limit of the input field.                                                                                                                                             |
-| `value`                | `string`                                                                                  |    ✅    |         | The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD".                                                                                                |
-| `onChange`             | `func`                                                                                    |    ✅    |         | Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD".&#xA;<br />&#xA;Signature: `(event) => void` |
-| `onFocus`              | `func`                                                                                    |          |         | Called when the date input gains focus.                                                                                                                                               |
-| `onBlur`               | `func`                                                                                    |          |         | Called when the date input loses focus.                                                                                                                                               |
-| `id`                   | `string`                                                                                  |          |         | Used as the HTML `id` attribute.                                                                                                                                                      |
-| `name`                 | `string`                                                                                  |          |         | Used as the HTML `name` attribute.                                                                                                                                                    |
-| `placeholder`          | `string`                                                                                  |          |         | Placeholder value to show in the input field                                                                                                                                          |
-| `isDisabled`           | `bool`                                                                                    |          |         | Disables the date picker                                                                                                                                                              |
-| `isReadOnly`           | `bool`                                                                                    |          |         | Disables the date picker menu and makes input field read-only                                                                                                                         |
-| `hasError`             | `bool`                                                                                    |          |         | Indicates the input field has an error                                                                                                                                                |
-| `hasWarning`           | `bool`                                                                                    |          |         | Indicates the input field has a warning                                                                                                                                               |
-| `minValue`             | `string`                                                                                  |          |         | A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".                                                                                        |
-| `maxValue`             | `string`                                                                                  |          |         | A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".                                                                                        |
+| Props                  | Type                                                                                         | Required | Default | Description                                                                                                                                                                           |
+| ---------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          |         | Horizontal size limit of the input field.                                                                                                                                             |
+| `value`                | `string`                                                                                     |    ✅    |         | The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD".                                                                                                |
+| `onChange`             | `Function`<br/>[See signature.](#signature-onChange)                                         |    ✅    |         | Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD".&#xA;<br />&#xA;Signature: `(event) => void` |
+| `onFocus`              | `FocusEventHandler`                                                                          |          |         | Called when the date input gains focus.                                                                                                                                               |
+| `onBlur`               | `Function`<br/>[See signature.](#signature-onBlur)                                           |          |         | Called when the date input loses focus.                                                                                                                                               |
+| `id`                   | `string`                                                                                     |          |         | Used as the HTML `id` attribute.                                                                                                                                                      |
+| `name`                 | `string`                                                                                     |          |         | Used as the HTML `name` attribute.                                                                                                                                                    |
+| `placeholder`          | `string`                                                                                     |          |         | Placeholder value to show in the input field                                                                                                                                          |
+| `isDisabled`           | `boolean`                                                                                    |          |         | Disables the date picker                                                                                                                                                              |
+| `isReadOnly`           | `boolean`                                                                                    |          |         | Disables the date picker menu and makes input field read-only                                                                                                                         |
+| `hasError`             | `boolean`                                                                                    |          |         | Indicates the input field has an error                                                                                                                                                |
+| `hasWarning`           | `boolean`                                                                                    |          |         | Indicates the input field has a warning                                                                                                                                               |
+| `minValue`             | `string`                                                                                     |          |         | A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".                                                                                        |
+| `maxValue`             | `string`                                                                                     |          |         | A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".                                                                                        |
+
+## Signatures
+
+### Signature `onChange`
+
+```ts
+(event: TEvent) => void
+```
+
+### Signature `onBlur`
+
+```ts
+(event: TEvent) => void
+```
 
 ## Static methods
 

package/dist/commercetools-uikit-date-input.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

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

@@ -12,11 +12,11 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _pt = require('prop-types');
 var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var react = require('react');
-var PropTypes = require('prop-types');
 var Downshift = require('downshift');
 var reactIntl = require('react-intl');
 var Constraints = require('@commercetools-uikit/constraints');
@@ -34,10 +34,10 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 
@@ -49,12 +49,11 @@ 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); 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 _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), true)).call(_context2, 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 _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var preventDownshiftDefault = function preventDownshiftDefault(event) {
-  // eslint-disable-next-line no-param-reassign
   event.nativeEvent.preventDownshiftDefault = true;
 };
 
@@ -76,7 +75,7 @@ var DateInput = function DateInput(props) {
       highlightedIndex = _useState6[0],
       setHighlightedIndex = _useState6[1];
 
-  var inputRef = react.useRef();
+  var inputRef = react.useRef(null);
   var onChange = props.onChange;
   var emit = react.useCallback(function (value) {
     return onChange({
@@ -90,7 +89,9 @@ var DateInput = function DateInput(props) {
     });
   }, [onChange, props.id, props.name]);
   var handleChange = react.useCallback(function (date) {
-    inputRef.current.setSelectionRange(0, 100);
+    var _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
     emit(date);
   }, [inputRef, emit]);
   var onBlur = props.onBlur;
@@ -104,10 +105,12 @@ var DateInput = function DateInput(props) {
   }, [onBlur, props.id, props.name]);
 
   var showToday = function showToday() {
+    var _inputRef$current2;
+
     var today = calendarUtils.getToday();
     setCalendarDate(today);
     setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
-    inputRef.current.focus();
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
   };
 
   var jumpMonth = function jumpMonth(amount) {
@@ -126,7 +129,6 @@ var DateInput = function DateInput(props) {
       highlightedIndex: highlightedIndex,
       onChange: handleChange,
       onStateChange: function onStateChange(changes) {
-        /* eslint-disable no-prototype-builtins */
         if (changes.hasOwnProperty('inputValue')) {
           // input changed because user typed
           if (changes.type === Downshift__default["default"].stateChangeTypes.changeInput) {
@@ -154,8 +156,6 @@ var DateInput = function DateInput(props) {
         if (changes.hasOwnProperty('highlightedIndex')) {
           setHighlightedIndex(changes.highlightedIndex);
         }
-        /* eslint-enable no-prototype-builtins */
-
       },
       children: function children(_ref) {
         var _context;
@@ -171,10 +171,10 @@ var DateInput = function DateInput(props) {
             selectedItem = _ref.selectedItem,
             isOpen = _ref.isOpen,
             inputValue = _ref.inputValue;
-        var calendarItems = calendarUtils.createCalendarItems(calendarDate, intl);
+        var calendarItems = calendarUtils.createCalendarItems(calendarDate);
         var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
 
-        var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context);
+        var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
 
         var weekdays = calendarUtils.getWeekdayNames(intl.locale);
         var today = calendarUtils.getToday();
@@ -192,6 +192,7 @@ var DateInput = function DateInput(props) {
               onMouseEnter: function onMouseEnter() {
                 // we remove the highlight so that the user can use the
                 // arrow keys to move the cursor when hovering
+                // @ts-ignore
                 if (isOpen) setDownshiftHighlightedIndex(null);
               },
               onKeyDown: function onKeyDown(event) {
@@ -200,13 +201,13 @@ var DateInput = function DateInput(props) {
                   return;
                 }
 
-                if (event.key === 'Enter' && _trimInstanceProperty__default["default"](inputValue).call(inputValue) === '') {
+                if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '') {
                   clearSelection();
                 } // ArrowDown
 
 
                 if (event.keyCode === 40) {
-                  var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[highlightedIndex]);
+                  var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
 
                   if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
                     // if the date to highlight is disabled
@@ -215,7 +216,7 @@ var DateInput = function DateInput(props) {
                     return;
                   }
 
-                  if (highlightedIndex + 1 >= calendarItems.length) {
+                  if (Number(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
@@ -226,7 +227,7 @@ var DateInput = function DateInput(props) {
 
 
                 if (event.keyCode === 38) {
-                  var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
+                  var previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
 
                   if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
                     // if the date to highlight is disabled
@@ -235,7 +236,7 @@ var DateInput = function DateInput(props) {
                     return;
                   }
 
-                  if (highlightedIndex <= 0) {
+                  if (Number(highlightedIndex) <= 0) {
                     // if it's the start of the month
                     // then bypass normal arrow navigation
                     preventDownshiftDefault(event);
@@ -282,7 +283,7 @@ var DateInput = function DateInput(props) {
                   type: "heading",
                   children: weekday
                 }, weekday);
-              }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (day, index) {
+              }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (_, index) {
                 return jsxRuntime.jsx(calendarUtils.CalendarDay, {
                   type: "spacing"
                 }, index);
@@ -293,6 +294,7 @@ var DateInput = function DateInput(props) {
                   disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
                   item: item,
                   onMouseOut: function onMouseOut() {
+                    // @ts-ignore
                     setDownshiftHighlightedIndex(null);
                   }
                 })), {}, {
@@ -309,89 +311,32 @@ var DateInput = function DateInput(props) {
   });
 };
 
+DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  value: _pt__default["default"].string.isRequired,
+  onChange: _pt__default["default"].func.isRequired,
+  onFocus: _pt__default["default"].func,
+  onBlur: _pt__default["default"].func,
+  id: _pt__default["default"].string,
+  name: _pt__default["default"].string,
+  placeholder: _pt__default["default"].string,
+  isDisabled: _pt__default["default"].bool,
+  isReadOnly: _pt__default["default"].bool,
+  hasError: _pt__default["default"].bool,
+  hasWarning: _pt__default["default"].bool,
+  minValue: _pt__default["default"].string,
+  maxValue: _pt__default["default"].string
+} : {};
 DateInput.displayName = 'DateInput';
 
 DateInput.isEmpty = function (value) {
   return value === '';
 };
 
-DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * 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']),
-
-  /**
-   * The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD".
-   */
-  value: PropTypes__default["default"].string.isRequired,
-
-  /**
-   * Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD".
-   * <br />
-   * Signature: `(event) => void`
-   */
-  onChange: PropTypes__default["default"].func.isRequired,
-
-  /**
-   * Called when the date input gains focus.
-   */
-  onFocus: PropTypes__default["default"].func,
-
-  /**
-   * Called when the date input loses focus.
-   */
-  onBlur: PropTypes__default["default"].func,
-
-  /**
-   * Used as the HTML `id` attribute.
-   */
-  id: PropTypes__default["default"].string,
-
-  /**
-   * Used as the HTML `name` attribute.
-   */
-  name: PropTypes__default["default"].string,
-
-  /**
-   * Placeholder value to show in the input field
-   */
-  placeholder: PropTypes__default["default"].string,
-
-  /**
-   * Disables the date picker
-   */
-  isDisabled: PropTypes__default["default"].bool,
-
-  /**
-   * Disables the date picker menu and makes input field read-only
-   */
-  isReadOnly: PropTypes__default["default"].bool,
-
-  /**
-   * Indicates the input field has an error
-   */
-  hasError: PropTypes__default["default"].bool,
-
-  /**
-   * Indicates the input field has a warning
-   */
-  hasWarning: PropTypes__default["default"].bool,
-
-  /**
-   * A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
-   */
-  minValue: PropTypes__default["default"].string,
-
-  /**
-   * A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
-   */
-  maxValue: PropTypes__default["default"].string
-} : {};
 var DateInput$1 = DateInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.9";
+var version = "13.0.0";
 
 exports["default"] = DateInput$1;
 exports.version = version;

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

@@ -12,11 +12,11 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('prop-types');
 var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var react = require('react');
-require('prop-types');
 var Downshift = require('downshift');
 var reactIntl = require('react-intl');
 var Constraints = require('@commercetools-uikit/constraints');
@@ -48,12 +48,11 @@ 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); 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 _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), true)).call(_context2, 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 _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var preventDownshiftDefault = function preventDownshiftDefault(event) {
-  // eslint-disable-next-line no-param-reassign
   event.nativeEvent.preventDownshiftDefault = true;
 };
 
@@ -75,7 +74,7 @@ var DateInput = function DateInput(props) {
       highlightedIndex = _useState6[0],
       setHighlightedIndex = _useState6[1];
 
-  var inputRef = react.useRef();
+  var inputRef = react.useRef(null);
   var onChange = props.onChange;
   var emit = react.useCallback(function (value) {
     return onChange({
@@ -89,7 +88,9 @@ var DateInput = function DateInput(props) {
     });
   }, [onChange, props.id, props.name]);
   var handleChange = react.useCallback(function (date) {
-    inputRef.current.setSelectionRange(0, 100);
+    var _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
     emit(date);
   }, [inputRef, emit]);
   var onBlur = props.onBlur;
@@ -103,10 +104,12 @@ var DateInput = function DateInput(props) {
   }, [onBlur, props.id, props.name]);
 
   var showToday = function showToday() {
+    var _inputRef$current2;
+
     var today = calendarUtils.getToday();
     setCalendarDate(today);
     setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
-    inputRef.current.focus();
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
   };
 
   var jumpMonth = function jumpMonth(amount) {
@@ -125,7 +128,6 @@ var DateInput = function DateInput(props) {
       highlightedIndex: highlightedIndex,
       onChange: handleChange,
       onStateChange: function onStateChange(changes) {
-        /* eslint-disable no-prototype-builtins */
         if (changes.hasOwnProperty('inputValue')) {
           // input changed because user typed
           if (changes.type === Downshift__default["default"].stateChangeTypes.changeInput) {
@@ -153,8 +155,6 @@ var DateInput = function DateInput(props) {
         if (changes.hasOwnProperty('highlightedIndex')) {
           setHighlightedIndex(changes.highlightedIndex);
         }
-        /* eslint-enable no-prototype-builtins */
-
       },
       children: function children(_ref) {
         var _context;
@@ -170,10 +170,10 @@ var DateInput = function DateInput(props) {
             selectedItem = _ref.selectedItem,
             isOpen = _ref.isOpen,
             inputValue = _ref.inputValue;
-        var calendarItems = calendarUtils.createCalendarItems(calendarDate, intl);
+        var calendarItems = calendarUtils.createCalendarItems(calendarDate);
         var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
 
-        var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context);
+        var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
 
         var weekdays = calendarUtils.getWeekdayNames(intl.locale);
         var today = calendarUtils.getToday();
@@ -191,6 +191,7 @@ var DateInput = function DateInput(props) {
               onMouseEnter: function onMouseEnter() {
                 // we remove the highlight so that the user can use the
                 // arrow keys to move the cursor when hovering
+                // @ts-ignore
                 if (isOpen) setDownshiftHighlightedIndex(null);
               },
               onKeyDown: function onKeyDown(event) {
@@ -199,13 +200,13 @@ var DateInput = function DateInput(props) {
                   return;
                 }
 
-                if (event.key === 'Enter' && _trimInstanceProperty__default["default"](inputValue).call(inputValue) === '') {
+                if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '') {
                   clearSelection();
                 } // ArrowDown
 
 
                 if (event.keyCode === 40) {
-                  var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[highlightedIndex]);
+                  var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
 
                   if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
                     // if the date to highlight is disabled
@@ -214,7 +215,7 @@ var DateInput = function DateInput(props) {
                     return;
                   }
 
-                  if (highlightedIndex + 1 >= calendarItems.length) {
+                  if (Number(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
@@ -225,7 +226,7 @@ var DateInput = function DateInput(props) {
 
 
                 if (event.keyCode === 38) {
-                  var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
+                  var previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
 
                   if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
                     // if the date to highlight is disabled
@@ -234,7 +235,7 @@ var DateInput = function DateInput(props) {
                     return;
                   }
 
-                  if (highlightedIndex <= 0) {
+                  if (Number(highlightedIndex) <= 0) {
                     // if it's the start of the month
                     // then bypass normal arrow navigation
                     preventDownshiftDefault(event);
@@ -281,7 +282,7 @@ var DateInput = function DateInput(props) {
                   type: "heading",
                   children: weekday
                 }, weekday);
-              }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (day, index) {
+              }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (_, index) {
                 return jsxRuntime.jsx(calendarUtils.CalendarDay, {
                   type: "spacing"
                 }, index);
@@ -292,6 +293,7 @@ var DateInput = function DateInput(props) {
                   disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
                   item: item,
                   onMouseOut: function onMouseOut() {
+                    // @ts-ignore
                     setDownshiftHighlightedIndex(null);
                   }
                 })), {}, {
@@ -308,17 +310,17 @@ var DateInput = function DateInput(props) {
   });
 };
 
+DateInput.propTypes = {};
 DateInput.displayName = 'DateInput';
 
 DateInput.isEmpty = function (value) {
   return value === '';
 };
 
-DateInput.propTypes = {};
 var DateInput$1 = DateInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.9";
+var version = "13.0.0";
 
 exports["default"] = DateInput$1;
 exports.version = version;

package/dist/commercetools-uikit-date-input.esm.js

@@ -8,11 +8,11 @@ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _pt from 'prop-types';
 import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
 import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import { useState, useRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
 import Downshift from 'downshift';
 import { defineMessages, useIntl } from 'react-intl';
 import Constraints from '@commercetools-uikit/constraints';
@@ -28,12 +28,11 @@ var messages = defineMessages({
   }
 });
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var preventDownshiftDefault = function preventDownshiftDefault(event) {
-  // eslint-disable-next-line no-param-reassign
   event.nativeEvent.preventDownshiftDefault = true;
 };
 
@@ -55,7 +54,7 @@ var DateInput = function DateInput(props) {
       highlightedIndex = _useState6[0],
       setHighlightedIndex = _useState6[1];
 
-  var inputRef = useRef();
+  var inputRef = useRef(null);
   var onChange = props.onChange;
   var emit = useCallback(function (value) {
     return onChange({
@@ -69,7 +68,9 @@ var DateInput = function DateInput(props) {
     });
   }, [onChange, props.id, props.name]);
   var handleChange = useCallback(function (date) {
-    inputRef.current.setSelectionRange(0, 100);
+    var _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
     emit(date);
   }, [inputRef, emit]);
   var onBlur = props.onBlur;
@@ -83,10 +84,12 @@ var DateInput = function DateInput(props) {
   }, [onBlur, props.id, props.name]);
 
   var showToday = function showToday() {
+    var _inputRef$current2;
+
     var today = getToday();
     setCalendarDate(today);
     setHighlightedIndex(suggestedItems.length + getDateInMonth(today) - 1);
-    inputRef.current.focus();
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
   };
 
   var jumpMonth = function jumpMonth(amount) {
@@ -105,7 +108,6 @@ var DateInput = function DateInput(props) {
       highlightedIndex: highlightedIndex,
       onChange: handleChange,
       onStateChange: function onStateChange(changes) {
-        /* eslint-disable no-prototype-builtins */
         if (changes.hasOwnProperty('inputValue')) {
           // input changed because user typed
           if (changes.type === Downshift.stateChangeTypes.changeInput) {
@@ -133,8 +135,6 @@ var DateInput = function DateInput(props) {
         if (changes.hasOwnProperty('highlightedIndex')) {
           setHighlightedIndex(changes.highlightedIndex);
         }
-        /* eslint-enable no-prototype-builtins */
-
       },
       children: function children(_ref) {
         var _context;
@@ -150,10 +150,10 @@ var DateInput = function DateInput(props) {
             selectedItem = _ref.selectedItem,
             isOpen = _ref.isOpen,
             inputValue = _ref.inputValue;
-        var calendarItems = createCalendarItems(calendarDate, intl);
+        var calendarItems = createCalendarItems(calendarDate);
         var paddingDayCount = getPaddingDayCount(calendarDate, intl.locale);
 
-        var paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context);
+        var paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context, undefined);
 
         var weekdays = getWeekdayNames(intl.locale);
         var today = getToday();
@@ -171,6 +171,7 @@ var DateInput = function DateInput(props) {
               onMouseEnter: function onMouseEnter() {
                 // we remove the highlight so that the user can use the
                 // arrow keys to move the cursor when hovering
+                // @ts-ignore
                 if (isOpen) setDownshiftHighlightedIndex(null);
               },
               onKeyDown: function onKeyDown(event) {
@@ -179,13 +180,13 @@ var DateInput = function DateInput(props) {
                   return;
                 }
 
-                if (event.key === 'Enter' && _trimInstanceProperty(inputValue).call(inputValue) === '') {
+                if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty(inputValue).call(inputValue)) === '') {
                   clearSelection();
                 } // ArrowDown
 
 
                 if (event.keyCode === 40) {
-                  var nextDayToHighlight = getNextDay(calendarItems[highlightedIndex]);
+                  var nextDayToHighlight = getNextDay(calendarItems[Number(highlightedIndex)]);
 
                   if (!getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
                     // if the date to highlight is disabled
@@ -194,7 +195,7 @@ var DateInput = function DateInput(props) {
                     return;
                   }
 
-                  if (highlightedIndex + 1 >= calendarItems.length) {
+                  if (Number(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
@@ -205,7 +206,7 @@ var DateInput = function DateInput(props) {
 
 
                 if (event.keyCode === 38) {
-                  var previousDay = getPreviousDay(calendarItems[highlightedIndex]);
+                  var previousDay = getPreviousDay(calendarItems[Number(highlightedIndex)]);
 
                   if (!getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
                     // if the date to highlight is disabled
@@ -214,7 +215,7 @@ var DateInput = function DateInput(props) {
                     return;
                   }
 
-                  if (highlightedIndex <= 0) {
+                  if (Number(highlightedIndex) <= 0) {
                     // if it's the start of the month
                     // then bypass normal arrow navigation
                     preventDownshiftDefault(event);
@@ -261,7 +262,7 @@ var DateInput = function DateInput(props) {
                   type: "heading",
                   children: weekday
                 }, weekday);
-              }), _mapInstanceProperty(paddingDays).call(paddingDays, function (day, index) {
+              }), _mapInstanceProperty(paddingDays).call(paddingDays, function (_, index) {
                 return jsx(CalendarDay, {
                   type: "spacing"
                 }, index);
@@ -272,6 +273,7 @@ var DateInput = function DateInput(props) {
                   disabled: !getIsDateInRange(item, props.minValue, props.maxValue),
                   item: item,
                   onMouseOut: function onMouseOut() {
+                    // @ts-ignore
                     setDownshiftHighlightedIndex(null);
                   }
                 })), {}, {
@@ -288,88 +290,31 @@ var DateInput = function DateInput(props) {
   });
 };
 
+DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  value: _pt.string.isRequired,
+  onChange: _pt.func.isRequired,
+  onFocus: _pt.func,
+  onBlur: _pt.func,
+  id: _pt.string,
+  name: _pt.string,
+  placeholder: _pt.string,
+  isDisabled: _pt.bool,
+  isReadOnly: _pt.bool,
+  hasError: _pt.bool,
+  hasWarning: _pt.bool,
+  minValue: _pt.string,
+  maxValue: _pt.string
+} : {};
 DateInput.displayName = 'DateInput';
 
 DateInput.isEmpty = function (value) {
   return value === '';
 };
 
-DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Horizontal size limit of the input field.
-   */
-  horizontalConstraint: PropTypes.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
-
-  /**
-   * The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD".
-   */
-  value: PropTypes.string.isRequired,
-
-  /**
-   * Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD".
-   * <br />
-   * Signature: `(event) => void`
-   */
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * Called when the date input gains focus.
-   */
-  onFocus: PropTypes.func,
-
-  /**
-   * Called when the date input loses focus.
-   */
-  onBlur: PropTypes.func,
-
-  /**
-   * Used as the HTML `id` attribute.
-   */
-  id: PropTypes.string,
-
-  /**
-   * Used as the HTML `name` attribute.
-   */
-  name: PropTypes.string,
-
-  /**
-   * Placeholder value to show in the input field
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Disables the date picker
-   */
-  isDisabled: PropTypes.bool,
-
-  /**
-   * Disables the date picker menu and makes input field read-only
-   */
-  isReadOnly: PropTypes.bool,
-
-  /**
-   * Indicates the input field has an error
-   */
-  hasError: PropTypes.bool,
-
-  /**
-   * Indicates the input field has a warning
-   */
-  hasWarning: PropTypes.bool,
-
-  /**
-   * A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
-   */
-  minValue: PropTypes.string,
-
-  /**
-   * A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
-   */
-  maxValue: PropTypes.string
-} : {};
 var DateInput$1 = DateInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.9";
+var version = "13.0.0";
 
 export { DateInput$1 as default, version };

package/dist/declarations/src/date-input.d.ts

@@ -0,0 +1,30 @@
+import { type FocusEventHandler } from 'react';
+declare type TEvent = {
+    target: {
+        id?: string;
+        name?: string;
+        value?: string;
+    };
+};
+declare type TDateInput = {
+    horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    value: string;
+    onChange: (event: TEvent) => void;
+    onFocus?: FocusEventHandler;
+    onBlur?: (event: TEvent) => void;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    hasError?: boolean;
+    hasWarning?: boolean;
+    minValue?: string;
+    maxValue?: string;
+};
+declare const DateInput: {
+    (props: TDateInput): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    isEmpty(value?: string | undefined): boolean;
+};
+export default DateInput;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './date-input';
+export { default as version } from './version';

package/dist/declarations/src/messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    placeholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/date-input",
   "description": "The `DateInput` component allows the user to select a date. It formats the selected date depending on the users' locale.",
-  "version": "12.2.9",
+  "version": "13.0.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -19,25 +19,25 @@
   "module": "dist/commercetools-uikit-date-input.esm.js",
   "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.16.5",
-    "@babel/runtime-corejs3": "7.16.5",
-    "@commercetools-uikit/accessible-button": "12.2.9",
-    "@commercetools-uikit/calendar-utils": "12.2.9",
-    "@commercetools-uikit/constraints": "12.2.9",
-    "@commercetools-uikit/design-system": "12.2.9",
+    "@babel/runtime": "7.17.2",
+    "@babel/runtime-corejs3": "7.17.2",
+    "@commercetools-uikit/accessible-button": "13.0.0",
+    "@commercetools-uikit/calendar-utils": "13.0.0",
+    "@commercetools-uikit/constraints": "13.0.0",
+    "@commercetools-uikit/design-system": "13.0.0",
     "@commercetools-uikit/hooks": "12.2.9",
-    "@commercetools-uikit/icons": "12.2.9",
-    "@commercetools-uikit/secondary-icon-button": "12.2.9",
-    "@commercetools-uikit/select-utils": "12.2.9",
-    "@commercetools-uikit/spacings-inline": "12.2.9",
-    "@commercetools-uikit/text": "12.2.9",
-    "@commercetools-uikit/tooltip": "12.2.9",
+    "@commercetools-uikit/icons": "13.0.0",
+    "@commercetools-uikit/secondary-icon-button": "13.0.0",
+    "@commercetools-uikit/select-utils": "13.0.0",
+    "@commercetools-uikit/spacings-inline": "13.0.0",
+    "@commercetools-uikit/text": "13.0.0",
+    "@commercetools-uikit/tooltip": "13.0.0",
     "@commercetools-uikit/utils": "12.2.9",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "common-tags": "1.8.2",
     "downshift": "6.1.7",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "react-is": "17.0.2",
     "react-required-if": "1.0.3",
     "warning": "4.0.3"
@@ -45,7 +45,7 @@
   "devDependencies": {
     "moment": "2.29.1",
     "react": "17.0.2",
-    "react-intl": "5.23.0"
+    "react-intl": "5.24.6"
   },
   "peerDependencies": {
     "moment": "2.x",