@atlaskit/datetime-picker 17.6.4 → 17.7.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/datetime-picker
 
+## 17.7.0
+
+### Minor Changes
+
+- [`eba257fabc979`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eba257fabc979) -
+  Clean up flag to improve value calculation in datetime picker.
+
+## 17.6.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.6.4
 
 ### Patch Changes

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

@@ -25,8 +25,13 @@ var _locale = require("@atlaskit/locale");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _internal = require("../internal");
-var _datePickerMigration = require("../internal/date-picker-migration");
+var _formatDate = require("../internal/format-date");
+var _getParsedIso = require("../internal/get-parsed-iso");
+var _getPlaceholder = require("../internal/get-placeholder");
+var _getSafeCalendarValue = require("../internal/get-safe-calendar-value");
+var _getShortIsoString = require("../internal/get-short-iso-string");
 var _indicatorsContainer = require("../internal/indicators-container");
+var _isDateDisabled = require("../internal/is-date-disabled");
 var _menu = require("../internal/menu");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
@@ -148,7 +153,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     value = _useState0[0],
     setValue = _useState0[1];
-  var _useState1 = (0, _react.useState)(propValue || defaultValue || (0, _parseDate.getShortISOString)(new Date())),
+  var _useState1 = (0, _react.useState)(propValue || defaultValue || (0, _getShortIsoString.getShortISOString)(new Date())),
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
     calendarValue = _useState10[0],
     setCalendarValue = _useState10[1];
