@atlaskit/datetime-picker 19.4.1 → 19.4.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/datetime-picker
 
+## 19.4.3
+
+### Patch Changes
+
+- [`60b28ae0201d7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/60b28ae0201d7) -
+  Behind `platform-dst-top-layer`, focus returns to the opener when the menu closes with focus
+  inside it.
+- Updated dependencies
+
+## 19.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 19.4.1
 
 ### Patch Changes

package/codemods/14.0.0-remove-duplicate-and-unused-props.tsx

@@ -1,6 +1,8 @@
 import { type API, type FileInfo, type JSCodeshift, type Options } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
+import { getJSXAttributeByName, getJSXAttributesByName } from '@atlaskit/codemod-utils/support';
+
 import { addJSXAttributeToJSXElement } from './utils/add-jsx-attribute-to-jsx-element';
 import {
 	dtpPropsToMoveIntoPickerProps,
@@ -9,8 +11,6 @@ import {
 import { getImportDeclarationCollection } from './utils/get-import-declaration-collection';
 import { getImportSpecifierCollection } from './utils/get-import-specifier-collection';
 import { getImportSpecifierName } from './utils/get-import-specifier-name';
-import { getJSXAttributeByName } from './utils/get-jsx-attribute-by-name';
-import { getJSXAttributesByName } from './utils/get-jsx-attributes-by-name';
 import { hasImportDeclaration } from './utils/has-import-declaration';
 import { removeJSXAttributeByName } from './utils/remove-jsx-attribute-by-name';
 import { removeJSXAttributeObjectPropertyByName } from './utils/remove-jsx-attribute-object-property-by-name';

package/codemods/utils/create-remove-func-for.tsx

@@ -1,9 +1,11 @@
 import { type JSCodeshift } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
-import { addCommentToStartOfFile, getNamedSpecifier } from '@atlaskit/codemod-utils/support';
-
-import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+import {
+	addCommentToStartOfFile,
+	getJSXAttributesByName,
+	getNamedSpecifier,
+} from '@atlaskit/codemod-utils/support';
 
 export const createRemoveFuncFor: (
 	component: string,

package/codemods/utils/remove-jsx-attribute-by-name.tsx

@@ -1,6 +1,7 @@
 import { type ASTPath, type JSCodeshift, type JSXElement } from 'jscodeshift';
 
-import { getJSXAttributeByName } from './get-jsx-attribute-by-name';
+import { getJSXAttributeByName } from '@atlaskit/codemod-utils/support';
+
 import { getJSXAttributes } from './get-jsx-attributes';
 
 export const removeJSXAttributeByName: (

package/codemods/utils/remove-jsx-attribute-object-property-by-name.tsx

@@ -6,8 +6,8 @@ import {
 	type StringLiteral,
 } from 'jscodeshift';
 
-import { getJSXAttributeByName } from './get-jsx-attribute-by-name';
-import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+import { getJSXAttributeByName, getJSXAttributesByName } from '@atlaskit/codemod-utils/support';
+
 import { removeJSXAttributeByName } from './remove-jsx-attribute-by-name';
 
 export const removeJSXAttributeObjectPropertyByName: (

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.4.0";
+var packageVersion = "19.4.2";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -76,7 +76,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   // Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
   // opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
   var isPointerInteractionRef = (0, _react.useRef)(false);
-  var focusRestorationTargetRef = (0, _react.useRef)(null);
+  // Top layer: set when Escape is left to Select, so `onMenuClose` resets the picker state.
+  var isEscapeCloseRef = (0, _react.useRef)(false);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
@@ -233,6 +234,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var getIsOpen = function getIsOpen() {
     return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
   };
+  // Top layer: the calendar is closed but still mounted while Select's menu closes. The platform
+  // then returns focus, and Firefox first moves focus to `<body>` as the popover hides. Neither is
+  // the user leaving or arriving at the field.
+  var isCalendarClosing = function isCalendarClosing() {
+    return (0, _fg.fg)('platform-dst-top-layer') && !getIsOpen() && calendarRef.current !== null;
+  };
   var onCalendarChange = function onCalendarChange(_ref2) {
     var iso = _ref2.iso;
     setCalendarValue((0, _getParsedIso.getParsedISO)({
@@ -248,8 +255,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     setWasOpenedFromCalendarButton(false);
     onChangePropWithAnalytics(iso);
 
-    // When using top-layer, PopupContent handles focus restoration automatically
-    // on close based on the role. Only manually restore focus for the legacy path.
+    // Top layer: no focus move here. Select hides its menu's popover, and the platform returns
+    // focus.
     if (!(0, _fg.fg)('platform-dst-top-layer')) {
       if (wasOpenedFromCalendarButton) {
         var _calendarButtonRef$cu;
@@ -272,7 +279,10 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     var _containerRef$current2;
     var newlyFocusedElement = event.relatedTarget;
     isPointerInteractionRef.current = false;
-    if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
+    // A blur to nowhere while the calendar closes is part of the close. A blur to a real element
+    // is the user leaving the field.
+    var isClosingBlur = isCalendarClosing() && newlyFocusedElement === null;
+    if (!isClosingBlur && !(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
       setWasOpenedFromCalendarButton(false);
@@ -304,7 +314,11 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     } else {
       // Opening an auto popover during pointer focus allows the matching pointerup
       // to immediately light-dismiss it. Let the subsequent click open it instead.
-      if (!(0, _fg.fg)('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+      var isPointerFocus = (0, _fg.fg)('platform-dst-top-layer') && isPointerInteractionRef.current;
+      // Focus that returns while the calendar closes must not change the open state.
+      // `getIsOpen()` includes an `isOpen={false}` prop, so the calendar shows again when the prop
+      // is removed.
+      if (!isPointerFocus && !isCalendarClosing()) {
         // Don't open when focused into via keyboard if the calendar button is present
         setIsOpen(!shouldShowCalendarButton);
       }
@@ -343,11 +357,10 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     }
     var shouldDeferEscapeHandling = event.key === 'Escape' && isTopLayerEnabled && getIsOpen();
     if (shouldDeferEscapeHandling) {
-      var _containerRef$current4, _containerRef$current5;
       // Select owns Escape cancellation and dismissal for its default top-layer popup.
-      // Defer DatePicker's focus and state cleanup until the menu has closed.
-      var focusRestorationTarget = wasOpenedFromCalendarButton ? calendarButtonRef.current : (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.querySelector('[role="combobox"]')) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : null;
-      focusRestorationTargetRef.current = event.defaultPrevented ? null : focusRestorationTarget;
+      // Defer DatePicker's state cleanup until the menu has closed. No focus move here: Select
+      // hides its menu's popover, and the platform returns focus.
+      isEscapeCloseRef.current = !event.defaultPrevented;
       return;
     }
     switch (keyPressed) {
@@ -357,8 +370,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
         } else {
-          var _containerRef$current6;
-          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.querySelector('[role="combobox"]');
+          var _containerRef$current4;
+          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
           innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
         }
         setIsOpen(false);
@@ -414,10 +427,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   };
   var onMenuClose = function onMenuClose() {
     var _selectProps$onMenuCl;
-    var focusTarget = focusRestorationTargetRef.current;
-    focusRestorationTargetRef.current = null;
-    if ((0, _fg.fg)('platform-dst-top-layer') && focusTarget) {
-      focusTarget.focus();
+    var isEscapeClose = isEscapeCloseRef.current;
+    isEscapeCloseRef.current = false;
+    if ((0, _fg.fg)('platform-dst-top-layer') && isEscapeClose) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
       setWasOpenedFromCalendarButton(false);

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.4.0";
+var packageVersion = "19.4.2";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -83,6 +83,9 @@ 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('-'));
@@ -101,8 +104,7 @@ var parseDateTimeValueWithOffset = function parseDateTimeValueWithOffset(value)
 };
 var parseDateTimeValue = function parseDateTimeValue(value) {
   if ((0, _fg.fg)('platform-dst-dtp-preserve-offset')) {
-    var hasExplicitZone = value.endsWith('Z') || Math.max(value.lastIndexOf('+'), value.lastIndexOf('-')) > 15;
-    if (hasExplicitZone) {
+    if (hasExplicitZone(value)) {
       return parseDateTimeValueWithOffset(value);
     }
   }
@@ -182,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`
@@ -234,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) {
@@ -275,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);
@@ -285,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: ''
@@ -394,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({
@@ -406,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.4.0";
+var packageVersion = "19.4.2";
 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.4.0";
+const packageVersion = "19.4.2";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -61,7 +61,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   // Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
   // opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
   const isPointerInteractionRef = useRef(false);
-  const focusRestorationTargetRef = useRef(null);
+  // Top layer: set when Escape is left to Select, so `onMenuClose` resets the picker state.
+  const isEscapeCloseRef = useRef(false);
   const {
     appearance = 'default',
     autoFocus = false,
@@ -157,6 +158,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
   const getValue = () => propValue !== null && propValue !== void 0 ? propValue : value;
   const getIsOpen = () => isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
+  // Top layer: the calendar is closed but still mounted while Select's menu closes. The platform
+  // then returns focus, and Firefox first moves focus to `<body>` as the popover hides. Neither is
+  // the user leaving or arriving at the field.
+  const isCalendarClosing = () => fg('platform-dst-top-layer') && !getIsOpen() && calendarRef.current !== null;
   const onCalendarChange = ({
     iso
   }) => {
@@ -174,8 +179,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     setWasOpenedFromCalendarButton(false);
     onChangePropWithAnalytics(iso);
 
-    // When using top-layer, PopupContent handles focus restoration automatically
-    // on close based on the role. Only manually restore focus for the legacy path.
+    // Top layer: no focus move here. Select hides its menu's popover, and the platform returns
+    // focus.
     if (!fg('platform-dst-top-layer')) {
       if (wasOpenedFromCalendarButton) {
         var _calendarButtonRef$cu;
@@ -198,7 +203,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     var _containerRef$current2;
     const newlyFocusedElement = event.relatedTarget;
     isPointerInteractionRef.current = false;
-    if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
+    // A blur to nowhere while the calendar closes is part of the close. A blur to a real element
+    // is the user leaving the field.
+    const isClosingBlur = isCalendarClosing() && newlyFocusedElement === null;
+    if (!isClosingBlur && !(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
       setWasOpenedFromCalendarButton(false);
@@ -230,7 +238,11 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     } else {
       // Opening an auto popover during pointer focus allows the matching pointerup
       // to immediately light-dismiss it. Let the subsequent click open it instead.
-      if (!fg('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+      const isPointerFocus = fg('platform-dst-top-layer') && isPointerInteractionRef.current;
+      // Focus that returns while the calendar closes must not change the open state.
+      // `getIsOpen()` includes an `isOpen={false}` prop, so the calendar shows again when the prop
+      // is removed.
+      if (!isPointerFocus && !isCalendarClosing()) {
         // Don't open when focused into via keyboard if the calendar button is present
         setIsOpen(!shouldShowCalendarButton);
       }
@@ -269,11 +281,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     }
     const shouldDeferEscapeHandling = event.key === 'Escape' && isTopLayerEnabled && getIsOpen();
     if (shouldDeferEscapeHandling) {
-      var _containerRef$current4, _containerRef$current5;
       // Select owns Escape cancellation and dismissal for its default top-layer popup.
-      // Defer DatePicker's focus and state cleanup until the menu has closed.
-      const focusRestorationTarget = wasOpenedFromCalendarButton ? calendarButtonRef.current : (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.querySelector('[role="combobox"]')) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : null;
-      focusRestorationTargetRef.current = event.defaultPrevented ? null : focusRestorationTarget;
+      // Defer DatePicker's state cleanup until the menu has closed. No focus move here: Select
+      // hides its menu's popover, and the platform returns focus.
+      isEscapeCloseRef.current = !event.defaultPrevented;
       return;
     }
     switch (keyPressed) {
@@ -283,8 +294,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 ? void 0 : _calendarButtonRef$cu2.focus();
         } else {
-          var _containerRef$current6;
-          const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.querySelector('[role="combobox"]');
+          var _containerRef$current4;
+          const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
           innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
         }
         setIsOpen(false);
@@ -340,10 +351,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   };
   const onMenuClose = () => {
     var _selectProps$onMenuCl;
-    const focusTarget = focusRestorationTargetRef.current;
-    focusRestorationTargetRef.current = null;
-    if (fg('platform-dst-top-layer') && focusTarget) {
-      focusTarget.focus();
+    const isEscapeClose = isEscapeCloseRef.current;
+    isEscapeCloseRef.current = false;
+    if (fg('platform-dst-top-layer') && isEscapeClose) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
       setWasOpenedFromCalendarButton(false);

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.4.0";
+const packageVersion = "19.4.2";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -70,6 +70,7 @@ 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('-'));
@@ -88,8 +89,7 @@ const parseDateTimeValueWithOffset = value => {
 };
 const parseDateTimeValue = value => {
   if (fg('platform-dst-dtp-preserve-offset')) {
-    const hasExplicitZone = value.endsWith('Z') || Math.max(value.lastIndexOf('+'), value.lastIndexOf('-')) > 15;
-    if (hasExplicitZone) {
+    if (hasExplicitZone(value)) {
       return parseDateTimeValueWithOffset(value);
     }
   }
@@ -154,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`
@@ -208,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) {
@@ -248,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);
@@ -258,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: ''
@@ -369,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',
@@ -382,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.4.0";
+const packageVersion = "19.4.2";
 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.4.0";
+var packageVersion = "19.4.2";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -69,7 +69,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   // Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
   // opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
   var isPointerInteractionRef = useRef(false);
-  var focusRestorationTargetRef = useRef(null);
+  // Top layer: set when Escape is left to Select, so `onMenuClose` resets the picker state.
+  var isEscapeCloseRef = useRef(false);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
@@ -226,6 +227,12 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   var getIsOpen = function getIsOpen() {
     return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
   };
+  // Top layer: the calendar is closed but still mounted while Select's menu closes. The platform
+  // then returns focus, and Firefox first moves focus to `<body>` as the popover hides. Neither is
+  // the user leaving or arriving at the field.
+  var isCalendarClosing = function isCalendarClosing() {
+    return fg('platform-dst-top-layer') && !getIsOpen() && calendarRef.current !== null;
+  };
   var onCalendarChange = function onCalendarChange(_ref2) {
     var iso = _ref2.iso;
     setCalendarValue(getParsedISO({
@@ -241,8 +248,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     setWasOpenedFromCalendarButton(false);
     onChangePropWithAnalytics(iso);
 
-    // When using top-layer, PopupContent handles focus restoration automatically
-    // on close based on the role. Only manually restore focus for the legacy path.
+    // Top layer: no focus move here. Select hides its menu's popover, and the platform returns
+    // focus.
     if (!fg('platform-dst-top-layer')) {
       if (wasOpenedFromCalendarButton) {
         var _calendarButtonRef$cu;
@@ -265,7 +272,10 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     var _containerRef$current2;
     var newlyFocusedElement = event.relatedTarget;
     isPointerInteractionRef.current = false;
-    if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
+    // A blur to nowhere while the calendar closes is part of the close. A blur to a real element
+    // is the user leaving the field.
+    var isClosingBlur = isCalendarClosing() && newlyFocusedElement === null;
+    if (!isClosingBlur && !(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
       setWasOpenedFromCalendarButton(false);
@@ -297,7 +307,11 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     } else {
       // Opening an auto popover during pointer focus allows the matching pointerup
       // to immediately light-dismiss it. Let the subsequent click open it instead.
-      if (!fg('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+      var isPointerFocus = fg('platform-dst-top-layer') && isPointerInteractionRef.current;
+      // Focus that returns while the calendar closes must not change the open state.
+      // `getIsOpen()` includes an `isOpen={false}` prop, so the calendar shows again when the prop
+      // is removed.
+      if (!isPointerFocus && !isCalendarClosing()) {
         // Don't open when focused into via keyboard if the calendar button is present
         setIsOpen(!shouldShowCalendarButton);
       }
@@ -336,11 +350,10 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     }
     var shouldDeferEscapeHandling = event.key === 'Escape' && isTopLayerEnabled && getIsOpen();
     if (shouldDeferEscapeHandling) {
-      var _containerRef$current4, _containerRef$current5;
       // Select owns Escape cancellation and dismissal for its default top-layer popup.
-      // Defer DatePicker's focus and state cleanup until the menu has closed.
-      var focusRestorationTarget = wasOpenedFromCalendarButton ? calendarButtonRef.current : (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.querySelector('[role="combobox"]')) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : null;
-      focusRestorationTargetRef.current = event.defaultPrevented ? null : focusRestorationTarget;
+      // Defer DatePicker's state cleanup until the menu has closed. No focus move here: Select
+      // hides its menu's popover, and the platform returns focus.
+      isEscapeCloseRef.current = !event.defaultPrevented;
       return;
     }
     switch (keyPressed) {
@@ -350,8 +363,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
         } else {
-          var _containerRef$current6;
-          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.querySelector('[role="combobox"]');
+          var _containerRef$current4;
+          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
           innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
         }
         setIsOpen(false);
@@ -407,10 +420,9 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   };
   var onMenuClose = function onMenuClose() {
     var _selectProps$onMenuCl;
-    var focusTarget = focusRestorationTargetRef.current;
-    focusRestorationTargetRef.current = null;
-    if (fg('platform-dst-top-layer') && focusTarget) {
-      focusTarget.focus();
+    var isEscapeClose = isEscapeCloseRef.current;
+    isEscapeCloseRef.current = false;
+    if (fg('platform-dst-top-layer') && isEscapeClose) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
       setWasOpenedFromCalendarButton(false);

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.4.0";
+var packageVersion = "19.4.2";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -77,6 +77,9 @@ 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('-'));
@@ -95,8 +98,7 @@ var parseDateTimeValueWithOffset = function parseDateTimeValueWithOffset(value)
 };
 var parseDateTimeValue = function parseDateTimeValue(value) {
   if (fg('platform-dst-dtp-preserve-offset')) {
-    var hasExplicitZone = value.endsWith('Z') || Math.max(value.lastIndexOf('+'), value.lastIndexOf('-')) > 15;
-    if (hasExplicitZone) {
+    if (hasExplicitZone(value)) {
       return parseDateTimeValueWithOffset(value);
     }
   }
@@ -176,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`
@@ -228,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) {
@@ -269,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);
@@ -279,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: ''
@@ -388,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({
@@ -400,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.4.0";
+var packageVersion = "19.4.2";
 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.1",
+	"version": "19.4.3",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.6.0",
-		"@atlaskit/button": "^25.6.0",
+		"@atlaskit/button": "^25.7.0",
 		"@atlaskit/calendar": "^19.5.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
@@ -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.7.0",
+		"@atlaskit/tokens": "^20.9.0",
+		"@atlaskit/top-layer": "^7.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
@@ -62,17 +62,17 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/code": "^20.0.0",
-		"@atlaskit/codemod-utils": "^5.1.0",
+		"@atlaskit/codemod-utils": "^5.2.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/modal-dialog": "^17.2.0",
+		"@atlaskit/popup": "^10.2.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:^",

package/codemods/utils/get-jsx-attribute-by-name.tsx

@@ -1,15 +0,0 @@
-import { type ASTPath, type JSCodeshift, type JSXAttribute, type JSXElement } from 'jscodeshift';
-
-export const getJSXAttributeByName: (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-) => JSXAttribute | undefined = (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-): JSXAttribute | undefined => {
-	const attributes: JSXAttribute[] = j(jsxElementPath).find(j.JSXAttribute).nodes();
-
-	return attributes?.find((attr) => attr.name && attr.name.name === attributeName);
-};

package/codemods/utils/get-jsx-attributes-by-name.tsx

@@ -1,17 +0,0 @@
-import { type ASTPath, type JSCodeshift, type JSXAttribute, type JSXElement } from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-export function getJSXAttributesByName(
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-): Collection<JSXAttribute> {
-	return j(jsxElementPath)
-		.find(j.JSXOpeningElement)
-		.find(j.JSXAttribute)
-		.filter((jsxAttributePath) =>
-			j(jsxAttributePath)
-				.find(j.JSXIdentifier)
-				.some((jsxIdentifierPath) => jsxIdentifierPath.node.name === attributeName),
-		);
-}