@atlaskit/datetime-picker 19.3.1 → 19.3.2

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/datetime-picker
2
2
 
3
+ ## 19.3.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`45ba618a887fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45ba618a887fd) -
8
+ When `platform-dst-top-layer` is enabled, keep select menus within the viewport by sizing the
9
+ anchored host to the menu and constraining the scrolling list to available space.
10
+
11
+ When `platform-dst-top-layer` is enabled, use Select's top-layer menu positioning for TimePicker
12
+ instead of nesting a second popover.
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 19.3.1
4
17
 
5
18
  ### Patch Changes
@@ -47,7 +47,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
47
47
  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; }
48
48
  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; }
49
49
  var packageName = "@atlaskit/datetime-picker";
50
- var packageVersion = "19.3.0";
50
+ var packageVersion = "19.3.1";
51
51
  var styles = {
52
52
  pickerContainerStyle: "_kqswh2mm",
53
53
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -35,7 +35,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
35
35
  // for typing `process`
36
36
  // oxlint-disable-next-line @atlassian/no-restricted-imports
37
37
  var packageName = "@atlaskit/datetime-picker";
38
- var packageVersion = "19.3.0";
38
+ var packageVersion = "19.3.1";
39
39
  var analyticsAttributes = {
40
40
  componentName: 'dateTimePicker',
41
41
  packageName: packageName,
@@ -27,7 +27,6 @@ var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
27
27
  var _defaultTimes = require("../internal/default-times");
28
28
  var _emptyComponent = require("../internal/empty-component");
29
29
  var _fixedLayerMenu = require("../internal/fixed-layer-menu");
30
- var _fixedLayerMenuTopLayer = require("../internal/fixed-layer-menu-top-layer");
31
30
  var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
32
31
  var _parseTokens = require("../internal/parse-tokens");
33
32
  var _pickerButtonContainer = require("../internal/picker-button-container");
@@ -38,7 +37,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
38
37
  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; }
39
38
  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
40
39
  var packageName = "@atlaskit/datetime-picker";
41
- var packageVersion = "19.3.0";
40
+ var packageVersion = "19.3.1";
42
41
  var defaultTimeFormat = 'h:mma';
43
42
  var menuStyles = {
44
43
  /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -338,9 +337,11 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
338
337
  id: valueId,
339
338
  lang: locale
340
339
  });
