@atlaskit/datetime-picker 19.4.0 → 19.4.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/datetime-picker
 
+## 19.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 19.4.1
+
+### Patch Changes
+
+- [`efaa75ad1bb94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/efaa75ad1bb94) -
+  Preserve supplied ISO offsets when editing datetime values behind
+  `platform-dst-dtp-preserve-offset`.
+
 ## 19.4.0
 
 ### Minor Changes

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

@@ -47,7 +47,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 = "19.3.2";
+var packageVersion = "19.4.1";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

@@ -35,7 +35,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.2";
+var packageVersion = "19.4.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -83,6 +83,38 @@ var getStyles = function getStyles(isInputMotionEnabled, roundedCorners) {
     }
   };
 };
+var hasExplicitZone = function hasExplicitZone(value) {
+  return value.endsWith('Z') || Math.max(value.lastIndexOf('+'), value.lastIndexOf('-')) > 15;
+};
+var parseDateTimeValueWithOffset = function parseDateTimeValueWithOffset(value) {
+  var parsed = (0, _dateFns.parseISO)(value);
+  var zoneStart = value.endsWith('Z') ? value.length - 1 : Math.max(value.lastIndexOf('+'), value.lastIndexOf('-'));
+  if (!(0, _dateFns.isValid)(parsed) || value[10] !== 'T' || zoneStart <= 15) {
+    return undefined;
+  }
+  var zoneValue = value.slice(zoneStart);
+  if (!/^(?:Z|[+-]\d{2}(?::?\d{2})?)$/.test(zoneValue)) {
+    return undefined;
+  }
+  return {
+    dateValue: value.slice(0, 10),
+    timeValue: value.slice(11, 16),
+    zoneValue: zoneValue
+  };
+};
+var parseDateTimeValue = function parseDateTimeValue(value) {
+  if ((0, _fg.fg)('platform-dst-dtp-preserve-offset')) {
+    if (hasExplicitZone(value)) {
+      return parseDateTimeValueWithOffset(value);
+    }
+  }
+  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'))
+  } : undefined;
+};
 
 /**
  * Two action types keep the reducer focused:
@@ -152,6 +184,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
   var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
+  var isZoneExplicitRef = (0, _react.useRef)(false);
 
   /**
    * Defined inside the component so the reducer closes over `providedParseValue`
@@ -187,13 +220,10 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
               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'))
-          } : {
+          var parsed = parseDateTimeValue(newValue);
+          return parsed ? _objectSpread({
+            value: newValue
+          }, parsed) : {
             value: newValue,
             dateValue: '',
             timeValue: '',
@@ -207,6 +237,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var _useReducer = (0, _react.useReducer)(reducer, null, function () {
       var _ref3;
       var initialValue = (_ref3 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
+      isZoneExplicitRef.current = hasExplicitZone(initialValue);
       var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
       var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
       if (!initialValue) {
@@ -228,13 +259,10 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
           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'))
-      } : {
+      var parsed = parseDateTimeValue(initialValue);
+      return parsed ? _objectSpread({
+        value: initialValue
+      }, parsed) : {
         value: initialValue,
         dateValue: initialDate,
         timeValue: initialTime,
@@ -251,6 +279,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   // `undefined` to the `value` prop will not clear the hidden input and will
   // cause unexpected issues.
   var hasReceivedProvidedValue = (0, _react.useRef)(providedValue !== undefined);
+  var lastEmittedValueRef = (0, _react.useRef)();
   // We don't want to set the state on the first render, as it would
   // needlessly be a duplicate.
   var isFirstRender = (0, _react.useRef)(true);
@@ -261,12 +290,17 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     }
     if (providedValue !== undefined) {
       hasReceivedProvidedValue.current = true;
+      if (providedValue !== lastEmittedValueRef.current) {
+        isZoneExplicitRef.current = hasExplicitZone(providedValue);
+      }
       dispatch({
         type: 'SET_VALUE',
         payload: providedValue
       });
     } else if (hasReceivedProvidedValue.current) {
       hasReceivedProvidedValue.current = false;
+      isZoneExplicitRef.current = false;
+      lastEmittedValueRef.current = undefined;
       dispatch({
         type: 'SET_VALUE',
         payload: ''
@@ -288,12 +322,8 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
         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'))
-    } : {
+    var parsed = parseDateTimeValue(value);
+    return parsed || {
       dateValue: dtState.dateValue,
       timeValue: dtState.timeValue,
       zoneValue: dtState.zoneValue
@@ -374,7 +404,8 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       providedZoneValue = _ref4.providedZoneValue;
     if (providedDateValue && providedTimeValue) {
       var isoValue = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, providedZoneValue);
-      var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
+      var valueToParse = (0, _fg.fg)('platform-dst-dtp-preserve-offset') && !providedParseValue && !isZoneExplicitRef.current ? (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, '') : isoValue;
+      var _parseValue = parseValue(valueToParse, providedDateValue, providedTimeValue, providedZoneValue),
         parsedZone = _parseValue.zoneValue;
       var valueWithValidZone = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, parsedZone);
       dispatch({
@@ -386,6 +417,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
           zoneValue: parsedZone
         }
       });
+      lastEmittedValueRef.current = valueWithValidZone;
       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) {

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

@@ -38,7 +38,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.2";
+var packageVersion = "19.4.1";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -32,7 +32,7 @@ import { parseDate } from '../internal/parse-date';
 import { PickerButtonContainer } from '../internal/picker-button-container';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.3.2";
+const packageVersion = "19.4.1";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

@@ -22,7 +22,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.3.2";
+const packageVersion = "19.4.1";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -70,6 +70,36 @@ const getStyles = (isInputMotionEnabled, roundedCorners) => ({
     }
   })
 });
+const hasExplicitZone = value => value.endsWith('Z') || Math.max(value.lastIndexOf('+'), value.lastIndexOf('-')) > 15;
+const parseDateTimeValueWithOffset = value => {
+  const parsed = parseISO(value);
+  const zoneStart = value.endsWith('Z') ? value.length - 1 : Math.max(value.lastIndexOf('+'), value.lastIndexOf('-'));
+  if (!isValid(parsed) || value[10] !== 'T' || zoneStart <= 15) {
+    return undefined;
+  }
+  const zoneValue = value.slice(zoneStart);
+  if (!/^(?:Z|[+-]\d{2}(?::?\d{2})?)$/.test(zoneValue)) {
+    return undefined;
+  }
+  return {
+    dateValue: value.slice(0, 10),
+    timeValue: value.slice(11, 16),
+    zoneValue
+  };
+};
+const parseDateTimeValue = value => {
+  if (fg('platform-dst-dtp-preserve-offset')) {
+    if (hasExplicitZone(value)) {
+      return parseDateTimeValueWithOffset(value);
+    }
+  }
+  const parsed = parseISO(value);
+  return isValid(parsed) ? {
+    dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
+    timeValue: format(parsed, convertTokens('HH:mm')),
+    zoneValue: format(parsed, convertTokens('ZZ'))
+  } : undefined;
+};
 
 /**
  * Two action types keep the reducer focused:
@@ -124,6 +154,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
+  const isZoneExplicitRef = useRef(false);
 
   /**
    * Defined inside the component so the reducer closes over `providedParseValue`
@@ -160,12 +191,10 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
               zoneValue: state.zoneValue
             };
           }
-          const parsed = parseISO(newValue);
-          return isValid(parsed) ? {
+          const parsed = parseDateTimeValue(newValue);
+          return parsed ? {
             value: newValue,
-            dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
-            timeValue: format(parsed, convertTokens('HH:mm')),
-            zoneValue: format(parsed, convertTokens('ZZ'))
+            ...parsed
           } : {
             value: newValue,
             dateValue: '',
@@ -180,6 +209,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
   const [dtState, dispatch] = useReducer(reducer, null, () => {
     var _ref;
     const initialValue = (_ref = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref !== void 0 ? _ref : '';
+    isZoneExplicitRef.current = hasExplicitZone(initialValue);
     const initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
     const initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
     if (!initialValue) {
@@ -202,12 +232,10 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
         zoneValue: ''
       };
     }
-    const parsed = parseISO(initialValue);
-    return isValid(parsed) ? {
+    const parsed = parseDateTimeValue(initialValue);
+    return parsed ? {
       value: initialValue,
-      dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
-      timeValue: format(parsed, convertTokens('HH:mm')),
-      zoneValue: format(parsed, convertTokens('ZZ'))
+      ...parsed
     } : {
       value: initialValue,
       dateValue: initialDate,
@@ -222,6 +250,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
   // `undefined` to the `value` prop will not clear the hidden input and will
   // cause unexpected issues.
   const hasReceivedProvidedValue = useRef(providedValue !== undefined);
+  const lastEmittedValueRef = useRef();
   // We don't want to set the state on the first render, as it would
   // needlessly be a duplicate.
   const isFirstRender = useRef(true);
@@ -232,12 +261,17 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     }
     if (providedValue !== undefined) {
       hasReceivedProvidedValue.current = true;
+      if (providedValue !== lastEmittedValueRef.current) {
+        isZoneExplicitRef.current = hasExplicitZone(providedValue);
+      }
       dispatch({
         type: 'SET_VALUE',
         payload: providedValue
       });
     } else if (hasReceivedProvidedValue.current) {
       hasReceivedProvidedValue.current = false;
+      isZoneExplicitRef.current = false;
+      lastEmittedValueRef.current = undefined;
       dispatch({
         type: 'SET_VALUE',
         payload: ''
@@ -259,12 +293,8 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
         zoneValue: providedZoneValue
       };
     }
-    const parsed = parseISO(value);
-    return isValid(parsed) ? {
-      dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
-      timeValue: format(parsed, convertTokens('HH:mm')),
-      zoneValue: format(parsed, convertTokens('ZZ'))
-    } : {
+    const parsed = parseDateTimeValue(value);
+    return parsed || {
       dateValue: dtState.dateValue,
       timeValue: dtState.timeValue,
       zoneValue: dtState.zoneValue
@@ -347,9 +377,10 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
   }) => {
     if (providedDateValue && providedTimeValue) {
       const isoValue = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
+      const valueToParse = fg('platform-dst-dtp-preserve-offset') && !providedParseValue && !isZoneExplicitRef.current ? formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, '') : isoValue;
       const {
         zoneValue: parsedZone
-      } = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue);
+      } = parseValue(valueToParse, providedDateValue, providedTimeValue, providedZoneValue);
       const valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
       dispatch({
         type: 'APPLY',
@@ -360,6 +391,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
           zoneValue: parsedZone
         }
       });
+      lastEmittedValueRef.current = valueWithValidZone;
       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) {

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

@@ -25,7 +25,7 @@ import { PickerButtonContainer } from '../internal/picker-button-container';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.3.2";
+const packageVersion = "19.4.1";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -40,7 +40,7 @@ import { parseDate } from '../internal/parse-date';
 import { PickerButtonContainer } from '../internal/picker-button-container';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.2";
+var packageVersion = "19.4.1";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

@@ -29,7 +29,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.2";
+var packageVersion = "19.4.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -77,6 +77,38 @@ var getStyles = function getStyles(isInputMotionEnabled, roundedCorners) {
     }
   };
 };
+var hasExplicitZone = function hasExplicitZone(value) {
+  return value.endsWith('Z') || Math.max(value.lastIndexOf('+'), value.lastIndexOf('-')) > 15;
+};
+var parseDateTimeValueWithOffset = function parseDateTimeValueWithOffset(value) {
+  var parsed = parseISO(value);
+  var zoneStart = value.endsWith('Z') ? value.length - 1 : Math.max(value.lastIndexOf('+'), value.lastIndexOf('-'));
+  if (!isValid(parsed) || value[10] !== 'T' || zoneStart <= 15) {
+    return undefined;
+  }
+  var zoneValue = value.slice(zoneStart);
+  if (!/^(?:Z|[+-]\d{2}(?::?\d{2})?)$/.test(zoneValue)) {
+    return undefined;
+  }
+  return {
+    dateValue: value.slice(0, 10),
+    timeValue: value.slice(11, 16),
+    zoneValue: zoneValue
+  };
+};
+var parseDateTimeValue = function parseDateTimeValue(value) {
+  if (fg('platform-dst-dtp-preserve-offset')) {
+    if (hasExplicitZone(value)) {
+      return parseDateTimeValueWithOffset(value);
+    }
+  }
+  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'))
+  } : undefined;
+};
 
 /**
  * Two action types keep the reducer focused:
@@ -146,6 +178,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
   var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
+  var isZoneExplicitRef = useRef(false);
 
   /**
    * Defined inside the component so the reducer closes over `providedParseValue`
@@ -181,13 +214,10 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
               zoneValue: state.zoneValue
             };
           }
-          var parsed = parseISO(newValue);
-          return isValid(parsed) ? {
-            value: newValue,
-            dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
-            timeValue: format(parsed, convertTokens('HH:mm')),
-            zoneValue: format(parsed, convertTokens('ZZ'))
-          } : {
+          var parsed = parseDateTimeValue(newValue);
+          return parsed ? _objectSpread({
+            value: newValue
+          }, parsed) : {
             value: newValue,
             dateValue: '',
             timeValue: '',
@@ -201,6 +231,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _useReducer = useReducer(reducer, null, function () {
       var _ref3;
       var initialValue = (_ref3 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
+      isZoneExplicitRef.current = hasExplicitZone(initialValue);
       var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
       var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
       if (!initialValue) {
@@ -222,13 +253,10 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
           zoneValue: ''
         };
       }
-      var parsed = parseISO(initialValue);
-      return isValid(parsed) ? {
-        value: initialValue,
-        dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
-        timeValue: format(parsed, convertTokens('HH:mm')),
-        zoneValue: format(parsed, convertTokens('ZZ'))
-      } : {
+      var parsed = parseDateTimeValue(initialValue);
+      return parsed ? _objectSpread({
+        value: initialValue
+      }, parsed) : {
         value: initialValue,
         dateValue: initialDate,
         timeValue: initialTime,
@@ -245,6 +273,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   // `undefined` to the `value` prop will not clear the hidden input and will
   // cause unexpected issues.
   var hasReceivedProvidedValue = useRef(providedValue !== undefined);
+  var lastEmittedValueRef = useRef();
   // We don't want to set the state on the first render, as it would
   // needlessly be a duplicate.
   var isFirstRender = useRef(true);
@@ -255,12 +284,17 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }
     if (providedValue !== undefined) {
       hasReceivedProvidedValue.current = true;
+      if (providedValue !== lastEmittedValueRef.current) {
+        isZoneExplicitRef.current = hasExplicitZone(providedValue);
+      }
       dispatch({
         type: 'SET_VALUE',
         payload: providedValue
       });
     } else if (hasReceivedProvidedValue.current) {
       hasReceivedProvidedValue.current = false;
+      isZoneExplicitRef.current = false;
+      lastEmittedValueRef.current = undefined;
       dispatch({
         type: 'SET_VALUE',
         payload: ''
@@ -282,12 +316,8 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         zoneValue: providedZoneValue
       };
     }
-    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'))
-    } : {
+    var parsed = parseDateTimeValue(value);
+    return parsed || {
       dateValue: dtState.dateValue,
       timeValue: dtState.timeValue,
       zoneValue: dtState.zoneValue
@@ -368,7 +398,8 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       providedZoneValue = _ref4.providedZoneValue;
     if (providedDateValue && providedTimeValue) {
       var isoValue = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
-      var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
+      var valueToParse = fg('platform-dst-dtp-preserve-offset') && !providedParseValue && !isZoneExplicitRef.current ? formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, '') : isoValue;
+      var _parseValue = parseValue(valueToParse, providedDateValue, providedTimeValue, providedZoneValue),
         parsedZone = _parseValue.zoneValue;
       var valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
       dispatch({
@@ -380,6 +411,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
           zoneValue: parsedZone
         }
       });
+      lastEmittedValueRef.current = valueWithValidZone;
       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) {

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

@@ -31,7 +31,7 @@ import { PickerButtonContainer } from '../internal/picker-button-container';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.2";
+var packageVersion = "19.4.1";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "19.4.0",
+	"version": "19.4.2",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,8 +48,8 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-select": "^4.12.0",
 		"@atlaskit/select": "^23.1.0",
-		"@atlaskit/tokens": "^20.7.0",
-		"@atlaskit/top-layer": "^6.6.0",
+		"@atlaskit/tokens": "^20.8.0",
+		"@atlaskit/top-layer": "^7.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
@@ -64,15 +64,15 @@
 		"@atlaskit/code": "^20.0.0",
 		"@atlaskit/codemod-utils": "^5.1.0",
 		"@atlaskit/docs": "^12.3.0",
-		"@atlaskit/form": "^18.2.0",
+		"@atlaskit/form": "^18.3.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/menu": "^11.0.0",
 		"@atlaskit/modal-dialog": "^17.1.0",
-		"@atlaskit/popup": "^10.0.0",
+		"@atlaskit/popup": "^10.1.0",
 		"@atlaskit/range": "^12.2.0",
 		"@atlaskit/section-message": "^10.2.0",
-		"@atlaskit/textfield": "^10.2.0",
+		"@atlaskit/textfield": "^10.3.0",
 		"@atlaskit/toggle": "^17.3.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -92,6 +92,9 @@
 		"platform-dst-top-layer": {
 			"type": "boolean"
 		},
+		"platform-dst-dtp-preserve-offset": {
+			"type": "boolean"
+		},
 		"platform-dst-motion-uplift-input": {
 			"type": "boolean",
 			"referenceOnly": true