@atlaskit/datetime-picker 15.8.0 → 15.9.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/datetime-picker
 
+## 15.9.1
+
+### Patch Changes
+
+- [#161638](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161638)
+  [`d2e5e5ce0053d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d2e5e5ce0053d) -
+  Use new API of layering without UNSAFE prefix
+
+## 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

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.8.0";
+var packageVersion = "15.9.1";
 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

@@ -39,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.8.0";
+var packageVersion = "15.9.1";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,

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.8.0";
+var packageVersion = "15.9.1";
 // 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.8.0";
+var packageVersion = "15.9.1";
 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.8.0";
+var packageVersion = "15.9.1";
 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/cjs/internal/menu.js

@@ -53,7 +53,7 @@ var Menu = exports.Menu = function Menu(_ref) {
     day = _getValidDate.day,
     month = _getValidDate.month,
     year = _getValidDate.year;
-  return (0, _react.jsx)(_layering.UNSAFE_LAYERING, {
+  return (0, _react.jsx)(_layering.Layering, {
     isDisabled: false
   }, (0, _react.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,

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

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

@@ -24,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.8.0";
+const packageVersion = "15.9.1";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,

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.8.0";
+const packageVersion = "15.9.1";
 // 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.8.0";
+const packageVersion = "15.9.1";
 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.8.0";
+const packageVersion = "15.9.1";
 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/es2019/internal/menu.js

@@ -7,7 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
-import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { Layering } from '@atlaskit/layering';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -50,7 +50,7 @@ export const Menu = ({
     month,
     year
   } = getValidDate([calendarValue, calendarView]);
-  return jsx(UNSAFE_LAYERING, {
+  return jsx(Layering, {
     isDisabled: false
   }, jsx(FixedLayer, {
     inputValue: selectProps.inputValue,

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

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

@@ -30,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.8.0";
+var packageVersion = "15.9.1";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,

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.8.0";
+var packageVersion = "15.9.1";
 // 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.8.0";
+var packageVersion = "15.9.1";
 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.8.0";
+var packageVersion = "15.9.1";
 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/esm/internal/menu.js

@@ -7,7 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
-import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { Layering } from '@atlaskit/layering';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -46,7 +46,7 @@ export var Menu = function Menu(_ref) {
     day = _getValidDate.day,
     month = _getValidDate.month,
     year = _getValidDate.year;
-  return jsx(UNSAFE_LAYERING, {
+  return jsx(Layering, {
     isDisabled: false
   }, jsx(FixedLayer, {
     inputValue: selectProps.inputValue,

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-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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "15.8.0",
+	"version": "15.9.1",
 	"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,7 +44,7 @@
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
-		"@atlaskit/primitives": "^13.0.0",
+		"@atlaskit/primitives": "^13.1.0",
 		"@atlaskit/select": "^18.5.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.2.0",
@@ -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",