@atlaskit/popup 1.12.0 → 1.13.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 +12 -0
- package/dist/cjs/popper-wrapper.js +10 -3
- package/dist/cjs/popup.js +4 -1
- package/dist/cjs/reposition-on-update.js +2 -2
- package/dist/cjs/use-close-manager.js +4 -3
- package/dist/cjs/use-focus-manager.js +4 -3
- package/dist/es2019/popper-wrapper.js +10 -3
- package/dist/es2019/popup.js +3 -1
- package/dist/es2019/use-close-manager.js +4 -3
- package/dist/es2019/use-focus-manager.js +4 -3
- package/dist/esm/popper-wrapper.js +10 -3
- package/dist/esm/popup.js +4 -1
- package/dist/esm/use-close-manager.js +4 -3
- package/dist/esm/use-focus-manager.js +4 -3
- package/dist/types/popper-wrapper.d.ts +1 -1
- package/dist/types/reposition-on-update.d.ts +2 -2
- package/dist/types/types.d.ts +10 -3
- package/dist/types/use-close-manager.d.ts +1 -1
- package/dist/types/use-focus-manager.d.ts +1 -1
- package/dist/types-ts4.5/popper-wrapper.d.ts +1 -1
- package/dist/types-ts4.5/reposition-on-update.d.ts +2 -2
- package/dist/types-ts4.5/types.d.ts +10 -3
- package/dist/types-ts4.5/use-close-manager.d.ts +1 -1
- package/dist/types-ts4.5/use-focus-manager.d.ts +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 1.13.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#80085](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80085) [`7febfed958dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7febfed958dd) - Update usage of `React.FC` to explicity include `children`
|
|
8
|
+
|
|
9
|
+
## 1.13.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#70573](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70573) [`c8fa9cdd08e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c8fa9cdd08e4) - Accessibility changes. Add a new optional prop `shouldDisableFocusLock`. We are testing the ability to close the popup by pressing the Tab key when `shouldDisableFocusLock` is `true` and `shouldRenderToParent` is `true` behind a feature flag. This is necessary for the dropdown menu to work correctly. If this fix is successful it will be available in a later release.
|
|
14
|
+
|
|
3
15
|
## 1.12.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -75,7 +75,8 @@ function PopperWrapper(_ref) {
|
|
|
75
75
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
76
76
|
triggerRef = _ref.triggerRef,
|
|
77
77
|
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
|
|
78
|
-
shouldRenderToParent = _ref.shouldRenderToParent
|
|
78
|
+
shouldRenderToParent = _ref.shouldRenderToParent,
|
|
79
|
+
shouldDisableFocusLock = _ref.shouldDisableFocusLock;
|
|
79
80
|
var _useState = (0, _react.useState)(null),
|
|
80
81
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
81
82
|
popupRef = _useState2[0],
|
|
@@ -84,16 +85,22 @@ function PopperWrapper(_ref) {
|
|
|
84
85
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
85
86
|
initialFocusRef = _useState4[0],
|
|
86
87
|
setInitialFocusRef = _useState4[1];
|
|
88
|
+
|
|
89
|
+
// We have cases when we need to prohibit focus locking
|
|
90
|
+
// e.g. in DropdownMenu
|
|
91
|
+
var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
|
|
87
92
|
(0, _useFocusManager.useFocusManager)({
|
|
88
93
|
initialFocusRef: initialFocusRef,
|
|
89
|
-
popupRef: popupRef
|
|
94
|
+
popupRef: popupRef,
|
|
95
|
+
shouldCloseOnTab: shouldCloseOnTab
|
|
90
96
|
});
|
|
91
97
|
(0, _useCloseManager.useCloseManager)({
|
|
92
98
|
isOpen: isOpen,
|
|
93
99
|
onClose: onClose,
|
|
94
100
|
popupRef: popupRef,
|
|
95
101
|
triggerRef: triggerRef,
|
|
96
|
-
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
|
|
102
|
+
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
103
|
+
shouldCloseOnTab: shouldCloseOnTab
|
|
97
104
|
});
|
|
98
105
|
var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
|
|
99
106
|
currentLevel = _UNSAFE_useLayering.currentLevel;
|
package/dist/cjs/popup.js
CHANGED
|
@@ -42,7 +42,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
42
42
|
_ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
|
|
43
43
|
shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
|
|
44
44
|
_ref$shouldRenderToPa = _ref.shouldRenderToParent,
|
|
45
|
-
shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa
|
|
45
|
+
shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
|
|
46
|
+
_ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
|
|
47
|
+
shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
|
|
46
48
|
var _useState = (0, _react.useState)(null),
|
|
47
49
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
48
50
|
triggerRef = _useState2[0],
|
|
@@ -92,6 +94,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
92
94
|
autoFocus: autoFocus,
|
|
93
95
|
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
94
96
|
shouldRenderToParent: shouldRenderToParent,
|
|
97
|
+
shouldDisableFocusLock: shouldDisableFocusLock,
|
|
95
98
|
triggerRef: triggerRef
|
|
96
99
|
}));
|
|
97
100
|
return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.RepositionOnUpdate = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
function _getRequireWildcardCache(
|
|
10
|
-
function _interopRequireWildcard(
|
|
9
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
10
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
11
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
12
12
|
var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
|
|
13
13
|
var children = _ref.children,
|
|
@@ -14,7 +14,8 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
|
|
|
14
14
|
onClose = _ref.onClose,
|
|
15
15
|
popupRef = _ref.popupRef,
|
|
16
16
|
triggerRef = _ref.triggerRef,
|
|
17
|
-
capture = _ref.shouldUseCaptureOnOutsideClick
|
|
17
|
+
capture = _ref.shouldUseCaptureOnOutsideClick,
|
|
18
|
+
shouldCloseOnTab = _ref.shouldCloseOnTab;
|
|
18
19
|
var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
|
|
19
20
|
isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
|
|
20
21
|
(0, _react.useEffect)(function () {
|
|
@@ -51,7 +52,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
|
|
|
51
52
|
return;
|
|
52
53
|
}
|
|
53
54
|
var key = event.key;
|
|
54
|
-
if (key === 'Escape' || key === 'Esc') {
|
|
55
|
+
if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
|
|
55
56
|
closePopup(event);
|
|
56
57
|
}
|
|
57
58
|
};
|
|
@@ -66,5 +67,5 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
|
|
|
66
67
|
listener: onKeyDown
|
|
67
68
|
}]);
|
|
68
69
|
return unbind;
|
|
69
|
-
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
|
|
70
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
|
|
70
71
|
};
|
|
@@ -10,9 +10,10 @@ var _focusTrap = _interopRequireDefault(require("focus-trap"));
|
|
|
10
10
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
11
11
|
var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
|
|
12
12
|
var initialFocusRef = _ref.initialFocusRef,
|
|
13
|
-
popupRef = _ref.popupRef
|
|
13
|
+
popupRef = _ref.popupRef,
|
|
14
|
+
shouldCloseOnTab = _ref.shouldCloseOnTab;
|
|
14
15
|
(0, _react.useEffect)(function () {
|
|
15
|
-
if (!popupRef) {
|
|
16
|
+
if (!popupRef || shouldCloseOnTab) {
|
|
16
17
|
return _noop.default;
|
|
17
18
|
}
|
|
18
19
|
var trapConfig = {
|
|
@@ -37,5 +38,5 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
|
|
|
37
38
|
}
|
|
38
39
|
focusTrap.deactivate();
|
|
39
40
|
};
|
|
40
|
-
}, [popupRef, initialFocusRef]);
|
|
41
|
+
}, [popupRef, initialFocusRef, shouldCloseOnTab]);
|
|
41
42
|
};
|
|
@@ -64,20 +64,27 @@ function PopperWrapper({
|
|
|
64
64
|
autoFocus = true,
|
|
65
65
|
triggerRef,
|
|
66
66
|
shouldUseCaptureOnOutsideClick,
|
|
67
|
-
shouldRenderToParent
|
|
67
|
+
shouldRenderToParent,
|
|
68
|
+
shouldDisableFocusLock
|
|
68
69
|
}) {
|
|
69
70
|
const [popupRef, setPopupRef] = useState(null);
|
|
70
71
|
const [initialFocusRef, setInitialFocusRef] = useState(null);
|
|
72
|
+
|
|
73
|
+
// We have cases when we need to prohibit focus locking
|
|
74
|
+
// e.g. in DropdownMenu
|
|
75
|
+
const shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
|
|
71
76
|
useFocusManager({
|
|
72
77
|
initialFocusRef,
|
|
73
|
-
popupRef
|
|
78
|
+
popupRef,
|
|
79
|
+
shouldCloseOnTab
|
|
74
80
|
});
|
|
75
81
|
useCloseManager({
|
|
76
82
|
isOpen,
|
|
77
83
|
onClose,
|
|
78
84
|
popupRef,
|
|
79
85
|
triggerRef,
|
|
80
|
-
shouldUseCaptureOnOutsideClick
|
|
86
|
+
shouldUseCaptureOnOutsideClick,
|
|
87
|
+
shouldCloseOnTab
|
|
81
88
|
});
|
|
82
89
|
const {
|
|
83
90
|
currentLevel
|
package/dist/es2019/popup.js
CHANGED
|
@@ -26,7 +26,8 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
26
26
|
autoFocus = true,
|
|
27
27
|
zIndex = defaultLayer,
|
|
28
28
|
shouldUseCaptureOnOutsideClick = false,
|
|
29
|
-
shouldRenderToParent = false
|
|
29
|
+
shouldRenderToParent = false,
|
|
30
|
+
shouldDisableFocusLock = false
|
|
30
31
|
}) => {
|
|
31
32
|
const [triggerRef, setTriggerRef] = useState(null);
|
|
32
33
|
|
|
@@ -70,6 +71,7 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
70
71
|
autoFocus: autoFocus,
|
|
71
72
|
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
72
73
|
shouldRenderToParent: shouldRenderToParent,
|
|
74
|
+
shouldDisableFocusLock: shouldDisableFocusLock,
|
|
73
75
|
triggerRef: triggerRef
|
|
74
76
|
}));
|
|
75
77
|
return jsx(Manager, null, jsx(Reference, null, ({
|
|
@@ -7,7 +7,8 @@ export const useCloseManager = ({
|
|
|
7
7
|
onClose,
|
|
8
8
|
popupRef,
|
|
9
9
|
triggerRef,
|
|
10
|
-
shouldUseCaptureOnOutsideClick: capture
|
|
10
|
+
shouldUseCaptureOnOutsideClick: capture,
|
|
11
|
+
shouldCloseOnTab
|
|
11
12
|
}) => {
|
|
12
13
|
const {
|
|
13
14
|
isLayerDisabled
|
|
@@ -50,7 +51,7 @@ export const useCloseManager = ({
|
|
|
50
51
|
const {
|
|
51
52
|
key
|
|
52
53
|
} = event;
|
|
53
|
-
if (key === 'Escape' || key === 'Esc') {
|
|
54
|
+
if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
|
|
54
55
|
closePopup(event);
|
|
55
56
|
}
|
|
56
57
|
};
|
|
@@ -65,5 +66,5 @@ export const useCloseManager = ({
|
|
|
65
66
|
listener: onKeyDown
|
|
66
67
|
}]);
|
|
67
68
|
return unbind;
|
|
68
|
-
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
|
|
69
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
|
|
69
70
|
};
|
|
@@ -3,10 +3,11 @@ import createFocusTrap from 'focus-trap';
|
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
4
|
export const useFocusManager = ({
|
|
5
5
|
initialFocusRef,
|
|
6
|
-
popupRef
|
|
6
|
+
popupRef,
|
|
7
|
+
shouldCloseOnTab
|
|
7
8
|
}) => {
|
|
8
9
|
useEffect(() => {
|
|
9
|
-
if (!popupRef) {
|
|
10
|
+
if (!popupRef || shouldCloseOnTab) {
|
|
10
11
|
return noop;
|
|
11
12
|
}
|
|
12
13
|
const trapConfig = {
|
|
@@ -31,5 +32,5 @@ export const useFocusManager = ({
|
|
|
31
32
|
}
|
|
32
33
|
focusTrap.deactivate();
|
|
33
34
|
};
|
|
34
|
-
}, [popupRef, initialFocusRef]);
|
|
35
|
+
}, [popupRef, initialFocusRef, shouldCloseOnTab]);
|
|
35
36
|
};
|
|
@@ -68,7 +68,8 @@ function PopperWrapper(_ref) {
|
|
|
68
68
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
69
69
|
triggerRef = _ref.triggerRef,
|
|
70
70
|
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
|
|
71
|
-
shouldRenderToParent = _ref.shouldRenderToParent
|
|
71
|
+
shouldRenderToParent = _ref.shouldRenderToParent,
|
|
72
|
+
shouldDisableFocusLock = _ref.shouldDisableFocusLock;
|
|
72
73
|
var _useState = useState(null),
|
|
73
74
|
_useState2 = _slicedToArray(_useState, 2),
|
|
74
75
|
popupRef = _useState2[0],
|
|
@@ -77,16 +78,22 @@ function PopperWrapper(_ref) {
|
|
|
77
78
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
78
79
|
initialFocusRef = _useState4[0],
|
|
79
80
|
setInitialFocusRef = _useState4[1];
|
|
81
|
+
|
|
82
|
+
// We have cases when we need to prohibit focus locking
|
|
83
|
+
// e.g. in DropdownMenu
|
|
84
|
+
var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
|
|
80
85
|
useFocusManager({
|
|
81
86
|
initialFocusRef: initialFocusRef,
|
|
82
|
-
popupRef: popupRef
|
|
87
|
+
popupRef: popupRef,
|
|
88
|
+
shouldCloseOnTab: shouldCloseOnTab
|
|
83
89
|
});
|
|
84
90
|
useCloseManager({
|
|
85
91
|
isOpen: isOpen,
|
|
86
92
|
onClose: onClose,
|
|
87
93
|
popupRef: popupRef,
|
|
88
94
|
triggerRef: triggerRef,
|
|
89
|
-
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
|
|
95
|
+
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
96
|
+
shouldCloseOnTab: shouldCloseOnTab
|
|
90
97
|
});
|
|
91
98
|
var _UNSAFE_useLayering = UNSAFE_useLayering(),
|
|
92
99
|
currentLevel = _UNSAFE_useLayering.currentLevel;
|
package/dist/esm/popup.js
CHANGED
|
@@ -34,7 +34,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
34
34
|
_ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
|
|
35
35
|
shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
|
|
36
36
|
_ref$shouldRenderToPa = _ref.shouldRenderToParent,
|
|
37
|
-
shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa
|
|
37
|
+
shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
|
|
38
|
+
_ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
|
|
39
|
+
shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
|
|
38
40
|
var _useState = useState(null),
|
|
39
41
|
_useState2 = _slicedToArray(_useState, 2),
|
|
40
42
|
triggerRef = _useState2[0],
|
|
@@ -84,6 +86,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
84
86
|
autoFocus: autoFocus,
|
|
85
87
|
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
86
88
|
shouldRenderToParent: shouldRenderToParent,
|
|
89
|
+
shouldDisableFocusLock: shouldDisableFocusLock,
|
|
87
90
|
triggerRef: triggerRef
|
|
88
91
|
}));
|
|
89
92
|
return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
|
|
@@ -7,7 +7,8 @@ export var useCloseManager = function useCloseManager(_ref) {
|
|
|
7
7
|
onClose = _ref.onClose,
|
|
8
8
|
popupRef = _ref.popupRef,
|
|
9
9
|
triggerRef = _ref.triggerRef,
|
|
10
|
-
capture = _ref.shouldUseCaptureOnOutsideClick
|
|
10
|
+
capture = _ref.shouldUseCaptureOnOutsideClick,
|
|
11
|
+
shouldCloseOnTab = _ref.shouldCloseOnTab;
|
|
11
12
|
var _UNSAFE_useLayering = UNSAFE_useLayering(),
|
|
12
13
|
isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
|
|
13
14
|
useEffect(function () {
|
|
@@ -44,7 +45,7 @@ export var useCloseManager = function useCloseManager(_ref) {
|
|
|
44
45
|
return;
|
|
45
46
|
}
|
|
46
47
|
var key = event.key;
|
|
47
|
-
if (key === 'Escape' || key === 'Esc') {
|
|
48
|
+
if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
|
|
48
49
|
closePopup(event);
|
|
49
50
|
}
|
|
50
51
|
};
|
|
@@ -59,5 +60,5 @@ export var useCloseManager = function useCloseManager(_ref) {
|
|
|
59
60
|
listener: onKeyDown
|
|
60
61
|
}]);
|
|
61
62
|
return unbind;
|
|
62
|
-
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
|
|
63
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
|
|
63
64
|
};
|
|
@@ -3,9 +3,10 @@ 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 initialFocusRef = _ref.initialFocusRef,
|
|
6
|
-
popupRef = _ref.popupRef
|
|
6
|
+
popupRef = _ref.popupRef,
|
|
7
|
+
shouldCloseOnTab = _ref.shouldCloseOnTab;
|
|
7
8
|
useEffect(function () {
|
|
8
|
-
if (!popupRef) {
|
|
9
|
+
if (!popupRef || shouldCloseOnTab) {
|
|
9
10
|
return noop;
|
|
10
11
|
}
|
|
11
12
|
var trapConfig = {
|
|
@@ -30,5 +31,5 @@ export var useFocusManager = function useFocusManager(_ref) {
|
|
|
30
31
|
}
|
|
31
32
|
focusTrap.deactivate();
|
|
32
33
|
};
|
|
33
|
-
}, [popupRef, initialFocusRef]);
|
|
34
|
+
}, [popupRef, initialFocusRef, shouldCloseOnTab]);
|
|
34
35
|
};
|
|
@@ -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, shouldRenderToParent, }: 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, shouldDisableFocusLock, }: PopperWrapperProps): jsx.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { RepositionOnUpdateProps } from './types';
|
|
3
|
-
export declare const RepositionOnUpdate:
|
|
3
|
+
export declare const RepositionOnUpdate: ({ children, update, }: RepositionOnUpdateProps) => JSX.Element;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ComponentType, CSSProperties, Dispatch, ReactNode, Ref, SetStateAction } from 'react';
|
|
1
|
+
import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
|
|
2
2
|
import { Placement, PopperChildrenProps } from '@atlaskit/popper';
|
|
3
3
|
export interface TriggerProps {
|
|
4
4
|
ref: Ref<any>;
|
|
@@ -144,6 +144,11 @@ interface BaseProps {
|
|
|
144
144
|
* Defaults to `false`.
|
|
145
145
|
*/
|
|
146
146
|
shouldRenderToParent?: boolean;
|
|
147
|
+
/**
|
|
148
|
+
* Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
|
|
149
|
+
* Defaults to `false`.
|
|
150
|
+
*/
|
|
151
|
+
shouldDisableFocusLock?: boolean;
|
|
147
152
|
}
|
|
148
153
|
export interface PopupProps extends BaseProps {
|
|
149
154
|
/**
|
|
@@ -166,12 +171,14 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
|
|
|
166
171
|
popupRef: PopupRef;
|
|
167
172
|
triggerRef: TriggerRef;
|
|
168
173
|
shouldUseCaptureOnOutsideClick?: boolean;
|
|
174
|
+
shouldCloseOnTab?: boolean;
|
|
169
175
|
};
|
|
170
176
|
export type FocusManagerHook = {
|
|
171
177
|
initialFocusRef: HTMLElement | null;
|
|
172
178
|
popupRef: PopupRef;
|
|
179
|
+
shouldCloseOnTab?: boolean;
|
|
173
180
|
};
|
|
174
|
-
export type RepositionOnUpdateProps = {
|
|
181
|
+
export type RepositionOnUpdateProps = PropsWithChildren<{
|
|
175
182
|
update: PopperChildrenProps['update'];
|
|
176
|
-
}
|
|
183
|
+
}>;
|
|
177
184
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CloseManagerHook } from './types';
|
|
2
|
-
export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;
|
|
2
|
+
export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { FocusManagerHook } from './types';
|
|
2
|
-
export declare const useFocusManager: ({ initialFocusRef, popupRef, }: FocusManagerHook) => void;
|
|
2
|
+
export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;
|
|
@@ -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, shouldRenderToParent, }: 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, shouldDisableFocusLock, }: PopperWrapperProps): jsx.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { RepositionOnUpdateProps } from './types';
|
|
3
|
-
export declare const RepositionOnUpdate:
|
|
3
|
+
export declare const RepositionOnUpdate: ({ children, update, }: RepositionOnUpdateProps) => JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ComponentType, CSSProperties, Dispatch, ReactNode, Ref, SetStateAction } from 'react';
|
|
1
|
+
import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
|
|
2
2
|
import { Placement, PopperChildrenProps } from '@atlaskit/popper';
|
|
3
3
|
export interface TriggerProps {
|
|
4
4
|
ref: Ref<any>;
|
|
@@ -147,6 +147,11 @@ interface BaseProps {
|
|
|
147
147
|
* Defaults to `false`.
|
|
148
148
|
*/
|
|
149
149
|
shouldRenderToParent?: boolean;
|
|
150
|
+
/**
|
|
151
|
+
* Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
|
|
152
|
+
* Defaults to `false`.
|
|
153
|
+
*/
|
|
154
|
+
shouldDisableFocusLock?: boolean;
|
|
150
155
|
}
|
|
151
156
|
export interface PopupProps extends BaseProps {
|
|
152
157
|
/**
|
|
@@ -169,12 +174,14 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
|
|
|
169
174
|
popupRef: PopupRef;
|
|
170
175
|
triggerRef: TriggerRef;
|
|
171
176
|
shouldUseCaptureOnOutsideClick?: boolean;
|
|
177
|
+
shouldCloseOnTab?: boolean;
|
|
172
178
|
};
|
|
173
179
|
export type FocusManagerHook = {
|
|
174
180
|
initialFocusRef: HTMLElement | null;
|
|
175
181
|
popupRef: PopupRef;
|
|
182
|
+
shouldCloseOnTab?: boolean;
|
|
176
183
|
};
|
|
177
|
-
export type RepositionOnUpdateProps = {
|
|
184
|
+
export type RepositionOnUpdateProps = PropsWithChildren<{
|
|
178
185
|
update: PopperChildrenProps['update'];
|
|
179
|
-
}
|
|
186
|
+
}>;
|
|
180
187
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CloseManagerHook } from './types';
|
|
2
|
-
export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;
|
|
2
|
+
export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { FocusManagerHook } from './types';
|
|
2
|
-
export declare const useFocusManager: ({ initialFocusRef, popupRef, }: FocusManagerHook) => void;
|
|
2
|
+
export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.1",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@atlaskit/popper": "^5.5.0",
|
|
45
45
|
"@atlaskit/portal": "^4.4.0",
|
|
46
46
|
"@atlaskit/theme": "^12.6.0",
|
|
47
|
-
"@atlaskit/tokens": "^1.
|
|
47
|
+
"@atlaskit/tokens": "^1.41.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"bind-event-listener": "^2.1.1",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@af/accessibility-testing": "*",
|
|
60
60
|
"@af/visual-regression": "*",
|
|
61
|
-
"@atlaskit/button": "^17.
|
|
62
|
-
"@atlaskit/icon": "^22.
|
|
61
|
+
"@atlaskit/button": "^17.7.0",
|
|
62
|
+
"@atlaskit/icon": "^22.1.0",
|
|
63
63
|
"@atlaskit/ssr": "*",
|
|
64
64
|
"@atlaskit/visual-regression": "*",
|
|
65
65
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|