@atlaskit/avatar-group 12.4.13 → 12.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/avatar-group.js +43 -13
  3. package/dist/cjs/components/grid.js +7 -0
  4. package/dist/cjs/components/stack.js +7 -0
  5. package/dist/es2019/components/avatar-group.js +45 -13
  6. package/dist/es2019/components/grid.js +5 -0
  7. package/dist/es2019/components/stack.js +5 -0
  8. package/dist/esm/components/avatar-group.js +43 -13
  9. package/dist/esm/components/grid.js +7 -0
  10. package/dist/esm/components/stack.js +7 -0
  11. package/package.json +13 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 12.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2596f105ed08c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2596f105ed08c) -
8
+ [ux] Added entry/exit animations to Avatars in Avatar Group behind fg platform-dst-motion-uplift
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 12.4.13
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/components/avatar-group.js CHANGED
@@ -18,6 +18,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
18
18
  var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
19
19
  var _useId = require("@atlaskit/ds-lib/use-id");
20
20
  var _menu = require("@atlaskit/menu");
21
+ var _motion = require("@atlaskit/motion");
21
22
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
23
  var _popup = _interopRequireDefault(require("@atlaskit/popup"));
23
24
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -245,7 +246,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
245
246
  }))));
246
247
  },
247
248
  trigger: function trigger(triggerProps) {
248
- return renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
249
+ return (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/_react.default.createElement(_motion.Motion, {
250
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
251
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)"
252
+ }, renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
253
+ onClick: handleTriggerClicked
254
+ }))) : renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
249
255
  onClick: handleTriggerClicked
250
256
  }));
251
257
  },
@@ -272,12 +278,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
272
278
  } : undefined,
273
279
  stackIndex: max - idx
274
280
  }), idx);
275
- return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
276
- key: (0, _utils.composeUniqueKey)(avatarData, idx),
277
- content: avatarData.name,
278
- testId: testId && "".concat(testId, "--tooltip-").concat(idx),
279
- position: tooltipPosition
280
- }, finalAvatar) : finalAvatar;
281
+ if ((0, _platformFeatureFlags.fg)('platform-dst-motion-uplift')) {
282
+ return /*#__PURE__*/_react.default.createElement(_motion.Motion, {
283
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
284
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)",
285
+ key: (0, _utils.composeUniqueKey)(avatarData, idx)
286
+ }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
287
+ content: avatarData.name,
288
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
289
+ position: tooltipPosition
290
+ }, finalAvatar) : finalAvatar);
291
+ } else {
292
+ return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
293
+ key: (0, _utils.composeUniqueKey)(avatarData, idx),
294
+ content: avatarData.name,
295
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
296
+ position: tooltipPosition
297
+ }, finalAvatar) : finalAvatar;
298
+ }
281
299
  }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/_react.default.createElement(_grid.default, {
282
300
  id: groupId,
283
301
  testId: testId && "".concat(testId, "--avatar-group"),
@@ -293,12 +311,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
293
311
  } : undefined,
294
312
  stackIndex: max - idx
295
313
  }), idx);
296
- return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
297
- key: (0, _utils.composeUniqueKey)(avatarData, idx),
298
- content: avatarData.name,
299
- testId: testId && "".concat(testId, "--tooltip-").concat(idx),
300
- position: tooltipPosition
301
- }, finalAvatar) : finalAvatar;
314
+ if ((0, _platformFeatureFlags.fg)('platform-dst-motion-uplift')) {
315
+ return /*#__PURE__*/_react.default.createElement(_motion.Motion, {
316
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
317
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)",
318
+ key: (0, _utils.composeUniqueKey)(avatarData, idx)
319
+ }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
320
+ content: avatarData.name,
321
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
322
+ position: tooltipPosition
323
+ }, finalAvatar) : finalAvatar);
324
+ } else {
325
+ return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
326
+ key: (0, _utils.composeUniqueKey)(avatarData, idx),
327
+ content: avatarData.name,
328
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
329
+ position: tooltipPosition
330
+ }, finalAvatar) : finalAvatar;
331
+ }
302
332
  }), renderMoreDropdown(+maxAvatar, total, groupId));
303
333
  };
304
334
  var _default = exports.default = AvatarGroup;
package/dist/cjs/components/grid.js CHANGED
@@ -10,6 +10,7 @@ require("./grid.compiled.css");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var React = _react;
12
12
  var _runtime = require("@compiled/react/runtime");
13
+ var _motion = require("@atlaskit/motion");
13
14
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
16
  var gutter = "var(--ds-space-negative-050, -4px)";
@@ -26,10 +27,16 @@ var Grid = function Grid(_ref) {
26
27
  "data-testid": testId,
27
28
  "aria-label": label,
28
29
  className: (0, _runtime.ax)(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])
