@atlaskit/datetime-picker 11.1.10 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @atlaskit/datetime-picker
 
+## 12.1.0
+
+### Minor Changes
+
+- [`58d4cd75f7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58d4cd75f7a) - Removed deprecated hideIcon prop from DateTimePicker because it is unused and serves no functionality.
+  Removed the deprecation notice for the formatDisplayLabel prop in TimePicker
+
+### Patch Changes
+
+- [`c3a1b950d49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3a1b950d49) - DSP-3301 specifies label to input id
+- [`c2f866d31d1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2f866d31d1) - [ux] Fix timepicker clear icon alignment
+- [`7566be18f20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7566be18f20) - [ux] Time picker no longer loses focus to the document when tabbing through it in a popup.
+- [`574b6c8ba7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/574b6c8ba7f) - [ux] DSP-2987 Add code to catch console error
+- Updated dependencies
+
+## 12.0.0
+
+### Major Changes
+
+- [`27d4f1e7121`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27d4f1e7121) - [ux] Updating tokens
+- [`d7542d1a7c2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7542d1a7c2) - [ux] Update Tokens in the code with those that are a better fit. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+- [`c19fb116172`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c19fb116172) - [ux] Update Tokens in the code with those that are a better fit. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Minor Changes
+
+- [`6f7a4353204`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f7a4353204) - Added ability to provide custom aria-labels for next- and previous-month buttons using `nextMonthLabel` and `previousMonthLabel`
+
+### Patch Changes
+
+- [`3ec9ed2c4d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ec9ed2c4d0) - Fixed handling of custom times that included whitespace characters
+- Updated dependencies
+
+## 11.1.11
+
+### Patch Changes
+
+- [`558cc136503`](https://bitbucket.org/atlassian/atlassian-frontend/commits/558cc136503) - Bump moment dependency version
+- [`e7438659c2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7438659c2e) - Updated dependency '@types/react-select' to fix type error
+- Updated dependencies
+
 ## 11.1.10
 
 ### Patch Changes

package/dist/cjs/components/DatePicker.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 = "11.1.10";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -104,13 +104,16 @@ var Menu = function Menu(_ref) {
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
       maxDate: selectProps.calendarMaxDate,
+      nextMonthLabel: selectProps.nextMonthLabel,
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
+      previousMonthLabel: selectProps.previousMonthLabel,
       calendarRef: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
-      weekStartDay: selectProps.calendarWeekStartDay
+      weekStartDay: selectProps.calendarWeekStartDay,
+      tabIndex: -1
     }))),
     testId: selectProps.testId
   });
@@ -477,12 +480,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           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 BORDER_WIDTH = 2;
       var ICON_PADDING = 2;
 
       var _this$getSafeState6 = this.getSafeState(),
@@ -521,7 +525,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
-        calendarWeekStartDay: weekStartDay
+        calendarWeekStartDay: weekStartDay,
+        nextMonthLabel: nextMonthLabel,
+        previousMonthLabel: previousMonthLabel
       };
       return (0, _core.jsx)("div", (0, _extends2.default)({}, innerProps, {
         role: "presentation",
@@ -531,6 +537,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
       }), (0, _core.jsx)("input", {
+        id: selectProps.inputId,
         name: name,
         type: "hidden",
         value: value,
@@ -555,7 +562,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           indicatorsContainer: function indicatorsContainer(base) {
             return _objectSpread(_objectSpread({}, base), {}, {
               paddingLeft: ICON_PADDING,
-              paddingRight: (0, _constants.gridSize)() - BORDER_WIDTH
+              paddingRight: (0, _constants.gridSize)() - ICON_PADDING
             });
           }
         }),

package/dist/cjs/components/DateTimePicker.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 = "11.1.10";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _core.css)({
@@ -76,13 +76,13 @@ var subtleBgStyles = (0, _core.css)({
 });
 var hoverStyles = (0, _core.css)({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(_colors.N30, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
     borderColor: "var(--ds-border, ".concat(_colors.N30, ")")
   }
 });
 var isInvalidHoverStyles = (0, _core.css)({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N0, ")"),
     borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
   }
 });
