@atlaskit/datetime-picker 17.7.0 → 17.8.1

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/format-date-time-zone-into-iso.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatDateTimeZoneIntoIso = formatDateTimeZoneIntoIso;
+/**
+ * Formats a date, time, and zone into a ISO string.
+ */
+function formatDateTimeZoneIntoIso(date, time, zone) {
+  // 12:00 => 12:00, 1:00 => 01:00
+  var needsLeadingZero = /^\d:/;
+  var sanitizedTime = needsLeadingZero.test(time) ? "0".concat(time) : time;
+  return "".concat(date, "T").concat(sanitizedTime).concat(zone);
+}

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatDate = void 0;
 var _dateFns = require("date-fns");
+var _defaultDateFormat = require("./default-date-format");
 var _parseTokens = require("./parse-tokens");
-var _index = require("./index");
 /**
  * Everything in this file is to smooth out the migration of the new date picker
  * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
@@ -32,7 +32,7 @@ var formatDate = exports.formatDate = function formatDate(value, di) {
     dateFormat = di.dateFormat,
     l10n = di.l10n;
   if (formatDisplayLabel) {
-    return formatDisplayLabel(value, dateFormat || _index.defaultDateFormat);
+    return formatDisplayLabel(value, dateFormat || _defaultDateFormat.defaultDateFormat);
   }
   var date = (0, _dateFns.parseISO)(value);
   return dateFormat ? (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(dateFormat)) : l10n.formatDate(date);

package/dist/cjs/internal/get-parsed-iso.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getParsedISO = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _dateFns = require("date-fns");
-var _index = require("./index");
+var _padTwo = require("./pad-two");
 /**
  * Everything in this file is to smooth out the migration of the new date picker
  * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
@@ -42,9 +42,9 @@ var getParsedISO = exports.getParsedISO = function getParsedISO(di) {
   var lastDayInMonth = (0, _dateFns.lastDayOfMonth)(new Date(parsedYear, parsedMonth - 1) // This needs to be -1, because the Date constructor expects an index of the given month
   ).getDate();
   if (lastDayInMonth < parsedDate) {
-    newIso = "".concat(parsedYear, "-").concat((0, _index.padToTwo)(parsedMonth), "-").concat((0, _index.padToTwo)(lastDayInMonth));
+    newIso = "".concat(parsedYear, "-").concat((0, _padTwo.padToTwo)(parsedMonth), "-").concat((0, _padTwo.padToTwo)(lastDayInMonth));
   } else {
-    newIso = "".concat(parsedYear, "-").concat((0, _index.padToTwo)(parsedMonth), "-").concat((0, _index.padToTwo)(parsedDate));
+    newIso = "".concat(parsedYear, "-").concat((0, _padTwo.padToTwo)(parsedMonth), "-").concat((0, _padTwo.padToTwo)(parsedDate));
   }
   return newIso;
 };

package/dist/cjs/internal/get-placeholder.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPlaceholder = void 0;
-var _index = require("./index");
+var _placeholderDateTime = require("./placeholder-date-time");
 /**
  * Everything in this file is to smooth out the migration of the new date picker
  * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
@@ -28,5 +28,5 @@ var _index = require("./index");
 var getPlaceholder = exports.getPlaceholder = function getPlaceholder(di) {
   var placeholder = di.placeholder,
     l10n = di.l10n;
-  return placeholder || l10n.formatDate(_index.placeholderDatetime);
+  return placeholder || l10n.formatDate(_placeholderDateTime.placeholderDatetime);
 };

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/cjs/internal/pad-two.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.padToTwo = padToTwo;
+function padToTwo(number) {
+  return number <= 99 ? "0".concat(number).slice(-2) : "".concat(number);
+}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.parseDate = void 0;
-var _index = require("./index");
+var _defaultDateFormat = require("./default-date-format");
 /**
  * Everything in this file is to smooth out the migration of the new date picker
  * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
@@ -34,7 +34,7 @@ var parseDate = exports.parseDate = function parseDate(date, di) {
     dateFormat = di.dateFormat,
     l10n = di.l10n;
   if (parseInputValue) {
-    return parseInputValue(date, dateFormat || _index.defaultDateFormat);
+    return parseInputValue(date, dateFormat || _defaultDateFormat.defaultDateFormat);
   }
   return l10n.parseDate(date);
 };

package/dist/cjs/internal/placeholder-date-time.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placeholderDatetime = void 0;
+// This date was chosen to clearly show date and time formats (day > 12)
+// e.g. 18/02/1993 vs. 2/18/1993 and 1:00 PM vs 13:00
+var placeholderDatetime = exports.placeholderDatetime = new Date(1993, 1, 18, 13);

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

@@ -15,9 +15,10 @@ 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';
+import { EmptyComponent } from '../internal/empty-component';
 import { formatDate } from '../internal/format-date';
 import { getParsedISO } from '../internal/get-parsed-iso';
 import { getPlaceholder } from '../internal/get-placeholder';
@@ -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 = "0.0.0-development";
+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

@@ -10,13 +10,13 @@ import { format, isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
 import { mergeStyles } from '@atlaskit/select';
-import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
+import { formatDateTimeZoneIntoIso } from '../internal/format-date-time-zone-into-iso';
 import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "0.0.0-development";
+const packageVersion = "17.8.0";
 const compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
@@ -48,8 +48,6 @@ const dateTimePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-export const datePickerDefaultAriaLabel = 'Date';
-export const timePickerDefaultAriaLabel = 'Time';
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class DateTimePickerComponent extends React.Component {
@@ -233,14 +231,14 @@ class DateTimePickerComponent extends React.Component {
     const timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
     const datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
     const datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
-    const datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
+    const datePickerLabel = datePickerProps.label || 'Date';
     const mergedDatePickerSelectProps = {
       ...datePickerSelectProps,
       styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
     };
     const timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
     const timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
-    const timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
+    const timePickerLabel = timePickerProps.label || 'Time';
     const mergedTimePickerSelectProps = {
       ...timePickerSelectProps,
       styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
@@ -370,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

@@ -14,13 +14,13 @@ import { IconButton } from '@atlaskit/button/new';
 import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { mergeStyles } from '@atlaskit/select';
-import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
+import { formatDateTimeZoneIntoIso } from '../internal/format-date-time-zone-into-iso';
 import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "0.0.0-development";
+const packageVersion = "17.8.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -59,9 +59,6 @@ const styles = {
  *   that the previous useState approach missed.
  */
 
-export const datePickerDefaultAriaLabel = 'Date';
-export const timePickerDefaultAriaLabel = 'Time';
-
 /**
  * __Date time picker__
  *

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

@@ -6,14 +6,19 @@ 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 { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
+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 = "0.0.0-development";
+const packageVersion = "17.8.0";
+const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -227,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/entry-points/date-picker.js

@@ -0,0 +1 @@
+export { default } from '../components/date-picker';

package/dist/es2019/entry-points/date-time-picker.js

@@ -0,0 +1 @@
+export { default } from '../components/date-time-picker';

package/dist/es2019/entry-points/time-picker.js

@@ -0,0 +1 @@
+export { default } from '../components/time-picker';

package/dist/es2019/internal/default-date-format.js

@@ -0,0 +1 @@
+export const defaultDateFormat = 'YYYY/MM/DD';

package/dist/es2019/internal/default-times.js

@@ -0,0 +1 @@
+export const defaultTimes = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00'];

package/dist/es2019/internal/empty-component.js

@@ -0,0 +1,4 @@
+/**
+ * This component is used to hide portions of Select component.
+ */
+export const EmptyComponent = () => null;