@atlaskit/datetime-picker 18.7.2 → 18.7.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/datetime-picker
 
+## 18.7.4
+
+### Patch Changes
+
+- [`38dbf5a2b937f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38dbf5a2b937f) -
+  Use a manual popover for Select's built-in menu on the platform-dst-top-layer path so input and
+  menu interactions do not dismiss it. The menu owns Escape dismissal even when focus is outside
+  Select, and leaves already-cancelled Escape events alone. Custom menu portals retain ownership of
+  their dismissal. DatePicker defers top-layer Escape dismissal to Select, then restores focus after
+  the menu closes so an enclosing popup remains open.
+
+  Add `additionalInsideElementRefs` to Select and `useSimpleLightDismiss` so detached controls can
+  participate in a menu's light-dismiss boundary.
+
+- Updated dependencies
+
+## 18.7.3
+
+### Patch Changes
+
+- [`9120a19d533ce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9120a19d533ce) -
+  Use the current local date as the reference when parsing dateFormat input, behind
+  `platform-dst-dp-current-reference-date`. Two-digit years now use date-fns century inference
+  relative to the current year, and formats without a year use the current year instead of the Unix
+  epoch. Requires `platform-dst-dp-parse-date-format` to be enabled.
+- Updated dependencies
+
 ## 18.7.2
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-/* date-picker.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -24,8 +24,8 @@ var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
 var _localizationProvider = require("@atlaskit/locale/localization-provider");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
 var _styles = require("@atlaskit/react-select/styles");
+var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
 var _emptyComponent = require("../internal/empty-component");
 var _formatDate = require("../internal/format-date");
 var _getParsedIso = require("../internal/get-parsed-iso");
@@ -38,14 +38,16 @@ var _menu = require("../internal/menu");
 var _menuTopLayer = require("../internal/menu-top-layer");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
-var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"]; /// <reference types="node" />
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"],
+  _excluded2 = ["MenuPortal"],
+  _excluded3 = ["menuRenderMode"]; /// <reference types="node" />
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.1";
+var packageVersion = "18.7.3";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -69,12 +71,14 @@ var analyticsAttributes = {
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
 var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwardedRef) {
+  var _selectProps$componen;
   var containerRef = (0, _react.useRef)(null);
   var calendarRef = (0, _react.useRef)(null);
   var calendarButtonRef = (0, _react.useRef)(null);
   // 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);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
@@ -179,10 +183,23 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
     isKeyDown = _useState18[0],
     setIsKeyDown = _useState18[1];
+  var isTopLayerEnabled = (0, _fg.fg)('platform-dst-top-layer');
+  var _ref = (_selectProps$componen = selectProps.components) !== null && _selectProps$componen !== void 0 ? _selectProps$componen : {},
+    customMenuPortal = _ref.MenuPortal,
+    selectComponentOverrides = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
+  var _menuRenderMode = selectProps.menuRenderMode,
+    selectPropsWithoutMenuRenderMode = (0, _objectWithoutProperties2.default)(selectProps, _excluded3);
+  if (process.env.NODE_ENV !== 'production' && isTopLayerEnabled && (selectProps.menuRenderMode === 'inline' || customMenuPortal)) {
+    throw new Error('DatePicker does not support selectProps.menuRenderMode="inline" or selectProps.components.MenuPortal when platform-dst-top-layer is enabled.');
+  }
+  var selectPropsForSelect = isTopLayerEnabled ? selectPropsWithoutMenuRenderMode : selectProps;
   var _useState19 = (0, _react.useState)(false),
     _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
     wasOpenedFromCalendarButton = _useState20[0],
     setWasOpenedFromCalendarButton = _useState20[1];
+  var additionalInsideElementRefs = (0, _react.useMemo)(function () {
+    return [calendarButtonRef];
+  }, [calendarButtonRef]);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   var _useReducer = (0, _react.useReducer)(function (x) {
@@ -217,14 +234,14 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var getIsOpen = function getIsOpen() {
     return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
   };
-  var onCalendarChange = function onCalendarChange(_ref) {
-    var iso = _ref.iso;
+  var onCalendarChange = function onCalendarChange(_ref2) {
+    var iso = _ref2.iso;
     setCalendarValue((0, _getParsedIso.getParsedISO)({
       iso: iso
     }));
   };
-  var onCalendarSelect = function onCalendarSelect(_ref2) {
-    var iso = _ref2.iso;
+  var onCalendarSelect = function onCalendarSelect(_ref3) {
+    var iso = _ref3.iso;
     setSelectInputValue('');
     setIsOpen(false);
     setCalendarValue(iso);
@@ -325,6 +342,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       setIsOpen(true);
       setWasOpenedFromCalendarButton(false);
     }
+    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;
+      return;
+    }
     switch (keyPressed) {
       case 'escape':
         // Restore focus because it may have moved from the input into the calendar.
@@ -332,8 +358,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$current4;
-          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
+          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"]');
           innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
         }
         setIsOpen(false);
@@ -387,6 +413,18 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
         break;
     }
   };
+  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();
+      setIsOpen(false);
+      setShouldSetFocusOnCurrentDay(false);
+      setWasOpenedFromCalendarButton(false);
+    }
+    (_selectProps$onMenuCl = selectProps.onMenuClose) === null || _selectProps$onMenuCl === void 0 || _selectProps$onMenuCl.call(selectProps);
+  };
   var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(e) {
     // Don't allow an arrow up or down to open the menu, since the input key
     // down handler is actually on the parent.
@@ -471,7 +509,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     id: valueId,
     lang: propLocale
   });
-  var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
+  var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, isTopLayerEnabled ? selectComponentOverrides : selectProps.components), {}, {
     DropdownIndicator: shouldShowCalendarButton ? _emptyComponent.EmptyComponent : dropDownIcon
   }, shouldShowCalendarButton ? {
     IndicatorsContainer: function IndicatorsContainer(props) {
@@ -595,13 +633,16 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     ,
     styles: mergedStyles,
     value: initialValue
-  }, selectProps, {
+  }, selectPropsForSelect, {
+    additionalInsideElementRefs: isTopLayerEnabled ? additionalInsideElementRefs : undefined,
+    onMenuClose: onMenuClose
     // For some reason, this and the below `styles` type error _only_ show
     // up when you alter some of the properties in the `selectComponents`
     // object. These errors are still present, and I suspect have always
     // been present, without changing the unrelated code. Ignoring as the
     // component still works as expected despite this error. And also
     // because the select refresh team may solve it later.
+    ,
     components: selectComponents
     // These are below the spread because I don't know what is in
     // selectProps or not and what wil be overwritten

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

@@ -1,4 +1,4 @@
-/* date-time-picker.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-time-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -33,7 +33,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 = "18.7.1";
+var packageVersion = "18.7.3";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -16,9 +16,9 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _localizationProvider = require("@atlaskit/locale/localization-provider");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
-var _creatableSelect = _interopRequireDefault(require("@atlaskit/select/creatable-select"));
 var _styles = require("@atlaskit/react-select/styles");
+var _creatableSelect = _interopRequireDefault(require("@atlaskit/select/creatable-select"));
+var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
 var _defaultTimes = require("../internal/default-times");
 var _emptyComponent = require("../internal/empty-component");
 var _fixedLayerMenu = require("../internal/fixed-layer-menu");
@@ -32,7 +32,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 = "18.7.1";
+var packageVersion = "18.7.3";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/cjs/internal/date-time-picker-container.js

@@ -1,4 +1,4 @@
-/* date-time-picker-container.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-time-picker-container.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/fixed-layer-menu-top-layer.js

@@ -1,4 +1,4 @@
-/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -14,8 +14,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _components = require("@atlaskit/react-select/components");
 var _index = require("@atlaskit/top-layer/placement-map/index");
-var _popover = require("@atlaskit/top-layer/popover/popover");
 var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
+var _popover = require("@atlaskit/top-layer/popover/popover");
 var _useAnchoredPopover = require("@atlaskit/top-layer/use-anchored-popover");
 var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
 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); }

package/dist/cjs/internal/fixed-layer-menu.js

@@ -1,4 +1,4 @@
-/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/fixed-layer.js

@@ -1,4 +1,4 @@
-/* fixed-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -17,8 +17,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _default = require("@atlaskit/icon/constants/default");
-var _manager = require("@atlaskit/popper/manager");
 var _main = require("@atlaskit/popper/main");
+var _manager = require("@atlaskit/popper/manager");
 var _reference = require("@atlaskit/popper/reference");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }

package/dist/cjs/internal/indicators-container.js

@@ -1,4 +1,4 @@
-/* indicators-container.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* indicators-container.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/menu-top-layer.js

@@ -1,4 +1,4 @@
-/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* menu.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/parse-date.js

@@ -45,8 +45,10 @@ var parseDate = exports.parseDate = function parseDate(date, di) {
     return parseInputValue(date, dateFormat || _defaultDateFormat.defaultDateFormat);
   }
   if (dateFormat && (0, _fg.fg)('platform-dst-dp-parse-date-format')) {
-    // new Date(0) to make reference date deterministic
-    var parsed = (0, _dateFns.parse)(date, (0, _parseTokens.convertTokens)(dateFormat), new Date(0));
+    // date-fns uses the reference year to resolve two-digit years and fill
+    // omitted years. Use the current local date rather than the Unix epoch.
+    var referenceDate = (0, _fg.fg)('platform-dst-dp-current-reference-date') ? new Date() : new Date(0);
+    var parsed = (0, _dateFns.parse)(date, (0, _parseTokens.convertTokens)(dateFormat), referenceDate);
     // `dateFormat` is a display format, so typed input does not always match
     // it. Locale parsing stays as the fallback so those entries still work.
     if ((0, _dateFns.isValid)(parsed)) {

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

@@ -1,11 +1,11 @@
-/* date-picker.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./date-picker.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /// <reference types="node" />
 // for typing `process`
-import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { isValid, parseISO } from 'date-fns';
@@ -17,8 +17,8 @@ import CalendarIcon from '@atlaskit/icon/core/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
-import Select from '@atlaskit/select/default';
 import { mergeStyles } from '@atlaskit/react-select/styles';
+import Select from '@atlaskit/select/default';
 import { EmptyComponent } from '../internal/empty-component';
 import { formatDate } from '../internal/format-date';
 import { getParsedISO } from '../internal/get-parsed-iso';
@@ -32,7 +32,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.7.1";
+const packageVersion = "18.7.3";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -56,12 +56,14 @@ const analyticsAttributes = {
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
 const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
+  var _selectProps$componen;
   const containerRef = useRef(null);
   const calendarRef = useRef(null);
   const calendarButtonRef = useRef(null);
   // 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);
   const {
     appearance = 'default',
     autoFocus = false,
@@ -114,7 +116,21 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   const [locale, setLocale] = useState(propLocale);
   const [shouldSetFocusOnCurrentDay, setShouldSetFocusOnCurrentDay] = useState(false);
   const [isKeyDown, setIsKeyDown] = useState(false);
+  const isTopLayerEnabled = fg('platform-dst-top-layer');
+  const {
+    MenuPortal: customMenuPortal,
+    ...selectComponentOverrides
+  } = (_selectProps$componen = selectProps.components) !== null && _selectProps$componen !== void 0 ? _selectProps$componen : {};
+  const {
+    menuRenderMode: _menuRenderMode,
+    ...selectPropsWithoutMenuRenderMode
+  } = selectProps;
+  if (process.env.NODE_ENV !== 'production' && isTopLayerEnabled && (selectProps.menuRenderMode === 'inline' || customMenuPortal)) {
+    throw new Error('DatePicker does not support selectProps.menuRenderMode="inline" or selectProps.components.MenuPortal when platform-dst-top-layer is enabled.');
+  }
+  const selectPropsForSelect = isTopLayerEnabled ? selectPropsWithoutMenuRenderMode : selectProps;
   const [wasOpenedFromCalendarButton, setWasOpenedFromCalendarButton] = useState(false);
+  const additionalInsideElementRefs = useMemo(() => [calendarButtonRef], [calendarButtonRef]);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   const [, forceUpdate] = useReducer(x => !x, true);
@@ -252,6 +268,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
       setIsOpen(true);
       setWasOpenedFromCalendarButton(false);
     }
+    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;
+      return;
+    }
     switch (keyPressed) {
       case 'escape':
         // Restore focus because it may have moved from the input into the calendar.
@@ -259,8 +284,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$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"]');
+          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"]');
           innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
         }
         setIsOpen(false);
@@ -314,6 +339,18 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
         break;
     }
   };
+  const onMenuClose = () => {
+    var _selectProps$onMenuCl;
+    const focusTarget = focusRestorationTargetRef.current;
+    focusRestorationTargetRef.current = null;
+    if (fg('platform-dst-top-layer') && focusTarget) {
+      focusTarget.focus();
+      setIsOpen(false);
+      setShouldSetFocusOnCurrentDay(false);
+      setWasOpenedFromCalendarButton(false);
+    }
+    (_selectProps$onMenuCl = selectProps.onMenuClose) === null || _selectProps$onMenuCl === void 0 ? void 0 : _selectProps$onMenuCl.call(selectProps);
+  };
   const onCalendarButtonKeyDown = e => {
     // Don't allow an arrow up or down to open the menu, since the input key
     // down handler is actually on the parent.
@@ -397,7 +434,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     lang: propLocale
   });
   const selectComponents = {
-    ...selectProps.components,
+    ...(isTopLayerEnabled ? selectComponentOverrides : selectProps.components),
     DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
     // Only use this new container component if the calendar button is shown.
     // Otherwise, it throws errors downstream for some reason
@@ -523,13 +560,16 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     ,
     styles: mergedStyles,
     value: initialValue
-  }, selectProps, {
+  }, selectPropsForSelect, {
+    additionalInsideElementRefs: isTopLayerEnabled ? additionalInsideElementRefs : undefined,
+    onMenuClose: onMenuClose
     // For some reason, this and the below `styles` type error _only_ show
     // up when you alter some of the properties in the `selectComponents`
     // object. These errors are still present, and I suspect have always
     // been present, without changing the unrelated code. Ignoring as the
     // component still works as expected despite this error. And also
     // because the select refresh team may solve it later.
+    ,
     components: selectComponents
     // These are below the spread because I don't know what is in
     // selectProps or not and what wil be overwritten

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

@@ -1,4 +1,4 @@
-/* date-time-picker.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-time-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./date-time-picker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.7.1";
+const packageVersion = "18.7.3";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -7,9 +7,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import Select from '@atlaskit/select/default';
-import CreatableSelect from '@atlaskit/select/creatable-select';
 import { mergeStyles } from '@atlaskit/react-select/styles';
+import CreatableSelect from '@atlaskit/select/creatable-select';
+import Select from '@atlaskit/select/default';
 import { defaultTimes } from '../internal/default-times';
 import { EmptyComponent } from '../internal/empty-component';
 import { FixedLayerMenu } from '../internal/fixed-layer-menu';
@@ -19,7 +19,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.7.1";
+const packageVersion = "18.7.3";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/es2019/index.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Use `import DatePicker from '@atlaskit/datetime-picker/date-picker'` instead.
  */
