@atlaskit/datetime-picker 18.3.1 → 18.4.1

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @atlaskit/datetime-picker
 
+## 18.4.1
+
+### Patch Changes
+
+- [`a7e63cfd84876`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a7e63cfd84876) -
+  [ux] When `platform-dst-top-layer` is enabled, Select menus now use the native Popover API to
+  handle Escape and light-dismiss before synchronizing `menuIsOpen` through `onMenuClose`. This
+  ensures Escape dismisses a nested Select menu without also dismissing its containing popup.
+
+  Existing public props keep their behavior. The top-layer `Popover` implementation gains an
+  internal `source` prop for imperative native popover invokers. The public runtime differences
+  behind the feature gate are:
+  - Select no longer calls `preventDefault()` or `stopPropagation()` for Escape on the top-layer
+    path, whether its menu is open or closed. Successive Escape presses can therefore dismiss the
+    Select menu and then its containing native popover.
+  - `onMenuClose` is called from the native popover close lifecycle rather than synchronously during
+    Select's Escape `keydown` handler.
+  - `shouldPreventEscapePropagation` no longer stops Escape propagation while a top-layer menu is
+    open; its legacy-path behavior is unchanged.
+  - Top-layer Escape invokes `onInputChange` with the `menu-close` action once, after native
+    dismissal, instead of the legacy path's two calls.
+  - Controlled Selects must continue updating `menuIsOpen` to `false` in response to `onMenuClose`.
+  - `PopupSelect` delegates Escape dismissal and focus restoration to its native popover. A consumer
+    `onKeyDown` handler can therefore prevent the native dismissal with `preventDefault()`;
+    previously, `PopupSelect` closed before forwarding the event.
+  - DatePicker's top-layer calendar now uses the Select menu portal's native popover instead of
+    creating a nested manual popover.
+  - The internal Popover forwarding API accepts a native `source` element so imperative Select
+    popovers retain their trigger relationship for light-dismiss behavior.
+
+- Updated dependencies
+
+## 18.4.0
+
+### Minor Changes
+
+- [`d82e6f76528ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d82e6f76528ab) -
+  Add direct subpath package exports as part of the linking-platform, search, media, and
+  design-system barrel-removal (de-barrel) migration.
+
+  These packages now expose their individual modules via explicit `package.json` `exports` subpaths
+  so that consumers can import directly from the leaf module (e.g. `@atlaskit/pkg/thing`) instead of
+  the package barrel/index. This adds new public entry points without changing or removing any
+  existing exports, so it is a backwards-compatible additive change.
+
+  No runtime behaviour changes; this is an API-surface (entry-point) addition to support
+  tree-shaking and to unblock removal of the barrel index files.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.3.1
 
 ### Patch Changes

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

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

package/codemods/14.0.0-remove-duplicate-and-unused-props.tsx

@@ -350,7 +350,6 @@ function moveDateTimePickerProps(
 					j.jsxExpressionContainer(
 						// Adding `true` for boolean attributes that have no value;
 						// This definitely exists on here. Can't coerce right. May god have mercy on my soul for this ts-ignore.
-						// @ts-ignore Argument of type 'LiteralKind | JSXElement | JSXExpressionContainer | JSXFragment | null | undefined' is not assignable to parameter of type 'Literal | JSXText | StringLiteral | NumericLiteral | BigIntLiteral | NullLiteral | BooleanLiteral | ... 53 more ... | TSParameterProperty'. Type 'undefined' is not assignable to type 'Literal | JSXText | StringLiteral | NumericLiteral | BigIntLiteral | NullLiteral | BooleanLiteral | ... 53 more ... | TSParameterProperty'.
 						j.objectExpression([j.property('init', j.identifier(propertyName), newValue)]),
 					),
 				);

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

@@ -16,15 +16,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _dateFns = require("date-fns");
-var _analyticsNext = require("@atlaskit/analytics-next");
+var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _new = require("@atlaskit/button/new");
 var _css = require("@atlaskit/css");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
-var _locale = require("@atlaskit/locale");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _localizationProvider = require("@atlaskit/locale/localization-provider");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _select = _interopRequireWildcard(require("@atlaskit/select"));
+var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
+var _styles = require("@atlaskit/react-select/styles");
 var _emptyComponent = require("../internal/empty-component");
 var _formatDate = require("../internal/format-date");
 var _getParsedIso = require("../internal/get-parsed-iso");
@@ -44,7 +45,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.3.0";
+var packageVersion = "18.4.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -71,6 +72,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var containerRef = (0, _react.useRef)(null);
   var calendarRef = (0, _react.useRef)(null);
   var calendarButtonRef = (0, _react.useRef)(null);
+  var isPointerInteractionRef = (0, _react.useRef)(false);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
@@ -159,7 +161,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
     calendarValue = _useState10[0],
     setCalendarValue = _useState10[1];
-  var _useState11 = (0, _react.useState)((0, _locale.createLocalizationProvider)(propLocale)),
+  var _useState11 = (0, _react.useState)((0, _localizationProvider.createLocalizationProvider)(propLocale)),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
     l10n = _useState12[0],
     setL10n = _useState12[1];
@@ -186,29 +188,25 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     }, true),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     forceUpdate = _useReducer2[1];
-  var onChangePropWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+  var onChangePropWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
     fn: onChangeProp,
     action: 'selectedDate',
     actionSubject: 'datePicker'
   }, analyticsAttributes));
   if (propLocale !== locale) {
-    setL10n((0, _locale.createLocalizationProvider)(propLocale));
+    setL10n((0, _localizationProvider.createLocalizationProvider)(propLocale));
     setLocale(propLocale);
   }
   (0, _react.useEffect)(function () {
-    // We don't want the focus to move if this is a click event
+    // Only move focus when the dedicated calendar button opened the menu.
     if (!isKeyDown) {
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
+      var _calendarRef$current;
       setIsKeyDown(false);
-      // When using top-layer, Popup.Content with role='dialog' automatically
-      // focuses the first focusable element — no manual focus needed.
-      if (!(0, _platformFeatureFlags.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() {
@@ -234,7 +232,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
 
     // When using top-layer, PopupContent handles focus restoration automatically
     // on close based on the role. Only manually restore focus for the legacy path.
-    if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    if (!(0, _fg.fg)('platform-dst-top-layer')) {
       if (wasOpenedFromCalendarButton) {
         var _calendarButtonRef$cu;
         (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
@@ -255,6 +253,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var onContainerBlur = function onContainerBlur(event) {
     var _containerRef$current2;
     var newlyFocusedElement = event.relatedTarget;
+    isPointerInteractionRef.current = false;
     if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
       setIsOpen(false);
       setShouldSetFocusOnCurrentDay(false);
@@ -285,8 +284,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       // Don't open menu if focussing after the user has clicked clear
       setClearingFromIcon(false);
     } else {
-      // Don't open when focused into via keyboard if the calendar button is present
-      setIsOpen(!shouldShowCalendarButton);
+      // Opening an auto popover during pointer focus allows the matching pointerup
+      // to immediately light-dismiss it. Let the subsequent click open it instead.
+      if (!(0, _fg.fg)('platform-dst-top-layer') || !isPointerInteractionRef.current) {
+        // Don't open when focused into via keyboard if the calendar button is present
+        setIsOpen(!shouldShowCalendarButton);
+      }
       setCalendarValue(value);
       setIsFocused(true);
       setWasOpenedFromCalendarButton(false);
@@ -322,12 +325,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     }
     switch (keyPressed) {
       case 'escape':
-        // Restore focus on close. Both code paths handle this here:
-        // the legacy path because it has no built-in restoration, and
-        // the top-layer path because the menu uses `mode="manual"` to
-        // avoid the auto-popover light-dismiss closing the menu on the
-        // same click that opens it (see internal/menu-top-layer.tsx).
-        // `manual` mode disables the browser's native focus return.
+        // Restore focus because it may have moved from the input into the calendar.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
@@ -405,6 +403,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
 
   // This event handler is triggered from both keydown and click. It's weird.
   var onCalendarButtonClick = function onCalendarButtonClick(e) {
+    if (!getIsOpen() && (0, _fg.fg)('platform-dst-top-layer')) {
+      setIsKeyDown(true);
+    }
     setIsOpen(function (isOpen) {
       if (isOpen) {
         var _props$selectProps2, _props$selectProps2$o;
@@ -477,7 +478,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       }));
     }
   } : {}), {}, {
-    Menu: (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? _menuTopLayer.MenuTopLayer : _menu.Menu,
+    Menu: (0, _fg.fg)('platform-dst-top-layer') ? _menuTopLayer.MenuTopLayer : _menu.Menu,
     SingleValue: SingleValue
   }, !showClearIndicator && {
     ClearIndicator: _emptyComponent.EmptyComponent
@@ -508,9 +509,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
      */
     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 = (0, _select.mergeStyles)(selectStyles, {
+  var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
     control: function control(base) {
       return _objectSpread(_objectSpread({}, base), disabledStyle);
     },
@@ -537,10 +536,19 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     "data-testid": testId && "".concat(testId, "--container"),
     onBlur: onContainerBlur,
+    onClickCapture: function onClickCapture() {
+      isPointerInteractionRef.current = false;
+    },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
     onKeyDown: onInputKeyDown,
+    onPointerCancelCapture: function onPointerCancelCapture() {
+      isPointerInteractionRef.current = false;
+    },
+    onPointerDownCapture: function onPointerDownCapture() {
+      isPointerInteractionRef.current = true;
+    },
     ref: getContainerRef
     // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
     ,
@@ -551,7 +559,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     type: "hidden",
     value: getterValue,
     "data-testid": testId && "".concat(testId, "--input")
-  }), /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
+  }), /*#__PURE__*/React.createElement(_default2.default, (0, _extends2.default)({
     appearance: appearance,
     "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
     label: label || undefined,
@@ -593,7 +601,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     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/cjs/components/date-time-picker.js

@@ -15,11 +15,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _dateFns = require("date-fns");
-var _analyticsNext = require("@atlaskit/analytics-next");
+var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _new = require("@atlaskit/button/new");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _compiled = require("@atlaskit/primitives/compiled");
-var _select = require("@atlaskit/select");
+var _styles = require("@atlaskit/react-select/styles");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
 var _formatDateTimeZoneIntoIso = require("../internal/format-date-time-zone-into-iso");
 var _parseTokens = require("../internal/parse-tokens");
@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.3.0";
+var packageVersion = "18.4.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -339,7 +339,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       timePickerPropsWithSelectProps.onChange('');
     }
   };
-  var onChangePropWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+  var onChangePropWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
     fn: onChangeProp,
     action: 'selectedDate',
     actionSubject: 'dateTimePicker'
@@ -392,14 +392,14 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
   var datePickerLabel = datePickerProps.label || 'Date';
   var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-    styles: (0, _select.mergeStyles)(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+    styles: (0, _styles.mergeStyles)(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
   });
   var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
     timePickerProps = (0, _objectWithoutProperties2.default)(timePickerPropsWithSelectProps, _excluded2);
   var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
   var timePickerLabel = timePickerProps.label || 'Time';
   var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-    styles: (0, _select.mergeStyles)(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
+    styles: (0, _styles.mergeStyles)(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
   });
 
   // Render DateTimePicker's IconContainer when a value has been filled

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

@@ -12,11 +12,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _dateFns = require("date-fns");
-var _analyticsNext = require("@atlaskit/analytics-next");
+var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _locale = require("@atlaskit/locale");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _select = _interopRequireWildcard(require("@atlaskit/select"));
+var _localizationProvider = require("@atlaskit/locale/localization-provider");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
+var _creatableSelect = _interopRequireDefault(require("@atlaskit/select/creatable-select"));
+var _styles = require("@atlaskit/react-select/styles");
 var _defaultTimes = require("../internal/default-times");
 var _emptyComponent = require("../internal/empty-component");
 var _fixedLayerMenu = require("../internal/fixed-layer-menu");
@@ -30,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.3.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 */
@@ -142,7 +144,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     }, 0),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     forceUpdate = _useReducer2[1];
-  var providedOnChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+  var providedOnChangeWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
     fn: providedOnChange,
     action: 'selectedTime'
   }, analyticsAttributes));
@@ -229,11 +231,11 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
   };
   var ICON_PADDING = 2;
   var GRID_SIZE = 8;
-  var l10n = (0, _locale.createLocalizationProvider)(locale);
+  var l10n = (0, _localizationProvider.createLocalizationProvider)(locale);
   var _selectProps$styles = selectProps.styles,
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
     otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded);
-  var SelectComponent = timeIsEditable ? _select.CreatableSelect : _select.default;
+  var SelectComponent = timeIsEditable ? _creatableSelect.default : _default2.default;
 
   /**
    * There are multiple props that can change how the time is formatted.
@@ -283,15 +285,13 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
   });
   var selectComponents = _objectSpread({
     DropdownIndicator: _emptyComponent.EmptyComponent,
-    Menu: (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? _fixedLayerMenuTopLayer.FixedLayerMenuTopLayer : _fixedLayerMenu.FixedLayerMenu,
+    Menu: (0, _fg.fg)('platform-dst-top-layer') ? _fixedLayerMenuTopLayer.FixedLayerMenuTopLayer : _fixedLayerMenu.FixedLayerMenu,
     SingleValue: SingleValue
   }, hideIcon && {
     ClearIndicator: _emptyComponent.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 = (0, _select.mergeStyles)(selectStyles, {
+  var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
     control: function control(base) {
       return _objectSpread({}, base);
     },
@@ -323,9 +323,7 @@ var TimePicker = /*#__PURE__*/(0, _react.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,
@@ -335,22 +333,17 @@ var TimePicker = /*#__PURE__*/(0, _react.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.placeholderDatetime)
-    // @ts-ignore - Type mismatch with styles config - workaround for help-center local consumption
-    ,
+    placeholder: placeholder || l10n.formatTime(_placeholderDateTime.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/cjs/internal/date-time-picker-container.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 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 isInvalidBorderStyles = null;
 var isFocusedBorderStyles = null;
@@ -44,6 +44,6 @@ var DateTimePickerContainer = exports.DateTimePickerContainer = /*#__PURE__*/(0,
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     "data-testid": testId,
     ref: ref,
-    className: (0, _runtime.ax)(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
+    className: (0, _runtime.ax)(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", (0, _fg.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

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

@@ -12,7 +12,7 @@ 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 _components = require("@atlaskit/react-select/components");
 var _placementMap = require("@atlaskit/top-layer/placement-map");
 var _popover = require("@atlaskit/top-layer/popover");
 var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
@@ -63,9 +63,7 @@ var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLaye
     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;
   var popoverRef = (0, _react.useRef)(null);
   (0, _useAnchorPosition.useAnchorPosition)({
@@ -91,11 +89,9 @@ var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLaye
     ,
     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.PopoverSurface, null, /*#__PURE__*/React.createElement(_select.components.Menu, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement(_components.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,

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

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("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 _components = require("@atlaskit/react-select/components");
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 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); }
@@ -43,11 +43,9 @@ var FixedLayerMenu = exports.FixedLayerMenu = function FixedLayerMenu(_ref) {
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_fixedLayer.default, {
-    inputValue: selectProps.inputValue
-    //@ts-ignore react-select unsupported props
-    ,
+    inputValue: selectProps.inputValue,
     containerRef: selectProps.fixedLayerRef,
-    content: /*#__PURE__*/React.createElement(_select.components.Menu, (0, _extends2.default)({}, rest, {
+    content: /*#__PURE__*/React.createElement(_components.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,
@@ -70,9 +68,7 @@ var FixedLayerMenu = exports.FixedLayerMenu = function FixedLayerMenu(_ref) {
       selectOption: selectOption,
       selectProps: selectProps,
       setValue: setValue
-    }), children)
-    //@ts-ignore react-select unsupported props
-    ,
+    }), children),
     testId: selectProps.testId
   });
 };