@atlaskit/datetime-picker 18.4.0 → 18.4.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/datetime-picker
 
+## 18.4.1
+
+### Patch Changes
+
+- [`a7e63cfd84876`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a7e63cfd84876) -
+  [ux] When `platform-dst-top-layer` is enabled, Select menus now use the native Popover API to
+  handle Escape and light-dismiss before synchronizing `menuIsOpen` through `onMenuClose`. This
+  ensures Escape dismisses a nested Select menu without also dismissing its containing popup.
+
+  Existing public props keep their behavior. The top-layer `Popover` implementation gains an
+  internal `source` prop for imperative native popover invokers. The public runtime differences
+  behind the feature gate are:
+  - Select no longer calls `preventDefault()` or `stopPropagation()` for Escape on the top-layer
+    path, whether its menu is open or closed. Successive Escape presses can therefore dismiss the
+    Select menu and then its containing native popover.
+  - `onMenuClose` is called from the native popover close lifecycle rather than synchronously during
+    Select's Escape `keydown` handler.
+  - `shouldPreventEscapePropagation` no longer stops Escape propagation while a top-layer menu is
+    open; its legacy-path behavior is unchanged.
+  - Top-layer Escape invokes `onInputChange` with the `menu-close` action once, after native
+    dismissal, instead of the legacy path's two calls.
+  - Controlled Selects must continue updating `menuIsOpen` to `false` in response to `onMenuClose`.
+  - `PopupSelect` delegates Escape dismissal and focus restoration to its native popover. A consumer
+    `onKeyDown` handler can therefore prevent the native dismissal with `preventDefault()`;
+    previously, `PopupSelect` closed before forwarding the event.
+  - DatePicker's top-layer calendar now uses the Select menu portal's native popover instead of
+    creating a nested manual popover.
+  - The internal Popover forwarding API accepts a native `source` element so imperative Select
+    popovers retain their trigger relationship for light-dismiss behavior.
+
+- Updated dependencies
+
 ## 18.4.0
 
 ### Minor Changes

package/__tests__/playwright/top-layer-focus.spec.tsx

@@ -3,19 +3,15 @@ import { expect, test } from '@af/integration-testing';
 /**
  * Date picker: focus contract on the top-layer code path.
  *
- * `DatePicker` opens a `role="dialog"` calendar popover anchored to a
- * react-select combobox `<input>`. Because the popover uses the dialog role
- * (not `menu` / `listbox`), the combobox carve-out documented in
- * `top-layer/notes/architecture/focus.md` does NOT apply: dialogs always
- * move focus into the popover (to the first focusable, here the
- * previous-year navigation button).
+ * `DatePicker` renders its calendar inside the top-layer react-select menu.
+ * Opening from the input keeps DOM focus on the combobox; the calendar remains
+ * reachable in normal Tab order.
  *
  * The focus contract is therefore:
  *
- * 1. Open: focus moves to the first focusable inside the calendar dialog
- *    (the previous-year navigation button).
+ * 1. Open from the input: focus remains on the combobox.
  * 2. Escape: the popover closes and focus is restored to the combobox input.
- * 3. Tab inside the open dialog: focus cycles through dialog focusables.
+ * 3. Tab: focus moves from the input into the calendar without closing it.
  *
  * See: `platform/packages/design-system/top-layer/notes/architecture/focus.md`.
  */
