@atlaskit/datetime-picker 15.5.1 → 15.6.0

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

@@ -8,7 +8,7 @@ import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
@@ -21,7 +21,7 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.5.1";
+const packageVersion = "15.6.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -355,9 +355,9 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     tabIndex: -1,
     type: "button"
   }, jsx(SelectClearIcon, {
-    size: "small",
-    primaryColor: "inherit",
+    LEGACY_size: "small",
+    color: "currentColor",
     label: clearControlLabel
-  })) : null);
+  }), ' ') : null);
 });
 export default DateTimePicker;

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

@@ -11,7 +11,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 = "15.5.1";
+const packageVersion = "15.6.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -24,9 +24,11 @@ import { isValid, parseISO } from 'date-fns';
 // the horizon
 import { UID } from 'react-uid';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
+import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -37,7 +39,17 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
+var dropdownIndicatorStyles = xcss({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+CalendarIconOld;
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -76,9 +88,16 @@ var iconContainerStyles = css({
 var iconSpacingWithClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = css({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = xcss({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = xcss({
   borderRadius: 'border.radius',
   ':hover': {
@@ -415,6 +434,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         ariaDescribedBy = _this$props['aria-describedby'],
         _this$props$autoFocus = _this$props.autoFocus,
         autoFocus = _this$props$autoFocus === void 0 ? false : _this$props$autoFocus,
+        _this$props$clearCont = _this$props.clearControlLabel,
+        clearControlLabel = _this$props$clearCont === void 0 ? 'Clear' : _this$props$clearCont,
         _this$props$hideIcon = _this$props.hideIcon,
         hideIcon = _this$props$hideIcon === void 0 ? false : _this$props$hideIcon,
         _this$props$openCalen = _this$props.openCalendarLabel,
@@ -422,7 +443,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         disabled = _this$props.disabled,
         disabledDateFilter = _this$props.disabledDateFilter,
         _this$props$icon = _this$props.icon,
-        icon = _this$props$icon === void 0 ? CalendarIcon : _this$props$icon,
+        Icon = _this$props$icon === void 0 ? CalendarIcon : _this$props$icon,
         _this$props$id = _this$props.id,
         id = _this$props$id === void 0 ? '' : _this$props$id,
         _this$props$innerProp = _this$props.innerProps,
@@ -460,7 +481,17 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       actualSelectInputValue = selectInputValue;
       var menuIsOpen = this.getIsOpen() && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
-      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+      var clearIndicator = Icon;
+
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
+        clearIndicator = function clearIndicator(props) {
+          return jsx(Box, {
+            xcss: dropdownIndicatorStyles
+          }, jsx(Icon, props));
+        };
+      }
+      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
       var SingleValue = makeSingleValue({
         lang: this.props.locale
       });
@@ -547,6 +578,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           autoFocus: autoFocus,
+          clearControlLabel: clearControlLabel,
           closeMenuOnSelect: true
           // FOr some reason, this and the below `styles` type error _only_ show
           // up when you alter some of the properties in the `selectComponents`
@@ -603,7 +635,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           }
         }, function (openCalendarLabelId) {
           return jsx("div", {
-            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
           }, inputLabelId && jsx(VisuallyHidden, {
             id: openCalendarLabelId
           }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -617,12 +649,15 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
             testId: testId && "".concat(testId, "--open-calendar-button"),
             type: "button",
             backgroundColor: "color.background.neutral.subtle",
-            padding: "space.050",
-            xcss: calendarButtonStyles
-          }), jsx(CalendarIcon, {
-            label: "",
+            padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+            xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+          }), jsx(CalendarIcon, _extends({
+            label: ""
+          }, fg('platform-visual-refresh-icon-ads-migration') ? {
+            color: "var(--ds-icon, #44546F)"
+          } : {
             primaryColor: "var(--ds-icon, #44546F)"
-          })));
+          }))));
         }) : null)
       );
     }

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "autoFocus", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
 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; }
 /**
@@ -19,9 +19,11 @@ import { isValid, parseISO } from 'date-fns';
 // the horizon
 import { useUID } from 'react-uid';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
+import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -32,7 +34,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -41,6 +43,16 @@ var analyticsAttributes = {
 var pickerContainerStyles = css({
   position: 'relative'
 });
+var dropdownIndicatorStyles = xcss({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+CalendarIconOld;
 var iconContainerStyles = css({
   display: 'flex',
   height: '100%',
@@ -58,9 +70,16 @@ var iconContainerStyles = css({
 var iconSpacingWithClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = css({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = xcss({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = xcss({
   borderRadius: 'border.radius',
   ':hover': {
@@ -87,6 +106,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
     autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$clearControlLa = props.clearControlLabel,
+    clearControlLabel = _props$clearControlLa === void 0 ? 'Clear' : _props$clearControlLa,
     _props$hideIcon = props.hideIcon,
     hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
     _props$openCalendarLa = props.openCalendarLabel,
@@ -102,7 +123,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       return false;
     } : _props$disabledDateFi,
     _props$icon = props.icon,
-    icon = _props$icon === void 0 ? CalendarIcon : _props$icon,
+    Icon = _props$icon === void 0 ? CalendarIcon : _props$icon,
     _props$id = props.id,
     id = _props$id === void 0 ? '' : _props$id,
     _props$innerProps = props.innerProps,
@@ -449,7 +470,17 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   actualSelectInputValue = selectInputValue;
   var menuIsOpen = getIsOpen() && !isDisabled;
   var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
-  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+  var clearIndicator = Icon;
+
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
+    clearIndicator = function clearIndicator(props) {
+      return jsx(Box, {
+        xcss: dropdownIndicatorStyles
+      }, jsx(Icon, props));
+    };
+  }
+  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
   var SingleValue = makeSingleValue({
     lang: propLocale
   });
@@ -537,6 +568,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       "aria-describedby": ariaDescribedBy,
       "aria-label": label || undefined,
       autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
       closeMenuOnSelect: true
       // For some reason, this and the below `styles` type error _only_ show
       // up when you alter some of the properties in the `selectComponents`
@@ -588,7 +620,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
     })), shouldShowCalendarButton && !isDisabled ? jsx("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && jsx(VisuallyHidden, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -602,12 +634,15 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       testId: testId && "".concat(testId, "--open-calendar-button"),
       type: "button",
       backgroundColor: "color.background.neutral.subtle",
-      padding: "space.050",
-      xcss: calendarButtonStyles
-    }), jsx(CalendarIcon, {
-      label: "",
+      padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+      xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+    }), jsx(CalendarIcon, _extends({
+      label: ""
+    }, fg('platform-visual-refresh-icon-ads-migration') ? {
+      color: "var(--ds-icon, #44546F)"
+    } : {
       primaryColor: "var(--ds-icon, #44546F)"
-    }))) : null)
+    })))) : null)
   );
 });
 export default DatePicker;

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

@@ -19,7 +19,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
@@ -34,7 +34,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -399,10 +399,10 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         tabIndex: -1,
         type: "button"
       }, jsx(SelectClearIcon, {
-        size: "small",
-        primaryColor: "inherit",
+        LEGACY_size: "small",
+        color: "currentColor",
         label: clearControlLabel
-      })) : null);
+      }), ' ') : null);
     }
   }]);
   return DateTimePickerComponent;

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

@@ -15,7 +15,7 @@ import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
@@ -30,7 +30,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -383,9 +383,9 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     tabIndex: -1,
     type: "button"
   }, jsx(SelectClearIcon, {
-    size: "small",
-    primaryColor: "inherit",
+    LEGACY_size: "small",
+    color: "currentColor",
     label: clearControlLabel
-  })) : null);
+  }), ' ') : null);
 });
 export default DateTimePicker;

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

@@ -17,7 +17,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 = "15.5.1";
+var packageVersion = "15.6.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -97,7 +97,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -115,5 +115,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -26,5 +26,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<DatePic
     } & {
         inputValue?: string | undefined;
     }) | undefined;
-}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

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

@@ -9,7 +9,7 @@ declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerPr
     } & {
         inputValue?: string | undefined;
     }) | undefined;
-}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -18,7 +18,7 @@ declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerPr
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -36,5 +36,5 @@ declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerPr
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types/types.d.ts

@@ -64,6 +64,11 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Set the picker to autofocus on mount.
      */
     autoFocus?: boolean;
