@commercetools-uikit/date-input 12.2.2 → 12.2.6

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

@@ -10,20 +10,19 @@ 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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 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 react = require('react');
 require('prop-types');
 var Downshift = require('downshift');
 var reactIntl = require('react-intl');
 var Constraints = require('@commercetools-uikit/constraints');
 var utils = require('@commercetools-uikit/utils');
 var calendarUtils = require('@commercetools-uikit/calendar-utils');
-var react = require('@emotion/react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -38,7 +37,6 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
 var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var React__default = /*#__PURE__*/_interopDefault(React);
 var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 
@@ -50,9 +48,9 @@ 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 _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 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; }
 
 var preventDownshiftDefault = function preventDownshiftDefault(event) {
   // eslint-disable-next-line no-param-reassign
@@ -62,24 +60,24 @@ var preventDownshiftDefault = function preventDownshiftDefault(event) {
 var DateInput = function DateInput(props) {
   var intl = reactIntl.useIntl();
 
-  var _React$useState = React__default['default'].useState(props.value || calendarUtils.getToday()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      calendarDate = _React$useState2[0],
-      setCalendarDate = _React$useState2[1];
+  var _useState = react.useState(props.value || calendarUtils.getToday()),
+      _useState2 = _slicedToArray(_useState, 2),
+      calendarDate = _useState2[0],
+      setCalendarDate = _useState2[1];
 
-  var _React$useState3 = React__default['default'].useState([]),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      suggestedItems = _React$useState4[0],
-      setSuggestedItems = _React$useState4[1];
+  var _useState3 = react.useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      suggestedItems = _useState4[0],
+      setSuggestedItems = _useState4[1];
 
-  var _React$useState5 = React__default['default'].useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      highlightedIndex = _React$useState6[0],
-      setHighlightedIndex = _React$useState6[1];
+  var _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      highlightedIndex = _useState6[0],
+      setHighlightedIndex = _useState6[1];
 
-  var inputRef = React__default['default'].useRef();
+  var inputRef = react.useRef();
   var onChange = props.onChange;
-  var emit = React__default['default'].useCallback(function (value) {
+  var emit = react.useCallback(function (value) {
     return onChange({
       target: {
         id: props.id,
@@ -90,12 +88,12 @@ var DateInput = function DateInput(props) {
       }
     });
   }, [onChange, props.id, props.name]);
-  var handleChange = React__default['default'].useCallback(function (date) {
+  var handleChange = react.useCallback(function (date) {
     inputRef.current.setSelectionRange(0, 100);
     emit(date);
   }, [inputRef, emit]);
   var onBlur = props.onBlur;
-  var handleBlur = React__default['default'].useCallback(function () {
+  var handleBlur = react.useCallback(function () {
     if (onBlur) onBlur({
       target: {
         id: props.id,
@@ -118,192 +116,196 @@ var DateInput = function DateInput(props) {
     setHighlightedIndex(dayToHighlight);
   };
 
-  return react.jsx(Constraints__default['default'].Horizontal, {
-    max: props.horizontalConstraint
-  }, react.jsx(Downshift__default['default'], {
-    key: intl.locale,
-    inputId: props.id,
-    itemToString: calendarUtils.createItemToString(intl.locale),
-    selectedItem: props.value === '' ? null : props.value,
-    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) {
-          var date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
-
-          if (date === '') {
+  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsx(Downshift__default["default"], {
+      inputId: props.id,
+      itemToString: calendarUtils.createItemToString(intl.locale),
+      selectedItem: props.value === '' ? null : props.value,
+      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) {
+            var date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
+
+            if (date === '') {
+              setSuggestedItems([]);
+              setHighlightedIndex(null);
+            } else {
+              setSuggestedItems([date]);
+
+              if (calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue)) {
+                setHighlightedIndex(calendarUtils.getDateInMonth(date) - 1);
+              }
+
+              setCalendarDate(date);
+            }
+          } else {
+            // input changed because user selected a date
             setSuggestedItems([]);
             setHighlightedIndex(null);
-          } else {
-            setSuggestedItems([date]);
-
-            if (calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue)) {
-              setHighlightedIndex(calendarUtils.getDateInMonth(date) - 1);
-            }
-
-            setCalendarDate(date);
           }
-        } else {
-          // input changed because user selected a date
-          setSuggestedItems([]);
-          setHighlightedIndex(null);
         }
-      }
-
-      if (changes.hasOwnProperty('highlightedIndex')) {
-        setHighlightedIndex(changes.highlightedIndex);
-      }
-      /* eslint-enable no-prototype-builtins */
-
-    }
-  }, function (_ref) {
-    var _context;
-
-    var getInputProps = _ref.getInputProps,
-        getMenuProps = _ref.getMenuProps,
-        getItemProps = _ref.getItemProps,
-        getToggleButtonProps = _ref.getToggleButtonProps,
-        clearSelection = _ref.clearSelection,
-        downshiftHighlightedIndex = _ref.highlightedIndex,
-        openMenu = _ref.openMenu,
-        setDownshiftHighlightedIndex = _ref.setHighlightedIndex,
-        selectedItem = _ref.selectedItem,
-        isOpen = _ref.isOpen,
-        inputValue = _ref.inputValue;
-    var calendarItems = calendarUtils.createCalendarItems(calendarDate, intl);
-    var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
-
-    var paddingDays = _fillInstanceProperty__default['default'](_context = Array(paddingDayCount)).call(_context);
-
-    var weekdays = calendarUtils.getWeekdayNames(intl.locale);
-    var today = calendarUtils.getToday();
-    return react.jsx("div", {
-      onFocus: props.onFocus,
-      onBlur: handleBlur
-    }, react.jsx(calendarUtils.CalendarBody, {
-      inputRef: 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: props.name,
-        placeholder: typeof props.placeholder === 'string' ? props.placeholder : 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) setDownshiftHighlightedIndex(null);
-        },
-        onKeyDown: function onKeyDown(event) {
-          if (props.isReadOnly) {
-            preventDownshiftDefault(event);
-            return;
-          }
-
-          if (event.key === 'Enter' && _trimInstanceProperty__default['default'](inputValue).call(inputValue) === '') {
-            clearSelection();
-          } // ArrowDown
-
-
-          if (event.keyCode === 40) {
-            var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[highlightedIndex]);
 
-            if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
-              // if the date to highlight is disabled
-              // then do nothing
-              preventDownshiftDefault(event);
-              return;
-            }
-
-            if (highlightedIndex + 1 >= calendarItems.length) {
-              // if it's the end of the month
-              // then bypass normal arrow navigation
-              preventDownshiftDefault(event); // then jump to start of next month
-
-              jumpMonth(1, 0);
-            }
-          } // ArrowUp
-
-
-          if (event.keyCode === 38) {
-            var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
-
-            if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
-              // if the date to highlight is disabled
-              // then do nothing
-              preventDownshiftDefault(event);
-              return;
-            }
-
-            if (highlightedIndex <= 0) {
-              // if it's the start of the month
-              // then bypass normal arrow navigation
-              preventDownshiftDefault(event);
-              var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
+        if (changes.hasOwnProperty('highlightedIndex')) {
+          setHighlightedIndex(changes.highlightedIndex);
+        }
+        /* eslint-enable no-prototype-builtins */
 
-              jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
-            }
-          }
-        },
-        // we only do this for readOnly because the input
-        // doesn't ignore these events, unlike when its disabled
-        onClick: props.isReadOnly ? undefined : openMenu
-      }, utils.filterDataAttributes(props))),
-      hasSelection: Boolean(selectedItem),
-      onClear: clearSelection,
-      isOpen: isOpen,
-      isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly,
-      toggleButtonProps: getToggleButtonProps(),
-      hasError: props.hasError,
-      hasWarning: props.hasWarning
-    }), isOpen && !props.isDisabled && !props.isReadOnly && react.jsx(calendarUtils.CalendarMenu, _extends({}, getMenuProps(), {
-      hasError: props.hasError,
-      hasWarning: props.hasWarning
-    }), react.jsx(calendarUtils.CalendarHeader, {
-      monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
-      yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
-      onPrevMonthClick: function onPrevMonthClick() {
-        return jumpMonth(-1);
       },
-      onTodayClick: showToday,
-      onNextMonthClick: function onNextMonthClick() {
-        return jumpMonth(1);
-      },
-      onPrevYearClick: function onPrevYearClick() {
-        return jumpMonth(-12);
-      },
-      onNextYearClick: function onNextYearClick() {
-        return jumpMonth(12);
+      children: function children(_ref) {
+        var _context;
+
+        var getInputProps = _ref.getInputProps,
+            getMenuProps = _ref.getMenuProps,
+            getItemProps = _ref.getItemProps,
+            getToggleButtonProps = _ref.getToggleButtonProps,
+            clearSelection = _ref.clearSelection,
+            downshiftHighlightedIndex = _ref.highlightedIndex,
+            openMenu = _ref.openMenu,
+            setDownshiftHighlightedIndex = _ref.setHighlightedIndex,
+            selectedItem = _ref.selectedItem,
+            isOpen = _ref.isOpen,
+            inputValue = _ref.inputValue;
+        var calendarItems = calendarUtils.createCalendarItems(calendarDate, intl);
+        var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
+
+        var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context);
+
+        var weekdays = calendarUtils.getWeekdayNames(intl.locale);
+        var today = calendarUtils.getToday();
+        return jsxRuntime.jsxs("div", {
+          onFocus: props.onFocus,
+          onBlur: handleBlur,
+          children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
+            inputRef: 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: props.name,
+              placeholder: typeof props.placeholder === 'string' ? props.placeholder : 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) setDownshiftHighlightedIndex(null);
+              },
+              onKeyDown: function onKeyDown(event) {
+                if (props.isReadOnly) {
+                  preventDownshiftDefault(event);
+                  return;
+                }
+
+                if (event.key === 'Enter' && _trimInstanceProperty__default["default"](inputValue).call(inputValue) === '') {
+                  clearSelection();
+                } // ArrowDown
+
+
+                if (event.keyCode === 40) {
+                  var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[highlightedIndex]);
+
+                  if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
+                    // if the date to highlight is disabled
+                    // then do nothing
+                    preventDownshiftDefault(event);
+                    return;
+                  }
+
+                  if (highlightedIndex + 1 >= calendarItems.length) {
+                    // if it's the end of the month
+                    // then bypass normal arrow navigation
+                    preventDownshiftDefault(event); // then jump to start of next month
+
+                    jumpMonth(1, 0);
+                  }
+                } // ArrowUp
+
+
+                if (event.keyCode === 38) {
+                  var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
+
+                  if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
+                    // if the date to highlight is disabled
+                    // then do nothing
+                    preventDownshiftDefault(event);
+                    return;
+                  }
+
+                  if (highlightedIndex <= 0) {
+                    // if it's the start of the month
+                    // then bypass normal arrow navigation
+                    preventDownshiftDefault(event);
+                    var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
+
+                    jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
+                  }
+                }
+              },
+              // we only do this for readOnly because the input
+              // doesn't ignore these events, unlike when its disabled
+              onClick: props.isReadOnly ? undefined : openMenu
+            }, utils.filterDataAttributes(props))),
+            hasSelection: Boolean(selectedItem),
+            onClear: clearSelection,
+            isOpen: isOpen,
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            toggleButtonProps: getToggleButtonProps(),
+            hasError: props.hasError,
+            hasWarning: props.hasWarning
+          }), isOpen && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+            hasError: props.hasError,
+            hasWarning: props.hasWarning,
+            children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
+              monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
+              yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
+              onPrevMonthClick: function onPrevMonthClick() {
+                return jumpMonth(-1);
+              },
+              onTodayClick: showToday,
+              onNextMonthClick: function onNextMonthClick() {
+                return jumpMonth(1);
+              },
+              onPrevYearClick: function onPrevYearClick() {
+                return jumpMonth(-12);
+              },
+              onNextYearClick: function onNextYearClick() {
+                return jumpMonth(12);
+              }
+            }), jsxRuntime.jsxs(calendarUtils.CalendarContent, {
+              children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, function (weekday) {
+                return jsxRuntime.jsx(calendarUtils.CalendarDay, {
+                  type: "heading",
+                  children: weekday
+                }, weekday);
+              }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (day, index) {
+                return jsxRuntime.jsx(calendarUtils.CalendarDay, {
+                  type: "spacing"
+                }, index);
+              }), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, function (item, index) {
+                return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
+                  isToday: calendarUtils.isSameDay(today, item)
+                }, getItemProps({
+                  disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
+                  item: item,
+                  onMouseOut: function onMouseOut() {
+                    setDownshiftHighlightedIndex(null);
+                  }
+                })), {}, {
+                  isHighlighted: index === downshiftHighlightedIndex,
+                  isSelected: calendarUtils.isSameDay(item, props.value),
+                  children: calendarUtils.getCalendarDayLabel(item)
+                }), item);
+              })]
+            })]
+          }))]
+        });
       }
