@atlaskit/datetime-picker 15.7.1 → 15.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/datetime-picker
 
+## 15.9.0
+
+### Minor Changes
+
+- [#161715](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161715)
+  [`fc083f8b29d92`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fc083f8b29d92) -
+  update datetime picker to use button component and primitives
+
+## 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.9.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.9.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.9.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

@@ -6,17 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _new = require("@atlaskit/button/new");
 var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
-var _colors = require("@atlaskit/theme/colors");
 var _internal = require("../internal");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
 var _ffComponent = require("../internal/ff-component");
@@ -29,15 +30,14 @@ var _excluded = ["selectProps"],
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
+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 DatePicker = (0, _ffComponent.componentWithCondition)(
+// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+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.9.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -46,31 +46,19 @@ var analyticsAttributes = {
 
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
-var datePickerContainerStyles = (0, _react2.css)({
+var datePickerContainerStyles = (0, _primitives.xcss)({
   flexBasis: '50%',
   flexGrow: 1,
   flexShrink: 0
 });
-var timePickerContainerStyles = (0, _react2.css)({
+var timePickerContainerStyles = (0, _primitives.xcss)({
   flexBasis: '50%',
   flexGrow: 1
 });
-var iconContainerStyles = (0, _react2.css)({
+var iconContainerStyles = (0, _primitives.xcss)({
   display: 'flex',
-  margin: "var(--ds-border-width, 1px)",
   alignItems: 'center',
-  flexBasis: 'inherit',
-  backgroundColor: 'inherit',
-  border: 'none',
-  color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
-  paddingBlockEnd: "var(--ds-space-075, 6px)",
-  paddingBlockStart: "var(--ds-space-075, 6px)",
-  paddingInlineEnd: "var(--ds-space-100, 8px)",
-  paddingInlineStart: "var(--ds-space-050, 4px)",
-  transition: "color 150ms",
-  '&:hover': {
-    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
-  }
+  flexBasis: 'inherit'
 });
 
 // react-select overrides (via @atlaskit/select).
@@ -303,21 +291,21 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   // Render DateTimePicker's IconContainer when a value has been filled
   // Don't use Date or TimePicker's because they can't be customised
   var isClearable = Boolean(dateValue || timeValue);
-  return (0, _react2.jsx)(_dateTimePickerContainer.DateTimePickerContainer, {
+  return /*#__PURE__*/_react.default.createElement(_dateTimePickerContainer.DateTimePickerContainer, {
     appearance: appearance,
     isDisabled: isDisabled,
     isFocused: isFocused,
     isInvalid: isInvalid,
     testId: testId,
     innerProps: innerProps
-  }, (0, _react2.jsx)("input", {
+  }, /*#__PURE__*/_react.default.createElement("input", {
     name: name,
     type: "hidden",
     value: value,
     "data-testid": testId && "".concat(testId, "--input")
-  }), (0, _react2.jsx)("div", {
-    css: datePickerContainerStyles
-  }, (0, _react2.jsx)(DatePicker, {
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: datePickerContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(DatePicker, {
     appearance: appearance,
     "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
@@ -352,9 +340,9 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
     value: dateValue,
     weekStartDay: datePickerProps.weekStartDay
-  })), (0, _react2.jsx)("div", {
-    css: timePickerContainerStyles
-  }, (0, _react2.jsx)(_timePicker.default, {
+  })), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: timePickerContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
     appearance: timePickerProps.appearance || appearance,
     "aria-describedby": timePickerAriaDescribedBy,
     autoFocus: timePickerProps.autoFocus,
@@ -383,16 +371,20 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     timeIsEditable: timePickerProps.timeIsEditable,
     times: timePickerProps.times,
     value: timeValue
-  })), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
-    css: iconContainerStyles,
+  })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: iconContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    label: clearControlLabel,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_crossCircleSelectClear.default, (0, _extends2.default)({}, iconProps, {
+        color: "var(--ds-text-subtlest, #626F86)",
+        LEGACY_size: "small"
+      }));
+    },
     onClick: onClear,
-    "data-testid": testId && "".concat(testId, "--icon--container"),
-    tabIndex: -1,
-    type: "button"
-  }, (0, _react2.jsx)(_crossCircleSelectClear.default, {
-    LEGACY_size: "small",
-    color: "currentColor",
-    label: clearControlLabel
-  }), ' ') : null);
+    testId: testId && "".concat(testId, "--icon--container"),
+    tabIndex: -1
+  })) : null);
 });
 var _default = exports.default = DateTimePicker;

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

package/dist/cjs/internal/date-time-picker-container.js

