@atlaskit/avatar-group 12.4.13 → 12.5.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/avatar-group
 
+## 12.5.1
+
+### Patch Changes
+
+- [`22bf79dbdcdca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22bf79dbdcdca) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+- Updated dependencies
+
+## 12.5.0
+
+### Minor Changes
+
+- [`2596f105ed08c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2596f105ed08c) -
+  [ux] Added entry/exit animations to Avatars in Avatar Group behind fg platform-dst-motion-uplift
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.4.13
 
 ### Patch Changes

package/dist/cjs/components/avatar-group.js

@@ -18,6 +18,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _menu = require("@atlaskit/menu");
+var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -245,7 +246,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
         }))));
       },
       trigger: function trigger(triggerProps) {
-        return renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
+        return (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/_react.default.createElement(_motion.Motion, {
+          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)",
+          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)"
+        }, renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
+          onClick: handleTriggerClicked
+        }))) : renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
           onClick: handleTriggerClicked
         }));
       },
@@ -272,12 +278,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
       } : undefined,
       stackIndex: max - idx
     }), idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-      key: (0, _utils.composeUniqueKey)(avatarData, idx),
-      content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
-      position: tooltipPosition
-    }, finalAvatar) : finalAvatar;
+    if ((0, _platformFeatureFlags.fg)('platform-dst-motion-uplift')) {
+      return /*#__PURE__*/_react.default.createElement(_motion.Motion, {
+        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)",
+        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)",
+        key: (0, _utils.composeUniqueKey)(avatarData, idx)
+      }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar);
+    } else {
+      return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        key: (0, _utils.composeUniqueKey)(avatarData, idx),
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar;
+    }
   }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/_react.default.createElement(_grid.default, {
     id: groupId,
     testId: testId && "".concat(testId, "--avatar-group"),
@@ -293,12 +311,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
       } : undefined,
       stackIndex: max - idx
     }), idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-      key: (0, _utils.composeUniqueKey)(avatarData, idx),
-      content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
-      position: tooltipPosition
-    }, finalAvatar) : finalAvatar;
+    if ((0, _platformFeatureFlags.fg)('platform-dst-motion-uplift')) {
+      return /*#__PURE__*/_react.default.createElement(_motion.Motion, {
+        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)",
+        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)",
+        key: (0, _utils.composeUniqueKey)(avatarData, idx)
+      }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar);
+    } else {
+      return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        key: (0, _utils.composeUniqueKey)(avatarData, idx),
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar;
+    }
   }), renderMoreDropdown(+maxAvatar, total, groupId));
 };
 var _default = exports.default = AvatarGroup;

package/dist/cjs/components/grid.js

@@ -10,6 +10,7 @@ require("./grid.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 var gutter = "var(--ds-space-negative-050, -4px)";
@@ -26,10 +27,16 @@ var Grid = function Grid(_ref) {
     "data-testid": testId,
     "aria-label": label,
     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"])
+  }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.ExitingPersistence, {
+    exitThenEnter: true
   }, _react.Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
       className: (0, _runtime.ax)(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
     }, child);
+  })) : _react.Children.map(children, function (child) {
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: (0, _runtime.ax)(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
+    }, child);
   }));
 };
 

package/dist/cjs/components/more-indicator.compiled.css

@@ -26,7 +26,7 @@
 ._1bsbzwfg{width:2pc}
 ._1e0c1txw{display:flex}
 ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
-._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
+._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
 ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
@@ -57,7 +57,7 @@
 ._128myh40:focus-visible{outline-width:2px}
 ._1ah3yh40:focus-visible{outline-offset:2px}
 ._1ejjglyw:focus-visible{box-shadow:none}
-._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
 ._30l3i7uo:hover{color:var(--ds-text,#292a2e)}

package/dist/cjs/components/more-indicator.js

@@ -17,10 +17,10 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 var boxShadowCssVar = '--avatar-box-shadow';
 var styles = {
-  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
+  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
   circle: "_2rko1qll",
   active: "_bfhk15s3 _16qsdfwd _syaz6x5g _t9ec1np6 _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
-  disabled: "_80om13gf _1peqs237 _1hfkvuon",
+  disabled: "_80om13gf _1peq2wxo _1hfkvuon",
   hexagon: "_mkrz1k6g"
 };
 var widthHeightMap = {

package/dist/cjs/components/stack.js

@@ -10,6 +10,7 @@ require("./stack.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 var listStyles = null;
@@ -27,10 +28,16 @@ var Stack = function Stack(_ref) {
     "data-testid": testId,
     "aria-label": label,
     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"])
+  }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.ExitingPersistence, {
+    exitThenEnter: true
   }, _react.Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
       className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
     }, child);
+  })) : _react.Children.map(children, function (child) {
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
+    }, child);
   }));
 };
 

package/dist/es2019/components/avatar-group.js