+    /**
+     * Set the `aria-label` for the clear button.
+     * Add the word "Clear" at the beginning of the clearControlLabel.
+     */
+    clearControlLabel?: string;
     /**
      * The default for `isOpen`. Will be `false` if not provided.
      *
@@ -270,7 +275,8 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      */
     autoFocus?: boolean;
     /**
-     * Set the aria-label for the clear button
+     * Set the `aria-label` for the clear button.
+     * Add the word "Clear" at the beginning of the clearControlLabel.
      */
     clearControlLabel?: string;
     /**
@@ -401,7 +407,8 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     autoFocus?: boolean;
     /**
-     * Set the `aria-label` for the clear icon button.
+     * Set the `aria-label` for the clear button.
+     * Add the word "Clear" at the beginning of the clearControlLabel.
      */
     clearControlLabel?: string;
     /**

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

@@ -97,7 +97,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -115,5 +115,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -26,5 +26,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<DatePic
     } & {
         inputValue?: string | undefined;
     }) | undefined;
-}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

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

@@ -9,7 +9,7 @@ declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerPr
     } & {
         inputValue?: string | undefined;
     }) | undefined;
-}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -18,7 +18,7 @@ declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerPr
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -36,5 +36,5 @@ declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerPr
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "value" | "testId" | "icon" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "autoFocus" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -64,6 +64,11 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Set the picker to autofocus on mount.
      */
     autoFocus?: boolean;
+    /**
+     * Set the `aria-label` for the clear button.
+     * Add the word "Clear" at the beginning of the clearControlLabel.
+     */
+    clearControlLabel?: string;
     /**
      * The default for `isOpen`. Will be `false` if not provided.
      *
@@ -270,7 +275,8 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      */
     autoFocus?: boolean;
     /**
-     * Set the aria-label for the clear button
+     * Set the `aria-label` for the clear button.
+     * Add the word "Clear" at the beginning of the clearControlLabel.
      */
     clearControlLabel?: string;
     /**
@@ -401,7 +407,8 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     autoFocus?: boolean;
     /**
-     * Set the `aria-label` for the clear icon button.
+     * Set the `aria-label` for the clear button.
+     * Add the word "Clear" at the beginning of the clearControlLabel.
      */
     clearControlLabel?: string;
     /**