@atlaskit/datetime-picker 12.3.6 → 12.3.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/datetime-picker
 
+## 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

@@ -68,7 +68,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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.7";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -264,6 +264,20 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         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,
@@ -330,20 +344,24 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
           if (!_this.isDateDisabled(view)) {
             var _this$getSafeState3 = _this.getSafeState(),
-                _value = _this$getSafeState3.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 = view !== _value;
+            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);
             }
           }
 
@@ -443,7 +461,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     });
 
     var _getDateObj = getDateObj(new Date()),
-        day = _getDateObj.day,
+        _day = _getDateObj.day,
         _month = _getDateObj.month,
         _year = _getDateObj.year;
 
@@ -454,7 +472,7 @@ 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;

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

@@ -58,7 +58,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.6";
+var packageVersion = "12.3.7";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _react2.css)({

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

@@ -65,7 +65,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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.7";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.3.6",
+	"version": "12.3.7",
 	"sideEffects": false
 }

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

@@ -20,7 +20,7 @@ import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.6";
+const packageVersion = "12.3.7";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -214,6 +214,21 @@ class DatePicker extends Component {
       });
     });
 
+    _defineProperty(this, "getSafeView", view => {
+      // If view has a year that is greater than 9999, default to today's date
+      const yearIsOverLimit = view.match(/^\d{5,}/);
+
+      if (yearIsOverLimit) {
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = (today.getMonth() + 1).toString().padStart(2, '0');
+        const day = today.getDate().toString().padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      }
+
+      return view;
+    });
+
     _defineProperty(this, "onSelectKeyDown", event => {
       const {
         view,
@@ -276,18 +291,21 @@ class DatePicker extends Component {
           if (!this.isDateDisabled(view)) {
             const {
               value
-            } = this.getSafeState();
-            const valueChanged = view !== value;
+            } = this.getSafeState(); // Get a safe `view` value in case the value exceeds the maximum
+            // allowed by ISO 8601
+
+            const safeView = this.getSafeView(view);
+            const valueChanged = safeView !== value;
             this.setState({
               inputValue: '',
               isOpen: false,
-              selectedValue: view,
-              value: view,
-              view
+              selectedValue: safeView,
+              value: safeView,
+              view: safeView
             });
 
             if (valueChanged) {
-              this.props.onChange(view);
+              this.props.onChange(safeView);
             }
           }
 
@@ -400,7 +418,7 @@ class DatePicker extends Component {
     });
 
     const {
-      day,
+      day: _day,
       month: _month,
       year: _year
     } = getDateObj(new Date());
@@ -411,7 +429,7 @@ class DatePicker extends Component {
       inputValue: this.props.selectProps.inputValue,
       selectedValue: this.props.value || this.props.defaultValue,
       value: this.props.defaultValue,
-      view: this.props.value || this.props.defaultValue || `${_year}-${padToTwo(_month)}-${padToTwo(day)}`,
+      view: this.props.value || this.props.defaultValue || `${_year}-${padToTwo(_month)}-${padToTwo(_day)}`,
       l10n: createLocalizationProvider(this.props.locale)
     };
   }

package/dist/es2019/components/date-time-picker.js

@@ -19,7 +19,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.6";
+const packageVersion = "12.3.7";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({

package/dist/es2019/components/time-picker.js

@@ -15,7 +15,7 @@ import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.6";
+const packageVersion = "12.3.7";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.3.6",
+	"version": "12.3.7",
 	"sideEffects": false
 }

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

@@ -35,7 +35,7 @@ import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.6";
+var packageVersion = "12.3.7";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -243,6 +243,21 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_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;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onSelectKeyDown", function (event) {
       var _this$getSafeState2 = _this.getSafeState(),
           view = _this$getSafeState2.view,
@@ -309,20 +324,24 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
           if (!_this.isDateDisabled(view)) {
             var _this$getSafeState3 = _this.getSafeState(),
-                _value = _this$getSafeState3.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 = view !== _value;
+            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);
             }
           }
 
@@ -430,7 +449,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     });
 
     var _getDateObj = getDateObj(new Date()),
-        day = _getDateObj.day,
+        _day = _getDateObj.day,
         _month = _getDateObj.month,
         _year = _getDateObj.year;
 
@@ -441,7 +460,7 @@ 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(padToTwo(_month), "-").concat(padToTwo(day)),
+      view: _this.props.value || _this.props.defaultValue || "".concat(_year, "-").concat(padToTwo(_month), "-").concat(padToTwo(_day)),
       l10n: createLocalizationProvider(_this.props.locale)
     };
     return _this;

package/dist/esm/components/date-time-picker.js

@@ -33,7 +33,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.6";
+var packageVersion = "12.3.7";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({

package/dist/esm/components/time-picker.js

@@ -32,7 +32,7 @@ import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.6";
+var packageVersion = "12.3.7";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.3.6",
+	"version": "12.3.7",
 	"sideEffects": false
 }

package/dist/types/components/date-picker.d.ts

@@ -239,6 +239,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onSelectInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    getSafeView: (view: string) => string;
     onSelectKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onClear: () => void;
     onSelectChange: (value: ValueType<OptionType>, action: ActionMeta) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.3.6",
+  "version": "12.3.7",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -518,3 +519,15 @@ type TimePickerProps_2 = typeof timePickerDefaultProps & TimePickerProps;
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->