@atlaskit/datetime-picker 15.5.2 → 15.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/datetime-picker
 
+## 15.7.0
+
+### Minor Changes
+
+- [#158791](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158791)
+  [`2dcea88bcb6c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2dcea88bcb6c7) -
+  Support React 18 SSR by removing use of react-uid
+
+## 15.6.0
+
+### Minor Changes
+
+- [#157307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157307)
+  [`a1e80ec0a5e4a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1e80ec0a5e4a) -
+  Enable new icons behind a feature flag.
+- [#157307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157307)
+  [`e6c2d403fadd0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6c2d403fadd0) -
+  Add clearControlLabel to datepicker component.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.5.2
 
 ### Patch Changes

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

@@ -17,10 +17,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
-var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
+var _useId = require("@atlaskit/ds-lib/use-id");
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
+var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 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");
@@ -40,11 +42,18 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.2";
+var packageVersion = "15.7.0";
+var dropdownIndicatorStyles = (0, _primitives.xcss)({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+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 datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -83,9 +92,16 @@ var iconContainerStyles = (0, _react2.css)({
 var iconSpacingWithClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = (0, _react2.css)({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = (0, _primitives.xcss)({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius',
   ':hover': {
@@ -422,6 +438,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         ariaDescribedBy = _this$props['aria-describedby'],
         _this$props$autoFocus = _this$props.autoFocus,
         autoFocus = _this$props$autoFocus === void 0 ? false : _this$props$autoFocus,
+        _this$props$clearCont = _this$props.clearControlLabel,
+        clearControlLabel = _this$props$clearCont === void 0 ? 'Clear' : _this$props$clearCont,
         _this$props$hideIcon = _this$props.hideIcon,
         hideIcon = _this$props$hideIcon === void 0 ? false : _this$props$hideIcon,
         _this$props$openCalen = _this$props.openCalendarLabel,
@@ -429,7 +447,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         disabled = _this$props.disabled,
         disabledDateFilter = _this$props.disabledDateFilter,
         _this$props$icon = _this$props.icon,
-        icon = _this$props$icon === void 0 ? _calendar.default : _this$props$icon,
+        Icon = _this$props$icon === void 0 ? CalendarIcon : _this$props$icon,
         _this$props$id = _this$props.id,
         id = _this$props$id === void 0 ? '' : _this$props$id,
         _this$props$innerProp = _this$props.innerProps,
@@ -467,7 +485,17 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       actualSelectInputValue = selectInputValue;
       var menuIsOpen = this.getIsOpen() && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
-      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+      var clearIndicator = Icon;
+
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if ((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, {
+            xcss: dropdownIndicatorStyles
+          }, (0, _react2.jsx)(Icon, props));
+        };
+      }
+      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
       var SingleValue = (0, _singleValue.makeSingleValue)({
         lang: this.props.locale
       });
@@ -554,6 +582,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           autoFocus: autoFocus,
+          clearControlLabel: clearControlLabel,
           closeMenuOnSelect: true
           // FOr some reason, this and the below `styles` type error _only_ show
           // up when you alter some of the properties in the `selectComponents`
@@ -604,13 +633,12 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           onCalendarSelect: calendarProps.onCalendarSelect,
           previousMonthLabel: previousMonthLabel,
           shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-        })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_reactUid.UID, {
-          name: function name(id) {
-            return "open-calendar-label--".concat(id);
-          }
-        }, function (openCalendarLabelId) {
+        })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_useId.IdProvider, {
+          prefix: "open-calendar-label--"
+        }, function (_ref3) {
+          var openCalendarLabelId = _ref3.id;
           return (0, _react2.jsx)("div", {
-            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : (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 ? {
@@ -624,12 +652,15 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
             testId: testId && "".concat(testId, "--open-calendar-button"),
             type: "button",
             backgroundColor: "color.background.neutral.subtle",
-            padding: "space.050",
-            xcss: calendarButtonStyles
-          }), (0, _react2.jsx)(_calendar.default, {
-            label: "",
+            padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+            xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+          }), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
+            label: ""
+          }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
+            color: "var(--ds-icon, #44546F)"
+          } : {
             primaryColor: "var(--ds-icon, #44546F)"
-          })));
+          }))));
         }) : null)
       );
     }

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

@@ -13,10 +13,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
-var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
+var _useId = require("@atlaskit/ds-lib/use-id");
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
+var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 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");
@@ -27,21 +29,18 @@ var _indicatorsContainer = require("../internal/indicators-container");
 var _menu = require("../internal/menu");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
-var _excluded = ["appearance", "autoFocus", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.2";
+var packageVersion = "15.7.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -50,6 +49,16 @@ var analyticsAttributes = {
 var pickerContainerStyles = (0, _react2.css)({
   position: 'relative'
 });
+var dropdownIndicatorStyles = (0, _primitives.xcss)({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+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)({
   display: 'flex',
   height: '100%',
@@ -67,9 +76,16 @@ var iconContainerStyles = (0, _react2.css)({
 var iconSpacingWithClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = (0, _react2.css)({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = (0, _primitives.xcss)({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius',
   ':hover': {
@@ -96,6 +112,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
     autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$clearControlLa = props.clearControlLabel,
+    clearControlLabel = _props$clearControlLa === void 0 ? 'Clear' : _props$clearControlLa,
     _props$hideIcon = props.hideIcon,
     hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
     _props$openCalendarLa = props.openCalendarLabel,
@@ -111,7 +129,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       return false;
     } : _props$disabledDateFi,
     _props$icon = props.icon,
-    icon = _props$icon === void 0 ? _calendar.default : _props$icon,
+    Icon = _props$icon === void 0 ? CalendarIcon : _props$icon,
     _props$id = props.id,
     id = _props$id === void 0 ? '' : _props$id,
     _props$innerProps = props.innerProps,
@@ -458,7 +476,17 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
   actualSelectInputValue = selectInputValue;
   var menuIsOpen = getIsOpen() && !isDisabled;
   var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
-  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+  var clearIndicator = Icon;
+
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if ((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, {
+        xcss: dropdownIndicatorStyles
+      }, (0, _react2.jsx)(Icon, props));
+    };
+  }
+  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
   var SingleValue = (0, _singleValue.makeSingleValue)({
     lang: propLocale
   });
@@ -522,7 +550,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
 
   // `label` takes precedence of the `inputLabel`
   var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, " , ").concat(openCalendarLabel) : openCalendarLabel;
-  var openCalendarLabelId = "open-calendar-label--".concat((0, _reactUid.useUID)());
+  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.
@@ -546,6 +574,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       "aria-describedby": ariaDescribedBy,
       "aria-label": label || undefined,
       autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
       closeMenuOnSelect: true
       // For some reason, this and the below `styles` type error _only_ show
       // up when you alter some of the properties in the `selectComponents`
@@ -597,7 +626,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
     })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : (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 ? {
@@ -611,12 +640,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       testId: testId && "".concat(testId, "--open-calendar-button"),
       type: "button",
       backgroundColor: "color.background.neutral.subtle",
-      padding: "space.050",
-      xcss: calendarButtonStyles
-    }), (0, _react2.jsx)(_calendar.default, {
-      label: "",
+      padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+      xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+    }), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
+      label: ""
+    }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
+      color: "var(--ds-icon, #44546F)"
+    } : {
       primaryColor: "var(--ds-icon, #44546F)"
-    }))) : null)
+    })))) : null)
   );
 });
 var _default = exports.default = DatePicker;

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

@@ -16,7 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
@@ -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.5.2";
+var packageVersion = "15.7.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -402,11 +402,11 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         "data-testid": testId && "".concat(testId, "--icon--container"),
         tabIndex: -1,
         type: "button"
-      }, (0, _react2.jsx)(_selectClear.default, {
-        size: "small",
-        primaryColor: "inherit",
+      }, (0, _react2.jsx)(_crossCircleSelectClear.default, {
+        LEGACY_size: "small",
+        color: "currentColor",
         label: clearControlLabel
-      })) : null);
+      }), ' ') : null);
     }
   }]);
   return DateTimePickerComponent;

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

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
@@ -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.5.2";
+var packageVersion = "15.7.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -389,10 +389,10 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": testId && "".concat(testId, "--icon--container"),
     tabIndex: -1,
     type: "button"
-  }, (0, _react2.jsx)(_selectClear.default, {
-    size: "small",
-    primaryColor: "inherit",
+  }, (0, _react2.jsx)(_crossCircleSelectClear.default, {
+    LEGACY_size: "small",
+    color: "currentColor",
     label: clearControlLabel
-  })) : null);
+  }), ' ') : 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.5.2";
+var packageVersion = "15.7.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

@@ -9,14 +9,13 @@ import { Component, createRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
-import { UID } from 'react-uid';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import { IdProvider } from '@atlaskit/ds-lib/use-id';
+import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
+import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -27,7 +26,17 @@ 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.5.2";
+const packageVersion = "15.7.0";
+const dropdownIndicatorStyles = xcss({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+CalendarIconOld;
 const datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -64,9 +73,16 @@ const iconContainerStyles = css({
 const iconSpacingWithClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+const iconSpacingWithoutClearButtonStylesNew = css({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 const iconSpacingWithoutClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+const calendarButtonFixedSizeStyles = xcss({
+  width: `${32 / 14}em`,
+  height: `${32 / 14}em`
+});
 const calendarButtonStyles = xcss({
   borderRadius: 'border.radius',
   ':hover': {
@@ -410,11 +426,12 @@ class DatePickerComponent extends Component {
       appearance = 'default',
       'aria-describedby': ariaDescribedBy,
       autoFocus = false,
+      clearControlLabel = 'Clear',
       hideIcon = false,
       openCalendarLabel = 'Open calendar',
       disabled,
       disabledDateFilter,
-      icon = CalendarIcon,
+      icon: Icon = CalendarIcon,
       id = '',
       innerProps = {},
       inputLabel = 'Date picker',
@@ -444,7 +461,15 @@ class DatePickerComponent extends Component {
     actualSelectInputValue = selectInputValue;
     const menuIsOpen = this.getIsOpen() && !isDisabled;
     const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
-    const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+    let clearIndicator = Icon;
+
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
+      clearIndicator = props => jsx(Box, {
+        xcss: dropdownIndicatorStyles
+      }, jsx(Icon, props));
+    }
+    const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
     const SingleValue = makeSingleValue({
       lang: this.props.locale
     });
@@ -533,6 +558,7 @@ class DatePickerComponent extends Component {
         "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
         autoFocus: autoFocus,
+        clearControlLabel: clearControlLabel,
         closeMenuOnSelect: true
         // FOr some reason, this and the below `styles` type error _only_ show
         // up when you alter some of the properties in the `selectComponents`
@@ -583,10 +609,12 @@ class DatePickerComponent extends Component {
         onCalendarSelect: calendarProps.onCalendarSelect,
         previousMonthLabel: previousMonthLabel,
         shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-      })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
-        name: id => `open-calendar-label--${id}`
-      }, openCalendarLabelId => jsx("div", {
-        css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
+        prefix: "open-calendar-label--"
+      }, ({
+        id: openCalendarLabelId
+      }) => jsx("div", {
+        css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
       }, inputLabelId && jsx(VisuallyHidden, {
         id: openCalendarLabelId
       }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -600,12 +628,15 @@ class DatePickerComponent extends Component {
         testId: testId && `${testId}--open-calendar-button`,
         type: "button",
         backgroundColor: "color.background.neutral.subtle",
-        padding: "space.050",
-        xcss: calendarButtonStyles
-      }), jsx(CalendarIcon, {
-        label: "",
+        padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+        xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+      }), jsx(CalendarIcon, _extends({
+        label: ""
+      }, fg('platform-visual-refresh-icon-ads-migration') ? {
+        color: "var(--ds-icon, #44546F)"
+      } : {
         primaryColor: "var(--ds-icon, #44546F)"
-      })))) : null)
+      }))))) : null)
     );
   }
 }