@atlaskit/popup 1.1.6 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -0
- package/dist/cjs/PopperWrapper.js +6 -4
- package/dist/cjs/Popup.js +4 -1
- package/dist/cjs/useCloseManager.js +7 -3
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/PopperWrapper.js +6 -4
- package/dist/es2019/Popup.js +3 -1
- package/dist/es2019/useCloseManager.js +7 -3
- package/dist/es2019/version.json +1 -1
- package/dist/esm/PopperWrapper.js +6 -4
- package/dist/esm/Popup.js +4 -1
- package/dist/esm/useCloseManager.js +7 -3
- package/dist/esm/version.json +1 -1
- package/dist/types/PopperWrapper.d.ts +2 -1
- package/dist/types/types.d.ts +6 -0
- package/dist/types/useCloseManager.d.ts +1 -1
- package/package.json +4 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,41 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 1.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
|
|
8
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 1.3.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
17
|
+
## 1.3.0
|
|
18
|
+
|
|
19
|
+
### Minor Changes
|
|
20
|
+
|
|
21
|
+
- [`2e42aa0d900`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e42aa0d900) - **Note**: It is a re-release of the wrongly `patched` version `1.1.6` that should have been a `minor` release.
|
|
22
|
+
|
|
23
|
+
Expose `fallbackPlacement` modifier from to specify a list of fallback options to try incase there isn't enough space
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
29
|
+
## 1.2.0
|
|
30
|
+
|
|
31
|
+
### Minor Changes
|
|
32
|
+
|
|
33
|
+
- [`c2dd770a743`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2dd770a743) - Add new prop which controls is outside click should be bound using capture
|
|
34
|
+
|
|
3
35
|
## 1.1.6
|
|
4
36
|
|
|
37
|
+
_WRONG RELEASE TYPE - DON'T USE_
|
|
38
|
+
|
|
5
39
|
### Minor Changes
|
|
6
40
|
|
|
7
41
|
- [`f142150a3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f142150a3e8) - Expose `fallbackPlacement` modifier from to specify a list of fallback options to try incase there isn't enough space
|
|
@@ -33,9 +33,9 @@ var popupStyles = (0, _core.css)({
|
|
|
33
33
|
boxSizing: 'border-box',
|
|
34
34
|
zIndex: _constants.layers.layer(),
|
|
35
35
|
flex: '1 1 auto',
|
|
36
|
-
backgroundColor: "var(--ds-
|
|
36
|
+
backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
|
|
37
37
|
borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
|
|
38
|
-
boxShadow: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
|
|
38
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
|
|
39
39
|
overflow: 'auto',
|
|
40
40
|
':focus': {
|
|
41
41
|
outline: 'none'
|
|
@@ -65,7 +65,8 @@ function PopperWrapper(_ref) {
|
|
|
65
65
|
PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
|
|
66
66
|
_ref$autoFocus = _ref.autoFocus,
|
|
67
67
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
68
|
-
triggerRef = _ref.triggerRef
|
|
68
|
+
triggerRef = _ref.triggerRef,
|
|
69
|
+
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
|
|
69
70
|
|
|
70
71
|
var _useState = (0, _react.useState)(null),
|
|
71
72
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -85,7 +86,8 @@ function PopperWrapper(_ref) {
|
|
|
85
86
|
isOpen: isOpen,
|
|
86
87
|
onClose: onClose,
|
|
87
88
|
popupRef: popupRef,
|
|
88
|
-
triggerRef: triggerRef
|
|
89
|
+
triggerRef: triggerRef,
|
|
90
|
+
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
|
|
89
91
|
});
|
|
90
92
|
var modifiers = (0, _react.useMemo)(function () {
|
|
91
93
|
return [{
|
package/dist/cjs/Popup.js
CHANGED
|
@@ -44,7 +44,9 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
44
44
|
_ref$autoFocus = _ref.autoFocus,
|
|
45
45
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
46
46
|
_ref$zIndex = _ref.zIndex,
|
|
47
|
-
zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex
|
|
47
|
+
zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
|
|
48
|
+
_ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
|
|
49
|
+
shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
|
|
48
50
|
|
|
49
51
|
var _useState = (0, _react.useState)(null),
|
|
50
52
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -85,6 +87,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
85
87
|
testId: testId,
|
|
86
88
|
onClose: onClose,
|
|
87
89
|
autoFocus: autoFocus,
|
|
90
|
+
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
88
91
|
triggerRef: triggerRef
|
|
89
92
|
})));
|
|
90
93
|
});
|
|
@@ -15,7 +15,8 @@ var useCloseManager = function useCloseManager(_ref) {
|
|
|
15
15
|
var isOpen = _ref.isOpen,
|
|
16
16
|
onClose = _ref.onClose,
|
|
17
17
|
popupRef = _ref.popupRef,
|
|
18
|
-
triggerRef = _ref.triggerRef
|
|
18
|
+
triggerRef = _ref.triggerRef,
|
|
19
|
+
capture = _ref.shouldUseCaptureOnOutsideClick;
|
|
19
20
|
(0, _react.useEffect)(function () {
|
|
20
21
|
if (!isOpen || !popupRef) {
|
|
21
22
|
return noop;
|
|
@@ -61,13 +62,16 @@ var useCloseManager = function useCloseManager(_ref) {
|
|
|
61
62
|
var unbind = (0, _bindEventListener.bindAll)(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
|
|
62
63
|
{
|
|
63
64
|
type: 'click',
|
|
64
|
-
listener: onClick
|
|
65
|
+
listener: onClick,
|
|
66
|
+
options: {
|
|
67
|
+
capture: capture
|
|
68
|
+
}
|
|
65
69
|
}, {
|
|
66
70
|
type: 'keydown',
|
|
67
71
|
listener: onKeyDown
|
|
68
72
|
}]);
|
|
69
73
|
return unbind;
|
|
70
|
-
}, [isOpen, onClose, popupRef, triggerRef]);
|
|
74
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture]);
|
|
71
75
|
};
|
|
72
76
|
|
|
73
77
|
exports.useCloseManager = useCloseManager;
|
package/dist/cjs/version.json
CHANGED
|
@@ -14,9 +14,9 @@ const popupStyles = css({
|
|
|
14
14
|
boxSizing: 'border-box',
|
|
15
15
|
zIndex: layers.layer(),
|
|
16
16
|
flex: '1 1 auto',
|
|
17
|
-
backgroundColor: `var(--ds-
|
|
17
|
+
backgroundColor: `var(--ds-surface-overlay, ${N0})`,
|
|
18
18
|
borderRadius: `${borderRadius()}px`,
|
|
19
|
-
boxShadow: `var(--ds-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
|
|
19
|
+
boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
|
|
20
20
|
overflow: 'auto',
|
|
21
21
|
':focus': {
|
|
22
22
|
outline: 'none'
|
|
@@ -41,7 +41,8 @@ function PopperWrapper({
|
|
|
41
41
|
placement = 'auto',
|
|
42
42
|
popupComponent: PopupContainer = DefaultPopupComponent,
|
|
43
43
|
autoFocus = true,
|
|
44
|
-
triggerRef
|
|
44
|
+
triggerRef,
|
|
45
|
+
shouldUseCaptureOnOutsideClick
|
|
45
46
|
}) {
|
|
46
47
|
const [popupRef, setPopupRef] = useState(null);
|
|
47
48
|
const [initialFocusRef, setInitialFocusRef] = useState(null);
|
|
@@ -53,7 +54,8 @@ function PopperWrapper({
|
|
|
53
54
|
isOpen,
|
|
54
55
|
onClose,
|
|
55
56
|
popupRef,
|
|
56
|
-
triggerRef
|
|
57
|
+
triggerRef,
|
|
58
|
+
shouldUseCaptureOnOutsideClick
|
|
57
59
|
});
|
|
58
60
|
const modifiers = useMemo(() => [{
|
|
59
61
|
name: 'flip',
|
package/dist/es2019/Popup.js
CHANGED
|
@@ -21,7 +21,8 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
21
21
|
fallbackPlacements,
|
|
22
22
|
popupComponent: PopupContainer,
|
|
23
23
|
autoFocus = true,
|
|
24
|
-
zIndex = defaultLayer
|
|
24
|
+
zIndex = defaultLayer,
|
|
25
|
+
shouldUseCaptureOnOutsideClick = false
|
|
25
26
|
}) => {
|
|
26
27
|
const [triggerRef, setTriggerRef] = useState(null);
|
|
27
28
|
return jsx(Manager, null, jsx(Reference, null, ({
|
|
@@ -59,6 +60,7 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
59
60
|
testId: testId,
|
|
60
61
|
onClose: onClose,
|
|
61
62
|
autoFocus: autoFocus,
|
|
63
|
+
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
62
64
|
triggerRef: triggerRef
|
|
63
65
|
})));
|
|
64
66
|
});
|
|
@@ -7,7 +7,8 @@ export const useCloseManager = ({
|
|
|
7
7
|
isOpen,
|
|
8
8
|
onClose,
|
|
9
9
|
popupRef,
|
|
10
|
-
triggerRef
|
|
10
|
+
triggerRef,
|
|
11
|
+
shouldUseCaptureOnOutsideClick: capture
|
|
11
12
|
}) => {
|
|
12
13
|
useEffect(() => {
|
|
13
14
|
if (!isOpen || !popupRef) {
|
|
@@ -57,11 +58,14 @@ export const useCloseManager = ({
|
|
|
57
58
|
const unbind = bindAll(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
|
|
58
59
|
{
|
|
59
60
|
type: 'click',
|
|
60
|
-
listener: onClick
|
|
61
|
+
listener: onClick,
|
|
62
|
+
options: {
|
|
63
|
+
capture
|
|
64
|
+
}
|
|
61
65
|
}, {
|
|
62
66
|
type: 'keydown',
|
|
63
67
|
listener: onKeyDown
|
|
64
68
|
}]);
|
|
65
69
|
return unbind;
|
|
66
|
-
}, [isOpen, onClose, popupRef, triggerRef]);
|
|
70
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture]);
|
|
67
71
|
};
|
package/dist/es2019/version.json
CHANGED
|
@@ -15,9 +15,9 @@ var popupStyles = css({
|
|
|
15
15
|
boxSizing: 'border-box',
|
|
16
16
|
zIndex: layers.layer(),
|
|
17
17
|
flex: '1 1 auto',
|
|
18
|
-
backgroundColor: "var(--ds-
|
|
18
|
+
backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
|
|
19
19
|
borderRadius: "".concat(borderRadius(), "px"),
|
|
20
|
-
boxShadow: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
|
|
20
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
|
|
21
21
|
overflow: 'auto',
|
|
22
22
|
':focus': {
|
|
23
23
|
outline: 'none'
|
|
@@ -47,7 +47,8 @@ function PopperWrapper(_ref) {
|
|
|
47
47
|
PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
|
|
48
48
|
_ref$autoFocus = _ref.autoFocus,
|
|
49
49
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
50
|
-
triggerRef = _ref.triggerRef
|
|
50
|
+
triggerRef = _ref.triggerRef,
|
|
51
|
+
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
|
|
51
52
|
|
|
52
53
|
var _useState = useState(null),
|
|
53
54
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -67,7 +68,8 @@ function PopperWrapper(_ref) {
|
|
|
67
68
|
isOpen: isOpen,
|
|
68
69
|
onClose: onClose,
|
|
69
70
|
popupRef: popupRef,
|
|
70
|
-
triggerRef: triggerRef
|
|
71
|
+
triggerRef: triggerRef,
|
|
72
|
+
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
|
|
71
73
|
});
|
|
72
74
|
var modifiers = useMemo(function () {
|
|
73
75
|
return [{
|
package/dist/esm/Popup.js
CHANGED
|
@@ -28,7 +28,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
28
28
|
_ref$autoFocus = _ref.autoFocus,
|
|
29
29
|
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
|
|
30
30
|
_ref$zIndex = _ref.zIndex,
|
|
31
|
-
zIndex = _ref$zIndex === void 0 ? defaultLayer : _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;
|
|
32
34
|
|
|
33
35
|
var _useState = useState(null),
|
|
34
36
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -69,6 +71,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
69
71
|
testId: testId,
|
|
70
72
|
onClose: onClose,
|
|
71
73
|
autoFocus: autoFocus,
|
|
74
|
+
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
72
75
|
triggerRef: triggerRef
|
|
73
76
|
})));
|
|
74
77
|
});
|
|
@@ -7,7 +7,8 @@ export var useCloseManager = function useCloseManager(_ref) {
|
|
|
7
7
|
var isOpen = _ref.isOpen,
|
|
8
8
|
onClose = _ref.onClose,
|
|
9
9
|
popupRef = _ref.popupRef,
|
|
10
|
-
triggerRef = _ref.triggerRef
|
|
10
|
+
triggerRef = _ref.triggerRef,
|
|
11
|
+
capture = _ref.shouldUseCaptureOnOutsideClick;
|
|
11
12
|
useEffect(function () {
|
|
12
13
|
if (!isOpen || !popupRef) {
|
|
13
14
|
return noop;
|
|
@@ -53,11 +54,14 @@ export var useCloseManager = function useCloseManager(_ref) {
|
|
|
53
54
|
var unbind = bindAll(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
|
|
54
55
|
{
|
|
55
56
|
type: 'click',
|
|
56
|
-
listener: onClick
|
|
57
|
+
listener: onClick,
|
|
58
|
+
options: {
|
|
59
|
+
capture: capture
|
|
60
|
+
}
|
|
57
61
|
}, {
|
|
58
62
|
type: 'keydown',
|
|
59
63
|
listener: onKeyDown
|
|
60
64
|
}]);
|
|
61
65
|
return unbind;
|
|
62
|
-
}, [isOpen, onClose, popupRef, triggerRef]);
|
|
66
|
+
}, [isOpen, onClose, popupRef, triggerRef, capture]);
|
|
63
67
|
};
|
package/dist/esm/version.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { PopperWrapperProps } from './types';
|
|
2
|
-
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, }: PopperWrapperProps): JSX.Element;
|
|
3
|
+
declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): JSX.Element;
|
|
3
4
|
export default PopperWrapper;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -128,6 +128,11 @@ interface BaseProps {
|
|
|
128
128
|
* Defaults to `true`.
|
|
129
129
|
*/
|
|
130
130
|
autoFocus?: boolean;
|
|
131
|
+
/**
|
|
132
|
+
* Controls if the event which handles clicks outside the popup is be bound with
|
|
133
|
+
* `capture: true`
|
|
134
|
+
*/
|
|
135
|
+
shouldUseCaptureOnOutsideClick?: boolean;
|
|
131
136
|
}
|
|
132
137
|
export interface PopupProps extends BaseProps {
|
|
133
138
|
/**
|
|
@@ -149,6 +154,7 @@ export interface PopperWrapperProps extends BaseProps {
|
|
|
149
154
|
export declare type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
|
|
150
155
|
popupRef: PopupRef;
|
|
151
156
|
triggerRef: TriggerRef;
|
|
157
|
+
shouldUseCaptureOnOutsideClick?: boolean;
|
|
152
158
|
};
|
|
153
159
|
export declare type FocusManagerHook = {
|
|
154
160
|
popupRef: PopupRef;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CloseManagerHook } from './types';
|
|
2
|
-
export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, }: CloseManagerHook) => void;
|
|
2
|
+
export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "A portalled popup primitive that is tied to a trigger element.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
},
|
|
21
21
|
"atlassian": {
|
|
22
22
|
"team": "Design System Team",
|
|
23
|
-
"inPublicMirror": true,
|
|
24
23
|
"releaseModel": "scheduled",
|
|
25
24
|
"website": {
|
|
26
25
|
"name": "Popup"
|
|
@@ -29,8 +28,8 @@
|
|
|
29
28
|
"dependencies": {
|
|
30
29
|
"@atlaskit/popper": "^5.0.0",
|
|
31
30
|
"@atlaskit/portal": "^4.0.0",
|
|
32
|
-
"@atlaskit/theme": "^12.
|
|
33
|
-
"@atlaskit/tokens": "^0.
|
|
31
|
+
"@atlaskit/theme": "^12.1.0",
|
|
32
|
+
"@atlaskit/tokens": "^0.6.0",
|
|
34
33
|
"@babel/runtime": "^7.0.0",
|
|
35
34
|
"@emotion/core": "^10.0.9",
|
|
36
35
|
"bind-event-listener": "^1.0.2",
|
|
@@ -41,10 +40,9 @@
|
|
|
41
40
|
"react-dom": "^16.8.0"
|
|
42
41
|
},
|
|
43
42
|
"devDependencies": {
|
|
44
|
-
"@atlaskit/build-utils": "*",
|
|
45
43
|
"@atlaskit/button": "^16.1.0",
|
|
46
44
|
"@atlaskit/docs": "*",
|
|
47
|
-
"@atlaskit/icon": "^21.
|
|
45
|
+
"@atlaskit/icon": "^21.10.0",
|
|
48
46
|
"@atlaskit/menu": "^1.2.0",
|
|
49
47
|
"@atlaskit/radio": "^5.3.0",
|
|
50
48
|
"@atlaskit/select": "^15.0.0",
|