@atlaskit/popup 1.9.3 → 1.10.1
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 +16 -0
- package/dist/cjs/popper-wrapper.js +8 -5
- package/dist/cjs/popup.js +5 -6
- package/dist/cjs/use-close-manager.js +7 -1
- package/dist/es2019/popper-wrapper.js +16 -9
- package/dist/es2019/popup.js +5 -6
- package/dist/es2019/use-close-manager.js +8 -1
- package/dist/esm/popper-wrapper.js +8 -5
- package/dist/esm/popup.js +5 -6
- package/dist/esm/use-close-manager.js +7 -1
- package/dist/types/popper-wrapper.d.ts +1 -1
- package/dist/types/types.d.ts +10 -5
- package/dist/types-ts4.5/popper-wrapper.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +10 -5
- package/package.json +6 -12
- package/report.api.md +2 -1
- package/tmp/api-report-tmp.d.ts +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 1.10.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`a54578d2ea9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a54578d2ea9) - This removes the feature flag for the `shouldRenderToParent` prop. The prop is available for use.
|
|
8
|
+
|
|
9
|
+
## 1.10.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`f355884a4aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f355884a4aa) - [ux] Support to press escape key and only close the top layer
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 1.9.3
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _react = require("react");
|
|
12
12
|
var _react2 = require("@emotion/react");
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
13
|
var _popper = require("@atlaskit/popper");
|
|
15
14
|
var _colors = require("@atlaskit/theme/colors");
|
|
16
15
|
var _constants = require("@atlaskit/theme/constants");
|
|
@@ -30,12 +29,14 @@ var popupStyles = (0, _react2.css)((_css = {
|
|
|
30
29
|
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
|
|
31
30
|
}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, ':focus', {
|
|
32
31
|
outline: 'none'
|
|
33
|
-
}), _css)
|
|
32
|
+
}), _css));
|
|
33
|
+
var popupOverflowStyles = (0, _react2.css)({
|
|
34
34
|
overflow: 'auto'
|
|
35
35
|
});
|
|
36
36
|
var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
37
|
+
var shouldRenderToParent = props.shouldRenderToParent;
|
|
37
38
|
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
38
|
-
css: popupStyles
|
|
39
|
+
css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
|
|
39
40
|
}, props, {
|
|
40
41
|
ref: ref
|
|
41
42
|
}));
|
|
@@ -58,7 +59,8 @@ function PopperWrapper(_ref) {
|
|
|
58
59
|
_ref$autoFocus = _ref.autoFocus,
|
|
59
60
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
60
61
|
triggerRef = _ref.triggerRef,
|
|
61
|
-
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick
|
|
62
|
+
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
|
|
63
|
+
shouldRenderToParent = _ref.shouldRenderToParent;
|
|
62
64
|
var _useState = (0, _react.useState)(null),
|
|
63
65
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
64
66
|
popupRef = _useState2[0],
|
|
@@ -116,7 +118,8 @@ function PopperWrapper(_ref) {
|
|
|
116
118
|
// using tabIndex={-1} would cause a bug where Safari focuses
|
|
117
119
|
// first on the browser address bar when using keyboard
|
|
118
120
|
,
|
|
119
|
-
tabIndex: autoFocus ? 0 : undefined
|
|
121
|
+
tabIndex: autoFocus ? 0 : undefined,
|
|
122
|
+
shouldRenderToParent: shouldRenderToParent
|
|
120
123
|
}, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
|
|
121
124
|
update: update
|
|
122
125
|
}, content({
|
package/dist/cjs/popup.js
CHANGED
|
@@ -8,7 +8,7 @@ exports.default = exports.Popup = void 0;
|
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
|
-
var
|
|
11
|
+
var _layering = require("@atlaskit/layering");
|
|
12
12
|
var _popper = require("@atlaskit/popper");
|
|
13
13
|
var _portal = _interopRequireDefault(require("@atlaskit/portal"));
|
|
14
14
|
var _constants = require("@atlaskit/theme/constants");
|
|
@@ -46,7 +46,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
46
46
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
47
47
|
triggerRef = _useState2[0],
|
|
48
48
|
setTriggerRef = _useState2[1];
|
|
49
|
-
var renderPopperWrapper = (0, _react2.jsx)(_popperWrapper.default, {
|
|
49
|
+
var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, null, (0, _react2.jsx)(_popperWrapper.default, {
|
|
50
50
|
content: content,
|
|
51
51
|
isOpen: isOpen,
|
|
52
52
|
placement: placement,
|
|
@@ -61,8 +61,9 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
61
61
|
onClose: onClose,
|
|
62
62
|
autoFocus: autoFocus,
|
|
63
63
|
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
64
|
+
shouldRenderToParent: shouldRenderToParent,
|
|
64
65
|
triggerRef: triggerRef
|
|
65
|
-
});
|
|
66
|
+
}));
|
|
66
67
|
return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
|
|
67
68
|
var _ref3 = _ref2.ref;
|
|
68
69
|
return trigger({
|
|
@@ -80,9 +81,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
80
81
|
'aria-expanded': isOpen,
|
|
81
82
|
'aria-haspopup': true
|
|
82
83
|
});
|
|
83
|
-
}), isOpen && (
|
|
84
|
-
zIndex: zIndex
|
|
85
|
-
}, renderPopperWrapper) : (0, _react2.jsx)(_portal.default, {
|
|
84
|
+
}), isOpen && (shouldRenderToParent ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
|
|
86
85
|
zIndex: zIndex
|
|
87
86
|
}, renderPopperWrapper)));
|
|
88
87
|
});
|
|
@@ -8,12 +8,15 @@ exports.useCloseManager = void 0;
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _bindEventListener = require("bind-event-listener");
|
|
10
10
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
11
|
+
var _layering = require("@atlaskit/layering");
|
|
11
12
|
var useCloseManager = function useCloseManager(_ref) {
|
|
12
13
|
var isOpen = _ref.isOpen,
|
|
13
14
|
onClose = _ref.onClose,
|
|
14
15
|
popupRef = _ref.popupRef,
|
|
15
16
|
triggerRef = _ref.triggerRef,
|
|
16
17
|
capture = _ref.shouldUseCaptureOnOutsideClick;
|
|
18
|
+
var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
|
|
19
|
+
isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
|
|
17
20
|
(0, _react.useEffect)(function () {
|
|
18
21
|
if (!isOpen || !popupRef) {
|
|
19
22
|
return _noop.default;
|
|
@@ -44,6 +47,9 @@ var useCloseManager = function useCloseManager(_ref) {
|
|
|
44
47
|
}
|
|
45
48
|
};
|
|
46
49
|
var onKeyDown = function onKeyDown(event) {
|
|
50
|
+
if (isLayerDisabled()) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
47
53
|
var key = event.key;
|
|
48
54
|
if (key === 'Escape' || key === 'Esc') {
|
|
49
55
|
closePopup(event);
|
|
@@ -60,6 +66,6 @@ var useCloseManager = function useCloseManager(_ref) {
|
|
|
60
66
|
listener: onKeyDown
|
|
61
67
|
}]);
|
|
62
68
|
return unbind;
|
|
63
|
-
}, [isOpen, onClose, popupRef, triggerRef, capture]);
|
|
69
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
|
|
64
70
|
};
|
|
65
71
|
exports.useCloseManager = useCloseManager;
|
|
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
import { forwardRef, useMemo, useState } from 'react';
|
|
4
4
|
import { css, jsx } from '@emotion/react';
|
|
5
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import { Popper } from '@atlaskit/popper';
|
|
7
6
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
8
7
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -22,14 +21,20 @@ const popupStyles = css({
|
|
|
22
21
|
':focus': {
|
|
23
22
|
outline: 'none'
|
|
24
23
|
}
|
|
25
|
-
}
|
|
24
|
+
});
|
|
25
|
+
const popupOverflowStyles = css({
|
|
26
26
|
overflow: 'auto'
|
|
27
27
|
});
|
|
28
|
-
const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) =>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
29
|
+
const {
|
|
30
|
+
shouldRenderToParent
|
|
31
|
+
} = props;
|
|
32
|
+
return jsx("div", _extends({
|
|
33
|
+
css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
|
|
34
|
+
}, props, {
|
|
35
|
+
ref: ref
|
|
36
|
+
}));
|
|
37
|
+
});
|
|
33
38
|
function PopperWrapper({
|
|
34
39
|
isOpen,
|
|
35
40
|
id,
|
|
@@ -45,7 +50,8 @@ function PopperWrapper({
|
|
|
45
50
|
popupComponent: PopupContainer = DefaultPopupComponent,
|
|
46
51
|
autoFocus = true,
|
|
47
52
|
triggerRef,
|
|
48
|
-
shouldUseCaptureOnOutsideClick
|
|
53
|
+
shouldUseCaptureOnOutsideClick,
|
|
54
|
+
shouldRenderToParent
|
|
49
55
|
}) {
|
|
50
56
|
const [popupRef, setPopupRef] = useState(null);
|
|
51
57
|
const [initialFocusRef, setInitialFocusRef] = useState(null);
|
|
@@ -97,7 +103,8 @@ function PopperWrapper({
|
|
|
97
103
|
// using tabIndex={-1} would cause a bug where Safari focuses
|
|
98
104
|
// first on the browser address bar when using keyboard
|
|
99
105
|
,
|
|
100
|
-
tabIndex: autoFocus ? 0 : undefined
|
|
106
|
+
tabIndex: autoFocus ? 0 : undefined,
|
|
107
|
+
shouldRenderToParent: shouldRenderToParent
|
|
101
108
|
}, jsx(RepositionOnUpdate, {
|
|
102
109
|
update: update
|
|
103
110
|
}, content({
|
package/dist/es2019/popup.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
import { memo, useState } from 'react';
|
|
4
4
|
import { jsx } from '@emotion/react';
|
|
5
|
-
import {
|
|
5
|
+
import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
6
6
|
import { Manager, Reference } from '@atlaskit/popper';
|
|
7
7
|
import Portal from '@atlaskit/portal';
|
|
8
8
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -28,7 +28,7 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
28
28
|
shouldRenderToParent = false
|
|
29
29
|
}) => {
|
|
30
30
|
const [triggerRef, setTriggerRef] = useState(null);
|
|
31
|
-
const renderPopperWrapper = jsx(PopperWrapper, {
|
|
31
|
+
const renderPopperWrapper = jsx(UNSAFE_LAYERING, null, jsx(PopperWrapper, {
|
|
32
32
|
content: content,
|
|
33
33
|
isOpen: isOpen,
|
|
34
34
|
placement: placement,
|
|
@@ -43,8 +43,9 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
43
43
|
onClose: onClose,
|
|
44
44
|
autoFocus: autoFocus,
|
|
45
45
|
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
46
|
+
shouldRenderToParent: shouldRenderToParent,
|
|
46
47
|
triggerRef: triggerRef
|
|
47
|
-
});
|
|
48
|
+
}));
|
|
48
49
|
return jsx(Manager, null, jsx(Reference, null, ({
|
|
49
50
|
ref
|
|
50
51
|
}) => {
|
|
@@ -63,9 +64,7 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
63
64
|
'aria-expanded': isOpen,
|
|
64
65
|
'aria-haspopup': true
|
|
65
66
|
});
|
|
66
|
-
}), isOpen && (
|
|
67
|
-
zIndex: zIndex
|
|
68
|
-
}, renderPopperWrapper) : jsx(Portal, {
|
|
67
|
+
}), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
|
|
69
68
|
zIndex: zIndex
|
|
70
69
|
}, renderPopperWrapper)));
|
|
71
70
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { bindAll } from 'bind-event-listener';
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
|
+
import { UNSAFE_useLayering } from '@atlaskit/layering';
|
|
4
5
|
export const useCloseManager = ({
|
|
5
6
|
isOpen,
|
|
6
7
|
onClose,
|
|
@@ -8,6 +9,9 @@ export const useCloseManager = ({
|
|
|
8
9
|
triggerRef,
|
|
9
10
|
shouldUseCaptureOnOutsideClick: capture
|
|
10
11
|
}) => {
|
|
12
|
+
const {
|
|
13
|
+
isLayerDisabled
|
|
14
|
+
} = UNSAFE_useLayering();
|
|
11
15
|
useEffect(() => {
|
|
12
16
|
if (!isOpen || !popupRef) {
|
|
13
17
|
return noop;
|
|
@@ -40,6 +44,9 @@ export const useCloseManager = ({
|
|
|
40
44
|
}
|
|
41
45
|
};
|
|
42
46
|
const onKeyDown = event => {
|
|
47
|
+
if (isLayerDisabled()) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
43
50
|
const {
|
|
44
51
|
key
|
|
45
52
|
} = event;
|
|
@@ -58,5 +65,5 @@ export const useCloseManager = ({
|
|
|
58
65
|
listener: onKeyDown
|
|
59
66
|
}]);
|
|
60
67
|
return unbind;
|
|
61
|
-
}, [isOpen, onClose, popupRef, triggerRef, capture]);
|
|
68
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
|
|
62
69
|
};
|
|
@@ -5,7 +5,6 @@ var _css;
|
|
|
5
5
|
/** @jsx jsx */
|
|
6
6
|
import { forwardRef, useMemo, useState } from 'react';
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { Popper } from '@atlaskit/popper';
|
|
10
9
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
11
10
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -23,12 +22,14 @@ var popupStyles = css((_css = {
|
|
|
23
22
|
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
|
|
24
23
|
}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, ':focus', {
|
|
25
24
|
outline: 'none'
|
|
26
|
-
}), _css)
|
|
25
|
+
}), _css));
|
|
26
|
+
var popupOverflowStyles = css({
|
|
27
27
|
overflow: 'auto'
|
|
28
28
|
});
|
|
29
29
|
var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
30
|
+
var shouldRenderToParent = props.shouldRenderToParent;
|
|
30
31
|
return jsx("div", _extends({
|
|
31
|
-
css: popupStyles
|
|
32
|
+
css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
|
|
32
33
|
}, props, {
|
|
33
34
|
ref: ref
|
|
34
35
|
}));
|
|
@@ -51,7 +52,8 @@ function PopperWrapper(_ref) {
|
|
|
51
52
|
_ref$autoFocus = _ref.autoFocus,
|
|
52
53
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
53
54
|
triggerRef = _ref.triggerRef,
|
|
54
|
-
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick
|
|
55
|
+
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
|
|
56
|
+
shouldRenderToParent = _ref.shouldRenderToParent;
|
|
55
57
|
var _useState = useState(null),
|
|
56
58
|
_useState2 = _slicedToArray(_useState, 2),
|
|
57
59
|
popupRef = _useState2[0],
|
|
@@ -109,7 +111,8 @@ function PopperWrapper(_ref) {
|
|
|
109
111
|
// using tabIndex={-1} would cause a bug where Safari focuses
|
|
110
112
|
// first on the browser address bar when using keyboard
|
|
111
113
|
,
|
|
112
|
-
tabIndex: autoFocus ? 0 : undefined
|
|
114
|
+
tabIndex: autoFocus ? 0 : undefined,
|
|
115
|
+
shouldRenderToParent: shouldRenderToParent
|
|
113
116
|
}, jsx(RepositionOnUpdate, {
|
|
114
117
|
update: update
|
|
115
118
|
}, content({
|
package/dist/esm/popup.js
CHANGED
|
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
3
3
|
/** @jsx jsx */
|
|
4
4
|
import { memo, useState } from 'react';
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
|
-
import {
|
|
6
|
+
import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
7
7
|
import { Manager, Reference } from '@atlaskit/popper';
|
|
8
8
|
import Portal from '@atlaskit/portal';
|
|
9
9
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -38,7 +38,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
38
38
|
_useState2 = _slicedToArray(_useState, 2),
|
|
39
39
|
triggerRef = _useState2[0],
|
|
40
40
|
setTriggerRef = _useState2[1];
|
|
41
|
-
var renderPopperWrapper = jsx(PopperWrapper, {
|
|
41
|
+
var renderPopperWrapper = jsx(UNSAFE_LAYERING, null, jsx(PopperWrapper, {
|
|
42
42
|
content: content,
|
|
43
43
|
isOpen: isOpen,
|
|
44
44
|
placement: placement,
|
|
@@ -53,8 +53,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
53
53
|
onClose: onClose,
|
|
54
54
|
autoFocus: autoFocus,
|
|
55
55
|
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
56
|
+
shouldRenderToParent: shouldRenderToParent,
|
|
56
57
|
triggerRef: triggerRef
|
|
57
|
-
});
|
|
58
|
+
}));
|
|
58
59
|
return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
|
|
59
60
|
var _ref3 = _ref2.ref;
|
|
60
61
|
return trigger({
|
|
@@ -72,9 +73,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
72
73
|
'aria-expanded': isOpen,
|
|
73
74
|
'aria-haspopup': true
|
|
74
75
|
});
|
|
75
|
-
}), isOpen && (
|
|
76
|
-
zIndex: zIndex
|
|
77
|
-
}, renderPopperWrapper) : jsx(Portal, {
|
|
76
|
+
}), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
|
|
78
77
|
zIndex: zIndex
|
|
79
78
|
}, renderPopperWrapper)));
|
|
80
79
|
});
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { bindAll } from 'bind-event-listener';
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
|
+
import { UNSAFE_useLayering } from '@atlaskit/layering';
|
|
4
5
|
export var useCloseManager = function useCloseManager(_ref) {
|
|
5
6
|
var isOpen = _ref.isOpen,
|
|
6
7
|
onClose = _ref.onClose,
|
|
7
8
|
popupRef = _ref.popupRef,
|
|
8
9
|
triggerRef = _ref.triggerRef,
|
|
9
10
|
capture = _ref.shouldUseCaptureOnOutsideClick;
|
|
11
|
+
var _UNSAFE_useLayering = UNSAFE_useLayering(),
|
|
12
|
+
isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
|
|
10
13
|
useEffect(function () {
|
|
11
14
|
if (!isOpen || !popupRef) {
|
|
12
15
|
return noop;
|
|
@@ -37,6 +40,9 @@ export var useCloseManager = function useCloseManager(_ref) {
|
|
|
37
40
|
}
|
|
38
41
|
};
|
|
39
42
|
var onKeyDown = function onKeyDown(event) {
|
|
43
|
+
if (isLayerDisabled()) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
40
46
|
var key = event.key;
|
|
41
47
|
if (key === 'Escape' || key === 'Esc') {
|
|
42
48
|
closePopup(event);
|
|
@@ -53,5 +59,5 @@ export var useCloseManager = function useCloseManager(_ref) {
|
|
|
53
59
|
listener: onKeyDown
|
|
54
60
|
}]);
|
|
55
61
|
return unbind;
|
|
56
|
-
}, [isOpen, onClose, popupRef, triggerRef, capture]);
|
|
62
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
|
|
57
63
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx } from '@emotion/react';
|
|
2
2
|
import { PopperWrapperProps } from './types';
|
|
3
|
-
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
|
|
3
|
+
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -56,6 +56,11 @@ export interface PopupComponentProps {
|
|
|
56
56
|
* Tab index passed through by the parent popup.
|
|
57
57
|
*/
|
|
58
58
|
tabIndex: number | undefined;
|
|
59
|
+
/**
|
|
60
|
+
* The root element where the popup should be rendered.
|
|
61
|
+
* Defaults to `false`.
|
|
62
|
+
*/
|
|
63
|
+
shouldRenderToParent?: boolean;
|
|
59
64
|
}
|
|
60
65
|
interface BaseProps {
|
|
61
66
|
/**
|
|
@@ -134,6 +139,11 @@ interface BaseProps {
|
|
|
134
139
|
* `capture: true`.
|
|
135
140
|
*/
|
|
136
141
|
shouldUseCaptureOnOutsideClick?: boolean;
|
|
142
|
+
/**
|
|
143
|
+
* The root element where the popup should be rendered.
|
|
144
|
+
* Defaults to `false`.
|
|
145
|
+
*/
|
|
146
|
+
shouldRenderToParent?: boolean;
|
|
137
147
|
}
|
|
138
148
|
export interface PopupProps extends BaseProps {
|
|
139
149
|
/**
|
|
@@ -148,11 +158,6 @@ export interface PopupProps extends BaseProps {
|
|
|
148
158
|
* Defaults to `layers.layer()` from `@atlaskit/theme`.
|
|
149
159
|
*/
|
|
150
160
|
zIndex?: number;
|
|
151
|
-
/**
|
|
152
|
-
* The root element where the popup should be rendered.
|
|
153
|
-
* Defaults to `false`.
|
|
154
|
-
*/
|
|
155
|
-
shouldRenderToParent?: boolean;
|
|
156
161
|
}
|
|
157
162
|
export interface PopperWrapperProps extends BaseProps {
|
|
158
163
|
triggerRef: TriggerRef;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx } from '@emotion/react';
|
|
2
2
|
import { PopperWrapperProps } from './types';
|
|
3
|
-
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
|
|
3
|
+
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
|
@@ -56,6 +56,11 @@ export interface PopupComponentProps {
|
|
|
56
56
|
* Tab index passed through by the parent popup.
|
|
57
57
|
*/
|
|
58
58
|
tabIndex: number | undefined;
|
|
59
|
+
/**
|
|
60
|
+
* The root element where the popup should be rendered.
|
|
61
|
+
* Defaults to `false`.
|
|
62
|
+
*/
|
|
63
|
+
shouldRenderToParent?: boolean;
|
|
59
64
|
}
|
|
60
65
|
interface BaseProps {
|
|
61
66
|
/**
|
|
@@ -137,6 +142,11 @@ interface BaseProps {
|
|
|
137
142
|
* `capture: true`.
|
|
138
143
|
*/
|
|
139
144
|
shouldUseCaptureOnOutsideClick?: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* The root element where the popup should be rendered.
|
|
147
|
+
* Defaults to `false`.
|
|
148
|
+
*/
|
|
149
|
+
shouldRenderToParent?: boolean;
|
|
140
150
|
}
|
|
141
151
|
export interface PopupProps extends BaseProps {
|
|
142
152
|
/**
|
|
@@ -151,11 +161,6 @@ export interface PopupProps extends BaseProps {
|
|
|
151
161
|
* Defaults to `layers.layer()` from `@atlaskit/theme`.
|
|
152
162
|
*/
|
|
153
163
|
zIndex?: number;
|
|
154
|
-
/**
|
|
155
|
-
* The root element where the popup should be rendered.
|
|
156
|
-
* Defaults to `false`.
|
|
157
|
-
*/
|
|
158
|
-
shouldRenderToParent?: boolean;
|
|
159
164
|
}
|
|
160
165
|
export interface PopperWrapperProps extends BaseProps {
|
|
161
166
|
triggerRef: TriggerRef;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.1",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@atlaskit/ds-lib": "^2.2.0",
|
|
39
|
-
"@atlaskit/
|
|
39
|
+
"@atlaskit/layering": "^0.2.0",
|
|
40
40
|
"@atlaskit/popper": "^5.5.0",
|
|
41
41
|
"@atlaskit/portal": "^4.3.0",
|
|
42
|
-
"@atlaskit/theme": "^12.
|
|
43
|
-
"@atlaskit/tokens": "^1.
|
|
42
|
+
"@atlaskit/theme": "^12.6.0",
|
|
43
|
+
"@atlaskit/tokens": "^1.25.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@emotion/react": "^11.7.1",
|
|
46
46
|
"bind-event-listener": "^2.1.1",
|
|
@@ -53,12 +53,11 @@
|
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@af/accessibility-testing": "*",
|
|
55
55
|
"@af/visual-regression": "*",
|
|
56
|
-
"@atlaskit/button": "^16.
|
|
56
|
+
"@atlaskit/button": "^16.10.0",
|
|
57
57
|
"@atlaskit/icon": "^21.12.0",
|
|
58
58
|
"@atlaskit/ssr": "*",
|
|
59
59
|
"@atlaskit/visual-regression": "*",
|
|
60
60
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
61
|
-
"@atlassian/feature-flags-test-utils": "*",
|
|
62
61
|
"@testing-library/dom": "^8.17.1",
|
|
63
62
|
"@testing-library/react": "^12.1.5",
|
|
64
63
|
"ast-types": "^0.13.3",
|
|
@@ -95,10 +94,5 @@
|
|
|
95
94
|
}
|
|
96
95
|
},
|
|
97
96
|
"homepage": "https://atlassian.design/components/popup/",
|
|
98
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
99
|
-
"platform-feature-flags": {
|
|
100
|
-
"platform.design-system-team.render-popup-in-parent_f73ij": {
|
|
101
|
-
"type": "boolean"
|
|
102
|
-
}
|
|
103
|
-
}
|
|
97
|
+
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
104
98
|
}
|
package/report.api.md
CHANGED
|
@@ -40,6 +40,7 @@ interface BaseProps {
|
|
|
40
40
|
popupComponent?: ComponentType<PopupComponentProps>;
|
|
41
41
|
rootBoundary?: 'document' | 'viewport';
|
|
42
42
|
shouldFlip?: boolean;
|
|
43
|
+
shouldRenderToParent?: boolean;
|
|
43
44
|
shouldUseCaptureOnOutsideClick?: boolean;
|
|
44
45
|
testId?: string;
|
|
45
46
|
}
|
|
@@ -64,13 +65,13 @@ export interface PopupComponentProps {
|
|
|
64
65
|
children: ReactNode;
|
|
65
66
|
id?: string;
|
|
66
67
|
ref: Ref<HTMLDivElement>;
|
|
68
|
+
shouldRenderToParent?: boolean;
|
|
67
69
|
style: CSSProperties;
|
|
68
70
|
tabIndex: number | undefined;
|
|
69
71
|
}
|
|
70
72
|
|
|
71
73
|
// @public (undocumented)
|
|
72
74
|
export interface PopupProps extends BaseProps {
|
|
73
|
-
shouldRenderToParent?: boolean;
|
|
74
75
|
trigger: (props: TriggerProps) => React_2.ReactNode;
|
|
75
76
|
zIndex?: number;
|
|
76
77
|
}
|
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ interface BaseProps {
|
|
|
29
29
|
popupComponent?: ComponentType<PopupComponentProps>;
|
|
30
30
|
rootBoundary?: 'document' | 'viewport';
|
|
31
31
|
shouldFlip?: boolean;
|
|
32
|
+
shouldRenderToParent?: boolean;
|
|
32
33
|
shouldUseCaptureOnOutsideClick?: boolean;
|
|
33
34
|
testId?: string;
|
|
34
35
|
}
|
|
@@ -53,13 +54,13 @@ export interface PopupComponentProps {
|
|
|
53
54
|
children: ReactNode;
|
|
54
55
|
id?: string;
|
|
55
56
|
ref: Ref<HTMLDivElement>;
|
|
57
|
+
shouldRenderToParent?: boolean;
|
|
56
58
|
style: CSSProperties;
|
|
57
59
|
tabIndex: number | undefined;
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
// @public (undocumented)
|
|
61
63
|
export interface PopupProps extends BaseProps {
|
|
62
|
-
shouldRenderToParent?: boolean;
|
|
63
64
|
trigger: (props: TriggerProps) => React_2.ReactNode;
|
|
64
65
|
zIndex?: number;
|
|
65
66
|
}
|