@atlaskit/datetime-picker 12.3.8 → 12.3.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/datetime-picker
 
+## 12.3.10
+
+### Patch Changes
+
+- [`1fc7949b336`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1fc7949b336) - [ux] Fixes a bug where the background for the calendar element was incorrectly set to 'elevation.surface'
+
+## 12.3.9
+
+### Patch Changes
+
+- [`5546747df1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5546747df1e) - Refactoring of code to clean tech debt and make future maintenance easier
+- Updated dependencies
+
 ## 12.3.8
 
 ### Patch Changes

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

@@ -36,24 +36,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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.8";
+var packageVersion = "12.3.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
-function getDateObj(date) {
-  return {
+function getValidDate(iso) {
+  var date = (0, _dateFns.parseISO)(iso);
+  return (0, _dateFns.isValid)(date) ? {
     day: date.getDate(),
     month: date.getMonth() + 1,
     year: date.getFullYear()
-  };
+  } : {};
 }
-function getValidDate(iso) {
-  var date = (0, _dateFns.parseISO)(iso);
-  return (0, _dateFns.isValid)(date) ? getDateObj(date) : {};
+function getShortISOString(date) {
+  return (0, _dateFns.format)(date, (0, _utils.convertTokens)('YYYY-MM-DD'));
 }
 var menuStyles = (0, _react2.css)({
   zIndex: _constants.layers.dialog(),
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20, ")"),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   overflow: 'hidden'
@@ -144,16 +144,15 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         newIso = "".concat(year, "-").concat((0, _internal.padToTwo)(parsedMonth), "-").concat((0, _internal.padToTwo)(parsedDate));
       }
       _this.setState({
-        view: newIso
+        calendarValue: newIso
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref3) {
       var iso = _ref3.iso;
       _this.setState({
-        inputValue: '',
+        selectInputValue: '',
         isOpen: false,
-        selectedValue: iso,
-        view: iso,
+        calendarValue: iso,
         value: iso
       });
       _this.props.onChange(iso);
@@ -191,13 +190,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       } else {
         _this.setState({
           isOpen: true,
-          view: value,
+          calendarValue: value,
           isFocused: true
         });
       }
       _this.props.onFocus(event);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectInput", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTextInput", function (event) {
       var value = event.target.value;
       if (value) {
         var parsed = _this.parseDate(value);
@@ -206,7 +205,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           // We format the parsed date to YYYY-MM-DD here because
           // this is the format expected by the @atlaskit/calendar component
           _this.setState({
-            view: (0, _dateFns.format)(parsed, (0, _utils.convertTokens)('YYYY-MM-DD'))
+            calendarValue: getShortISOString(parsed)
           });
         }
       }
@@ -214,9 +213,10 @@ 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,}/);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeCalendarValue", function (calendarValue) {
+      // If `calendarValue` has a year that is greater than 9999, default to
+      // today's date
+      var yearIsOverLimit = calendarValue.match(/^\d{5,}/);
       if (yearIsOverLimit) {
         var today = new Date();
         var year = today.getFullYear();
@@ -224,12 +224,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         var day = today.getDate().toString().padStart(2, '0');
         return "".concat(year, "-").concat(month, "-").concat(day);
       }
-      return view;
+      return calendarValue;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectKeyDown", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
       var _this$getSafeState2 = _this.getSafeState(),
-        view = _this$getSafeState2.view,
-        selectedValue = _this$getSafeState2.selectedValue;
+        value = _this$getSafeState2.value,
+        calendarValue = _this$getSafeState2.calendarValue;
       var keyPressed = event.key.toLowerCase();
       switch (keyPressed) {
         case 'arrowup':
@@ -259,7 +259,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           break;
         case 'backspace':
         case 'delete':
-          if (selectedValue && event.target instanceof HTMLInputElement && event.target.value.length < 1) {
+          if (value && event.target instanceof HTMLInputElement && event.target.value.length < 1) {
             // If being cleared from keyboard, don't change behaviour
             _this.setState({
               clearingFromIcon: false
@@ -274,22 +274,21 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
           event.preventDefault();
-          if (!_this.isDateDisabled(view)) {
+          if (!_this.isDateDisabled(calendarValue)) {
             var _this$getSafeState3 = _this.getSafeState(),
               _value = _this$getSafeState3.value;
-            // Get a safe `view` value in case the value exceeds the maximum
+            // Get a safe `calendarValue` in case the value exceeds the maximum
             // allowed by ISO 8601
-            var safeView = _this.getSafeView(view);
-            var valueChanged = safeView !== _value;
+            var safeCalendarValue = _this.getSafeCalendarValue(calendarValue);
+            var valueChanged = safeCalendarValue !== _value;
             _this.setState({
-              inputValue: '',
+              selectInputValue: '',
               isOpen: false,
-              selectedValue: safeView,
-              value: safeView,
-              view: safeView
+              value: safeCalendarValue,
+              calendarValue: safeCalendarValue
             });
             if (valueChanged) {
-              _this.props.onChange(safeView);
+              _this.props.onChange(safeCalendarValue);
             }
           }
           break;
@@ -299,9 +298,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
       var changedState = {
-        selectedValue: '',
         value: '',
-        view: _this.props.defaultValue || (0, _dateFns.format)(new Date(), (0, _utils.convertTokens)('YYYY-MM-DD'))
+        calendarValue: _this.props.defaultValue || getShortISOString(new Date())
       };
       if (!_this.props.hideIcon) {
         changedState = _objectSpread(_objectSpread({}, changedState), {}, {
@@ -321,13 +319,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "refCalendar", function (ref) {
       _this.calendarRef = ref;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleInputChange", function (inputValue, actionMeta) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectInputChange", function (selectInputValue, actionMeta) {
       var onInputChange = _this.props.selectProps.onInputChange;
       if (onInputChange) {
-        onInputChange(inputValue, actionMeta);
+        onInputChange(selectInputValue, actionMeta);
       }
       _this.setState({
-        inputValue: inputValue
+        selectInputValue: selectInputValue
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getContainerRef", function (ref) {
@@ -371,18 +369,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         l10n = _this$getSafeState6.l10n;
       return l10n.formatDate(_internal.placeholderDatetime);
     });
-    var _getDateObj = getDateObj(new Date()),
-      _day = _getDateObj.day,
-      _month = _getDateObj.month,
-      _year = _getDateObj.year;
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
       isFocused: false,
       clearingFromIcon: false,
-      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)),
+      selectInputValue: _this.props.selectProps.inputValue,
+      value: _this.props.value || _this.props.defaultValue,
+      calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
       l10n: (0, _locale.createLocalizationProvider)(_this.props.locale)
     };
     return _this;
@@ -426,11 +419,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       var ICON_PADDING = 2;
       var _this$getSafeState7 = this.getSafeState(),
         value = _this$getSafeState7.value,
-        view = _this$getSafeState7.view,
+        calendarValue = _this$getSafeState7.calendarValue,
         isOpen = _this$getSafeState7.isOpen,
-        inputValue = _this$getSafeState7.inputValue;
+        selectInputValue = _this$getSafeState7.selectInputValue;
       var menuIsOpen = isOpen && !isDisabled;
-      var showClearIndicator = Boolean((value || inputValue) && !hideIcon);
+      var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
       var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
@@ -451,8 +444,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         calendarDisabledDateFilter: disabledDateFilter,
         calendarMaxDate: maxDate,
         calendarMinDate: minDate,
-        calendarValue: value && (0, _dateFns.format)((0, _dateFns.parseISO)(value), (0, _utils.convertTokens)('YYYY-MM-DD')),
-        calendarView: view,
+        calendarValue: value && getShortISOString((0, _dateFns.parseISO)(value)),
+        calendarView: calendarValue,
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
@@ -463,8 +456,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       return (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
         role: "presentation",
         onClick: this.onInputClick,
-        onInput: this.onSelectInput,
-        onKeyDown: this.onSelectKeyDown,
+        onInput: this.onTextInput,
+        onKeyDown: this.onInputKeyDown,
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
       }), (0, _react2.jsx)("input", {
@@ -483,8 +476,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         onBlur: this.onSelectBlur,
         onFocus: this.onSelectFocus,
-        inputValue: inputValue,
-        onInputChange: this.handleInputChange,
+        inputValue: selectInputValue,
+        onInputChange: this.handleSelectInputChange,
         components: selectComponents,
         onChange: this.onSelectChange,
         styles: (0, _select.mergeStyles)(selectStyles, {

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

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.8";
+var packageVersion = "12.3.10";
 
 /* eslint-disable react/no-unused-prop-types */
 

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

@@ -35,7 +35,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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.8";
+var packageVersion = "12.3.10";
 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.8",
+	"version": "12.3.10",
 	"sideEffects": false
 }

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

@@ -12,30 +12,30 @@ import Calendar from '@atlaskit/calendar';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { N20, N50A, N60A } from '@atlaskit/theme/colors';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.8";
+const packageVersion = "12.3.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
-function getDateObj(date) {
-  return {
+function getValidDate(iso) {
+  const date = parseISO(iso);
+  return isValid(date) ? {
     day: date.getDate(),
     month: date.getMonth() + 1,
     year: date.getFullYear()
-  };
+  } : {};
 }
-function getValidDate(iso) {
-  const date = parseISO(iso);
-  return isValid(date) ? getDateObj(date) : {};
+function getShortISOString(date) {
+  return format(date, convertTokens('YYYY-MM-DD'));
 }
 const menuStyles = css({
   zIndex: layers.dialog(),
-  backgroundColor: `var(--ds-surface-overlay, ${N20})`,
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: `${borderRadius()}px`,
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   overflow: 'hidden'
@@ -121,17 +121,16 @@ class DatePicker extends Component {
         newIso = `${year}-${padToTwo(parsedMonth)}-${padToTwo(parsedDate)}`;
       }
       this.setState({
-        view: newIso
+        calendarValue: newIso
       });
     });
     _defineProperty(this, "onCalendarSelect", ({
       iso
     }) => {
       this.setState({
-        inputValue: '',
+        selectInputValue: '',
         isOpen: false,
-        selectedValue: iso,
-        view: iso,
+        calendarValue: iso,
         value: iso
       });
       this.props.onChange(iso);
@@ -170,13 +169,13 @@ class DatePicker extends Component {
       } else {
         this.setState({
           isOpen: true,
-          view: value,
+          calendarValue: value,
           isFocused: true
         });
       }
       this.props.onFocus(event);
     });
-    _defineProperty(this, "onSelectInput", event => {
+    _defineProperty(this, "onTextInput", event => {
       const value = event.target.value;
       if (value) {
         const parsed = this.parseDate(value);
@@ -185,7 +184,7 @@ class DatePicker extends Component {
           // We format the parsed date to YYYY-MM-DD here because
           // this is the format expected by the @atlaskit/calendar component
           this.setState({
-            view: format(parsed, convertTokens('YYYY-MM-DD'))
+            calendarValue: getShortISOString(parsed)
           });
         }
       }
@@ -193,9 +192,10 @@ class DatePicker extends Component {
         isOpen: true
       });
     });
-    _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,}/);
+    _defineProperty(this, "getSafeCalendarValue", calendarValue => {
+      // If `calendarValue` has a year that is greater than 9999, default to
+      // today's date
+      const yearIsOverLimit = calendarValue.match(/^\d{5,}/);
       if (yearIsOverLimit) {
         const today = new Date();
         const year = today.getFullYear();
@@ -203,12 +203,12 @@ class DatePicker extends Component {
         const day = today.getDate().toString().padStart(2, '0');
         return `${year}-${month}-${day}`;
       }
-      return view;
+      return calendarValue;
     });
-    _defineProperty(this, "onSelectKeyDown", event => {
+    _defineProperty(this, "onInputKeyDown", event => {
       const {
-        view,
-        selectedValue
+        value,
+        calendarValue
       } = this.getSafeState();
       const keyPressed = event.key.toLowerCase();
       switch (keyPressed) {
@@ -239,7 +239,7 @@ class DatePicker extends Component {
           break;
         case 'backspace':
         case 'delete':
-          if (selectedValue && event.target instanceof HTMLInputElement && event.target.value.length < 1) {
+          if (value && event.target instanceof HTMLInputElement && event.target.value.length < 1) {
             // If being cleared from keyboard, don't change behaviour
             this.setState({
               clearingFromIcon: false
@@ -254,23 +254,22 @@ class DatePicker extends Component {
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
           event.preventDefault();
-          if (!this.isDateDisabled(view)) {
+          if (!this.isDateDisabled(calendarValue)) {
             const {
               value
             } = this.getSafeState();
-            // Get a safe `view` value in case the value exceeds the maximum
+            // Get a safe `calendarValue` in case the value exceeds the maximum
             // allowed by ISO 8601
-            const safeView = this.getSafeView(view);
-            const valueChanged = safeView !== value;
+            const safeCalendarValue = this.getSafeCalendarValue(calendarValue);
+            const valueChanged = safeCalendarValue !== value;
             this.setState({
-              inputValue: '',
+              selectInputValue: '',
               isOpen: false,
-              selectedValue: safeView,
-              value: safeView,
-              view: safeView
+              value: safeCalendarValue,
+              calendarValue: safeCalendarValue
             });
             if (valueChanged) {
-              this.props.onChange(safeView);
+              this.props.onChange(safeCalendarValue);
             }
           }
           break;
@@ -280,9 +279,8 @@ class DatePicker extends Component {
     });
     _defineProperty(this, "onClear", () => {
       let changedState = {
-        selectedValue: '',
         value: '',
-        view: this.props.defaultValue || format(new Date(), convertTokens('YYYY-MM-DD'))
+        calendarValue: this.props.defaultValue || getShortISOString(new Date())
       };
       if (!this.props.hideIcon) {
         changedState = {
@@ -303,15 +301,15 @@ class DatePicker extends Component {
     _defineProperty(this, "refCalendar", ref => {
       this.calendarRef = ref;
     });
-    _defineProperty(this, "handleInputChange", (inputValue, actionMeta) => {
+    _defineProperty(this, "handleSelectInputChange", (selectInputValue, actionMeta) => {
       const {
         onInputChange
       } = this.props.selectProps;
       if (onInputChange) {
-        onInputChange(inputValue, actionMeta);
+        onInputChange(selectInputValue, actionMeta);
       }
       this.setState({
-        inputValue
+        selectInputValue
       });
     });
     _defineProperty(this, "getContainerRef", ref => {
@@ -362,19 +360,13 @@ class DatePicker extends Component {
       } = this.getSafeState();
       return l10n.formatDate(placeholderDatetime);
     });
-    const {
-      day: _day,
-      month: _month,
-      year: _year
-    } = getDateObj(new Date());
     this.state = {
       isOpen: this.props.defaultIsOpen,
       isFocused: false,
       clearingFromIcon: false,
-      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)}`,
+      selectInputValue: this.props.selectProps.inputValue,
+      value: this.props.value || this.props.defaultValue,
+      calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
       l10n: createLocalizationProvider(this.props.locale)
     };
   }
