@atlaskit/popup 1.11.1 → 1.11.3
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/popup.js +4 -1
- package/dist/cjs/use-focus-manager.js +10 -31
- package/dist/es2019/popup.js +4 -1
- package/dist/es2019/use-focus-manager.js +10 -31
- package/dist/esm/popup.js +4 -1
- package/dist/esm/use-focus-manager.js +10 -31
- package/package.json +10 -9
- package/tmp/api-report-tmp.d.ts +0 -82
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 1.11.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#42594](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42594) [`07781d6d786`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07781d6d786) - Removes feature flag implemented in 1.11.0. Does not implement proposed functionality behind the feature flag.
|
|
8
|
+
|
|
9
|
+
## 1.11.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#41628](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41628) [`b05664f7aba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b05664f7aba) - Use feature flag to toggle if we enable UNSAFE_LAYERING
|
|
14
|
+
|
|
3
15
|
## 1.11.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/popup.js
CHANGED
|
@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _layering = require("@atlaskit/layering");
|
|
12
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
13
|
var _popper = require("@atlaskit/popper");
|
|
13
14
|
var _portal = _interopRequireDefault(require("@atlaskit/portal"));
|
|
14
15
|
var _constants = require("@atlaskit/theme/constants");
|
|
@@ -46,7 +47,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
46
47
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
47
48
|
triggerRef = _useState2[0],
|
|
48
49
|
setTriggerRef = _useState2[1];
|
|
49
|
-
var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING,
|
|
50
|
+
var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
|
|
51
|
+
isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_popup_1cnzt') ? false : true
|
|
52
|
+
}, (0, _react2.jsx)(_popperWrapper.default, {
|
|
50
53
|
content: content,
|
|
51
54
|
isOpen: isOpen,
|
|
52
55
|
placement: placement,
|
|
@@ -8,7 +8,6 @@ exports.useFocusManager = void 0;
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _focusTrap = _interopRequireDefault(require("focus-trap"));
|
|
10
10
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
|
|
13
12
|
var initialFocusRef = _ref.initialFocusRef,
|
|
14
13
|
popupRef = _ref.popupRef;
|
|
@@ -16,47 +15,27 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
|
|
|
16
15
|
if (!popupRef) {
|
|
17
16
|
return _noop.default;
|
|
18
17
|
}
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
initialFocus: initialFocusRef || popupRef,
|
|
28
|
-
fallbackFocus: popupRef,
|
|
29
|
-
returnFocusOnDeactivate: true
|
|
30
|
-
};
|
|
31
|
-
focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
|
|
32
|
-
}
|
|
18
|
+
var trapConfig = {
|
|
19
|
+
clickOutsideDeactivates: true,
|
|
20
|
+
escapeDeactivates: true,
|
|
21
|
+
initialFocus: initialFocusRef || popupRef,
|
|
22
|
+
fallbackFocus: popupRef,
|
|
23
|
+
returnFocusOnDeactivate: true
|
|
24
|
+
};
|
|
25
|
+
var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
|
|
33
26
|
var frameId = null;
|
|
34
27
|
|
|
35
28
|
// wait for the popup to reposition itself before we focus
|
|
36
29
|
frameId = requestAnimationFrame(function () {
|
|
37
30
|
frameId = null;
|
|
38
|
-
|
|
39
|
-
if (initialFocusRef && initialFocusRef.focus) {
|
|
40
|
-
initialFocusRef.focus();
|
|
41
|
-
} else {
|
|
42
|
-
popupRef.focus();
|
|
43
|
-
}
|
|
44
|
-
} else {
|
|
45
|
-
focusTrap.activate();
|
|
46
|
-
}
|
|
31
|
+
focusTrap.activate();
|
|
47
32
|
});
|
|
48
33
|
return function () {
|
|
49
34
|
if (frameId != null) {
|
|
50
35
|
cancelAnimationFrame(frameId);
|
|
51
36
|
frameId = null;
|
|
52
37
|
}
|
|
53
|
-
|
|
54
|
-
if (previouslyFocusedElement && previouslyFocusedElement.focus) {
|
|
55
|
-
previouslyFocusedElement.focus();
|
|
56
|
-
}
|
|
57
|
-
} else {
|
|
58
|
-
focusTrap.deactivate();
|
|
59
|
-
}
|
|
38
|
+
focusTrap.deactivate();
|
|
60
39
|
};
|
|
61
40
|
}, [popupRef, initialFocusRef]);
|
|
62
41
|
};
|
package/dist/es2019/popup.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { memo, useState } from 'react';
|
|
4
4
|
import { jsx } from '@emotion/react';
|
|
5
5
|
import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
6
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
7
|
import { Manager, Reference } from '@atlaskit/popper';
|
|
7
8
|
import Portal from '@atlaskit/portal';
|
|
8
9
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -28,7 +29,9 @@ export const Popup = /*#__PURE__*/memo(({
|
|
|
28
29
|
shouldRenderToParent = false
|
|
29
30
|
}) => {
|
|
30
31
|
const [triggerRef, setTriggerRef] = useState(null);
|
|
31
|
-
const renderPopperWrapper = jsx(UNSAFE_LAYERING,
|
|
32
|
+
const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
|
|
33
|
+
isDisabled: getBooleanFF('platform.design-system-team.layering_popup_1cnzt') ? false : true
|
|
34
|
+
}, jsx(PopperWrapper, {
|
|
32
35
|
content: content,
|
|
33
36
|
isOpen: isOpen,
|
|
34
37
|
placement: placement,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import createFocusTrap from 'focus-trap';
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
export const useFocusManager = ({
|
|
6
5
|
initialFocusRef,
|
|
7
6
|
popupRef
|
|
@@ -10,47 +9,27 @@ export const useFocusManager = ({
|
|
|
10
9
|
if (!popupRef) {
|
|
11
10
|
return noop;
|
|
12
11
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
initialFocus: initialFocusRef || popupRef,
|
|
22
|
-
fallbackFocus: popupRef,
|
|
23
|
-
returnFocusOnDeactivate: true
|
|
24
|
-
};
|
|
25
|
-
focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
26
|
-
}
|
|
12
|
+
const trapConfig = {
|
|
13
|
+
clickOutsideDeactivates: true,
|
|
14
|
+
escapeDeactivates: true,
|
|
15
|
+
initialFocus: initialFocusRef || popupRef,
|
|
16
|
+
fallbackFocus: popupRef,
|
|
17
|
+
returnFocusOnDeactivate: true
|
|
18
|
+
};
|
|
19
|
+
const focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
27
20
|
let frameId = null;
|
|
28
21
|
|
|
29
22
|
// wait for the popup to reposition itself before we focus
|
|
30
23
|
frameId = requestAnimationFrame(() => {
|
|
31
24
|
frameId = null;
|
|
32
|
-
|
|
33
|
-
if (initialFocusRef && initialFocusRef.focus) {
|
|
34
|
-
initialFocusRef.focus();
|
|
35
|
-
} else {
|
|
36
|
-
popupRef.focus();
|
|
37
|
-
}
|
|
38
|
-
} else {
|
|
39
|
-
focusTrap.activate();
|
|
40
|
-
}
|
|
25
|
+
focusTrap.activate();
|
|
41
26
|
});
|
|
42
27
|
return () => {
|
|
43
28
|
if (frameId != null) {
|
|
44
29
|
cancelAnimationFrame(frameId);
|
|
45
30
|
frameId = null;
|
|
46
31
|
}
|
|
47
|
-
|
|
48
|
-
if (previouslyFocusedElement && previouslyFocusedElement.focus) {
|
|
49
|
-
previouslyFocusedElement.focus();
|
|
50
|
-
}
|
|
51
|
-
} else {
|
|
52
|
-
focusTrap.deactivate();
|
|
53
|
-
}
|
|
32
|
+
focusTrap.deactivate();
|
|
54
33
|
};
|
|
55
34
|
}, [popupRef, initialFocusRef]);
|
|
56
35
|
};
|
package/dist/esm/popup.js
CHANGED
|
@@ -4,6 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
4
4
|
import { memo, useState } from 'react';
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
6
|
import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
7
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
import { Manager, Reference } from '@atlaskit/popper';
|
|
8
9
|
import Portal from '@atlaskit/portal';
|
|
9
10
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -38,7 +39,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
|
|
|
38
39
|
_useState2 = _slicedToArray(_useState, 2),
|
|
39
40
|
triggerRef = _useState2[0],
|
|
40
41
|
setTriggerRef = _useState2[1];
|
|
41
|
-
var renderPopperWrapper = jsx(UNSAFE_LAYERING,
|
|
42
|
+
var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
|
|
43
|
+
isDisabled: getBooleanFF('platform.design-system-team.layering_popup_1cnzt') ? false : true
|
|
44
|
+
}, jsx(PopperWrapper, {
|
|
42
45
|
content: content,
|
|
43
46
|
isOpen: isOpen,
|
|
44
47
|
placement: placement,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import createFocusTrap from 'focus-trap';
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
export var useFocusManager = function useFocusManager(_ref) {
|
|
6
5
|
var initialFocusRef = _ref.initialFocusRef,
|
|
7
6
|
popupRef = _ref.popupRef;
|
|
@@ -9,47 +8,27 @@ export var useFocusManager = function useFocusManager(_ref) {
|
|
|
9
8
|
if (!popupRef) {
|
|
10
9
|
return noop;
|
|
11
10
|
}
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
initialFocus: initialFocusRef || popupRef,
|
|
21
|
-
fallbackFocus: popupRef,
|
|
22
|
-
returnFocusOnDeactivate: true
|
|
23
|
-
};
|
|
24
|
-
focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
25
|
-
}
|
|
11
|
+
var trapConfig = {
|
|
12
|
+
clickOutsideDeactivates: true,
|
|
13
|
+
escapeDeactivates: true,
|
|
14
|
+
initialFocus: initialFocusRef || popupRef,
|
|
15
|
+
fallbackFocus: popupRef,
|
|
16
|
+
returnFocusOnDeactivate: true
|
|
17
|
+
};
|
|
18
|
+
var focusTrap = createFocusTrap(popupRef, trapConfig);
|
|
26
19
|
var frameId = null;
|
|
27
20
|
|
|
28
21
|
// wait for the popup to reposition itself before we focus
|
|
29
22
|
frameId = requestAnimationFrame(function () {
|
|
30
23
|
frameId = null;
|
|
31
|
-
|
|
32
|
-
if (initialFocusRef && initialFocusRef.focus) {
|
|
33
|
-
initialFocusRef.focus();
|
|
34
|
-
} else {
|
|
35
|
-
popupRef.focus();
|
|
36
|
-
}
|
|
37
|
-
} else {
|
|
38
|
-
focusTrap.activate();
|
|
39
|
-
}
|
|
24
|
+
focusTrap.activate();
|
|
40
25
|
});
|
|
41
26
|
return function () {
|
|
42
27
|
if (frameId != null) {
|
|
43
28
|
cancelAnimationFrame(frameId);
|
|
44
29
|
frameId = null;
|
|
45
30
|
}
|
|
46
|
-
|
|
47
|
-
if (previouslyFocusedElement && previouslyFocusedElement.focus) {
|
|
48
|
-
previouslyFocusedElement.focus();
|
|
49
|
-
}
|
|
50
|
-
} else {
|
|
51
|
-
focusTrap.deactivate();
|
|
52
|
-
}
|
|
31
|
+
focusTrap.deactivate();
|
|
53
32
|
};
|
|
54
33
|
}, [popupRef, initialFocusRef]);
|
|
55
34
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.3",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@atlaskit/ds-lib": "^2.2.0",
|
|
39
39
|
"@atlaskit/layering": "^0.2.0",
|
|
40
|
-
"@atlaskit/platform-feature-flags": "
|
|
40
|
+
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
41
41
|
"@atlaskit/popper": "^5.5.0",
|
|
42
|
-
"@atlaskit/portal": "^4.
|
|
42
|
+
"@atlaskit/portal": "^4.4.0",
|
|
43
43
|
"@atlaskit/theme": "^12.6.0",
|
|
44
|
-
"@atlaskit/tokens": "^1.
|
|
44
|
+
"@atlaskit/tokens": "^1.28.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
46
|
"@emotion/react": "^11.7.1",
|
|
47
47
|
"bind-event-listener": "^2.1.1",
|
|
@@ -54,11 +54,12 @@
|
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@af/accessibility-testing": "*",
|
|
56
56
|
"@af/visual-regression": "*",
|
|
57
|
-
"@atlaskit/button": "^16.
|
|
57
|
+
"@atlaskit/button": "^16.13.0",
|
|
58
58
|
"@atlaskit/icon": "^21.12.0",
|
|
59
59
|
"@atlaskit/ssr": "*",
|
|
60
60
|
"@atlaskit/visual-regression": "*",
|
|
61
61
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
62
|
+
"@atlassian/feature-flags-test-utils": "*",
|
|
62
63
|
"@testing-library/dom": "^8.17.1",
|
|
63
64
|
"@testing-library/react": "^12.1.5",
|
|
64
65
|
"ast-types": "^0.13.3",
|
|
@@ -94,11 +95,11 @@
|
|
|
94
95
|
]
|
|
95
96
|
}
|
|
96
97
|
},
|
|
97
|
-
"homepage": "https://atlassian.design/components/popup/",
|
|
98
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
|
|
99
98
|
"platform-feature-flags": {
|
|
100
|
-
"platform.design-system-team.
|
|
99
|
+
"platform.design-system-team.layering_popup_1cnzt": {
|
|
101
100
|
"type": "boolean"
|
|
102
101
|
}
|
|
103
|
-
}
|
|
102
|
+
},
|
|
103
|
+
"homepage": "https://atlassian.design/components/popup/",
|
|
104
|
+
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
104
105
|
}
|
package/tmp/api-report-tmp.d.ts
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/popup"
|
|
2
|
-
|
|
3
|
-
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
-
|
|
5
|
-
```ts
|
|
6
|
-
|
|
7
|
-
import { ComponentType } from 'react';
|
|
8
|
-
import { CSSProperties } from 'react';
|
|
9
|
-
import { Dispatch } from 'react';
|
|
10
|
-
import { FC } from 'react';
|
|
11
|
-
import { Placement } from '@atlaskit/popper';
|
|
12
|
-
import { PopperChildrenProps } from '@atlaskit/popper';
|
|
13
|
-
import { default as React_2 } from 'react';
|
|
14
|
-
import { ReactNode } from 'react';
|
|
15
|
-
import { Ref } from 'react';
|
|
16
|
-
import { SetStateAction } from 'react';
|
|
17
|
-
|
|
18
|
-
// @public (undocumented)
|
|
19
|
-
interface BaseProps {
|
|
20
|
-
autoFocus?: boolean;
|
|
21
|
-
boundary?: 'clippingParents' | HTMLElement;
|
|
22
|
-
content: (props: ContentProps) => React_2.ReactNode;
|
|
23
|
-
fallbackPlacements?: Placement[];
|
|
24
|
-
id?: string;
|
|
25
|
-
isOpen: boolean;
|
|
26
|
-
offset?: [number, number];
|
|
27
|
-
onClose?(event: Event | React_2.KeyboardEvent | React_2.MouseEvent): void;
|
|
28
|
-
placement?: Placement;
|
|
29
|
-
popupComponent?: ComponentType<PopupComponentProps>;
|
|
30
|
-
rootBoundary?: 'document' | 'viewport';
|
|
31
|
-
shouldFlip?: boolean;
|
|
32
|
-
shouldRenderToParent?: boolean;
|
|
33
|
-
shouldUseCaptureOnOutsideClick?: boolean;
|
|
34
|
-
testId?: string;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// @public (undocumented)
|
|
38
|
-
export interface ContentProps {
|
|
39
|
-
isOpen: boolean;
|
|
40
|
-
onClose?: BaseProps['onClose'];
|
|
41
|
-
setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
|
|
42
|
-
update: PopperChildrenProps['update'];
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// @public (undocumented)
|
|
46
|
-
const Popup: FC<PopupProps>;
|
|
47
|
-
export { Popup }
|
|
48
|
-
export default Popup;
|
|
49
|
-
|
|
50
|
-
// @public (undocumented)
|
|
51
|
-
export interface PopupComponentProps {
|
|
52
|
-
'data-placement': Placement;
|
|
53
|
-
'data-testid'?: string;
|
|
54
|
-
children: ReactNode;
|
|
55
|
-
id?: string;
|
|
56
|
-
ref: Ref<HTMLDivElement>;
|
|
57
|
-
shouldRenderToParent?: boolean;
|
|
58
|
-
style: CSSProperties;
|
|
59
|
-
tabIndex: number | undefined;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// @public (undocumented)
|
|
63
|
-
export interface PopupProps extends BaseProps {
|
|
64
|
-
trigger: (props: TriggerProps) => React_2.ReactNode;
|
|
65
|
-
zIndex?: number;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// @public (undocumented)
|
|
69
|
-
export interface TriggerProps {
|
|
70
|
-
// (undocumented)
|
|
71
|
-
'aria-controls'?: string;
|
|
72
|
-
// (undocumented)
|
|
73
|
-
'aria-expanded': boolean;
|
|
74
|
-
// (undocumented)
|
|
75
|
-
'aria-haspopup': boolean;
|
|
76
|
-
// (undocumented)
|
|
77
|
-
ref: Ref<any>;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// (No @packageDocumentation comment for this package)
|
|
81
|
-
|
|
82
|
-
```
|