@atlaskit/popup 4.14.0 → 4.16.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 +18 -0
  2. package/dist/cjs/popper-wrapper.js +80 -6
  3. package/dist/cjs/popup.js +5 -2
  4. package/dist/es2019/popper-wrapper.js +80 -6
  5. package/dist/es2019/popup.js +5 -2
  6. package/dist/esm/popper-wrapper.js +80 -6
  7. package/dist/esm/popup.js +5 -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,23 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 4.16.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`21bf94c1c7dee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21bf94c1c7dee) -
8
+ Fixed issue where full width was not working with new motion updates
9
+
10
+ ## 4.15.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`18245cbd990e3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18245cbd990e3) -
15
+ [ux] Added motion on open and close of Popup behind fg platform-dst-motion-uplift
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 4.14.0
4
22
 
5
23
  ### 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,9 @@ 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",
33
+ fullWidth: "_1bsb1osq"
31
34
  };
32
35
  var scrollableStyles = null;
33
36
  var blanketStyles = null;
@@ -36,6 +39,56 @@ var newModalStyles = null;
36
39
  var focusRingStyles = {
37
40
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
38
41
  };
42
+ var placementMap = {
43
+ 'top': {
44
+ 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)",
45
+ 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)"
46
+ },
47
+ 'top-start': {
48
+ 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)",
49
+ 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)"
50
+ },
51
+ 'top-end': {
52
+ 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)",
53
+ 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)"
54
+ },
55
+ 'bottom': {
56
+ 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)",
57
+ 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)"
58
+ },
59
+ 'bottom-start': {
60
+ 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)",
61
+ 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)"
62
+ },
63
+ 'bottom-end': {
64
+ 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)",
65
+ 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)"
66
+ },
67
+ 'left': {
68
+ 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)",
69
+ 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)"
70
+ },
71
+ 'left-start': {
72
+ 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)",
73
+ 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)"
74
+ },
75
+ 'left-end': {
76
+ 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)",
77
+ 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)"
78
+ },
79
+ 'right': {
80
+ 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)",
81
+ 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)"
82
+ },
83
+ 'right-start': {
84
+ 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)",
85
+ 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)"
86
+ },
87
+ 'right-end': {
88
+ 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)",
89
+ 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)"
90
+ }
91
+ };
39
92
  var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
40
93
  var shouldRenderToParent = props.shouldRenderToParent,
41
94
  shouldFitContainer = props.shouldFitContainer,
@@ -49,7 +102,7 @@ var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props,
49
102
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
50
103
  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
104
  }, htmlAttributes, {
52
- ref: ref
105
+ ref: !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? ref : undefined
53
106
  }), children);
54
107
  });
55
108
  function PopperWrapper(_ref) {
@@ -155,7 +208,7 @@ function PopperWrapper(_ref) {
155
208
  role: role,
156
209
  "aria-label": label,
157
210
  "aria-labelledby": titleId,
158
- ref: function ref(node) {
211
+ ref: !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? function (node) {
159
212
  if (node) {
160
213
  if (typeof _ref3 === 'function') {
161
214
  _ref3(node);
@@ -164,10 +217,10 @@ function PopperWrapper(_ref) {
164
217
  }
165
218
  setPopupRef(node);
166
219
  }
167
- }
220
+ } : undefined
168
221
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
169
222
  ,
170
- style: appearance === 'UNSAFE_modal-below-sm' ? {} : style
223
+ style: (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
171
224
  // using tabIndex={-1} would cause a bug where Safari focuses
172
225
  // first on the browser address bar when using keyboard
173
226
  ,
@@ -184,7 +237,28 @@ function PopperWrapper(_ref) {
184
237
  onClose: onClose,
185
238
  setInitialFocusRef: setInitialFocusRef
186
239
  })));
187
- return /*#__PURE__*/React.createElement(_react.Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
240
+ var container = /*#__PURE__*/React.createElement("div", {
241
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
242
+ style: style,
243
+ // using tabIndex={-1} would cause a bug where Safari focuses
244
+ // first on the browser address bar when using keyboard
245
+ ref: function ref(node) {
246
+ if (node) {
247
+ if (typeof _ref3 === 'function') {
248
+ _ref3(node);
249
+ } else {
250
+ _ref3.current = node;
251
+ }
252
+ setPopupRef(node);
253
+ }
254
+ },
255
+ "data-testid": "".concat(testId, "--container"),
256
+ className: (0, _runtime.ax)([wrapperStyles.rootLayer, shouldFitContainer && wrapperStyles.fullWidth])
257
+ }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(_motion.Motion, {
258
+ enteringAnimation: placementMap[placement].enter,
259
+ exitingAnimation: placementMap[placement].exit
260
+ }, popupContainer));
261
+ 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
262
  className: (0, _runtime.ax)(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
189
263
  }));
