@atlaskit/popup 1.23.0 → 1.23.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 +9 -0
- package/dist/cjs/popper-wrapper.js +4 -1
- package/dist/cjs/popup.js +3 -0
- package/dist/cjs/use-focus-manager.js +4 -3
- package/dist/es2019/popper-wrapper.js +3 -1
- package/dist/es2019/popup.js +2 -0
- package/dist/es2019/use-focus-manager.js +4 -3
- package/dist/esm/popper-wrapper.js +4 -1
- package/dist/esm/popup.js +3 -0
- package/dist/esm/use-focus-manager.js +4 -3
- package/dist/types/popper-wrapper.d.ts +1 -1
- package/dist/types/types.d.ts +6 -0
- 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/types.d.ts +6 -0
- package/dist/types-ts4.5/use-focus-manager.d.ts +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 1.23.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#133686](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133686)
|
|
8
|
+
[`462353527b0db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/462353527b0db) -
|
|
9
|
+
Expose shouldReturnFocus on Popup component to allow consumers to prevent trigger refocusing on
|
|
10
|
+
popup close
|
|
11
|
+
|
|
3
12
|
## 1.23.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
|
@@ -91,6 +91,8 @@ function PopperWrapper(_ref) {
|
|
|
91
91
|
shouldRenderToParent = _ref.shouldRenderToParent,
|
|
92
92
|
shouldFitContainer = _ref.shouldFitContainer,
|
|
93
93
|
shouldDisableFocusLock = _ref.shouldDisableFocusLock,
|
|
94
|
+
_ref$shouldReturnFocu = _ref.shouldReturnFocus,
|
|
95
|
+
shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
|
|
94
96
|
strategy = _ref.strategy,
|
|
95
97
|
role = _ref.role,
|
|
96
98
|
label = _ref.label,
|
|
@@ -115,7 +117,8 @@ function PopperWrapper(_ref) {
|
|
|
115
117
|
shouldCloseOnTab: shouldCloseOnTab,
|
|
116
118
|
triggerRef: triggerRef,
|
|
117
119
|
autoFocus: autoFocus,
|
|
118
|
-
shouldDisableFocusTrap: shouldDisableFocusTrap
|
|
120
|
+
shouldDisableFocusTrap: shouldDisableFocusTrap,
|
|
121
|
+
shouldReturnFocus: shouldReturnFocus
|
|
119
122
|
});
|
|
120
123
|
(0, _useCloseManager.useCloseManager)({
|
|
121
124
|
isOpen: isOpen,
|
package/dist/cjs/popup.js
CHANGED
|
@@ -58,6 +58,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
58
58
|
shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
|
|
59
59
|
_ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
|
|
60
60
|
shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
|
|
61
|
+
_ref$shouldReturnFocu = _ref.shouldReturnFocus,
|
|
62
|
+
shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
|
|
61
63
|
strategy = _ref.strategy,
|
|
62
64
|
role = _ref.role,
|
|
63
65
|
label = _ref.label,
|
|
@@ -90,6 +92,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
90
92
|
shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
|
|
91
93
|
shouldFitContainer: shouldFitContainer,
|
|
92
94
|
shouldDisableFocusLock: shouldDisableFocusLock,
|
|
95
|
+
shouldReturnFocus: shouldReturnFocus,
|
|
93
96
|
triggerRef: triggerRef,
|
|
94
97
|
strategy: shouldFitContainer ? 'absolute' : strategy,
|
|
95
98
|
role: role,
|
|
@@ -16,7 +16,8 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
|
|
|
16
16
|
triggerRef = _ref.triggerRef,
|
|
17
17
|
autoFocus = _ref.autoFocus,
|
|
18
18
|
shouldCloseOnTab = _ref.shouldCloseOnTab,
|
|
19
|
-
shouldDisableFocusTrap = _ref.shouldDisableFocusTrap
|
|
19
|
+
shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
|
|
20
|
+
shouldReturnFocus = _ref.shouldReturnFocus;
|
|
20
21
|
var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
|
|
21
22
|
requestFrame = _useAnimationFrame.requestFrame,
|
|
22
23
|
cancelAllFrames = _useAnimationFrame.cancelAllFrames;
|
|
@@ -41,7 +42,7 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
|
|
|
41
42
|
escapeDeactivates: true,
|
|
42
43
|
initialFocus: initialFocusRef || popupRef,
|
|
43
44
|
fallbackFocus: popupRef,
|
|
44
|
-
returnFocusOnDeactivate:
|
|
45
|
+
returnFocusOnDeactivate: shouldReturnFocus
|
|
45
46
|
};
|
|
46
47
|
var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
|
|
47
48
|
|
|
@@ -53,5 +54,5 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
|
|
|
53
54
|
cancelAllFrames();
|
|
54
55
|
focusTrap.deactivate();
|
|
55
56
|
};
|
|
56
|
-
}, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames]);
|
|
57
|
+
}, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
|
|
57
58
|
};
|
|
@@ -81,6 +81,7 @@ function PopperWrapper({
|
|
|
81
81
|
shouldRenderToParent,
|
|
82
82
|
shouldFitContainer,
|
|
83
83
|
shouldDisableFocusLock,
|
|
84
|
+
shouldReturnFocus = true,
|
|
84
85
|
strategy,
|
|
85
86
|
role,
|
|
86
87
|
label,
|
|
@@ -100,7 +101,8 @@ function PopperWrapper({
|
|
|
100
101
|
shouldCloseOnTab,
|
|
101
102
|
triggerRef,
|
|
102
103
|
autoFocus,
|
|
103
|
-
shouldDisableFocusTrap
|
|
104
|
+
shouldDisableFocusTrap,
|
|
105
|
+
shouldReturnFocus
|
|
104
106
|
});
|
|
105
107
|
useCloseManager({
|
|
106
108
|
isOpen,
|
package/dist/es2019/popup.js
CHANGED
|
@@ -40,6 +40,7 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
40
40
|
shouldRenderToParent = false,
|
|
41
41
|
shouldFitContainer = false,
|
|
42
42
|
shouldDisableFocusLock = false,
|
|
43
|
+
shouldReturnFocus = true,
|
|
43
44
|
strategy,
|
|
44
45
|
role,
|
|
45
46
|
label,
|
|
@@ -70,6 +71,7 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
70
71
|
shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
|
|
71
72
|
shouldFitContainer: shouldFitContainer,
|
|
72
73
|
shouldDisableFocusLock: shouldDisableFocusLock,
|
|
74
|
+
shouldReturnFocus: shouldReturnFocus,
|
|
73
75
|
triggerRef: triggerRef,
|
|
74
76
|
strategy: shouldFitContainer ? 'absolute' : strategy,
|
|
75
77
|
role: role,
|
|
@@ -9,7 +9,8 @@ export const useFocusManager = ({
|
|
|
9
9
|
triggerRef,
|
|
10
10
|
autoFocus,
|
|
11
11
|
shouldCloseOnTab,
|
|
12
|
-
shouldDisableFocusTrap
|
|
12
|
+
shouldDisableFocusTrap,
|
|
13
|
+
shouldReturnFocus
|
|
13
14
|
}) => {
|
|
14
15
|
const {
|
|
15
16
|
requestFrame,
|
|
@@ -36,7 +37,7 @@ export const useFocusManager = ({
|
|
|
36
37
|
escapeDeactivates: true,
|
|
37
38
|
initialFocus: initialFocusRef || popupRef,
|
|
38
39
|
fallbackFocus: popupRef,
|
|
39
|
-
returnFocusOnDeactivate:
|
|
40
|
+
returnFocusOnDeactivate: shouldReturnFocus
|
|
40
41
|
};
|
|
41
42
|
const focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
42
43
|
|
|
@@ -48,5 +49,5 @@ export const useFocusManager = ({
|
|
|
48
49
|
cancelAllFrames();
|
|
49
50
|
focusTrap.deactivate();
|
|
50
51
|
};
|
|
51
|
-
}, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames]);
|
|
52
|
+
}, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
|
|
52
53
|
};
|
|
@@ -85,6 +85,8 @@ function PopperWrapper(_ref) {
|
|
|
85
85
|
shouldRenderToParent = _ref.shouldRenderToParent,
|
|
86
86
|
shouldFitContainer = _ref.shouldFitContainer,
|
|
87
87
|
shouldDisableFocusLock = _ref.shouldDisableFocusLock,
|
|
88
|
+
_ref$shouldReturnFocu = _ref.shouldReturnFocus,
|
|
89
|
+
shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
|
|
88
90
|
strategy = _ref.strategy,
|
|
89
91
|
role = _ref.role,
|
|
90
92
|
label = _ref.label,
|
|
@@ -109,7 +111,8 @@ function PopperWrapper(_ref) {
|
|
|
109
111
|
shouldCloseOnTab: shouldCloseOnTab,
|
|
110
112
|
triggerRef: triggerRef,
|
|
111
113
|
autoFocus: autoFocus,
|
|
112
|
-
shouldDisableFocusTrap: shouldDisableFocusTrap
|
|
114
|
+
shouldDisableFocusTrap: shouldDisableFocusTrap,
|
|
115
|
+
shouldReturnFocus: shouldReturnFocus
|
|
113
116
|
});
|
|
114
117
|
useCloseManager({
|
|
115
118
|
isOpen: isOpen,
|
package/dist/esm/popup.js
CHANGED
|
@@ -50,6 +50,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
50
50
|
shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
|
|
51
51
|
_ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
|
|
52
52
|
shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
|
|
53
|
+
_ref$shouldReturnFocu = _ref.shouldReturnFocus,
|
|
54
|
+
shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
|
|
53
55
|
strategy = _ref.strategy,
|
|
54
56
|
role = _ref.role,
|
|
55
57
|
label = _ref.label,
|
|
@@ -82,6 +84,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
82
84
|
shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
|
|
83
85
|
shouldFitContainer: shouldFitContainer,
|
|
84
86
|
shouldDisableFocusLock: shouldDisableFocusLock,
|
|
87
|
+
shouldReturnFocus: shouldReturnFocus,
|
|
85
88
|
triggerRef: triggerRef,
|
|
86
89
|
strategy: shouldFitContainer ? 'absolute' : strategy,
|
|
87
90
|
role: role,
|
|
@@ -9,7 +9,8 @@ export var useFocusManager = function useFocusManager(_ref) {
|
|
|
9
9
|
triggerRef = _ref.triggerRef,
|
|
10
10
|
autoFocus = _ref.autoFocus,
|
|
11
11
|
shouldCloseOnTab = _ref.shouldCloseOnTab,
|
|
12
|
-
shouldDisableFocusTrap = _ref.shouldDisableFocusTrap
|
|
12
|
+
shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
|
|
13
|
+
shouldReturnFocus = _ref.shouldReturnFocus;
|
|
13
14
|
var _useAnimationFrame = useAnimationFrame(),
|
|
14
15
|
requestFrame = _useAnimationFrame.requestFrame,
|
|
15
16
|
cancelAllFrames = _useAnimationFrame.cancelAllFrames;
|
|
@@ -34,7 +35,7 @@ export var useFocusManager = function useFocusManager(_ref) {
|
|
|
34
35
|
escapeDeactivates: true,
|
|
35
36
|
initialFocus: initialFocusRef || popupRef,
|
|
36
37
|
fallbackFocus: popupRef,
|
|
37
|
-
returnFocusOnDeactivate:
|
|
38
|
+
returnFocusOnDeactivate: shouldReturnFocus
|
|
38
39
|
};
|
|
39
40
|
var focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
40
41
|
|
|
@@ -46,5 +47,5 @@ export var useFocusManager = function useFocusManager(_ref) {
|
|
|
46
47
|
cancelAllFrames();
|
|
47
48
|
focusTrap.deactivate();
|
|
48
49
|
};
|
|
49
|
-
}, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames]);
|
|
50
|
+
}, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
|
|
50
51
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx } from '@emotion/react';
|
|
2
2
|
import { type PopperWrapperProps } from './types';
|
|
3
|
-
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, modifiers, }: 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, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, }: PopperWrapperProps): jsx.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -168,6 +168,11 @@ interface BaseProps {
|
|
|
168
168
|
* The default is `false`.
|
|
169
169
|
*/
|
|
170
170
|
shouldDisableFocusLock?: boolean;
|
|
171
|
+
/**
|
|
172
|
+
* This determines whether the popup trigger will be focused when the popup content closes.
|
|
173
|
+
* The default is `true`.
|
|
174
|
+
*/
|
|
175
|
+
shouldReturnFocus?: boolean;
|
|
171
176
|
/**
|
|
172
177
|
* This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
|
|
173
178
|
* The default is `fixed`.
|
|
@@ -237,6 +242,7 @@ export type FocusManagerHook = {
|
|
|
237
242
|
triggerRef: TriggerRef;
|
|
238
243
|
autoFocus: boolean;
|
|
239
244
|
shouldDisableFocusTrap: boolean;
|
|
245
|
+
shouldReturnFocus: boolean;
|
|
240
246
|
};
|
|
241
247
|
export type RepositionOnUpdateProps = PropsWithChildren<{
|
|
242
248
|
update: PopperChildrenProps['update'];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type FocusManagerHook } from './types';
|
|
2
|
-
export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, }: FocusManagerHook) => void;
|
|
2
|
+
export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx } from '@emotion/react';
|
|
2
2
|
import { type PopperWrapperProps } from './types';
|
|
3
|
-
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, modifiers, }: 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, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, }: PopperWrapperProps): jsx.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
|
@@ -171,6 +171,11 @@ interface BaseProps {
|
|
|
171
171
|
* The default is `false`.
|
|
172
172
|
*/
|
|
173
173
|
shouldDisableFocusLock?: boolean;
|
|
174
|
+
/**
|
|
175
|
+
* This determines whether the popup trigger will be focused when the popup content closes.
|
|
176
|
+
* The default is `true`.
|
|
177
|
+
*/
|
|
178
|
+
shouldReturnFocus?: boolean;
|
|
174
179
|
/**
|
|
175
180
|
* This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
|
|
176
181
|
* The default is `fixed`.
|
|
@@ -240,6 +245,7 @@ export type FocusManagerHook = {
|
|
|
240
245
|
triggerRef: TriggerRef;
|
|
241
246
|
autoFocus: boolean;
|
|
242
247
|
shouldDisableFocusTrap: boolean;
|
|
248
|
+
shouldReturnFocus: boolean;
|
|
243
249
|
};
|
|
244
250
|
export type RepositionOnUpdateProps = PropsWithChildren<{
|
|
245
251
|
update: PopperChildrenProps['update'];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type FocusManagerHook } from './types';
|
|
2
|
-
export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, }: FocusManagerHook) => void;
|
|
2
|
+
export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.23.
|
|
3
|
+
"version": "1.23.1",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -40,14 +40,14 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@atlaskit/ds-lib": "^2.
|
|
43
|
+
"@atlaskit/ds-lib": "^2.5.0",
|
|
44
44
|
"@atlaskit/layering": "^0.4.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
46
46
|
"@atlaskit/popper": "^6.2.0",
|
|
47
47
|
"@atlaskit/portal": "^4.9.0",
|
|
48
48
|
"@atlaskit/primitives": "^12.0.0",
|
|
49
49
|
"@atlaskit/theme": "^13.0.0",
|
|
50
|
-
"@atlaskit/tokens": "^1.
|
|
50
|
+
"@atlaskit/tokens": "^1.59.0",
|
|
51
51
|
"@babel/runtime": "^7.0.0",
|
|
52
52
|
"@emotion/react": "^11.7.1",
|
|
53
53
|
"bind-event-listener": "^3.0.0",
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
"@af/accessibility-testing": "*",
|
|
65
65
|
"@af/integration-testing": "*",
|
|
66
66
|
"@af/visual-regression": "*",
|
|
67
|
-
"@atlaskit/button": "^20.
|
|
68
|
-
"@atlaskit/icon": "^22.
|
|
67
|
+
"@atlaskit/button": "^20.1.0",
|
|
68
|
+
"@atlaskit/icon": "^22.15.0",
|
|
69
69
|
"@atlaskit/ssr": "*",
|
|
70
70
|
"@atlaskit/textfield": "^6.5.0",
|
|
71
71
|
"@atlaskit/toggle": "^13.3.0",
|