@atlaskit/popup 4.23.2 → 4.23.4
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 +18 -0
- package/dist/cjs/compositional/popup-content-top-layer.js +8 -4
- package/dist/cjs/popup-top-layer.js +5 -4
- package/dist/es2019/compositional/popup-content-top-layer.js +8 -4
- package/dist/es2019/popup-top-layer.js +5 -4
- package/dist/esm/compositional/popup-content-top-layer.js +8 -4
- package/dist/esm/popup-top-layer.js +5 -4
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 4.23.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`6d0485dce81c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d0485dce81c4) -
|
|
8
|
+
Internal: updated to the new `@atlaskit/top-layer` `Popover`/`Dialog` behaviour where the host
|
|
9
|
+
element unmounts after the exit animation completes. No consumer action required.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 4.23.3
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`e5b4070f51a93`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e5b4070f51a93) -
|
|
17
|
+
Remove Top Layer compatibility aliases and expose close-event helpers from the `dialog` and
|
|
18
|
+
`popover` entry points.
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 4.23.2
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -15,7 +15,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
15
15
|
var _runtime = require("@compiled/react/runtime");
|
|
16
16
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
17
17
|
var _animations = require("@atlaskit/top-layer/animations");
|
|
18
|
-
var _createCloseEvent = require("@atlaskit/top-layer/create-close-event");
|
|
19
18
|
var _placementMap = require("@atlaskit/top-layer/placement-map");
|
|
20
19
|
var _popover = require("@atlaskit/top-layer/popover");
|
|
21
20
|
var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
|
|
@@ -87,7 +86,7 @@ function PopupContentTopLayer(_ref) {
|
|
|
87
86
|
if (!onClose) {
|
|
88
87
|
return;
|
|
89
88
|
}
|
|
90
|
-
onClose((0,
|
|
89
|
+
onClose((0, _popover.createPopoverCloseEvent)({
|
|
91
90
|
reason: reason
|
|
92
91
|
}));
|
|
93
92
|
}, [onClose]);
|
|
@@ -110,15 +109,20 @@ function PopupContentTopLayer(_ref) {
|
|
|
110
109
|
});
|
|
111
110
|
var popoverRef = (0, _react.useRef)(null);
|
|
112
111
|
var anchorRef = (0, _react.useContext)(_triggerRefObjectContext.TriggerRefObjectContext);
|
|
112
|
+
|
|
113
|
+
// `isOpen` is included so the anchor positioning effect re-runs when
|
|
114
|
+
// the Popover host element is unmounted/remounted across open cycles.
|
|
113
115
|
(0, _useAnchorPosition.useAnchorPosition)({
|
|
114
116
|
anchorRef: anchorRef,
|
|
115
117
|
popoverRef: popoverRef,
|
|
116
|
-
placement: topLayerPlacement
|
|
118
|
+
placement: topLayerPlacement,
|
|
119
|
+
isOpen: isOpen
|
|
117
120
|
});
|
|
118
121
|
(0, _useWidthFromAnchor.useWidthFromAnchor)({
|
|
119
122
|
mode: shouldFitContainer ? 'match-anchor' : 'none',
|
|
120
123
|
popoverRef: popoverRef,
|
|
121
|
-
anchorRef: anchorRef
|
|
124
|
+
anchorRef: anchorRef,
|
|
125
|
+
isOpen: isOpen
|
|
122
126
|
});
|
|
123
127
|
|
|
124
128
|
// Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
|
|
@@ -15,7 +15,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
15
15
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
16
16
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
17
17
|
var _animations = require("@atlaskit/top-layer/animations");
|
|
18
|
-
var _createCloseEvent = require("@atlaskit/top-layer/create-close-event");
|
|
19
18
|
var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
|
|
20
19
|
var _placementMap = require("@atlaskit/top-layer/placement-map");
|
|
21
20
|
var _popover = require("@atlaskit/top-layer/popover");
|
|
@@ -98,12 +97,14 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
|
|
|
98
97
|
(0, _useAnchorPosition.useAnchorPosition)({
|
|
99
98
|
anchorRef: triggerRef,
|
|
100
99
|
popoverRef: popoverRef,
|
|
101
|
-
placement: topLayerPlacement
|
|
100
|
+
placement: topLayerPlacement,
|
|
101
|
+
isOpen: isOpen
|
|
102
102
|
});
|
|
103
103
|
(0, _useWidthFromAnchor.useWidthFromAnchor)({
|
|
104
104
|
mode: shouldFitContainer ? 'match-anchor' : 'none',
|
|
105
105
|
popoverRef: popoverRef,
|
|
106
|
-
anchorRef: triggerRef
|
|
106
|
+
anchorRef: triggerRef,
|
|
107
|
+
isOpen: isOpen
|
|
107
108
|
});
|
|
108
109
|
|
|
109
110
|
// onClose bridge.
|
|
@@ -119,7 +120,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
|
|
|
119
120
|
if (!onClose) {
|
|
120
121
|
return;
|
|
121
122
|
}
|
|
122
|
-
onClose((0,
|
|
123
|
+
onClose((0, _popover.createPopoverCloseEvent)({
|
|
123
124
|
reason: reason
|
|
124
125
|
}));
|
|
125
126
|
}, [onClose]);
|
|
@@ -6,9 +6,8 @@ import { useCallback, useContext, useMemo, useRef, useState } from 'react';
|
|
|
6
6
|
import { ax, ix } from '@compiled/react/runtime';
|
|
7
7
|
import noop from '@atlaskit/ds-lib/noop';
|
|
8
8
|
import { slideAndFade } from '@atlaskit/top-layer/animations';
|
|
9
|
-
import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
10
9
|
import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
11
|
-
import { Popover } from '@atlaskit/top-layer/popover';
|
|
10
|
+
import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
|
|
12
11
|
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
|
|
13
12
|
import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
|
|
14
13
|
import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
|
|
@@ -115,15 +114,20 @@ export function PopupContentTopLayer({
|
|
|
115
114
|
});
|
|
116
115
|
const popoverRef = useRef(null);
|
|
117
116
|
const anchorRef = useContext(TriggerRefObjectContext);
|
|
117
|
+
|
|
118
|
+
// `isOpen` is included so the anchor positioning effect re-runs when
|
|
119
|
+
// the Popover host element is unmounted/remounted across open cycles.
|
|
118
120
|
useAnchorPosition({
|
|
119
121
|
anchorRef,
|
|
120
122
|
popoverRef,
|
|
121
|
-
placement: topLayerPlacement
|
|
123
|
+
placement: topLayerPlacement,
|
|
124
|
+
isOpen
|
|
122
125
|
});
|
|
123
126
|
useWidthFromAnchor({
|
|
124
127
|
mode: shouldFitContainer ? 'match-anchor' : 'none',
|
|
125
128
|
popoverRef,
|
|
126
|
-
anchorRef
|
|
129
|
+
anchorRef,
|
|
130
|
+
isOpen
|
|
127
131
|
});
|
|
128
132
|
|
|
129
133
|
// Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
|
|
@@ -6,10 +6,9 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
6
6
|
import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
|
|
7
7
|
import noop from '@atlaskit/ds-lib/noop';
|
|
8
8
|
import { slideAndFade } from '@atlaskit/top-layer/animations';
|
|
9
|
-
import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
10
9
|
import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
|
|
11
10
|
import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
12
|
-
import { Popover } from '@atlaskit/top-layer/popover';
|
|
11
|
+
import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
|
|
13
12
|
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
|
|
14
13
|
import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
|
|
15
14
|
import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
|
|
@@ -106,12 +105,14 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
|
|
|
106
105
|
useAnchorPosition({
|
|
107
106
|
anchorRef: triggerRef,
|
|
108
107
|
popoverRef,
|
|
109
|
-
placement: topLayerPlacement
|
|
108
|
+
placement: topLayerPlacement,
|
|
109
|
+
isOpen
|
|
110
110
|
});
|
|
111
111
|
useWidthFromAnchor({
|
|
112
112
|
mode: shouldFitContainer ? 'match-anchor' : 'none',
|
|
113
113
|
popoverRef,
|
|
114
|
-
anchorRef: triggerRef
|
|
114
|
+
anchorRef: triggerRef,
|
|
115
|
+
isOpen
|
|
115
116
|
});
|
|
116
117
|
|
|
117
118
|
// onClose bridge.
|
|
@@ -7,9 +7,8 @@ import { useCallback, useContext, useMemo, useRef, useState } from 'react';
|
|
|
7
7
|
import { ax, ix } from '@compiled/react/runtime';
|
|
8
8
|
import noop from '@atlaskit/ds-lib/noop';
|
|
9
9
|
import { slideAndFade } from '@atlaskit/top-layer/animations';
|
|
10
|
-
import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
11
10
|
import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
12
|
-
import { Popover } from '@atlaskit/top-layer/popover';
|
|
11
|
+
import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
|
|
13
12
|
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
|
|
14
13
|
import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
|
|
15
14
|
import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
|
|
@@ -101,15 +100,20 @@ export function PopupContentTopLayer(_ref) {
|
|
|
101
100
|
});
|
|
102
101
|
var popoverRef = useRef(null);
|
|
103
102
|
var anchorRef = useContext(TriggerRefObjectContext);
|
|
103
|
+
|
|
104
|
+
// `isOpen` is included so the anchor positioning effect re-runs when
|
|
105
|
+
// the Popover host element is unmounted/remounted across open cycles.
|
|
104
106
|
useAnchorPosition({
|
|
105
107
|
anchorRef: anchorRef,
|
|
106
108
|
popoverRef: popoverRef,
|
|
107
|
-
placement: topLayerPlacement
|
|
109
|
+
placement: topLayerPlacement,
|
|
110
|
+
isOpen: isOpen
|
|
108
111
|
});
|
|
109
112
|
useWidthFromAnchor({
|
|
110
113
|
mode: shouldFitContainer ? 'match-anchor' : 'none',
|
|
111
114
|
popoverRef: popoverRef,
|
|
112
|
-
anchorRef: anchorRef
|
|
115
|
+
anchorRef: anchorRef,
|
|
116
|
+
isOpen: isOpen
|
|
113
117
|
});
|
|
114
118
|
|
|
115
119
|
// Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
|
|
@@ -7,10 +7,9 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
7
7
|
import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
|
|
8
8
|
import noop from '@atlaskit/ds-lib/noop';
|
|
9
9
|
import { slideAndFade } from '@atlaskit/top-layer/animations';
|
|
10
|
-
import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
11
10
|
import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
|
|
12
11
|
import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
13
|
-
import { Popover } from '@atlaskit/top-layer/popover';
|
|
12
|
+
import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
|
|
14
13
|
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
|
|
15
14
|
import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
|
|
16
15
|
import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
|
|
@@ -89,12 +88,14 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
|
|
|
89
88
|
useAnchorPosition({
|
|
90
89
|
anchorRef: triggerRef,
|
|
91
90
|
popoverRef: popoverRef,
|
|
92
|
-
placement: topLayerPlacement
|
|
91
|
+
placement: topLayerPlacement,
|
|
92
|
+
isOpen: isOpen
|
|
93
93
|
});
|
|
94
94
|
useWidthFromAnchor({
|
|
95
95
|
mode: shouldFitContainer ? 'match-anchor' : 'none',
|
|
96
96
|
popoverRef: popoverRef,
|
|
97
|
-
anchorRef: triggerRef
|
|
97
|
+
anchorRef: triggerRef,
|
|
98
|
+
isOpen: isOpen
|
|
98
99
|
});
|
|
99
100
|
|
|
100
101
|
// onClose bridge.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "4.23.
|
|
3
|
+
"version": "4.23.4",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@atlaskit/portal": "^5.5.0",
|
|
49
49
|
"@atlaskit/primitives": "^19.0.0",
|
|
50
50
|
"@atlaskit/tokens": "^13.3.0",
|
|
51
|
-
"@atlaskit/top-layer": "^0.
|
|
51
|
+
"@atlaskit/top-layer": "^0.16.0",
|
|
52
52
|
"@babel/runtime": "^7.0.0",
|
|
53
53
|
"@compiled/react": "^0.20.0",
|
|
54
54
|
"bind-event-listener": "^3.0.0",
|