@atlaskit/popup 4.23.3 → 4.24.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.
Files changed (14) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/compositional/popup-content-top-layer.js +7 -2
  3. package/dist/cjs/popper-wrapper.js +4 -3
  4. package/dist/cjs/popup-top-layer.js +4 -2
  5. package/dist/cjs/popup.js +3 -1
  6. package/dist/es2019/compositional/popup-content-top-layer.js +7 -2
  7. package/dist/es2019/popper-wrapper.js +4 -3
  8. package/dist/es2019/popup-top-layer.js +4 -2
  9. package/dist/es2019/popup.js +3 -1
  10. package/dist/esm/compositional/popup-content-top-layer.js +7 -2
  11. package/dist/esm/popper-wrapper.js +4 -3
  12. package/dist/esm/popup-top-layer.js +4 -2
  13. package/dist/esm/popup.js +3 -1
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 4.24.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`4df99aae5125e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4df99aae5125e) -
8
+ Fixed remounting of auto placed popups with new motion
9
+
10
+ ## 4.23.4
11
+
12
+ ### Patch Changes
13
+
14
+ - [`6d0485dce81c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d0485dce81c4) -
15
+ Internal: updated to the new `@atlaskit/top-layer` `Popover`/`Dialog` behaviour where the host
16
+ element unmounts after the exit animation completes. No consumer action required.
17
+ - Updated dependencies
18
+
3
19
  ## 4.23.3
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/compositional/popup-content-top-layer.js CHANGED
@@ -109,15 +109,20 @@ function PopupContentTopLayer(_ref) {
109
109
  });
110
110
  var popoverRef = (0, _react.useRef)(null);
111
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.
112
115
  (0, _useAnchorPosition.useAnchorPosition)({
113
116
  anchorRef: anchorRef,
114
117
  popoverRef: popoverRef,
115
- placement: topLayerPlacement
118
+ placement: topLayerPlacement,
119
+ isOpen: isOpen
116
120
  });
117
121
  (0, _useWidthFromAnchor.useWidthFromAnchor)({
118
122
  mode: shouldFitContainer ? 'match-anchor' : 'none',
119
123
  popoverRef: popoverRef,
120
- anchorRef: anchorRef
124
+ anchorRef: anchorRef,
125
+ isOpen: isOpen
121
126
  });
122
127
 
123
128
  // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
package/dist/cjs/popper-wrapper.js CHANGED
@@ -242,6 +242,7 @@ function PopperWrapper(_ref) {
242
242
  onClose: onClose,
243
243
  setInitialFocusRef: setInitialFocusRef
244
244
  })));
245
+ var isAutoPlacement = placement === 'auto' || placement === 'auto-start' || placement === 'auto-end';
245
246
  var container = /*#__PURE__*/React.createElement("div", {
246
247
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
247
248
  style: _objectSpread(_objectSpread({}, style), {}, {
@@ -261,9 +262,9 @@ function PopperWrapper(_ref) {
261
262
  },
262
263
  "data-testid": "".concat(testId, "--container"),
263
264
  className: (0, _runtime.ax)([shouldFitContainer && wrapperStyles.fullWidth])
264
- }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(_motion.Motion, {
265
- enteringAnimation: placementMap[placement].enter,
266
- exitingAnimation: placementMap[placement].exit,
265
+ }, /*#__PURE__*/React.createElement(_motion.Motion, {
266
+ enteringAnimation: !isAutoPlacement ? placementMap[placement].enter : undefined,
267
+ exitingAnimation: !isAutoPlacement ? placementMap[placement].exit : undefined,
267
268
  xcss: wrapperStyles.motion
268
269
  }, popupContainer));
269
270
  return /*#__PURE__*/React.createElement(_react.Fragment, null, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
package/dist/cjs/popup-top-layer.js CHANGED
@@ -97,12 +97,14 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
97
97
  (0, _useAnchorPosition.useAnchorPosition)({
98
98
  anchorRef: triggerRef,
99
99
  popoverRef: popoverRef,
100
- placement: topLayerPlacement
100
+ placement: topLayerPlacement,
101
+ isOpen: isOpen
101
102
  });
102
103
  (0, _useWidthFromAnchor.useWidthFromAnchor)({
103
104
  mode: shouldFitContainer ? 'match-anchor' : 'none',
104
105
  popoverRef: popoverRef,
105
- anchorRef: triggerRef
106
+ anchorRef: triggerRef,
107
+ isOpen: isOpen
106
108
  });
107
109
 
108
110
  // onClose bridge.
package/dist/cjs/popup.js CHANGED
@@ -160,7 +160,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
160
160
  });
161
161
  }), !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
162
162
  zIndex: zIndex
163
- }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(_exitingPersistence.default, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
163
+ }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(_exitingPersistence.default, {
164
+ appear: true
165
+ }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
164
166
  zIndex: zIndex
165
167
  }, renderPopperWrapper))));
166
168
  if (shouldFitContainer) {
package/dist/es2019/compositional/popup-content-top-layer.js CHANGED
@@ -114,15 +114,20 @@ export function PopupContentTopLayer({
114
114
  });
115
115
  const popoverRef = useRef(null);
116
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.
117
120
  useAnchorPosition({
118
121
  anchorRef,
119
122
  popoverRef,
120
- placement: topLayerPlacement
123
+ placement: topLayerPlacement,
124
+ isOpen
121
125
  });
122
126
  useWidthFromAnchor({
123
127
  mode: shouldFitContainer ? 'match-anchor' : 'none',
124
128
  popoverRef,
125
- anchorRef
129
+ anchorRef,
130
+ isOpen
126
131
  });
127
132
 
128
133
  // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
package/dist/es2019/popper-wrapper.js CHANGED
@@ -219,6 +219,7 @@ function PopperWrapper({
219
219
  onClose,
220
220
  setInitialFocusRef
221
221
  })));
