@atlaskit/datetime-picker 13.7.2 → 13.7.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/datetime-picker
 
+## 13.7.4
+
+### Patch Changes
+
+- [`974d1508085ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/974d1508085ce) -
+  Accessibility changes. Add ability to change focus to the current date using ArrowUp and ArrowDown
+  keys while the focus is on the `input`.
+- Updated dependencies
+
+## 13.7.3
+
+### Patch Changes
+
+- [#121570](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121570)
+  [`6026292f28f06`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6026292f28f06) -
+  [ux] Allows `aria-describedby` on all pickers. This will ensure messages from the form's field
+  component will be applied properly.
+
 ## 13.7.2
 
 ### Patch Changes

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

@@ -36,9 +36,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.2";
+var packageVersion = "13.7.4";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -142,11 +143,17 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       var newlyFocusedElement = event.relatedTarget;
       if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         _this.setState({
-          isOpen: false
+          isOpen: false,
+          shouldSetFocusOnCurrentDay: false
         });
         _this.props.onBlur(event);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerFocus", function () {
+      _this.setState({
+        shouldSetFocusOnCurrentDay: false
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
       var _this$containerRef3;
       var newlyFocusedElement = event.relatedTarget;
@@ -223,7 +230,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
           innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
           _this.setState({
-            isOpen: false
+            isOpen: false,
+            shouldSetFocusOnCurrentDay: false
           });
           break;
         case 'backspace':
@@ -263,6 +271,14 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
             }
           }
           break;
+        case 'arrowdown':
+        case 'arrowup':
+          if (_this.state.isOpen && !_this.state.shouldSetFocusOnCurrentDay) {
+            _this.setState({
+              shouldSetFocusOnCurrentDay: true
+            });
+          }
+          break;
         default:
           break;
       }
@@ -361,7 +377,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       value: _this.props.value || _this.props.defaultValue,
       calendarValue: _this.props.value || _this.props.defaultValue || (0, _parseDate.getShortISOString)(new Date()),
       l10n: (0, _locale.createLocalizationProvider)(_this.props.locale),
-      locale: _this.props.locale
+      locale: _this.props.locale,
+      shouldSetFocusOnCurrentDay: false
     };
     return _this;
   }
@@ -370,6 +387,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
     value: function render() {
       var _this$props3 = this.props,
         appearance = _this$props3.appearance,
+        ariaDescribedBy = _this$props3['aria-describedby'],
         autoFocus = _this$props3.autoFocus,
         disabled = _this$props3.disabled,
         hideIcon = _this$props3.hideIcon,
@@ -434,7 +452,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay,
         nextMonthLabel: nextMonthLabel,
-        previousMonthLabel: previousMonthLabel
+        previousMonthLabel: previousMonthLabel,
+        shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
       return (
         // These event handlers must be on this element because the events come
@@ -442,6 +461,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
           role: "presentation",
           onBlur: this.onContainerBlur,
+          onFocus: this.onContainerFocus,
           onClick: this.onInputClick,
           onInput: this.onTextInput,
           onKeyDown: this.onInputKeyDown,
@@ -453,6 +473,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
         }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
+          "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           appearance: this.props.appearance,
           enableAnimation: false,

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

@@ -31,9 +31,10 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.2";
+var packageVersion = "13.7.4";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -209,6 +210,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
     key: "render",
     value: function render() {
       var _this$props = this.props,
+        ariaDescribedBy = _this$props['aria-describedby'],
         autoFocus = _this$props.autoFocus,
         id = _this$props.id,
         innerProps = _this$props.innerProps,
@@ -242,10 +244,12 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
       var _timePickerSelectProp = timePickerSelectProps.styles,
         timePickerStyles = _timePickerSelectProp === void 0 ? {} : _timePickerSelectProp;
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
+        'aria-describedby': datePickerProps['aria-describedby'] || ariaDescribedBy,
         'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
         styles: (0, _select.mergeStyles)(styles, datePickerStyles)
       });
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
+        'aria-describedby': timePickerProps['aria-describedby'] || ariaDescribedBy,
         'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
         styles: (0, _select.mergeStyles)(styles, timePickerStyles)
       });

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

@@ -36,7 +36,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.2";
+var packageVersion = "13.7.4";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -199,6 +199,7 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
       var _this2 = this;
       var _this$props2 = this.props,
         appearance = _this$props2.appearance,
+        ariaDescribedBy = _this$props2['aria-describedby'],
         autoFocus = _this$props2.autoFocus,
         formatDisplayLabel = _this$props2.formatDisplayLabel,
         hideIcon = _this$props2.hideIcon,
@@ -299,6 +300,7 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
         "data-testid": testId && "".concat(testId, "--input"),
         onKeyDown: this.onSelectKeyDown
       }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
+        "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
         appearance: appearance,
         autoFocus: autoFocus,

package/dist/cjs/internal/date-time-picker-container.js

@@ -10,8 +10,8 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var isInvalidBorderStyles = (0, _react.css)({

package/dist/cjs/internal/fixed-layer-menu.js

@@ -13,8 +13,8 @@ var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 var _excluded = ["selectProps"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * This is the fixed layer menu used in the time picker.

package/dist/cjs/internal/menu.js

@@ -16,8 +16,8 @@ var _constants = require("@atlaskit/theme/constants");
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 function getValidDate(iso) {
@@ -43,7 +43,7 @@ var Menu = exports.Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   return (0, _react.jsx)(_layering.UNSAFE_LAYERING, {
-    isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_qmiw3') ? false : true
+    isDisabled: (0, _platformFeatureFlags.fg)('platform.design-system-team.layering_qmiw3') ? false : true
   }, (0, _react.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
@@ -60,6 +60,7 @@ var Menu = exports.Menu = function Menu(_ref) {
       previousMonthLabel: selectProps.previousMonthLabel,
       calendarRef: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
+      shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
       weekStartDay: selectProps.calendarWeekStartDay

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

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -21,7 +21,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.7.2";
+const packageVersion = "13.7.4";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -121,11 +121,17 @@ class DatePickerComponent extends Component {
       const newlyFocusedElement = event.relatedTarget;
       if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         this.setState({
-          isOpen: false
+          isOpen: false,
+          shouldSetFocusOnCurrentDay: false
         });
         this.props.onBlur(event);
       }
     });
+    _defineProperty(this, "onContainerFocus", () => {
+      this.setState({
+        shouldSetFocusOnCurrentDay: false
+      });
+    });
     _defineProperty(this, "onSelectBlur", event => {
       var _this$containerRef3;
       const newlyFocusedElement = event.relatedTarget;
@@ -204,7 +210,8 @@ class DatePickerComponent extends Component {
           const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
           innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
           this.setState({
-            isOpen: false
+            isOpen: false,
+            shouldSetFocusOnCurrentDay: false
           });
           break;
         case 'backspace':
@@ -244,6 +251,14 @@ class DatePickerComponent extends Component {
             }
           }
           break;
+        case 'arrowdown':
+        case 'arrowup':
+          if (this.state.isOpen && !this.state.shouldSetFocusOnCurrentDay) {
+            this.setState({
+              shouldSetFocusOnCurrentDay: true
+            });
+          }
+          break;
         default:
           break;
       }
@@ -352,7 +367,8 @@ class DatePickerComponent extends Component {
       value: this.props.value || this.props.defaultValue,
       calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
       l10n: createLocalizationProvider(this.props.locale),
-      locale: this.props.locale
+      locale: this.props.locale,
+      shouldSetFocusOnCurrentDay: false
     };
   }
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -368,6 +384,7 @@ class DatePickerComponent extends Component {
   render() {
     const {
       appearance,
+      'aria-describedby': ariaDescribedBy,
       autoFocus,
       disabled,
       hideIcon,
@@ -436,7 +453,8 @@ class DatePickerComponent extends Component {
       calendarLocale: locale,
       calendarWeekStartDay: weekStartDay,
       nextMonthLabel,
-      previousMonthLabel
+      previousMonthLabel,
+      shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
     };
     return (
       // These event handlers must be on this element because the events come
@@ -444,6 +462,7 @@ class DatePickerComponent extends Component {
       jsx("div", _extends({}, innerProps, {
         role: "presentation",
         onBlur: this.onContainerBlur,
+        onFocus: this.onContainerFocus,
         onClick: this.onInputClick,
         onInput: this.onTextInput,
         onKeyDown: this.onInputKeyDown,
@@ -455,6 +474,7 @@ class DatePickerComponent extends Component {
         value: value,
         "data-testid": testId && `${testId}--input`
       }), jsx(Select, _extends({
+        "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
         appearance: this.props.appearance,
         enableAnimation: false,

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

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.7.2";
+const packageVersion = "13.7.4";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -192,6 +192,7 @@ class DateTimePickerComponent extends React.Component {
   }
   render() {
     const {
+      'aria-describedby': ariaDescribedBy,
       autoFocus,
       id,
       innerProps,
@@ -230,11 +231,13 @@ class DateTimePickerComponent extends React.Component {
     } = timePickerSelectProps;
     const mergedDatePickerSelectProps = {
       ...datePickerSelectProps,
+      'aria-describedby': datePickerProps['aria-describedby'] || ariaDescribedBy,
       'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
       styles: mergeStyles(styles, datePickerStyles)
     };
     const mergedTimePickerSelectProps = {
       ...timePickerSelectProps,
+      'aria-describedby': timePickerProps['aria-describedby'] || ariaDescribedBy,
       'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
       styles: mergeStyles(styles, timePickerStyles)
     };

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

@@ -16,7 +16,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.7.2";
+const packageVersion = "13.7.4";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -173,6 +173,7 @@ class TimePickerComponent extends React.Component {
   render() {
     const {
       appearance,
+      'aria-describedby': ariaDescribedBy,
       autoFocus,
       formatDisplayLabel,
       hideIcon,
@@ -275,6 +276,7 @@ class TimePickerComponent extends React.Component {
       "data-testid": testId && `${testId}--input`,
       onKeyDown: this.onSelectKeyDown
     }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+      "aria-describedby": ariaDescribedBy,
       "aria-label": label || undefined,
       appearance: appearance,
       autoFocus: autoFocus,

package/dist/es2019/internal/date-time-picker-container.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';

package/dist/es2019/internal/fixed-layer-menu.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';

package/dist/es2019/internal/menu.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -35,7 +35,7 @@ export const Menu = ({
   selectProps,
   innerProps
 }) => jsx(UNSAFE_LAYERING, {
-  isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
+  isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
 }, jsx(FixedLayer, {
   inputValue: selectProps.inputValue,
   containerRef: selectProps.calendarContainerRef,
@@ -52,6 +52,7 @@ export const Menu = ({
     previousMonthLabel: selectProps.previousMonthLabel,
     calendarRef: selectProps.calendarRef,
     selected: [selectProps.calendarValue],
+    shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && `${selectProps.testId}--calendar`,
     weekStartDay: selectProps.calendarWeekStartDay

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

@@ -13,8 +13,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -32,7 +32,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.2";
+var packageVersion = "13.7.4";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -136,11 +136,17 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       var newlyFocusedElement = event.relatedTarget;
       if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         _this.setState({
-          isOpen: false
+          isOpen: false,
+          shouldSetFocusOnCurrentDay: false
         });
         _this.props.onBlur(event);
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "onContainerFocus", function () {
+      _this.setState({
+        shouldSetFocusOnCurrentDay: false
+      });
+    });
     _defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
       var _this$containerRef3;
       var newlyFocusedElement = event.relatedTarget;
@@ -217,7 +223,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
           innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
           _this.setState({
-            isOpen: false
+            isOpen: false,
+            shouldSetFocusOnCurrentDay: false
           });
           break;
         case 'backspace':
@@ -257,6 +264,14 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
             }
           }
           break;
+        case 'arrowdown':
+        case 'arrowup':
+          if (_this.state.isOpen && !_this.state.shouldSetFocusOnCurrentDay) {
+            _this.setState({
+              shouldSetFocusOnCurrentDay: true
+            });
+          }
+          break;
         default:
           break;
       }
@@ -355,7 +370,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       value: _this.props.value || _this.props.defaultValue,
       calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
       l10n: createLocalizationProvider(_this.props.locale),
-      locale: _this.props.locale
+      locale: _this.props.locale,
+      shouldSetFocusOnCurrentDay: false
     };
     return _this;
   }
@@ -364,6 +380,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props3 = this.props,
         appearance = _this$props3.appearance,
+        ariaDescribedBy = _this$props3['aria-describedby'],
         autoFocus = _this$props3.autoFocus,
         disabled = _this$props3.disabled,
         hideIcon = _this$props3.hideIcon,
@@ -428,7 +445,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay,
         nextMonthLabel: nextMonthLabel,
-        previousMonthLabel: previousMonthLabel
+        previousMonthLabel: previousMonthLabel,
+        shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
       return (
         // These event handlers must be on this element because the events come
@@ -436,6 +454,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         jsx("div", _extends({}, innerProps, {
           role: "presentation",
           onBlur: this.onContainerBlur,
+          onFocus: this.onContainerFocus,
           onClick: this.onInputClick,
           onInput: this.onTextInput,
           onKeyDown: this.onInputKeyDown,
@@ -447,6 +466,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
         }), jsx(Select, _extends({
+          "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           appearance: this.props.appearance,
           enableAnimation: false,

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

@@ -12,8 +12,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -30,7 +30,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.2";
+var packageVersion = "13.7.4";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -206,6 +206,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+        ariaDescribedBy = _this$props['aria-describedby'],
         autoFocus = _this$props.autoFocus,
         id = _this$props.id,
         innerProps = _this$props.innerProps,
@@ -239,10 +240,12 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
       var _timePickerSelectProp = timePickerSelectProps.styles,
         timePickerStyles = _timePickerSelectProp === void 0 ? {} : _timePickerSelectProp;
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
+        'aria-describedby': datePickerProps['aria-describedby'] || ariaDescribedBy,
         'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
         styles: mergeStyles(styles, datePickerStyles)
       });
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
+        'aria-describedby': timePickerProps['aria-describedby'] || ariaDescribedBy,
         'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
         styles: mergeStyles(styles, timePickerStyles)
       });

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

@@ -28,7 +28,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.2";
+var packageVersion = "13.7.4";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -191,6 +191,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
       var _this$props2 = this.props,
         appearance = _this$props2.appearance,
+        ariaDescribedBy = _this$props2['aria-describedby'],
         autoFocus = _this$props2.autoFocus,
         formatDisplayLabel = _this$props2.formatDisplayLabel,
         hideIcon = _this$props2.hideIcon,
@@ -291,6 +292,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
         "data-testid": testId && "".concat(testId, "--input"),
         onKeyDown: this.onSelectKeyDown
       }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+        "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
         appearance: appearance,
         autoFocus: autoFocus,

package/dist/esm/internal/date-time-picker-container.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';

package/dist/esm/internal/fixed-layer-menu.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["selectProps"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';

package/dist/esm/internal/menu.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -35,7 +35,7 @@ export var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   return jsx(UNSAFE_LAYERING, {
-    isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
+    isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
   }, jsx(FixedLayer, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
@@ -52,6 +52,7 @@ export var Menu = function Menu(_ref) {
       previousMonthLabel: selectProps.previousMonthLabel,
       calendarRef: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
+      shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
       weekStartDay: selectProps.calendarWeekStartDay

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { type CalendarRef } from '@atlaskit/calendar';
@@ -23,6 +23,7 @@ interface State {
     selectInputValue: string;
     l10n: LocalizationProvider;
     locale: string;
+    shouldSetFocusOnCurrentDay: boolean;
 }
 declare const datePickerDefaultProps: {
     appearance: Appearance;
@@ -86,6 +87,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         selectInputValue: string;
         l10n: LocalizationProvider;
         locale: string;
+        shouldSetFocusOnCurrentDay: boolean;
     };
     isDateDisabled: (date: string) => boolean;
     onCalendarChange: ({ iso }: {
@@ -96,6 +98,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     }) => void;
     onInputClick: () => void;
     onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onContainerFocus: () => void;
     onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -133,7 +136,7 @@ export { DatePickerComponent as DatePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -154,5 +157,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type DateTimePickerBaseProps } from '../types';
@@ -73,5 +73,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default DateTimePicker;

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

@@ -89,7 +89,7 @@ export { TimePickerComponent as TimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -110,5 +110,5 @@ declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePic
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default TimePicker;

package/dist/types/internal/date-time-picker-container.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type Appearance } from '../types';
 /**

package/dist/types/internal/fixed-layer-menu.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type MenuProps, type OptionType } from '@atlaskit/select';
 /**

package/dist/types/internal/menu.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type MenuProps } from '@atlaskit/select';
 /**

package/dist/types/types.d.ts

@@ -10,6 +10,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      * **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;
+    /**
+     * Used to associate accessible descriptions to the date picker.
+     */
+    'aria-describedby'?: string;
     /**
      * Set the picker to autofocus on mount.
      */
@@ -159,6 +163,10 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      * __NOTE:__ Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;
+    /**
+     * Used to associate accessible descriptions to the time picker.
+     */
+    'aria-describedby'?: string;
     /**
      * Set the picker to autofocus on mount.
      */
@@ -272,6 +280,13 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * `subtle` will remove the borders and background.
      */
     appearance?: Appearance;
+    /**
+     * Used to associate accessible descriptions to both the date and time
+     * picker. If you want to associate individual accessible descriptions, this
+     * should be done through the `datePickerSelectProps` and
+     * `timePickerSelectProps`.
+     */
+    'aria-describedby'?: string;
     /**
      * Set the picker to autofocus on mount.
      */

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { type CalendarRef } from '@atlaskit/calendar';
@@ -23,6 +23,7 @@ interface State {
     selectInputValue: string;
     l10n: LocalizationProvider;
     locale: string;
+    shouldSetFocusOnCurrentDay: boolean;
 }
 declare const datePickerDefaultProps: {
     appearance: Appearance;
@@ -86,6 +87,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         selectInputValue: string;
         l10n: LocalizationProvider;
         locale: string;
+        shouldSetFocusOnCurrentDay: boolean;
     };
     isDateDisabled: (date: string) => boolean;
     onCalendarChange: ({ iso }: {
@@ -96,6 +98,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     }) => void;
     onInputClick: () => void;
     onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onContainerFocus: () => void;
     onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -133,7 +136,7 @@ export { DatePickerComponent as DatePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -154,5 +157,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types-ts4.5/components/date-time-picker.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type DateTimePickerBaseProps } from '../types';
@@ -73,5 +73,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default DateTimePicker;

package/dist/types-ts4.5/components/time-picker.d.ts

@@ -89,7 +89,7 @@ export { TimePickerComponent as TimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -110,5 +110,5 @@ declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePic
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default TimePicker;

package/dist/types-ts4.5/internal/date-time-picker-container.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type Appearance } from '../types';
 /**

package/dist/types-ts4.5/internal/fixed-layer-menu.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type MenuProps, type OptionType } from '@atlaskit/select';
 /**

package/dist/types-ts4.5/internal/menu.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type MenuProps } from '@atlaskit/select';
 /**

package/dist/types-ts4.5/types.d.ts

@@ -10,6 +10,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      * **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;
+    /**
+     * Used to associate accessible descriptions to the date picker.
+     */
+    'aria-describedby'?: string;
     /**
      * Set the picker to autofocus on mount.
      */
@@ -159,6 +163,10 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      * __NOTE:__ Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;
+    /**
+     * Used to associate accessible descriptions to the time picker.
+     */
+    'aria-describedby'?: string;
     /**
      * Set the picker to autofocus on mount.
      */
@@ -272,6 +280,13 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * `subtle` will remove the borders and background.
      */
     appearance?: Appearance;
+    /**
+     * Used to associate accessible descriptions to both the date and time
+     * picker. If you want to associate individual accessible descriptions, this
+     * should be done through the `datePickerSelectProps` and
+     * `timePickerSelectProps`.
+     */
+    'aria-describedby'?: string;
     /**
      * Set the picker to autofocus on mount.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "13.7.2",
+	"version": "13.7.4",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,16 +40,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/calendar": "^14.3.0",
+		"@atlaskit/calendar": "^14.4.0",
 		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/icon": "^22.7.0",
 		"@atlaskit/layering": "^0.3.0",
 		"@atlaskit/locale": "^2.7.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/select": "^17.11.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.54.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"date-fns": "^2.17.0",
@@ -63,7 +63,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^18.4.0",
+		"@atlaskit/button": "^19.1.0",
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.4.0",
 		"@atlaskit/modal-dialog": "^12.14.0",