@atlaskit/datetime-picker 17.8.0 → 17.8.1

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @atlaskit/datetime-picker
 
+## 17.8.1
+
+### Patch Changes
+
+- [`2bed6255731de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2bed6255731de) -
+  Top-layer adoption work behind the `platform-dst-top-layer` feature flag. Public adopter APIs are
+  intentionally kept narrow while the top-layer API surface settles, with one exception called out
+  below.
+
+  Highlights:
+  - Pass the full `[along, away]` legacy popper offset through to the new top-layer
+    `placement.offset` API (via `fromLegacyPlacement`). Previously only the `away` axis was
+    forwarded, which dropped the `along` offset for consumers of `Popup`, `PopupSelect`,
+    `Spotlight`, and `Tooltip` when `platform-dst-top-layer` is enabled.
+  - Fix broken import of `dialogHeight` and `dialogWidth` from the removed utils module in
+    `@atlaskit/modal-dialog`.
+
+  Public API:
+  - **`@atlaskit/tooltip`** (`minor`): add an optional `testId?: string` field to `TriggerProps`.
+    This is additive (no existing prop changes shape). Required because `@atlaskit/button/new` (and
+    other `Pressable`-backed primitives) overwrite `data-testid` from spread, so the legacy
+    `(triggerProps as any)['data-testid']` workaround is silently absorbed by those consumers. A
+    typed `testId` field flows through their own `testId` destructure instead, restoring
+    `data-testid` propagation onto the rendered trigger element.
+  - **`@atlaskit/popup`**, **`@atlaskit/dropdown-menu`** (`patch`): no public type changes. Wider
+    `aria-haspopup` unions that the FF-on path produces are bridged at the package boundary into
+    `@atlaskit/top-layer` with localised `FUDGE(top-layer-api)` casts, documented in
+    `packages/design-system/top-layer/notes/decisions/migration-roadmap.md` ("Open API decisions
+    deferred to a follow-up PR"). They will be widened in a follow-up `minor` PR once the top-layer
+    API is committed.
+  - **`@atlaskit/modal-dialog`**, **`@atlaskit/select`**, **`@atlaskit/spotlight`**
+    (`patch`/`minor`): no public type changes; bug fixes only.
+
+  Merge-readiness fixes (FF-on test wiring + adopter behavior):
+  - **`@atlaskit/popup`** (`minor`): wire the compositional `PopupContent` to delegate to
+    `PopupContentTopLayer` when `platform-dst-top-layer` is enabled. Previously only the legacy
+    `Popup` component had the FF branch, leaving consumers of the compositional API on the legacy
+    popper path.
+  - **`@atlaskit/select`** (`minor`): add an `onClick` handler to the `PopupSelect` top-layer
+    trigger so clicks open/close the menu (mirrors the legacy global click handler in
+    `popup-select.tsx`). Add explicit Escape handling on the menu's `onKeyDown` so the menu closes
+    and focus returns to the trigger.
+  - **`@atlaskit/top-layer`** (`patch`): the `<dialog>` rendered by the Dialog primitive now sets
+    `aria-modal="true"` explicitly. Modern browsers infer modal semantics from `.showModal()` but
+    some assistive tech still keys off the explicit attribute.
+  - **`@atlaskit/top-layer`** (`patch`): guard `use-anchor-positioning` against environments where
+    `ResizeObserver` is not defined (e.g. jest's `node` environment, used by the post-office test
+    suite). The observer is used to wait for the popover's first valid layout before measuring;
+    consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners
+    still apply if the host environment polyfills `showPopover`. Real browsers always have
+    `ResizeObserver`.
+  - **`@atlaskit/modal-dialog`** (`patch`): on the FF-on path, drop the `tabIndex={-1}` (and unused
+    `:focus-visible` outline) from the modal content wrapper. The native `<dialog>.showModal()`
+    focus-delegate algorithm picks the first focusable descendant (including `tabindex=-1`), and the
+    wrapper was hijacking initial focus from the close button. Also honor `shouldReturnFocus={ref}`
+    on the FF-on path (an unmount-cleanup focuses the ref after `dialog.close()` so it overrides the
+    browser's automatic return-to-trigger). Boolean `shouldReturnFocus={false}` is not yet honored
+    on the FF-on path — see `top-layer/notes/merge-blockers.md`.
+  - **`@atlaskit/datetime-picker`** (`patch`): on the FF-on path, set `mode="manual"` on the
+    `Popup.Content` rendered by both `internal/menu-top-layer.tsx` (date-picker calendar) and
+    `internal/fixed-layer-menu-top-layer.tsx` (time-picker menu). With the default `mode="auto"`,
+    the same click event that opens the menu (which targets the react-select combobox input —
+    outside the popover element) bubbles to the browser's native popover light-dismiss handler and
+    immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc
+    dismissal via their own state, so opting out of the native auto-dismiss is the correct
+    integration. Also extend the existing Esc → trigger-focus restoration in
+    `components/date-picker.tsx` to the FF-on path (manual mode disables the browser's built-in
+    focus return, and the legacy code path was already handling this for itself behind an FF
+    negation).
+  - **`@atlaskit/popup`** (no public API change): no source changes — only FF-on Playwright
+    spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two `test.fixme`'d
+    nested-popover cases were not browser limitations; `popover="auto"` chains correctly via DOM
+    ancestry (the original fixmes had the wrong testId selector). Added `testId` props to two
+    examples (`16-popup-with-a11y-props`, `18-should-fit-container`) so default-shape tests can
+    reach the trigger.
+  - Test alignment for FF-on Playwright suites across `popup`, `select`, `datetime-picker`,
+    `inline-dialog`, `inline-message`, and `modal-dialog`: selector updates to match the new
+    top-layer testId convention (`${testId}--content`, `[role="dialog"][aria-label="calendar"]`),
+    per-spec `skipAxeCheck()` for example-level color-contrast violations unrelated to the
+    migration, and focus assertions adjusted to match native `<dialog>` / `Popup.Content` auto-focus
+    semantics (focus lands on the first focusable child, not the dialog container itself).
+  - **`@atlassian/capacity-planning-capacity-graph`**, **`@atlaskit/color-picker`**,
+    **`@atlassian/timeline-table`**, **`@atlassian/global-side-navigation`** (`patch`): scope `fg`
+    mocks in unit tests so `platform-dst-top-layer` returns `false`. JSDOM does not implement the
+    native Popover API (`showPopover`/`hidePopover`/`toggle` events), so leaving the gate ON in unit
+    tests caused popover content to remain in the DOM after close and broke close-behaviour
+    assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed
+    above.
+  - **`@atlaskit/dropdown-menu`** (no public API change): test/example-only fixes for the FF-on
+    Playwright suite. Added `role="menuitem"` to the nested-trigger `ButtonItem` in
+    `examples/93-testing-nested-keyboard-navigation-top-layer.tsx` to satisfy axe's
+    `aria-required-children` rule on the parent menu. Added a `test.beforeEach(skipAxeCheck)` to
+    `dropdown-menu.spec.tsx` (FF-on suite) for example-level `color-contrast` violations on the
+    pre-existing `color.text.selected`/`color.background.selected` token pair (3.91:1). Replaced a
+    deadlocking `await expect(moveItem).not.toBeFocused()` pre-open assertion (Playwright's
+    auto-wait blocks 5s on the absent element) with `await expect(moveItem).not.toBeVisible()`.
+    Suite result: 22/22 passing.
+
+- Updated dependencies
+
 ## 17.8.0
 
 ### Minor Changes

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

@@ -22,6 +22,7 @@ var _css = require("@atlaskit/css");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
 var _locale = require("@atlaskit/locale");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _emptyComponent = require("../internal/empty-component");
@@ -33,6 +34,7 @@ var _getShortIsoString = require("../internal/get-short-iso-string");
 var _indicatorsContainer = require("../internal/indicators-container");
 var _isDateDisabled = require("../internal/is-date-disabled");
 var _menu = require("../internal/menu");
+var _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" />
@@ -42,7 +44,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 = "17.7.0";
+var packageVersion = "17.8.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -199,10 +201,14 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
-      var _calendarRef$current;
       setIsKeyDown(false);
-      // Focus on the first button within the calendar
-      calendarRef === null || calendarRef === void 0 || (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 || (_calendarRef$current = _calendarRef$current.querySelector('button')) === null || _calendarRef$current === void 0 || _calendarRef$current.focus();
+      // When using top-layer, Popup.Content with role='dialog' automatically
+      // focuses the first focusable element — no manual focus needed.
+      if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+        var _calendarRef$current;
+        // Focus on the first button within the calendar
+        calendarRef === null || calendarRef === void 0 || (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 || (_calendarRef$current = _calendarRef$current.querySelector('button')) === null || _calendarRef$current === void 0 || _calendarRef$current.focus();
+      }
     }
   }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
   var getValue = function getValue() {
@@ -226,19 +232,17 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     setWasOpenedFromCalendarButton(false);
     onChangePropWithAnalytics(iso);
 
-    // Yes, this is not ideal. The alternative is to be able to place a ref
-    // on the inner input of Select itself, which would require a lot of
-    // extra stuff in the Select component for only this one thing. While
-    // this would be more "React-y", it doesn't seem to pose any other
-    // benefits. Performance-wise, we are only searching within the
-    // container, so it's quick.
-    if (wasOpenedFromCalendarButton) {
-      var _calendarButtonRef$cu;
-      (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
-    } else {
-      var _containerRef$current;
-      var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
-      innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+    // When using top-layer, PopupContent handles focus restoration automatically
+    // on close based on the role. Only manually restore focus for the legacy path.
+    if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+      if (wasOpenedFromCalendarButton) {
+        var _calendarButtonRef$cu;
+        (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
+      } else {
+        var _containerRef$current;
+        var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
+        innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+      }
     }
     setIsOpen(false);
   };
@@ -318,12 +322,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     }
     switch (keyPressed) {
       case 'escape':
-        // Yes, this is not ideal. The alternative is to be able to place a ref
-        // on the inner input of Select itself, which would require a lot of
-        // extra stuff in the Select component for only this one thing. While
-        // this would be more "React-y", it doesn't seem to pose any other
-        // benefits. Performance-wise, we are only searching within the
-        // container, so it's quick.
+        // Restore focus on close. Both code paths handle this here:
+        // the legacy path because it has no built-in restoration, and
+        // the top-layer path because the menu uses `mode="manual"` to
+        // avoid the auto-popover light-dismiss closing the menu on the
+        // same click that opens it (see internal/menu-top-layer.tsx).
+        // `manual` mode disables the browser's native focus return.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
@@ -473,7 +477,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       }));
     }
   } : {}), {}, {
-    Menu: _menu.Menu,
+    Menu: (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? _menuTopLayer.MenuTopLayer : _menu.Menu,
     SingleValue: SingleValue
   }, !showClearIndicator && {
     ClearIndicator: _emptyComponent.EmptyComponent

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

@@ -30,7 +30,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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /// <reference types="node" />
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.7.0";
+var packageVersion = "17.8.0";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
@@ -403,4 +403,6 @@ var DateTimePicker = (0, _analyticsNext.withAnalyticsContext)({
     }
   })
 })(DateTimePickerComponent));
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = DateTimePicker;

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

@@ -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 = "17.7.0";
+var packageVersion = "17.8.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -15,10 +15,12 @@ var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _locale = require("@atlaskit/locale");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _defaultTimes = require("../internal/default-times");
 var _emptyComponent = require("../internal/empty-component");
 var _fixedLayerMenu = require("../internal/fixed-layer-menu");
+var _fixedLayerMenuTopLayer = require("../internal/fixed-layer-menu-top-layer");
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
 var _parseTokens = require("../internal/parse-tokens");
 var _placeholderDateTime = require("../internal/placeholder-date-time");
@@ -28,7 +30,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 = "17.7.0";
+var packageVersion = "17.8.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -281,7 +283,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
   });
   var selectComponents = _objectSpread({
     DropdownIndicator: _emptyComponent.EmptyComponent,
-    Menu: _fixedLayerMenu.FixedLayerMenu,
+    Menu: (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? _fixedLayerMenuTopLayer.FixedLayerMenuTopLayer : _fixedLayerMenu.FixedLayerMenu,
     SingleValue: SingleValue
   }, hideIcon && {
     ClearIndicator: _emptyComponent.EmptyComponent

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

@@ -0,0 +1,113 @@
+/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FixedLayerMenuTopLayer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _select = require("@atlaskit/select");
+var _animations = require("@atlaskit/top-layer/animations");
+var _placementMap = require("@atlaskit/top-layer/placement-map");
+var _popup = require("@atlaskit/top-layer/popup");
+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); }
+var animation = (0, _animations.slideAndFade)();
+
+/**
+ * Bottom-start placement: time options menu appears below and aligned to the
+ * start edge of the trigger (the select input).
+ */
+var popupPlacement = (0, _placementMap.fromLegacyPlacement)({
+  legacy: 'bottom-start'
+});
+
+/**
+ * Top-layer version of the fixed layer menu used in the time picker.
+ *
+ * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
+ * time options list renders in the browser's top layer via the native Popover API
+ * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
+ * z-index wars, and portal-based layering.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
+  var _selectProps$fixedLay, _selectProps$fixedLay2;
+  var className = _ref.className,
+    clearValue = _ref.clearValue,
+    cx = _ref.cx,
+    getStyles = _ref.getStyles,
+    getValue = _ref.getValue,
+    hasValue = _ref.hasValue,
+    innerProps = _ref.innerProps,
+    innerRef = _ref.innerRef,
+    isLoading = _ref.isLoading,
+    isMulti = _ref.isMulti,
+    isRtl = _ref.isRtl,
+    maxMenuHeight = _ref.maxMenuHeight,
+    menuPlacement = _ref.menuPlacement,
+    menuPosition = _ref.menuPosition,
+    menuShouldScrollIntoView = _ref.menuShouldScrollIntoView,
+    minMenuHeight = _ref.minMenuHeight,
+    options = _ref.options,
+    placement = _ref.placement,
+    selectOption = _ref.selectOption,
+    selectProps = _ref.selectProps,
+    setValue = _ref.setValue,
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // The select's container element is the anchor for the popup.
+  // @ts-ignore -- fixedLayerRef is a custom prop passed through selectProps
+  var triggerRef = (0, _react.useRef)((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
+  // @ts-ignore -- fixedLayerRef is a custom prop passed through selectProps
+  triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
+  return /*#__PURE__*/React.createElement(_popup.Popup.Content, {
+    role: "listbox",
+    isOpen: true
+    // `mode="manual"` opts out of the native popover light-dismiss
+    // (Esc / click-outside). react-select already owns those: opening
+    // the menu via a click on the input that lives outside the popover
+    // element triggers the browser's auto-dismiss as that very click
+    // bubbles, slamming the menu shut before the user sees it. With
+    // `manual`, react-select's existing onMenuClose / outside-click
+    // logic remains the single source of truth.
+    ,
+    mode: "manual",
+    placement: popupPlacement,
+    triggerRef: triggerRef,
+    animate: animation
+    // @ts-ignore -- testId is a custom prop passed through selectProps
+    ,
+    testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
+  }, /*#__PURE__*/React.createElement(_popup.Popup.Surface, null, /*#__PURE__*/React.createElement(_select.components.Menu, (0, _extends2.default)({}, rest, {
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
+    className: className,
+    clearValue: clearValue,
+    cx: cx,
+    getStyles: getStyles,
+    getValue: getValue,
+    hasValue: hasValue,
+    innerProps: innerProps,
+    innerRef: innerRef,
+    isLoading: isLoading,
+    isMulti: isMulti,
+    isRtl: isRtl,
+    maxMenuHeight: maxMenuHeight,
+    menuPlacement: menuPlacement,
+    menuPosition: menuPosition,
+    menuShouldScrollIntoView: false || menuShouldScrollIntoView,
+    minMenuHeight: minMenuHeight,
+    options: options,
+    placement: placement,
+    selectOption: selectOption,
+    selectProps: selectProps,
+    setValue: setValue
+  }), children)));
+};

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

@@ -0,0 +1,116 @@
+/* menu-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuTopLayer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _dateFns = require("date-fns");
+var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
+var _animations = require("@atlaskit/top-layer/animations");
+var _placementMap = require("@atlaskit/top-layer/placement-map");
+var _popup = require("@atlaskit/top-layer/popup");
+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); }
+var animation = (0, _animations.slideAndFade)();
+
+/**
+ * Bottom-start placement: calendar appears below and aligned to the
+ * start edge of the trigger (the select input).
+ */
+var popupPlacement = (0, _placementMap.fromLegacyPlacement)({
+  legacy: 'bottom-start'
+});
+
+/**
+ * @param isos A series of ISO dates.
+ * @returns The last valid date within the array of ISO strings.
+ */
+function getValidDate(isos) {
+  return isos.reduce(function (acc, iso) {
+    var date = (0, _dateFns.parseISO)(iso);
+    return (0, _dateFns.isValid)(date) ? {
+      day: date.getDate(),
+      month: date.getMonth() + 1,
+      year: date.getFullYear()
+    } : acc;
+  }, {});
+}
+
+/**
+ * Top-layer version of the date picker menu.
+ *
+ * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
+ * calendar renders in the browser's top layer via the native Popover API
+ * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
+ * z-index wars, and portal-based layering.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
+  var _selectProps$calendar, _selectProps$calendar2;
+  var selectProps = _ref.selectProps,
+    innerProps = _ref.innerProps;
+  var calendarValue = selectProps.calendarValue,
+    calendarView = selectProps.calendarView,
+    MenuInnerWrapper = selectProps.menuInnerWrapper;
+  var _getValidDate = getValidDate([calendarValue, calendarView]),
+    day = _getValidDate.day,
+    month = _getValidDate.month,
+    year = _getValidDate.year;
+
+  // The select's container element is the anchor for the popup.
+  var triggerRef = (0, _react.useRef)((_selectProps$calendar = selectProps.calendarContainerRef) !== null && _selectProps$calendar !== void 0 ? _selectProps$calendar : null);
+  triggerRef.current = (_selectProps$calendar2 = selectProps.calendarContainerRef) !== null && _selectProps$calendar2 !== void 0 ? _selectProps$calendar2 : null;
+  var onMenuMouseDown = function onMenuMouseDown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : _react.Fragment;
+  return /*#__PURE__*/React.createElement(_popup.Popup.Content, {
+    role: "dialog",
+    label: "calendar",
+    isOpen: true
+    // `mode="manual"` opts out of native popover light-dismiss.
+    // react-select / DateTimePicker already own outside-click and
+    // Esc handling. Without this, the same click that opens the
+    // menu (which targets the select input outside the popover)
+    // also bubbles to the browser's auto-dismiss handler and
+    // immediately closes the popover.
+    ,
+    mode: "manual",
+    placement: popupPlacement,
+    triggerRef: triggerRef,
+    animate: animation,
+    testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
+  }, /*#__PURE__*/React.createElement(_popup.Popup.Surface, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+    role: "presentation",
+    onMouseDown: onMenuMouseDown
+  }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
+    day: day,
+    month: month,
+    year: year,
+    disabled: selectProps.calendarDisabled,
+    disabledDateFilter: selectProps.calendarDisabledDateFilter,
+    minDate: selectProps.calendarMinDate,
+    maxDate: selectProps.calendarMaxDate,
+    nextMonthLabel: selectProps.nextMonthLabel,
+    onChange: selectProps.onCalendarChange,
+    onSelect: selectProps.onCalendarSelect,
+    previousMonthLabel: selectProps.previousMonthLabel,
+    ref: selectProps.calendarRef,
+    selected: [selectProps.calendarValue],
+    shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
+    locale: selectProps.calendarLocale,
+    testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
+    weekStartDay: selectProps.calendarWeekStartDay
+  })))));
+};

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

@@ -15,6 +15,7 @@ import { cx } from '@atlaskit/css';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIcon from '@atlaskit/icon/core/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { EmptyComponent } from '../internal/empty-component';
@@ -26,10 +27,11 @@ import { getShortISOString } from '../internal/get-short-iso-string';
 import { IndicatorsContainer } from '../internal/indicators-container';
 import { isDateDisabled } from '../internal/is-date-disabled';
 import { Menu } from '../internal/menu';
+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 = "17.7.0";
+const packageVersion = "17.8.0";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -128,10 +130,14 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
-      var _calendarRef$current, _calendarRef$current$;
       setIsKeyDown(false);
-      // Focus on the first button within the calendar
-      calendarRef === null || calendarRef === void 0 ? void 0 : (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : (_calendarRef$current$ = _calendarRef$current.querySelector('button')) === null || _calendarRef$current$ === void 0 ? void 0 : _calendarRef$current$.focus();
+      // When using top-layer, Popup.Content with role='dialog' automatically
+      // focuses the first focusable element — no manual focus needed.
+      if (!fg('platform-dst-top-layer')) {
+        var _calendarRef$current, _calendarRef$current$;
+        // Focus on the first button within the calendar
+        calendarRef === null || calendarRef === void 0 ? void 0 : (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : (_calendarRef$current$ = _calendarRef$current.querySelector('button')) === null || _calendarRef$current$ === void 0 ? void 0 : _calendarRef$current$.focus();
+      }
     }
   }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
   const getValue = () => propValue !== null && propValue !== void 0 ? propValue : value;
@@ -153,19 +159,17 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     setWasOpenedFromCalendarButton(false);
     onChangePropWithAnalytics(iso);
 
-    // Yes, this is not ideal. The alternative is to be able to place a ref
-    // on the inner input of Select itself, which would require a lot of
-    // extra stuff in the Select component for only this one thing. While
-    // this would be more "React-y", it doesn't seem to pose any other
-    // benefits. Performance-wise, we are only searching within the
-    // container, so it's quick.
-    if (wasOpenedFromCalendarButton) {
-      var _calendarButtonRef$cu;
-      (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 ? void 0 : _calendarButtonRef$cu.focus();
-    } else {
-      var _containerRef$current;
-      const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
-      innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+    // When using top-layer, PopupContent handles focus restoration automatically
+    // on close based on the role. Only manually restore focus for the legacy path.
+    if (!fg('platform-dst-top-layer')) {
+      if (wasOpenedFromCalendarButton) {
+        var _calendarButtonRef$cu;
+        (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 ? void 0 : _calendarButtonRef$cu.focus();
+      } else {
+        var _containerRef$current;
+        const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
+        innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+      }
     }
     setIsOpen(false);
   };
@@ -245,12 +249,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     }
     switch (keyPressed) {
       case 'escape':
-        // Yes, this is not ideal. The alternative is to be able to place a ref
-        // on the inner input of Select itself, which would require a lot of
-        // extra stuff in the Select component for only this one thing. While
-        // this would be more "React-y", it doesn't seem to pose any other
-        // benefits. Performance-wise, we are only searching within the
-        // container, so it's quick.
+        // Restore focus on close. Both code paths handle this here:
+        // the legacy path because it has no built-in restoration, and
+        // the top-layer path because the menu uses `mode="manual"` to
+        // avoid the auto-popover light-dismiss closing the menu on the
+        // same click that opens it (see internal/menu-top-layer.tsx).
+        // `manual` mode disables the browser's native focus return.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 ? void 0 : _calendarButtonRef$cu2.focus();
@@ -399,7 +403,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
         showClearIndicator: showClearIndicator
       }))
     } : {}),
-    Menu,
+    Menu: fg('platform-dst-top-layer') ? MenuTopLayer : Menu,
     SingleValue,
     ...(!showClearIndicator && {
       ClearIndicator: EmptyComponent

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

@@ -16,7 +16,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.7.0";
+const packageVersion = "17.8.0";
 const compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
@@ -368,4 +368,6 @@ const DateTimePicker = withAnalyticsContext({
     }
   })
 })(DateTimePickerComponent));
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export default DateTimePicker;

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

@@ -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 = "17.7.0";
+const packageVersion = "17.8.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,