@atlaskit/datetime-picker 15.4.3 → 15.5.1

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

@@ -1,400 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React 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 { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
-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';
-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 packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.4.3";
-// Make DatePicker 50% the width of DateTimePicker
-// If rendering an icon container, shrink the TimePicker
-const datePickerContainerStyles = css({
-  flexBasis: '50%',
-  flexGrow: 1,
-  flexShrink: 0
-});
-const timePickerContainerStyles = css({
-  flexBasis: '50%',
-  flexGrow: 1
-});
-const iconContainerStyles = css({
-  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})`
-  }
-});
-
-// react-select overrides (via @atlaskit/select).
-const styles = {
-  control: style => ({
-    ...style,
-    backgroundColor: 'transparent',
-    border: 2,
-    borderRadius: 0,
-    paddingLeft: 0,
-    ':hover': {
-      backgroundColor: 'transparent',
-      cursor: 'inherit'
-    }
-  })
-};
-const dateTimePickerDefaultProps = {
-  // These disables are here for proper typing when used as defaults. They
-  // should *not* use the `noop` function.
-  /* eslint-disable @repo/internal/react/use-noop */
-  onBlur: _event => {},
-  onChange: _value => {},
-  onFocus: _event => {}
-  /* eslint-enable @repo/internal/react/use-noop */
-  // Not including a default prop for value as it will
-  // Make the component a controlled component
-};
-export const datePickerDefaultAriaLabel = 'Date';
-export const timePickerDefaultAriaLabel = 'Time';
-class DateTimePickerComponent extends React.Component {
-  constructor(...args) {
-    var _this$props$datePicke, _this$props$timePicke;
-    super(...args);
-    _defineProperty(this, "state", {
-      dateValue: ((_this$props$datePicke = this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
-      isFocused: false,
-      timeValue: ((_this$props$timePicke = this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
-      value: this.props.defaultValue || '',
-      zoneValue: ''
-    });
-    // All state needs to be accessed via this function so that the state is mapped from props
-    // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(this, "getParsedValues", () => this.parseValue(this.getValue(), this.state.dateValue, this.state.timeValue, this.state.zoneValue));
-    _defineProperty(this, "getValue", () => {
-      var _this$props$value;
-      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
-    });
-    _defineProperty(this, "onDateBlur", event => {
-      var _this$props$onBlur, _this$props, _this$props$datePicke2;
-      this.setState({
-        isFocused: false
-      });
-      (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, event);
-      if ((_this$props$datePicke2 = this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
-        this.props.datePickerProps.onBlur(event);
-      }
-    });
-    _defineProperty(this, "onTimeBlur", event => {
-      var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
-      this.setState({
-        isFocused: false
-      });
-      (_this$props$onBlur2 = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur2 === void 0 ? void 0 : _this$props$onBlur2.call(_this$props2, event);
-      if ((_this$props$timePicke2 = this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
-        this.props.timePickerProps.onBlur(event);
-      }
-    });
-    _defineProperty(this, "onDateFocus", event => {
-      var _this$props$onFocus, _this$props3, _this$props$datePicke3;
-      this.setState({
-        isFocused: true
-      });
-      (_this$props$onFocus = (_this$props3 = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, event);
-      if ((_this$props$datePicke3 = this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
-        this.props.datePickerProps.onFocus(event);
-      }
-    });
-    _defineProperty(this, "onTimeFocus", event => {
-      var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
-      this.setState({
-        isFocused: true
-      });
-      (_this$props$onFocus2 = (_this$props4 = this.props).onFocus) === null || _this$props$onFocus2 === void 0 ? void 0 : _this$props$onFocus2.call(_this$props4, event);
-      if ((_this$props$timePicke3 = this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
-        this.props.timePickerProps.onFocus(event);
-      }
-    });
-    _defineProperty(this, "onDateChange", dateValue => {
-      var _this$props$datePicke4;
-      const parsedValues = this.getParsedValues();
-      this.onValueChange({
-        dateValue,
-        timeValue: parsedValues.timeValue,
-        zoneValue: parsedValues.zoneValue
-      });
-      if ((_this$props$datePicke4 = this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
-        this.props.datePickerProps.onChange(dateValue);
-      }
-    });
-    _defineProperty(this, "onTimeChange", timeValue => {
-      var _this$props$timePicke4;
-      const parsedValues = this.getParsedValues();
-      this.onValueChange({
-        dateValue: parsedValues.dateValue,
-        timeValue,
-        zoneValue: parsedValues.zoneValue
-      });
-      if ((_this$props$timePicke4 = this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
-        this.props.timePickerProps.onChange(timeValue);
-      }
-    });
-    _defineProperty(this, "onClear", () => {
-      var _this$props$datePicke5, _this$props$timePicke5;
-      const parsedValues = this.getParsedValues();
-      this.onValueChange({
-        dateValue: '',
-        timeValue: '',
-        zoneValue: parsedValues.zoneValue
-      });
-      if ((_this$props$datePicke5 = this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
-        this.props.datePickerProps.onChange('');
-      }
-      if ((_this$props$timePicke5 = this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
-        this.props.timePickerProps.onChange('');
-      }
-    });
-  }
-  parseValue(value, dateValue, timeValue, zoneValue) {
-    if (this.props.parseValue) {
-      const parsedFromFn = this.props.parseValue(value, dateValue, timeValue, zoneValue);
-      // This handles cases found in Jira where the parse function actually does
-      // nothing and returns undefined. The previous `getSafeState` function
-      // just spread the values over the state, but if it returned `undefined`,
-      // it would just rely on the previous state values. Considering this is
-      // what is input to this function anyway, this is a safe way to handle
-      // this, colocate the behavior, and not rely on `getSafeState`.
-      return parsedFromFn || {
-        dateValue,
-        timeValue,
-        zoneValue
-      };
-    }
-    const parsed = parseISO(value);
-    return isValid(parsed) ? {
-      dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
-      timeValue: format(parsed, convertTokens('HH:mm')),
-      zoneValue: format(parsed, convertTokens('ZZ'))
-    } : {
-      dateValue,
-      timeValue,
-      zoneValue
-    };
-  }
-  onValueChange({
-    dateValue,
-    timeValue,
-    zoneValue
-  }) {
-    this.setState({
-      dateValue,
-      timeValue,
-      zoneValue
-    });
-    if (dateValue && timeValue) {
-      var _this$props$onChange, _this$props5;
-      const value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
-      const {
-        zoneValue: parsedZone
-      } = this.parseValue(value, dateValue, timeValue, zoneValue);
-      const valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
-      this.setState({
-        value: valueWithValidZone
-      });
-      (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props5, valueWithValidZone);
-      // If the date or time value was cleared when there is an existing datetime value, then clear the value.
-    } else if (this.getValue()) {
-      var _this$props$onChange2, _this$props6;
-      this.setState({
-        value: ''
-      });
-      (_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props6, '');
-    }
-  }
-  render() {
-    const {
-      'aria-describedby': ariaDescribedBy,
-      appearance = 'default',
-      autoFocus = false,
-      clearControlLabel = 'clear',
-      datePickerProps = {},
-      id = '',
-      innerProps = {},
-      isDisabled = false,
-      isInvalid = false,
-      isRequired = false,
-      locale = 'en-US',
-      name = '',
-      spacing = 'default',
-      testId,
-      timePickerProps = {}
-    } = this.props;
-    const value = this.getValue();
-    const {
-      isFocused
-    } = this.state;
-    const parsedValues = this.getParsedValues();
-    const dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
-    const timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
-    const datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
-    const datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
-    const datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
-    const mergedDatePickerSelectProps = {
-      ...datePickerSelectProps,
-      styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
-    };
-    const timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
-    const timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
-    const timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
-    const mergedTimePickerSelectProps = {
-      ...timePickerSelectProps,
-      styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
-    };
-
-    // 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, {
-      appearance: appearance,
-      isDisabled: isDisabled,
-      isFocused: isFocused,
-      isInvalid: isInvalid,
-      testId: testId,
-      innerProps: innerProps
-    }, jsx("input", {
-      name: name,
-      type: "hidden",
-      value: value,
-      "data-testid": testId && `${testId}--input`
-    }), jsx("div", {
-      css: datePickerContainerStyles
-    }, jsx(DatePicker, {
-      appearance: appearance,
-      "aria-describedby": datePickerAriaDescribedBy,
-      autoFocus: datePickerProps.autoFocus || autoFocus,
-      dateFormat: datePickerProps.dateFormat,
-      defaultIsOpen: datePickerProps.defaultIsOpen,
-      defaultValue: datePickerProps.defaultValue,
-      disabled: datePickerProps.disabled,
-      disabledDateFilter: datePickerProps.disabledDateFilter,
-      formatDisplayLabel: datePickerProps.formatDisplayLabel,
-      hideIcon: datePickerProps.hideIcon || true,
-      icon: datePickerProps.icon,
-      id: datePickerProps.id || id,
-      innerProps: datePickerProps.innerProps,
-      isDisabled: datePickerProps.isDisabled || isDisabled,
-      isInvalid: datePickerProps.isInvalid || isInvalid,
-      isRequired: datePickerProps.isRequired || isRequired,
-      isOpen: datePickerProps.isOpen,
-      label: datePickerLabel,
-      locale: datePickerProps.locale || locale,
-      maxDate: datePickerProps.maxDate,
-      minDate: datePickerProps.minDate,
-      name: datePickerProps.name,
-      nextMonthLabel: datePickerProps.nextMonthLabel,
-      onBlur: this.onDateBlur,
-      onChange: this.onDateChange,
-      onFocus: this.onDateFocus,
-      parseInputValue: datePickerProps.parseInputValue,
-      placeholder: datePickerProps.placeholder,
-      previousMonthLabel: datePickerProps.previousMonthLabel,
-      selectProps: mergedDatePickerSelectProps,
-      shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
-      spacing: datePickerProps.spacing || spacing,
-      testId: testId && `${testId}--datepicker` || datePickerProps.testId,
-      value: dateValue,
-      weekStartDay: datePickerProps.weekStartDay
-    })), jsx("div", {
-      css: timePickerContainerStyles
-    }, jsx(TimePicker, {
-      appearance: timePickerProps.appearance || appearance,
-      "aria-describedby": timePickerAriaDescribedBy,
-      autoFocus: timePickerProps.autoFocus,
-      defaultIsOpen: timePickerProps.defaultIsOpen,
-      defaultValue: timePickerProps.defaultValue,
-      formatDisplayLabel: timePickerProps.formatDisplayLabel,
-      hideIcon: timePickerProps.hideIcon || true,
-      id: timePickerProps.id,
-      innerProps: timePickerProps.innerProps,
-      isDisabled: timePickerProps.isDisabled || isDisabled,
-      isInvalid: timePickerProps.isInvalid || isInvalid,
-      isOpen: timePickerProps.isOpen,
-      isRequired: timePickerProps.isRequired || isRequired,
-      label: timePickerLabel,
-      locale: timePickerProps.locale || locale,
-      name: timePickerProps.name,
-      onBlur: this.onTimeBlur,
-      onChange: this.onTimeChange,
-      onFocus: this.onTimeFocus,
-      parseInputValue: timePickerProps.parseInputValue,
-      placeholder: timePickerProps.placeholder,
-      selectProps: mergedTimePickerSelectProps,
-      spacing: timePickerProps.spacing || spacing,
-      testId: timePickerProps.testId || testId && `${testId}--timepicker`,
-      timeFormat: timePickerProps.timeFormat,
-      timeIsEditable: timePickerProps.timeIsEditable,
-      times: timePickerProps.times,
-      value: timeValue
-    })), isClearable && !isDisabled ? jsx("button", {
-      css: iconContainerStyles,
-      onClick: this.onClear,
-      "data-testid": testId && `${testId}--icon--container`,
-      tabIndex: -1,
-      type: "button"
-    }, jsx(SelectClearIcon, {
-      size: "small",
-      primaryColor: "inherit",
-      label: clearControlLabel
-    })) : null);
-  }
-}
-_defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
-export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
-
-/**
- * __Date time picker__
- *
- * A date time picker allows the user to select an associated date and time.
- *
- * - [Examples](https://atlassian.design/components/datetime-picker/examples)
- * - [Code](https://atlassian.design/components/datetime-picker/code)
- * - [Usage](https://atlassian.design/components/datetime-picker/usage)
- */
-const DateTimePicker = withAnalyticsContext({
-  componentName: 'dateTimePicker',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents({
-  onChange: createAndFireEvent('atlaskit')({
-    action: 'changed',
-    actionSubject: 'dateTimePicker',
-    attributes: {
-      componentName: 'dateTimePicker',
-      packageName,
-      packageVersion
-    }
-  })
-})(DateTimePickerComponent));
+import DateTimePickerOld from './date-time-picker-class';
+import DateTimePickerNew from './date-time-picker-fc';
+const DateTimePicker = componentWithCondition(() => fg('dst-date-time-picker-use-functional-component'), DateTimePickerNew, DateTimePickerOld);
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 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.4.3";
+const packageVersion = "15.5.1";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -39,6 +39,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   'aria-describedby': ariaDescribedBy,
   appearance = 'default',
   autoFocus = false,
+  clearControlLabel = 'clear timepicker',
   defaultIsOpen = false,
   defaultValue = '',
   formatDisplayLabel,
@@ -262,8 +263,12 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
     "aria-describedby": ariaDescribedBy,
     "aria-label": label || undefined,
-    appearance: appearance,
+    appearance: appearance
+    // we need this disabled as we might need focus to move to the select
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
     autoFocus: autoFocus,
+    clearControlLabel: clearControlLabel,
     components: selectComponents,
     inputId: id,
     isClearable: true,
@@ -284,7 +289,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     value: initialValue,
     spacing: spacing
     // We need this to get things to work, even though it's not supported.
-    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+    // @ts-ignore
     ,
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';
 const isInvalidBorderStyles = css({
@@ -62,23 +63,23 @@ const baseContainerStyles = css({
     cursor: 'pointer'
   }
 });
-
 /**
  * This is the container for the datetime picker component.
  */
-export const DateTimePickerContainer = ({
+export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
+  children,
   isDisabled,
   isFocused,
   appearance,
   isInvalid,
   innerProps,
-  testId,
-  children
-}) => {
+  testId
+}, ref) => {
   const notFocusedOrIsDisabled = !(isFocused || isDisabled);
   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, {
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }), children);
-};
+});

package/dist/es2019/internal/indicators-container.js

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { components } from '@atlaskit/select';
+const calendarButtonInclusionStyles = css({
+  marginInlineStart: "var(--ds-space-400, 32px)"
+});
+const calendarButtonOnlyInclusionStyles = css({
+  marginInlineStart: "var(--ds-space-300, 24px)"
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const IndicatorsContainer = ({
+  showClearIndicator,
+  ...rest
+}) => jsx("div", {
+  css: showClearIndicator ? calendarButtonInclusionStyles : calendarButtonOnlyInclusionStyles
+}, jsx(components.IndicatorsContainer, rest));

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

@@ -32,11 +32,12 @@ import { N500, N70 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
+import { IndicatorsContainer as _IndicatorsContainer } from '../internal/indicators-container';
 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.4.3";
+var packageVersion = "15.5.1";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -463,8 +464,15 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       var SingleValue = makeSingleValue({
         lang: this.props.locale
       });
-      var selectComponents = _objectSpread({
-        DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
+      var selectComponents = _objectSpread(_objectSpread({
+        DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon
+      }, shouldShowCalendarButton ? {
+        IndicatorsContainer: function IndicatorsContainer(props) {
+          return jsx(_IndicatorsContainer, _extends({}, props, {
+            showClearIndicator: showClearIndicator
+          }));
+        }
+      } : {}), {}, {
         Menu: Menu,
         SingleValue: SingleValue
       }, !showClearIndicator && {

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

@@ -27,11 +27,12 @@ import { N500, N70 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
+import { IndicatorsContainer as _IndicatorsContainer } from '../internal/indicators-container';
 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.4.3";
+var packageVersion = "15.5.1";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -452,8 +453,15 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var SingleValue = makeSingleValue({
     lang: propLocale
   });
-  var selectComponents = _objectSpread({
-    DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
+  var selectComponents = _objectSpread(_objectSpread({
+    DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon
+  }, shouldShowCalendarButton ? {
+    IndicatorsContainer: function IndicatorsContainer(props) {
+      return jsx(_IndicatorsContainer, _extends({}, props, {
+        showClearIndicator: showClearIndicator
+      }));
+    }
+  } : {}), {}, {
     Menu: Menu,
     SingleValue: SingleValue
   }, !showClearIndicator && {