@atlaskit/datetime-picker 15.5.0 → 15.5.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/datetime-picker
 
+## 15.5.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.5.1
+
+### Patch Changes
+
+- [#156121](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156121)
+  [`6e87dd7dd8d3a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e87dd7dd8d3a) -
+  When `shouldShowCalendarButton` is `true`, ensures that input text properly overflows via
+  controlling an underlying select component.
+- [#156147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156147)
+  [`a5c2ba68d297d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a5c2ba68d297d) -
+  We are testing converting the datetime picker from a class component to a functional component
+  behind a feature flag. If this fix is successful it will be available in a later release.
+
 ## 15.5.0
 
 ### Minor Changes

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

@@ -27,6 +27,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _internal = require("../internal");
 var _datePickerMigration = require("../internal/date-picker-migration");
+var _indicatorsContainer = require("../internal/indicators-container");
 var _menu = require("../internal/menu");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
@@ -43,7 +44,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 // version very soon from converting this to functional. And also React 18 is on
 // the horizon
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.0";
+var packageVersion = "15.5.2";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -470,8 +471,15 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       var SingleValue = (0, _singleValue.makeSingleValue)({
         lang: this.props.locale
       });
-      var selectComponents = _objectSpread({
-        DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon,
+      var selectComponents = _objectSpread(_objectSpread({
+        DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
+      }, shouldShowCalendarButton ? {
+        IndicatorsContainer: function IndicatorsContainer(props) {
+          return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
+            showClearIndicator: showClearIndicator
+          }));
+        }
+      } : {}), {}, {
         Menu: _menu.Menu,
         SingleValue: SingleValue
       }, !showClearIndicator && {

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

@@ -23,6 +23,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _internal = require("../internal");
 var _datePickerMigration = require("../internal/date-picker-migration");
+var _indicatorsContainer = require("../internal/indicators-container");
 var _menu = require("../internal/menu");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
@@ -40,7 +41,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.0";
+var packageVersion = "15.5.2";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -461,8 +462,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
   var SingleValue = (0, _singleValue.makeSingleValue)({
     lang: propLocale
   });
-  var selectComponents = _objectSpread({
-    DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon,
+  var selectComponents = _objectSpread(_objectSpread({
+    DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
+  }, shouldShowCalendarButton ? {
+    IndicatorsContainer: function IndicatorsContainer(props) {
+      return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
+        showClearIndicator: showClearIndicator
+      }));
+    }
+  } : {}), {}, {
     Menu: _menu.Menu,
     SingleValue: SingleValue
   }, !showClearIndicator && {

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

@@ -0,0 +1,439 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = exports.DateTimePickerWithoutAnalytics = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _dateFns = require("date-fns");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _select = require("@atlaskit/select");
+var _colors = require("@atlaskit/theme/colors");
+var _internal = require("../internal");
+var _dateTimePickerContainer = require("../internal/date-time-picker-container");
+var _ffComponent = require("../internal/ff-component");
+var _parseTokens = require("../internal/parse-tokens");
+var _datePickerClass = _interopRequireDefault(require("./date-picker-class"));
+var _datePickerFc = _interopRequireDefault(require("./date-picker-fc"));
+var _timePicker = _interopRequireDefault(require("./time-picker"));
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
+  return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
+}, _datePickerFc.default, _datePickerClass.default);
+var packageName = "@atlaskit/datetime-picker";
+var packageVersion = "15.5.2";
+// Make DatePicker 50% the width of DateTimePicker
+// If rendering an icon container, shrink the TimePicker
+var datePickerContainerStyles = (0, _react2.css)({
+  flexBasis: '50%',
+  flexGrow: 1,
+  flexShrink: 0
+});
+var timePickerContainerStyles = (0, _react2.css)({
+  flexBasis: '50%',
+  flexGrow: 1
+});
+var iconContainerStyles = (0, _react2.css)({
+  display: 'flex',
+  margin: "var(--ds-border-width, 1px)",
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  backgroundColor: 'inherit',
+  border: 'none',
+  color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
+  paddingBlockEnd: "var(--ds-space-075, 6px)",
+  paddingBlockStart: "var(--ds-space-075, 6px)",
+  paddingInlineEnd: "var(--ds-space-100, 8px)",
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  transition: "color 150ms",
+  '&:hover': {
+    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+  }
+});
+
+// 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
+};
+var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
+var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
+var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(DateTimePickerComponent, _React$Component);
+  var _super = _createSuper(DateTimePickerComponent);
+  function DateTimePickerComponent() {
+    var _this$props$datePicke, _this$props$timePicke;
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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.
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getParsedValues", function () {
+      return _this.parseValue(_this.getValue(), _this.state.dateValue, _this.state.timeValue, _this.state.zoneValue);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+  }
+  (0, _createClass2.default)(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 = (0, _dateFns.parseISO)(value);
+      return (0, _dateFns.isValid)(parsed) ? {
+        dateValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('YYYY-MM-DD')),
+        timeValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('HH:mm')),
+        zoneValue: (0, _dateFns.format)(parsed, (0, _parseTokens.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 = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
+        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
+          parsedZone = _this$parseValue.zoneValue;
+        var valueWithValidZone = (0, _internal.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: (0, _select.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: (0, _select.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 (0, _react2.jsx)(_dateTimePickerContainer.DateTimePickerContainer, {
+        appearance: appearance,
+        isDisabled: isDisabled,
+        isFocused: isFocused,
+        isInvalid: isInvalid,
+        testId: testId,
+        innerProps: innerProps
+      }, (0, _react2.jsx)("input", {
+        name: name,
+        type: "hidden",
+        value: value,
+        "data-testid": testId && "".concat(testId, "--input")
+      }), (0, _react2.jsx)("div", {
+        css: datePickerContainerStyles
+      }, (0, _react2.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
+      })), (0, _react2.jsx)("div", {
+        css: timePickerContainerStyles
+      }, (0, _react2.jsx)(_timePicker.default, {
+        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 ? (0, _react2.jsx)("button", {
+        css: iconContainerStyles,
+        onClick: this.onClear,
+        "data-testid": testId && "".concat(testId, "--icon--container"),
+        tabIndex: -1,
+        type: "button"
+      }, (0, _react2.jsx)(_selectClear.default, {
+        size: "small",
+        primaryColor: "inherit",
+        label: clearControlLabel
+      })) : null);
+    }
+  }]);
+  return DateTimePickerComponent;
+}(_react.default.Component);
+(0, _defineProperty2.default)(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
+/**
+ * __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 = (0, _analyticsNext.withAnalyticsContext)({
+  componentName: 'dateTimePicker',
+  packageName: packageName,
+  packageVersion: packageVersion
+})((0, _analyticsNext.withAnalyticsEvents)({
+  onChange: (0, _analyticsNext.createAndFireEvent)('atlaskit')({
+    action: 'changed',
+    actionSubject: 'dateTimePicker',
+    attributes: {
+      componentName: 'dateTimePicker',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DateTimePickerComponent));
+var _default = exports.default = DateTimePicker;