222
+ const isAutoPlacement = placement === 'auto' || placement === 'auto-start' || placement === 'auto-end';
222
223
  const container = /*#__PURE__*/React.createElement("div", {
223
224
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
224
225
  style: {
@@ -239,9 +240,9 @@ function PopperWrapper({
239
240
  },
240
241
  "data-testid": `${testId}--container`,
241
242
  className: ax([shouldFitContainer && wrapperStyles.fullWidth])
242
- }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
243
- enteringAnimation: placementMap[placement].enter,
244
- exitingAnimation: placementMap[placement].exit,
243
+ }, /*#__PURE__*/React.createElement(Motion, {
244
+ enteringAnimation: !isAutoPlacement ? placementMap[placement].enter : undefined,
245
+ exitingAnimation: !isAutoPlacement ? placementMap[placement].exit : undefined,
245
246
  xcss: wrapperStyles.motion
246
247
  }, popupContainer));
247
248
  return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
package/dist/es2019/popup-top-layer.js CHANGED
@@ -105,12 +105,14 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
105
105
  useAnchorPosition({
106
106
  anchorRef: triggerRef,
107
107
  popoverRef,
108
- placement: topLayerPlacement
108
+ placement: topLayerPlacement,
109
+ isOpen
109
110
  });
110
111
  useWidthFromAnchor({
111
112
  mode: shouldFitContainer ? 'match-anchor' : 'none',
112
113
  popoverRef,
113
- anchorRef: triggerRef
114
+ anchorRef: triggerRef,
115
+ isOpen
114
116
  });
115
117
 
116
118
  // onClose bridge.
package/dist/es2019/popup.js CHANGED
@@ -140,7 +140,9 @@ export const Popup = /*#__PURE__*/memo(props => {
140
140
  });
141
141
  }), !fg('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
142
142
  zIndex: zIndex
143
- }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
143
+ }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, {
144
+ appear: true
145
+ }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
144
146
  zIndex: zIndex
145
147
  }, renderPopperWrapper))));
146
148
  if (shouldFitContainer) {
package/dist/esm/compositional/popup-content-top-layer.js CHANGED
@@ -100,15 +100,20 @@ export function PopupContentTopLayer(_ref) {
100
100
  });
101
101
  var popoverRef = useRef(null);
102
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.
103
106
  useAnchorPosition({
104
107
  anchorRef: anchorRef,
105
108
  popoverRef: popoverRef,
106
- placement: topLayerPlacement
109
+ placement: topLayerPlacement,
110
+ isOpen: isOpen
107
111
  });
108
112
  useWidthFromAnchor({
109
113
  mode: shouldFitContainer ? 'match-anchor' : 'none',
110
114
  popoverRef: popoverRef,
111
- anchorRef: anchorRef
115
+ anchorRef: anchorRef,
116
+ isOpen: isOpen
112
117
  });
113
118
 
114
119
  // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
package/dist/esm/popper-wrapper.js CHANGED
@@ -233,6 +233,7 @@ function PopperWrapper(_ref) {
233
233
  onClose: onClose,
234
234
  setInitialFocusRef: setInitialFocusRef
235
235
  })));
236
+ var isAutoPlacement = placement === 'auto' || placement === 'auto-start' || placement === 'auto-end';
236
237
  var container = /*#__PURE__*/React.createElement("div", {
237
238
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
238
239
  style: _objectSpread(_objectSpread({}, style), {}, {
@@ -252,9 +253,9 @@ function PopperWrapper(_ref) {
252
253
  },
253
254
  "data-testid": "".concat(testId, "--container"),
254
255
  className: ax([shouldFitContainer && wrapperStyles.fullWidth])
255
- }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
256
- enteringAnimation: placementMap[placement].enter,
257
- exitingAnimation: placementMap[placement].exit,
256
+ }, /*#__PURE__*/React.createElement(Motion, {
257
+ enteringAnimation: !isAutoPlacement ? placementMap[placement].enter : undefined,
258
+ exitingAnimation: !isAutoPlacement ? placementMap[placement].exit : undefined,
258
259
  xcss: wrapperStyles.motion
259
260
  }, popupContainer));
260
261
  return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
package/dist/esm/popup-top-layer.js CHANGED
@@ -88,12 +88,14 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
88
88
  useAnchorPosition({
89
89
  anchorRef: triggerRef,
90
90
  popoverRef: popoverRef,
91
- placement: topLayerPlacement
91
+ placement: topLayerPlacement,
92
+ isOpen: isOpen
92
93
  });
93
94
  useWidthFromAnchor({
94
95
  mode: shouldFitContainer ? 'match-anchor' : 'none',
95
96
  popoverRef: popoverRef,
96
- anchorRef: triggerRef
97
+ anchorRef: triggerRef,
98
+ isOpen: isOpen
97
99
  });
98
100
 
99
101
  // onClose bridge.
package/dist/esm/popup.js CHANGED
@@ -152,7 +152,9 @@ export var Popup = /*#__PURE__*/memo(function (props) {
152
152
  });
153
153
  }), !fg('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
154
154
  zIndex: zIndex
155
- }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
155
+ }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, {
156
+ appear: true
157
+ }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
156
158
  zIndex: zIndex
157
159
  }, renderPopperWrapper))));
158
160
  if (shouldFitContainer) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "4.23.3",
3
+ "version": "4.24.0",
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.15.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",