@atlaskit/datetime-picker 13.0.0 → 13.0.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/datetime-picker
 
+## 13.0.2
+
+### Patch Changes
+
+- [#58458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58458) [`536478cdcf0b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/536478cdcf0b) - Made some tiny tweaks to the weekday header so its height is now an integer.
+
+## 13.0.1
+
+### Patch Changes
+
+- [#40391](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40391) [`4300c9d6f18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4300c9d6f18) - Associate the label with the `Date` / `Time` picker and the clear button.
+  Add hidden span to the Label component.
+  This allows to associate a label with a clear button.
+  Unit tests update.
+
 ## 13.0.0
 
 ### Major Changes

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

@@ -29,6 +29,7 @@ var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
+var _clearIndicator = _interopRequireDefault(require("../internal/clear-indicator"));
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 var _singleValue = require("../internal/single-value");
 var _utils = require("./utils");
@@ -37,9 +38,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.0";
+var packageVersion = "13.0.2";
 function getValidDate(iso) {
   var date = (0, _dateFns.parseISO)(iso);
   return (0, _dateFns.isValid)(date) ? {
@@ -61,14 +62,14 @@ var menuStyles = (0, _react2.css)({
 var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
-  return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
+  return /*#__PURE__*/React.createElement(_layering.UNSAFE_LAYERING, {
     isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_qmiw3') ? false : true
-  }, (0, _react2.jsx)(_fixedLayer.default, {
+  }, /*#__PURE__*/React.createElement(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content: (0, _react2.jsx)("div", (0, _extends2.default)({
+    content: /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
       css: menuStyles
-    }, innerProps), (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
+    }, innerProps), /*#__PURE__*/React.createElement(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
       disabled: selectProps.calendarDisabled,
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
@@ -439,7 +440,9 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         DropdownIndicator: dropDownIcon,
         Menu: Menu,
         SingleValue: SingleValue
-      }, !showClearIndicator && {
+      }, showClearIndicator ? {
+        ClearIndicator: _clearIndicator.default
+      } : {
         ClearIndicator: _internal.EmptyComponent
       });
       var _selectProps$styles = selectProps.styles,
@@ -465,9 +468,10 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         previousMonthLabel: previousMonthLabel
       };
       return (
+        /*#__PURE__*/
         // These event handlers must be on this element because the events come
         // from different child elements.
-        (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
+        React.createElement("div", (0, _extends2.default)({}, innerProps, {
           role: "presentation",
           onBlur: this.onContainerBlur,
           onClick: this.onInputClick,
@@ -475,18 +479,18 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
           onKeyDown: this.onInputKeyDown,
           ref: this.getContainerRef,
           "data-testid": testId && "".concat(testId, "--container")
-        }), (0, _react2.jsx)("input", {
+        }), /*#__PURE__*/React.createElement("input", {
           name: name,
           type: "hidden",
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
-        }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
+        }), /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
           appearance: this.props.appearance,
           enableAnimation: false,
           menuIsOpen: menuIsOpen,
           closeMenuOnSelect: true,
           autoFocus: autoFocus,
-          instanceId: id,
+          inputId: id,
           isDisabled: isDisabled,
           onBlur: this.onSelectBlur,
           onFocus: this.onSelectFocus,

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

@@ -18,20 +18,20 @@ var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("../internal");
+var _clearButton = _interopRequireDefault(require("../internal/clear-button"));
 var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _timePicker = _interopRequireDefault(require("./time-picker"));
 var _utils = require("./utils");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 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; } /** @jsx jsx */
+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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.0";
+var packageVersion = "13.0.2";
 var isInvalidBorderStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
 });
@@ -305,18 +305,20 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
       var notFocusedOrIsDisabled = !(isFocused || isDisabled);
-      return (0, _react2.jsx)("div", (0, _extends2.default)({
+      var ariaLabelledbyId = id && "label--".concat(id);
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
       }, innerProps, {
+        "aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
         "data-testid": testId
-      }), (0, _react2.jsx)("input", {
+      }), /*#__PURE__*/_react.default.createElement("input", {
         name: name,
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), (0, _react2.jsx)("div", {
+      }), /*#__PURE__*/_react.default.createElement("div", {
         css: datePickerContainerStyles
-      }, (0, _react2.jsx)(_datePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({}, bothProps, {
         autoFocus: autoFocus,
         dateFormat: dateFormat,
         hideIcon: true,
@@ -326,9 +328,9 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
         value: dateValue,
         locale: locale,
         testId: testId && "".concat(testId, "--datepicker")
-      }, datePickerProps))), (0, _react2.jsx)("div", {
+      }, datePickerProps))), /*#__PURE__*/_react.default.createElement("div", {
         css: timePickerContainerStyles
-      }, (0, _react2.jsx)(_timePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, /*#__PURE__*/_react.default.createElement(_timePicker.default, (0, _extends2.default)({}, bothProps, {
         hideIcon: true,
         onChange: this.onTimeChange,
         selectProps: mergedTimePickerSelectProps,
@@ -338,17 +340,13 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
         timeFormat: timeFormat,
         locale: locale,
         testId: testId && "".concat(testId, "--timepicker")
-      }, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
-        css: iconContainerStyles,
+      }, timePickerProps))), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_clearButton.default, {
+        inputId: id,
+        buttonStyles: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),
-        tabIndex: -1,
-        type: "button"
-      }, (0, _react2.jsx)(_selectClear.default, {
-        size: "small",
-        primaryColor: "inherit",
-        label: "clear"
-      })) : null);
+        primaryColor: "inherit"
+      }) : null);
     }
   }]);
   return DateTimePicker;

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