-    }), react.jsx(calendarUtils.CalendarContent, null, _mapInstanceProperty__default['default'](weekdays).call(weekdays, function (weekday) {
-      return react.jsx(calendarUtils.CalendarDay, {
-        key: weekday,
-        type: "heading"
-      }, weekday);
-    }), _mapInstanceProperty__default['default'](paddingDays).call(paddingDays, function (day, index) {
-      return react.jsx(calendarUtils.CalendarDay, {
-        key: index,
-        type: "spacing"
-      });
-    }), _mapInstanceProperty__default['default'](calendarItems).call(calendarItems, function (item, index) {
-      return react.jsx(calendarUtils.CalendarDay, _extends({
-        key: item,
-        isToday: calendarUtils.isSameDay(today, item)
-      }, getItemProps({
-        disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
-        item: item,
-        onMouseOut: function onMouseOut() {
-          setDownshiftHighlightedIndex(null);
-        }
-      }), {
-        isHighlighted: index === downshiftHighlightedIndex,
-        isSelected: calendarUtils.isSameDay(item, props.value)
-      }), calendarUtils.getCalendarDayLabel(item));
-    }))));
-  }));
+    }, intl.locale)
+  });
 };
 
 DateInput.displayName = 'DateInput';
@@ -315,8 +317,8 @@ DateInput.isEmpty = function (value) {
 DateInput.propTypes = {};
 var DateInput$1 = DateInput;
 
-// 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'] = DateInput$1;
+exports["default"] = DateInput$1;
 exports.version = version;