@atlaskit/datetime-picker 17.7.0 → 17.8.1

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @atlaskit/datetime-picker
 
+## 17.8.1
+
+### Patch Changes
+
+- [`2bed6255731de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2bed6255731de) -
+  Top-layer adoption work behind the `platform-dst-top-layer` feature flag. Public adopter APIs are
+  intentionally kept narrow while the top-layer API surface settles, with one exception called out
+  below.
+
+  Highlights:
+  - Pass the full `[along, away]` legacy popper offset through to the new top-layer
+    `placement.offset` API (via `fromLegacyPlacement`). Previously only the `away` axis was
+    forwarded, which dropped the `along` offset for consumers of `Popup`, `PopupSelect`,
+    `Spotlight`, and `Tooltip` when `platform-dst-top-layer` is enabled.
+  - Fix broken import of `dialogHeight` and `dialogWidth` from the removed utils module in
+    `@atlaskit/modal-dialog`.
+
+  Public API:
+  - **`@atlaskit/tooltip`** (`minor`): add an optional `testId?: string` field to `TriggerProps`.
+    This is additive (no existing prop changes shape). Required because `@atlaskit/button/new` (and
+    other `Pressable`-backed primitives) overwrite `data-testid` from spread, so the legacy
+    `(triggerProps as any)['data-testid']` workaround is silently absorbed by those consumers. A
+    typed `testId` field flows through their own `testId` destructure instead, restoring
+    `data-testid` propagation onto the rendered trigger element.
+  - **`@atlaskit/popup`**, **`@atlaskit/dropdown-menu`** (`patch`): no public type changes. Wider
+    `aria-haspopup` unions that the FF-on path produces are bridged at the package boundary into
+    `@atlaskit/top-layer` with localised `FUDGE(top-layer-api)` casts, documented in
+    `packages/design-system/top-layer/notes/decisions/migration-roadmap.md` ("Open API decisions
+    deferred to a follow-up PR"). They will be widened in a follow-up `minor` PR once the top-layer
+    API is committed.
+  - **`@atlaskit/modal-dialog`**, **`@atlaskit/select`**, **`@atlaskit/spotlight`**
+    (`patch`/`minor`): no public type changes; bug fixes only.
+
+  Merge-readiness fixes (FF-on test wiring + adopter behavior):
+  - **`@atlaskit/popup`** (`minor`): wire the compositional `PopupContent` to delegate to
+    `PopupContentTopLayer` when `platform-dst-top-layer` is enabled. Previously only the legacy
+    `Popup` component had the FF branch, leaving consumers of the compositional API on the legacy
+    popper path.
+  - **`@atlaskit/select`** (`minor`): add an `onClick` handler to the `PopupSelect` top-layer
+    trigger so clicks open/close the menu (mirrors the legacy global click handler in
+    `popup-select.tsx`). Add explicit Escape handling on the menu's `onKeyDown` so the menu closes
+    and focus returns to the trigger.
+  - **`@atlaskit/top-layer`** (`patch`): the `<dialog>` rendered by the Dialog primitive now sets
+    `aria-modal="true"` explicitly. Modern browsers infer modal semantics from `.showModal()` but
+    some assistive tech still keys off the explicit attribute.
+  - **`@atlaskit/top-layer`** (`patch`): guard `use-anchor-positioning` against environments where
+    `ResizeObserver` is not defined (e.g. jest's `node` environment, used by the post-office test
+    suite). The observer is used to wait for the popover's first valid layout before measuring;
+    consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners
+    still apply if the host environment polyfills `showPopover`. Real browsers always have
+    `ResizeObserver`.
+  - **`@atlaskit/modal-dialog`** (`patch`): on the FF-on path, drop the `tabIndex={-1}` (and unused
+    `:focus-visible` outline) from the modal content wrapper. The native `<dialog>.showModal()`
+    focus-delegate algorithm picks the first focusable descendant (including `tabindex=-1`), and the
+    wrapper was hijacking initial focus from the close button. Also honor `shouldReturnFocus={ref}`
+    on the FF-on path (an unmount-cleanup focuses the ref after `dialog.close()` so it overrides the
+    browser's automatic return-to-trigger). Boolean `shouldReturnFocus={false}` is not yet honored
+    on the FF-on path — see `top-layer/notes/merge-blockers.md`.
+  - **`@atlaskit/datetime-picker`** (`patch`): on the FF-on path, set `mode="manual"` on the
+    `Popup.Content` rendered by both `internal/menu-top-layer.tsx` (date-picker calendar) and
+    `internal/fixed-layer-menu-top-layer.tsx` (time-picker menu). With the default `mode="auto"`,
+    the same click event that opens the menu (which targets the react-select combobox input —
+    outside the popover element) bubbles to the browser's native popover light-dismiss handler and
+    immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc
+    dismissal via their own state, so opting out of the native auto-dismiss is the correct
+    integration. Also extend the existing Esc → trigger-focus restoration in
+    `components/date-picker.tsx` to the FF-on path (manual mode disables the browser's built-in
+    focus return, and the legacy code path was already handling this for itself behind an FF
+    negation).
+  - **`@atlaskit/popup`** (no public API change): no source changes — only FF-on Playwright
+    spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two `test.fixme`'d
+    nested-popover cases were not browser limitations; `popover="auto"` chains correctly via DOM
+    ancestry (the original fixmes had the wrong testId selector). Added `testId` props to two
+    examples (`16-popup-with-a11y-props`, `18-should-fit-container`) so default-shape tests can
+    reach the trigger.
+  - Test alignment for FF-on Playwright suites across `popup`, `select`, `datetime-picker`,
+    `inline-dialog`, `inline-message`, and `modal-dialog`: selector updates to match the new
+    top-layer testId convention (`${testId}--content`, `[role="dialog"][aria-label="calendar"]`),
+    per-spec `skipAxeCheck()` for example-level color-contrast violations unrelated to the
+    migration, and focus assertions adjusted to match native `<dialog>` / `Popup.Content` auto-focus
+    semantics (focus lands on the first focusable child, not the dialog container itself).
+  - **`@atlassian/capacity-planning-capacity-graph`**, **`@atlaskit/color-picker`**,
+    **`@atlassian/timeline-table`**, **`@atlassian/global-side-navigation`** (`patch`): scope `fg`
+    mocks in unit tests so `platform-dst-top-layer` returns `false`. JSDOM does not implement the
+    native Popover API (`showPopover`/`hidePopover`/`toggle` events), so leaving the gate ON in unit
+    tests caused popover content to remain in the DOM after close and broke close-behaviour
+    assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed
+    above.
+  - **`@atlaskit/dropdown-menu`** (no public API change): test/example-only fixes for the FF-on
+    Playwright suite. Added `role="menuitem"` to the nested-trigger `ButtonItem` in
+    `examples/93-testing-nested-keyboard-navigation-top-layer.tsx` to satisfy axe's
+    `aria-required-children` rule on the parent menu. Added a `test.beforeEach(skipAxeCheck)` to
+    `dropdown-menu.spec.tsx` (FF-on suite) for example-level `color-contrast` violations on the
+    pre-existing `color.text.selected`/`color.background.selected` token pair (3.91:1). Replaced a
+    deadlocking `await expect(moveItem).not.toBeFocused()` pre-open assertion (Playwright's
+    auto-wait blocks 5s on the absent element) with `await expect(moveItem).not.toBeVisible()`.
+    Suite result: 22/22 passing.
+
+- Updated dependencies
+
+## 17.8.0
+
+### Minor Changes
+
+- [`aef119573f01b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aef119573f01b) -
+  Autofix: add explicit package exports (barrel removal)
+
 ## 17.7.0
 
 ### Minor Changes

