@atlaskit/datetime-picker 18.3.1 → 18.4.1

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

@@ -16,8 +16,10 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _icon = require("@atlaskit/icon");
-var _popper = require("@atlaskit/popper");
+var _default = require("@atlaskit/icon/constants/default");
+var _manager = require("@atlaskit/popper/manager");
+var _main = require("@atlaskit/popper/main");
+var _reference = require("@atlaskit/popper/reference");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var styles = {
@@ -65,14 +67,14 @@ var FixedLayer = exports.default = /*#__PURE__*/function (_React$Component) {
       var divStyles = {
         height: containerRef.getBoundingClientRect().height,
         // Don't block the clear button
-        width: containerRef.getBoundingClientRect().width - parseInt(_icon.sizes.small.slice(0, -2)) - 8
+        width: containerRef.getBoundingClientRect().width - parseInt(_default.sizes.small.slice(0, -2)) - 8
       };
       return (
         /*#__PURE__*/
         /* Need to wrap layer in a fixed position div so that it will render its content as fixed
          * We need to set the intial top value to where the container is and zIndex so that it still
          * applies since we're creating a new stacking context. */
-        _react.default.createElement(_popper.Manager, null, /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref) {
+        _react.default.createElement(_manager.Manager, null, /*#__PURE__*/_react.default.createElement(_reference.Reference, null, function (_ref) {
           var ref = _ref.ref;
           return /*#__PURE__*/_react.default.createElement("div", {
             ref: ref,
@@ -80,7 +82,7 @@ var FixedLayer = exports.default = /*#__PURE__*/function (_React$Component) {
             style: divStyles,
             className: (0, _runtime.ax)([styles.root])
           });
-        }), /*#__PURE__*/_react.default.createElement(_popper.Popper, null, function (_ref2) {
+        }), /*#__PURE__*/_react.default.createElement(_main.Popper, null, function (_ref2) {
           var ref = _ref2.ref,
             style = _ref2.style,
             update = _ref2.update;

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

@@ -11,7 +11,7 @@ require("./indicators-container.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _select = require("@atlaskit/select");
+var _components = require("@atlaskit/react-select/components");
 var _excluded = ["showClearIndicator"];
 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 styles = {
@@ -25,5 +25,5 @@ var IndicatorsContainer = exports.IndicatorsContainer = function IndicatorsConta
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([showClearIndicator ? styles.calendarButtonInclusionStyles : styles.calendarButtonOnlyInclusionStyles])
-  }, /*#__PURE__*/React.createElement(_select.components.IndicatorsContainer, rest));
+  }, /*#__PURE__*/React.createElement(_components.components.IndicatorsContainer, rest));
 };

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

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

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

@@ -7,25 +7,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuTopLayer = void 0;
+require("./menu-top-layer.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _dateFns = require("date-fns");
-var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
-var _placementMap = require("@atlaskit/top-layer/placement-map");
-var _popover = require("@atlaskit/top-layer/popover");
-var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
-var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
+var _calendar = _interopRequireDefault(require("@atlaskit/calendar/calendar"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * Bottom-start placement: calendar appears below and aligned to the
- * start edge of the trigger (the select input).
- */
-var popupPlacement = (0, _placementMap.fromLegacyPlacement)({
-  legacy: 'bottom-start'
-});
-
 /**
  * @param isos A series of ISO dates.
  * @returns The last valid date within the array of ISO strings.
@@ -40,19 +29,19 @@ function getValidDate(isos) {
     } : acc;
   }, {});
 }
+var styles = {
+  root: "_2rko1mok _1bsb1ris _bfhk1bhr _16qs130s _1pfhu2gc _6rthu2gc"
+};
 
 /**
  * Top-layer version of the date picker menu.
  *
- * Uses `Popover` + `useAnchorPosition` so the calendar renders in the
- * browser's top layer via the native Popover API and is positioned via
- * CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
- * and portal-based layering.
+ * The surrounding react-select menu portal owns the native popover and
+ * positioning. This component only supplies the calendar dialog content.
  *
  * Gated behind the `platform-dst-top-layer` feature flag.
  */
 var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
-  var _selectProps$calendar, _selectProps$calendar2;
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   var calendarValue = selectProps.calendarValue,
@@ -62,20 +51,6 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
     day = _getValidDate.day,
     month = _getValidDate.month,
     year = _getValidDate.year;
-
-  // The select's container element is the anchor for the popup.
-  var triggerRef = (0, _react.useRef)((_selectProps$calendar = selectProps.calendarContainerRef) !== null && _selectProps$calendar !== void 0 ? _selectProps$calendar : null);
-  triggerRef.current = (_selectProps$calendar2 = selectProps.calendarContainerRef) !== null && _selectProps$calendar2 !== void 0 ? _selectProps$calendar2 : null;
-  var popoverRef = (0, _react.useRef)(null);
-  (0, _useAnchorPosition.useAnchorPosition)({
-    anchorRef: triggerRef,
-    popoverRef: popoverRef,
-    placement: popupPlacement,
-    // The Popover is rendered with `isOpen` always true while this
-    // component is mounted (react-select conditionally mounts/unmounts
-    // the menu), so positioning is always active.
-    isOpen: true
-  });
   var onMenuMouseDown = function onMenuMouseDown(event) {
     if (event.button !== 0) {
       return;
@@ -84,25 +59,10 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
     event.preventDefault();
   };
   var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : _react.Fragment;
-  return /*#__PURE__*/React.createElement(_popover.Popover, {
-    ref: popoverRef,
-    role: "dialog",
-    label: "calendar",
-    isOpen: true
-    // `mode="manual"` opts out of native popover light-dismiss.
-    // react-select / DateTimePicker already own outside-click and
-    // Esc handling. Without this, the same click that opens the
-    // menu (which targets the select input outside the popover)
-    // also bubbles to the browser's auto-dismiss handler and
-    // immediately closes the popover.
-    ,
-    mode: "manual",
-    placement: popupPlacement,
-    shouldAnimate: true,
-    testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
-  }, /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+    onMouseDown: onMenuMouseDown,
     role: "presentation",
-    onMouseDown: onMenuMouseDown
+    className: (0, _runtime.ax)([styles.root])
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
     day: day,
     month: month,
@@ -121,5 +81,5 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
     weekStartDay: selectProps.calendarWeekStartDay
-  })))));
+  })));
 };

