@atlaskit/datetime-picker 15.7.1 → 15.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/datetime-picker
 
+## 15.8.0
+
+### Minor Changes
+
+- [#161680](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161680)
+  [`e47891c352097`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e47891c352097) -
+  Update date picker to include latest primitives and css
+
 ## 15.7.1
 
 ### Patch Changes

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

@@ -43,7 +43,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.7.1";
+var packageVersion = "15.8.0";
 var dropdownIndicatorStyles = (0, _primitives.xcss)({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",

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

@@ -21,7 +21,6 @@ var _locale = require("@atlaskit/locale");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
-var _colors = require("@atlaskit/theme/colors");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _internal = require("../internal");
 var _datePickerMigration = require("../internal/date-picker-migration");
@@ -40,7 +39,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.7.1";
+var packageVersion = "15.8.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -56,31 +55,33 @@ var dropdownIndicatorStyles = (0, _primitives.xcss)({
   alignItems: 'center',
   justifyContent: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/platform/no-module-level-eval, @atlaskit/platform/ensure-feature-flag-prefix
 var CalendarIcon = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? _calendar.default :
 // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
 _calendar2.default;
-var iconContainerStyles = (0, _react2.css)({
+var iconContainerStyles = (0, _primitives.xcss)({
   display: 'flex',
   height: '100%',
   position: 'absolute',
   alignItems: 'center',
   flexBasis: 'inherit',
-  color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
-  insetBlockStart: 0,
-  insetInlineEnd: 0,
+  color: 'color.text.subtlest',
+  insetBlockStart: 'space.0',
+  insetInlineEnd: 'space.0',
   transition: "color 150ms",
-  '&:hover': {
-    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+  ':hover': {
+    color: 'color.text.subtle'
   }
 });
-var iconSpacingWithClearButtonStyles = (0, _react2.css)({
-  marginInlineEnd: "var(--ds-space-400, 2rem)"
+var iconSpacingWithClearButtonStyles = (0, _primitives.xcss)({
+  marginInlineEnd: 'space.400'
 });
-var iconSpacingWithoutClearButtonStylesNew = (0, _react2.css)({
-  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+var iconSpacingWithoutClearButtonStylesNew = (0, _primitives.xcss)({
+  marginInlineEnd: 'space.050'
 });
-var iconSpacingWithoutClearButtonStyles = (0, _react2.css)({
-  marginInlineEnd: "var(--ds-space-025, 0.125rem)"
+var iconSpacingWithoutClearButtonStyles = (0, _primitives.xcss)({
+  marginInlineEnd: 'space.025'
 });
 var calendarButtonFixedSizeStyles = (0, _primitives.xcss)({
   width: "".concat(32 / 14, "em"),
@@ -478,7 +479,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
   var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
   var clearIndicator = Icon;
 
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
   if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration')) {
     clearIndicator = function clearIndicator(props) {
       return (0, _react2.jsx)(_primitives.Box, {
@@ -553,17 +554,19 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
   var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.useId)());
   return (
     // These event handlers must be on this element because the events come
-    // from different child elements.
+    // from different child elements.  Cannot use Box primtive until we remove ...innerProps
     (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
       css: pickerContainerStyles,
-      role: "presentation",
+      "data-testid": testId && "".concat(testId, "--container"),
       onBlur: onContainerBlur,
       onFocus: onContainerFocus,
       onClick: onInputClick,
       onInput: onTextInput,
       onKeyDown: onInputKeyDown,
-      ref: getContainerRef,
-      "data-testid": testId && "".concat(testId, "--container")
+      ref: getContainerRef
+      // loophole role="presentation" as it solves the onclick, onfocus, etc. typecheck errors
+      ,
+      role: "presentation"
     }), (0, _react2.jsx)("input", {
       name: name,
       type: "hidden",
@@ -597,7 +600,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       placeholder: (0, _datePickerMigration.getPlaceholder)({
         placeholder: placeholder,
         l10n: l10n
-      }),
+      })
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+      ,
       styles: mergedStyles,
       value: initialValue
     }, selectProps, {
@@ -625,8 +630,10 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       onCalendarSelect: calendarProps.onCalendarSelect,
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-    })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
+    })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_primitives.Box, {
+      xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && (0, _react2.jsx)(_visuallyHidden.default, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({}, inputLabelId ? {

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

@@ -38,7 +38,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.7.1";
+var packageVersion = "15.8.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

@@ -37,7 +37,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.7.1";
+var packageVersion = "15.8.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.7.1";
+var packageVersion = "15.8.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -26,7 +26,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.7.1";
+const packageVersion = "15.8.0";
 const dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",

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

@@ -16,7 +16,6 @@ import { createLocalizationProvider } from '@atlaskit/locale';
 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';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
@@ -25,7 +24,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.7.1";
+const packageVersion = "15.8.0";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
@@ -41,31 +40,33 @@ const dropdownIndicatorStyles = xcss({
   alignItems: 'center',
   justifyContent: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/platform/no-module-level-eval, @atlaskit/platform/ensure-feature-flag-prefix
 const CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
 // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
 CalendarIconOld;
-const iconContainerStyles = css({
+const iconContainerStyles = xcss({
   display: 'flex',
   height: '100%',
   position: 'absolute',
   alignItems: 'center',
   flexBasis: 'inherit',
-  color: `var(--ds-text-subtlest, ${N70})`,
-  insetBlockStart: 0,
-  insetInlineEnd: 0,
+  color: 'color.text.subtlest',
+  insetBlockStart: 'space.0',
+  insetInlineEnd: 'space.0',
   transition: `color 150ms`,
-  '&:hover': {
-    color: `var(--ds-text-subtle, ${N500})`
+  ':hover': {
+    color: 'color.text.subtle'
   }
 });
-const iconSpacingWithClearButtonStyles = css({
-  marginInlineEnd: "var(--ds-space-400, 2rem)"
+const iconSpacingWithClearButtonStyles = xcss({
+  marginInlineEnd: 'space.400'
 });
-const iconSpacingWithoutClearButtonStylesNew = css({
-  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+const iconSpacingWithoutClearButtonStylesNew = xcss({
+  marginInlineEnd: 'space.050'
 });
-const iconSpacingWithoutClearButtonStyles = css({
-  marginInlineEnd: "var(--ds-space-025, 0.125rem)"
+const iconSpacingWithoutClearButtonStyles = xcss({
+  marginInlineEnd: 'space.025'
 });
 const calendarButtonFixedSizeStyles = xcss({
   width: `${32 / 14}em`,
@@ -404,7 +405,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
   let clearIndicator = Icon;
 
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
   if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
     clearIndicator = props => jsx(Box, {
       xcss: dropdownIndicatorStyles
@@ -479,17 +480,19 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const openCalendarLabelId = `open-calendar-label--${useId()}`;
   return (
     // These event handlers must be on this element because the events come
-    // from different child elements.
+    // from different child elements.  Cannot use Box primtive until we remove ...innerProps
     jsx("div", _extends({}, innerProps, {
       css: pickerContainerStyles,
-      role: "presentation",
+      "data-testid": testId && `${testId}--container`,
       onBlur: onContainerBlur,
       onFocus: onContainerFocus,
       onClick: onInputClick,
       onInput: onTextInput,
       onKeyDown: onInputKeyDown,
-      ref: getContainerRef,
-      "data-testid": testId && `${testId}--container`
+      ref: getContainerRef
+      // loophole role="presentation" as it solves the onclick, onfocus, etc. typecheck errors
+      ,
+      role: "presentation"
     }), jsx("input", {
       name: name,
       type: "hidden",
@@ -523,7 +526,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       placeholder: getPlaceholder({
         placeholder: placeholder,
         l10n: l10n
-      }),
+      })
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+      ,
       styles: mergedStyles,
       value: initialValue
     }, selectProps, {
@@ -551,8 +556,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       onCalendarSelect: calendarProps.onCalendarSelect,
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-    })), shouldShowCalendarButton && !isDisabled ? jsx("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
+    })), shouldShowCalendarButton && !isDisabled ? jsx(Box, {
+      xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && jsx(VisuallyHidden, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {

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

@@ -22,7 +22,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.7.1";
+const packageVersion = "15.8.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

@@ -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.7.1";
+const packageVersion = "15.8.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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.7.1";
+const packageVersion = "15.8.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

@@ -36,7 +36,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.7.1";
+var packageVersion = "15.8.0";
 var dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",

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

@@ -22,7 +22,6 @@ import { createLocalizationProvider } from '@atlaskit/locale';
 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';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
@@ -31,7 +30,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.7.1";
+var packageVersion = "15.8.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -47,31 +46,33 @@ var dropdownIndicatorStyles = xcss({
   alignItems: 'center',
   justifyContent: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/platform/no-module-level-eval, @atlaskit/platform/ensure-feature-flag-prefix
 var CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
 // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
 CalendarIconOld;
-var iconContainerStyles = css({
+var iconContainerStyles = xcss({
   display: 'flex',
   height: '100%',
   position: 'absolute',
   alignItems: 'center',
   flexBasis: 'inherit',
-  color: "var(--ds-text-subtlest, ".concat(N70, ")"),
-  insetBlockStart: 0,
-  insetInlineEnd: 0,
+  color: 'color.text.subtlest',
+  insetBlockStart: 'space.0',
+  insetInlineEnd: 'space.0',
   transition: "color 150ms",
-  '&:hover': {
-    color: "var(--ds-text-subtle, ".concat(N500, ")")
+  ':hover': {
+    color: 'color.text.subtle'
   }
 });
-var iconSpacingWithClearButtonStyles = css({
-  marginInlineEnd: "var(--ds-space-400, 2rem)"
+var iconSpacingWithClearButtonStyles = xcss({
+  marginInlineEnd: 'space.400'
 });
-var iconSpacingWithoutClearButtonStylesNew = css({
-  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+var iconSpacingWithoutClearButtonStylesNew = xcss({
+  marginInlineEnd: 'space.050'
 });
-var iconSpacingWithoutClearButtonStyles = css({
-  marginInlineEnd: "var(--ds-space-025, 0.125rem)"
+var iconSpacingWithoutClearButtonStyles = xcss({
+  marginInlineEnd: 'space.025'
 });
 var calendarButtonFixedSizeStyles = xcss({
   width: "".concat(32 / 14, "em"),
@@ -469,7 +470,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
   var clearIndicator = Icon;
 
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
   if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
     clearIndicator = function clearIndicator(props) {
       return jsx(Box, {
@@ -544,17 +545,19 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var openCalendarLabelId = "open-calendar-label--".concat(useId());
   return (
     // These event handlers must be on this element because the events come
-    // from different child elements.
+    // from different child elements.  Cannot use Box primtive until we remove ...innerProps
     jsx("div", _extends({}, innerProps, {
       css: pickerContainerStyles,
-      role: "presentation",
+      "data-testid": testId && "".concat(testId, "--container"),
       onBlur: onContainerBlur,
       onFocus: onContainerFocus,
       onClick: onInputClick,
       onInput: onTextInput,
       onKeyDown: onInputKeyDown,
-      ref: getContainerRef,
-      "data-testid": testId && "".concat(testId, "--container")
+      ref: getContainerRef
+      // loophole role="presentation" as it solves the onclick, onfocus, etc. typecheck errors
+      ,
+      role: "presentation"
     }), jsx("input", {
       name: name,
       type: "hidden",
@@ -588,7 +591,9 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       placeholder: getPlaceholder({
         placeholder: placeholder,
         l10n: l10n
-      }),
+      })
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+      ,
       styles: mergedStyles,
       value: initialValue
     }, selectProps, {
@@ -616,8 +621,10 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       onCalendarSelect: calendarProps.onCalendarSelect,
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-    })), shouldShowCalendarButton && !isDisabled ? jsx("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
+    })), shouldShowCalendarButton && !isDisabled ? jsx(Box, {
+      xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && jsx(VisuallyHidden, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {

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

@@ -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.7.1";
+var packageVersion = "15.8.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -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.7.1";
+var packageVersion = "15.8.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

package/dist/types/types.d.ts

@@ -67,6 +67,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     /**
      * Set the `aria-label` for the clear button.
      * Add the word "Clear" at the beginning of the clearControlLabel.
+     * For instance, for a field to set an appointment, use "Clear appointment date and time".
      */
     clearControlLabel?: string;
     /**
@@ -277,6 +278,7 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     /**
      * Set the `aria-label` for the clear button.
      * Add the word "Clear" at the beginning of the clearControlLabel.
+     * For instance, for a field to set an appointment, use "Clear appointment date and time".
      */
     clearControlLabel?: string;
     /**
@@ -409,6 +411,7 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
     /**
      * Set the `aria-label` for the clear button.
      * Add the word "Clear" at the beginning of the clearControlLabel.
+     * For instance, for a field to set an appointment, use "Clear appointment date and time".
      */
     clearControlLabel?: string;
     /**

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

@@ -67,6 +67,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     /**
      * Set the `aria-label` for the clear button.
      * Add the word "Clear" at the beginning of the clearControlLabel.
+     * For instance, for a field to set an appointment, use "Clear appointment date and time".
      */
     clearControlLabel?: string;
     /**
@@ -277,6 +278,7 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     /**
      * Set the `aria-label` for the clear button.
      * Add the word "Clear" at the beginning of the clearControlLabel.
+     * For instance, for a field to set an appointment, use "Clear appointment date and time".
      */
     clearControlLabel?: string;
     /**
@@ -409,6 +411,7 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
     /**
      * Set the `aria-label` for the clear button.
      * Add the word "Clear" at the beginning of the clearControlLabel.
+     * For instance, for a field to set an appointment, use "Clear appointment date and time".
      */
     clearControlLabel?: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "15.7.1",
+	"version": "15.8.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,9 +44,9 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/primitives": "^13.0.0",
-		"@atlaskit/select": "^18.4.0",
+		"@atlaskit/select": "^18.5.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",