@atlaskit/datetime-picker 15.5.0 → 15.5.1

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

@@ -1,437 +1,9 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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 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';
-var DatePicker = componentWithCondition(function () {
-  return fg('dst-date-picker-use-functional-component');
-}, DatePickerNew, DatePickerOld);
-var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.0";
-// Make DatePicker 50% the width of DateTimePicker
-// If rendering an icon container, shrink the TimePicker
-var datePickerContainerStyles = css({
-  flexBasis: '50%',
-  flexGrow: 1,
-  flexShrink: 0
-});
-var timePickerContainerStyles = css({
-  flexBasis: '50%',
-  flexGrow: 1
-});
-var iconContainerStyles = css({
-  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, ")")
-  }
-});
-
-// react-select overrides (via @atlaskit/select).
-var styles = {
-  control: function control(style) {
-    return _objectSpread(_objectSpread({}, style), {}, {
-      backgroundColor: 'transparent',
-      border: 2,
-      borderRadius: 0,
-      paddingLeft: 0,
-      ':hover': {
-        backgroundColor: 'transparent',
-        cursor: 'inherit'
-      }
-    });
-  }
-};
-var 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: function onBlur(_event) {},
-  onChange: function onChange(_value) {},
-  onFocus: function 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 var datePickerDefaultAriaLabel = 'Date';
-export var timePickerDefaultAriaLabel = 'Time';
-var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
-  _inherits(DateTimePickerComponent, _React$Component);
-  var _super = _createSuper(DateTimePickerComponent);
-  function DateTimePickerComponent() {
-    var _this$props$datePicke, _this$props$timePicke;
-    var _this;
-    _classCallCheck(this, DateTimePickerComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "getParsedValues", function () {
-      return _this.parseValue(_this.getValue(), _this.state.dateValue, _this.state.timeValue, _this.state.zoneValue);
-    });
-    _defineProperty(_assertThisInitialized(_this), "getValue", function () {
-      var _this$props$value;
-      return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
-    });
-    _defineProperty(_assertThisInitialized(_this), "onDateBlur", function (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 || _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(_assertThisInitialized(_this), "onTimeBlur", function (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 || _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(_assertThisInitialized(_this), "onDateFocus", function (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 || _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(_assertThisInitialized(_this), "onTimeFocus", function (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 || _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(_assertThisInitialized(_this), "onDateChange", function (dateValue) {
-      var _this$props$datePicke4;
-      var parsedValues = _this.getParsedValues();
-      _this.onValueChange({
-        dateValue: 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(_assertThisInitialized(_this), "onTimeChange", function (timeValue) {
-      var _this$props$timePicke4;
-      var parsedValues = _this.getParsedValues();
-      _this.onValueChange({
-        dateValue: parsedValues.dateValue,
-        timeValue: 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(_assertThisInitialized(_this), "onClear", function () {
-      var _this$props$datePicke5, _this$props$timePicke5;
-      var 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('');
-      }
-    });
-    return _this;
-  }
-  _createClass(DateTimePickerComponent, [{
-    key: "parseValue",
-    value: function parseValue(value, dateValue, timeValue, zoneValue) {
-      if (this.props.parseValue) {
-        var 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: dateValue,
-          timeValue: timeValue,
-          zoneValue: zoneValue
-        };
-      }
-      var 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: dateValue,
-        timeValue: timeValue,
-        zoneValue: zoneValue
-      };
-    }
-  }, {
-    key: "onValueChange",
-    value: function onValueChange(_ref) {
-      var dateValue = _ref.dateValue,
-        timeValue = _ref.timeValue,
-        zoneValue = _ref.zoneValue;
-      this.setState({
-        dateValue: dateValue,
-        timeValue: timeValue,
-        zoneValue: zoneValue
-      });
-      if (dateValue && timeValue) {
-        var _this$props$onChange, _this$props5;
-        var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
-        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
-          parsedZone = _this$parseValue.zoneValue;
-        var valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
-        this.setState({
-          value: valueWithValidZone
-        });
-        (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === 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 || _this$props$onChange2.call(_this$props6, '');
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props7 = this.props,
-        ariaDescribedBy = _this$props7['aria-describedby'],
-        _this$props7$appearan = _this$props7.appearance,
-        appearance = _this$props7$appearan === void 0 ? 'default' : _this$props7$appearan,
-        _this$props7$autoFocu = _this$props7.autoFocus,
-        autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu,
-        _this$props7$clearCon = _this$props7.clearControlLabel,
-        clearControlLabel = _this$props7$clearCon === void 0 ? 'clear' : _this$props7$clearCon,
-        _this$props7$datePick = _this$props7.datePickerProps,
-        datePickerProps = _this$props7$datePick === void 0 ? {} : _this$props7$datePick,
-        _this$props7$id = _this$props7.id,
-        id = _this$props7$id === void 0 ? '' : _this$props7$id,
-        _this$props7$innerPro = _this$props7.innerProps,
-        innerProps = _this$props7$innerPro === void 0 ? {} : _this$props7$innerPro,
-        _this$props7$isDisabl = _this$props7.isDisabled,
-        isDisabled = _this$props7$isDisabl === void 0 ? false : _this$props7$isDisabl,
-        _this$props7$isInvali = _this$props7.isInvalid,
-        isInvalid = _this$props7$isInvali === void 0 ? false : _this$props7$isInvali,
-        _this$props7$isRequir = _this$props7.isRequired,
-        isRequired = _this$props7$isRequir === void 0 ? false : _this$props7$isRequir,
-        _this$props7$locale = _this$props7.locale,
-        locale = _this$props7$locale === void 0 ? 'en-US' : _this$props7$locale,
-        _this$props7$name = _this$props7.name,
-        name = _this$props7$name === void 0 ? '' : _this$props7$name,
-        _this$props7$spacing = _this$props7.spacing,
-        spacing = _this$props7$spacing === void 0 ? 'default' : _this$props7$spacing,
-        testId = _this$props7.testId,
-        _this$props7$timePick = _this$props7.timePickerProps,
-        timePickerProps = _this$props7$timePick === void 0 ? {} : _this$props7$timePick;
-      var value = this.getValue();
-      var isFocused = this.state.isFocused;
-      var parsedValues = this.getParsedValues();
-      var dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
-      var timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
-      var datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
-      var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
-      var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
-      var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-        styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
-      });
-      var timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
-      var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
-      var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
-      var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, 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
-      var 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 && "".concat(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 && "".concat(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 && "".concat(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 && "".concat(testId, "--icon--container"),
-        tabIndex: -1,
-        type: "button"
-      }, jsx(SelectClearIcon, {
-        size: "small",
-        primaryColor: "inherit",
-        label: clearControlLabel
-      })) : null);
-    }
-  }]);
-  return DateTimePickerComponent;
-}(React.Component);
-_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)
- */
-var DateTimePicker = withAnalyticsContext({
-  componentName: 'dateTimePicker',
-  packageName: packageName,
-  packageVersion: packageVersion
-})(withAnalyticsEvents({
-  onChange: createAndFireEvent('atlaskit')({
-    action: 'changed',
-    actionSubject: 'dateTimePicker',
-    attributes: {
-      componentName: 'dateTimePicker',
-      packageName: packageName,
-      packageVersion: packageVersion
-    }
-  })
-})(DateTimePickerComponent));
+import DateTimePickerOld from './date-time-picker-class';
+import DateTimePickerNew from './date-time-picker-fc';
+var DateTimePicker = componentWithCondition(function () {
+  return fg('dst-date-time-picker-use-functional-component');
+}, DateTimePickerNew, DateTimePickerOld);
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 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.0";
+var packageVersion = "15.5.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

@@ -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';
 var isInvalidBorderStyles = css({
@@ -62,22 +63,22 @@ var baseContainerStyles = css({
     cursor: 'pointer'
   }
 });
-
 /**
  * This is the container for the datetime picker component.
  */
-export var DateTimePickerContainer = function DateTimePickerContainer(_ref) {
-  var isDisabled = _ref.isDisabled,
+export var DateTimePickerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
     appearance = _ref.appearance,
     isInvalid = _ref.isInvalid,
     innerProps = _ref.innerProps,
-    testId = _ref.testId,
-    children = _ref.children;
+    testId = _ref.testId;
   var 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/esm/internal/indicators-container.js

@@ -0,0 +1,25 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["showClearIndicator"];
+/**
+ * @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';
+var calendarButtonInclusionStyles = css({
+  marginInlineStart: "var(--ds-space-400, 32px)"
+});
+var calendarButtonOnlyInclusionStyles = css({
+  marginInlineStart: "var(--ds-space-300, 24px)"
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var IndicatorsContainer = function IndicatorsContainer(_ref) {
+  var showClearIndicator = _ref.showClearIndicator,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return jsx("div", {
+    css: showClearIndicator ? calendarButtonInclusionStyles : calendarButtonOnlyInclusionStyles
+  }, jsx(components.IndicatorsContainer, rest));
+};

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" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "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" | "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" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "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" | "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" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "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" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

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

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