@@ -23,6 +23,7 @@ var _locale = require("@atlaskit/locale");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
+var _clearIndicator = _interopRequireDefault(require("../internal/clear-indicator"));
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
 var _singleValue = require("../internal/single-value");
@@ -37,7 +38,7 @@ 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.0";
+var packageVersion = "13.0.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -279,8 +280,10 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         DropdownIndicator: _internal.EmptyComponent,
         Menu: FixedLayerMenu,
         SingleValue: SingleValue
-      }, hideIcon && {
+      }, hideIcon ? {
         ClearIndicator: _internal.EmptyComponent
+      } : {
+        ClearIndicator: _clearIndicator.default
       });
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
@@ -314,7 +317,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         appearance: appearance,
         autoFocus: autoFocus,
         components: selectComponents,
-        instanceId: id,
+        inputId: id,
         isClearable: true,
         isDisabled: isDisabled,
         menuIsOpen: isOpen && !isDisabled,

package/dist/cjs/internal/clear-button.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+/**
+ * __Clear button__
+ */
+var ClearButton = function ClearButton(_ref) {
+  var inputId = _ref.inputId,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? 'small' : _ref$iconSize,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Clear' : _ref$label,
+    primaryColor = _ref.primaryColor,
+    buttonStyles = _ref.buttonStyles,
+    dataTestId = _ref.dataTestId,
+    onClick = _ref.onClick;
+  var labelId = inputId && "label--".concat(inputId);
+  var clearButtonId = inputId && "clear-btn--".concat(inputId);
+  return /*#__PURE__*/React.createElement("button", {
+    "aria-labelledby": inputId ? "".concat(clearButtonId, " ").concat(labelId) : "".concat(clearButtonId),
+    css: buttonStyles,
+    type: "button",
+    tabIndex: -1,
+    "data-testid": "".concat(dataTestId, "--clear--btn"),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    hidden: true,
+    id: clearButtonId
+  }, "Clear"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(_selectClear.default, {
+    size: iconSize,
+    label: inputId ? '' : label,
+    primaryColor: primaryColor
+  })));
+};
+var _default = exports.default = ClearButton;

package/dist/cjs/internal/clear-indicator.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _select = require("@atlaskit/select");
+var _clearButton = _interopRequireDefault(require("./clear-button"));
+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; }
+var buttonStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  all: 'unset',
+  outline: 'revert'
+});
+
+/**
+ * __Clear indicator__
+ * Overwrites the default `ClearIndicator` button with custom styles and attributes
+ *
+ */
+var ClearIndicator = function ClearIndicator(props) {
+  return /*#__PURE__*/React.createElement(_select.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
+      'aria-hidden': 'false'
+    })
+  }), /*#__PURE__*/React.createElement(_clearButton.default, {
+    buttonStyles: buttonStyles,
+    inputId: props.selectProps.inputId,
+    dataTestId: props.selectProps.testId
+  }));
+};
+var _default = exports.default = ClearIndicator;

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

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -15,11 +14,12 @@ import Select, { mergeStyles } from '@atlaskit/select';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
+import ClearIndicator from '../internal/clear-indicator';
 import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.0";