+
 export { default as DatePicker } from './components/date-picker';
 /**
  * @deprecated Use `import TimePicker from '@atlaskit/datetime-picker/time-picker'` instead.

package/dist/es2019/internal/date-time-picker-container.js

@@ -1,4 +1,4 @@
-/* date-time-picker-container.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-time-picker-container.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./date-time-picker-container.compiled.css";
 import * as React from 'react';

package/dist/es2019/internal/fixed-layer-menu-top-layer.js

@@ -1,12 +1,12 @@
-/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useRef } from 'react';
 import { components } from '@atlaskit/react-select/components';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
-import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
+import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
 
 /**

package/dist/es2019/internal/fixed-layer-menu.js

@@ -1,4 +1,4 @@
-/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/internal/fixed-layer.js

@@ -1,12 +1,12 @@
-/* fixed-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./fixed-layer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { sizes } from '@atlaskit/icon/constants/default';
-import { Manager } from '@atlaskit/popper/manager';
 import { Popper } from '@atlaskit/popper/main';
+import { Manager } from '@atlaskit/popper/manager';
 import { Reference } from '@atlaskit/popper/reference';
 const styles = {
   root: "_bfhk1j28 _kqswstnw _152tze3t",

package/dist/es2019/internal/indicators-container.js

@@ -1,4 +1,4 @@
-/* indicators-container.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* indicators-container.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./indicators-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/internal/menu-top-layer.js

@@ -1,4 +1,4 @@
-/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu-top-layer.compiled.css";
 import * as React from 'react';

package/dist/es2019/internal/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* menu.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu.compiled.css";
 import * as React from 'react';

package/dist/es2019/internal/parse-date.js

@@ -41,8 +41,10 @@ export const parseDate = (date, di) => {
     return parseInputValue(date, dateFormat || defaultDateFormat);
   }
   if (dateFormat && fg('platform-dst-dp-parse-date-format')) {
-    // new Date(0) to make reference date deterministic
-    const parsed = parse(date, convertTokens(dateFormat), new Date(0));
+    // date-fns uses the reference year to resolve two-digit years and fill
+    // omitted years. Use the current local date rather than the Unix epoch.
+    const referenceDate = fg('platform-dst-dp-current-reference-date') ? new Date() : new Date(0);
+    const parsed = parse(date, convertTokens(dateFormat), referenceDate);
     // `dateFormat` is a display format, so typed input does not always match
     // it. Locale parsing stays as the fallback so those entries still work.
     if (isValid(parsed)) {

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

@@ -1,9 +1,11 @@
-/* date-picker.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"],
+  _excluded2 = ["MenuPortal"],
+  _excluded3 = ["menuRenderMode"];
 import "./date-picker.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -11,7 +13,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /// <reference types="node" />
 // for typing `process`
-import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { isValid, parseISO } from 'date-fns';
@@ -23,8 +25,8 @@ import CalendarIcon from '@atlaskit/icon/core/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
-import Select from '@atlaskit/select/default';
 import { mergeStyles } from '@atlaskit/react-select/styles';
+import Select from '@atlaskit/select/default';
 import { EmptyComponent } from '../internal/empty-component';
 import { formatDate } from '../internal/format-date';
 import { getParsedISO } from '../internal/get-parsed-iso';
@@ -38,7 +40,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.1";
+var packageVersion = "18.7.3";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -62,12 +64,14 @@ var analyticsAttributes = {
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
 var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
+  var _selectProps$componen;
   var containerRef = useRef(null);
   var calendarRef = useRef(null);
   var calendarButtonRef = useRef(null);
   // 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);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
@@ -172,10 +176,23 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     _useState18 = _slicedToArray(_useState17, 2),
     isKeyDown = _useState18[0],
     setIsKeyDown = _useState18[1];
+  var isTopLayerEnabled = fg('platform-dst-top-layer');
+  var _ref = (_selectProps$componen = selectProps.components) !== null && _selectProps$componen !== void 0 ? _selectProps$componen : {},
+    customMenuPortal = _ref.MenuPortal,
+    selectComponentOverrides = _objectWithoutProperties(_ref, _excluded2);
+  var _menuRenderMode = selectProps.menuRenderMode,
+    selectPropsWithoutMenuRenderMode = _objectWithoutProperties(selectProps, _excluded3);
+  if (process.env.NODE_ENV !== 'production' && isTopLayerEnabled && (selectProps.menuRenderMode === 'inline' || customMenuPortal)) {
+    throw new Error('DatePicker does not support selectProps.menuRenderMode="inline" or selectProps.components.MenuPortal when platform-dst-top-layer is enabled.');
+  }
+  var selectPropsForSelect = isTopLayerEnabled ? selectPropsWithoutMenuRenderMode : selectProps;
   var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
     wasOpenedFromCalendarButton = _useState20[0],
     setWasOpenedFromCalendarButton = _useState20[1];
+  var additionalInsideElementRefs = useMemo(function () {
+    return [calendarButtonRef];
+  }, [calendarButtonRef]);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   var _useReducer = useReducer(function (x) {
@@ -210,14 +227,14 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   var getIsOpen = function getIsOpen() {
     return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
   };
-  var onCalendarChange = function onCalendarChange(_ref) {
-    var iso = _ref.iso;
+  var onCalendarChange = function onCalendarChange(_ref2) {
+    var iso = _ref2.iso;
     setCalendarValue(getParsedISO({
       iso: iso
     }));
   };
-  var onCalendarSelect = function onCalendarSelect(_ref2) {
-    var iso = _ref2.iso;
+  var onCalendarSelect = function onCalendarSelect(_ref3) {
+    var iso = _ref3.iso;
     setSelectInputValue('');
     setIsOpen(false);
     setCalendarValue(iso);
@@ -318,6 +335,15 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
       setIsOpen(true);
       setWasOpenedFromCalendarButton(false);
     }
+    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;
+      return;
+    }
     switch (keyPressed) {
       case 'escape':
         // Restore focus because it may have moved from the input into the calendar.
@@ -325,8 +351,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$current4;
-          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
+          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"]');
           innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
         }
         setIsOpen(false);
@@ -380,6 +406,18 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
         break;
     }
   };
+  var onMenuClose = function onMenuClose() {
+    var _selectProps$onMenuCl;
+    var focusTarget = focusRestorationTargetRef.current;
+    focusRestorationTargetRef.current = null;
+    if (fg('platform-dst-top-layer') && focusTarget) {
+      focusTarget.focus();
+      setIsOpen(false);
+      setShouldSetFocusOnCurrentDay(false);
+      setWasOpenedFromCalendarButton(false);
+    }
+    (_selectProps$onMenuCl = selectProps.onMenuClose) === null || _selectProps$onMenuCl === void 0 || _selectProps$onMenuCl.call(selectProps);
+  };
   var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(e) {
     // Don't allow an arrow up or down to open the menu, since the input key
     // down handler is actually on the parent.
@@ -464,7 +502,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     id: valueId,
     lang: propLocale
   });
-  var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
+  var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, isTopLayerEnabled ? selectComponentOverrides : selectProps.components), {}, {
     DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon
   }, shouldShowCalendarButton ? {
     IndicatorsContainer: function IndicatorsContainer(props) {
@@ -588,13 +626,16 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     ,
     styles: mergedStyles,
     value: initialValue
-  }, selectProps, {
+  }, selectPropsForSelect, {
+    additionalInsideElementRefs: isTopLayerEnabled ? additionalInsideElementRefs : undefined,
+    onMenuClose: onMenuClose
     // For some reason, this and the below `styles` type error _only_ show
     // up when you alter some of the properties in the `selectComponents`
     // object. These errors are still present, and I suspect have always
     // been present, without changing the unrelated code. Ignoring as the
     // component still works as expected despite this error. And also
     // because the select refresh team may solve it later.
+    ,
     components: selectComponents
     // These are below the spread because I don't know what is in
     // selectProps or not and what wil be overwritten

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

@@ -1,4 +1,4 @@
-/* date-time-picker.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-time-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.1";
+var packageVersion = "18.7.3";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -13,9 +13,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import Select from '@atlaskit/select/default';
-import CreatableSelect from '@atlaskit/select/creatable-select';
 import { mergeStyles } from '@atlaskit/react-select/styles';
+import CreatableSelect from '@atlaskit/select/creatable-select';
+import Select from '@atlaskit/select/default';
 import { defaultTimes } from '../internal/default-times';
 import { EmptyComponent } from '../internal/empty-component';
 import { FixedLayerMenu } from '../internal/fixed-layer-menu';
@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.1";
+var packageVersion = "18.7.3";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/esm/index.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Use `import DatePicker from '@atlaskit/datetime-picker/date-picker'` instead.
  */