@@ -83,6 +83,8 @@ var DateTimePickerContainer = exports.DateTimePickerContainer = /*#__PURE__*/(0,
     innerProps = _ref.innerProps,
     testId = _ref.testId;
   var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+
+  // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: [baseContainerStyles, newBorderStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (isInvalid ? isInvalidHoverStyles : hoverStyles), appearance === 'none' && noBgStyles]
   }, innerProps, {

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.9.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.9.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.9.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

@@ -1,17 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { IconButton } from '@atlaskit/button/new';
 import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { mergeStyles } from '@atlaskit/select';
-import { N500, N70 } from '@atlaskit/theme/colors';
 import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
 import { componentWithCondition } from '../internal/ff-component';
@@ -19,9 +14,11 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePickerOld from './date-picker-class';
 import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
-const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
+const DatePicker = componentWithCondition(
+// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.7.1";
+const packageVersion = "15.9.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -30,31 +27,19 @@ const analyticsAttributes = {
 
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
-const datePickerContainerStyles = css({
+const datePickerContainerStyles = xcss({
   flexBasis: '50%',
   flexGrow: 1,
   flexShrink: 0
 });
-const timePickerContainerStyles = css({
+const timePickerContainerStyles = xcss({
   flexBasis: '50%',
   flexGrow: 1
 });
-const iconContainerStyles = css({
+const iconContainerStyles = xcss({
   display: 'flex',
-  margin: "var(--ds-border-width, 1px)",
   alignItems: 'center',
-  flexBasis: 'inherit',
-  backgroundColor: 'inherit',
-  border: 'none',
-  color: `var(--ds-text-subtlest, ${N70})`,
-  paddingBlockEnd: "var(--ds-space-075, 6px)",
-  paddingBlockStart: "var(--ds-space-075, 6px)",
-  paddingInlineEnd: "var(--ds-space-100, 8px)",
-  paddingInlineStart: "var(--ds-space-050, 4px)",
-  transition: `color 150ms`,
-  '&:hover': {
-    color: `var(--ds-text-subtle, ${N500})`
-  }
+  flexBasis: 'inherit'
 });
 
 // react-select overrides (via @atlaskit/select).
@@ -268,21 +253,21 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
   // Render DateTimePicker's IconContainer when a value has been filled
   // Don't use Date or TimePicker's because they can't be customised
   const isClearable = Boolean(dateValue || timeValue);
-  return jsx(DateTimePickerContainer, {
+  return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
     appearance: appearance,
     isDisabled: isDisabled,
     isFocused: isFocused,
     isInvalid: isInvalid,
     testId: testId,
     innerProps: innerProps
-  }, jsx("input", {
+  }, /*#__PURE__*/React.createElement("input", {
     name: name,
     type: "hidden",
     value: value,
     "data-testid": testId && `${testId}--input`
-  }), jsx("div", {
-    css: datePickerContainerStyles
-  }, jsx(DatePicker, {
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: datePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(DatePicker, {
     appearance: appearance,
     "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
@@ -317,9 +302,9 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     testId: testId && `${testId}--datepicker` || datePickerProps.testId,
     value: dateValue,
     weekStartDay: datePickerProps.weekStartDay
-  })), jsx("div", {
-    css: timePickerContainerStyles
-  }, jsx(TimePicker, {
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: timePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(TimePicker, {
     appearance: timePickerProps.appearance || appearance,
     "aria-describedby": timePickerAriaDescribedBy,
     autoFocus: timePickerProps.autoFocus,
@@ -348,16 +333,18 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     timeIsEditable: timePickerProps.timeIsEditable,
     times: timePickerProps.times,
     value: timeValue
-  })), isClearable && !isDisabled ? jsx("button", {
-    css: iconContainerStyles,
+  })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
+    xcss: iconContainerStyles
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: clearControlLabel,
+    icon: iconProps => /*#__PURE__*/React.createElement(SelectClearIcon, _extends({}, iconProps, {
+      color: "var(--ds-text-subtlest, #626F86)",
+      LEGACY_size: "small"
+    })),
     onClick: onClear,
-    "data-testid": testId && `${testId}--icon--container`,
-    tabIndex: -1,
-    type: "button"
-  }, jsx(SelectClearIcon, {
-    LEGACY_size: "small",
-    color: "currentColor",
-    label: clearControlLabel
-  }), ' ') : null);
+    testId: testId && `${testId}--icon--container`,
+    tabIndex: -1
+  })) : 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.7.1";
+const packageVersion = "15.9.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/date-time-picker-container.js

@@ -76,6 +76,8 @@ export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
   testId
 }, ref) => {
   const notFocusedOrIsDisabled = !(isFocused || isDisabled);
+
+  // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
   return jsx("div", _extends({
     css: [baseContainerStyles, newBorderStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (isInvalid ? isInvalidHoverStyles : hoverStyles), appearance === 'none' && noBgStyles]
   }, innerProps, {

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.9.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.9.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.9.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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -5,20 +6,14 @@ var _excluded = ["selectProps"],
   _excluded2 = ["selectProps"];
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { IconButton } from '@atlaskit/button/new';
 import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { mergeStyles } from '@atlaskit/select';
-import { N500, N70 } from '@atlaskit/theme/colors';
 import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
 import { componentWithCondition } from '../internal/ff-component';
@@ -26,11 +21,13 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePickerOld from './date-picker-class';
 import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
-var DatePicker = componentWithCondition(function () {
+var DatePicker = componentWithCondition(
+// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.7.1";
+var packageVersion = "15.9.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -39,31 +36,19 @@ var analyticsAttributes = {
 
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
-var datePickerContainerStyles = css({
+var datePickerContainerStyles = xcss({
   flexBasis: '50%',
   flexGrow: 1,
   flexShrink: 0
 });
-var timePickerContainerStyles = css({
+var timePickerContainerStyles = xcss({
   flexBasis: '50%',
   flexGrow: 1
 });
-var iconContainerStyles = css({
+var iconContainerStyles = xcss({
   display: 'flex',
-  margin: "var(--ds-border-width, 1px)",
   alignItems: 'center',
-  flexBasis: 'inherit',
-  backgroundColor: 'inherit',
-  border: 'none',
-  color: "var(--ds-text-subtlest, ".concat(N70, ")"),
-  paddingBlockEnd: "var(--ds-space-075, 6px)",
-  paddingBlockStart: "var(--ds-space-075, 6px)",
-  paddingInlineEnd: "var(--ds-space-100, 8px)",
-  paddingInlineStart: "var(--ds-space-050, 4px)",
-  transition: "color 150ms",
-  '&:hover': {
-    color: "var(--ds-text-subtle, ".concat(N500, ")")
-  }
+  flexBasis: 'inherit'
 });
 
 // react-select overrides (via @atlaskit/select).
@@ -296,21 +281,21 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // Render DateTimePicker's IconContainer when a value has been filled
   // Don't use Date or TimePicker's because they can't be customised
   var isClearable = Boolean(dateValue || timeValue);
-  return jsx(DateTimePickerContainer, {
+  return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
     appearance: appearance,
     isDisabled: isDisabled,
     isFocused: isFocused,
     isInvalid: isInvalid,
     testId: testId,
     innerProps: innerProps
-  }, jsx("input", {
+  }, /*#__PURE__*/React.createElement("input", {
     name: name,
     type: "hidden",
     value: value,
     "data-testid": testId && "".concat(testId, "--input")
-  }), jsx("div", {
-    css: datePickerContainerStyles
-  }, jsx(DatePicker, {
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: datePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(DatePicker, {
     appearance: appearance,
     "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
@@ -345,9 +330,9 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
     value: dateValue,
     weekStartDay: datePickerProps.weekStartDay
-  })), jsx("div", {
-    css: timePickerContainerStyles
-  }, jsx(TimePicker, {
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: timePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(TimePicker, {
     appearance: timePickerProps.appearance || appearance,
     "aria-describedby": timePickerAriaDescribedBy,
     autoFocus: timePickerProps.autoFocus,
@@ -376,16 +361,20 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     timeIsEditable: timePickerProps.timeIsEditable,
     times: timePickerProps.times,
     value: timeValue
-  })), isClearable && !isDisabled ? jsx("button", {
-    css: iconContainerStyles,
+  })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
+    xcss: iconContainerStyles
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: clearControlLabel,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(SelectClearIcon, _extends({}, iconProps, {
+        color: "var(--ds-text-subtlest, #626F86)",
+        LEGACY_size: "small"
+      }));
+    },
     onClick: onClear,
-    "data-testid": testId && "".concat(testId, "--icon--container"),
-    tabIndex: -1,
-    type: "button"
-  }, jsx(SelectClearIcon, {
-    LEGACY_size: "small",
-    color: "currentColor",
-    label: clearControlLabel
-  }), ' ') : null);
+    testId: testId && "".concat(testId, "--icon--container"),
+    tabIndex: -1
+  })) : 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.7.1";
+var packageVersion = "15.9.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/date-time-picker-container.js

@@ -75,6 +75,8 @@ export var DateTimePickerContainer = /*#__PURE__*/forwardRef(function (_ref, ref
     innerProps = _ref.innerProps,
     testId = _ref.testId;
   var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+
+  // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
   return jsx("div", _extends({
     css: [baseContainerStyles, newBorderStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (isInvalid ? isInvalidHoverStyles : hoverStyles), appearance === 'none' && noBgStyles]
   }, innerProps, {

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

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
 import { type DateTimePickerBaseProps } from '../types';
 export declare const datePickerDefaultAriaLabel = "Date";

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/components/date-time-picker-fc.d.ts

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
 import { type DateTimePickerBaseProps } from '../types';
 export declare const datePickerDefaultAriaLabel = "Date";

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.9.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,6 +36,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/button": "^20.3.1",
 		"@atlaskit/calendar": "^15.1.0",
 		"@atlaskit/ds-lib": "^3.1.0",
 		"@atlaskit/icon": "^22.24.0",
@@ -43,10 +44,10 @@
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
-		"@atlaskit/primitives": "^13.0.0",
-		"@atlaskit/select": "^18.4.0",
+		"@atlaskit/primitives": "^13.1.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",
@@ -59,7 +60,6 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/codemod-utils": "4.2.4",
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.5.0",