+const packageVersion = "13.0.2";
 function getValidDate(iso) {
   const date = parseISO(iso);
   return isValid(date) ? {
@@ -41,14 +41,14 @@ const menuStyles = css({
 const Menu = ({
   selectProps,
   innerProps
-}) => jsx(UNSAFE_LAYERING, {
+}) => /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
   isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
-}, jsx(FixedLayer, {
+}, /*#__PURE__*/React.createElement(FixedLayer, {
   inputValue: selectProps.inputValue,
   containerRef: selectProps.calendarContainerRef,
-  content: jsx("div", _extends({
+  content: /*#__PURE__*/React.createElement("div", _extends({
     css: menuStyles
-  }, innerProps), jsx(Calendar, _extends({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
+  }, innerProps), /*#__PURE__*/React.createElement(Calendar, _extends({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
     disabled: selectProps.calendarDisabled,
     disabledDateFilter: selectProps.calendarDisabledDateFilter,
     minDate: selectProps.calendarMinDate,
@@ -437,7 +437,9 @@ class DatePicker extends Component {
       DropdownIndicator: dropDownIcon,
       Menu,
       SingleValue,
-      ...(!showClearIndicator && {
+      ...(showClearIndicator ? {
+        ClearIndicator: ClearIndicator
+      } : {
         ClearIndicator: EmptyComponent
       })
     };
@@ -465,9 +467,10 @@ class DatePicker extends Component {
       previousMonthLabel
     };
     return (
+      /*#__PURE__*/
       // These event handlers must be on this element because the events come
       // from different child elements.
-      jsx("div", _extends({}, innerProps, {
+      React.createElement("div", _extends({}, innerProps, {
         role: "presentation",
         onBlur: this.onContainerBlur,
         onClick: this.onInputClick,
@@ -475,18 +478,18 @@ class DatePicker extends Component {
         onKeyDown: this.onInputKeyDown,
         ref: this.getContainerRef,
         "data-testid": testId && `${testId}--container`
-      }), jsx("input", {
+      }), /*#__PURE__*/React.createElement("input", {
         name: name,
         type: "hidden",
         value: value,
         "data-testid": testId && `${testId}--input`
-      }), jsx(Select, _extends({
+      }), /*#__PURE__*/React.createElement(Select, _extends({
         appearance: this.props.appearance,
         enableAnimation: false,
         menuIsOpen: menuIsOpen,
         closeMenuOnSelect: true,
         autoFocus: autoFocus,
-        instanceId: id,
+        inputId: id,
         isDisabled: isDisabled,
         onBlur: this.onSelectBlur,
         onFocus: this.onSelectFocus,

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

@@ -1,21 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
+import ClearButton from '../internal/clear-button';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.0";
+const packageVersion = "13.0.2";
 const isInvalidBorderStyles = css({
   borderColor: `var(--ds-border-danger, ${R400})`
 });
@@ -291,18 +290,20 @@ class DateTimePicker extends React.Component {
     // Don't use Date or TimePicker's because they can't be customised
     const isClearable = Boolean(dateValue || timeValue);
     const notFocusedOrIsDisabled = !(isFocused || isDisabled);
-    return jsx("div", _extends({
+    const ariaLabelledbyId = id && `label--${id}`;
+    return /*#__PURE__*/React.createElement("div", _extends({
       css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
     }, innerProps, {
+      "aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
       "data-testid": testId
-    }), jsx("input", {
+    }), /*#__PURE__*/React.createElement("input", {
       name: name,
       type: "hidden",
       value: value,
       "data-testid": testId && `${testId}--input`
-    }), jsx("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       css: datePickerContainerStyles
-    }, jsx(DatePicker, _extends({}, bothProps, {
+    }, /*#__PURE__*/React.createElement(DatePicker, _extends({}, bothProps, {
       autoFocus: autoFocus,
       dateFormat: dateFormat,
       hideIcon: true,
@@ -312,9 +313,9 @@ class DateTimePicker extends React.Component {
       value: dateValue,
       locale: locale,
       testId: testId && `${testId}--datepicker`
-    }, datePickerProps))), jsx("div", {
+    }, datePickerProps))), /*#__PURE__*/React.createElement("div", {
       css: timePickerContainerStyles
-    }, jsx(TimePicker, _extends({}, bothProps, {
+    }, /*#__PURE__*/React.createElement(TimePicker, _extends({}, bothProps, {
       hideIcon: true,
       onChange: this.onTimeChange,
       selectProps: mergedTimePickerSelectProps,
@@ -324,17 +325,13 @@ class DateTimePicker extends React.Component {
       timeFormat: timeFormat,
       locale: locale,
       testId: testId && `${testId}--timepicker`
-    }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
-      css: iconContainerStyles,
+    }, timePickerProps))), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(ClearButton, {
+      inputId: id,
+      buttonStyles: iconContainerStyles,
       onClick: this.onClear,
       "data-testid": testId && `${testId}--icon--container`,
-      tabIndex: -1,
-      type: "button"
-    }, jsx(SelectClearIcon, {
-      size: "small",
-      primaryColor: "inherit",
-      label: "clear"
-    })) : null);
+      primaryColor: "inherit"
+    }) : null);
   }
 }
 _defineProperty(DateTimePicker, "defaultProps", dateTimePickerDefaultProps);

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

@@ -11,12 +11,13 @@ import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/sele
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
+import ClearIndicator from '../internal/clear-indicator';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.0";
+const packageVersion = "13.0.2";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -254,8 +255,10 @@ class TimePicker extends React.Component {
       DropdownIndicator: EmptyComponent,
       Menu: FixedLayerMenu,
       SingleValue,
-      ...(hideIcon && {
+      ...(hideIcon ? {
         ClearIndicator: EmptyComponent
+      } : {
+        ClearIndicator: ClearIndicator
       })
     };
     const renderIconContainer = Boolean(!hideIcon && value);
@@ -289,7 +292,7 @@ class TimePicker extends React.Component {
       appearance: appearance,
       autoFocus: autoFocus,
       components: selectComponents,
-      instanceId: id,
+      inputId: id,
       isClearable: true,
       isDisabled: isDisabled,
       menuIsOpen: isOpen && !isDisabled,

package/dist/es2019/internal/clear-button.js

@@ -0,0 +1,36 @@
+import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+/**
+ * __Clear button__
+ */
+const ClearButton = ({
+  inputId,
+  iconSize = 'small',
+  label = 'Clear',
+  primaryColor,
+  buttonStyles,
+  dataTestId,
+  onClick
+}) => {
+  const labelId = inputId && `label--${inputId}`;
+  const clearButtonId = inputId && `clear-btn--${inputId}`;
+  return /*#__PURE__*/React.createElement("button", {
+    "aria-labelledby": inputId ? `${clearButtonId} ${labelId}` : `${clearButtonId}`,
+    css: buttonStyles,
+    type: "button",
+    tabIndex: -1,
+    "data-testid": `${dataTestId}--clear--btn`,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    hidden: true,
+    id: clearButtonId
+  }, "Clear"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(SelectClearIcon, {
+    size: iconSize,
+    label: inputId ? '' : label,
+    primaryColor: primaryColor
+  })));
+};
+export default ClearButton;

package/dist/es2019/internal/clear-indicator.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { css } from '@emotion/react';
+import { components } from '@atlaskit/select';
+import ClearButton from './clear-button';
+const buttonStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  all: 'unset',
+  outline: 'revert'
+});
+
+/**
+ * __Clear indicator__
+ * Overwrites the default `ClearIndicator` button with custom styles and attributes
+ *
+ */
+const ClearIndicator = props => {
+  return /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, props, {
+    innerProps: {
+      ...props.innerProps,
+      'aria-hidden': 'false'
+    }
+  }), /*#__PURE__*/React.createElement(ClearButton, {
+    buttonStyles: buttonStyles,
+    inputId: props.selectProps.inputId,
+    dataTestId: props.selectProps.testId
+  }));
+};
+export default ClearIndicator;