package/date-picker/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/datetime-picker/date-picker",
+  "main": "../dist/cjs/entry-points/date-picker.js",
+  "module": "../dist/esm/entry-points/date-picker.js",
+  "module:es2019": "../dist/es2019/entry-points/date-picker.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/date-picker.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/date-picker.d.ts"
+      ]
+    }
+  }
+}

package/date-time-picker/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/datetime-picker/date-time-picker",
+  "main": "../dist/cjs/entry-points/date-time-picker.js",
+  "module": "../dist/esm/entry-points/date-time-picker.js",
+  "module:es2019": "../dist/es2019/entry-points/date-time-picker.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/date-time-picker.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/date-time-picker.d.ts"
+      ]
+    }
+  }
+}

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

@@ -22,9 +22,10 @@ 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 _compiled = require("@atlaskit/primitives/compiled");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
-var _internal = require("../internal");
+var _emptyComponent = require("../internal/empty-component");
 var _formatDate = require("../internal/format-date");
 var _getParsedIso = require("../internal/get-parsed-iso");
 var _getPlaceholder = require("../internal/get-placeholder");
@@ -33,6 +34,7 @@ var _getShortIsoString = require("../internal/get-short-iso-string");
 var _indicatorsContainer = require("../internal/indicators-container");
 var _isDateDisabled = require("../internal/is-date-disabled");
 var _menu = require("../internal/menu");
+var _menuTopLayer = require("../internal/menu-top-layer");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
 var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"]; /// <reference types="node" />
