@atlaskit/popup 1.4.2 → 1.5.0
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/__perf__/default.tsx +1 -1
- package/dist/cjs/popper-wrapper.js +6 -6
- package/dist/cjs/popup.js +4 -4
- package/dist/cjs/use-close-manager.js +4 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/popper-wrapper.js +1 -1
- package/dist/es2019/popup.js +1 -1
- package/dist/es2019/use-close-manager.js +1 -3
- package/dist/es2019/version.json +1 -1
- package/dist/esm/popper-wrapper.js +1 -1
- package/dist/esm/popup.js +1 -1
- package/dist/esm/use-close-manager.js +1 -3
- package/dist/esm/version.json +1 -1
- package/dist/types/popper-wrapper.d.ts +2 -2
- package/dist/types-ts4.0/popper-wrapper.d.ts +2 -2
- package/package.json +5 -5
- package/report.api.md +9 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 1.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`c520e306869`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c520e306869) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
|
|
8
|
+
|
|
3
9
|
## 1.4.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/__perf__/default.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
|
|
4
|
-
import { css, jsx } from '@emotion/
|
|
4
|
+
import { css, jsx } from '@emotion/react';
|
|
5
5
|
|
|
6
6
|
import Button from '@atlaskit/button/custom-theme-button';
|
|
7
7
|
import MediaServicesAddCommentIcon from '@atlaskit/icon/glyph/media-services/add-comment';
|
|
@@ -13,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
13
13
|
|
|
14
14
|
var _react = require("react");
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _react2 = require("@emotion/react");
|
|
17
17
|
|
|
18
18
|
var _popper = require("@atlaskit/popper");
|
|
19
19
|
|
|
@@ -28,7 +28,7 @@ var _useCloseManager = require("./use-close-manager");
|
|
|
28
28
|
var _useFocusManager = require("./use-focus-manager");
|
|
29
29
|
|
|
30
30
|
/** @jsx jsx */
|
|
31
|
-
var popupStyles = (0,
|
|
31
|
+
var popupStyles = (0, _react2.css)({
|
|
32
32
|
display: 'block',
|
|
33
33
|
boxSizing: 'border-box',
|
|
34
34
|
zIndex: _constants.layers.layer(),
|
|
@@ -42,7 +42,7 @@ var popupStyles = (0, _core.css)({
|
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
44
|
var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
45
|
-
return (0,
|
|
45
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
46
46
|
css: popupStyles
|
|
47
47
|
}, props, {
|
|
48
48
|
ref: ref
|
|
@@ -101,7 +101,7 @@ function PopperWrapper(_ref) {
|
|
|
101
101
|
}
|
|
102
102
|
}];
|
|
103
103
|
}, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
|
|
104
|
-
return (0,
|
|
104
|
+
return (0, _react2.jsx)(_popper.Popper, {
|
|
105
105
|
placement: placement,
|
|
106
106
|
offset: offset,
|
|
107
107
|
modifiers: modifiers
|
|
@@ -110,7 +110,7 @@ function PopperWrapper(_ref) {
|
|
|
110
110
|
style = _ref2.style,
|
|
111
111
|
placement = _ref2.placement,
|
|
112
112
|
update = _ref2.update;
|
|
113
|
-
return (0,
|
|
113
|
+
return (0, _react2.jsx)(PopupContainer, {
|
|
114
114
|
id: id,
|
|
115
115
|
"data-placement": placement,
|
|
116
116
|
"data-testid": testId,
|
|
@@ -129,7 +129,7 @@ function PopperWrapper(_ref) {
|
|
|
129
129
|
// first on the browser address bar when using keyboard
|
|
130
130
|
,
|
|
131
131
|
tabIndex: autoFocus ? 0 : undefined
|
|
132
|
-
}, (0,
|
|
132
|
+
}, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
|
|
133
133
|
update: update
|
|
134
134
|
}, content({
|
|
135
135
|
update: update,
|
package/dist/cjs/popup.js
CHANGED
|
@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
11
11
|
|
|
12
12
|
var _react = require("react");
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _react2 = require("@emotion/react");
|
|
15
15
|
|
|
16
16
|
var _popper = require("@atlaskit/popper");
|
|
17
17
|
|
|
@@ -55,7 +55,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
55
55
|
triggerRef = _useState2[0],
|
|
56
56
|
setTriggerRef = _useState2[1];
|
|
57
57
|
|
|
58
|
-
return (0,
|
|
58
|
+
return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
|
|
59
59
|
var _ref3 = _ref2.ref;
|
|
60
60
|
return trigger({
|
|
61
61
|
ref: function ref(node) {
|
|
@@ -73,9 +73,9 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
73
73
|
'aria-expanded': isOpen,
|
|
74
74
|
'aria-haspopup': true
|
|
75
75
|
});
|
|
76
|
-
}), isOpen && (0,
|
|
76
|
+
}), isOpen && (0, _react2.jsx)(_portal.default, {
|
|
77
77
|
zIndex: zIndex
|
|
78
|
-
}, (0,
|
|
78
|
+
}, (0, _react2.jsx)(_popperWrapper.default, {
|
|
79
79
|
content: content,
|
|
80
80
|
isOpen: isOpen,
|
|
81
81
|
placement: placement,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
@@ -9,7 +11,7 @@ var _react = require("react");
|
|
|
9
11
|
|
|
10
12
|
var _bindEventListener = require("bind-event-listener");
|
|
11
13
|
|
|
12
|
-
|
|
14
|
+
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
13
15
|
|
|
14
16
|
var useCloseManager = function useCloseManager(_ref) {
|
|
15
17
|
var isOpen = _ref.isOpen,
|
|
@@ -19,7 +21,7 @@ var useCloseManager = function useCloseManager(_ref) {
|
|
|
19
21
|
capture = _ref.shouldUseCaptureOnOutsideClick;
|
|
20
22
|
(0, _react.useEffect)(function () {
|
|
21
23
|
if (!isOpen || !popupRef) {
|
|
22
|
-
return
|
|
24
|
+
return _noop.default;
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
var closePopup = function closePopup(event) {
|
package/dist/cjs/version.json
CHANGED
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
|
|
3
3
|
/** @jsx jsx */
|
|
4
4
|
import { forwardRef, useMemo, useState } from 'react';
|
|
5
|
-
import { css, jsx } from '@emotion/
|
|
5
|
+
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import { Popper } from '@atlaskit/popper';
|
|
7
7
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
8
8
|
import { borderRadius, layers } from '@atlaskit/theme/constants';
|
package/dist/es2019/popup.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
/** @jsx jsx */
|
|
4
4
|
import { memo, useState } from 'react';
|
|
5
|
-
import { jsx } from '@emotion/
|
|
5
|
+
import { jsx } from '@emotion/react';
|
|
6
6
|
import { Manager, Reference } from '@atlaskit/popper';
|
|
7
7
|
import Portal from '@atlaskit/portal';
|
|
8
8
|
import { layers } from '@atlaskit/theme/constants';
|
package/dist/es2019/version.json
CHANGED
|
@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
|
|
4
4
|
/** @jsx jsx */
|
|
5
5
|
import { forwardRef, useMemo, useState } from 'react';
|
|
6
|
-
import { css, jsx } from '@emotion/
|
|
6
|
+
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { Popper } from '@atlaskit/popper';
|
|
8
8
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
9
9
|
import { borderRadius, layers } from '@atlaskit/theme/constants';
|
package/dist/esm/popup.js
CHANGED
|
@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
4
4
|
|
|
5
5
|
/** @jsx jsx */
|
|
6
6
|
import { memo, useState } from 'react';
|
|
7
|
-
import { jsx } from '@emotion/
|
|
7
|
+
import { jsx } from '@emotion/react';
|
|
8
8
|
import { Manager, Reference } from '@atlaskit/popper';
|
|
9
9
|
import Portal from '@atlaskit/portal';
|
|
10
10
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { bindAll } from 'bind-event-listener';
|
|
3
|
-
|
|
4
|
-
function noop() {}
|
|
5
|
-
|
|
3
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
6
4
|
export var useCloseManager = function useCloseManager(_ref) {
|
|
7
5
|
var isOpen = _ref.isOpen,
|
|
8
6
|
onClose = _ref.onClose,
|
package/dist/esm/version.json
CHANGED
|
@@ -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, }: 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.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
|
@@ -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, }: 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.JSX.Element;
|
|
4
4
|
export default PopperWrapper;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/theme": "^12.2.0",
|
|
41
41
|
"@atlaskit/tokens": "^0.10.0",
|
|
42
42
|
"@babel/runtime": "^7.0.0",
|
|
43
|
-
"@emotion/
|
|
43
|
+
"@emotion/react": "^11.7.1",
|
|
44
44
|
"bind-event-listener": "^2.1.1",
|
|
45
45
|
"focus-trap": "^2.4.5"
|
|
46
46
|
},
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@atlaskit/button": "^16.3.0",
|
|
53
53
|
"@atlaskit/docs": "*",
|
|
54
|
-
"@atlaskit/icon": "^21.
|
|
54
|
+
"@atlaskit/icon": "^21.11.0",
|
|
55
55
|
"@atlaskit/menu": "^1.3.0",
|
|
56
56
|
"@atlaskit/radio": "^5.4.0",
|
|
57
|
-
"@atlaskit/section-message": "^6.
|
|
57
|
+
"@atlaskit/section-message": "^6.3.0",
|
|
58
58
|
"@atlaskit/select": "^15.7.0",
|
|
59
59
|
"@atlaskit/ssr": "*",
|
|
60
|
-
"@atlaskit/textfield": "^5.
|
|
60
|
+
"@atlaskit/textfield": "^5.3.0",
|
|
61
61
|
"@atlaskit/toggle": "^12.5.0",
|
|
62
62
|
"@atlaskit/visual-regression": "*",
|
|
63
63
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
package/report.api.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/popup"
|
|
1
|
+
## API Report File for "@atlaskit/popup".
|
|
2
2
|
|
|
3
|
-
> Do not edit this file.
|
|
3
|
+
> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
+
|
|
5
|
+
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
4
6
|
|
|
5
7
|
```ts
|
|
6
8
|
import { ComponentType } from 'react';
|
|
@@ -9,6 +11,7 @@ import { Dispatch } from 'react';
|
|
|
9
11
|
import { FC } from 'react';
|
|
10
12
|
import { Placement } from '@atlaskit/popper';
|
|
11
13
|
import { PopperChildrenProps } from '@atlaskit/popper';
|
|
14
|
+
import { default as React_2 } from 'react';
|
|
12
15
|
import { ReactNode } from 'react';
|
|
13
16
|
import { Ref } from 'react';
|
|
14
17
|
import { SetStateAction } from 'react';
|
|
@@ -22,7 +25,7 @@ declare interface BaseProps {
|
|
|
22
25
|
/**
|
|
23
26
|
* Render props for content that is displayed inside the popup.
|
|
24
27
|
*/
|
|
25
|
-
content: (props: ContentProps) =>
|
|
28
|
+
content: (props: ContentProps) => React_2.ReactNode;
|
|
26
29
|
/**
|
|
27
30
|
* Id that is assigned to the popup container element.
|
|
28
31
|
*/
|
|
@@ -71,7 +74,7 @@ declare interface BaseProps {
|
|
|
71
74
|
* Generally this will be either when clicking away from the popup or pressing the escape key.
|
|
72
75
|
* You'll want to use this to set open state accordingly and then pump it back into the `isOpen` prop.
|
|
73
76
|
*/
|
|
74
|
-
onClose?(): void;
|
|
77
|
+
onClose?(event: Event | React_2.MouseEvent | React_2.KeyboardEvent): void;
|
|
75
78
|
/**
|
|
76
79
|
* The element that is shown when `isOpen` prop is `true`.
|
|
77
80
|
* The result of the `content` prop will be placed as children here.
|
|
@@ -104,7 +107,7 @@ export declare interface ContentProps {
|
|
|
104
107
|
/**
|
|
105
108
|
* Passed through from the parent popup.
|
|
106
109
|
*/
|
|
107
|
-
onClose
|
|
110
|
+
onClose?: BaseProps['onClose'];
|
|
108
111
|
/**
|
|
109
112
|
* Escape hatch to set the initial focus for a specific element when the popup is opened.
|
|
110
113
|
*/
|
|
@@ -152,7 +155,7 @@ export declare interface PopupProps extends BaseProps {
|
|
|
152
155
|
* Make this an interactive element,
|
|
153
156
|
* such as an `@atlaskit/button` component.
|
|
154
157
|
*/
|
|
155
|
-
trigger: (props: TriggerProps) =>
|
|
158
|
+
trigger: (props: TriggerProps) => React_2.ReactNode;
|
|
156
159
|
/**
|
|
157
160
|
* Z-index that the popup should be displayed in.
|
|
158
161
|
* This is passed to the portal component.
|