package/dist/cjs/internal/menu.js

@@ -13,9 +13,9 @@ 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 _calendar = _interopRequireDefault(require("@atlaskit/calendar/calendar"));
 var _layering = require("@atlaskit/layering/layering");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 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); }
 // oxlint-disable-next-line @atlassian/no-restricted-imports
@@ -64,7 +64,7 @@ var Menu = exports.Menu = function Menu(_ref) {
     containerRef: selectProps.calendarContainerRef,
     content: /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
       onMouseDown: onMenuMouseDown,
-      className: (0, _runtime.ax)(["_2rko12b0 _1reo15vq _18m915vq _1pbyowjs _bfhk1bhr _16qs130s", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1mok"])
+      className: (0, _runtime.ax)(["_2rko12b0 _1reo15vq _18m915vq _1pbyowjs _bfhk1bhr _16qs130s", (0, _fg.fg)('platform-dst-shape-theme-default') && "_2rko1mok"])
     }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
       day: day,
       month: month,

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

@@ -8,7 +8,7 @@ exports.makeSingleValue = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _select = require("@atlaskit/select");
+var _components = require("@atlaskit/react-select/components");
 var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles", "getValue", "hasValue", "isDisabled", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue"];
 /**
  * This creates a functional component that `react-select` will use to make the
@@ -16,6 +16,7 @@ var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles
  */
 var makeSingleValue = exports.makeSingleValue =
 // TODO: Make ID required
+
 function makeSingleValue(_ref) {
   var id = _ref.id,
     lang = _ref.lang;
@@ -36,7 +37,7 @@ function makeSingleValue(_ref) {
       selectProps = _ref2.selectProps,
       setValue = _ref2.setValue,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_select.components.SingleValue, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement(_components.components.SingleValue, (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,

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

@@ -9,15 +9,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';
@@ -31,7 +32,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.3.0";
+const packageVersion = "18.4.0";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -58,6 +59,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   const containerRef = useRef(null);
   const calendarRef = useRef(null);
   const calendarButtonRef = useRef(null);
+  const isPointerInteractionRef = useRef(false);
   const {
     appearance = 'default',
     autoFocus = false,
@@ -125,19 +127,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     setLocale(propLocale);
   }
   useEffect(() => {
-    // We don't want the focus to move if this is a click event
+    // Only move focus when the dedicated calendar button opened the menu.
     if (!isKeyDown) {
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
+      var _calendarRef$current, _calendarRef$current$;
       setIsKeyDown(false);
-      // When using top-layer, Popup.Content with role='dialog' automatically
-      // focuses the first focusable element — no manual focus needed.
-      if (!fg('platform-dst-top-layer')) {
-        var _calendarRef$current, _calendarRef$current$;
-        // Focus on the first button within the calendar
-        calendarRef === null || calendarRef === void 0 ? void 0 : (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : (_calendarRef$current$ = _calendarRef$current.querySelector('button')) === null || _calendarRef$current$ === void 0 ? void 0 : _calendarRef$current$.focus();
-      }
+      // Focus on the first button within the calendar
+      calendarRef === null || calendarRef === void 0 ? void 0 : (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : (_calendarRef$current$ = _calendarRef$current.querySelector('button')) === null || _calendarRef$current$ === void 0 ? void 0 : _calendarRef$current$.focus();
     }
   }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
   const getValue = () => propValue !== null && propValue !== void 0 ? propValue : value;
@@ -182,6 +180,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   const onContainerBlur = event => {
     var _containerRef$current2;
     const newlyFocusedElement = event.relatedTarget;
+    isPointerInteractionRef.current = false;
     if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
@@ -212,8 +211,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
       // Don't open menu if focussing after the user has clicked clear
       setClearingFromIcon(false);
     } else {
-      // Don't open when focused into via keyboard if the calendar button is present
-      setIsOpen(!shouldShowCalendarButton);
+      // Opening an auto popover during pointer focus allows the matching pointerup
+      // to immediately light-dismiss it. Let the subsequent click open it instead.
+      if (!fg('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+        // Don't open when focused into via keyboard if the calendar button is present
+        setIsOpen(!shouldShowCalendarButton);
+      }
       setCalendarValue(value);
       setIsFocused(true);
       setWasOpenedFromCalendarButton(false);
@@ -249,12 +252,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     }
     switch (keyPressed) {
       case 'escape':
-        // Restore focus on close. Both code paths handle this here:
-        // the legacy path because it has no built-in restoration, and
-        // the top-layer path because the menu uses `mode="manual"` to
-        // avoid the auto-popover light-dismiss closing the menu on the
-        // same click that opens it (see internal/menu-top-layer.tsx).
-        // `manual` mode disables the browser's native focus return.
+        // Restore focus because it may have moved from the input into the calendar.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 ? void 0 : _calendarButtonRef$cu2.focus();
@@ -332,6 +330,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
 
   // This event handler is triggered from both keydown and click. It's weird.
   const onCalendarButtonClick = e => {
+    if (!getIsOpen() && fg('platform-dst-top-layer')) {
+      setIsKeyDown(true);
+    }
     setIsOpen(isOpen => {
       if (isOpen) {
         var _props$selectProps, _props$selectProps$on;
@@ -436,8 +437,6 @@ const DatePicker = /*#__PURE__*/forwardRef((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>>'.
   const mergedStyles = mergeStyles(selectStyles, {
     control: base => ({
       ...base,
@@ -465,10 +464,19 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId && `${testId}--container`,
     onBlur: onContainerBlur,
+    onClickCapture: () => {
+      isPointerInteractionRef.current = false;
+    },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
     onKeyDown: onInputKeyDown,
+    onPointerCancelCapture: () => {
+      isPointerInteractionRef.current = false;
+    },
+    onPointerDownCapture: () => {
+      isPointerInteractionRef.current = true;
+    },
     ref: getContainerRef
     // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
     ,
@@ -521,7 +529,6 @@ const DatePicker = /*#__PURE__*/forwardRef((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/es2019/components/date-time-picker.js

@@ -9,18 +9,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';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.3.0";
+const packageVersion = "18.4.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -3,11 +3,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';
@@ -17,7 +19,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.3.0";
+const packageVersion = "18.4.0";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -239,8 +241,6 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     })
   };
   const 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>>'.
   const mergedStyles = mergeStyles(selectStyles, {
     control: base => ({
       ...base
@@ -272,9 +272,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     "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,
@@ -284,22 +282,17 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     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/es2019/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';
 const isInvalidBorderStyles = null;
 const isFocusedBorderStyles = null;
 const isFocusedStyles = null;

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

@@ -3,7 +3,7 @@ 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 { 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';
@@ -54,9 +54,7 @@ export const FixedLayerMenuTopLayer = ({
 }) => {
   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;
   const popoverRef = useRef(null);
   useAnchorPosition({
@@ -82,9 +80,7 @@ export const FixedLayerMenuTopLayer = ({
     ,
     mode: "manual",
     placement: popupPlacement,
-    shouldAnimate: true
-    // @ts-ignore -- testId is a custom prop passed through selectProps
-    ,
+    shouldAnimate: true,
     testId: selectProps.testId && `${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/es2019/internal/fixed-layer-menu.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 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';
 
 /**
@@ -33,9 +33,7 @@ export const FixedLayerMenu = ({
   children,
   ...rest
 }) => /*#__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
@@ -60,8 +58,6 @@ export const FixedLayerMenu = ({
     selectOption: selectOption,
     selectProps: selectProps,
     setValue: setValue
-  }), children)
-  //@ts-ignore react-select unsupported props
-  ,
+  }), children),
   testId: selectProps.testId
 });

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

@@ -4,8 +4,10 @@ import "./fixed-layer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
 const styles = {
   root: "_bfhk1j28 _kqswstnw _152tze3t",
   popperStyles: "_1pbyowjs"

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

@@ -2,7 +2,7 @@
 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';
 const styles = {
   calendarButtonInclusionStyles: "_ahbqxy5q",
   calendarButtonOnlyInclusionStyles: "_ahbq1ejb"

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

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