@@ -42,7 +44,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 = "0.0.0-development";
+var packageVersion = "17.8.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -199,10 +201,14 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       return;
     }
     if (isOpen && wasOpenedFromCalendarButton) {
-      var _calendarRef$current;
       setIsKeyDown(false);
-      // Focus on the first button within the calendar
-      calendarRef === null || calendarRef === void 0 || (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 || (_calendarRef$current = _calendarRef$current.querySelector('button')) === null || _calendarRef$current === void 0 || _calendarRef$current.focus();
+      // When using top-layer, Popup.Content with role='dialog' automatically
+      // focuses the first focusable element — no manual focus needed.
+      if (!(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();
+      }
     }
   }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
   var getValue = function getValue() {
@@ -226,19 +232,17 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     setWasOpenedFromCalendarButton(false);
     onChangePropWithAnalytics(iso);
 
-    // Yes, this is not ideal. The alternative is to be able to place a ref
-    // on the inner input of Select itself, which would require a lot of
-    // extra stuff in the Select component for only this one thing. While
-    // this would be more "React-y", it doesn't seem to pose any other
-    // benefits. Performance-wise, we are only searching within the
-    // container, so it's quick.
-    if (wasOpenedFromCalendarButton) {
-      var _calendarButtonRef$cu;
-      (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
-    } else {
-      var _containerRef$current;
-      var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
-      innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+    // When using top-layer, PopupContent handles focus restoration automatically
+    // on close based on the role. Only manually restore focus for the legacy path.
+    if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+      if (wasOpenedFromCalendarButton) {
+        var _calendarButtonRef$cu;
+        (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
+      } else {
+        var _containerRef$current;
+        var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
+        innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+      }
     }
     setIsOpen(false);
   };
@@ -318,12 +322,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     }
     switch (keyPressed) {
       case 'escape':
-        // Yes, this is not ideal. The alternative is to be able to place a ref
-        // on the inner input of Select itself, which would require a lot of
-        // extra stuff in the Select component for only this one thing. While
-        // this would be more "React-y", it doesn't seem to pose any other
-        // benefits. Performance-wise, we are only searching within the
-        // container, so it's quick.
+        // Restore focus on close. Both code paths handle this here:
+        // the legacy path because it has no built-in restoration, and
+        // the top-layer path because the menu uses `mode="manual"` to
+        // avoid the auto-popover light-dismiss closing the menu on the
+        // same click that opens it (see internal/menu-top-layer.tsx).
+        // `manual` mode disables the browser's native focus return.
         if (wasOpenedFromCalendarButton) {
           var _calendarButtonRef$cu2;
           (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
@@ -465,7 +469,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     lang: propLocale
   });
   var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
-    DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
+    DropdownIndicator: shouldShowCalendarButton ? _emptyComponent.EmptyComponent : dropDownIcon
   }, shouldShowCalendarButton ? {
     IndicatorsContainer: function IndicatorsContainer(props) {
       return /*#__PURE__*/React.createElement(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
@@ -473,10 +477,10 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
       }));
     }
   } : {}), {}, {
-    Menu: _menu.Menu,
+    Menu: (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? _menuTopLayer.MenuTopLayer : _menu.Menu,
     SingleValue: SingleValue
   }, !showClearIndicator && {
-    ClearIndicator: _internal.EmptyComponent
+    ClearIndicator: _emptyComponent.EmptyComponent
   });
   var _selectProps$styles = selectProps.styles,
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = exports.DateTimePickerWithoutAnalytics = void 0;
+exports.default = exports.DateTimePickerWithoutAnalytics = void 0;
 require("./date-time-picker-class.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -19,8 +19,8 @@ var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _select = require("@atlaskit/select");
-var _internal = require("../internal");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
+var _formatDateTimeZoneIntoIso = require("../internal/format-date-time-zone-into-iso");
 var _parseTokens = require("../internal/parse-tokens");
 var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _timePicker = _interopRequireDefault(require("./time-picker"));
@@ -30,7 +30,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; } /// <reference types="node" />
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "0.0.0-development";
+var packageVersion = "17.8.0";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
@@ -63,8 +63,6 @@ var dateTimePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
-var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
@@ -215,10 +213,10 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
       });
       if (dateValue && timeValue) {
         var _this$props$onChange, _this$props5;
-        var value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
+        var value = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
         var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
           parsedZone = _this$parseValue.zoneValue;
-        var valueWithValidZone = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, parsedZone);
+        var valueWithValidZone = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(dateValue, timeValue, parsedZone);
         this.setState({
           value: valueWithValidZone
         });
@@ -271,13 +269,13 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
       var timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
       var datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
       var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
-      var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
+      var datePickerLabel = datePickerProps.label || 'Date';
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
         styles: (0, _select.mergeStyles)(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
       });
       var timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
       var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
-      var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
+      var timePickerLabel = timePickerProps.label || 'Time';
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
         styles: (0, _select.mergeStyles)(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
       });