30
+ }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.ExitingPersistence, {
31
+ exitThenEnter: true
29
32
  }, _react.Children.map(children, function (child) {
30
33
  return child && /*#__PURE__*/React.createElement("li", {
31
34
  className: (0, _runtime.ax)(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
32
35
  }, child);
36
+ })) : _react.Children.map(children, function (child) {
37
+ return child && /*#__PURE__*/React.createElement("li", {
38
+ className: (0, _runtime.ax)(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
39
+ }, child);
33
40
  }));
34
41
  };
35
42
 
package/dist/cjs/components/stack.js CHANGED
@@ -10,6 +10,7 @@ require("./stack.compiled.css");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var React = _react;
12
12
  var _runtime = require("@compiled/react/runtime");
13
+ var _motion = require("@atlaskit/motion");
13
14
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
16
  var listStyles = null;
@@ -27,10 +28,16 @@ var Stack = function Stack(_ref) {
27
28
  "data-testid": testId,
28
29
  "aria-label": label,
29
30
  className: (0, _runtime.ax)(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l21b66"])
31
+ }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.ExitingPersistence, {
32
+ exitThenEnter: true
30
33
  }, _react.Children.map(children, function (child) {
31
34
  return child && /*#__PURE__*/React.createElement("li", {
32
35
  className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
33
36
  }, child);
37
+ })) : _react.Children.map(children, function (child) {
38
+ return child && /*#__PURE__*/React.createElement("li", {
39
+ className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
40
+ }, child);
34
41
  }));
35
42
  };
36
43
 
package/dist/es2019/components/avatar-group.js CHANGED
@@ -7,6 +7,7 @@ import noop from '@atlaskit/ds-lib/noop';
7
7
  import useFocus from '@atlaskit/ds-lib/use-focus-event';
8
8
  import { useId } from '@atlaskit/ds-lib/use-id';
9
9
  import { Section } from '@atlaskit/menu';
10
+ import { Motion } from '@atlaskit/motion';
10
11
  import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import Popup from '@atlaskit/popup';
12
13
  import Tooltip from '@atlaskit/tooltip';
@@ -207,7 +208,14 @@ const AvatarGroup = ({
207
208
  // This index holds the true index,
208
209
  // adding up the index of non-overflowed avatars and overflowed avatars.
209
210
  index + max))))),
210
- trigger: triggerProps => renderMoreButton({
211
+ trigger: triggerProps => fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
212
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
213
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)"
214
+ }, renderMoreButton({
215
+ ...triggerProps,
216
+ ...bindFocus,
217
+ onClick: handleTriggerClicked
218
+ })) : renderMoreButton({
211
219
  ...triggerProps,
212
220
  ...bindFocus,
213
221
  onClick: handleTriggerClicked
@@ -236,12 +244,24 @@ const AvatarGroup = ({
236
244
  } : undefined,
237
245
  stackIndex: max - idx
238
246
  }, idx);
239
- return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
240
- key: composeUniqueKey(avatarData, idx),
241
- content: avatarData.name,
242
- testId: testId && `${testId}--tooltip-${idx}`,
243
- position: tooltipPosition
244
- }, finalAvatar) : finalAvatar;
247
+ if (fg('platform-dst-motion-uplift')) {
248
+ return /*#__PURE__*/React.createElement(Motion, {
249
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
250
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)",
251
+ key: composeUniqueKey(avatarData, idx)
252
+ }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
253
+ content: avatarData.name,
254
+ testId: testId && `${testId}--tooltip-${idx}`,
255
+ position: tooltipPosition
256
+ }, finalAvatar) : finalAvatar);
257
+ } else {
258
+ return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
259
+ key: composeUniqueKey(avatarData, idx),
260
+ content: avatarData.name,
261
+ testId: testId && `${testId}--tooltip-${idx}`,
262
+ position: tooltipPosition
263
+ }, finalAvatar) : finalAvatar;
264
+ }
245
265
  }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/React.createElement(Grid, {
246
266
  id: groupId,
247
267
  testId: testId && `${testId}--avatar-group`,
@@ -258,12 +278,24 @@ const AvatarGroup = ({
258
278
  } : undefined,
259
279
  stackIndex: max - idx
260
280
  }, idx);
261
- return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
262
- key: composeUniqueKey(avatarData, idx),
263
- content: avatarData.name,
264
- testId: testId && `${testId}--tooltip-${idx}`,
265
- position: tooltipPosition
266
- }, finalAvatar) : finalAvatar;
281
+ if (fg('platform-dst-motion-uplift')) {
282
+ return /*#__PURE__*/React.createElement(Motion, {
283
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
284
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)",
285
+ key: composeUniqueKey(avatarData, idx)
286
+ }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
287
+ content: avatarData.name,
288
+ testId: testId && `${testId}--tooltip-${idx}`,
289
+ position: tooltipPosition
290
+ }, finalAvatar) : finalAvatar);
291
+ } else {
292
+ return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
293
+ key: composeUniqueKey(avatarData, idx),
294
+ content: avatarData.name,
295
+ testId: testId && `${testId}--tooltip-${idx}`,
296
+ position: tooltipPosition
297
+ }, finalAvatar) : finalAvatar;
298
+ }
267
299
  }), renderMoreDropdown(+maxAvatar, total, groupId));
