@atlaskit/datetime-picker 13.7.1 → 13.7.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/datetime-picker
 
+## 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
+
+- [#120049](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120049)
+  [`77504ff274f72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77504ff274f72) -
+  DSP-19576: Assign names to anonymous default exports
+
 ## 13.7.1
 
 ### Patch Changes

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

@@ -38,7 +38,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  */ /** @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.1";
+var packageVersion = "13.7.3";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -69,12 +69,12 @@ var datePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(DatePicker, _Component);
-  var _super = _createSuper(DatePicker);
-  function DatePicker(props) {
+var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DatePickerComponent, _Component);
+  var _super = _createSuper(DatePickerComponent);
+  function DatePickerComponent(props) {
     var _this;
-    (0, _classCallCheck2.default)(this, DatePicker);
+    (0, _classCallCheck2.default)(this, DatePickerComponent);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calendarRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerRef", null);
@@ -229,7 +229,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         case 'backspace':
         case 'delete':
           {
-            var inputCount = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? 1 : 0;
+            var inputCount = (0, _platformFeatureFlags.fg)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? 1 : 0;
             if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
               // If being cleared from keyboard, don't change behaviour
               _this.setState({
@@ -365,11 +365,12 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
     };
     return _this;
   }
-  (0, _createClass2.default)(DatePicker, [{
+  (0, _createClass2.default)(DatePickerComponent, [{
     key: "render",
     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,
@@ -396,7 +397,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         isOpen = _this$getSafeState6.isOpen,
         selectInputValue = _this$getSafeState6.selectInputValue;
       var actualSelectInputValue;
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
+      if ((0, _platformFeatureFlags.fg)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
         actualSelectInputValue = selectInputValue || (value ? this.formatDate(value) : undefined);
       } else {
         actualSelectInputValue = selectInputValue;
@@ -453,6 +454,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
           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,
@@ -507,10 +509,19 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       }
     }
   }]);
-  return DatePicker;
+  return DatePickerComponent;
 }(_react.Component);
-(0, _defineProperty2.default)(DatePicker, "defaultProps", datePickerDefaultProps);
-var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
+(0, _defineProperty2.default)(DatePickerComponent, "defaultProps", datePickerDefaultProps);
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
+ */
+var DatePicker = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'datePicker',
   packageName: packageName,
   packageVersion: packageVersion
@@ -524,4 +535,5 @@ var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
       packageVersion: packageVersion
     }
   })
-})(DatePicker));
+})(DatePickerComponent));
+var _default = exports.default = DatePicker;

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

@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  */ /** @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.1";
+var packageVersion = "13.7.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -107,12 +107,12 @@ var dateTimePickerDefaultProps = {
 };
 var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
 var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
-var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(DateTimePicker, _React$Component);
-  var _super = _createSuper(DateTimePicker);
-  function DateTimePicker() {
+var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(DateTimePickerComponent, _React$Component);
+  var _super = _createSuper(DateTimePickerComponent);
+  function DateTimePickerComponent() {
     var _this;
-    (0, _classCallCheck2.default)(this, DateTimePicker);
+    (0, _classCallCheck2.default)(this, DateTimePickerComponent);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -160,7 +160,7 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
     });
     return _this;
   }
-  (0, _createClass2.default)(DateTimePicker, [{
+  (0, _createClass2.default)(DateTimePickerComponent, [{
     key: "parseValue",
     value: function parseValue(value, dateValue, timeValue, zoneValue) {
       if (this.props.parseValue) {
@@ -209,6 +209,7 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
     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 +243,12 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       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)
       });
@@ -302,10 +305,19 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       })) : null);
     }
   }]);
-  return DateTimePicker;
+  return DateTimePickerComponent;
 }(_react.default.Component);
-(0, _defineProperty2.default)(DateTimePicker, "defaultProps", dateTimePickerDefaultProps);
-var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
+(0, _defineProperty2.default)(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/usage)
+ */
+var DateTimePicker = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'dateTimePicker',
   packageName: packageName,
   packageVersion: packageVersion
@@ -319,4 +331,5 @@ var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
       packageVersion: packageVersion
     }
   })
-})(DateTimePicker));
+})(DateTimePickerComponent));
+var _default = exports.default = DateTimePicker;

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.1";
+var packageVersion = "13.7.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -75,12 +75,12 @@ var timePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(TimePicker, _React$Component);
-  var _super = _createSuper(TimePicker);
-  function TimePicker() {
+var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(TimePickerComponent, _React$Component);
+  var _super = _createSuper(TimePickerComponent);
+  function TimePickerComponent() {
     var _this;
-    (0, _classCallCheck2.default)(this, TimePicker);
+    (0, _classCallCheck2.default)(this, TimePickerComponent);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -193,12 +193,13 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
     });
     return _this;
   }
-  (0, _createClass2.default)(TimePicker, [{
+  (0, _createClass2.default)(TimePickerComponent, [{
     key: "render",
     value: function render() {
       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 TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         "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,
@@ -328,10 +330,19 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
       }, otherSelectProps)));
     }
   }]);
-  return TimePicker;
+  return TimePickerComponent;
 }(_react.default.Component);
-(0, _defineProperty2.default)(TimePicker, "defaultProps", timePickerDefaultProps);
-var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
+(0, _defineProperty2.default)(TimePickerComponent, "defaultProps", timePickerDefaultProps);
+/**
+ * __Time picker__
+ *
+ * A time picker allows the user to select a specific time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/time-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
+ */
+var TimePicker = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'timePicker',
   packageName: packageName,
   packageVersion: packageVersion
@@ -345,4 +356,5 @@ var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
       packageVersion: packageVersion
     }
   })
-})(TimePicker));
+})(TimePickerComponent));
+var _default = exports.default = TimePicker;

package/dist/cjs/internal/parse-time.js

@@ -7,7 +7,7 @@ exports.assignToDate = assignToDate;
 exports.checkHour = checkHour;
 exports.checkMinuteSecond = checkMinuteSecond;
 exports.convertTo24hrTime = convertTo24hrTime;
-exports.default = _default;
+exports.default = parseTime;
 exports.formatSemi24 = formatSemi24;
 exports.isValid = isValid;
 exports.removeSpacer = removeSpacer;
@@ -115,7 +115,7 @@ function assignToDate(time) {
   dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
-function _default(time) {
+function parseTime(time) {
   var trimmedTime = time.toString().trim();
   if (!isValid(trimmedTime)) {
     throw RangeError('invalid time format');

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

@@ -13,7 +13,7 @@ import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import { Menu } from '../internal/menu';
@@ -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.1";
+const packageVersion = "13.7.3";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -50,7 +50,7 @@ const datePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-class DatePicker extends Component {
+class DatePickerComponent extends Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "calendarRef", null);
@@ -210,7 +210,7 @@ class DatePicker extends Component {
         case 'backspace':
         case 'delete':
           {
-            const inputCount = getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? 1 : 0;
+            const inputCount = fg('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? 1 : 0;
             if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
               // If being cleared from keyboard, don't change behaviour
               this.setState({
@@ -368,6 +368,7 @@ class DatePicker extends Component {
   render() {
     const {
       appearance,
+      'aria-describedby': ariaDescribedBy,
       autoFocus,
       disabled,
       hideIcon,
@@ -396,7 +397,7 @@ class DatePicker extends Component {
       selectInputValue
     } = this.getSafeState();
     let actualSelectInputValue;
-    if (getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
+    if (fg('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
       actualSelectInputValue = selectInputValue || (value ? this.formatDate(value) : undefined);
     } else {
       actualSelectInputValue = selectInputValue;
@@ -455,6 +456,7 @@ class DatePicker 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,
@@ -497,9 +499,19 @@ class DatePicker extends Component {
     );
   }
 }
-_defineProperty(DatePicker, "defaultProps", datePickerDefaultProps);
-export { DatePicker as DatePickerWithoutAnalytics };
-export default withAnalyticsContext({
+_defineProperty(DatePickerComponent, "defaultProps", datePickerDefaultProps);
+export { DatePickerComponent as DatePickerWithoutAnalytics };
+
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
+ */
+const DatePicker = withAnalyticsContext({
   componentName: 'datePicker',
   packageName,
   packageVersion
@@ -513,4 +525,5 @@ export default withAnalyticsContext({
       packageVersion
     }
   })
-})(DatePicker));
+})(DatePickerComponent));
+export default DatePicker;

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

@@ -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.1";
+const packageVersion = "13.7.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -93,7 +93,7 @@ const dateTimePickerDefaultProps = {
 };
 export const datePickerDefaultAriaLabel = 'Date';
 export const timePickerDefaultAriaLabel = 'Time';
-class DateTimePicker extends React.Component {
+class DateTimePickerComponent extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
@@ -192,6 +192,7 @@ class DateTimePicker extends React.Component {
   }
   render() {
     const {
+      'aria-describedby': ariaDescribedBy,
       autoFocus,
       id,
       innerProps,
@@ -230,11 +231,13 @@ class DateTimePicker 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)
     };
@@ -291,9 +294,19 @@ class DateTimePicker extends React.Component {
     })) : null);
   }
 }
-_defineProperty(DateTimePicker, "defaultProps", dateTimePickerDefaultProps);
-export { DateTimePicker as DateTimePickerWithoutAnalytics };
-export default withAnalyticsContext({
+_defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
+export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
+
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/usage)
+ */
+const DateTimePicker = withAnalyticsContext({
   componentName: 'dateTimePicker',
   packageName,
   packageVersion
@@ -307,4 +320,5 @@ export default withAnalyticsContext({
       packageVersion
     }
   })
-})(DateTimePicker));
+})(DateTimePickerComponent));
+export default DateTimePicker;

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.1";
+const packageVersion = "13.7.3";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -53,7 +53,7 @@ const timePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-class TimePicker extends React.Component {
+class TimePickerComponent extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "containerRef", null);
@@ -173,6 +173,7 @@ class TimePicker extends React.Component {
   render() {
     const {
       appearance,
+      'aria-describedby': ariaDescribedBy,
       autoFocus,
       formatDisplayLabel,
       hideIcon,
@@ -275,6 +276,7 @@ class TimePicker 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,
@@ -304,9 +306,19 @@ class TimePicker extends React.Component {
     }, otherSelectProps)));
   }
 }
-_defineProperty(TimePicker, "defaultProps", timePickerDefaultProps);
-export { TimePicker as TimePickerWithoutAnalytics };
-export default withAnalyticsContext({
+_defineProperty(TimePickerComponent, "defaultProps", timePickerDefaultProps);
+export { TimePickerComponent as TimePickerWithoutAnalytics };
+
+/**
+ * __Time picker__
+ *
+ * A time picker allows the user to select a specific time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/time-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
+ */
+const TimePicker = withAnalyticsContext({
   componentName: 'timePicker',
   packageName,
   packageVersion
@@ -320,4 +332,5 @@ export default withAnalyticsContext({
       packageVersion
     }
   })
-})(TimePicker));
+})(TimePickerComponent));
+export default TimePicker;

package/dist/es2019/internal/parse-time.js

@@ -102,7 +102,7 @@ export function assignToDate(time) {
   dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
-export default function (time) {
+export default function parseTime(time) {
   const trimmedTime = time.toString().trim();
   if (!isValid(trimmedTime)) {
     throw RangeError('invalid time format');

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

@@ -24,7 +24,7 @@ import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import { Menu } from '../internal/menu';
@@ -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.1";
+var packageVersion = "13.7.3";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -63,12 +63,12 @@ var datePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-var DatePicker = /*#__PURE__*/function (_Component) {
-  _inherits(DatePicker, _Component);
-  var _super = _createSuper(DatePicker);
-  function DatePicker(props) {
+var DatePickerComponent = /*#__PURE__*/function (_Component) {
+  _inherits(DatePickerComponent, _Component);
+  var _super = _createSuper(DatePickerComponent);
+  function DatePickerComponent(props) {
     var _this;
-    _classCallCheck(this, DatePicker);
+    _classCallCheck(this, DatePickerComponent);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "calendarRef", null);
     _defineProperty(_assertThisInitialized(_this), "containerRef", null);
@@ -223,7 +223,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         case 'backspace':
         case 'delete':
           {
-            var inputCount = getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? 1 : 0;
+            var inputCount = fg('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? 1 : 0;
             if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
               // If being cleared from keyboard, don't change behaviour
               _this.setState({
@@ -359,11 +359,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     };
     return _this;
   }
-  _createClass(DatePicker, [{
+  _createClass(DatePickerComponent, [{
     key: "render",
     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,
@@ -390,7 +391,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         isOpen = _this$getSafeState6.isOpen,
         selectInputValue = _this$getSafeState6.selectInputValue;
       var actualSelectInputValue;
-      if (getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
+      if (fg('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
         actualSelectInputValue = selectInputValue || (value ? this.formatDate(value) : undefined);
       } else {
         actualSelectInputValue = selectInputValue;
@@ -447,6 +448,7 @@ var DatePicker = /*#__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,
@@ -501,11 +503,21 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
     }
   }]);
-  return DatePicker;
+  return DatePickerComponent;
 }(Component);
-_defineProperty(DatePicker, "defaultProps", datePickerDefaultProps);
-export { DatePicker as DatePickerWithoutAnalytics };
-export default withAnalyticsContext({
+_defineProperty(DatePickerComponent, "defaultProps", datePickerDefaultProps);
+export { DatePickerComponent as DatePickerWithoutAnalytics };
+
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
+ */
+var DatePicker = withAnalyticsContext({
   componentName: 'datePicker',
   packageName: packageName,
   packageVersion: packageVersion
@@ -519,4 +531,5 @@ export default withAnalyticsContext({
       packageVersion: packageVersion
     }
   })
-})(DatePicker));
+})(DatePickerComponent));
+export default DatePicker;

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

@@ -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.1";
+var packageVersion = "13.7.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -104,12 +104,12 @@ var dateTimePickerDefaultProps = {
 };
 export var datePickerDefaultAriaLabel = 'Date';
 export var timePickerDefaultAriaLabel = 'Time';
-var DateTimePicker = /*#__PURE__*/function (_React$Component) {
-  _inherits(DateTimePicker, _React$Component);
-  var _super = _createSuper(DateTimePicker);
-  function DateTimePicker() {
+var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(DateTimePickerComponent, _React$Component);
+  var _super = _createSuper(DateTimePickerComponent);
+  function DateTimePickerComponent() {
     var _this;
-    _classCallCheck(this, DateTimePicker);
+    _classCallCheck(this, DateTimePickerComponent);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -157,7 +157,7 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-  _createClass(DateTimePicker, [{
+  _createClass(DateTimePickerComponent, [{
     key: "parseValue",
     value: function parseValue(value, dateValue, timeValue, zoneValue) {
       if (this.props.parseValue) {
@@ -206,6 +206,7 @@ var DateTimePicker = /*#__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 DateTimePicker = /*#__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)
       });
@@ -299,11 +302,21 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       })) : null);
     }
   }]);
-  return DateTimePicker;
+  return DateTimePickerComponent;
 }(React.Component);
-_defineProperty(DateTimePicker, "defaultProps", dateTimePickerDefaultProps);
-export { DateTimePicker as DateTimePickerWithoutAnalytics };
-export default withAnalyticsContext({
+_defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
+export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
+
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/usage)
+ */
+var DateTimePicker = withAnalyticsContext({
   componentName: 'dateTimePicker',
   packageName: packageName,
   packageVersion: packageVersion
@@ -317,4 +330,5 @@ export default withAnalyticsContext({
       packageVersion: packageVersion
     }
   })
-})(DateTimePicker));
+})(DateTimePickerComponent));
+export default DateTimePicker;

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.1";
+var packageVersion = "13.7.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -67,12 +67,12 @@ var timePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-var TimePicker = /*#__PURE__*/function (_React$Component) {
-  _inherits(TimePicker, _React$Component);
-  var _super = _createSuper(TimePicker);
-  function TimePicker() {
+var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(TimePickerComponent, _React$Component);
+  var _super = _createSuper(TimePickerComponent);
+  function TimePickerComponent() {
     var _this;
-    _classCallCheck(this, TimePicker);
+    _classCallCheck(this, TimePickerComponent);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -185,12 +185,13 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-  _createClass(TimePicker, [{
+  _createClass(TimePickerComponent, [{
     key: "render",
     value: function render() {
       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 TimePicker = /*#__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,
@@ -320,11 +322,21 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       }, otherSelectProps)));
     }
   }]);
-  return TimePicker;
+  return TimePickerComponent;
 }(React.Component);
-_defineProperty(TimePicker, "defaultProps", timePickerDefaultProps);
-export { TimePicker as TimePickerWithoutAnalytics };
-export default withAnalyticsContext({
+_defineProperty(TimePickerComponent, "defaultProps", timePickerDefaultProps);
+export { TimePickerComponent as TimePickerWithoutAnalytics };
+
+/**
+ * __Time picker__
+ *
+ * A time picker allows the user to select a specific time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/time-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
+ */
+var TimePicker = withAnalyticsContext({
   componentName: 'timePicker',
   packageName: packageName,
   packageVersion: packageVersion
@@ -338,4 +350,5 @@ export default withAnalyticsContext({
       packageVersion: packageVersion
     }
   })
-})(TimePicker));
+})(TimePickerComponent));
+export default TimePicker;

package/dist/esm/internal/parse-time.js

@@ -102,7 +102,7 @@ export function assignToDate(time) {
   dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
-export default function (time) {
+export default function parseTime(time) {
   var trimmedTime = time.toString().trim();
   if (!isValid(trimmedTime)) {
     throw RangeError('invalid time format');

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

@@ -46,7 +46,7 @@ declare const datePickerDefaultProps: {
     spacing: Spacing;
     locale: string;
 };
-declare class DatePicker extends Component<DatePickerProps, State> {
+declare class DatePickerComponent extends Component<DatePickerProps, State> {
     static defaultProps: {
         appearance: Appearance;
         autoFocus: boolean;
@@ -123,8 +123,17 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     getPlaceholder: () => string;
     render(): jsx.JSX.Element;
 }
-export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: 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<{
+export { DatePickerComponent as DatePickerWithoutAnalytics };
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [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" | "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;
@@ -139,11 +148,11 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     isInvalid: boolean;
     label: string;
     name: string;
-    onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
-    onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
     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>>;
-export default _default;
+}, 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

@@ -36,7 +36,7 @@ declare const dateTimePickerDefaultProps: {
 };
 export declare const datePickerDefaultAriaLabel = "Date";
 export declare const timePickerDefaultAriaLabel = "Time";
-declare class DateTimePicker extends React.Component<DateTimePickerProps, State> {
+declare class DateTimePickerComponent extends React.Component<DateTimePickerProps, State> {
     static defaultProps: DateTimePickerProps;
     state: State;
     getSafeState: () => {
@@ -63,6 +63,15 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     }): void;
     render(): jsx.JSX.Element;
 }
-export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: 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>>;
-export default _default;
+export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [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" | "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

@@ -35,7 +35,7 @@ declare const timePickerDefaultProps: {
     timeIsEditable: boolean;
     locale: string;
 };
-declare class TimePicker extends React.Component<TimePickerProps, State> {
+declare class TimePickerComponent extends React.Component<TimePickerProps, State> {
     containerRef: HTMLElement | null;
     static defaultProps: {
         appearance: Appearance;
@@ -79,8 +79,17 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     onSelectKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }
-export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: 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<{
+export { TimePickerComponent as TimePickerWithoutAnalytics };
+/**
+ * __Time picker__
+ *
+ * A time picker allows the user to select a specific time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/time-picker/examples)
+ * - [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" | "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;
@@ -101,5 +110,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     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>>;
-export default _default;
+}, 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/parse-time.d.ts

@@ -10,5 +10,5 @@ export declare function checkHour(hour: string, meridiem: string): string | null
 export declare function checkMinuteSecond(value: string): string | null;
 export declare function convertTo24hrTime(time: string): TimeObject | null;
 export declare function assignToDate(time: TimeObject): Date;
-export default function (time: string): string | Date;
+export default function parseTime(time: string): string | Date;
 export {};

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

@@ -46,7 +46,7 @@ declare const datePickerDefaultProps: {
     spacing: Spacing;
     locale: string;
 };
-declare class DatePicker extends Component<DatePickerProps, State> {
+declare class DatePickerComponent extends Component<DatePickerProps, State> {
     static defaultProps: {
         appearance: Appearance;
         autoFocus: boolean;
@@ -123,8 +123,17 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     getPlaceholder: () => string;
     render(): jsx.JSX.Element;
 }
-export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: 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<{
+export { DatePickerComponent as DatePickerWithoutAnalytics };
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [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" | "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;
@@ -139,11 +148,11 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     isInvalid: boolean;
     label: string;
     name: string;
-    onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
-    onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
     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>>;
-export default _default;
+}, 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

@@ -36,7 +36,7 @@ declare const dateTimePickerDefaultProps: {
 };
 export declare const datePickerDefaultAriaLabel = "Date";
 export declare const timePickerDefaultAriaLabel = "Time";
-declare class DateTimePicker extends React.Component<DateTimePickerProps, State> {
+declare class DateTimePickerComponent extends React.Component<DateTimePickerProps, State> {
     static defaultProps: DateTimePickerProps;
     state: State;
     getSafeState: () => {
@@ -63,6 +63,15 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     }): void;
     render(): jsx.JSX.Element;
 }
-export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: 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>>;
-export default _default;
+export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [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" | "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

@@ -35,7 +35,7 @@ declare const timePickerDefaultProps: {
     timeIsEditable: boolean;
     locale: string;
 };
-declare class TimePicker extends React.Component<TimePickerProps, State> {
+declare class TimePickerComponent extends React.Component<TimePickerProps, State> {
     containerRef: HTMLElement | null;
     static defaultProps: {
         appearance: Appearance;
@@ -79,8 +79,17 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     onSelectKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }
-export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: 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<{
+export { TimePickerComponent as TimePickerWithoutAnalytics };
+/**
+ * __Time picker__
+ *
+ * A time picker allows the user to select a specific time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/time-picker/examples)
+ * - [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" | "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;
@@ -101,5 +110,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     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>>;
-export default _default;
+}, 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/parse-time.d.ts

@@ -10,5 +10,5 @@ export declare function checkHour(hour: string, meridiem: string): string | null
 export declare function checkMinuteSecond(value: string): string | null;
 export declare function convertTo24hrTime(time: string): TimeObject | null;
 export declare function assignToDate(time: TimeObject): Date;
-export default function (time: string): string | Date;
+export default function parseTime(time: string): string | Date;
 export {};

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.1",
+	"version": "13.7.3",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/select": "^17.11.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.53.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.3.0",
+		"@atlaskit/button": "^19.0.0",
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.4.0",
 		"@atlaskit/modal-dialog": "^12.14.0",