341
- var selectComponents = _objectSpread({
342
- DropdownIndicator: _emptyComponent.EmptyComponent,
343
- Menu: (0, _fg.fg)('platform-dst-top-layer') ? _fixedLayerMenuTopLayer.FixedLayerMenuTopLayer : _fixedLayerMenu.FixedLayerMenu,
340
+ var selectComponents = _objectSpread(_objectSpread({
341
+ DropdownIndicator: _emptyComponent.EmptyComponent
342
+ }, !(0, _fg.fg)('platform-dst-top-layer') && {
343
+ Menu: _fixedLayerMenu.FixedLayerMenu
344
+ }), {}, {
344
345
  SingleValue: SingleValue
345
346
  }, hideIcon && {
346
347
  ClearIndicator: _emptyComponent.EmptyComponent
@@ -32,7 +32,7 @@ import { parseDate } from '../internal/parse-date';
32
32
  import { PickerButtonContainer } from '../internal/picker-button-container';
33
33
  import { makeSingleValue } from '../internal/single-value';
34
34
  const packageName = "@atlaskit/datetime-picker";
35
- const packageVersion = "19.3.0";
35
+ const packageVersion = "19.3.1";
36
36
  const styles = {
37
37
  pickerContainerStyle: "_kqswh2mm",
38
38
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -22,7 +22,7 @@ import { convertTokens } from '../internal/parse-tokens';
22
22
  import DatePicker from './date-picker';
23
23
  import TimePicker from './time-picker';
24
24
  const packageName = "@atlaskit/datetime-picker";
25
- const packageVersion = "19.3.0";
25
+ const packageVersion = "19.3.1";
26
26
  const analyticsAttributes = {
27
27
  componentName: 'dateTimePicker',
28
28
  packageName,
@@ -18,14 +18,13 @@ import Select from '@atlaskit/select/default';
18
18
  import { defaultTimes } from '../internal/default-times';
19
19
  import { EmptyComponent } from '../internal/empty-component';
20
20
  import { FixedLayerMenu } from '../internal/fixed-layer-menu';
21
- import { FixedLayerMenuTopLayer } from '../internal/fixed-layer-menu-top-layer';
22
21
  import parseTime from '../internal/parse-time';
23
22
  import { convertTokens } from '../internal/parse-tokens';
24
23
  import { PickerButtonContainer } from '../internal/picker-button-container';
25
24
  import { placeholderDatetime } from '../internal/placeholder-date-time';
26
25
  import { makeSingleValue } from '../internal/single-value';
27
26
  const packageName = "@atlaskit/datetime-picker";
28
- const packageVersion = "19.3.0";
27
+ const packageVersion = "19.3.1";
29
28
  const defaultTimeFormat = 'h:mma';
30
29
  const menuStyles = {
31
30
  /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -284,7 +283,10 @@ const TimePicker = /*#__PURE__*/forwardRef(({
284
283
  });
285
284
  const selectComponents = {
286
285
  DropdownIndicator: EmptyComponent,
287
- Menu: fg('platform-dst-top-layer') ? FixedLayerMenuTopLayer : FixedLayerMenu,
286
+ // Select owns top-layer positioning; only the legacy path needs a separate wrapper.
287
+ ...(!fg('platform-dst-top-layer') && {
288
+ Menu: FixedLayerMenu
289
+ }),
288
290
  SingleValue,
289
291
  ...(hideIcon && {
290
292
  ClearIndicator: EmptyComponent
@@ -40,7 +40,7 @@ import { parseDate } from '../internal/parse-date';
40
40
  import { PickerButtonContainer } from '../internal/picker-button-container';
41
41
  import { makeSingleValue } from '../internal/single-value';
42
42
  var packageName = "@atlaskit/datetime-picker";
43
- var packageVersion = "19.3.0";
43
+ var packageVersion = "19.3.1";
44
44
  var styles = {
45
45
  pickerContainerStyle: "_kqswh2mm",
46
46
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -29,7 +29,7 @@ import { convertTokens } from '../internal/parse-tokens';
29
29
  import DatePicker from './date-picker';
30
30
  import TimePicker from './time-picker';
31
31
  var packageName = "@atlaskit/datetime-picker";
32
- var packageVersion = "19.3.0";
32
+ var packageVersion = "19.3.1";
33
33
  var analyticsAttributes = {
34
34
  componentName: 'dateTimePicker',
35
35
  packageName: packageName,
@@ -24,14 +24,13 @@ import Select from '@atlaskit/select/default';
24
24
  import { defaultTimes } from '../internal/default-times';
25
25
  import { EmptyComponent } from '../internal/empty-component';
26
26
  import { FixedLayerMenu } from '../internal/fixed-layer-menu';
27
- import { FixedLayerMenuTopLayer } from '../internal/fixed-layer-menu-top-layer';
28
27
  import parseTime from '../internal/parse-time';
29
28
  import { convertTokens } from '../internal/parse-tokens';
30
29
  import { PickerButtonContainer } from '../internal/picker-button-container';
31
30
  import { placeholderDatetime } from '../internal/placeholder-date-time';
32
31
  import { makeSingleValue } from '../internal/single-value';
33
32
  var packageName = "@atlaskit/datetime-picker";
34
- var packageVersion = "19.3.0";
33
+ var packageVersion = "19.3.1";
35
34
  var defaultTimeFormat = 'h:mma';
36
35
  var menuStyles = {
37
36
  /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -331,9 +330,11 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
331
330
  id: valueId,
332
331
  lang: locale
333
332
  });
334
- var selectComponents = _objectSpread({
335
- DropdownIndicator: EmptyComponent,
336
- Menu: fg('platform-dst-top-layer') ? FixedLayerMenuTopLayer : FixedLayerMenu,
333
+ var selectComponents = _objectSpread(_objectSpread({
334
+ DropdownIndicator: EmptyComponent
335
+ }, !fg('platform-dst-top-layer') && {
336
+ Menu: FixedLayerMenu
337
+ }), {}, {
337
338
  SingleValue: SingleValue
338
339
  }, hideIcon && {
339
340
  ClearIndicator: EmptyComponent
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/datetime-picker",
3
- "version": "19.3.1",
3
+ "version": "19.3.2",
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/"
@@ -1,118 +0,0 @@
1
- /* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
2
- "use strict";
3
-
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- exports.FixedLayerMenuTopLayer = void 0;
10
- var _react = _interopRequireWildcard(require("react"));
11
- var React = _react;
12
- var _runtime = require("@compiled/react/runtime");
13
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
14
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
- var _components = require("@atlaskit/react-select/components");
16
- var _index = require("@atlaskit/top-layer/placement-map/index");
17
- var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
18
- var _popover = require("@atlaskit/top-layer/popover/popover");
19
- var _useAnchoredPopover = require("@atlaskit/top-layer/use-anchored-popover");
20
- var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
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); }
22
- /**
23
- * Bottom-start placement: time options menu appears below and aligned to the
24
- * start edge of the trigger (the select input).
25
- */
26
- var popupPlacement = (0, _index.fromLegacyPlacement)({
27
- legacy: 'bottom-start'
28
- });
29
-
30
- /**
31
- * Top-layer version of the fixed layer menu used in the time picker.
32
- *
33
- * Uses `Popover` + `useAnchoredPopover` so the time options list renders
34
- * in the browser's top layer via the native Popover API and is positioned
35
- * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
36
- * and portal-based layering.
37
- *
38
- * Gated behind the `platform-dst-top-layer` feature flag.
39
- */
40
- var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
41
- var _selectProps$fixedLay, _selectProps$fixedLay2;
42
- var className = _ref.className,
43
- clearValue = _ref.clearValue,
44
- cx = _ref.cx,
45
- getStyles = _ref.getStyles,
46
- getValue = _ref.getValue,
47
- hasValue = _ref.hasValue,
48
- innerProps = _ref.innerProps,
49
- innerRef = _ref.innerRef,
50
- isLoading = _ref.isLoading,
51
- isMulti = _ref.isMulti,
52
- isRtl = _ref.isRtl,
53
- maxMenuHeight = _ref.maxMenuHeight,
54
- menuPlacement = _ref.menuPlacement,
55
- menuPosition = _ref.menuPosition,
56
- menuShouldScrollIntoView = _ref.menuShouldScrollIntoView,
57
- minMenuHeight = _ref.minMenuHeight,
58
- options = _ref.options,
59
- placement = _ref.placement,
60
- selectOption = _ref.selectOption,
61
- selectProps = _ref.selectProps,
62
- setValue = _ref.setValue,
63
- children = _ref.children,
64
- rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
65
- // The select's container element is the anchor for the popup.
66
- var triggerRef = (0, _react.useRef)((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
67
- triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
68
- var popoverRef = (0, _react.useRef)(null);
69
- (0, _useAnchoredPopover.useAnchoredPopover)({
70
- anchorRef: triggerRef,
71
- popoverRef: popoverRef,
72
- placement: popupPlacement,
73
- // The Popover is rendered with `isOpen` always true while this
74
- // component is mounted (react-select conditionally mounts/unmounts
75
- // the menu), so positioning is always active.
76
- isOpen: true
77
- });
78
- return /*#__PURE__*/React.createElement(_popover.Popover, {
79
- ref: popoverRef,
80
- role: "listbox",
81
- isOpen: true
82
- // `mode="manual"` opts out of the native popover light-dismiss
83
- // (Esc / click-outside). react-select already owns those: opening
84
- // the menu via a click on the input that lives outside the popover
85
- // element triggers the browser's auto-dismiss as that very click
86
- // bubbles, slamming the menu shut before the user sees it. With
87
- // `manual`, react-select's existing onMenuClose / outside-click
88
- // logic remains the single source of truth.
89
- ,
90
- mode: "manual",
91
- placement: popupPlacement,
92
- shouldAnimate: true,
93
- testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
94
- }, /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement(_components.components.Menu, (0, _extends2.default)({}, rest, {
95
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
96
- className: className,
97
- clearValue: clearValue,
98
- cx: cx,
99
- getStyles: getStyles,
100
- getValue: getValue,
101
- hasValue: hasValue,
102
- innerProps: innerProps,
103
- innerRef: innerRef,
104
- isLoading: isLoading,
105
- isMulti: isMulti,
106
- isRtl: isRtl,
107
- maxMenuHeight: maxMenuHeight,
108
- menuPlacement: menuPlacement,
109
- menuPosition: menuPosition,
110
- menuShouldScrollIntoView: false || menuShouldScrollIntoView,
111
- minMenuHeight: minMenuHeight,
112
- options: options,
113
- placement: placement,
114
- selectOption: selectOption,
115
- selectProps: selectProps,
116
- setValue: setValue
117
- }), children)));
118
- };
@@ -1,109 +0,0 @@
1
- /* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
- import * as React from 'react';
4
- import { ax, ix } from "@compiled/react/runtime";
5
- import { useRef } from 'react';
6
- import { components } from '@atlaskit/react-select/components';
7
- import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
8
- import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
9
- import { Popover } from '@atlaskit/top-layer/popover/popover';
10
- import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
11
-
12
- /**
13
- * Bottom-start placement: time options menu appears below and aligned to the
14
- * start edge of the trigger (the select input).
15
- */
16
- const popupPlacement = fromLegacyPlacement({
17
- legacy: 'bottom-start'
18
- });
19
-
20
- /**
21
- * Top-layer version of the fixed layer menu used in the time picker.
22
- *
23
- * Uses `Popover` + `useAnchoredPopover` so the time options list renders
24
- * in the browser's top layer via the native Popover API and is positioned
25
- * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
26
- * and portal-based layering.
27
- *
28
- * Gated behind the `platform-dst-top-layer` feature flag.
29
- */
30
- export const FixedLayerMenuTopLayer = ({
31
- className,
32
- clearValue,
33
- cx,
34
- getStyles,
35
- getValue,
36
- hasValue,
37
- innerProps,
38
- innerRef,
39
- isLoading,
40
- isMulti,
41
- isRtl,
42
- maxMenuHeight,
43
- menuPlacement,
44
- menuPosition,
45
- menuShouldScrollIntoView,
46
- minMenuHeight,
47
- options,
48
- placement,
49
- selectOption,
50
- selectProps,
51
- setValue,
52
- children,
53
- ...rest
54
- }) => {
55
- var _selectProps$fixedLay, _selectProps$fixedLay2;
56
- // The select's container element is the anchor for the popup.
57
- const triggerRef = useRef((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
58
- triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
59
- const popoverRef = useRef(null);
60
- useAnchoredPopover({
61
- anchorRef: triggerRef,
62
- popoverRef,
63
- placement: popupPlacement,
64
- // The Popover is rendered with `isOpen` always true while this
65
- // component is mounted (react-select conditionally mounts/unmounts
66
- // the menu), so positioning is always active.
67
- isOpen: true
68
- });
69
- return /*#__PURE__*/React.createElement(Popover, {
70
- ref: popoverRef,
71
- role: "listbox",
72
- isOpen: true
73
- // `mode="manual"` opts out of the native popover light-dismiss
74
- // (Esc / click-outside). react-select already owns those: opening
75
- // the menu via a click on the input that lives outside the popover
76
- // element triggers the browser's auto-dismiss as that very click
77
- // bubbles, slamming the menu shut before the user sees it. With
78
- // `manual`, react-select's existing onMenuClose / outside-click
79
- // logic remains the single source of truth.
80
- ,
81
- mode: "manual",
82
- placement: popupPlacement,
83
- shouldAnimate: true,
84
- testId: selectProps.testId && `${selectProps.testId}--popup`
85
- }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
86
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
87
- className: className,
88
- clearValue: clearValue,
89
- cx: cx,
90
- getStyles: getStyles,
91
- getValue: getValue,
92
- hasValue: hasValue,
93
- innerProps: innerProps,
94
- innerRef: innerRef,
95
- isLoading: isLoading,
96
- isMulti: isMulti,
97
- isRtl: isRtl,
98
- maxMenuHeight: maxMenuHeight,
99
- menuPlacement: menuPlacement,
100
- menuPosition: menuPosition,
101
- menuShouldScrollIntoView: false || menuShouldScrollIntoView,
102
- minMenuHeight: minMenuHeight,
103
- options: options,
104
- placement: placement,
105
- selectOption: selectOption,
106
- selectProps: selectProps,
107
- setValue: setValue
108
- }), children)));
109
- };
@@ -1,111 +0,0 @@
1
- /* fixed-layer-menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
5
- import * as React from 'react';
6
- import { ax, ix } from "@compiled/react/runtime";
7
- import { useRef } from 'react';
8
- import { components } from '@atlaskit/react-select/components';
9
- import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
10
- import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
11
- import { Popover } from '@atlaskit/top-layer/popover/popover';
12
- import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
13
-
14
- /**
15
- * Bottom-start placement: time options menu appears below and aligned to the
16
- * start edge of the trigger (the select input).
17
- */
18
- var popupPlacement = fromLegacyPlacement({
19
- legacy: 'bottom-start'
20
- });
21
-
22
- /**
23
- * Top-layer version of the fixed layer menu used in the time picker.
24
- *
25
- * Uses `Popover` + `useAnchoredPopover` 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.
29
- *
30
- * Gated behind the `platform-dst-top-layer` feature flag.
31
- */
32
- var FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
33
- var _selectProps$fixedLay, _selectProps$fixedLay2;
34
- var className = _ref.className,
35
- clearValue = _ref.clearValue,
36
- cx = _ref.cx,
37
- getStyles = _ref.getStyles,
38
- getValue = _ref.getValue,
39
- hasValue = _ref.hasValue,
40
- innerProps = _ref.innerProps,
41
- innerRef = _ref.innerRef,
42
- isLoading = _ref.isLoading,
43
- isMulti = _ref.isMulti,
44
- isRtl = _ref.isRtl,
45
- maxMenuHeight = _ref.maxMenuHeight,
46
- menuPlacement = _ref.menuPlacement,
47
- menuPosition = _ref.menuPosition,
48
- menuShouldScrollIntoView = _ref.menuShouldScrollIntoView,
49
- minMenuHeight = _ref.minMenuHeight,
50
- options = _ref.options,
51
- placement = _ref.placement,
52
- selectOption = _ref.selectOption,
53
- selectProps = _ref.selectProps,
54
- setValue = _ref.setValue,
55
- children = _ref.children,
56
- rest = _objectWithoutProperties(_ref, _excluded);
57
- // The select's container element is the anchor for the popup.
58
- var triggerRef = useRef((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
59
- triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
60
- var popoverRef = useRef(null);
61
- useAnchoredPopover({
62
- anchorRef: triggerRef,
63
- popoverRef: popoverRef,
64
- placement: popupPlacement,
65
- // The Popover is rendered with `isOpen` always true while this
66
- // component is mounted (react-select conditionally mounts/unmounts
67
- // the menu), so positioning is always active.
68
- isOpen: true
69
- });
70
- return /*#__PURE__*/React.createElement(Popover, {
71
- ref: popoverRef,
72
- role: "listbox",
73
- isOpen: true
74
- // `mode="manual"` opts out of the native popover light-dismiss
75
- // (Esc / click-outside). react-select already owns those: opening
76
- // the menu via a click on the input that lives outside the popover
77
- // element triggers the browser's auto-dismiss as that very click
78
- // bubbles, slamming the menu shut before the user sees it. With
79
- // `manual`, react-select's existing onMenuClose / outside-click
80
- // logic remains the single source of truth.
81
- ,
82
- mode: "manual",
83
- placement: popupPlacement,
84
- shouldAnimate: true,
85
- testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
86
- }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
87
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
88
- className: className,
89
- clearValue: clearValue,
90
- cx: cx,
91
- getStyles: getStyles,
92
- getValue: getValue,
93
- hasValue: hasValue,
94
- innerProps: innerProps,
95
- innerRef: innerRef,
96
- isLoading: isLoading,
97
- isMulti: isMulti,
98
- isRtl: isRtl,
99
- maxMenuHeight: maxMenuHeight,
100
- menuPlacement: menuPlacement,
101
- menuPosition: menuPosition,
102
- menuShouldScrollIntoView: false || menuShouldScrollIntoView,
103
- minMenuHeight: minMenuHeight,
104
- options: options,
105
- placement: placement,
106
- selectOption: selectOption,
107
- selectProps: selectProps,
108
- setValue: setValue
109
- }), children)));
110
- };
111
- export { FixedLayerMenuTopLayer };
@@ -1,12 +0,0 @@
1
- import type { MenuProps, OptionType } from '@atlaskit/select/types';
2
- /**
3
- * Top-layer version of the fixed layer menu used in the time picker.
4
- *
5
- * Uses `Popover` + `useAnchoredPopover` 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
- *
10
- * Gated behind the `platform-dst-top-layer` feature flag.
11
- */
12
- export declare const FixedLayerMenuTopLayer: ({ className, clearValue, cx, getStyles, getValue, hasValue, innerProps, innerRef, isLoading, isMulti, isRtl, maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, options, placement, selectOption, selectProps, setValue, children, ...rest }: MenuProps<OptionType>) => JSX.Element;