@atlaskit/popup 1.5.4 → 1.5.5
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 +6 -0
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/popper-wrapper.js +31 -46
- package/dist/cjs/popup.js +25 -38
- package/dist/cjs/reposition-on-update.js +5 -11
- package/dist/cjs/use-close-manager.js +7 -20
- package/dist/cjs/use-focus-manager.js +3 -10
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/index.js +2 -2
- package/dist/es2019/popper-wrapper.js +4 -6
- package/dist/es2019/popup.js +0 -2
- package/dist/es2019/reposition-on-update.js +4 -4
- package/dist/es2019/use-close-manager.js +3 -10
- package/dist/es2019/use-focus-manager.js +2 -3
- package/dist/es2019/version.json +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/popper-wrapper.js +30 -35
- package/dist/esm/popup.js +24 -29
- package/dist/esm/reposition-on-update.js +5 -5
- package/dist/esm/use-close-manager.js +7 -14
- package/dist/esm/use-focus-manager.js +3 -4
- package/dist/esm/version.json +1 -1
- package/package.json +3 -3
- package/report.api.md +1 -1
package/CHANGELOG.md
CHANGED
package/dist/cjs/index.js
CHANGED
|
@@ -1,33 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
|
|
12
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
10
|
var _react = require("react");
|
|
15
|
-
|
|
16
11
|
var _react2 = require("@emotion/react");
|
|
17
|
-
|
|
18
12
|
var _popper = require("@atlaskit/popper");
|
|
19
|
-
|
|
20
13
|
var _colors = require("@atlaskit/theme/colors");
|
|
21
|
-
|
|
22
14
|
var _constants = require("@atlaskit/theme/constants");
|
|
23
|
-
|
|
24
15
|
var _repositionOnUpdate = require("./reposition-on-update");
|
|
25
|
-
|
|
26
16
|
var _useCloseManager = require("./use-close-manager");
|
|
27
|
-
|
|
28
17
|
var _useFocusManager = require("./use-focus-manager");
|
|
29
|
-
|
|
30
18
|
/** @jsx jsx */
|
|
19
|
+
|
|
31
20
|
var popupStyles = (0, _react2.css)({
|
|
32
21
|
display: 'block',
|
|
33
22
|
boxSizing: 'border-box',
|
|
@@ -48,37 +37,33 @@ var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
|
48
37
|
ref: ref
|
|
49
38
|
}));
|
|
50
39
|
});
|
|
51
|
-
|
|
52
40
|
function PopperWrapper(_ref) {
|
|
53
41
|
var isOpen = _ref.isOpen,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
42
|
+
id = _ref.id,
|
|
43
|
+
offset = _ref.offset,
|
|
44
|
+
testId = _ref.testId,
|
|
45
|
+
content = _ref.content,
|
|
46
|
+
fallbackPlacements = _ref.fallbackPlacements,
|
|
47
|
+
onClose = _ref.onClose,
|
|
48
|
+
boundary = _ref.boundary,
|
|
49
|
+
rootBoundary = _ref.rootBoundary,
|
|
50
|
+
shouldFlip = _ref.shouldFlip,
|
|
51
|
+
_ref$placement = _ref.placement,
|
|
52
|
+
placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
|
|
53
|
+
_ref$popupComponent = _ref.popupComponent,
|
|
54
|
+
PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
|
|
55
|
+
_ref$autoFocus = _ref.autoFocus,
|
|
56
|
+
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
57
|
+
triggerRef = _ref.triggerRef,
|
|
58
|
+
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
|
|
72
59
|
var _useState = (0, _react.useState)(null),
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
60
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
61
|
+
popupRef = _useState2[0],
|
|
62
|
+
setPopupRef = _useState2[1];
|
|
77
63
|
var _useState3 = (0, _react.useState)(null),
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
64
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
65
|
+
initialFocusRef = _useState4[0],
|
|
66
|
+
setInitialFocusRef = _useState4[1];
|
|
82
67
|
(0, _useFocusManager.useFocusManager)({
|
|
83
68
|
initialFocusRef: initialFocusRef,
|
|
84
69
|
popupRef: popupRef
|
|
@@ -107,9 +92,9 @@ function PopperWrapper(_ref) {
|
|
|
107
92
|
modifiers: modifiers
|
|
108
93
|
}, function (_ref2) {
|
|
109
94
|
var _ref3 = _ref2.ref,
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
95
|
+
style = _ref2.style,
|
|
96
|
+
placement = _ref2.placement,
|
|
97
|
+
update = _ref2.update;
|
|
113
98
|
return (0, _react2.jsx)(PopupContainer, {
|
|
114
99
|
id: id,
|
|
115
100
|
"data-placement": placement,
|
|
@@ -121,11 +106,11 @@ function PopperWrapper(_ref) {
|
|
|
121
106
|
} else {
|
|
122
107
|
_ref3.current = node;
|
|
123
108
|
}
|
|
124
|
-
|
|
125
109
|
setPopupRef(node);
|
|
126
110
|
}
|
|
127
111
|
},
|
|
128
|
-
style: style
|
|
112
|
+
style: style
|
|
113
|
+
// using tabIndex={-1} would cause a bug where Safari focuses
|
|
129
114
|
// first on the browser address bar when using keyboard
|
|
130
115
|
,
|
|
131
116
|
tabIndex: autoFocus ? 0 : undefined
|
|
@@ -138,8 +123,8 @@ function PopperWrapper(_ref) {
|
|
|
138
123
|
setInitialFocusRef: setInitialFocusRef
|
|
139
124
|
})));
|
|
140
125
|
});
|
|
141
|
-
}
|
|
142
|
-
|
|
126
|
+
}
|
|
143
127
|
|
|
128
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
144
129
|
var _default = PopperWrapper;
|
|
145
130
|
exports.default = _default;
|
package/dist/cjs/popup.js
CHANGED
|
@@ -1,60 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = exports.Popup = void 0;
|
|
9
|
-
|
|
10
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _react2 = require("@emotion/react");
|
|
15
|
-
|
|
16
11
|
var _popper = require("@atlaskit/popper");
|
|
17
|
-
|
|
18
12
|
var _portal = _interopRequireDefault(require("@atlaskit/portal"));
|
|
19
|
-
|
|
20
13
|
var _constants = require("@atlaskit/theme/constants");
|
|
21
|
-
|
|
22
14
|
var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
|
|
23
|
-
|
|
24
15
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
25
|
-
|
|
26
16
|
/** @jsx jsx */
|
|
27
|
-
var defaultLayer = _constants.layers.layer();
|
|
28
17
|
|
|
18
|
+
var defaultLayer = _constants.layers.layer();
|
|
29
19
|
var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
30
20
|
var isOpen = _ref.isOpen,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
21
|
+
id = _ref.id,
|
|
22
|
+
offset = _ref.offset,
|
|
23
|
+
testId = _ref.testId,
|
|
24
|
+
trigger = _ref.trigger,
|
|
25
|
+
content = _ref.content,
|
|
26
|
+
onClose = _ref.onClose,
|
|
27
|
+
boundary = _ref.boundary,
|
|
28
|
+
_ref$rootBoundary = _ref.rootBoundary,
|
|
29
|
+
rootBoundary = _ref$rootBoundary === void 0 ? 'viewport' : _ref$rootBoundary,
|
|
30
|
+
_ref$shouldFlip = _ref.shouldFlip,
|
|
31
|
+
shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
|
|
32
|
+
_ref$placement = _ref.placement,
|
|
33
|
+
placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
|
|
34
|
+
fallbackPlacements = _ref.fallbackPlacements,
|
|
35
|
+
PopupContainer = _ref.popupComponent,
|
|
36
|
+
_ref$autoFocus = _ref.autoFocus,
|
|
37
|
+
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
38
|
+
_ref$zIndex = _ref.zIndex,
|
|
39
|
+
zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
|
|
40
|
+
_ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
|
|
41
|
+
shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
|
|
53
42
|
var _useState = (0, _react.useState)(null),
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
43
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
44
|
+
triggerRef = _useState2[0],
|
|
45
|
+
setTriggerRef = _useState2[1];
|
|
58
46
|
return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
|
|
59
47
|
var _ref3 = _ref2.ref;
|
|
60
48
|
return trigger({
|
|
@@ -65,7 +53,6 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
65
53
|
} else {
|
|
66
54
|
_ref3.current = node;
|
|
67
55
|
}
|
|
68
|
-
|
|
69
56
|
setTriggerRef(node);
|
|
70
57
|
}
|
|
71
58
|
},
|
|
@@ -1,35 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.RepositionOnUpdate = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
-
|
|
14
10
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
-
|
|
16
11
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
17
12
|
var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
|
|
18
13
|
var children = _ref.children,
|
|
19
|
-
|
|
14
|
+
update = _ref.update;
|
|
20
15
|
// Ref used here to skip update on first render (when refs haven't been set)
|
|
21
16
|
var isFirstRenderRef = (0, _react.useRef)(true);
|
|
22
17
|
(0, _react.useLayoutEffect)(function () {
|
|
23
18
|
if (isFirstRenderRef.current) {
|
|
24
19
|
isFirstRenderRef.current = false;
|
|
25
20
|
return;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
}
|
|
22
|
+
// callback function from popper that repositions pop-up on content Update
|
|
29
23
|
update();
|
|
30
|
-
}, [update]);
|
|
24
|
+
}, [update]);
|
|
31
25
|
|
|
26
|
+
// wrapping in fragment to make TS happy (known issue with FC returning children)
|
|
32
27
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
|
|
33
28
|
};
|
|
34
|
-
|
|
35
29
|
exports.RepositionOnUpdate = RepositionOnUpdate;
|
|
@@ -1,66 +1,54 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.useCloseManager = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = require("react");
|
|
11
|
-
|
|
12
9
|
var _bindEventListener = require("bind-event-listener");
|
|
13
|
-
|
|
14
10
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
15
|
-
|
|
16
11
|
var useCloseManager = function useCloseManager(_ref) {
|
|
17
12
|
var isOpen = _ref.isOpen,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
onClose = _ref.onClose,
|
|
14
|
+
popupRef = _ref.popupRef,
|
|
15
|
+
triggerRef = _ref.triggerRef,
|
|
16
|
+
capture = _ref.shouldUseCaptureOnOutsideClick;
|
|
22
17
|
(0, _react.useEffect)(function () {
|
|
23
18
|
if (!isOpen || !popupRef) {
|
|
24
19
|
return _noop.default;
|
|
25
20
|
}
|
|
26
|
-
|
|
27
21
|
var closePopup = function closePopup(event) {
|
|
28
22
|
if (onClose) {
|
|
29
23
|
onClose(event);
|
|
30
24
|
}
|
|
31
|
-
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// This check is required for cases where components like
|
|
32
28
|
// Select or DDM are placed inside a Popup. A click
|
|
33
29
|
// on a MenuItem or Option would close the Popup, without registering
|
|
34
30
|
// a click on DDM/Select.
|
|
35
31
|
// Users would have to call `onClose` manually to close the Popup in these cases.
|
|
36
32
|
// You can see the bug in action here:
|
|
37
33
|
// https://codesandbox.io/s/atlaskitpopup-default-forked-2eb87?file=/example.tsx:0-1788
|
|
38
|
-
|
|
39
|
-
|
|
40
34
|
var onClick = function onClick(event) {
|
|
41
35
|
var target = event.target;
|
|
42
36
|
var doesDomNodeExist = document.body.contains(target);
|
|
43
|
-
|
|
44
37
|
if (!doesDomNodeExist) {
|
|
45
38
|
return;
|
|
46
39
|
}
|
|
47
|
-
|
|
48
40
|
var isClickOnPopup = popupRef && popupRef.contains(target);
|
|
49
41
|
var isClickOnTrigger = triggerRef && triggerRef.contains(target);
|
|
50
|
-
|
|
51
42
|
if (!isClickOnPopup && !isClickOnTrigger) {
|
|
52
43
|
closePopup(event);
|
|
53
44
|
}
|
|
54
45
|
};
|
|
55
|
-
|
|
56
46
|
var onKeyDown = function onKeyDown(event) {
|
|
57
47
|
var key = event.key;
|
|
58
|
-
|
|
59
48
|
if (key === 'Escape' || key === 'Esc') {
|
|
60
49
|
closePopup(event);
|
|
61
50
|
}
|
|
62
51
|
};
|
|
63
|
-
|
|
64
52
|
var unbind = (0, _bindEventListener.bindAll)(window, [{
|
|
65
53
|
type: 'click',
|
|
66
54
|
listener: onClick,
|
|
@@ -74,5 +62,4 @@ var useCloseManager = function useCloseManager(_ref) {
|
|
|
74
62
|
return unbind;
|
|
75
63
|
}, [isOpen, onClose, popupRef, triggerRef, capture]);
|
|
76
64
|
};
|
|
77
|
-
|
|
78
65
|
exports.useCloseManager = useCloseManager;
|
|
@@ -1,26 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.useFocusManager = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = require("react");
|
|
11
|
-
|
|
12
9
|
var _focusTrap = _interopRequireDefault(require("focus-trap"));
|
|
13
|
-
|
|
14
10
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
15
|
-
|
|
16
11
|
var useFocusManager = function useFocusManager(_ref) {
|
|
17
12
|
var popupRef = _ref.popupRef,
|
|
18
|
-
|
|
13
|
+
initialFocusRef = _ref.initialFocusRef;
|
|
19
14
|
(0, _react.useEffect)(function () {
|
|
20
15
|
if (!popupRef) {
|
|
21
16
|
return _noop.default;
|
|
22
17
|
}
|
|
23
|
-
|
|
24
18
|
var trapConfig = {
|
|
25
19
|
clickOutsideDeactivates: true,
|
|
26
20
|
escapeDeactivates: true,
|
|
@@ -28,8 +22,9 @@ var useFocusManager = function useFocusManager(_ref) {
|
|
|
28
22
|
fallbackFocus: popupRef,
|
|
29
23
|
returnFocusOnDeactivate: true
|
|
30
24
|
};
|
|
31
|
-
var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
|
|
25
|
+
var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
|
|
32
26
|
|
|
27
|
+
// wait for the popup to reposition itself before we focus
|
|
33
28
|
var frameId = requestAnimationFrame(function () {
|
|
34
29
|
frameId = null;
|
|
35
30
|
focusTrap.activate();
|
|
@@ -39,10 +34,8 @@ var useFocusManager = function useFocusManager(_ref) {
|
|
|
39
34
|
cancelAnimationFrame(frameId);
|
|
40
35
|
frameId = null;
|
|
41
36
|
}
|
|
42
|
-
|
|
43
37
|
focusTrap.deactivate();
|
|
44
38
|
};
|
|
45
39
|
}, [popupRef, initialFocusRef]);
|
|
46
40
|
};
|
|
47
|
-
|
|
48
41
|
exports.useFocusManager = useFocusManager;
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
|
|
3
2
|
/** @jsx jsx */
|
|
4
3
|
import { forwardRef, useMemo, useState } from 'react';
|
|
5
4
|
import { css, jsx } from '@emotion/react';
|
|
@@ -27,7 +26,6 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => jsx("div",
|
|
|
27
26
|
}, props, {
|
|
28
27
|
ref: ref
|
|
29
28
|
})));
|
|
30
|
-
|
|
31
29
|
function PopperWrapper({
|
|
32
30
|
isOpen,
|
|
33
31
|
id,
|
|
@@ -88,11 +86,11 @@ function PopperWrapper({
|
|
|
88
86
|
} else {
|
|
89
87
|
ref.current = node;
|
|
90
88
|
}
|
|
91
|
-
|
|
92
89
|
setPopupRef(node);
|
|
93
90
|
}
|
|
94
91
|
},
|
|
95
|
-
style: style
|
|
92
|
+
style: style
|
|
93
|
+
// using tabIndex={-1} would cause a bug where Safari focuses
|
|
96
94
|
// first on the browser address bar when using keyboard
|
|
97
95
|
,
|
|
98
96
|
tabIndex: autoFocus ? 0 : undefined
|
|
@@ -105,7 +103,7 @@ function PopperWrapper({
|
|
|
105
103
|
setInitialFocusRef
|
|
106
104
|
})));
|
|
107
105
|
});
|
|
108
|
-
}
|
|
109
|
-
|
|
106
|
+
}
|
|
110
107
|
|
|
108
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
111
109
|
export default PopperWrapper;
|
package/dist/es2019/popup.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
2
|
-
|
|
3
2
|
/** @jsx jsx */
|
|
4
3
|
import { memo, useState } from 'react';
|
|
5
4
|
import { jsx } from '@emotion/react';
|
|
@@ -38,7 +37,6 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
38
37
|
} else {
|
|
39
38
|
ref.current = node;
|
|
40
39
|
}
|
|
41
|
-
|
|
42
40
|
setTriggerRef(node);
|
|
43
41
|
}
|
|
44
42
|
},
|
|
@@ -10,11 +10,11 @@ export const RepositionOnUpdate = ({
|
|
|
10
10
|
if (isFirstRenderRef.current) {
|
|
11
11
|
isFirstRenderRef.current = false;
|
|
12
12
|
return;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
}
|
|
14
|
+
// callback function from popper that repositions pop-up on content Update
|
|
16
15
|
update();
|
|
17
|
-
}, [update]);
|
|
16
|
+
}, [update]);
|
|
18
17
|
|
|
18
|
+
// wrapping in fragment to make TS happy (known issue with FC returning children)
|
|
19
19
|
return /*#__PURE__*/React.createElement(Fragment, null, children);
|
|
20
20
|
};
|
|
@@ -12,48 +12,41 @@ export const useCloseManager = ({
|
|
|
12
12
|
if (!isOpen || !popupRef) {
|
|
13
13
|
return noop;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
15
|
const closePopup = event => {
|
|
17
16
|
if (onClose) {
|
|
18
17
|
onClose(event);
|
|
19
18
|
}
|
|
20
|
-
};
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
// This check is required for cases where components like
|
|
21
22
|
// Select or DDM are placed inside a Popup. A click
|
|
22
23
|
// on a MenuItem or Option would close the Popup, without registering
|
|
23
24
|
// a click on DDM/Select.
|
|
24
25
|
// Users would have to call `onClose` manually to close the Popup in these cases.
|
|
25
26
|
// You can see the bug in action here:
|
|
26
27
|
// https://codesandbox.io/s/atlaskitpopup-default-forked-2eb87?file=/example.tsx:0-1788
|
|
27
|
-
|
|
28
|
-
|
|
29
28
|
const onClick = event => {
|
|
30
29
|
const {
|
|
31
30
|
target
|
|
32
31
|
} = event;
|
|
33
32
|
const doesDomNodeExist = document.body.contains(target);
|
|
34
|
-
|
|
35
33
|
if (!doesDomNodeExist) {
|
|
36
34
|
return;
|
|
37
35
|
}
|
|
38
|
-
|
|
39
36
|
const isClickOnPopup = popupRef && popupRef.contains(target);
|
|
40
37
|
const isClickOnTrigger = triggerRef && triggerRef.contains(target);
|
|
41
|
-
|
|
42
38
|
if (!isClickOnPopup && !isClickOnTrigger) {
|
|
43
39
|
closePopup(event);
|
|
44
40
|
}
|
|
45
41
|
};
|
|
46
|
-
|
|
47
42
|
const onKeyDown = event => {
|
|
48
43
|
const {
|
|
49
44
|
key
|
|
50
45
|
} = event;
|
|
51
|
-
|
|
52
46
|
if (key === 'Escape' || key === 'Esc') {
|
|
53
47
|
closePopup(event);
|
|
54
48
|
}
|
|
55
49
|
};
|
|
56
|
-
|
|
57
50
|
const unbind = bindAll(window, [{
|
|
58
51
|
type: 'click',
|
|
59
52
|
listener: onClick,
|
|
@@ -9,7 +9,6 @@ export const useFocusManager = ({
|
|
|
9
9
|
if (!popupRef) {
|
|
10
10
|
return noop;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
12
|
const trapConfig = {
|
|
14
13
|
clickOutsideDeactivates: true,
|
|
15
14
|
escapeDeactivates: true,
|
|
@@ -17,8 +16,9 @@ export const useFocusManager = ({
|
|
|
17
16
|
fallbackFocus: popupRef,
|
|
18
17
|
returnFocusOnDeactivate: true
|
|
19
18
|
};
|
|
20
|
-
const focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
19
|
+
const focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
21
20
|
|
|
21
|
+
// wait for the popup to reposition itself before we focus
|
|
22
22
|
let frameId = requestAnimationFrame(() => {
|
|
23
23
|
frameId = null;
|
|
24
24
|
focusTrap.activate();
|
|
@@ -28,7 +28,6 @@ export const useFocusManager = ({
|
|
|
28
28
|
cancelAnimationFrame(frameId);
|
|
29
29
|
frameId = null;
|
|
30
30
|
}
|
|
31
|
-
|
|
32
31
|
focusTrap.deactivate();
|
|
33
32
|
};
|
|
34
33
|
}, [popupRef, initialFocusRef]);
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
-
|
|
4
3
|
/** @jsx jsx */
|
|
5
4
|
import { forwardRef, useMemo, useState } from 'react';
|
|
6
5
|
import { css, jsx } from '@emotion/react';
|
|
@@ -30,37 +29,33 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
30
29
|
ref: ref
|
|
31
30
|
}));
|
|
32
31
|
});
|
|
33
|
-
|
|
34
32
|
function PopperWrapper(_ref) {
|
|
35
33
|
var isOpen = _ref.isOpen,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
34
|
+
id = _ref.id,
|
|
35
|
+
offset = _ref.offset,
|
|
36
|
+
testId = _ref.testId,
|
|
37
|
+
content = _ref.content,
|
|
38
|
+
fallbackPlacements = _ref.fallbackPlacements,
|
|
39
|
+
onClose = _ref.onClose,
|
|
40
|
+
boundary = _ref.boundary,
|
|
41
|
+
rootBoundary = _ref.rootBoundary,
|
|
42
|
+
shouldFlip = _ref.shouldFlip,
|
|
43
|
+
_ref$placement = _ref.placement,
|
|
44
|
+
placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
|
|
45
|
+
_ref$popupComponent = _ref.popupComponent,
|
|
46
|
+
PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
|
|
47
|
+
_ref$autoFocus = _ref.autoFocus,
|
|
48
|
+
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
49
|
+
triggerRef = _ref.triggerRef,
|
|
50
|
+
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
|
|
54
51
|
var _useState = useState(null),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
52
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
53
|
+
popupRef = _useState2[0],
|
|
54
|
+
setPopupRef = _useState2[1];
|
|
59
55
|
var _useState3 = useState(null),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
57
|
+
initialFocusRef = _useState4[0],
|
|
58
|
+
setInitialFocusRef = _useState4[1];
|
|
64
59
|
useFocusManager({
|
|
65
60
|
initialFocusRef: initialFocusRef,
|
|
66
61
|
popupRef: popupRef
|
|
@@ -89,9 +84,9 @@ function PopperWrapper(_ref) {
|
|
|
89
84
|
modifiers: modifiers
|
|
90
85
|
}, function (_ref2) {
|
|
91
86
|
var _ref3 = _ref2.ref,
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
87
|
+
style = _ref2.style,
|
|
88
|
+
placement = _ref2.placement,
|
|
89
|
+
update = _ref2.update;
|
|
95
90
|
return jsx(PopupContainer, {
|
|
96
91
|
id: id,
|
|
97
92
|
"data-placement": placement,
|
|
@@ -103,11 +98,11 @@ function PopperWrapper(_ref) {
|
|
|
103
98
|
} else {
|
|
104
99
|
_ref3.current = node;
|
|
105
100
|
}
|
|
106
|
-
|
|
107
101
|
setPopupRef(node);
|
|
108
102
|
}
|
|
109
103
|
},
|
|
110
|
-
style: style
|
|
104
|
+
style: style
|
|
105
|
+
// using tabIndex={-1} would cause a bug where Safari focuses
|
|
111
106
|
// first on the browser address bar when using keyboard
|
|
112
107
|
,
|
|
113
108
|
tabIndex: autoFocus ? 0 : undefined
|
|
@@ -120,7 +115,7 @@ function PopperWrapper(_ref) {
|
|
|
120
115
|
setInitialFocusRef: setInitialFocusRef
|
|
121
116
|
})));
|
|
122
117
|
});
|
|
123
|
-
}
|
|
124
|
-
|
|
118
|
+
}
|
|
125
119
|
|
|
120
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
126
121
|
export default PopperWrapper;
|
package/dist/esm/popup.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
|
|
3
2
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
4
|
-
|
|
5
3
|
/** @jsx jsx */
|
|
6
4
|
import { memo, useState } from 'react';
|
|
7
5
|
import { jsx } from '@emotion/react';
|
|
@@ -12,33 +10,31 @@ import PopperWrapper from './popper-wrapper';
|
|
|
12
10
|
var defaultLayer = layers.layer();
|
|
13
11
|
export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
14
12
|
var isOpen = _ref.isOpen,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
13
|
+
id = _ref.id,
|
|
14
|
+
offset = _ref.offset,
|
|
15
|
+
testId = _ref.testId,
|
|
16
|
+
trigger = _ref.trigger,
|
|
17
|
+
content = _ref.content,
|
|
18
|
+
onClose = _ref.onClose,
|
|
19
|
+
boundary = _ref.boundary,
|
|
20
|
+
_ref$rootBoundary = _ref.rootBoundary,
|
|
21
|
+
rootBoundary = _ref$rootBoundary === void 0 ? 'viewport' : _ref$rootBoundary,
|
|
22
|
+
_ref$shouldFlip = _ref.shouldFlip,
|
|
23
|
+
shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
|
|
24
|
+
_ref$placement = _ref.placement,
|
|
25
|
+
placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
|
|
26
|
+
fallbackPlacements = _ref.fallbackPlacements,
|
|
27
|
+
PopupContainer = _ref.popupComponent,
|
|
28
|
+
_ref$autoFocus = _ref.autoFocus,
|
|
29
|
+
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
30
|
+
_ref$zIndex = _ref.zIndex,
|
|
31
|
+
zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
|
|
32
|
+
_ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
|
|
33
|
+
shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
|
|
37
34
|
var _useState = useState(null),
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
36
|
+
triggerRef = _useState2[0],
|
|
37
|
+
setTriggerRef = _useState2[1];
|
|
42
38
|
return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
|
|
43
39
|
var _ref3 = _ref2.ref;
|
|
44
40
|
return trigger({
|
|
@@ -49,7 +45,6 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
49
45
|
} else {
|
|
50
46
|
_ref3.current = node;
|
|
51
47
|
}
|
|
52
|
-
|
|
53
48
|
setTriggerRef(node);
|
|
54
49
|
}
|
|
55
50
|
},
|
|
@@ -2,18 +2,18 @@ import React, { Fragment, useLayoutEffect, useRef } from 'react';
|
|
|
2
2
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
3
3
|
export var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
|
|
4
4
|
var children = _ref.children,
|
|
5
|
-
|
|
5
|
+
update = _ref.update;
|
|
6
6
|
// Ref used here to skip update on first render (when refs haven't been set)
|
|
7
7
|
var isFirstRenderRef = useRef(true);
|
|
8
8
|
useLayoutEffect(function () {
|
|
9
9
|
if (isFirstRenderRef.current) {
|
|
10
10
|
isFirstRenderRef.current = false;
|
|
11
11
|
return;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
}
|
|
13
|
+
// callback function from popper that repositions pop-up on content Update
|
|
15
14
|
update();
|
|
16
|
-
}, [update]);
|
|
15
|
+
}, [update]);
|
|
17
16
|
|
|
17
|
+
// wrapping in fragment to make TS happy (known issue with FC returning children)
|
|
18
18
|
return /*#__PURE__*/React.createElement(Fragment, null, children);
|
|
19
19
|
};
|
|
@@ -3,52 +3,45 @@ import { bindAll } from 'bind-event-listener';
|
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
4
|
export var useCloseManager = function useCloseManager(_ref) {
|
|
5
5
|
var isOpen = _ref.isOpen,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
onClose = _ref.onClose,
|
|
7
|
+
popupRef = _ref.popupRef,
|
|
8
|
+
triggerRef = _ref.triggerRef,
|
|
9
|
+
capture = _ref.shouldUseCaptureOnOutsideClick;
|
|
10
10
|
useEffect(function () {
|
|
11
11
|
if (!isOpen || !popupRef) {
|
|
12
12
|
return noop;
|
|
13
13
|
}
|
|
14
|
-
|
|
15
14
|
var closePopup = function closePopup(event) {
|
|
16
15
|
if (onClose) {
|
|
17
16
|
onClose(event);
|
|
18
17
|
}
|
|
19
|
-
};
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// This check is required for cases where components like
|
|
20
21
|
// Select or DDM are placed inside a Popup. A click
|
|
21
22
|
// on a MenuItem or Option would close the Popup, without registering
|
|
22
23
|
// a click on DDM/Select.
|
|
23
24
|
// Users would have to call `onClose` manually to close the Popup in these cases.
|
|
24
25
|
// You can see the bug in action here:
|
|
25
26
|
// https://codesandbox.io/s/atlaskitpopup-default-forked-2eb87?file=/example.tsx:0-1788
|
|
26
|
-
|
|
27
|
-
|
|
28
27
|
var onClick = function onClick(event) {
|
|
29
28
|
var target = event.target;
|
|
30
29
|
var doesDomNodeExist = document.body.contains(target);
|
|
31
|
-
|
|
32
30
|
if (!doesDomNodeExist) {
|
|
33
31
|
return;
|
|
34
32
|
}
|
|
35
|
-
|
|
36
33
|
var isClickOnPopup = popupRef && popupRef.contains(target);
|
|
37
34
|
var isClickOnTrigger = triggerRef && triggerRef.contains(target);
|
|
38
|
-
|
|
39
35
|
if (!isClickOnPopup && !isClickOnTrigger) {
|
|
40
36
|
closePopup(event);
|
|
41
37
|
}
|
|
42
38
|
};
|
|
43
|
-
|
|
44
39
|
var onKeyDown = function onKeyDown(event) {
|
|
45
40
|
var key = event.key;
|
|
46
|
-
|
|
47
41
|
if (key === 'Escape' || key === 'Esc') {
|
|
48
42
|
closePopup(event);
|
|
49
43
|
}
|
|
50
44
|
};
|
|
51
|
-
|
|
52
45
|
var unbind = bindAll(window, [{
|
|
53
46
|
type: 'click',
|
|
54
47
|
listener: onClick,
|
|
@@ -3,12 +3,11 @@ import createFocusTrap from 'focus-trap';
|
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
4
|
export var useFocusManager = function useFocusManager(_ref) {
|
|
5
5
|
var popupRef = _ref.popupRef,
|
|
6
|
-
|
|
6
|
+
initialFocusRef = _ref.initialFocusRef;
|
|
7
7
|
useEffect(function () {
|
|
8
8
|
if (!popupRef) {
|
|
9
9
|
return noop;
|
|
10
10
|
}
|
|
11
|
-
|
|
12
11
|
var trapConfig = {
|
|
13
12
|
clickOutsideDeactivates: true,
|
|
14
13
|
escapeDeactivates: true,
|
|
@@ -16,8 +15,9 @@ export var useFocusManager = function useFocusManager(_ref) {
|
|
|
16
15
|
fallbackFocus: popupRef,
|
|
17
16
|
returnFocusOnDeactivate: true
|
|
18
17
|
};
|
|
19
|
-
var focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
18
|
+
var focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
20
19
|
|
|
20
|
+
// wait for the popup to reposition itself before we focus
|
|
21
21
|
var frameId = requestAnimationFrame(function () {
|
|
22
22
|
frameId = null;
|
|
23
23
|
focusTrap.activate();
|
|
@@ -27,7 +27,6 @@ export var useFocusManager = function useFocusManager(_ref) {
|
|
|
27
27
|
cancelAnimationFrame(frameId);
|
|
28
28
|
frameId = null;
|
|
29
29
|
}
|
|
30
|
-
|
|
31
30
|
focusTrap.deactivate();
|
|
32
31
|
};
|
|
33
32
|
}, [popupRef, initialFocusRef]);
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.5",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@atlaskit/popper": "^5.4.0",
|
|
33
33
|
"@atlaskit/portal": "^4.0.0",
|
|
34
34
|
"@atlaskit/theme": "^12.2.0",
|
|
35
|
-
"@atlaskit/tokens": "^0.
|
|
35
|
+
"@atlaskit/tokens": "^1.0.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
37
37
|
"@emotion/react": "^11.7.1",
|
|
38
38
|
"bind-event-listener": "^2.1.1",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@atlaskit/menu": "^1.4.0",
|
|
50
50
|
"@atlaskit/radio": "^5.4.0",
|
|
51
51
|
"@atlaskit/section-message": "^6.3.0",
|
|
52
|
-
"@atlaskit/select": "^16.
|
|
52
|
+
"@atlaskit/select": "^16.1.0",
|
|
53
53
|
"@atlaskit/ssr": "*",
|
|
54
54
|
"@atlaskit/textfield": "^5.3.0",
|
|
55
55
|
"@atlaskit/toggle": "^12.5.0",
|
package/report.api.md
CHANGED