@@ -7,6 +7,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
+import { Motion } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import Tooltip from '@atlaskit/tooltip';
@@ -207,7 +208,14 @@ const AvatarGroup = ({
       // This index holds the true index,
       // adding up the index of non-overflowed avatars and overflowed avatars.
       index + max))))),
-      trigger: triggerProps => renderMoreButton({
+      trigger: triggerProps => fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
+        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)",
+        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)"
+      }, renderMoreButton({
+        ...triggerProps,
+        ...bindFocus,
+        onClick: handleTriggerClicked
+      })) : renderMoreButton({
         ...triggerProps,
         ...bindFocus,
         onClick: handleTriggerClicked
@@ -236,12 +244,24 @@ const AvatarGroup = ({
       } : undefined,
       stackIndex: max - idx
     }, idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
-      key: composeUniqueKey(avatarData, idx),
-      content: avatarData.name,
-      testId: testId && `${testId}--tooltip-${idx}`,
-      position: tooltipPosition
-    }, finalAvatar) : finalAvatar;
+    if (fg('platform-dst-motion-uplift')) {
+      return /*#__PURE__*/React.createElement(Motion, {
+        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)",
+        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)",
+        key: composeUniqueKey(avatarData, idx)
+      }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: avatarData.name,
+        testId: testId && `${testId}--tooltip-${idx}`,
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar);
+    } else {
+      return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        key: composeUniqueKey(avatarData, idx),
+        content: avatarData.name,
+        testId: testId && `${testId}--tooltip-${idx}`,
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar;
+    }
   }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/React.createElement(Grid, {
     id: groupId,
     testId: testId && `${testId}--avatar-group`,
@@ -258,12 +278,24 @@ const AvatarGroup = ({
       } : undefined,
       stackIndex: max - idx
     }, idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
-      key: composeUniqueKey(avatarData, idx),
-      content: avatarData.name,
-      testId: testId && `${testId}--tooltip-${idx}`,
-      position: tooltipPosition
-    }, finalAvatar) : finalAvatar;
+    if (fg('platform-dst-motion-uplift')) {
+      return /*#__PURE__*/React.createElement(Motion, {
+        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)",
+        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)",
+        key: composeUniqueKey(avatarData, idx)
+      }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: avatarData.name,
+        testId: testId && `${testId}--tooltip-${idx}`,
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar);
+    } else {
+      return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        key: composeUniqueKey(avatarData, idx),
+        content: avatarData.name,
+        testId: testId && `${testId}--tooltip-${idx}`,
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar;
+    }
   }), renderMoreDropdown(+maxAvatar, total, groupId));
 };
 export default AvatarGroup;

package/dist/es2019/components/grid.js

@@ -3,6 +3,7 @@ import "./grid.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { ExitingPersistence } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 const gutter = "var(--ds-space-negative-050, -4px)";
 const listStyles = null;
@@ -18,8 +19,12 @@ const Grid = ({
   "data-testid": testId,
   "aria-label": label,
   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"])
+}, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+  exitThenEnter: true
 }, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
   className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
+}, child))) : Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
+  className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
 }, child)));
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/more-indicator.compiled.css

@@ -26,7 +26,7 @@
 ._1bsbzwfg{width:2pc}
 ._1e0c1txw{display:flex}
 ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
-._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
+._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
 ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
@@ -57,7 +57,7 @@
 ._128myh40:focus-visible{outline-width:2px}
 ._1ah3yh40:focus-visible{outline-offset:2px}
 ._1ejjglyw:focus-visible{box-shadow:none}
-._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
 ._30l3i7uo:hover{color:var(--ds-text,#292a2e)}

package/dist/es2019/components/more-indicator.js

@@ -7,10 +7,10 @@ import { forwardRef, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 const boxShadowCssVar = '--avatar-box-shadow';
 const styles = {
-  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
+  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
   circle: "_2rko1qll",
   active: "_bfhk15s3 _16qsdfwd _syaz6x5g _t9ec1np6 _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
-  disabled: "_80om13gf _1peqs237 _1hfkvuon",
+  disabled: "_80om13gf _1peq2wxo _1hfkvuon",
   hexagon: "_mkrz1k6g"
 };
 const widthHeightMap = {

package/dist/es2019/components/stack.js

@@ -3,6 +3,7 @@ import "./stack.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { ExitingPersistence } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 const listStyles = null;
 const listSmallStyles = null;
@@ -19,8 +20,12 @@ const Stack = ({
   "data-testid": testId,
   "aria-label": label,
   className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])
+}, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+  exitThenEnter: true
 }, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
   className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
+}, child))) : Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
+  className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
 }, child)));
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/avatar-group.js

@@ -13,6 +13,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
+import { Motion } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import Tooltip from '@atlaskit/tooltip';
@@ -236,7 +237,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
         }))));
       },
       trigger: function trigger(triggerProps) {
-        return renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
+        return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
+          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)",
+          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)"
+        }, renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
+          onClick: handleTriggerClicked
+        }))) : renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
           onClick: handleTriggerClicked
         }));
       },