190
264
  });
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,11 @@ 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, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
137
+ zIndex: zIndex
138
+ }, renderPopperWrapper))));
136
139
  if (shouldFitContainer) {
137
140
  return /*#__PURE__*/React.createElement(_compiled.Box, {
138
141
  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,9 @@ 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",
20
+ fullWidth: "_1bsb1osq"
18
21
  };
19
22
  const scrollableStyles = null;
20
23
  const blanketStyles = null;
@@ -23,6 +26,56 @@ const newModalStyles = null;
23
26
  const focusRingStyles = {
24
27
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
25
28
  };
29
+ const placementMap = {
30
+ 'top': {
31
+ 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)",
32
+ 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)"
33
+ },
34
+ 'top-start': {
35
+ 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)",
36
+ 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)"
37
+ },
38
+ 'top-end': {
39
+ 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)",
40
+ 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)"
41
+ },
42
+ 'bottom': {
43
+ 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)",
44
+ 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)"
45
+ },
46
+ 'bottom-start': {
47
+ 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)",
48
+ 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)"
49
+ },
50
+ 'bottom-end': {
51
+ 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)",
52
+ 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)"
53
+ },
54
+ 'left': {
55
+ 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)",
56
+ 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)"
57
+ },
58
+ 'left-start': {
59
+ 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)",
60
+ 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)"
61
+ },
62
+ 'left-end': {
63
+ 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)",
64
+ 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)"
65
+ },
66
+ 'right': {
67
+ 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)",
68
+ 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)"
69
+ },
70
+ 'right-start': {
71
+ 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)",
72
+ 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)"
73
+ },
74
+ 'right-end': {
75
+ 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)",
76
+ 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)"
77
+ }
78
+ };
26
79
  const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
27
80
  const {
28
81
  shouldRenderToParent,
@@ -38,7 +91,7 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
38
91
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
39
92
  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
93
  }, htmlAttributes, {
41
- ref: ref
94
+ ref: !fg('platform-dst-motion-uplift') ? ref : undefined
42
95
  }), children);
43
96
  });
44
97
  function PopperWrapper({
@@ -135,7 +188,7 @@ function PopperWrapper({
135
188
  role: role,
136
189
  "aria-label": label,
137
190
  "aria-labelledby": titleId,
138
- ref: node => {
191
+ ref: !fg('platform-dst-motion-uplift') ? node => {
139
192
  if (node) {
140
193
  if (typeof ref === 'function') {
141
194
  ref(node);
@@ -144,10 +197,10 @@ function PopperWrapper({
144
197
  }
145
198
  setPopupRef(node);
146
199
  }
147
- }
200
+ } : undefined
148
201
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
149
202
  ,
150
- style: appearance === 'UNSAFE_modal-below-sm' ? {} : style
203
+ style: fg('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
151
204
  // using tabIndex={-1} would cause a bug where Safari focuses
152
205
  // first on the browser address bar when using keyboard
153
206
  ,
@@ -164,7 +217,28 @@ function PopperWrapper({
164
217
  onClose,
165
218
  setInitialFocusRef
166
219
  })));
167
- return /*#__PURE__*/React.createElement(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
220
+ const container = /*#__PURE__*/React.createElement("div", {
221
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
222
+ style: style,
223
+ // using tabIndex={-1} would cause a bug where Safari focuses
224
+ // first on the browser address bar when using keyboard
225
+ ref: node => {
226
+ if (node) {
227
+ if (typeof ref === 'function') {
228
+ ref(node);
229
+ } else {
230
+ ref.current = node;
231
+ }
232
+ setPopupRef(node);
233
+ }
234
+ },
235
+ "data-testid": `${testId}--container`,
236
+ className: ax([wrapperStyles.rootLayer, shouldFitContainer && wrapperStyles.fullWidth])
237
+ }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
238
+ enteringAnimation: placementMap[placement].enter,
239
+ exitingAnimation: placementMap[placement].exit
240
+ }, popupContainer));
241
+ return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
168
242
  className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
169
243
  }));
170
244
  });
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,11 @@ 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, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
116
+ zIndex: zIndex
117
+ }, renderPopperWrapper))));
115
118
  if (shouldFitContainer) {
116
119
  return /*#__PURE__*/React.createElement(Box, {
117
120
  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,9 @@ 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",
24
+ fullWidth: "_1bsb1osq"
22
25
  };
23
26
  var scrollableStyles = null;
24
27
  var blanketStyles = null;
@@ -27,6 +30,56 @@ var newModalStyles = null;
27
30
  var focusRingStyles = {
28
31
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
29
32
  };
33
+ var placementMap = {
34
+ 'top': {
35
+ 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)",
36
+ 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)"
37
+ },
38
+ 'top-start': {
39
+ 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)",
40
+ 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)"
41
+ },
42
+ 'top-end': {
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
+ 'bottom': {
47
+ 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)",
48
+ 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)"
49
+ },
50
+ 'bottom-start': {
51
+ 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)",
52
+ 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)"
53
+ },
54
+ 'bottom-end': {
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
+ 'left': {
59
+ 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)",
60
+ 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)"
61
+ },
62
+ 'left-start': {
63
+ 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)",
64
+ 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)"
65
+ },
66
+ 'left-end': {
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
+ 'right': {
71
+ 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)",
72
+ 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)"
73
+ },
74
+ 'right-start': {
75
+ 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)",
76
+ 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)"
77
+ },
78
+ 'right-end': {
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
+ };
30
83
  var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
