@atlaskit/datetime-picker 17.9.1 → 17.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/components/date-picker.js +1 -1
  3. package/dist/cjs/components/date-time-picker.js +1 -1
  4. package/dist/cjs/components/time-picker.js +1 -1
  5. package/dist/cjs/internal/fixed-layer-menu-top-layer.js +16 -8
  6. package/dist/cjs/internal/menu-top-layer.js +16 -8
  7. package/dist/es2019/components/date-picker.js +1 -1
  8. package/dist/es2019/components/date-time-picker.js +1 -1
  9. package/dist/es2019/components/time-picker.js +1 -1
  10. package/dist/es2019/internal/fixed-layer-menu-top-layer.js +16 -8
  11. package/dist/es2019/internal/menu-top-layer.js +16 -8
  12. package/dist/esm/components/date-picker.js +1 -1
  13. package/dist/esm/components/date-time-picker.js +1 -1
  14. package/dist/esm/components/time-picker.js +1 -1
  15. package/dist/esm/internal/fixed-layer-menu-top-layer.js +16 -8
  16. package/dist/esm/internal/menu-top-layer.js +16 -8
  17. package/dist/types/internal/fixed-layer-menu-top-layer.d.ts +4 -4
  18. package/dist/types/internal/menu-top-layer.d.ts +4 -4
  19. package/dist/types-ts4.5/internal/fixed-layer-menu-top-layer.d.ts +4 -4
  20. package/dist/types-ts4.5/internal/menu-top-layer.d.ts +4 -4
  21. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/datetime-picker
2
2
 
3
+ ## 17.9.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 17.9.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`021a645c6f39a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/021a645c6f39a) -
14
+ Update internal top-layer adopter code paths behind `platform-dst-top-layer`.
15
+ - Updated dependencies
16
+
3
17
  ## 17.9.1
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/components/date-picker.js CHANGED
@@ -44,7 +44,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
44
44
  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; }
45
45
  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; }
46
46
  var packageName = "@atlaskit/datetime-picker";
47
- var packageVersion = "17.9.0";
47
+ var packageVersion = "17.9.2";
48
48
  var styles = {
49
49
  pickerContainerStyle: "_kqswh2mm",
50
50
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
package/dist/cjs/components/date-time-picker.js CHANGED
@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
33
33
  // for typing `process`
34
34
  // oxlint-disable-next-line @atlassian/no-restricted-imports
35
35
  var packageName = "@atlaskit/datetime-picker";
36
- var packageVersion = "17.9.0";
36
+ var packageVersion = "17.9.2";
37
37
  var analyticsAttributes = {
38
38
  componentName: 'dateTimePicker',
39
39
  packageName: packageName,
package/dist/cjs/components/time-picker.js CHANGED
@@ -30,7 +30,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
30
30
  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; }
31
31
  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
32
32
  var packageName = "@atlaskit/datetime-picker";
33
- var packageVersion = "17.9.0";
33
+ var packageVersion = "17.9.2";
34
34
  var defaultTimeFormat = 'h:mma';
35
35
  var menuStyles = {
36
36
  /* Need to remove default absolute positioning as that causes issues with position fixed */
package/dist/cjs/internal/fixed-layer-menu-top-layer.js CHANGED
@@ -15,7 +15,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
15
15
  var _select = require("@atlaskit/select");
16
16
  var _animations = require("@atlaskit/top-layer/animations");
17
17
  var _placementMap = require("@atlaskit/top-layer/placement-map");
18
- var _popup = require("@atlaskit/top-layer/popup");
18
+ var _popover = require("@atlaskit/top-layer/popover");
19
+ var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
20
+ var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
19
21
  var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
20
22
  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); }
21
23
  var animation = (0, _animations.slideAndFade)();