@@ -208,7 +213,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   };
   var onCalendarChange = function onCalendarChange(_ref) {
     var iso = _ref.iso;
-    setCalendarValue((0, _datePickerMigration.getParsedISO)({
+    setCalendarValue((0, _getParsedIso.getParsedISO)({
       iso: iso
     }));
   };
@@ -287,7 +292,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var onTextInput = function onTextInput(event) {
     var inputValue = event.target.value;
     if (inputValue) {
-      var parsed = (0, _datePickerMigration.parseDate)(inputValue, {
+      var parsed = (0, _parseDate.parseDate)(inputValue, {
         parseInputValue: rest === null || rest === void 0 ? void 0 : rest.parseInputValue,
         dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
         l10n: l10n
@@ -296,7 +301,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       if (parsed && (0, _dateFns.isValid)(parsed)) {
         // We format the parsed date to YYYY-MM-DD here because
         // this is the format expected by the @atlaskit/calendar component
-        setCalendarValue((0, _parseDate.getShortISOString)(parsed));
+        setCalendarValue((0, _getShortIsoString.getShortISOString)(parsed));
       }
     }
     setIsOpen(true);
@@ -350,12 +355,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
         // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
         // for more details.
         event.preventDefault();
-        if (!(0, _datePickerMigration.isDateDisabled)(calendarValue, {
+        if (!(0, _isDateDisabled.isDateDisabled)(calendarValue, {
           disabled: disabled
         })) {
           // Get a safe `calendarValue` in case the value exceeds the maximum
           // allowed by ISO 8601
-          var safeCalendarValue = (0, _parseDate.getSafeCalendarValue)(calendarValue);
+          var safeCalendarValue = (0, _getSafeCalendarValue.getSafeCalendarValue)(calendarValue);
           var valueChanged = safeCalendarValue !== value;
           setSelectInputValue('');
           setIsOpen(false);
@@ -412,7 +417,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   };
   var onClear = function onClear() {
     setValue('');
-    setCalendarValue(defaultValue || (0, _parseDate.getShortISOString)(new Date()));
+    setCalendarValue(defaultValue || (0, _getShortIsoString.getShortISOString)(new Date()));
     if (!hideIcon) {
       setClearingFromIcon(true);
     }
@@ -486,7 +491,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     calendarMaxDate: maxDate,
     calendarMinDate: minDate,
     calendarRef: calendarRef,
-    calendarValue: getterValue && (0, _parseDate.getShortISOString)((0, _dateFns.parseISO)(getterValue)),
+    calendarValue: getterValue && (0, _getShortIsoString.getShortISOString)((0, _dateFns.parseISO)(getterValue)),
     calendarView: calendarValue,
     onCalendarChange: onCalendarChange,
     onCalendarSelect: onCalendarSelect,
@@ -514,7 +519,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     }
   });
   var initialValue = getterValue ? {
-    label: (0, _datePickerMigration.formatDate)(getterValue, {
+    label: (0, _formatDate.formatDate)(getterValue, {
       formatDisplayLabel: formatDisplayLabel,
       dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
       l10n: l10n
@@ -559,7 +564,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     onChange: onSelectChange,
     onFocus: onSelectFocus,
     onInputChange: handleSelectInputChange,
-    placeholder: (0, _datePickerMigration.getPlaceholder)({
+    placeholder: (0, _getPlaceholder.getPlaceholder)({
       placeholder: placeholder,
       l10n: l10n
     })

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

@@ -1,14 +1,81 @@
+/* date-time-picker-fc.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _ffComponent = require("../internal/ff-component");
-var _dateTimePickerFcNew = _interopRequireDefault(require("./date-time-picker-fc-new"));
-var _dateTimePickerFcOld = _interopRequireDefault(require("./date-time-picker-fc-old"));
+exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = void 0;
+require("./date-time-picker-fc.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _dateFns = require("date-fns");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _new = require("@atlaskit/button/new");
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _select = require("@atlaskit/select");
+var _internal = require("../internal");
+var _dateTimePickerContainer = require("../internal/date-time-picker-container");
+var _parseTokens = require("../internal/parse-tokens");
+var _datePicker = _interopRequireDefault(require("./date-picker"));
+var _timePicker = _interopRequireDefault(require("./time-picker"));
+var _excluded = ["selectProps"],
+  _excluded2 = ["selectProps"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, 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; } /// <reference types="node" />
+// for typing `process`
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+var packageName = "@atlaskit/datetime-picker";
+var packageVersion = "0.0.0-development";
+var analyticsAttributes = {
+  componentName: 'dateTimePicker',
+  packageName: packageName,
+  packageVersion: packageVersion
+};
+var compiledStyles = {
+  datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
+  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
+  iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
+};
+
+// 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'
+      }
+    });
+  }
+};
+
+/**
+ * Two action types keep the reducer focused:
+ *
+ * - APPLY: used by user-interaction handlers. The handler computes the full
+ *   next state (including the new ISO value) and applies it atomically. This
+ *   guarantees a single re-render with no cascades regardless of React version.
+ *
+ * - SET_VALUE: used by the `providedValue` prop effect. The reducer owns all
+ *   parsing logic for external value changes, including the empty-string case
+ *   that the previous useState approach missed.
+ */
+
+var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
+var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
+
 /**
  * __Date time picker__
  *
@@ -18,6 +85,403 @@ var _dateTimePickerFcOld = _interopRequireDefault(require("./date-time-picker-fc
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-var _default = exports.default = (0, _ffComponent.componentWithCondition)(function () {
-  return (0, _platformFeatureFlags.fg)('dst-a11y_fix-dtp-value-calculation');
-}, _dateTimePickerFcNew.default, _dateTimePickerFcOld.default);
+var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
+  var ariaDescribedBy = _ref2['aria-describedby'],
+    _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    _ref2$autoFocus = _ref2.autoFocus,
+    autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+    _ref2$clearControlLab = _ref2.clearControlLabel,
+    clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
+    _ref2$datePickerProps = _ref2.datePickerProps,
+    datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
+    _ref2$defaultValue = _ref2.defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
+    _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? '' : _ref2$id,
+    _ref2$innerProps = _ref2.innerProps,
+    innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$isInvalid = _ref2.isInvalid,
+    isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
+    _ref2$isRequired = _ref2.isRequired,
+    isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
+    _ref2$name = _ref2.name,
+    name = _ref2$name === void 0 ? '' : _ref2$name,
+    _ref2$onBlur = _ref2.onBlur,
+    onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
+    _ref2$onChange = _ref2.onChange,
+    onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
+    _ref2$onFocus = _ref2.onFocus,
+    onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
+    providedParseValue = _ref2.parseValue,
+    _ref2$spacing = _ref2.spacing,
+    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
+    _ref2$locale = _ref2.locale,
+    locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
+    testId = _ref2.testId,
+    _ref2$timePickerProps = _ref2.timePickerProps,
+    timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
+    providedValue = _ref2.value;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+
+  /**
+   * Defined inside the component so the reducer closes over `providedParseValue`
+   * without needing to smuggle it through every action payload. React always
+   * calls the reducer from the latest render, so stale-closure is not a concern.
+   */
+  var reducer = function reducer(state, action) {
+    switch (action.type) {
+      case 'APPLY':
+        return action.payload;
+      case 'SET_VALUE':
+        {
+          var newValue = action.payload;
+
+          // Explicit empty-string handling: clear all sub-fields so the date
+          // and time pickers visually reset when a controlled value is cleared.
+          if (!newValue) {
+            return {
+              value: '',
+              dateValue: '',
+              timeValue: '',
+              zoneValue: ''
+            };
+          }
+          if (providedParseValue) {
+            var _parsed = providedParseValue(newValue, state.dateValue, state.timeValue, state.zoneValue);
+            return _parsed ? _objectSpread({
+              value: newValue
+            }, _parsed) : {
+              value: newValue,
+              dateValue: state.dateValue,
+              timeValue: state.timeValue,
+              zoneValue: state.zoneValue
+            };
+          }
+          var parsed = (0, _dateFns.parseISO)(newValue);
+          return (0, _dateFns.isValid)(parsed) ? {
+            value: newValue,
+            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'))
+          } : {
+            value: newValue,
+            dateValue: '',
+            timeValue: '',
+            zoneValue: ''
+          };
+        }
+      default:
+        return state;
+    }
+  };
+  var _useReducer = (0, _react.useReducer)(reducer, null, function () {
+      var initialValue = providedValue || defaultValue || '';
+      var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
+      var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
+      if (!initialValue) {
+        return {
+          value: '',
+          dateValue: initialDate,
+          timeValue: initialTime,
+          zoneValue: ''
+        };
+      }
+      if (providedParseValue) {
+        var _parsed2 = providedParseValue(initialValue, initialDate, initialTime, '');
+        return _parsed2 ? _objectSpread({
+          value: initialValue
+        }, _parsed2) : {
+          value: initialValue,
+          dateValue: initialDate,
+          timeValue: initialTime,
+          zoneValue: ''
+        };
+      }
+      var parsed = (0, _dateFns.parseISO)(initialValue);
+      return (0, _dateFns.isValid)(parsed) ? {
+        value: initialValue,
+        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'))
+      } : {
+        value: initialValue,
+        dateValue: initialDate,
+        timeValue: initialTime,
+        zoneValue: ''
+      };
+    }),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    dtState = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  (0, _react.useEffect)(function () {
+    if (providedValue !== undefined) {
+      dispatch({
+        type: 'SET_VALUE',
+        payload: providedValue
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [providedValue]);
+  var parseValue = (0, _react.useCallback)(function (value, providedDateValue, providedTimeValue, providedZoneValue) {
+    if (providedParseValue) {
+      var parsedFromFn = providedParseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
+      // 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: providedDateValue,
+        timeValue: providedTimeValue,
+        zoneValue: providedZoneValue
+      };
+    }
+    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: dtState.dateValue,
+      timeValue: dtState.timeValue,
+      zoneValue: dtState.zoneValue
+    };
+  }, [providedParseValue, dtState.dateValue, dtState.timeValue, dtState.zoneValue]);
+  var onDateBlur = function onDateBlur(event) {
+    setIsFocused(false);
+    onBlur(event);
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onBlur) {
+      datePickerPropsWithSelectProps.onBlur(event);
+    }
+  };
+  var onTimeBlur = function onTimeBlur(event) {
+    setIsFocused(false);
+    onBlur(event);
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onBlur) {
+      timePickerPropsWithSelectProps.onBlur(event);
+    }
+  };
+  var onDateFocus = function onDateFocus(event) {
+    setIsFocused(false);
+    onFocus(event);
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onFocus) {
+      datePickerPropsWithSelectProps.onFocus(event);
+    }
+  };
+  var onTimeFocus = function onTimeFocus(event) {
+    setIsFocused(false);
+    onFocus(event);
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onFocus) {
+      timePickerPropsWithSelectProps.onFocus(event);
+    }
+  };
+  var onDateChange = function onDateChange(newDateValue) {
+    var parsedValues = parseValue(dtState.value, newDateValue, dtState.timeValue, dtState.zoneValue);
+    onValueChange({
+      providedDateValue: newDateValue,
+      providedTimeValue: parsedValues.timeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
+      datePickerPropsWithSelectProps.onChange(newDateValue);
+    }
+  };
+  var onTimeChange = function onTimeChange(newTimeValue) {
+    var parsedValues = parseValue(dtState.value, dtState.dateValue, newTimeValue, dtState.zoneValue);
+    onValueChange({
+      providedDateValue: parsedValues.dateValue,
+      providedTimeValue: newTimeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
+      timePickerPropsWithSelectProps.onChange(newTimeValue);
+    }
+  };
+  var onClear = function onClear() {
+    var parsedValues = parseValue(dtState.value, dtState.dateValue, dtState.timeValue, dtState.zoneValue);
+    onValueChange({
+      providedDateValue: '',
+      providedTimeValue: '',
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
+      datePickerPropsWithSelectProps.onChange('');
+    }
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
+      timePickerPropsWithSelectProps.onChange('');
+    }
+  };
+  var onChangePropWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+    fn: onChangeProp,
+    action: 'selectedDate',
+    actionSubject: 'datePicker'
+  }, analyticsAttributes));
+  var onValueChange = function onValueChange(_ref3) {
+    var providedDateValue = _ref3.providedDateValue,
+      providedTimeValue = _ref3.providedTimeValue,
+      providedZoneValue = _ref3.providedZoneValue;
+    if (providedDateValue && providedTimeValue) {
+      var isoValue = (0, _internal.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, providedZoneValue);
+      var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
+        parsedZone = _parseValue.zoneValue;
+      var valueWithValidZone = (0, _internal.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, parsedZone);
+      dispatch({
+        type: 'APPLY',
+        payload: {
+          value: valueWithValidZone,
+          dateValue: providedDateValue,
+          timeValue: providedTimeValue,
+          zoneValue: parsedZone
+        }
+      });
+      onChangePropWithAnalytics(valueWithValidZone);
+      // If the date or time value was cleared when there is an existing datetime value, then clear the value.
+    } else if (dtState.value) {
+      dispatch({
+        type: 'APPLY',
+        payload: {
+          value: '',
+          dateValue: providedDateValue,
+          timeValue: providedTimeValue,
+          zoneValue: providedZoneValue
+        }
+      });
+      onChangePropWithAnalytics('');
+    } else {
+      dispatch({
+        type: 'APPLY',
+        payload: {
+          value: '',
+          dateValue: providedDateValue,
+          timeValue: providedTimeValue,
+          zoneValue: providedZoneValue
+        }
+      });
+    }
+  };
+  var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
+    datePickerProps = (0, _objectWithoutProperties2.default)(datePickerPropsWithSelectProps, _excluded);
+  var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+  var datePickerLabel = datePickerProps.label || 'Date';
+  var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
+    styles: (0, _select.mergeStyles)(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+  });
+  var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
+    timePickerProps = (0, _objectWithoutProperties2.default)(timePickerPropsWithSelectProps, _excluded2);
+  var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
+  var timePickerLabel = timePickerProps.label || 'Time';
+  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(dtState.dateValue || dtState.timeValue);
+  return /*#__PURE__*/_react.default.createElement(_dateTimePickerContainer.DateTimePickerContainer, {
+    appearance: appearance,
+    isDisabled: isDisabled,
+    isFocused: isFocused,
+    isInvalid: isInvalid,
+    testId: testId,
+    innerProps: innerProps
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: dtState.value,
+    "data-testid": testId && "".concat(testId, "--input")
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: compiledStyles.datePickerContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+    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,
+    inputLabel: datePickerProps.inputLabel,
+    inputLabelId: datePickerProps.inputLabelId,
+    isDisabled: datePickerProps.isDisabled || isDisabled,
+    isInvalid: datePickerProps.isInvalid || isInvalid,
+    isOpen: datePickerProps.isOpen,
+    isRequired: datePickerProps.isRequired || isRequired,
+    label: datePickerLabel,
+    locale: datePickerProps.locale || locale,
+    maxDate: datePickerProps.maxDate,
+    minDate: datePickerProps.minDate,
+    name: datePickerProps.name,
+    nextMonthLabel: datePickerProps.nextMonthLabel,
+    onBlur: onDateBlur,
+    onChange: onDateChange,
+    onFocus: onDateFocus,
+    openCalendarLabel: datePickerProps.openCalendarLabel,
+    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: dtState.dateValue,
+    weekStartDay: datePickerProps.weekStartDay
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: compiledStyles.timePickerContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_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: onTimeBlur,
+    onChange: onTimeChange,
+    onFocus: 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: dtState.timeValue
+  })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    xcss: compiledStyles.iconContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    label: clearControlLabel,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_crossCircle.default, (0, _extends2.default)({}, iconProps, {
+        color: "var(--ds-text-subtlest, #6B6E76)",
+        size: "small"
+      }));
+    },
+    onClick: onClear,
+    testId: testId && "".concat(testId, "--icon--container"),
+    tabIndex: -1
+  })) : null);
+});
+var _default = exports.default = DateTimePicker;

package/dist/cjs/internal/convert-to24hr-time.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertTo24hrTime = convertTo24hrTime;
+var map24 = {
+  '12': '12',
+  '01': '13',
+  '02': '14',
+  '03': '15',
+  '04': '16',
+  '05': '17',
+  '06': '18',
+  '07': '19',
+  '08': '20',
+  '09': '21',
+  '10': '22',
+  '11': '23'
+};
+function formatSemi24(time) {
+  if (time.length === 1) {
+    return "0".concat(time, "00");
+  }
+  if (time.length === 2) {
+    return "".concat(time, "00");
+  }
+  if (time.length === 3 || time.length === 5) {
+    return "0".concat(time);
+  }
+  return time;
+}
+function checkHour(hour, meridiem) {
+  if (hour > '24') {
+    return null;
+  }
+  if (hour === '12' && meridiem === 'a') {
+    return '00';
+  }
+  if (hour < '12' && meridiem === 'p') {
+    return map24[hour];
+  }
+  return hour;
+}
+function checkMinuteSecond(value) {
+  if (value > '59') {
+    return null;
+  }
+  return value;
+}
+function convertTo24hrTime(time) {
+  var timeArray = time.toLowerCase().split(/(p|a)/i);
+  var meridiem = timeArray[1];
+  var semi24 = formatSemi24(timeArray[0].trim());
+  var hour = checkHour(semi24.substring(0, 2), meridiem);
+  var minute = checkMinuteSecond(semi24.substring(2, 4));
+  var seconds = semi24.length === 6 && checkMinuteSecond(semi24.substring(4, 6));
+  if (!hour || !minute) {
+    return null;
+  }
+  return {
+    hour: parseInt(hour, 10),
+    minute: parseInt(minute, 10),
+    seconds: parseInt(seconds || '0', 10) || 0
+  };
+}