+
 export { default as DatePicker } from './components/date-picker';
 /**
  * @deprecated Use `import TimePicker from '@atlaskit/datetime-picker/time-picker'` instead.

package/dist/esm/internal/date-time-picker-container.js

@@ -1,4 +1,4 @@
-/* date-time-picker-container.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* date-time-picker-container.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./date-time-picker-container.compiled.css";
 import * as React from 'react';

package/dist/esm/internal/fixed-layer-menu-top-layer.js

@@ -1,4 +1,4 @@
-/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
@@ -7,8 +7,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useRef } from 'react';
 import { components } from '@atlaskit/react-select/components';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
-import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
+import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
 
 /**

package/dist/esm/internal/fixed-layer-menu.js

@@ -1,4 +1,4 @@
-/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];

package/dist/esm/internal/fixed-layer.js

@@ -1,4 +1,4 @@
-/* fixed-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* fixed-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -12,8 +12,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { sizes } from '@atlaskit/icon/constants/default';
-import { Manager } from '@atlaskit/popper/manager';
 import { Popper } from '@atlaskit/popper/main';
+import { Manager } from '@atlaskit/popper/manager';
 import { Reference } from '@atlaskit/popper/reference';
 var styles = {
   root: "_bfhk1j28 _kqswstnw _152tze3t",

package/dist/esm/internal/indicators-container.js

@@ -1,4 +1,4 @@
-/* indicators-container.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* indicators-container.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["showClearIndicator"];
 import "./indicators-container.compiled.css";

package/dist/esm/internal/menu-top-layer.js

@@ -1,4 +1,4 @@
-/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu-top-layer.compiled.css";
 import * as React from 'react';

package/dist/esm/internal/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* menu.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu.compiled.css";
 import * as React from 'react';

package/dist/esm/internal/parse-date.js

@@ -39,8 +39,10 @@ export var parseDate = function parseDate(date, di) {
     return parseInputValue(date, dateFormat || defaultDateFormat);
   }
   if (dateFormat && fg('platform-dst-dp-parse-date-format')) {
-    // new Date(0) to make reference date deterministic
-    var parsed = parse(date, convertTokens(dateFormat), new Date(0));
+    // date-fns uses the reference year to resolve two-digit years and fill
+    // omitted years. Use the current local date rather than the Unix epoch.
+    var referenceDate = fg('platform-dst-dp-current-reference-date') ? new Date() : new Date(0);
+    var parsed = parse(date, convertTokens(dateFormat), referenceDate);
     // `dateFormat` is a display format, so typed input does not always match
     // it. Locale parsing stays as the fallback so those entries still work.
     if (isValid(parsed)) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "18.7.2",
+	"version": "18.7.4",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,13 +26,16 @@
 		},
 		"team": "Design System Team",
 		"website": {
+			"tags": [
+				"platform-labs"
+			],
 			"name": "Date time picker",
 			"category": "Forms and input"
 		}
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.5.0",
-		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/calendar": "^19.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
@@ -43,10 +46,10 @@
 		"@atlaskit/popper": "^9.4.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/react-select": "^4.9.0",
+		"@atlaskit/react-select": "^4.10.0",
 		"@atlaskit/select": "^22.11.0",
-		"@atlaskit/tokens": "^17.0.0",
-		"@atlaskit/top-layer": "^5.0.0",
+		"@atlaskit/tokens": "^19.0.0",
+		"@atlaskit/top-layer": "^5.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
@@ -88,6 +91,9 @@
 		"platform-dst-top-layer": {
 			"type": "boolean"
 		},
+		"platform-dst-dp-current-reference-date": {
+			"type": "boolean"
+		},
 		"platform-dst-dp-parse-date-format": {
 			"type": "boolean"
 		},