@@ -23,9 +19,7 @@ import { expect, test } from '@af/integration-testing';
 const featureFlag = 'platform-dst-top-layer';
 
 test.describe('Date picker: top-layer focus contract', () => {
-	test('initial focus: focus moves to the first focusable in the calendar dialog on open', async ({
-		page,
-	}) => {
+	test('pointer interaction: clicking the input opens the calendar', async ({ page }) => {
 		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
 			'design-system',
 			'datetime-picker',
@@ -33,13 +27,27 @@ test.describe('Date picker: top-layer focus contract', () => {
 			{ featureFlag },
 		);
 
-		await page.getByTestId('date-picker--container').click();
+		const combobox = page.getByRole('combobox');
+		await combobox.click();
 
-		const calendar = page.getByRole('dialog', { name: 'calendar' });
-		await expect(calendar).toBeVisible();
+		await expect(page.getByRole('grid')).toBeVisible();
+		await expect(combobox).toHaveAttribute('aria-expanded', 'true');
+	});
 
-		const previousYearButton = page.getByTestId('date-picker--calendar--previous-year');
-		await expect(previousYearButton).toBeFocused();
+	test('initial focus: opening from the input keeps focus on the combobox', async ({ page }) => {
+		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
+			'design-system',
+			'datetime-picker',
+			'testing-top-layer-focus',
+			{ featureFlag },
+		);
+
+		const combobox = page.getByRole('combobox');
+		await combobox.focus();
+
+		const calendar = page.getByRole('grid');
+		await expect(calendar).toBeVisible();
+		await expect(combobox).toBeFocused();
 	});
 
 	test('focus restoration: Escape closes the popover and focus returns to the combobox input', async ({
@@ -53,9 +61,9 @@ test.describe('Date picker: top-layer focus contract', () => {
 		);
 
 		const combobox = page.getByRole('combobox');
-		await page.getByTestId('date-picker--container').click();
+		await combobox.focus();
 
-		const calendar = page.getByRole('dialog', { name: 'calendar' });
+		const calendar = page.getByRole('grid');
 		await expect(calendar).toBeVisible();
 
 		await page.keyboard.press('Escape');
@@ -63,9 +71,7 @@ test.describe('Date picker: top-layer focus contract', () => {
 		await expect(combobox).toBeFocused();
 	});
 
-	test('focus movement: Tab moves focus and keeps it inside the calendar dialog', async ({
-		page,
-	}) => {
+	test('focus movement: Tab moves focus from the input into the calendar', async ({ page }) => {
 		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
 			'design-system',
 			'datetime-picker',
@@ -73,25 +79,16 @@ test.describe('Date picker: top-layer focus contract', () => {
 			{ featureFlag },
 		);
 
-		await page.getByTestId('date-picker--container').click();
+		const combobox = page.getByRole('combobox');
+		await combobox.focus();
 
-		const calendar = page.getByRole('dialog', { name: 'calendar' });
+		const calendar = page.getByRole('grid');
 		await expect(calendar).toBeVisible();
+		await expect(combobox).toBeFocused();
 
 		const previousYearButton = page.getByTestId('date-picker--calendar--previous-year');
-		await expect(previousYearButton).toBeFocused();
-
-		// `useFocusWrap` keeps Tab inside the dialog for role="dialog" popovers.
 		await page.keyboard.press('Tab');
-		await expect(previousYearButton).not.toBeFocused();
-
-		// Focus must stay within the calendar dialog: for a role="dialog" popover
-		// `useFocusWrap` intercepts Tab so focus never escapes to page content
-		// behind the popover.
-		const focusWithinCalendar = await calendar.evaluate(
-			(calendarElement) =>
-				document.activeElement !== null && calendarElement.contains(document.activeElement),
-		);
-		expect(focusWithinCalendar).toBe(true);
+		await expect(previousYearButton).toBeFocused();
+		await expect(calendar).toBeVisible();
 	});
 });

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

@@ -45,7 +45,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 = "18.3.1";
+var packageVersion = "18.4.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -72,6 +72,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var containerRef = (0, _react.useRef)(null);
   var calendarRef = (0, _react.useRef)(null);
   var calendarButtonRef = (0, _react.useRef)(null);
+  var isPointerInteractionRef = (0, _react.useRef)(false);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
@@ -197,19 +198,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     setLocale(propLocale);
   }
   (0, _react.useEffect)(function () {
-    // We don't want the focus to move if this is a click event
+    // Only move focus when the dedicated calendar button opened the menu.
     if (!isKeyDown) {
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
+      var _calendarRef$current;
       setIsKeyDown(false);
-      // When using top-layer, Popup.Content with role='dialog' automatically
-      // focuses the first focusable element — no manual focus needed.
-      if (!(0, _fg.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();
-      }
+      // 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() {
@@ -256,6 +253,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var onContainerBlur = function onContainerBlur(event) {
     var _containerRef$current2;
     var newlyFocusedElement = event.relatedTarget;
+    isPointerInteractionRef.current = false;
     if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
@@ -286,8 +284,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       // Don't open menu if focussing after the user has clicked clear
       setClearingFromIcon(false);
     } else {
-      // Don't open when focused into via keyboard if the calendar button is present
-      setIsOpen(!shouldShowCalendarButton);
+      // Opening an auto popover during pointer focus allows the matching pointerup
+      // to immediately light-dismiss it. Let the subsequent click open it instead.
+      if (!(0, _fg.fg)('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+        // Don't open when focused into via keyboard if the calendar button is present
+        setIsOpen(!shouldShowCalendarButton);
+      }
       setCalendarValue(value);
       setIsFocused(true);
       setWasOpenedFromCalendarButton(false);
@@ -323,12 +325,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     }
     switch (keyPressed) {
       case 'escape':
-        // 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.
+        // Restore focus because it may have moved from the input into the calendar.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
@@ -406,6 +403,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
 
   // This event handler is triggered from both keydown and click. It's weird.
   var onCalendarButtonClick = function onCalendarButtonClick(e) {
+    if (!getIsOpen() && (0, _fg.fg)('platform-dst-top-layer')) {
+      setIsKeyDown(true);
+    }
     setIsOpen(function (isOpen) {
       if (isOpen) {
         var _props$selectProps2, _props$selectProps2$o;
@@ -536,10 +536,19 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     "data-testid": testId && "".concat(testId, "--container"),
     onBlur: onContainerBlur,
+    onClickCapture: function onClickCapture() {
+      isPointerInteractionRef.current = false;
+    },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
     onKeyDown: onInputKeyDown,
+    onPointerCancelCapture: function onPointerCancelCapture() {
+      isPointerInteractionRef.current = false;
+    },
+    onPointerDownCapture: function onPointerDownCapture() {
+      isPointerInteractionRef.current = true;
+    },
     ref: getContainerRef
     // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
     ,

package/dist/cjs/components/date-time-picker.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 = "18.3.1";
+var packageVersion = "18.4.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -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.3.1";
+var packageVersion = "18.4.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/cjs/internal/menu-top-layer.compiled.css

@@ -0,0 +1,5 @@
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._1bsb1ris{width:max-content}
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -7,25 +7,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuTopLayer = void 0;
+require("./menu-top-layer.compiled.css");
 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/calendar"));
-var _placementMap = require("@atlaskit/top-layer/placement-map");
-var _popover = require("@atlaskit/top-layer/popover");
-var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
-var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
 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); }
-/**
- * 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.
@@ -40,19 +29,19 @@ function getValidDate(isos) {
     } : acc;
   }, {});
 }
+var styles = {
+  root: "_2rko1mok _1bsb1ris _bfhk1bhr _16qs130s _1pfhu2gc _6rthu2gc"
+};
 
 /**
  * Top-layer version of the date picker menu.
  *
- * Uses `Popover` + `useAnchorPosition` 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.
+ * The surrounding react-select menu portal owns the native popover and
+ * positioning. This component only supplies the calendar dialog content.
  *
  * 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,
@@ -62,20 +51,6 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
     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 popoverRef = (0, _react.useRef)(null);
-  (0, _useAnchorPosition.useAnchorPosition)({
-    anchorRef: triggerRef,
-    popoverRef: popoverRef,
-    placement: popupPlacement,
-    // The Popover is rendered with `isOpen` always true while this
-    // component is mounted (react-select conditionally mounts/unmounts
-    // the menu), so positioning is always active.
-    isOpen: true
-  });
   var onMenuMouseDown = function onMenuMouseDown(event) {
     if (event.button !== 0) {
       return;
@@ -84,25 +59,10 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
     event.preventDefault();
   };
   var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : _react.Fragment;
-  return /*#__PURE__*/React.createElement(_popover.Popover, {
-    ref: popoverRef,
-    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,
-    shouldAnimate: true,
-    testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
-  }, /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+    onMouseDown: onMenuMouseDown,
     role: "presentation",
-    onMouseDown: onMenuMouseDown
+    className: (0, _runtime.ax)([styles.root])
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
     day: day,
     month: month,
@@ -121,5 +81,5 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
     weekStartDay: selectProps.calendarWeekStartDay
-  })))));
+  })));
 };

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

@@ -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.3.1";
+const packageVersion = "18.4.0";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -59,6 +59,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   const containerRef = useRef(null);
   const calendarRef = useRef(null);
   const calendarButtonRef = useRef(null);
+  const isPointerInteractionRef = useRef(false);
   const {
     appearance = 'default',
     autoFocus = false,
@@ -126,19 +127,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     setLocale(propLocale);
   }
   useEffect(() => {
-    // We don't want the focus to move if this is a click event
+    // Only move focus when the dedicated calendar button opened the menu.
     if (!isKeyDown) {
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
+      var _calendarRef$current, _calendarRef$current$;
       setIsKeyDown(false);
-      // 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();
-      }
+      // 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;
@@ -183,6 +180,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   const onContainerBlur = event => {
     var _containerRef$current2;
     const newlyFocusedElement = event.relatedTarget;
+    isPointerInteractionRef.current = false;
     if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
@@ -213,8 +211,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
       // Don't open menu if focussing after the user has clicked clear
       setClearingFromIcon(false);
     } else {
-      // Don't open when focused into via keyboard if the calendar button is present
-      setIsOpen(!shouldShowCalendarButton);
+      // Opening an auto popover during pointer focus allows the matching pointerup
+      // to immediately light-dismiss it. Let the subsequent click open it instead.
+      if (!fg('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+        // Don't open when focused into via keyboard if the calendar button is present
+        setIsOpen(!shouldShowCalendarButton);
+      }
       setCalendarValue(value);
       setIsFocused(true);
       setWasOpenedFromCalendarButton(false);
@@ -250,12 +252,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     }
     switch (keyPressed) {
       case 'escape':
-        // 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.
+        // Restore focus because it may have moved from the input into the calendar.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 ? void 0 : _calendarButtonRef$cu2.focus();
@@ -333,6 +330,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
 
   // This event handler is triggered from both keydown and click. It's weird.
   const onCalendarButtonClick = e => {
+    if (!getIsOpen() && fg('platform-dst-top-layer')) {
+      setIsKeyDown(true);
+    }
     setIsOpen(isOpen => {
       if (isOpen) {
         var _props$selectProps, _props$selectProps$on;
@@ -464,10 +464,19 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId && `${testId}--container`,
     onBlur: onContainerBlur,
+    onClickCapture: () => {
+      isPointerInteractionRef.current = false;
+    },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
     onKeyDown: onInputKeyDown,
+    onPointerCancelCapture: () => {
+      isPointerInteractionRef.current = false;
+    },
+    onPointerDownCapture: () => {
+      isPointerInteractionRef.current = true;
+    },
     ref: getContainerRef
     // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
     ,

package/dist/es2019/components/date-time-picker.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 = "18.3.1";
+const packageVersion = "18.4.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -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.3.1";
+const packageVersion = "18.4.0";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/es2019/internal/menu-top-layer.compiled.css

@@ -0,0 +1,5 @@
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._1bsb1ris{width:max-content}
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -1,23 +1,11 @@
 /* menu-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./menu-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useRef } from 'react';
+import { Fragment } from 'react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar/calendar';
-import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popover } from '@atlaskit/top-layer/popover';
-import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
-import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
-
-/**
- * Bottom-start placement: calendar appears below and aligned to the
- * start edge of the trigger (the select input).
- */
-const popupPlacement = fromLegacyPlacement({
-  legacy: 'bottom-start'
-});
-
 /**
  * @param isos A series of ISO dates.
  * @returns The last valid date within the array of ISO strings.
@@ -32,14 +20,15 @@ function getValidDate(isos) {
     } : acc;
   }, {});
 }
+const styles = {
+  root: "_2rko1mok _1bsb1ris _bfhk1bhr _16qs130s _1pfhu2gc _6rthu2gc"
+};
 
 /**
  * Top-layer version of the date picker menu.
  *
- * Uses `Popover` + `useAnchorPosition` 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.
+ * The surrounding react-select menu portal owns the native popover and
+ * positioning. This component only supplies the calendar dialog content.
  *
  * Gated behind the `platform-dst-top-layer` feature flag.
  */
@@ -47,7 +36,6 @@ export const MenuTopLayer = ({
   selectProps,
   innerProps
 }) => {
-  var _selectProps$calendar, _selectProps$calendar2;
   const {
     calendarValue,
     calendarView,
@@ -58,20 +46,6 @@ export const MenuTopLayer = ({
     month,
     year
   } = getValidDate([calendarValue, calendarView]);
-
-  // The select's container element is the anchor for the popup.
-  const triggerRef = 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;
-  const popoverRef = useRef(null);
-  useAnchorPosition({
-    anchorRef: triggerRef,
-    popoverRef,
-    placement: popupPlacement,
-    // The Popover is rendered with `isOpen` always true while this
-    // component is mounted (react-select conditionally mounts/unmounts
-    // the menu), so positioning is always active.
-    isOpen: true
-  });
   const onMenuMouseDown = event => {
     if (event.button !== 0) {
       return;
@@ -80,25 +54,10 @@ export const MenuTopLayer = ({
     event.preventDefault();
   };
   const Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
-  return /*#__PURE__*/React.createElement(Popover, {
-    ref: popoverRef,
-    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,
-    shouldAnimate: true,
-    testId: selectProps.testId && `${selectProps.testId}--popup`
-  }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    onMouseDown: onMenuMouseDown,
     role: "presentation",
-    onMouseDown: onMenuMouseDown
+    className: ax([styles.root])
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
     day: day,
     month: month,
@@ -117,5 +76,5 @@ export const MenuTopLayer = ({
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && `${selectProps.testId}--calendar`,
     weekStartDay: selectProps.calendarWeekStartDay
-  })))));
+  })));
 };

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

@@ -38,7 +38,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.3.1";
+var packageVersion = "18.4.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -65,6 +65,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   var containerRef = useRef(null);
   var calendarRef = useRef(null);
   var calendarButtonRef = useRef(null);
+  var isPointerInteractionRef = useRef(false);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
@@ -190,19 +191,15 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     setLocale(propLocale);
   }
   useEffect(function () {
-    // We don't want the focus to move if this is a click event
+    // Only move focus when the dedicated calendar button opened the menu.
     if (!isKeyDown) {
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
+      var _calendarRef$current;
       setIsKeyDown(false);
-      // 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;
-        // 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();
-      }
+      // 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() {
@@ -249,6 +246,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   var onContainerBlur = function onContainerBlur(event) {
     var _containerRef$current2;
     var newlyFocusedElement = event.relatedTarget;
+    isPointerInteractionRef.current = false;
     if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
@@ -279,8 +277,12 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
       // Don't open menu if focussing after the user has clicked clear
       setClearingFromIcon(false);
     } else {
-      // Don't open when focused into via keyboard if the calendar button is present
-      setIsOpen(!shouldShowCalendarButton);
+      // Opening an auto popover during pointer focus allows the matching pointerup
+      // to immediately light-dismiss it. Let the subsequent click open it instead.
+      if (!fg('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+        // Don't open when focused into via keyboard if the calendar button is present
+        setIsOpen(!shouldShowCalendarButton);
+      }
       setCalendarValue(value);
       setIsFocused(true);
       setWasOpenedFromCalendarButton(false);
@@ -316,12 +318,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     }
     switch (keyPressed) {
       case 'escape':
-        // 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.
+        // Restore focus because it may have moved from the input into the calendar.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
@@ -399,6 +396,9 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
 
   // This event handler is triggered from both keydown and click. It's weird.
   var onCalendarButtonClick = function onCalendarButtonClick(e) {
+    if (!getIsOpen() && fg('platform-dst-top-layer')) {
+      setIsKeyDown(true);
+    }
     setIsOpen(function (isOpen) {
       if (isOpen) {
         var _props$selectProps2, _props$selectProps2$o;
@@ -529,10 +529,19 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId && "".concat(testId, "--container"),
     onBlur: onContainerBlur,
+    onClickCapture: function onClickCapture() {
+      isPointerInteractionRef.current = false;
+    },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
     onKeyDown: onInputKeyDown,
+    onPointerCancelCapture: function onPointerCancelCapture() {
+      isPointerInteractionRef.current = false;
+    },
+    onPointerDownCapture: function onPointerDownCapture() {
+      isPointerInteractionRef.current = true;
+    },
     ref: getContainerRef
     // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
     ,

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

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

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

@@ -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.3.1";
+var packageVersion = "18.4.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/esm/internal/menu-top-layer.compiled.css

@@ -0,0 +1,5 @@
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._1bsb1ris{width:max-content}
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -1,23 +1,11 @@
 /* menu-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./menu-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useRef } from 'react';
+import { Fragment } from 'react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar/calendar';
-import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popover } from '@atlaskit/top-layer/popover';
-import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
-import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
-
-/**
- * Bottom-start placement: calendar appears below and aligned to the
- * start edge of the trigger (the select input).
- */
-var popupPlacement = fromLegacyPlacement({
-  legacy: 'bottom-start'
-});
-
 /**
  * @param isos A series of ISO dates.
  * @returns The last valid date within the array of ISO strings.
@@ -32,19 +20,19 @@ function getValidDate(isos) {
     } : acc;
   }, {});
 }
+var styles = {
+  root: "_2rko1mok _1bsb1ris _bfhk1bhr _16qs130s _1pfhu2gc _6rthu2gc"
+};
 
 /**
  * Top-layer version of the date picker menu.
  *
- * Uses `Popover` + `useAnchorPosition` 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.
+ * The surrounding react-select menu portal owns the native popover and
+ * positioning. This component only supplies the calendar dialog content.
  *
  * Gated behind the `platform-dst-top-layer` feature flag.
  */
 export var MenuTopLayer = function MenuTopLayer(_ref) {
-  var _selectProps$calendar, _selectProps$calendar2;
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   var calendarValue = selectProps.calendarValue,
@@ -54,20 +42,6 @@ export var MenuTopLayer = function MenuTopLayer(_ref) {
     day = _getValidDate.day,
     month = _getValidDate.month,
     year = _getValidDate.year;
-
-  // The select's container element is the anchor for the popup.
-  var triggerRef = 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 popoverRef = useRef(null);
-  useAnchorPosition({
-    anchorRef: triggerRef,
-    popoverRef: popoverRef,
-    placement: popupPlacement,
-    // The Popover is rendered with `isOpen` always true while this
-    // component is mounted (react-select conditionally mounts/unmounts
-    // the menu), so positioning is always active.
-    isOpen: true
-  });
   var onMenuMouseDown = function onMenuMouseDown(event) {
     if (event.button !== 0) {
       return;
@@ -76,25 +50,10 @@ export var MenuTopLayer = function MenuTopLayer(_ref) {
     event.preventDefault();
   };
   var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
-  return /*#__PURE__*/React.createElement(Popover, {
-    ref: popoverRef,
-    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,
-    shouldAnimate: true,
-    testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
-  }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    onMouseDown: onMenuMouseDown,
     role: "presentation",
-    onMouseDown: onMenuMouseDown
+    className: ax([styles.root])
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
     day: day,
     month: month,
@@ -113,5 +72,5 @@ export var MenuTopLayer = function MenuTopLayer(_ref) {
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
     weekStartDay: selectProps.calendarWeekStartDay
-  })))));
+  })));
 };

package/dist/types/internal/menu-top-layer.d.ts

@@ -6,10 +6,8 @@ import type { MenuProps, OptionType } from '@atlaskit/select/types';
 /**
  * Top-layer version of the date picker menu.
  *
- * Uses `Popover` + `useAnchorPosition` 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.
+ * The surrounding react-select menu portal owns the native popover and
+ * positioning. This component only supplies the calendar dialog content.
  *
  * Gated behind the `platform-dst-top-layer` feature flag.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "18.4.0",
+	"version": "18.4.1",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"