31
84
  var shouldRenderToParent = props.shouldRenderToParent,
32
85
  shouldFitContainer = props.shouldFitContainer,
@@ -40,7 +93,7 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
40
93
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
41
94
  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
95
  }, htmlAttributes, {
43
- ref: ref
96
+ ref: !fg('platform-dst-motion-uplift') ? ref : undefined
44
97
  }), children);
45
98
  });
46
99
  function PopperWrapper(_ref) {
@@ -146,7 +199,7 @@ function PopperWrapper(_ref) {
146
199
  role: role,
147
200
  "aria-label": label,
148
201
  "aria-labelledby": titleId,
149
- ref: function ref(node) {
202
+ ref: !fg('platform-dst-motion-uplift') ? function (node) {
150
203
  if (node) {
151
204
  if (typeof _ref3 === 'function') {
152
205
  _ref3(node);
@@ -155,10 +208,10 @@ function PopperWrapper(_ref) {
155
208
  }
156
209
  setPopupRef(node);
157
210
  }
158
- }
211
+ } : undefined
159
212
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
160
213
  ,
161
- style: appearance === 'UNSAFE_modal-below-sm' ? {} : style
214
+ style: fg('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
162
215
  // using tabIndex={-1} would cause a bug where Safari focuses
163
216
  // first on the browser address bar when using keyboard
164
217
  ,
@@ -175,7 +228,28 @@ function PopperWrapper(_ref) {
175
228
  onClose: onClose,
176
229
  setInitialFocusRef: setInitialFocusRef
177
230
  })));
178
- return /*#__PURE__*/React.createElement(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
231
+ var container = /*#__PURE__*/React.createElement("div", {
232
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
233
+ style: style,
234
+ // using tabIndex={-1} would cause a bug where Safari focuses
235
+ // first on the browser address bar when using keyboard
236
+ ref: function ref(node) {
237
+ if (node) {
238
+ if (typeof _ref3 === 'function') {
239
+ _ref3(node);
240
+ } else {
241
+ _ref3.current = node;
242
+ }
243
+ setPopupRef(node);
244
+ }
245
+ },
246
+ "data-testid": "".concat(testId, "--container"),
247
+ className: ax([wrapperStyles.rootLayer, shouldFitContainer && wrapperStyles.fullWidth])
248
+ }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
249
+ enteringAnimation: placementMap[placement].enter,
250
+ exitingAnimation: placementMap[placement].exit
251
+ }, popupContainer));
252
+ return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
179
253
  className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
180
254
  }));
181
255
  });
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,11 @@ 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, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
129
+ zIndex: zIndex
130
+ }, renderPopperWrapper))));
128
131
  if (shouldFitContainer) {
129
132
  return /*#__PURE__*/React.createElement(Box, {
130
133
  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.16.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/"