@atlaskit/datetime-picker 15.5.2 → 15.7.0

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

@@ -8,14 +8,13 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
 // 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 { useUID } from 'react-uid';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import { useId } 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';
@@ -26,7 +25,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.5.2";
+const packageVersion = "15.7.0";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
@@ -35,6 +34,16 @@ const analyticsAttributes = {
 const pickerContainerStyles = css({
   position: 'relative'
 });
+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 iconContainerStyles = css({
   display: 'flex',
   height: '100%',
@@ -52,9 +61,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': {
@@ -80,13 +96,14 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     appearance = 'default',
     autoFocus = false,
+    clearControlLabel = 'Clear',
     hideIcon = false,
     openCalendarLabel = 'Open calendar',
     defaultIsOpen = false,
     defaultValue = '',
     disabled = [],
     disabledDateFilter = _ => false,
-    icon = CalendarIcon,
+    icon: Icon = CalendarIcon,
     id = '',
     innerProps = {},
     inputLabel = 'Date picker',
@@ -385,7 +402,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   actualSelectInputValue = selectInputValue;
   const menuIsOpen = getIsOpen() && !isDisabled;
   const showClearIndicator = Boolean((getterValue || 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: propLocale
   });
@@ -451,7 +476,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 
   // `label` takes precedence of the `inputLabel`
   const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel} , ${openCalendarLabel}` : openCalendarLabel;
-  const openCalendarLabelId = `open-calendar-label--${useUID()}`;
+  const openCalendarLabelId = `open-calendar-label--${useId()}`;
   return (
     // These event handlers must be on this element because the events come
     // from different child elements.
@@ -475,6 +500,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       "aria-describedby": ariaDescribedBy,
       "aria-label": label || undefined,
       autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
       closeMenuOnSelect: true
       // For some reason, this and the below `styles` type error _only_ show
       // up when you alter some of the properties in the `selectComponents`
@@ -526,7 +552,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
     })), shouldShowCalendarButton && !isDisabled ? jsx("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && jsx(VisuallyHidden, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -540,12 +566,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       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)
   );
 });
 export default DatePicker;

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

@@ -9,7 +9,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
@@ -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.5.2";
+const packageVersion = "15.7.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -364,10 +364,10 @@ class DateTimePickerComponent extends React.Component {
       tabIndex: -1,
       type: "button"
     }, jsx(SelectClearIcon, {
-      size: "small",
-      primaryColor: "inherit",
+      LEGACY_size: "small",
+      color: "currentColor",
       label: clearControlLabel
-    })) : null);
+    }), ' ') : null);
   }
 }
 _defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);

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

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

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

@@ -11,7 +11,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.5.2";
+const packageVersion = "15.7.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -19,14 +19,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';
@@ -37,7 +36,17 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.2";
+var packageVersion = "15.7.0";
+var dropdownIndicatorStyles = xcss({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+CalendarIconOld;
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -76,9 +85,16 @@ var iconContainerStyles = css({
 var iconSpacingWithClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = css({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = xcss({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = xcss({
   borderRadius: 'border.radius',
   ':hover': {
@@ -415,6 +431,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         ariaDescribedBy = _this$props['aria-describedby'],
         _this$props$autoFocus = _this$props.autoFocus,
         autoFocus = _this$props$autoFocus === void 0 ? false : _this$props$autoFocus,
+        _this$props$clearCont = _this$props.clearControlLabel,
+        clearControlLabel = _this$props$clearCont === void 0 ? 'Clear' : _this$props$clearCont,
         _this$props$hideIcon = _this$props.hideIcon,
         hideIcon = _this$props$hideIcon === void 0 ? false : _this$props$hideIcon,
         _this$props$openCalen = _this$props.openCalendarLabel,
@@ -422,7 +440,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         disabled = _this$props.disabled,
         disabledDateFilter = _this$props.disabledDateFilter,
         _this$props$icon = _this$props.icon,
-        icon = _this$props$icon === void 0 ? CalendarIcon : _this$props$icon,
+        Icon = _this$props$icon === void 0 ? CalendarIcon : _this$props$icon,
         _this$props$id = _this$props.id,
         id = _this$props$id === void 0 ? '' : _this$props$id,
         _this$props$innerProp = _this$props.innerProps,
@@ -460,7 +478,17 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       actualSelectInputValue = selectInputValue;
       var menuIsOpen = this.getIsOpen() && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
-      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+      var clearIndicator = Icon;
+
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
+        clearIndicator = function clearIndicator(props) {
+          return jsx(Box, {
+            xcss: dropdownIndicatorStyles
+          }, jsx(Icon, props));
+        };
+      }
+      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
       var SingleValue = makeSingleValue({
         lang: this.props.locale
       });
@@ -547,6 +575,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           autoFocus: autoFocus,
+          clearControlLabel: clearControlLabel,
           closeMenuOnSelect: true
           // FOr some reason, this and the below `styles` type error _only_ show
           // up when you alter some of the properties in the `selectComponents`
@@ -597,13 +626,12 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           onCalendarSelect: calendarProps.onCalendarSelect,
           previousMonthLabel: previousMonthLabel,
           shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-        })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
-          name: function name(id) {
-            return "open-calendar-label--".concat(id);
-          }
-        }, function (openCalendarLabelId) {
+        })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
+          prefix: "open-calendar-label--"
+        }, function (_ref3) {
+          var openCalendarLabelId = _ref3.id;
           return jsx("div", {
-            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
           }, inputLabelId && jsx(VisuallyHidden, {
             id: openCalendarLabelId
           }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -617,12 +645,15 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
             testId: testId && "".concat(testId, "--open-calendar-button"),
             type: "button",
             backgroundColor: "color.background.neutral.subtle",
-            padding: "space.050",
-            xcss: calendarButtonStyles
-          }), jsx(CalendarIcon, {
-            label: "",
+            padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+            xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+          }), jsx(CalendarIcon, _extends({
+            label: ""
+          }, fg('platform-visual-refresh-icon-ads-migration') ? {
+            color: "var(--ds-icon, #44546F)"
+          } : {
             primaryColor: "var(--ds-icon, #44546F)"
-          })));
+          }))));
         }) : null)
       );
     }

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "autoFocus", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -14,14 +14,13 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
 // 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 { useUID } from 'react-uid';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import { useId } 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';
@@ -32,7 +31,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.2";
+var packageVersion = "15.7.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -41,6 +40,16 @@ var analyticsAttributes = {
 var pickerContainerStyles = css({
   position: 'relative'
 });
+var dropdownIndicatorStyles = xcss({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+CalendarIconOld;
 var iconContainerStyles = css({
   display: 'flex',
   height: '100%',
@@ -58,9 +67,16 @@ var iconContainerStyles = css({
 var iconSpacingWithClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = css({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = xcss({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = xcss({
   borderRadius: 'border.radius',
   ':hover': {
@@ -87,6 +103,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
     autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$clearControlLa = props.clearControlLabel,
+    clearControlLabel = _props$clearControlLa === void 0 ? 'Clear' : _props$clearControlLa,
     _props$hideIcon = props.hideIcon,
     hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
     _props$openCalendarLa = props.openCalendarLabel,
@@ -102,7 +120,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       return false;
     } : _props$disabledDateFi,
     _props$icon = props.icon,
-    icon = _props$icon === void 0 ? CalendarIcon : _props$icon,
+    Icon = _props$icon === void 0 ? CalendarIcon : _props$icon,
     _props$id = props.id,
     id = _props$id === void 0 ? '' : _props$id,
     _props$innerProps = props.innerProps,
@@ -449,7 +467,17 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   actualSelectInputValue = selectInputValue;
   var menuIsOpen = getIsOpen() && !isDisabled;
   var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
-  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+  var clearIndicator = Icon;
+
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
+    clearIndicator = function clearIndicator(props) {
+      return jsx(Box, {
+        xcss: dropdownIndicatorStyles
+      }, jsx(Icon, props));
+    };
+  }
+  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
   var SingleValue = makeSingleValue({
     lang: propLocale
   });
@@ -513,7 +541,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
 
   // `label` takes precedence of the `inputLabel`
   var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, " , ").concat(openCalendarLabel) : openCalendarLabel;
-  var openCalendarLabelId = "open-calendar-label--".concat(useUID());
+  var openCalendarLabelId = "open-calendar-label--".concat(useId());
   return (
     // These event handlers must be on this element because the events come
     // from different child elements.
@@ -537,6 +565,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       "aria-describedby": ariaDescribedBy,
       "aria-label": label || undefined,
       autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
       closeMenuOnSelect: true
       // For some reason, this and the below `styles` type error _only_ show
       // up when you alter some of the properties in the `selectComponents`
@@ -588,7 +617,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
     })), shouldShowCalendarButton && !isDisabled ? jsx("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && jsx(VisuallyHidden, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -602,12 +631,15 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       testId: testId && "".concat(testId, "--open-calendar-button"),
       type: "button",
       backgroundColor: "color.background.neutral.subtle",
-      padding: "space.050",
-      xcss: calendarButtonStyles
-    }), jsx(CalendarIcon, {
-      label: "",
+      padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+      xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+    }), jsx(CalendarIcon, _extends({
+      label: ""
+    }, fg('platform-visual-refresh-icon-ads-migration') ? {
+      color: "var(--ds-icon, #44546F)"
+    } : {
       primaryColor: "var(--ds-icon, #44546F)"
-    }))) : null)
+    })))) : null)
   );
 });
 export default DatePicker;

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

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

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

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

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

@@ -17,7 +17,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.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/types/components/date-picker-class.d.ts

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

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

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