@@ -31,10 +33,10 @@ var popupPlacement = (0, _placementMap.fromLegacyPlacement)({
31
33
  /**
32
34
  * Top-layer version of the fixed layer menu used in the time picker.
33
35
  *
34
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
35
- * time options list renders in the browser's top layer via the native Popover API
36
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
37
- * z-index wars, and portal-based layering.
36
+ * Uses `Popover` + `useAnchorPosition` so the time options list renders
37
+ * in the browser's top layer via the native Popover API and is positioned
38
+ * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
39
+ * and portal-based layering.
38
40
  *
39
41
  * Gated behind the `platform-dst-top-layer` feature flag.
40
42
  */
@@ -68,7 +70,14 @@ var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLaye
68
70
  var triggerRef = (0, _react.useRef)((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
69
71
  // @ts-ignore -- fixedLayerRef is a custom prop passed through selectProps
70
72
  triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
71
- return /*#__PURE__*/React.createElement(_popup.Popup.Content, {
73
+ var popoverRef = (0, _react.useRef)(null);
74
+ (0, _useAnchorPosition.useAnchorPosition)({
75
+ anchorRef: triggerRef,
76
+ popoverRef: popoverRef,
77
+ placement: popupPlacement
78
+ });
79
+ return /*#__PURE__*/React.createElement(_popover.Popover, {
80
+ ref: popoverRef,
72
81
  role: "listbox",
73
82
  isOpen: true
74
83
  // `mode="manual"` opts out of the native popover light-dismiss
@@ -81,12 +90,11 @@ var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLaye
81
90
  ,
82
91
  mode: "manual",
83
92
  placement: popupPlacement,
84
- triggerRef: triggerRef,
85
93
  animate: animation
86
94
  // @ts-ignore -- testId is a custom prop passed through selectProps
87
95
  ,
88
96
  testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
89
- }, /*#__PURE__*/React.createElement(_popup.Popup.Surface, null, /*#__PURE__*/React.createElement(_select.components.Menu, (0, _extends2.default)({}, rest, {
97
+ }, /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement(_select.components.Menu, (0, _extends2.default)({}, rest, {
90
98
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
91
99
  className: className,
92
100
  clearValue: clearValue,
package/dist/cjs/internal/menu-top-layer.js CHANGED
@@ -15,7 +15,9 @@ var _dateFns = require("date-fns");
15
15
  var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
16
16
  var _animations = require("@atlaskit/top-layer/animations");
17
17
  var _placementMap = require("@atlaskit/top-layer/placement-map");
18
- var _popup = require("@atlaskit/top-layer/popup");
18
+ var _popover = require("@atlaskit/top-layer/popover");
19
+ var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
20
+ var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
19
21
  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); }
20
22
  var animation = (0, _animations.slideAndFade)();
21
23
 
@@ -45,10 +47,10 @@ function getValidDate(isos) {
45
47
  /**
46
48
  * Top-layer version of the date picker menu.
47
49
  *
48
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
49
- * calendar renders in the browser's top layer via the native Popover API
50
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
51
- * z-index wars, and portal-based layering.
50
+ * Uses `Popover` + `useAnchorPosition` so the calendar renders in the
51
+ * browser's top layer via the native Popover API and is positioned via
52
+ * CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
53
+ * and portal-based layering.
52
54
  *
53
55
  * Gated behind the `platform-dst-top-layer` feature flag.
54
56
  */
@@ -67,6 +69,12 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
67
69
  // The select's container element is the anchor for the popup.
68
70
  var triggerRef = (0, _react.useRef)((_selectProps$calendar = selectProps.calendarContainerRef) !== null && _selectProps$calendar !== void 0 ? _selectProps$calendar : null);
69
71
  triggerRef.current = (_selectProps$calendar2 = selectProps.calendarContainerRef) !== null && _selectProps$calendar2 !== void 0 ? _selectProps$calendar2 : null;
72
+ var popoverRef = (0, _react.useRef)(null);
73
+ (0, _useAnchorPosition.useAnchorPosition)({
74
+ anchorRef: triggerRef,
75
+ popoverRef: popoverRef,
76
+ placement: popupPlacement
77
+ });
70
78
  var onMenuMouseDown = function onMenuMouseDown(event) {
71
79
  if (event.button !== 0) {
72
80
  return;
@@ -75,7 +83,8 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
75
83
  event.preventDefault();
76
84
  };
77
85
  var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : _react.Fragment;
78
- return /*#__PURE__*/React.createElement(_popup.Popup.Content, {
86
+ return /*#__PURE__*/React.createElement(_popover.Popover, {
87
+ ref: popoverRef,
79
88
  role: "dialog",
80
89
  label: "calendar",
81
90
  isOpen: true
@@ -88,10 +97,9 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
88
97
  ,
89
98
  mode: "manual",
90
99
  placement: popupPlacement,
91
- triggerRef: triggerRef,
92
100
  animate: animation,
93
101
  testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
94
- }, /*#__PURE__*/React.createElement(_popup.Popup.Surface, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
102
+ }, /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
95
103
  role: "presentation",
96
104
  onMouseDown: onMenuMouseDown
97
105
  }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
package/dist/es2019/components/date-picker.js CHANGED
@@ -31,7 +31,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
31
31
  import { parseDate } from '../internal/parse-date';
32
32
  import { makeSingleValue } from '../internal/single-value';
33
33
  const packageName = "@atlaskit/datetime-picker";
34
- const packageVersion = "17.9.0";
34
+ const packageVersion = "17.9.2";
35
35
  const styles = {
36
36
  pickerContainerStyle: "_kqswh2mm",
37
37
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
package/dist/es2019/components/date-time-picker.js CHANGED
@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
20
20
  import DatePicker from './date-picker';
21
21
  import TimePicker from './time-picker';
22
22
  const packageName = "@atlaskit/datetime-picker";
23
- const packageVersion = "17.9.0";
23
+ const packageVersion = "17.9.2";
24
24
  const analyticsAttributes = {
25
25
  componentName: 'dateTimePicker',
26
26
  packageName,
package/dist/es2019/components/time-picker.js CHANGED
@@ -17,7 +17,7 @@ import { convertTokens } from '../internal/parse-tokens';
17
17
  import { placeholderDatetime } from '../internal/placeholder-date-time';
18
18
  import { makeSingleValue } from '../internal/single-value';
19
19
  const packageName = "@atlaskit/datetime-picker";
20
- const packageVersion = "17.9.0";
20
+ const packageVersion = "17.9.2";
21
21
  const defaultTimeFormat = 'h:mma';
22
22
  const menuStyles = {
23
23
  /* Need to remove default absolute positioning as that causes issues with position fixed */
package/dist/es2019/internal/fixed-layer-menu-top-layer.js CHANGED
@@ -6,7 +6,9 @@ import { useRef } from 'react';
6
6
  import { components } from '@atlaskit/select';
7
7
  import { slideAndFade } from '@atlaskit/top-layer/animations';
8
8
  import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
9
- import { Popup } from '@atlaskit/top-layer/popup';
9
+ import { Popover } from '@atlaskit/top-layer/popover';
10
+ import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
11
+ import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
10
12
  const animation = slideAndFade();
11
13
 
12
14
  /**
@@ -20,10 +22,10 @@ const popupPlacement = fromLegacyPlacement({
20
22
  /**
21
23
  * Top-layer version of the fixed layer menu used in the time picker.
22
24
  *
23
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
24
- * time options list renders in the browser's top layer via the native Popover API
25
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
26
- * z-index wars, and portal-based layering.
25
+ * Uses `Popover` + `useAnchorPosition` so the time options list renders
26
+ * in the browser's top layer via the native Popover API and is positioned
27
+ * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
28
+ * and portal-based layering.
27
29
  *
28
30
  * Gated behind the `platform-dst-top-layer` feature flag.
29
31
  */
@@ -58,7 +60,14 @@ export const FixedLayerMenuTopLayer = ({
58
60
  const triggerRef = useRef((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
59
61
  // @ts-ignore -- fixedLayerRef is a custom prop passed through selectProps
60
62
  triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
61
- return /*#__PURE__*/React.createElement(Popup.Content, {
63
+ const popoverRef = useRef(null);
64
+ useAnchorPosition({
65
+ anchorRef: triggerRef,
66
+ popoverRef,
67
+ placement: popupPlacement
68
+ });
69
+ return /*#__PURE__*/React.createElement(Popover, {
70
+ ref: popoverRef,
62
71
  role: "listbox",
63
72
  isOpen: true
64
73
  // `mode="manual"` opts out of the native popover light-dismiss
@@ -71,12 +80,11 @@ export const FixedLayerMenuTopLayer = ({
71
80
  ,
72
81
  mode: "manual",
73
82
  placement: popupPlacement,
74
- triggerRef: triggerRef,
75
83
  animate: animation
76
84
  // @ts-ignore -- testId is a custom prop passed through selectProps
77
85
  ,
78
86
  testId: selectProps.testId && `${selectProps.testId}--popup`
79
- }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
87
+ }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
80
88
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
81
89
  className: className,
82
90
  clearValue: clearValue,
package/dist/es2019/internal/menu-top-layer.js CHANGED
@@ -7,7 +7,9 @@ import { isValid, parseISO } from 'date-fns';
7
7
  import Calendar from '@atlaskit/calendar';
8
8
  import { slideAndFade } from '@atlaskit/top-layer/animations';
9
9
  import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
10
- import { Popup } from '@atlaskit/top-layer/popup';
10
+ import { Popover } from '@atlaskit/top-layer/popover';
11
+ import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
12
+ import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
11
13
  const animation = slideAndFade();
12
14
 
13
15
  /**
@@ -36,10 +38,10 @@ function getValidDate(isos) {
36
38
  /**
37
39
  * Top-layer version of the date picker menu.
38
40
  *
39
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
40
- * calendar renders in the browser's top layer via the native Popover API
41
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
42
- * z-index wars, and portal-based layering.
41
+ * Uses `Popover` + `useAnchorPosition` so the calendar renders in the
42
+ * browser's top layer via the native Popover API and is positioned via
43
+ * CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
44
+ * and portal-based layering.
43
45
  *
44
46
  * Gated behind the `platform-dst-top-layer` feature flag.
45
47
  */
@@ -62,6 +64,12 @@ export const MenuTopLayer = ({
62
64
  // The select's container element is the anchor for the popup.
63
65
  const triggerRef = useRef((_selectProps$calendar = selectProps.calendarContainerRef) !== null && _selectProps$calendar !== void 0 ? _selectProps$calendar : null);
64
66
  triggerRef.current = (_selectProps$calendar2 = selectProps.calendarContainerRef) !== null && _selectProps$calendar2 !== void 0 ? _selectProps$calendar2 : null;
67
+ const popoverRef = useRef(null);
68
+ useAnchorPosition({
69
+ anchorRef: triggerRef,
70
+ popoverRef,
71
+ placement: popupPlacement
72
+ });
65
73
  const onMenuMouseDown = event => {
66
74
  if (event.button !== 0) {
67
75
  return;
@@ -70,7 +78,8 @@ export const MenuTopLayer = ({
70
78
  event.preventDefault();
71
79
  };
72
80
  const Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
73
- return /*#__PURE__*/React.createElement(Popup.Content, {
81
+ return /*#__PURE__*/React.createElement(Popover, {
82
+ ref: popoverRef,
74
83
  role: "dialog",
75
84
  label: "calendar",
76
85
  isOpen: true
@@ -83,10 +92,9 @@ export const MenuTopLayer = ({
83
92
  ,
84
93
  mode: "manual",
85
94
  placement: popupPlacement,
86
- triggerRef: triggerRef,
87
95
  animate: animation,
88
96
  testId: selectProps.testId && `${selectProps.testId}--popup`
89
- }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
97
+ }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
90
98
  role: "presentation",
91
99
  onMouseDown: onMenuMouseDown
92
100
  }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
package/dist/esm/components/date-picker.js CHANGED
@@ -37,7 +37,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
37
37
  import { parseDate } from '../internal/parse-date';
38
38
  import { makeSingleValue } from '../internal/single-value';
39
39
  var packageName = "@atlaskit/datetime-picker";
40
- var packageVersion = "17.9.0";
40
+ var packageVersion = "17.9.2";
41
41
  var styles = {
42
42
  pickerContainerStyle: "_kqswh2mm",
43
43
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
package/dist/esm/components/date-time-picker.js CHANGED
@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
27
27
  import DatePicker from './date-picker';
28
28
  import TimePicker from './time-picker';
29
29
  var packageName = "@atlaskit/datetime-picker";
30
- var packageVersion = "17.9.0";
30
+ var packageVersion = "17.9.2";
31
31
  var analyticsAttributes = {
32
32
  componentName: 'dateTimePicker',
33
33
  packageName: packageName,
package/dist/esm/components/time-picker.js CHANGED
@@ -23,7 +23,7 @@ import { convertTokens } from '../internal/parse-tokens';
23
23
  import { placeholderDatetime } from '../internal/placeholder-date-time';
24
24
  import { makeSingleValue } from '../internal/single-value';
25
25
  var packageName = "@atlaskit/datetime-picker";
26
- var packageVersion = "17.9.0";
26
+ var packageVersion = "17.9.2";
27
27
  var defaultTimeFormat = 'h:mma';
28
28
  var menuStyles = {
29
29
  /* Need to remove default absolute positioning as that causes issues with position fixed */
package/dist/esm/internal/fixed-layer-menu-top-layer.js CHANGED
@@ -8,7 +8,9 @@ import { useRef } from 'react';
8
8
  import { components } from '@atlaskit/select';
9
9
  import { slideAndFade } from '@atlaskit/top-layer/animations';
10
10
  import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
11
- import { Popup } from '@atlaskit/top-layer/popup';
11
+ import { Popover } from '@atlaskit/top-layer/popover';
12
+ import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
13
+ import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
12
14
  var animation = slideAndFade();
13
15
 
14
16
  /**
@@ -22,10 +24,10 @@ var popupPlacement = fromLegacyPlacement({
22
24
  /**
23
25
  * Top-layer version of the fixed layer menu used in the time picker.
24
26
  *
25
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
26
- * time options list renders in the browser's top layer via the native Popover API
27
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
28
- * z-index wars, and portal-based layering.
27
+ * Uses `Popover` + `useAnchorPosition` so the time options list renders
28
+ * in the browser's top layer via the native Popover API and is positioned
29
+ * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
30
+ * and portal-based layering.
29
31
  *
30
32
  * Gated behind the `platform-dst-top-layer` feature flag.
31
33
  */
@@ -59,7 +61,14 @@ var FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
59
61
  var triggerRef = useRef((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
60
62
  // @ts-ignore -- fixedLayerRef is a custom prop passed through selectProps
61
63
  triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
62
- return /*#__PURE__*/React.createElement(Popup.Content, {
64
+ var popoverRef = useRef(null);
65
+ useAnchorPosition({
66
+ anchorRef: triggerRef,
67
+ popoverRef: popoverRef,
68
+ placement: popupPlacement
69
+ });
70
+ return /*#__PURE__*/React.createElement(Popover, {
71
+ ref: popoverRef,
63
72
  role: "listbox",
64
73
  isOpen: true
65
74
  // `mode="manual"` opts out of the native popover light-dismiss
@@ -72,12 +81,11 @@ var FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
72
81
  ,
73
82
  mode: "manual",
74
83
  placement: popupPlacement,
75
- triggerRef: triggerRef,
76
84
  animate: animation
77
85
  // @ts-ignore -- testId is a custom prop passed through selectProps
78
86
  ,
79
87
  testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
80
- }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
88
+ }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
81
89
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
82
90
  className: className,
83
91
  clearValue: clearValue,
package/dist/esm/internal/menu-top-layer.js CHANGED
@@ -7,7 +7,9 @@ import { isValid, parseISO } from 'date-fns';
7
7
  import Calendar from '@atlaskit/calendar';
8
8
  import { slideAndFade } from '@atlaskit/top-layer/animations';
9
9
  import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
10
- import { Popup } from '@atlaskit/top-layer/popup';
10
+ import { Popover } from '@atlaskit/top-layer/popover';
11
+ import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
12
+ import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
11
13
  var animation = slideAndFade();
12
14
 
13
15
  /**
@@ -36,10 +38,10 @@ function getValidDate(isos) {
36
38
  /**
37
39
  * Top-layer version of the date picker menu.
38
40
  *
39
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
40
- * calendar renders in the browser's top layer via the native Popover API
41
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
42
- * z-index wars, and portal-based layering.
41
+ * Uses `Popover` + `useAnchorPosition` so the calendar renders in the
42
+ * browser's top layer via the native Popover API and is positioned via
43
+ * CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
44
+ * and portal-based layering.
43
45
  *
44
46
  * Gated behind the `platform-dst-top-layer` feature flag.
45
47
  */
@@ -58,6 +60,12 @@ export var MenuTopLayer = function MenuTopLayer(_ref) {
58
60
  // The select's container element is the anchor for the popup.
59
61
  var triggerRef = useRef((_selectProps$calendar = selectProps.calendarContainerRef) !== null && _selectProps$calendar !== void 0 ? _selectProps$calendar : null);
60
62
  triggerRef.current = (_selectProps$calendar2 = selectProps.calendarContainerRef) !== null && _selectProps$calendar2 !== void 0 ? _selectProps$calendar2 : null;
63
+ var popoverRef = useRef(null);
64
+ useAnchorPosition({
65
+ anchorRef: triggerRef,
66
+ popoverRef: popoverRef,
67
+ placement: popupPlacement
68
+ });
61
69
  var onMenuMouseDown = function onMenuMouseDown(event) {
62
70
  if (event.button !== 0) {
63
71
  return;
@@ -66,7 +74,8 @@ export var MenuTopLayer = function MenuTopLayer(_ref) {
66
74
  event.preventDefault();
67
75
  };
68
76
  var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
69
- return /*#__PURE__*/React.createElement(Popup.Content, {
77
+ return /*#__PURE__*/React.createElement(Popover, {
78
+ ref: popoverRef,
70
79
  role: "dialog",
71
80
  label: "calendar",
72
81
  isOpen: true
@@ -79,10 +88,9 @@ export var MenuTopLayer = function MenuTopLayer(_ref) {
79
88
  ,
80
89
  mode: "manual",
81
90
  placement: popupPlacement,
82
- triggerRef: triggerRef,
83
91
  animate: animation,
84
92
  testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
85
- }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
93
+ }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
86
94
  role: "presentation",
87
95
  onMouseDown: onMenuMouseDown
88
96
  }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
package/dist/types/internal/fixed-layer-menu-top-layer.d.ts CHANGED
@@ -2,10 +2,10 @@ import { type MenuProps, type OptionType } from '@atlaskit/select';
2
2
  /**
3
3
  * Top-layer version of the fixed layer menu used in the time picker.
4
4
  *
5
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
6
- * time options list renders in the browser's top layer via the native Popover API
7
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
8
- * z-index wars, and portal-based layering.
5
+ * Uses `Popover` + `useAnchorPosition` so the time options list renders
6
+ * in the browser's top layer via the native Popover API and is positioned
7
+ * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
8
+ * and portal-based layering.
9
9
  *
10
10
  * Gated behind the `platform-dst-top-layer` feature flag.
11
11
  */
package/dist/types/internal/menu-top-layer.d.ts CHANGED
@@ -6,10 +6,10 @@ import { type MenuProps, type OptionType } from '@atlaskit/select';
6
6
  /**
7
7
  * Top-layer version of the date picker menu.
8
8
  *
9
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
10
- * calendar renders in the browser's top layer via the native Popover API
11
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
12
- * z-index wars, and portal-based layering.
9
+ * Uses `Popover` + `useAnchorPosition` so the calendar renders in the
10
+ * browser's top layer via the native Popover API and is positioned via
11
+ * CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
12
+ * and portal-based layering.
13
13
  *
14
14
  * Gated behind the `platform-dst-top-layer` feature flag.
15
15
  */
package/dist/types-ts4.5/internal/fixed-layer-menu-top-layer.d.ts CHANGED
@@ -2,10 +2,10 @@ import { type MenuProps, type OptionType } from '@atlaskit/select';
2
2
  /**
3
3
  * Top-layer version of the fixed layer menu used in the time picker.
4
4
  *
5
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
6
- * time options list renders in the browser's top layer via the native Popover API
7
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
8
- * z-index wars, and portal-based layering.
5
+ * Uses `Popover` + `useAnchorPosition` so the time options list renders
6
+ * in the browser's top layer via the native Popover API and is positioned
7
+ * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
8
+ * and portal-based layering.
9
9
  *
10
10
  * Gated behind the `platform-dst-top-layer` feature flag.
11
11
  */
package/dist/types-ts4.5/internal/menu-top-layer.d.ts CHANGED
@@ -6,10 +6,10 @@ import { type MenuProps, type OptionType } from '@atlaskit/select';
6
6
  /**
7
7
  * Top-layer version of the date picker menu.
8
8
  *
9
- * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
10
- * calendar renders in the browser's top layer via the native Popover API
11
- * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
12
- * z-index wars, and portal-based layering.
9
+ * Uses `Popover` + `useAnchorPosition` so the calendar renders in the
10
+ * browser's top layer via the native Popover API and is positioned via
11
+ * CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
12
+ * and portal-based layering.
13
13
  *
14
14
  * Gated behind the `platform-dst-top-layer` feature flag.
15
15
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/datetime-picker",
3
- "version": "17.9.1",
3
+ "version": "17.9.3",
4
4
  "description": "A date time picker allows the user to select an associated date and time.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,20 +39,20 @@
39
39
  }
40
40
  },
41
41
  "dependencies": {
42
- "@atlaskit/analytics-next": "^11.2.0",
42
+ "@atlaskit/analytics-next": "^11.3.0",
43
43
  "@atlaskit/button": "^23.11.0",
44
44
  "@atlaskit/calendar": "^17.2.0",
45
45
  "@atlaskit/css": "^0.19.0",
46
46
  "@atlaskit/ds-lib": "^7.0.0",
47
47
  "@atlaskit/icon": "^35.4.0",
48
- "@atlaskit/layering": "^3.7.0",
48
+ "@atlaskit/layering": "^3.8.0",
49
49
  "@atlaskit/locale": "^4.1.0",
50
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
51
51
  "@atlaskit/popper": "^7.2.0",
52
52
  "@atlaskit/primitives": "^19.0.0",
53
53
  "@atlaskit/select": "^21.12.0",
54
- "@atlaskit/tokens": "^13.1.0",
55
- "@atlaskit/top-layer": "^0.13.0",
54
+ "@atlaskit/tokens": "^13.3.0",
55
+ "@atlaskit/top-layer": "^0.15.0",
56
56
  "@babel/runtime": "^7.0.0",
57
57
  "@compiled/react": "^0.20.0",
58
58
  "date-fns": "^2.17.0"