268
300
  };
269
301
  export default AvatarGroup;
package/dist/es2019/components/grid.js CHANGED
@@ -3,6 +3,7 @@ import "./grid.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children } from 'react';
6
+ import { ExitingPersistence } from '@atlaskit/motion';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
7
8
  const gutter = "var(--ds-space-negative-050, -4px)";
8
9
  const listStyles = null;
@@ -18,8 +19,12 @@ const Grid = ({
18
19
  "data-testid": testId,
19
20
  "aria-label": label,
20
21
  className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", fg('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])
22
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
23
+ exitThenEnter: true
21
24
  }, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
22
25
  className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
26
+ }, child))) : Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
27
+ className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
23
28
  }, child)));
24
29
 
25
30
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
package/dist/es2019/components/stack.js CHANGED
@@ -3,6 +3,7 @@ import "./stack.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children } from 'react';
6
+ import { ExitingPersistence } from '@atlaskit/motion';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
7
8
  const listStyles = null;
8
9
  const listSmallStyles = null;
@@ -19,8 +20,12 @@ const Stack = ({
19
20
  "data-testid": testId,
20
21
  "aria-label": label,
21
22
  className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])
23
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
24
+ exitThenEnter: true
22
25
  }, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
23
26
  className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
27
+ }, child))) : Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
28
+ className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
24
29
  }, child)));
25
30
 
26
31
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
package/dist/esm/components/avatar-group.js CHANGED
@@ -13,6 +13,7 @@ import noop from '@atlaskit/ds-lib/noop';
13
13
  import useFocus from '@atlaskit/ds-lib/use-focus-event';
14
14
  import { useId } from '@atlaskit/ds-lib/use-id';
15
15
  import { Section } from '@atlaskit/menu';
16
+ import { Motion } from '@atlaskit/motion';
16
17
  import { fg } from '@atlaskit/platform-feature-flags';
17
18
  import Popup from '@atlaskit/popup';
18
19
  import Tooltip from '@atlaskit/tooltip';
@@ -236,7 +237,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
236
237
  }))));
237
238
  },
238
239
  trigger: function trigger(triggerProps) {
239
- return renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
240
+ return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
241
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
242
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)"
243
+ }, renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
244
+ onClick: handleTriggerClicked
245
+ }))) : renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
240
246
  onClick: handleTriggerClicked
241
247
  }));
242
248
  },
@@ -263,12 +269,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
263
269
  } : undefined,
264
270
  stackIndex: max - idx
265
271
  }), idx);
266
- return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
267
- key: composeUniqueKey(avatarData, idx),
268
- content: avatarData.name,
269
- testId: testId && "".concat(testId, "--tooltip-").concat(idx),
270
- position: tooltipPosition
271
- }, finalAvatar) : finalAvatar;
272
+ if (fg('platform-dst-motion-uplift')) {
273
+ return /*#__PURE__*/React.createElement(Motion, {
274
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
275
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)",
276
+ key: composeUniqueKey(avatarData, idx)
277
+ }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
278
+ content: avatarData.name,
279
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
280
+ position: tooltipPosition
281
+ }, finalAvatar) : finalAvatar);
282
+ } else {
283
+ return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
284
+ key: composeUniqueKey(avatarData, idx),
285
+ content: avatarData.name,
286
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
287
+ position: tooltipPosition
288
+ }, finalAvatar) : finalAvatar;
289
+ }
272
290
  }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/React.createElement(Grid, {
273
291
  id: groupId,
274
292
  testId: testId && "".concat(testId, "--avatar-group"),
@@ -284,12 +302,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
284
302
  } : undefined,
285
303
  stackIndex: max - idx
286
304
  }), idx);
287
- return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
288
- key: composeUniqueKey(avatarData, idx),
289
- content: avatarData.name,
290
- testId: testId && "".concat(testId, "--tooltip-").concat(idx),
291
- position: tooltipPosition
292
- }, finalAvatar) : finalAvatar;
305
+ if (fg('platform-dst-motion-uplift')) {
306
+ return /*#__PURE__*/React.createElement(Motion, {
307
+ enteringAnimation: "var(--ds-avatar-enter, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn)",
308
+ exitingAnimation: "var(--ds-avatar-exit, 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut)",
309
+ key: composeUniqueKey(avatarData, idx)
310
+ }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
311
+ content: avatarData.name,
312
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
313
+ position: tooltipPosition
314
+ }, finalAvatar) : finalAvatar);
315
+ } else {
316
+ return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
317
+ key: composeUniqueKey(avatarData, idx),
318
+ content: avatarData.name,
319
+ testId: testId && "".concat(testId, "--tooltip-").concat(idx),
320
+ position: tooltipPosition
321
+ }, finalAvatar) : finalAvatar;
322
+ }
293
323
  }), renderMoreDropdown(+maxAvatar, total, groupId));
