@atlaskit/datetime-picker 13.0.0 → 13.0.2

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

@@ -11,9 +11,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
 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';
@@ -26,11 +25,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';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.0";
+var packageVersion = "13.0.2";
 function getValidDate(iso) {
   var date = parseISO(iso);
   return isValid(date) ? {
@@ -52,14 +52,14 @@ var menuStyles = css({
 var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
-  return jsx(UNSAFE_LAYERING, {
+  return /*#__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,
@@ -430,7 +430,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         DropdownIndicator: dropDownIcon,
         Menu: Menu,
         SingleValue: SingleValue
-      }, !showClearIndicator && {
+      }, showClearIndicator ? {
+        ClearIndicator: ClearIndicator
+      } : {
         ClearIndicator: EmptyComponent
       });
       var _selectProps$styles = selectProps.styles,
@@ -456,9 +458,10 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         previousMonthLabel: 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,
@@ -466,18 +469,18 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           onKeyDown: this.onInputKeyDown,
           ref: this.getContainerRef,
           "data-testid": testId && "".concat(testId, "--container")
-        }), jsx("input", {
+        }), /*#__PURE__*/React.createElement("input", {
           name: name,
           type: "hidden",
           value: value,
           "data-testid": testId && "".concat(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/esm/components/date-time-picker.js

@@ -10,22 +10,21 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/** @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';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.0";
+var packageVersion = "13.0.2";
 var isInvalidBorderStyles = css({
   borderColor: "var(--ds-border-danger, ".concat(R400, ")")
 });
@@ -299,18 +298,20 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
       var notFocusedOrIsDisabled = !(isFocused || isDisabled);
-      return jsx("div", _extends({
+      var ariaLabelledbyId = id && "label--".concat(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 && "".concat(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,
@@ -320,9 +321,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         value: dateValue,
         locale: locale,
         testId: testId && "".concat(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,
@@ -332,17 +333,13 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         timeFormat: timeFormat,
         locale: locale,
         testId: testId && "".concat(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 && "".concat(testId, "--icon--container"),
-        tabIndex: -1,
-        type: "button"
-      }, jsx(SelectClearIcon, {
-        size: "small",
-        primaryColor: "inherit",
-        label: "clear"
-      })) : null);
+        primaryColor: "inherit"
+      }) : null);
     }
   }]);
   return DateTimePicker;

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

@@ -24,12 +24,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';
 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',
@@ -271,8 +272,10 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         DropdownIndicator: EmptyComponent,
         Menu: FixedLayerMenu,
         SingleValue: SingleValue
-      }, hideIcon && {
+      }, hideIcon ? {
         ClearIndicator: EmptyComponent
+      } : {
+        ClearIndicator: ClearIndicator
       });
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = mergeStyles(selectStyles, {
@@ -306,7 +309,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         appearance: appearance,
         autoFocus: autoFocus,
         components: selectComponents,
-        instanceId: id,
+        inputId: id,
         isClearable: true,
         isDisabled: isDisabled,
         menuIsOpen: isOpen && !isDisabled,

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

@@ -0,0 +1,37 @@
+import SelectClearIcon from '@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(SelectClearIcon, {
+    size: iconSize,
+    label: inputId ? '' : label,
+    primaryColor: primaryColor
+  })));
+};
+export default ClearButton;

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

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { css } from '@emotion/react';
+import { components } from '@atlaskit/select';
+import ClearButton from './clear-button';
+var buttonStyles = 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(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
+      'aria-hidden': 'false'
+    })
+  }), /*#__PURE__*/React.createElement(ClearButton, {
+    buttonStyles: buttonStyles,
+    inputId: props.selectProps.inputId,
+    dataTestId: props.selectProps.testId
+  }));
+};
+export default ClearIndicator;

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

@@ -50,9 +50,8 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      */
     icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
     /**
-     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
-     *
-     * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * Set the id of the field.
+     * Associates a `<label></label>` with the field.
      */
     id?: string;
     /**
@@ -268,7 +267,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "autoFocus" | "disabled" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -288,5 +287,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "autoFocus" | "disabled" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -22,8 +22,7 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     defaultValue?: string;
     /**
-     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
-     * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * Set the id of the field.
      */
     id?: string;
     /**
@@ -194,7 +193,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): jsx.JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "testId" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -214,5 +213,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -27,7 +27,8 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     formatDisplayLabel?: (time: string, timeFormat: string) => string;
     /**
-     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`. Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * Set the id of the field.
+     * Associates a `<label></label>` with the field.
      */
     id?: string;
     /**
@@ -188,7 +189,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -208,5 +209,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" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/internal/clear-button.d.ts

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx, SerializedStyles } from '@emotion/react';
+import { Size } from '@atlaskit/icon';
+interface ClearButtonProps {
+    inputId?: string;
+    iconSize?: Size;
+    primaryColor?: string;
+    label?: string;
+    buttonStyles?: SerializedStyles;
+    dataTestId?: string;
+    onClick?: () => void;
+}
+/**
+ * __Clear button__
+ */
+declare const ClearButton: ({ inputId, iconSize, label, primaryColor, buttonStyles, dataTestId, onClick, }: ClearButtonProps) => jsx.JSX.Element;
+export default ClearButton;

package/dist/types/internal/clear-indicator.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { ClearIndicatorProps } from '@atlaskit/select';
+/**
+ * __Clear indicator__
+ * Overwrites the default `ClearIndicator` button with custom styles and attributes
+ *
+ */
+declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
+export default ClearIndicator;

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

@@ -50,9 +50,8 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      */
     icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
     /**
-     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
-     *
-     * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * Set the id of the field.
+     * Associates a `<label></label>` with the field.
      */
     id?: string;
     /**
@@ -268,7 +267,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "autoFocus" | "disabled" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -288,5 +287,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "autoFocus" | "disabled" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -22,8 +22,7 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     defaultValue?: string;
     /**
-     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
-     * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * Set the id of the field.
      */
     id?: string;
     /**
@@ -194,7 +193,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): jsx.JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "testId" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -214,5 +213,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -27,7 +27,8 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     formatDisplayLabel?: (time: string, timeFormat: string) => string;
     /**
-     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`. Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * Set the id of the field.
+     * Associates a `<label></label>` with the field.
      */
     id?: string;
     /**
@@ -188,7 +189,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -208,5 +209,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" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/internal/clear-button.d.ts

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx, SerializedStyles } from '@emotion/react';
+import { Size } from '@atlaskit/icon';
+interface ClearButtonProps {
+    inputId?: string;
+    iconSize?: Size;
+    primaryColor?: string;
+    label?: string;
+    buttonStyles?: SerializedStyles;
+    dataTestId?: string;
+    onClick?: () => void;
+}
+/**
+ * __Clear button__
+ */
+declare const ClearButton: ({ inputId, iconSize, label, primaryColor, buttonStyles, dataTestId, onClick, }: ClearButtonProps) => jsx.JSX.Element;
+export default ClearButton;

package/dist/types-ts4.5/internal/clear-indicator.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { ClearIndicatorProps } from '@atlaskit/select';
+/**
+ * __Clear indicator__
+ * Overwrites the default `ClearIndicator` button with custom styles and attributes
+ *
+ */
+declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
+export default ClearIndicator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "13.0.0",
+  "version": "13.0.2",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/select": "^17.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -54,15 +54,16 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.16.0",
+    "@af/integration-testing": "*",
+    "@atlaskit/button": "^16.17.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^9.0.0",
-    "@atlaskit/modal-dialog": "^12.8.0",
+    "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/popup": "^1.11.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.6.0",
+    "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",