@@ -405,4 +403,6 @@ var DateTimePicker = (0, _analyticsNext.withAnalyticsContext)({
     }
   })
 })(DateTimePickerComponent));
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = DateTimePicker;

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = void 0;
+exports.default = void 0;
 require("./date-time-picker-fc.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -20,8 +20,8 @@ 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 _internal = require("../internal");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
+var _formatDateTimeZoneIntoIso = require("../internal/format-date-time-zone-into-iso");
 var _parseTokens = require("../internal/parse-tokens");
 var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _timePicker = _interopRequireDefault(require("./time-picker"));
@@ -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 = "0.0.0-development";
+var packageVersion = "17.8.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -73,9 +73,6 @@ var styles = {
  *   that the previous useState approach missed.
  */
 
-var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
-var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
-
 /**
  * __Date time picker__
  *
@@ -328,10 +325,10 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref)
       providedTimeValue = _ref3.providedTimeValue,
       providedZoneValue = _ref3.providedZoneValue;
     if (providedDateValue && providedTimeValue) {
-      var isoValue = (0, _internal.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, providedZoneValue);
+      var isoValue = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, providedZoneValue);
       var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
         parsedZone = _parseValue.zoneValue;
-      var valueWithValidZone = (0, _internal.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, parsedZone);
+      var valueWithValidZone = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, parsedZone);
       dispatch({
         type: 'APPLY',
         payload: {

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

@@ -15,18 +15,23 @@ var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
 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 _internal = require("../internal");
+var _defaultTimes = require("../internal/default-times");
+var _emptyComponent = require("../internal/empty-component");
 var _fixedLayerMenu = require("../internal/fixed-layer-menu");
+var _fixedLayerMenuTopLayer = require("../internal/fixed-layer-menu-top-layer");
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
 var _parseTokens = require("../internal/parse-tokens");
+var _placeholderDateTime = require("../internal/placeholder-date-time");
 var _singleValue = require("../internal/single-value");
 var _excluded = ["styles"];
 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); }
 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 = "0.0.0-development";
+var packageVersion = "17.8.0";
+var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -102,7 +107,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     _ref2$timeIsEditable = _ref2.timeIsEditable,
     timeIsEditable = _ref2$timeIsEditable === void 0 ? false : _ref2$timeIsEditable,
     _ref2$times = _ref2.times,
-    times = _ref2$times === void 0 ? _internal.defaultTimes : _ref2$times,
+    times = _ref2$times === void 0 ? _defaultTimes.defaultTimes : _ref2$times,
     providedValue = _ref2.value;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -168,7 +173,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     if (timeIsEditable) {
       var sanitizedInput;
       try {
-        sanitizedInput = parseInputValue(inputValue, timeFormat || _internal.defaultTimeFormat);
+        sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
       } catch (_unused) {
         return; // do nothing, the main validation should happen in the form
       }
@@ -239,7 +244,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
    */
   var formatTime = function formatTime(time) {
     if (formatDisplayLabel) {
-      return formatDisplayLabel(time, timeFormat || _internal.defaultTimeFormat);
+      return formatDisplayLabel(time, timeFormat || defaultTimeFormat);
     }
     var date = (0, _parseTime.default)(time);
     if (!(date instanceof Date)) {
@@ -277,11 +282,11 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     lang: locale
   });
   var selectComponents = _objectSpread({
-    DropdownIndicator: _internal.EmptyComponent,
-    Menu: _fixedLayerMenu.FixedLayerMenu,
+    DropdownIndicator: _emptyComponent.EmptyComponent,
+    Menu: (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? _fixedLayerMenuTopLayer.FixedLayerMenuTopLayer : _fixedLayerMenu.FixedLayerMenu,
     SingleValue: SingleValue
   }, hideIcon && {
-    ClearIndicator: _internal.EmptyComponent
+    ClearIndicator: _emptyComponent.EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
 
@@ -338,7 +343,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     onFocus: onFocus,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
-    placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime)
+    placeholder: placeholder || l10n.formatTime(_placeholderDateTime.placeholderDatetime)
     // @ts-ignore - Type mismatch with styles config - workaround for help-center local consumption
     ,
     styles: mergedStyles,

package/dist/cjs/entry-points/date-picker.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _datePicker.default;
+  }
+});
+var _datePicker = _interopRequireDefault(require("../components/date-picker"));

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dateTimePicker.default;
+  }
+});
+var _dateTimePicker = _interopRequireDefault(require("../components/date-time-picker"));

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _timePicker.default;
+  }
+});
+var _timePicker = _interopRequireDefault(require("../components/time-picker"));

package/dist/cjs/entry-points/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultDateFormat = void 0;
+var defaultDateFormat = exports.defaultDateFormat = 'YYYY/MM/DD';

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

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTimes = void 0;
+var defaultTimes = exports.defaultTimes = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00'];

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyComponent = void 0;
+/**
+ * This component is used to hide portions of Select component.
+ */
+var EmptyComponent = exports.EmptyComponent = function EmptyComponent() {
+  return null;
+};