@atlaskit/datetime-picker 18.3.1 → 18.4.1

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';
-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'
-});
-
+import Calendar from '@atlaskit/calendar/calendar';
 /**
  * @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/es2019/internal/menu.js

@@ -7,9 +7,9 @@ import { Fragment } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { isValid, parseISO } from 'date-fns';
-import Calendar from '@atlaskit/calendar';
+import Calendar from '@atlaskit/calendar/calendar';
 import { Layering } from '@atlaskit/layering/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import FixedLayer from '../internal/fixed-layer';
 
 /**

package/dist/es2019/internal/single-value.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { components } from '@atlaskit/select';
-
+import { components } from '@atlaskit/react-select/components';
 /**
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
  */
 export const makeSingleValue =
 // TODO: Make ID required
+
 ({
   id,
   lang

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

@@ -15,15 +15,16 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { isValid, parseISO } from 'date-fns';
-import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import { IconButton } from '@atlaskit/button/new';
 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 { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
-import Select, { mergeStyles } from '@atlaskit/select';
+import Select from '@atlaskit/select/default';
+import { mergeStyles } from '@atlaskit/react-select/styles';
 import { EmptyComponent } from '../internal/empty-component';
 import { formatDate } from '../internal/format-date';
 import { getParsedISO } from '../internal/get-parsed-iso';
@@ -37,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.0";
+var packageVersion = "18.4.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -64,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,
@@ -189,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() {
@@ -248,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);
@@ -278,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);
@@ -315,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();
@@ -398,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;
@@ -501,8 +502,6 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
      */
     menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
   };
-
-  // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
   var mergedStyles = mergeStyles(selectStyles, {
     control: function control(base) {
       return _objectSpread(_objectSpread({}, base), disabledStyle);
@@ -530,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.
     ,
@@ -586,7 +594,6 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     spacing: spacing,
     testId: testId
     // These aren't part of `Select`'s API, but we're using them here.
-    // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
     ,
     calendarContainerRef: calendarProps.calendarContainerRef,
     calendarDisabled: calendarProps.calendarDisabled,

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

@@ -16,18 +16,18 @@ import React, { forwardRef, useCallback, useEffect, useReducer, useRef, useState
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid, parseISO } from 'date-fns';
-import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 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 { mergeStyles } from '@atlaskit/react-select/styles';
 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';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.3.0";
+var packageVersion = "18.4.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -9,11 +9,13 @@ import React, { forwardRef, useCallback, useEffect, useReducer, useState } from
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid } from 'date-fns';
-import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 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 { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import Select from '@atlaskit/select/default';
+import CreatableSelect from '@atlaskit/select/creatable-select';
+import { mergeStyles } from '@atlaskit/react-select/styles';
 import { defaultTimes } from '../internal/default-times';
 import { EmptyComponent } from '../internal/empty-component';
 import { FixedLayerMenu } from '../internal/fixed-layer-menu';
@@ -23,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.0";
+var packageVersion = "18.4.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -282,8 +284,6 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     ClearIndicator: EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
-
-  // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
   var mergedStyles = mergeStyles(selectStyles, {
     control: function control(base) {
       return _objectSpread({}, base);
@@ -316,9 +316,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     "aria-label": label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
-    clearControlLabel: clearControlLabel
-    // @ts-ignore - Type mismatch with components - workaround for help-center local consumption
-    ,
+    clearControlLabel: clearControlLabel,
     components: selectComponents,
     inputId: id,
     isClearable: true,
@@ -328,22 +326,17 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     menuPlacement: "auto",
     openMenuOnFocus: true,
     onBlur: onBlur,
-    onCreateOption: onCreateOption
-    // @ts-ignore - Type mismatch with onChange handler - workaround for help-center local consumption
-    ,
+    onCreateOption: onCreateOption,
     onChange: onChange,
     options: options,
     onFocus: onFocus,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
-    placeholder: placeholder || l10n.formatTime(placeholderDatetime)
-    // @ts-ignore - Type mismatch with styles config - workaround for help-center local consumption
-    ,
+    placeholder: placeholder || l10n.formatTime(placeholderDatetime),
     styles: mergedStyles,
     value: initialValue,
     spacing: spacing
     // We need this to get things to work, even though it's not supported.
-    // @ts-ignore
     ,
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,

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

@@ -4,7 +4,7 @@ import "./date-time-picker-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 var isInvalidBorderStyles = null;
 var isFocusedBorderStyles = null;
 var isFocusedStyles = null;

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

@@ -5,7 +5,7 @@ var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasV
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useRef } from 'react';
-import { components } from '@atlaskit/select';
+import { components } from '@atlaskit/react-select/components';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { Popover } from '@atlaskit/top-layer/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -55,9 +55,7 @@ var FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
     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;
   var popoverRef = useRef(null);
   useAnchorPosition({
@@ -83,9 +81,7 @@ var FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
     ,
     mode: "manual",
     placement: popupPlacement,
-    shouldAnimate: true
-    // @ts-ignore -- testId is a custom prop passed through selectProps
-    ,
+    shouldAnimate: true,
     testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
   }, /*#__PURE__*/React.createElement(PopoverSurface, 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

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

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 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 { components } from '@atlaskit/select';
+import { components } from '@atlaskit/react-select/components';
 import FixedLayer from '../internal/fixed-layer';
 
 /**
@@ -35,9 +35,7 @@ var FixedLayerMenu = function FixedLayerMenu(_ref) {
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(FixedLayer, {
-    inputValue: selectProps.inputValue
-    //@ts-ignore react-select unsupported props
-    ,
+    inputValue: selectProps.inputValue,
     containerRef: selectProps.fixedLayerRef,
     content: /*#__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
@@ -62,9 +60,7 @@ var FixedLayerMenu = function FixedLayerMenu(_ref) {
       selectOption: selectOption,
       selectProps: selectProps,
       setValue: setValue
-    }), children)
-    //@ts-ignore react-select unsupported props
-    ,
+    }), children),
     testId: selectProps.testId
   });
 };

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

@@ -11,8 +11,10 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { sizes } from '@atlaskit/icon';
-import { Manager, Popper, Reference } from '@atlaskit/popper';
+import { sizes } from '@atlaskit/icon/constants/default';
+import { Manager } from '@atlaskit/popper/manager';
+import { Popper } from '@atlaskit/popper/main';
+import { Reference } from '@atlaskit/popper/reference';
 var styles = {
   root: "_bfhk1j28 _kqswstnw _152tze3t",
   popperStyles: "_1pbyowjs"

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

@@ -4,7 +4,7 @@ var _excluded = ["showClearIndicator"];
 import "./indicators-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { components } from '@atlaskit/select';
+import { components } from '@atlaskit/react-select/components';
 var styles = {
   calendarButtonInclusionStyles: "_ahbqxy5q",
   calendarButtonOnlyInclusionStyles: "_ahbq1ejb"

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';
-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'
-});
-
+import Calendar from '@atlaskit/calendar/calendar';
 /**
  * @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/esm/internal/menu.js

@@ -7,9 +7,9 @@ import { Fragment } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { isValid, parseISO } from 'date-fns';
-import Calendar from '@atlaskit/calendar';
+import Calendar from '@atlaskit/calendar/calendar';
 import { Layering } from '@atlaskit/layering/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import FixedLayer from '../internal/fixed-layer';
 
 /**

package/dist/esm/internal/single-value.js

@@ -2,14 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles", "getValue", "hasValue", "isDisabled", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue"];
 import React from 'react';
-import { components } from '@atlaskit/select';
-
+import { components } from '@atlaskit/react-select/components';
 /**
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
  */
 export var makeSingleValue =
 // TODO: Make ID required
+
 function makeSingleValue(_ref) {
   var id = _ref.id,
     lang = _ref.lang;

package/dist/types/components/date-picker.d.ts

@@ -1,4 +1,4 @@
-import { type DropdownIndicatorProps, type OptionType } from '@atlaskit/select';
+import type { DropdownIndicatorProps, OptionType } from '@atlaskit/select/types';
 import { type DatePickerBaseProps, type DateTimePickerSelectProps } from '../types';
 export type DatePickerProps = DatePickerBaseProps & {
     icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;

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

@@ -1,4 +1,4 @@
-import { type MenuProps, type OptionType } from '@atlaskit/select';
+import type { MenuProps, OptionType } from '@atlaskit/select/types';
 /**
  * Top-layer version of the fixed layer menu used in the time picker.
  *

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

@@ -1,4 +1,4 @@
-import { type MenuProps, type OptionType } from '@atlaskit/select';
+import type { MenuProps, OptionType } from '@atlaskit/select/types';
 /**
  * This is the fixed layer menu used in the time picker.
  */