@atlaskit/datetime-picker 17.8.0 → 17.8.2

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.1";
 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.1";
 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.1";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -6,16 +6,18 @@ import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
 import { defaultTimes } from '../internal/default-times';
 import { EmptyComponent } from '../internal/empty-component';
 import { FixedLayerMenu } from '../internal/fixed-layer-menu';
+import { FixedLayerMenuTopLayer } from '../internal/fixed-layer-menu-top-layer';
 import parseTime from '../internal/parse-time';
 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 = "17.7.0";
+const packageVersion = "17.8.1";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -230,7 +232,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   });
   const selectComponents = {
     DropdownIndicator: EmptyComponent,
-    Menu: FixedLayerMenu,
+    Menu: fg('platform-dst-top-layer') ? FixedLayerMenuTopLayer : FixedLayerMenu,
     SingleValue,
     ...(hideIcon && {
       ClearIndicator: EmptyComponent

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

@@ -0,0 +1,103 @@
+/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+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/select';
+import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+import { Popup } from '@atlaskit/top-layer/popup';
+const animation = slideAndFade();
+
+/**
+ * Bottom-start placement: time options menu appears below and aligned to the
+ * start edge of the trigger (the select input).
+ */
+const popupPlacement = 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.
+ */
+export const FixedLayerMenuTopLayer = ({
+  className,
+  clearValue,
+  cx,
+  getStyles,
+  getValue,
+  hasValue,
+  innerProps,
+  innerRef,
+  isLoading,
+  isMulti,
+  isRtl,
+  maxMenuHeight,
+  menuPlacement,
+  menuPosition,
+  menuShouldScrollIntoView,
+  minMenuHeight,
+  options,
+  placement,
+  selectOption,
+  selectProps,
+  setValue,
+  children,
+  ...rest
+}) => {
+  var _selectProps$fixedLay, _selectProps$fixedLay2;
+  // The select's container element is the anchor for the popup.
+  // @ts-ignore -- fixedLayerRef is a custom prop passed through selectProps
+  const triggerRef = 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.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 && `${selectProps.testId}--popup`
+  }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, 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/es2019/internal/menu-top-layer.js

@@ -0,0 +1,111 @@
+/* menu-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment, useRef } from 'react';
+import { isValid, parseISO } from 'date-fns';
+import Calendar from '@atlaskit/calendar';
+import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+import { Popup } from '@atlaskit/top-layer/popup';
+const animation = slideAndFade();
+
+/**
+ * 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.
+ */
+function getValidDate(isos) {
+  return isos.reduce((acc, iso) => {
+    const date = parseISO(iso);
+    return 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.
+ */
+export const MenuTopLayer = ({
+  selectProps,
+  innerProps
+}) => {
+  var _selectProps$calendar, _selectProps$calendar2;
+  const {
+    calendarValue,
+    calendarView,
+    menuInnerWrapper: MenuInnerWrapper
+  } = selectProps;
+  const {
+    day,
+    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 onMenuMouseDown = event => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
+  return /*#__PURE__*/React.createElement(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 && `${selectProps.testId}--popup`
+  }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    role: "presentation",
+    onMouseDown: onMenuMouseDown
+  }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
+    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 && `${selectProps.testId}--calendar`,
+    weekStartDay: selectProps.calendarWeekStartDay
+  })))));
+};

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

@@ -21,6 +21,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';
@@ -32,10 +33,11 @@ import { getShortISOString } from '../internal/get-short-iso-string';
 import { IndicatorsContainer as _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';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.7.0";
+var packageVersion = "17.8.1";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -192,10 +194,14 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
       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 (!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() {
@@ -219,19 +225,17 @@ var DatePicker = /*#__PURE__*/forwardRef(function (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 || _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 (!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);
   };
@@ -311,12 +315,12 @@ var DatePicker = /*#__PURE__*/forwardRef(function (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 || _calendarButtonRef$cu2.focus();
@@ -466,7 +470,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
       }));
     }
   } : {}), {}, {
-    Menu: Menu,
+    Menu: fg('platform-dst-top-layer') ? MenuTopLayer : Menu,
     SingleValue: SingleValue
   }, !showClearIndicator && {
     ClearIndicator: EmptyComponent

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

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

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

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

@@ -12,16 +12,18 @@ import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
 import { defaultTimes } from '../internal/default-times';
 import { EmptyComponent } from '../internal/empty-component';
 import { FixedLayerMenu } from '../internal/fixed-layer-menu';
+import { FixedLayerMenuTopLayer } from '../internal/fixed-layer-menu-top-layer';
 import parseTime from '../internal/parse-time';
 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 = "17.7.0";
+var packageVersion = "17.8.1";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -274,7 +276,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
   });
   var selectComponents = _objectSpread({
     DropdownIndicator: EmptyComponent,
-    Menu: FixedLayerMenu,
+    Menu: fg('platform-dst-top-layer') ? FixedLayerMenuTopLayer : FixedLayerMenu,
     SingleValue: SingleValue
   }, hideIcon && {
     ClearIndicator: EmptyComponent

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

@@ -0,0 +1,105 @@
+/* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+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"];
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useRef } from 'react';
+import { components } from '@atlaskit/select';
+import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+import { Popup } from '@atlaskit/top-layer/popup';
+var animation = slideAndFade();
+
+/**
+ * Bottom-start placement: time options menu appears below and aligned to the
+ * start edge of the trigger (the select input).
+ */
+var popupPlacement = 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 = 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 = _objectWithoutProperties(_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 = 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.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.Surface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, 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)));
+};
+export { FixedLayerMenuTopLayer };