@atlaskit/popup 4.14.0 → 4.15.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 (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/popper-wrapper.js +79 -6
  3. package/dist/cjs/popup.js +7 -2
  4. package/dist/es2019/popper-wrapper.js +79 -6
  5. package/dist/es2019/popup.js +7 -2
  6. package/dist/esm/popper-wrapper.js +79 -6
  7. package/dist/esm/popup.js +7 -2
  8. package/dist/types/types.d.ts +5 -9
  9. package/dist/types-ts4.5/types.d.ts +5 -9
  10. package/package.json +11 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 4.15.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`18245cbd990e3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18245cbd990e3) -
8
+ [ux] Added motion on open and close of Popup behind fg platform-dst-motion-uplift
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 4.14.0
4
15
 
5
16
  ### Minor Changes
package/dist/cjs/popper-wrapper.js CHANGED
@@ -16,6 +16,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
16
16
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
17
  var _runtime = require("@compiled/react/runtime");
18
18
  var _layering = require("@atlaskit/layering");
19
+ var _motion = require("@atlaskit/motion");
19
20
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
21
  var _popper = require("@atlaskit/popper");
21
22
  var _repositionOnUpdate = require("./reposition-on-update");
@@ -27,7 +28,8 @@ var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
27
28
  var fullWidthStyles = null;
28
29
  var wrapperStyles = {
29
30
  root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
30
- rootT26Shape: "_2rko1mok"
31
+ rootT26Shape: "_2rko1mok",
32
+ rootLayer: "_1pby1nn1"
31
33
  };
32
34
  var scrollableStyles = null;
33
35
  var blanketStyles = null;
@@ -36,6 +38,56 @@ var newModalStyles = null;
36
38
  var focusRingStyles = {
37
39
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
38
40
  };
41
+ var placementMap = {
42
+ 'top': {
43
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
44
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
45
+ },
46
+ 'top-start': {
47
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
48
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
49
+ },
50
+ 'top-end': {
51
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
52
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
53
+ },
54
+ 'bottom': {
55
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
56
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
57
+ },
58
+ 'bottom-start': {
59
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
60
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
61
+ },
62
+ 'bottom-end': {
63
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
64
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
65
+ },
66
+ 'left': {
67
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
68
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
69
+ },
70
+ 'left-start': {
71
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
72
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
73
+ },
74
+ 'left-end': {
75
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
76
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
77
+ },
78
+ 'right': {
79
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
80
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
81
+ },
82
+ 'right-start': {
83
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
84
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
85
+ },
86
+ 'right-end': {
87
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
88
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
89
+ }
90
+ };
39
91
  var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
40
92
  var shouldRenderToParent = props.shouldRenderToParent,
41
93
  shouldFitContainer = props.shouldFitContainer,
@@ -49,7 +101,7 @@ var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props,
49
101
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
50
102
  className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
51
103
  }, htmlAttributes, {
52
- ref: ref
104
+ ref: !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? ref : undefined
53
105
  }), children);
54
106
  });
55
107
  function PopperWrapper(_ref) {
@@ -155,7 +207,7 @@ function PopperWrapper(_ref) {
155
207
  role: role,
156
208
  "aria-label": label,
157
209
  "aria-labelledby": titleId,
158
- ref: function ref(node) {
210
+ ref: !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? function (node) {
159
211
  if (node) {
160
212
  if (typeof _ref3 === 'function') {
161
213
  _ref3(node);
@@ -164,10 +216,10 @@ function PopperWrapper(_ref) {
164
216
  }
165
217
  setPopupRef(node);
166
218
  }
167
- }
219
+ } : undefined
168
220
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
169
221
  ,
170
- style: appearance === 'UNSAFE_modal-below-sm' ? {} : style
222
+ style: (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
171
223
  // using tabIndex={-1} would cause a bug where Safari focuses
172
224
  // first on the browser address bar when using keyboard
173
225
  ,
@@ -184,7 +236,28 @@ function PopperWrapper(_ref) {
184
236
  onClose: onClose,
185
237
  setInitialFocusRef: setInitialFocusRef
186
238
  })));
187
- return /*#__PURE__*/React.createElement(_react.Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
239
+ var container = /*#__PURE__*/React.createElement("div", {
240
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
241
+ style: style,
242
+ // using tabIndex={-1} would cause a bug where Safari focuses
243
+ // first on the browser address bar when using keyboard
244
+ ref: function ref(node) {
245
+ if (node) {
246
+ if (typeof _ref3 === 'function') {
247
+ _ref3(node);
248
+ } else {
249
+ _ref3.current = node;
250
+ }
251
+ setPopupRef(node);
252
+ }
253
+ },
254
+ "data-testid": "".concat(testId, "--container"),
255
+ className: (0, _runtime.ax)([wrapperStyles.rootLayer])
256
+ }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(_motion.Motion, {
257
+ enteringAnimation: placementMap[placement].enter,
258
+ exitingAnimation: placementMap[placement].exit
259
+ }, popupContainer));
260
+ return /*#__PURE__*/React.createElement(_react.Fragment, null, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
188
261
  className: (0, _runtime.ax)(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
189
262
  }));
190
263
  });
package/dist/cjs/popup.js CHANGED
@@ -15,6 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
15
15
  var _useId = require("@atlaskit/ds-lib/use-id");
16
16
  var _layering = require("@atlaskit/layering");
17
17
  var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
18
+ var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
18
19
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
20
  var _popper = require("@atlaskit/popper");
20
21
  var _portal = _interopRequireDefault(require("@atlaskit/portal"));
@@ -130,9 +131,13 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
130
131
  'aria-expanded': isOpen,
131
132
  'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true
132
133
  });
133
- }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
134
+ }), !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
134
135
  zIndex: zIndex
135
- }, renderPopperWrapper)));
136
+ }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && /*#__PURE__*/React.createElement(_exitingPersistence.default, {
137
+ appear: true
138
+ }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
139
+ zIndex: zIndex
140
+ }, renderPopperWrapper))));
136
141
  if (shouldFitContainer) {
137
142
  return /*#__PURE__*/React.createElement(_compiled.Box, {
138
143
  xcss: wrapperStyles.root
package/dist/es2019/popper-wrapper.js CHANGED
@@ -5,6 +5,7 @@ import * as React from 'react';
5
5
  import { forwardRef, Fragment, useMemo, useState } from 'react';
6
6
  import { ax, ix } from '@compiled/react/runtime';
7
7
  import { useLayering } from '@atlaskit/layering';
8
+ import { Motion } from '@atlaskit/motion';
8
9
  import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { Popper } from '@atlaskit/popper';
10
11
  import { RepositionOnUpdate } from './reposition-on-update';
@@ -14,7 +15,8 @@ const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
14
15
  const fullWidthStyles = null;
15
16
  const wrapperStyles = {
16
17
  root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
17
- rootT26Shape: "_2rko1mok"
18
+ rootT26Shape: "_2rko1mok",
19
+ rootLayer: "_1pby1nn1"
18
20
  };
19
21
  const scrollableStyles = null;
20
22
  const blanketStyles = null;
@@ -23,6 +25,56 @@ const newModalStyles = null;
23
25
  const focusRingStyles = {
24
26
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
25
27
  };
28
+ const placementMap = {
29
+ 'top': {
30
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
31
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
32
+ },
33
+ 'top-start': {
34
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
35
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
36
+ },
37
+ 'top-end': {
38
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
39
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
40
+ },
41
+ 'bottom': {
42
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
43
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
44
+ },
45
+ 'bottom-start': {
46
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
47
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
48
+ },
49
+ 'bottom-end': {
50
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
51
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
52
+ },
53
+ 'left': {
54
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
55
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
56
+ },
57
+ 'left-start': {
58
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
59
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
60
+ },
61
+ 'left-end': {
62
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
63
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
64
+ },
65
+ 'right': {
66
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
67
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
68
+ },
69
+ 'right-start': {
70
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
71
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
72
+ },
73
+ 'right-end': {
74
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
75
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
76
+ }
77
+ };
26
78
  const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
27
79
  const {
28
80
  shouldRenderToParent,
@@ -38,7 +90,7 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
38
90
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
39
91
  className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
40
92
  }, htmlAttributes, {
41
- ref: ref
93
+ ref: !fg('platform-dst-motion-uplift') ? ref : undefined
42
94
  }), children);
43
95
  });
44
96
  function PopperWrapper({
@@ -135,7 +187,7 @@ function PopperWrapper({
135
187
  role: role,
136
188
  "aria-label": label,
137
189
  "aria-labelledby": titleId,
138
- ref: node => {
190
+ ref: !fg('platform-dst-motion-uplift') ? node => {
139
191
  if (node) {
140
192
  if (typeof ref === 'function') {
141
193
  ref(node);
@@ -144,10 +196,10 @@ function PopperWrapper({
144
196
  }
145
197
  setPopupRef(node);
146
198
  }
147
- }
199
+ } : undefined
148
200
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
149
201
  ,
150
- style: appearance === 'UNSAFE_modal-below-sm' ? {} : style
202
+ style: fg('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
151
203
  // using tabIndex={-1} would cause a bug where Safari focuses
152
204
  // first on the browser address bar when using keyboard
153
205
  ,
@@ -164,7 +216,28 @@ function PopperWrapper({
164
216
  onClose,
165
217
  setInitialFocusRef
166
218
  })));
167
- return /*#__PURE__*/React.createElement(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
219
+ const container = /*#__PURE__*/React.createElement("div", {
220
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
221
+ style: style,
222
+ // using tabIndex={-1} would cause a bug where Safari focuses
223
+ // first on the browser address bar when using keyboard
224
+ ref: node => {
225
+ if (node) {
226
+ if (typeof ref === 'function') {
227
+ ref(node);
228
+ } else {
229
+ ref.current = node;
230
+ }
231
+ setPopupRef(node);
232
+ }
233
+ },
234
+ "data-testid": `${testId}--container`,
235
+ className: ax([wrapperStyles.rootLayer])
236
+ }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
237
+ enteringAnimation: placementMap[placement].enter,
238
+ exitingAnimation: placementMap[placement].exit
239
+ }, popupContainer));
240
+ return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
168
241
  className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
169
242
  }));
170
243
  });
package/dist/es2019/popup.js CHANGED
@@ -7,6 +7,7 @@ import { memo, useCallback, useState } from 'react';
7
7
  import { useId } from '@atlaskit/ds-lib/use-id';
8
8
  import { Layering } from '@atlaskit/layering';
9
9
  import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
10
+ import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
10
11
  import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { Manager, Reference } from '@atlaskit/popper';
12
13
  import Portal from '@atlaskit/portal';
@@ -109,9 +110,13 @@ export const Popup = /*#__PURE__*/memo(({
109
110
  'aria-expanded': isOpen,
110
111
  'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
111
112
  });
112
- }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
113
+ }), !fg('platform-dst-motion-uplift') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
113
114
  zIndex: zIndex
114
- }, renderPopperWrapper)));
115
+ }, renderPopperWrapper)), fg('platform-dst-motion-uplift') && /*#__PURE__*/React.createElement(ExitingPersistence, {
116
+ appear: true
117
+ }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
118
+ zIndex: zIndex
119
+ }, renderPopperWrapper))));
115
120
  if (shouldFitContainer) {
116
121
  return /*#__PURE__*/React.createElement(Box, {
117
122
  xcss: wrapperStyles.root
package/dist/esm/popper-wrapper.js CHANGED
@@ -9,6 +9,7 @@ import * as React from 'react';
9
9
  import { forwardRef, Fragment, useMemo, useState } from 'react';
10
10
  import { ax, ix } from '@compiled/react/runtime';
11
11
  import { useLayering } from '@atlaskit/layering';
12
+ import { Motion } from '@atlaskit/motion';
12
13
  import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { Popper } from '@atlaskit/popper';
14
15
  import { RepositionOnUpdate } from './reposition-on-update';
@@ -18,7 +19,8 @@ var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
18
19
  var fullWidthStyles = null;
19
20
  var wrapperStyles = {
20
21
  root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
21
- rootT26Shape: "_2rko1mok"
22
+ rootT26Shape: "_2rko1mok",
23
+ rootLayer: "_1pby1nn1"
22
24
  };
23
25
  var scrollableStyles = null;
24
26
  var blanketStyles = null;
@@ -27,6 +29,56 @@ var newModalStyles = null;
27
29
  var focusRingStyles = {
28
30
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
29
31
  };
32
+ var placementMap = {
33
+ 'top': {
34
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
35
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
36
+ },
37
+ 'top-start': {
38
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
39
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
40
+ },
41
+ 'top-end': {
42
+ enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
43
+ exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
44
+ },
45
+ 'bottom': {
46
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
47
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
48
+ },
49
+ 'bottom-start': {
50
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
51
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
52
+ },
53
+ 'bottom-end': {
54
+ enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
55
+ exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
56
+ },
57
+ 'left': {
58
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
59
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
60
+ },
61
+ 'left-start': {
62
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
63
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
64
+ },
65
+ 'left-end': {
66
+ enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
67
+ exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
68
+ },
69
+ 'right': {
70
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
71
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
72
+ },
73
+ 'right-start': {
74
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
75
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
76
+ },
77
+ 'right-end': {
78
+ enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
79
+ exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
80
+ }
81
+ };
30
82
  var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
31
83
  var shouldRenderToParent = props.shouldRenderToParent,
32
84
  shouldFitContainer = props.shouldFitContainer,
@@ -40,7 +92,7 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
40
92
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
41
93
  className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
42
94
  }, htmlAttributes, {
43
- ref: ref
95
+ ref: !fg('platform-dst-motion-uplift') ? ref : undefined
44
96
  }), children);
45
97
  });
46
98
  function PopperWrapper(_ref) {
@@ -146,7 +198,7 @@ function PopperWrapper(_ref) {
146
198
  role: role,
147
199
  "aria-label": label,
148
200
  "aria-labelledby": titleId,
149
- ref: function ref(node) {
201
+ ref: !fg('platform-dst-motion-uplift') ? function (node) {
150
202
  if (node) {
151
203
  if (typeof _ref3 === 'function') {
152
204
  _ref3(node);
@@ -155,10 +207,10 @@ function PopperWrapper(_ref) {
155
207
  }
156
208
  setPopupRef(node);
157
209
  }
158
- }
210
+ } : undefined
159
211
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
160
212
  ,
161
- style: appearance === 'UNSAFE_modal-below-sm' ? {} : style
213
+ style: fg('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
162
214
  // using tabIndex={-1} would cause a bug where Safari focuses
163
215
  // first on the browser address bar when using keyboard
164
216
  ,
@@ -175,7 +227,28 @@ function PopperWrapper(_ref) {
175
227
  onClose: onClose,
176
228
  setInitialFocusRef: setInitialFocusRef
177
229
  })));
178
- return /*#__PURE__*/React.createElement(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
230
+ var container = /*#__PURE__*/React.createElement("div", {
231
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
232
+ style: style,
233
+ // using tabIndex={-1} would cause a bug where Safari focuses
234
+ // first on the browser address bar when using keyboard
235
+ ref: function ref(node) {
236
+ if (node) {
237
+ if (typeof _ref3 === 'function') {
238
+ _ref3(node);
239
+ } else {
240
+ _ref3.current = node;
241
+ }
242
+ setPopupRef(node);
243
+ }
244
+ },
245
+ "data-testid": "".concat(testId, "--container"),
246
+ className: ax([wrapperStyles.rootLayer])
247
+ }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
248
+ enteringAnimation: placementMap[placement].enter,
249
+ exitingAnimation: placementMap[placement].exit
250
+ }, popupContainer));
251
+ return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
179
252
  className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
180
253
  }));
181
254
  });
package/dist/esm/popup.js CHANGED
@@ -9,6 +9,7 @@ import { memo, useCallback, useState } from 'react';
9
9
  import { useId } from '@atlaskit/ds-lib/use-id';
10
10
  import { Layering } from '@atlaskit/layering';
11
11
  import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
12
+ import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
12
13
  import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { Manager, Reference } from '@atlaskit/popper';
14
15
  import Portal from '@atlaskit/portal';
@@ -122,9 +123,13 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
122
123
  'aria-expanded': isOpen,
123
124
  'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
124
125
  });
125
- }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
126
+ }), !fg('platform-dst-motion-uplift') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
126
127
  zIndex: zIndex
127
- }, renderPopperWrapper)));
128
+ }, renderPopperWrapper)), fg('platform-dst-motion-uplift') && /*#__PURE__*/React.createElement(ExitingPersistence, {
129
+ appear: true
130
+ }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
131
+ zIndex: zIndex
132
+ }, renderPopperWrapper))));
128
133
  if (shouldFitContainer) {
129
134
  return /*#__PURE__*/React.createElement(Box, {
130
135
  xcss: wrapperStyles.root
package/dist/types/types.d.ts CHANGED
@@ -63,10 +63,6 @@ export interface PopupComponentProps {
63
63
  * ID passed through by the parent popup.
64
64
  */
65
65
  id?: string;
66
- /**
67
- * Ref that should be assigned to the root element.
68
- */
69
- ref: Ref<HTMLDivElement>;
70
66
  /**
71
67
  * Style that should be assigned to the root element.
72
68
  */
@@ -102,11 +98,6 @@ export interface PopupComponentProps {
102
98
  * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
103
99
  */
104
100
  appearance?: 'default' | 'UNSAFE_modal-below-sm';
105
- /**
106
- * Use this to set the accessibility role for the popup.
107
- * We strongly recommend using only `menu` or `dialog`.
108
- */
109
- role?: string;
110
101
  /**
111
102
  * Class name to apply to the popup container element.
112
103
  */
@@ -115,6 +106,11 @@ export interface PopupComponentProps {
115
106
  * Boolean to indicate if the reference element is hidden.
116
107
  */
117
108
  isReferenceHidden?: boolean;
109
+ /**
110
+ * Use this to set the accessibility role for the popup.
111
+ * We strongly recommend using only `menu` or `dialog`.
112
+ */
113
+ role?: string;
118
114
  }
119
115
  interface BaseProps {
120
116
  /**
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -63,10 +63,6 @@ export interface PopupComponentProps {
63
63
  * ID passed through by the parent popup.
64
64
  */
65
65
  id?: string;
66
- /**
67
- * Ref that should be assigned to the root element.
68
- */
69
- ref: Ref<HTMLDivElement>;
70
66
  /**
71
67
  * Style that should be assigned to the root element.
72
68
  */
@@ -102,11 +98,6 @@ export interface PopupComponentProps {
102
98
  * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
103
99
  */
104
100
  appearance?: 'default' | 'UNSAFE_modal-below-sm';
105
- /**
106
- * Use this to set the accessibility role for the popup.
107
- * We strongly recommend using only `menu` or `dialog`.
108
- */
109
- role?: string;
110
101
  /**
111
102
  * Class name to apply to the popup container element.
112
103
  */
@@ -115,6 +106,11 @@ export interface PopupComponentProps {
115
106
  * Boolean to indicate if the reference element is hidden.
116
107
  */
117
108
  isReferenceHidden?: boolean;
109
+ /**
110
+ * Use this to set the accessibility role for the popup.
111
+ * We strongly recommend using only `menu` or `dialog`.
112
+ */
113
+ role?: string;
118
114
  }
119
115
  interface BaseProps {
120
116
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "4.14.0",
3
+ "version": "4.15.0",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,11 +35,12 @@
35
35
  "@atlaskit/css": "^0.19.0",
36
36
  "@atlaskit/ds-lib": "^6.0.0",
37
37
  "@atlaskit/layering": "^3.6.0",
38
+ "@atlaskit/motion": "^5.5.0",
38
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
40
  "@atlaskit/popper": "^7.1.0",
40
- "@atlaskit/portal": "^5.2.0",
41
- "@atlaskit/primitives": "^18.0.0",
42
- "@atlaskit/tokens": "^11.1.0",
41
+ "@atlaskit/portal": "^5.3.0",
42
+ "@atlaskit/primitives": "^18.1.0",
43
+ "@atlaskit/tokens": "^11.4.0",
43
44
  "@babel/runtime": "^7.0.0",
44
45
  "@compiled/react": "^0.20.0",
45
46
  "bind-event-listener": "^3.0.0",
@@ -58,11 +59,11 @@
58
59
  "@atlaskit/button": "^23.10.0",
59
60
  "@atlaskit/code": "^17.4.0",
60
61
  "@atlaskit/docs": "^11.7.0",
61
- "@atlaskit/form": "^15.4.0",
62
+ "@atlaskit/form": "^15.5.0",
62
63
  "@atlaskit/heading": "^5.3.0",
63
- "@atlaskit/icon": "^33.0.0",
64
+ "@atlaskit/icon": "^33.1.0",
64
65
  "@atlaskit/link": "^3.3.0",
65
- "@atlaskit/modal-dialog": "^14.11.0",
66
+ "@atlaskit/modal-dialog": "^14.14.0",
66
67
  "@atlaskit/section-message": "^8.12.0",
67
68
  "@atlaskit/textfield": "^8.2.0",
68
69
  "@atlaskit/toggle": "^15.2.0",
@@ -122,6 +123,9 @@
122
123
  },
123
124
  "platform_dst_nested_escape": {
124
125
  "type": "boolean"
126
+ },
127
+ "platform-dst-motion-uplift": {
128
+ "type": "boolean"
125
129
  }
126
130
  },
127
131
  "homepage": "https://atlassian.design/components/popup/"