@@ -415,12 +407,12 @@ class DatePicker extends Component {
     const ICON_PADDING = 2;
     const {
       value,
-      view,
+      calendarValue,
       isOpen,
-      inputValue
+      selectInputValue
     } = this.getSafeState();
     const menuIsOpen = isOpen && !isDisabled;
-    const showClearIndicator = Boolean((value || inputValue) && !hideIcon);
+    const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
     const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
     const selectComponents = {
       DropdownIndicator: dropDownIcon,
@@ -443,8 +435,8 @@ class DatePicker extends Component {
       calendarDisabledDateFilter: disabledDateFilter,
       calendarMaxDate: maxDate,
       calendarMinDate: minDate,
-      calendarValue: value && format(parseISO(value), convertTokens('YYYY-MM-DD')),
-      calendarView: view,
+      calendarValue: value && getShortISOString(parseISO(value)),
+      calendarView: calendarValue,
       onCalendarChange: this.onCalendarChange,
       onCalendarSelect: this.onCalendarSelect,
       calendarLocale: locale,
@@ -455,8 +447,8 @@ class DatePicker extends Component {
     return jsx("div", _extends({}, innerProps, {
       role: "presentation",
       onClick: this.onInputClick,
-      onInput: this.onSelectInput,
-      onKeyDown: this.onSelectKeyDown,
+      onInput: this.onTextInput,
+      onKeyDown: this.onInputKeyDown,
       ref: this.getContainerRef,
       "data-testid": testId && `${testId}--container`
     }), jsx("input", {
@@ -475,8 +467,8 @@ class DatePicker extends Component {
       isDisabled: isDisabled,
       onBlur: this.onSelectBlur,
       onFocus: this.onSelectFocus,
-      inputValue: inputValue,
-      onInputChange: this.handleInputChange,
+      inputValue: selectInputValue,
+      onInputChange: this.handleSelectInputChange,
       components: selectComponents,
       onChange: this.onSelectChange,
       styles: mergeStyles(selectStyles, {

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

@@ -17,7 +17,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.8";
+const packageVersion = "12.3.10";
 
 /* eslint-disable react/no-unused-prop-types */
 

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.8";
+const packageVersion = "12.3.10";
 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.8",
+	"version": "12.3.10",
 	"sideEffects": false
 }

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

@@ -23,30 +23,30 @@ import Calendar from '@atlaskit/calendar';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { N20, N50A, N60A } from '@atlaskit/theme/colors';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.8";
+var packageVersion = "12.3.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
-function getDateObj(date) {
-  return {
+function getValidDate(iso) {
+  var date = parseISO(iso);
+  return isValid(date) ? {
     day: date.getDate(),
     month: date.getMonth() + 1,
     year: date.getFullYear()
-  };
+  } : {};
 }
-function getValidDate(iso) {
-  var date = parseISO(iso);
-  return isValid(date) ? getDateObj(date) : {};
+function getShortISOString(date) {
+  return format(date, convertTokens('YYYY-MM-DD'));
 }
 var menuStyles = css({
   zIndex: layers.dialog(),
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N20, ")"),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "".concat(borderRadius(), "px"),
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   overflow: 'hidden'
@@ -137,16 +137,15 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         newIso = "".concat(year, "-").concat(padToTwo(parsedMonth), "-").concat(padToTwo(parsedDate));
       }
       _this.setState({
-        view: newIso
+        calendarValue: newIso
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (_ref3) {
       var iso = _ref3.iso;
       _this.setState({
-        inputValue: '',
+        selectInputValue: '',
         isOpen: false,
-        selectedValue: iso,
-        view: iso,
+        calendarValue: iso,
         value: iso
       });
       _this.props.onChange(iso);
@@ -184,13 +183,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       } else {
         _this.setState({
           isOpen: true,
-          view: value,
+          calendarValue: value,
           isFocused: true
         });
       }
       _this.props.onFocus(event);
     });
-    _defineProperty(_assertThisInitialized(_this), "onSelectInput", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onTextInput", function (event) {
       var value = event.target.value;
       if (value) {
         var parsed = _this.parseDate(value);
@@ -199,7 +198,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           // We format the parsed date to YYYY-MM-DD here because
           // this is the format expected by the @atlaskit/calendar component
           _this.setState({
-            view: format(parsed, convertTokens('YYYY-MM-DD'))
+            calendarValue: getShortISOString(parsed)
           });
         }
       }
@@ -207,9 +206,10 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         isOpen: true
       });
     });
-    _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,}/);
+    _defineProperty(_assertThisInitialized(_this), "getSafeCalendarValue", function (calendarValue) {
+      // If `calendarValue` has a year that is greater than 9999, default to
+      // today's date
+      var yearIsOverLimit = calendarValue.match(/^\d{5,}/);
       if (yearIsOverLimit) {
         var today = new Date();
         var year = today.getFullYear();
@@ -217,12 +217,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         var day = today.getDate().toString().padStart(2, '0');
         return "".concat(year, "-").concat(month, "-").concat(day);
       }
-      return view;
+      return calendarValue;
     });
-    _defineProperty(_assertThisInitialized(_this), "onSelectKeyDown", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
       var _this$getSafeState2 = _this.getSafeState(),
-        view = _this$getSafeState2.view,
-        selectedValue = _this$getSafeState2.selectedValue;
+        value = _this$getSafeState2.value,
+        calendarValue = _this$getSafeState2.calendarValue;
       var keyPressed = event.key.toLowerCase();
       switch (keyPressed) {
         case 'arrowup':
@@ -252,7 +252,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           break;
         case 'backspace':
         case 'delete':
-          if (selectedValue && event.target instanceof HTMLInputElement && event.target.value.length < 1) {
+          if (value && event.target instanceof HTMLInputElement && event.target.value.length < 1) {
             // If being cleared from keyboard, don't change behaviour
             _this.setState({
               clearingFromIcon: false
@@ -267,22 +267,21 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
           event.preventDefault();
-          if (!_this.isDateDisabled(view)) {
+          if (!_this.isDateDisabled(calendarValue)) {
             var _this$getSafeState3 = _this.getSafeState(),
               _value = _this$getSafeState3.value;
-            // Get a safe `view` value in case the value exceeds the maximum
+            // Get a safe `calendarValue` in case the value exceeds the maximum
             // allowed by ISO 8601
-            var safeView = _this.getSafeView(view);
-            var valueChanged = safeView !== _value;
+            var safeCalendarValue = _this.getSafeCalendarValue(calendarValue);
+            var valueChanged = safeCalendarValue !== _value;
             _this.setState({
-              inputValue: '',
+              selectInputValue: '',
               isOpen: false,
-              selectedValue: safeView,
-              value: safeView,
-              view: safeView
+              value: safeCalendarValue,
+              calendarValue: safeCalendarValue
             });
             if (valueChanged) {
-              _this.props.onChange(safeView);
+              _this.props.onChange(safeCalendarValue);
             }
           }
           break;
@@ -292,9 +291,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "onClear", function () {
       var changedState = {
-        selectedValue: '',
         value: '',
-        view: _this.props.defaultValue || format(new Date(), convertTokens('YYYY-MM-DD'))
+        calendarValue: _this.props.defaultValue || getShortISOString(new Date())
       };
       if (!_this.props.hideIcon) {
         changedState = _objectSpread(_objectSpread({}, changedState), {}, {
@@ -314,13 +312,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "refCalendar", function (ref) {
       _this.calendarRef = ref;
     });
-    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (inputValue, actionMeta) {
+    _defineProperty(_assertThisInitialized(_this), "handleSelectInputChange", function (selectInputValue, actionMeta) {
       var onInputChange = _this.props.selectProps.onInputChange;
       if (onInputChange) {
-        onInputChange(inputValue, actionMeta);
+        onInputChange(selectInputValue, actionMeta);
       }
       _this.setState({
-        inputValue: inputValue
+        selectInputValue: selectInputValue
       });
     });
     _defineProperty(_assertThisInitialized(_this), "getContainerRef", function (ref) {
@@ -364,18 +362,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         l10n = _this$getSafeState6.l10n;
       return l10n.formatDate(placeholderDatetime);
     });
-    var _getDateObj = getDateObj(new Date()),
-      _day = _getDateObj.day,
-      _month = _getDateObj.month,
-      _year = _getDateObj.year;
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
       isFocused: false,
       clearingFromIcon: false,
-      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)),
+      selectInputValue: _this.props.selectProps.inputValue,
+      value: _this.props.value || _this.props.defaultValue,
+      calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
       l10n: createLocalizationProvider(_this.props.locale)
     };
     return _this;
@@ -419,11 +412,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       var ICON_PADDING = 2;
       var _this$getSafeState7 = this.getSafeState(),
         value = _this$getSafeState7.value,
-        view = _this$getSafeState7.view,
+        calendarValue = _this$getSafeState7.calendarValue,
         isOpen = _this$getSafeState7.isOpen,
-        inputValue = _this$getSafeState7.inputValue;
+        selectInputValue = _this$getSafeState7.selectInputValue;
       var menuIsOpen = isOpen && !isDisabled;
-      var showClearIndicator = Boolean((value || inputValue) && !hideIcon);
+      var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
       var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
@@ -444,8 +437,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         calendarDisabledDateFilter: disabledDateFilter,
         calendarMaxDate: maxDate,
         calendarMinDate: minDate,
-        calendarValue: value && format(parseISO(value), convertTokens('YYYY-MM-DD')),
-        calendarView: view,
+        calendarValue: value && getShortISOString(parseISO(value)),
+        calendarView: calendarValue,
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
@@ -456,8 +449,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       return jsx("div", _extends({}, innerProps, {
         role: "presentation",
         onClick: this.onInputClick,
-        onInput: this.onSelectInput,
-        onKeyDown: this.onSelectKeyDown,
+        onInput: this.onTextInput,
+        onKeyDown: this.onInputKeyDown,
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
       }), jsx("input", {
@@ -476,8 +469,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         onBlur: this.onSelectBlur,
         onFocus: this.onSelectFocus,
-        inputValue: inputValue,
-        onInputChange: this.handleInputChange,
+        inputValue: selectInputValue,
+        onInputChange: this.handleSelectInputChange,
         components: selectComponents,
         onChange: this.onSelectChange,
         styles: mergeStyles(selectStyles, {

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

@@ -27,7 +27,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.8";
+var packageVersion = "12.3.10";
 
 /* eslint-disable react/no-unused-prop-types */
 

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

@@ -28,7 +28,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.8";
+var packageVersion = "12.3.10";
 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.8",
+	"version": "12.3.10",
 	"sideEffects": false
 }

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

@@ -163,12 +163,8 @@ interface State {
     isFocused: boolean;
     clearingFromIcon: boolean;
     value: string;
-    /**
-     * Value to be shown in the calendar as selected.
-     */
-    selectedValue: string;
-    view: string;
-    inputValue: string;
+    calendarValue: string;
+    selectInputValue: string;
     l10n: LocalizationProvider;
 }
 declare const datePickerDefaultProps: {
@@ -224,8 +220,8 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         value: string;
         isFocused: boolean;
         clearingFromIcon: boolean;
-        selectedValue: string;
-        view: string;
+        calendarValue: string;
+        selectInputValue: string;
         l10n: LocalizationProvider;
     };
     isDateDisabled: (date: string) => boolean;
@@ -238,13 +234,13 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     onInputClick: () => void;
     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;
+    onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    getSafeCalendarValue: (calendarValue: string) => string;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onClear: () => void;
     onSelectChange: (value: ValueType<OptionType>, action: ActionMeta) => void;
     refCalendar: (ref: CalendarRef | null) => void;
-    handleInputChange: (inputValue: string, actionMeta: {}) => void;
+    handleSelectInputChange: (selectInputValue: string, actionMeta: {}) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
     /**
      * There are two props that can change how the date is parsed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.3.8",
+  "version": "12.3.10",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,6 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -25,7 +24,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/calendar": "^13.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
@@ -33,7 +32,7 @@
     "@atlaskit/popper": "^5.4.0",
     "@atlaskit/select": "^16.1.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -79,7 +78,9 @@
         "emotion",
         "emotion"
       ],
-      "theming": "tokens",
+      "design-tokens": [
+        "color"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },