@atlaskit/datetime-picker 12.3.6 → 12.3.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 12.3.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.3.7
+
+### Patch Changes
+
+- [`98891267a5e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98891267a5e) - [ux] Dates entered with 5+ digit years will no longer throw a RangeError
+
 ## 12.3.6
 
 ### Patch Changes

package/dist/cjs/components/date-picker.js

@@ -1,74 +1,43 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DatePickerWithoutAnalytics = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _dateFns = require("date-fns");
-
 var _pick = _interopRequireDefault(require("lodash/pick"));
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
-
 var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
-
 var _locale = require("@atlaskit/locale");
-
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _internal = require("../internal");
-
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
-
 var _utils = require("./utils");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.6";
+var packageVersion = "12.3.8";
+
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -78,12 +47,10 @@ function getDateObj(date) {
     year: date.getFullYear()
   };
 }
-
 function getValidDate(iso) {
   var date = (0, _dateFns.parseISO)(iso);
   return (0, _dateFns.isValid)(date) ? getDateObj(date) : {};
 }
-
 var menuStyles = (0, _react2.css)({
   zIndex: _constants.layers.dialog(),
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20, ")"),
@@ -91,10 +58,9 @@ var menuStyles = (0, _react2.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   overflow: 'hidden'
 });
-
 var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
-      innerProps = _ref.innerProps;
+    innerProps = _ref.innerProps;
   return (0, _react2.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
@@ -119,7 +85,6 @@ var Menu = function Menu(_ref) {
     testId: selectProps.testId
   });
 };
-
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -141,19 +106,15 @@ var datePickerDefaultProps = {
   onFocus: function onFocus(event) {},
   selectProps: {},
   spacing: 'default',
-  locale: 'en-US' // Not including a default prop for value as it will
+  locale: 'en-US'
+  // Not including a default prop for value as it will
   // Make the component a controlled component
-
 };
-
 var DatePicker = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DatePicker, _Component);
-
   var _super = _createSuper(DatePicker);
-
   function DatePicker(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, DatePicker);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calendarRef", null);
@@ -166,32 +127,28 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarChange", function (_ref2) {
       var iso = _ref2.iso;
-
       var _iso$split = iso.split('-'),
-          _iso$split2 = (0, _slicedToArray2.default)(_iso$split, 3),
-          year = _iso$split2[0],
-          month = _iso$split2[1],
-          date = _iso$split2[2];
-
+        _iso$split2 = (0, _slicedToArray2.default)(_iso$split, 3),
+        year = _iso$split2[0],
+        month = _iso$split2[1],
+        date = _iso$split2[2];
       var newIso = iso;
       var parsedDate = parseInt(date, 10);
       var parsedMonth = parseInt(month, 10);
       var parsedYear = parseInt(year, 10);
-      var lastDayInMonth = (0, _dateFns.lastDayOfMonth)(new Date(parsedYear, parsedMonth - 1)).getDate();
-
+      var lastDayInMonth = (0, _dateFns.lastDayOfMonth)(new Date(parsedYear, parsedMonth - 1) // This needs to be -1, because the Date constructor expects an index of the given month
+      ).getDate();
       if (lastDayInMonth < parsedDate) {
         newIso = "".concat(year, "-").concat((0, _internal.padToTwo)(parsedMonth), "-").concat((0, _internal.padToTwo)(lastDayInMonth));
       } else {
         newIso = "".concat(year, "-").concat((0, _internal.padToTwo)(parsedMonth), "-").concat((0, _internal.padToTwo)(parsedDate));
       }
-
       _this.setState({
         view: newIso
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref3) {
       var iso = _ref3.iso;
-
       _this.setState({
         inputValue: '',
         isOpen: false,
@@ -199,7 +156,6 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         view: iso,
         value: iso
       });
-
       _this.props.onChange(iso);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function () {
@@ -221,14 +177,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           isFocused: false
         });
       }
-
       _this.props.onBlur(event);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectFocus", function (event) {
       var _this$getSafeState = _this.getSafeState(),
-          clearingFromIcon = _this$getSafeState.clearingFromIcon,
-          value = _this$getSafeState.value;
-
+        clearingFromIcon = _this$getSafeState.clearingFromIcon,
+        value = _this$getSafeState.value;
       if (clearingFromIcon) {
         // Don't open menu if focussing after the user has clicked clear
         _this.setState({
@@ -241,16 +195,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           isFocused: true
         });
       }
-
       _this.props.onFocus(event);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectInput", function (event) {
       var value = event.target.value;
-
       if (value) {
-        var parsed = _this.parseDate(value); // Only try to set the date if we have month & day
-
-
+        var parsed = _this.parseDate(value);
+        // Only try to set the date if we have month & day
         if (parsed && (0, _dateFns.isValid)(parsed)) {
           // We format the parsed date to YYYY-MM-DD here because
           // this is the format expected by the @atlaskit/calendar component
@@ -259,54 +210,53 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           });
         }
       }
-
       _this.setState({
         isOpen: true
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeView", function (view) {
+      // If view has a year that is greater than 9999, default to today's date
+      var yearIsOverLimit = view.match(/^\d{5,}/);
+      if (yearIsOverLimit) {
+        var today = new Date();
+        var year = today.getFullYear();
+        var month = (today.getMonth() + 1).toString().padStart(2, '0');
+        var day = today.getDate().toString().padStart(2, '0');
+        return "".concat(year, "-").concat(month, "-").concat(day);
+      }
+      return view;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectKeyDown", function (event) {
       var _this$getSafeState2 = _this.getSafeState(),
-          view = _this$getSafeState2.view,
-          selectedValue = _this$getSafeState2.selectedValue;
-
+        view = _this$getSafeState2.view,
+        selectedValue = _this$getSafeState2.selectedValue;
       var keyPressed = event.key.toLowerCase();
-
       switch (keyPressed) {
         case 'arrowup':
         case 'arrowdown':
           if (_this.calendarRef) {
             event.preventDefault();
             var key = keyPressed === 'arrowup' ? 'up' : 'down';
-
             _this.calendarRef.navigate(key);
           }
-
           _this.setState({
             isOpen: true
           });
-
           break;
-
         case 'arrowleft':
         case 'arrowright':
           if (_this.calendarRef) {
             event.preventDefault();
-
             var _key = keyPressed === 'arrowleft' ? 'left' : 'right';
-
             _this.calendarRef.navigate(_key);
           }
-
           break;
-
         case 'escape':
         case 'tab':
           _this.setState({
             isOpen: false
           });
-
           break;
-
         case 'backspace':
         case 'delete':
           if (selectedValue && event.target instanceof HTMLInputElement && event.target.value.length < 1) {
@@ -315,40 +265,34 @@ var DatePicker = /*#__PURE__*/function (_Component) {
               clearingFromIcon: false
             });
           }
-
           break;
-
         case 'enter':
           if (!_this.state.isOpen) {
             return;
-          } // Prevent form submission when a date is selected
+          }
+          // Prevent form submission when a date is selected
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
-
-
           event.preventDefault();
-
           if (!_this.isDateDisabled(view)) {
             var _this$getSafeState3 = _this.getSafeState(),
-                _value = _this$getSafeState3.value;
-
-            var valueChanged = view !== _value;
-
+              _value = _this$getSafeState3.value;
+            // Get a safe `view` value in case the value exceeds the maximum
+            // allowed by ISO 8601
+            var safeView = _this.getSafeView(view);
+            var valueChanged = safeView !== _value;
             _this.setState({
               inputValue: '',
               isOpen: false,
-              selectedValue: view,
-              value: view,
-              view: view
+              selectedValue: safeView,
+              value: safeView,
+              view: safeView
             });
-
             if (valueChanged) {
-              _this.props.onChange(view);
+              _this.props.onChange(safeView);
             }
           }
-
           break;
-
         default:
           break;
       }
@@ -359,15 +303,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         value: '',
         view: _this.props.defaultValue || (0, _dateFns.format)(new Date(), (0, _utils.convertTokens)('YYYY-MM-DD'))
       };
-
       if (!_this.props.hideIcon) {
         changedState = _objectSpread(_objectSpread({}, changedState), {}, {
           clearingFromIcon: true
         });
       }
-
       _this.setState(changedState);
-
       _this.props.onChange('');
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectChange", function (value, action) {
@@ -382,71 +323,58 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleInputChange", function (inputValue, actionMeta) {
       var onInputChange = _this.props.selectProps.onInputChange;
-
       if (onInputChange) {
         onInputChange(inputValue, actionMeta);
       }
-
       _this.setState({
         inputValue: inputValue
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getContainerRef", function (ref) {
       var oldRef = _this.containerRef;
-      _this.containerRef = ref; // Cause a re-render if we're getting the container ref for the first time
+      _this.containerRef = ref;
+      // Cause a re-render if we're getting the container ref for the first time
       // as the layered menu requires it for dimension calculation
-
       if (oldRef == null && ref != null) {
         _this.forceUpdate();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "parseDate", function (date) {
       var _this$props = _this.props,
-          parseInputValue = _this$props.parseInputValue,
-          dateFormat = _this$props.dateFormat;
-
+        parseInputValue = _this$props.parseInputValue,
+        dateFormat = _this$props.dateFormat;
       if (parseInputValue) {
         return parseInputValue(date, dateFormat || _internal.defaultDateFormat);
       }
-
       var _this$getSafeState4 = _this.getSafeState(),
-          l10n = _this$getSafeState4.l10n;
-
+        l10n = _this$getSafeState4.l10n;
       return l10n.parseDate(date);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatDate", function (value) {
       var _this$props2 = _this.props,
-          formatDisplayLabel = _this$props2.formatDisplayLabel,
-          dateFormat = _this$props2.dateFormat;
-
+        formatDisplayLabel = _this$props2.formatDisplayLabel,
+        dateFormat = _this$props2.dateFormat;
       var _this$getSafeState5 = _this.getSafeState(),
-          l10n = _this$getSafeState5.l10n;
-
+        l10n = _this$getSafeState5.l10n;
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || _internal.defaultDateFormat);
       }
-
       var date = (0, _dateFns.parseISO)(value);
       return dateFormat ? (0, _dateFns.format)(date, (0, _utils.convertTokens)(dateFormat)) : l10n.formatDate(date);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPlaceholder", function () {
       var placeholder = _this.props.placeholder;
-
       if (placeholder) {
         return placeholder;
       }
-
       var _this$getSafeState6 = _this.getSafeState(),
-          l10n = _this$getSafeState6.l10n;
-
+        l10n = _this$getSafeState6.l10n;
       return l10n.formatDate(_internal.placeholderDatetime);
     });
-
     var _getDateObj = getDateObj(new Date()),
-        day = _getDateObj.day,
-        _month = _getDateObj.month,
-        _year = _getDateObj.year;
-
+      _day = _getDateObj.day,
+      _month = _getDateObj.month,
+      _year = _getDateObj.year;
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
       isFocused: false,
@@ -454,12 +382,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       inputValue: _this.props.selectProps.inputValue,
       selectedValue: _this.props.value || _this.props.defaultValue,
       value: _this.props.defaultValue,
-      view: _this.props.value || _this.props.defaultValue || "".concat(_year, "-").concat((0, _internal.padToTwo)(_month), "-").concat((0, _internal.padToTwo)(day)),
+      view: _this.props.value || _this.props.defaultValue || "".concat(_year, "-").concat((0, _internal.padToTwo)(_month), "-").concat((0, _internal.padToTwo)(_day)),
       l10n: (0, _locale.createLocalizationProvider)(_this.props.locale)
     };
     return _this;
   }
-
   (0, _createClass2.default)(DatePicker, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -468,54 +395,51 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           l10n: (0, _locale.createLocalizationProvider)(nextProps.locale)
         });
       }
-    } // All state needs to be accessed via this function so that the state is mapped from props
-    // correctly to allow controlled/uncontrolled usage.
+    }
 
+    // All state needs to be accessed via this function so that the state is mapped from props
+    // correctly to allow controlled/uncontrolled usage.
   }, {
     key: "render",
     value: function render() {
       var _this$props3 = this.props,
-          appearance = _this$props3.appearance,
-          autoFocus = _this$props3.autoFocus,
-          disabled = _this$props3.disabled,
-          hideIcon = _this$props3.hideIcon,
-          icon = _this$props3.icon,
-          id = _this$props3.id,
-          innerProps = _this$props3.innerProps,
-          isDisabled = _this$props3.isDisabled,
-          disabledDateFilter = _this$props3.disabledDateFilter,
-          maxDate = _this$props3.maxDate,
-          minDate = _this$props3.minDate,
-          isInvalid = _this$props3.isInvalid,
-          name = _this$props3.name,
-          nextMonthLabel = _this$props3.nextMonthLabel,
-          previousMonthLabel = _this$props3.previousMonthLabel,
-          selectProps = _this$props3.selectProps,
-          spacing = _this$props3.spacing,
-          locale = _this$props3.locale,
-          testId = _this$props3.testId,
-          weekStartDay = _this$props3.weekStartDay;
+        appearance = _this$props3.appearance,
+        autoFocus = _this$props3.autoFocus,
+        disabled = _this$props3.disabled,
+        hideIcon = _this$props3.hideIcon,
+        icon = _this$props3.icon,
+        id = _this$props3.id,
+        innerProps = _this$props3.innerProps,
+        isDisabled = _this$props3.isDisabled,
+        disabledDateFilter = _this$props3.disabledDateFilter,
+        maxDate = _this$props3.maxDate,
+        minDate = _this$props3.minDate,
+        isInvalid = _this$props3.isInvalid,
+        name = _this$props3.name,
+        nextMonthLabel = _this$props3.nextMonthLabel,
+        previousMonthLabel = _this$props3.previousMonthLabel,
+        selectProps = _this$props3.selectProps,
+        spacing = _this$props3.spacing,
+        locale = _this$props3.locale,
+        testId = _this$props3.testId,
+        weekStartDay = _this$props3.weekStartDay;
       var ICON_PADDING = 2;
-
       var _this$getSafeState7 = this.getSafeState(),
-          value = _this$getSafeState7.value,
-          view = _this$getSafeState7.view,
-          isOpen = _this$getSafeState7.isOpen,
-          inputValue = _this$getSafeState7.inputValue;
-
+        value = _this$getSafeState7.value,
+        view = _this$getSafeState7.view,
+        isOpen = _this$getSafeState7.isOpen,
+        inputValue = _this$getSafeState7.inputValue;
       var menuIsOpen = isOpen && !isDisabled;
       var showClearIndicator = Boolean((value || inputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
-
       var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
         Menu: Menu
       }, !showClearIndicator && {
         ClearIndicator: _internal.EmptyComponent
       });
-
       var _selectProps$styles = selectProps.styles,
-          selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
+        selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
       var disabledStyle = isDisabled ? {
         pointerEvents: 'none',
         color: "var(--ds-icon-disabled, inherit)"
@@ -589,10 +513,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }]);
   return DatePicker;
 }(_react.Component);
-
 exports.DatePickerWithoutAnalytics = DatePicker;
 (0, _defineProperty2.default)(DatePicker, "defaultProps", datePickerDefaultProps);
-
 var _default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'datePicker',
   packageName: packageName,
@@ -608,5 +530,4 @@ var _default = (0, _analyticsNext.withAnalyticsContext)({
     }
   })
 })(DatePicker));
-
 exports.default = _default;