@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 +13 -0
- package/dist/cjs/components/date-picker.js +1 -1
- package/dist/cjs/components/date-time-picker.js +1 -1
- package/dist/cjs/components/time-picker.js +6 -5
- package/dist/es2019/components/date-picker.js +1 -1
- package/dist/es2019/components/date-time-picker.js +1 -1
- package/dist/es2019/components/time-picker.js +5 -3
- package/dist/esm/components/date-picker.js +1 -1
- package/dist/esm/components/date-time-picker.js +1 -1
- package/dist/esm/components/time-picker.js +6 -5
- package/package.json +1 -1
- package/dist/cjs/internal/fixed-layer-menu-top-layer.js +0 -118
- package/dist/es2019/internal/fixed-layer-menu-top-layer.js +0 -109
- package/dist/esm/internal/fixed-layer-menu-top-layer.js +0 -111
- package/dist/types/internal/fixed-layer-menu-top-layer.d.ts +0 -12
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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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,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;
|