@@ -258,9 +258,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       });
 
       if (dateValue && timeValue) {
-        var value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
+        var _value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
 
-        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
+        var _this$parseValue = this.parseValue(_value, dateValue, timeValue, zoneValue),
             parsedZone = _this$parseValue.zoneValue;
 
         var valueWithValidZone = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, parsedZone);
@@ -326,11 +326,13 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
 
       var isClearable = Boolean(dateValue || timeValue);
       var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+      var labelId = (datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.inputId) || (timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.inputId) || '';
       return (0, _core.jsx)("div", (0, _extends2.default)({
         css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
       }, innerProps, {
         "data-testid": testId
       }), (0, _core.jsx)("input", {
+        id: labelId,
         name: name,
         type: "hidden",
         value: value

package/dist/cjs/components/TimePicker.js

@@ -67,7 +67,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 = "11.1.10";
+var packageVersion = "12.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -165,7 +165,15 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         var _this$props = _this.props,
             parseInputValue = _this$props.parseInputValue,
             _timeFormat = _this$props.timeFormat;
-        var formattedValue = (0, _dateFns.format)(parseInputValue(inputValue, _timeFormat || _internal.defaultTimeFormat), 'HH:mm') || '';
+        var sanitizedInput;
+
+        try {
+          sanitizedInput = parseInputValue(inputValue, _timeFormat || _internal.defaultTimeFormat);
+        } catch (e) {
+          return; // do nothing, the main validation should happen in the form
+        }
+
+        var formattedValue = (0, _dateFns.format)(sanitizedInput, 'HH:mm') || '';
 
         _this.setState({
           value: formattedValue
@@ -323,7 +331,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           spacing = _this$props3.spacing,
           testId = _this$props3.testId;
       var ICON_PADDING = 2;
-      var BORDER_WIDTH = 2;
 
       var _this$getSafeState3 = this.getSafeState(),
           _this$getSafeState3$v = _this$getSafeState3.value,
@@ -349,7 +356,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         selectComponents.ClearIndicator = _internal.EmptyClearIndicator;
       }
 
-      var renderIconContainer = Boolean(hideIcon && value);
+      var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
         control: function control(base) {
           return _objectSpread(_objectSpread({}, base), controlStyles);
@@ -364,7 +371,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         indicatorsContainer: function indicatorsContainer(base) {
           return _objectSpread(_objectSpread({}, base), {}, {
             paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-            paddingRight: renderIconContainer ? (0, _constants.gridSize)() - BORDER_WIDTH : 0
+            paddingRight: renderIconContainer ? (0, _constants.gridSize)() - ICON_PADDING : 0
           });
         }
       });
@@ -376,6 +383,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           "data-testid": testId && "".concat(testId, "--container"),
           onKeyDown: this.onSelectKeyDown
         }), /*#__PURE__*/_react.default.createElement("input", {
+          id: selectProps.inputId,
           name: name,
           type: "hidden",
           value: value

package/dist/cjs/internal/parseTime.js

@@ -95,9 +95,9 @@ function checkMinute(minute) {
 }
 
 function convertTo24hrTime(time) {
-  var timeArray = time.split(/(p|a)/);
+  var timeArray = time.toLowerCase().split(/(p|a)/i);
   var meridiem = timeArray[1];
-  var semi24 = formatSemi24(timeArray[0]);
+  var semi24 = formatSemi24(timeArray[0].trim());
   var hour = checkHour(semi24.substring(0, 2), meridiem);
   var minute = checkMinute(semi24.substring(2, 4));
 
@@ -120,15 +120,17 @@ function assignToDate(time) {
 }
 
 function _default(time) {
-  if (!isValid(time.toString())) {
-    return 'invalid time format';
+  var trimmedTime = time.toString().trim();
+
+  if (!isValid(trimmedTime)) {
+    throw RangeError('invalid time format');
   }
 
-  var time1 = removeSpacer(time.toString());
+  var time1 = removeSpacer(trimmedTime);
   var time2 = convertTo24hrTime(time1);
 
   if (!time2) {
-    return 'invalid time format';
+    throw RangeError('invalid time format');
   }
 
   return assignToDate(time2);

package/dist/cjs/version.json

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

package/dist/es2019/components/DatePicker.js

@@ -18,7 +18,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "11.1.10";
+const packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -54,13 +54,16 @@ const Menu = ({
     disabledDateFilter: selectProps.calendarDisabledDateFilter,
     minDate: selectProps.calendarMinDate,
     maxDate: selectProps.calendarMaxDate,
+    nextMonthLabel: selectProps.nextMonthLabel,
     onChange: selectProps.onCalendarChange,
     onSelect: selectProps.onCalendarSelect,
+    previousMonthLabel: selectProps.previousMonthLabel,
     calendarRef: selectProps.calendarRef,
     selected: [selectProps.calendarValue],
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && `${selectProps.testId}--calendar`,
-    weekStartDay: selectProps.calendarWeekStartDay
+    weekStartDay: selectProps.calendarWeekStartDay,
+    tabIndex: -1
   }))),
   testId: selectProps.testId
 });
@@ -427,13 +430,14 @@ class DatePicker extends Component {
       minDate,
       isInvalid,
       name,
+      nextMonthLabel,
+      previousMonthLabel,
       selectProps,
       spacing,
       locale,
       testId,
       weekStartDay
     } = this.props;
-    const BORDER_WIDTH = 2;
     const ICON_PADDING = 2;
     const {
       value,
@@ -472,7 +476,9 @@ class DatePicker extends Component {
       onCalendarChange: this.onCalendarChange,
       onCalendarSelect: this.onCalendarSelect,
       calendarLocale: locale,
-      calendarWeekStartDay: weekStartDay
+      calendarWeekStartDay: weekStartDay,
+      nextMonthLabel,
+      previousMonthLabel
     };
     return jsx("div", _extends({}, innerProps, {
       role: "presentation",
@@ -482,6 +488,7 @@ class DatePicker extends Component {
       ref: this.getContainerRef,
       "data-testid": testId && `${testId}--container`
     }), jsx("input", {
+      id: selectProps.inputId,
       name: name,
       type: "hidden",
       value: value,
@@ -506,7 +513,7 @@ class DatePicker extends Component {
         }),
         indicatorsContainer: base => ({ ...base,
           paddingLeft: ICON_PADDING,
-          paddingRight: gridSize() - BORDER_WIDTH
+          paddingRight: gridSize() - ICON_PADDING
         })
       }),
       placeholder: this.getPlaceholder(),

package/dist/es2019/components/DateTimePicker.js

@@ -17,7 +17,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "11.1.10";
+const packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({
@@ -35,13 +35,13 @@ const subtleBgStyles = css({
 });
 const hoverStyles = css({
   '&:hover': {
-    backgroundColor: `var(--ds-surface, ${N30})`,
+    backgroundColor: `var(--ds-background-input-hovered, ${N30})`,
     borderColor: `var(--ds-border, ${N30})`
   }
 });
 const isInvalidHoverStyles = css({
   '&:hover': {
-    backgroundColor: `var(--ds-surface, ${N0})`,
+    backgroundColor: `var(--ds-background-input-hovered, ${N0})`,
     borderColor: `var(--ds-border-danger, ${R400})`
   }
 });
@@ -273,11 +273,13 @@ class DateTimePicker extends React.Component {
 
     const isClearable = Boolean(dateValue || timeValue);
     const notFocusedOrIsDisabled = !(isFocused || isDisabled);
+    const labelId = (datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.inputId) || (timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.inputId) || '';
     return jsx("div", _extends({
       css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
     }, innerProps, {
       "data-testid": testId
     }), jsx("input", {
+      id: labelId,
       name: name,
       type: "hidden",
       value: value

package/dist/es2019/components/TimePicker.js

@@ -14,7 +14,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "11.1.10";
+const packageVersion = "12.1.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -104,7 +104,15 @@ class TimePicker extends React.Component {
           parseInputValue,
           timeFormat
         } = this.props;
-        const formattedValue = format(parseInputValue(inputValue, timeFormat || defaultTimeFormat), 'HH:mm') || '';
+        let sanitizedInput;
+
+        try {
+          sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
+        } catch (e) {
+          return; // do nothing, the main validation should happen in the form
+        }
+
+        const formattedValue = format(sanitizedInput, 'HH:mm') || '';
         this.setState({
           value: formattedValue
         });
@@ -262,7 +270,6 @@ class TimePicker extends React.Component {
       testId
     } = this.props;
     const ICON_PADDING = 2;
-    const BORDER_WIDTH = 2;
     const {
       value = '',
       isOpen
@@ -287,7 +294,7 @@ class TimePicker extends React.Component {
       selectComponents.ClearIndicator = EmptyClearIndicator;
     }
 
-    const renderIconContainer = Boolean(hideIcon && value);
+    const renderIconContainer = Boolean(!hideIcon && value);
     const mergedStyles = mergeStyles(selectStyles, {
       control: base => ({ ...base,
         ...controlStyles
@@ -300,7 +307,7 @@ class TimePicker extends React.Component {
       }),
       indicatorsContainer: base => ({ ...base,
         paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-        paddingRight: renderIconContainer ? gridSize() - BORDER_WIDTH : 0
+        paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
       })
     });
     return (
@@ -311,6 +318,7 @@ class TimePicker extends React.Component {
         "data-testid": testId && `${testId}--container`,
         onKeyDown: this.onSelectKeyDown
       }), /*#__PURE__*/React.createElement("input", {
+        id: selectProps.inputId,
         name: name,
         type: "hidden",
         value: value

package/dist/es2019/internal/parseTime.js

@@ -76,9 +76,9 @@ export function checkMinute(minute) {
   return minute;
 }
 export function convertTo24hrTime(time) {
-  const timeArray = time.split(/(p|a)/);
+  const timeArray = time.toLowerCase().split(/(p|a)/i);
   const meridiem = timeArray[1];
-  const semi24 = formatSemi24(timeArray[0]);
+  const semi24 = formatSemi24(timeArray[0].trim());
   const hour = checkHour(semi24.substring(0, 2), meridiem);
   const minute = checkMinute(semi24.substring(2, 4));
 
@@ -99,15 +99,17 @@ export function assignToDate(time) {
   return dateTime;
 }
 export default function (time) {
-  if (!isValid(time.toString())) {
-    return 'invalid time format';
+  const trimmedTime = time.toString().trim();
+
+  if (!isValid(trimmedTime)) {
+    throw RangeError('invalid time format');
   }
 
-  const time1 = removeSpacer(time.toString());
+  const time1 = removeSpacer(trimmedTime);
   const time2 = convertTo24hrTime(time1);
 
   if (!time2) {
-    return 'invalid time format';
+    throw RangeError('invalid time format');
   }
 
   return assignToDate(time2);

package/dist/es2019/version.json

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

package/dist/esm/components/DatePicker.js

@@ -33,7 +33,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.10";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -69,13 +69,16 @@ var Menu = function Menu(_ref) {
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
       maxDate: selectProps.calendarMaxDate,
+      nextMonthLabel: selectProps.nextMonthLabel,
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
+      previousMonthLabel: selectProps.previousMonthLabel,
       calendarRef: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
-      weekStartDay: selectProps.calendarWeekStartDay
+      weekStartDay: selectProps.calendarWeekStartDay,
+      tabIndex: -1
     }))),
     testId: selectProps.testId
   });
@@ -463,12 +466,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           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 BORDER_WIDTH = 2;
       var ICON_PADDING = 2;
 
       var _this$getSafeState6 = this.getSafeState(),
@@ -507,7 +511,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
-        calendarWeekStartDay: weekStartDay
+        calendarWeekStartDay: weekStartDay,
+        nextMonthLabel: nextMonthLabel,
+        previousMonthLabel: previousMonthLabel
       };
       return jsx("div", _extends({}, innerProps, {
         role: "presentation",
@@ -517,6 +523,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
       }), jsx("input", {
+        id: selectProps.inputId,
         name: name,
         type: "hidden",
         value: value,
@@ -541,7 +548,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           indicatorsContainer: function indicatorsContainer(base) {
             return _objectSpread(_objectSpread({}, base), {}, {
               paddingLeft: ICON_PADDING,
-              paddingRight: gridSize() - BORDER_WIDTH
+              paddingRight: gridSize() - ICON_PADDING
             });
           }
         }),

package/dist/esm/components/DateTimePicker.js

@@ -31,7 +31,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.10";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({
@@ -49,13 +49,13 @@ var subtleBgStyles = css({
 });
 var hoverStyles = css({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(N30, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")"),
     borderColor: "var(--ds-border, ".concat(N30, ")")
   }
 });
 var isInvalidHoverStyles = css({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(N0, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(N0, ")"),
     borderColor: "var(--ds-border-danger, ".concat(R400, ")")
   }
 });
@@ -239,9 +239,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       });
 
       if (dateValue && timeValue) {
-        var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
+        var _value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
 
-        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
+        var _this$parseValue = this.parseValue(_value, dateValue, timeValue, zoneValue),
             parsedZone = _this$parseValue.zoneValue;
 
         var valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
@@ -307,11 +307,13 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
 
       var isClearable = Boolean(dateValue || timeValue);
       var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+      var labelId = (datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.inputId) || (timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.inputId) || '';
       return jsx("div", _extends({
         css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
       }, innerProps, {
         "data-testid": testId
       }), jsx("input", {
+        id: labelId,
         name: name,
         type: "hidden",
         value: value

package/dist/esm/components/TimePicker.js

@@ -32,7 +32,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.10";
+var packageVersion = "12.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -136,7 +136,15 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         var _this$props = _this.props,
             parseInputValue = _this$props.parseInputValue,
             _timeFormat = _this$props.timeFormat;
-        var formattedValue = format(parseInputValue(inputValue, _timeFormat || defaultTimeFormat), 'HH:mm') || '';
+        var sanitizedInput;
+
+        try {
+          sanitizedInput = parseInputValue(inputValue, _timeFormat || defaultTimeFormat);
+        } catch (e) {
+          return; // do nothing, the main validation should happen in the form
+        }
+
+        var formattedValue = format(sanitizedInput, 'HH:mm') || '';
 
         _this.setState({
           value: formattedValue
@@ -304,7 +312,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           spacing = _this$props3.spacing,
           testId = _this$props3.testId;
       var ICON_PADDING = 2;
-      var BORDER_WIDTH = 2;
 
       var _this$getSafeState3 = this.getSafeState(),
           _this$getSafeState3$v = _this$getSafeState3.value,
@@ -332,7 +339,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         selectComponents.ClearIndicator = EmptyClearIndicator;
       }
 
-      var renderIconContainer = Boolean(hideIcon && value);
+      var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = mergeStyles(selectStyles, {
         control: function control(base) {
           return _objectSpread(_objectSpread({}, base), controlStyles);
@@ -347,7 +354,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         indicatorsContainer: function indicatorsContainer(base) {
           return _objectSpread(_objectSpread({}, base), {}, {
             paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-            paddingRight: renderIconContainer ? gridSize() - BORDER_WIDTH : 0
+            paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
           });
         }
       });
@@ -359,6 +366,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           "data-testid": testId && "".concat(testId, "--container"),
           onKeyDown: this.onSelectKeyDown
         }), /*#__PURE__*/React.createElement("input", {
+          id: selectProps.inputId,
           name: name,
           type: "hidden",
           value: value