294
324
  };
295
325
  export default AvatarGroup;
package/dist/esm/components/grid.js CHANGED
@@ -3,6 +3,7 @@ import "./grid.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children } from 'react';
6
+ import { ExitingPersistence } from '@atlaskit/motion';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
7
8
  var gutter = "var(--ds-space-negative-050, -4px)";
8
9
  var listStyles = null;
@@ -18,10 +19,16 @@ var Grid = function Grid(_ref) {
18
19
  "data-testid": testId,
19
20
  "aria-label": label,
20
21
  className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", fg('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])
22
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
23
+ exitThenEnter: true
21
24
  }, Children.map(children, function (child) {
22
25
  return child && /*#__PURE__*/React.createElement("li", {
23
26
  className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
24
27
  }, child);
28
+ })) : Children.map(children, function (child) {
29
+ return child && /*#__PURE__*/React.createElement("li", {
30
+ className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
31
+ }, child);
25
32
  }));
26
33
  };
27
34
 
package/dist/esm/components/stack.js CHANGED
@@ -3,6 +3,7 @@ import "./stack.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children } from 'react';
6
+ import { ExitingPersistence } from '@atlaskit/motion';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
7
8
  var listStyles = null;
8
9
  var listSmallStyles = null;
@@ -19,10 +20,16 @@ var Stack = function Stack(_ref) {
19
20
  "data-testid": testId,
20
21
  "aria-label": label,
21
22
  className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])
23
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
24
+ exitThenEnter: true
22
25
  }, Children.map(children, function (child) {
23
26
  return child && /*#__PURE__*/React.createElement("li", {
24
27
  className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
25
28
  }, child);
29
+ })) : Children.map(children, function (child) {
30
+ return child && /*#__PURE__*/React.createElement("li", {
31
+ className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
32
+ }, child);
26
33
  }));
27
34
  };
28
35
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "12.4.13",
3
+ "version": "12.5.0",
4
4
  "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,13 +24,14 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/avatar": "^25.10.0",
27
+ "@atlaskit/avatar": "^25.11.0",
28
28
  "@atlaskit/css": "^0.19.0",
29
29
  "@atlaskit/ds-lib": "^6.0.0",
30
30
  "@atlaskit/menu": "^8.4.0",
31
+ "@atlaskit/motion": "^5.5.0",
31
32
  "@atlaskit/platform-feature-flags": "^1.1.0",
32
- "@atlaskit/popup": "^4.13.0",
33
- "@atlaskit/tokens": "^11.1.0",
33
+ "@atlaskit/popup": "^4.14.0",
34
+ "@atlaskit/tokens": "^11.4.0",
34
35
  "@atlaskit/tooltip": "^21.0.0",
35
36
  "@babel/runtime": "^7.0.0",
36
37
  "@compiled/react": "^0.20.0",
@@ -43,14 +44,14 @@
43
44
  "@af/accessibility-testing": "workspace:^",
44
45
  "@af/integration-testing": "workspace:^",
45
46
  "@af/visual-regression": "workspace:^",
46
- "@atlaskit/analytics-next": "^11.1.0",
47
+ "@atlaskit/analytics-next": "^11.2.0",
47
48
  "@atlaskit/button": "^23.10.0",
48
49
  "@atlaskit/docs": "^11.7.0",
49
- "@atlaskit/form": "^15.4.0",
50
- "@atlaskit/icon": "^33.0.0",
50
+ "@atlaskit/form": "^15.5.0",
51
+ "@atlaskit/icon": "^33.1.0",
51
52
  "@atlaskit/link": "^3.3.0",
52
- "@atlaskit/modal-dialog": "^14.11.0",
53
- "@atlaskit/primitives": "^18.0.0",
53
+ "@atlaskit/modal-dialog": "^14.13.0",
54
+ "@atlaskit/primitives": "^18.1.0",
54
55
  "@atlaskit/section-message": "^8.12.0",
55
56
  "@atlaskit/toggle": "^15.2.0",
56
57
  "@atlassian/ssr-tests": "workspace:^",
@@ -100,6 +101,9 @@
100
101
  },
101
102
  "jira-ai-agent-stack": {
102
103
  "type": "boolean"
104
+ },
105
+ "platform-dst-motion-uplift": {
106
+ "type": "boolean"
103
107
  }
104
108
  }
105
109
  }