@@ -263,12 +269,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
       } : undefined,
       stackIndex: max - idx
     }), idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
-      key: composeUniqueKey(avatarData, idx),
-      content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
-      position: tooltipPosition
-    }, finalAvatar) : finalAvatar;
+    if (fg('platform-dst-motion-uplift')) {
+      return /*#__PURE__*/React.createElement(Motion, {
+        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)",
+        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)",
+        key: composeUniqueKey(avatarData, idx)
+      }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar);
+    } else {
+      return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        key: composeUniqueKey(avatarData, idx),
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar;
+    }
   }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/React.createElement(Grid, {
     id: groupId,
     testId: testId && "".concat(testId, "--avatar-group"),
@@ -284,12 +302,24 @@ var AvatarGroup = function AvatarGroup(_ref) {
       } : undefined,
       stackIndex: max - idx
     }), idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
-      key: composeUniqueKey(avatarData, idx),
-      content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
-      position: tooltipPosition
-    }, finalAvatar) : finalAvatar;
+    if (fg('platform-dst-motion-uplift')) {
+      return /*#__PURE__*/React.createElement(Motion, {
+        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)",
+        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)",
+        key: composeUniqueKey(avatarData, idx)
+      }, !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar);
+    } else {
+      return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+        key: composeUniqueKey(avatarData, idx),
+        content: avatarData.name,
+        testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+        position: tooltipPosition
+      }, finalAvatar) : finalAvatar;
+    }
   }), renderMoreDropdown(+maxAvatar, total, groupId));
 };
 export default AvatarGroup;

package/dist/esm/components/grid.js

@@ -3,6 +3,7 @@ import "./grid.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { ExitingPersistence } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 var gutter = "var(--ds-space-negative-050, -4px)";
 var listStyles = null;
@@ -18,10 +19,16 @@ var Grid = function Grid(_ref) {
     "data-testid": testId,
     "aria-label": label,
     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"])
+  }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+    exitThenEnter: true
   }, Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
       className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
     }, child);
+  })) : Children.map(children, function (child) {
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
+    }, child);
   }));
 };
 

package/dist/esm/components/more-indicator.compiled.css

@@ -26,7 +26,7 @@
 ._1bsbzwfg{width:2pc}
 ._1e0c1txw{display:flex}
 ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
-._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
+._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
 ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
@@ -57,7 +57,7 @@
 ._128myh40:focus-visible{outline-width:2px}
 ._1ah3yh40:focus-visible{outline-offset:2px}
 ._1ejjglyw:focus-visible{box-shadow:none}
-._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
 ._30l3i7uo:hover{color:var(--ds-text,#292a2e)}

package/dist/esm/components/more-indicator.js

@@ -8,10 +8,10 @@ import { forwardRef, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 var boxShadowCssVar = '--avatar-box-shadow';
 var styles = {
-  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
+  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
   circle: "_2rko1qll",
   active: "_bfhk15s3 _16qsdfwd _syaz6x5g _t9ec1np6 _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
-  disabled: "_80om13gf _1peqs237 _1hfkvuon",
+  disabled: "_80om13gf _1peq2wxo _1hfkvuon",
   hexagon: "_mkrz1k6g"
 };
 var widthHeightMap = {

package/dist/esm/components/stack.js

@@ -3,6 +3,7 @@ import "./stack.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { ExitingPersistence } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 var listStyles = null;
 var listSmallStyles = null;
@@ -19,10 +20,16 @@ var Stack = function Stack(_ref) {
     "data-testid": testId,
     "aria-label": label,
     className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])
+  }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+    exitThenEnter: true
   }, Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
       className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
     }, child);
+  })) : Children.map(children, function (child) {
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
+    }, child);
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "12.4.13",
+	"version": "12.5.1",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,14 +24,15 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/avatar": "^25.10.0",
+		"@atlaskit/avatar": "^25.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/menu": "^8.4.0",
+		"@atlaskit/motion": "^5.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.13.0",
-		"@atlaskit/tokens": "^11.1.0",
-		"@atlaskit/tooltip": "^21.0.0",
+		"@atlaskit/popup": "^4.16.0",
+		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0"
@@ -43,14 +44,14 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/docs": "^11.7.0",
-		"@atlaskit/form": "^15.4.0",
-		"@atlaskit/icon": "^33.0.0",
+		"@atlaskit/form": "^15.5.0",
+		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/modal-dialog": "^14.11.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/modal-dialog": "^14.14.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -100,6 +101,9 @@
 		},
 		"jira-ai-agent-stack": {
 			"type": "boolean"
+		},
+		"platform-dst-motion-uplift": {
+			"type": "boolean"
 		}
 	}
 }