@atlaskit/avatar-group 12.9.0 → 12.10.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/avatar-group
 
+## 12.10.0
+
+### Minor Changes
+
+- [`a8dd7ae55feff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a8dd7ae55feff) -
+  Passes the custom `avatar` component prop from AvatarGroup down to AvatarGroupItem in the overflow
+  dropdown menu, ensuring custom avatar components are used consistently for both visible and
+  overflowed avatars. This change is behind the `platform-avatar-group-pass-avatar-to-item` feature
+  flag.
+
 ## 12.9.0
 
 ### Minor Changes

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

@@ -6,21 +6,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
 var _excluded = ["analyticsContext", "appearance", "as", "borderColor", "children", "href", "isDisabled", "key", "label", "name", "onClick", "presence", "size", "src", "stackIndex", "status", "tabIndex", "target", "testId"],
   _excluded2 = ["children", "className", "disabled", "draggable", "onClick", "onDragStart", "onMouseDown", "ref", "tabIndex", "data-testid"];
 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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var avatar = props.avatar,
+    avatarComponent = props.avatarComponent,
     index = props.index,
     onAvatarClick = props.onAvatarClick,
     testId = props.testId,
+    avatarOverrides = props.avatarOverrides,
     role = props.role;
   var analyticsContext = avatar.analyticsContext,
     appearance = avatar.appearance,
@@ -74,7 +80,24 @@ var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, props), children);
   };
-  var AvatarIcon = /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({}, rest, {
+  var AvatarComponent = (0, _platformFeatureFlags.fg)('platform-avatar-group-pass-avatar-to-item') ? avatarComponent !== null && avatarComponent !== void 0 ? avatarComponent : _avatar.default : _avatar.default;
+  var AvatarIcon = avatarOverrides && (0, _platformFeatureFlags.fg)('platform-avatar-group-pass-avatar-to-item') ? avatarOverrides.render(AvatarComponent, _objectSpread(_objectSpread({}, rest), {}, {
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    as: as,
+    borderColor: 'transparent',
+    children: children,
+    isDisabled: isDisabled,
+    label: label,
+    name: '',
+    presence: presence,
+    size: 'small',
+    src: src,
+    stackIndex: stackIndex,
+    status: status,
+    tabIndex: tabIndex,
+    testId: testId && "".concat(testId, "--avatar")
+  }), 0) : /*#__PURE__*/_react.default.createElement(AvatarComponent, (0, _extends2.default)({}, rest, {
     analyticsContext: analyticsContext,
     appearance: appearance,
     as: as,

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

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
@@ -24,6 +23,7 @@ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _avatarGroupItem = _interopRequireDefault(require("./avatar-group-item"));
 var _avatarGroupTopLayer = require("./avatar-group-top-layer");
+var _getOverrides2 = require("./get-overrides");
 var _grid = _interopRequireDefault(require("./grid"));
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
 var _popupAvatarGroup = _interopRequireDefault(require("./internal/components/popup-avatar-group"));
@@ -38,34 +38,6 @@ var MAX_COUNT = {
   grid: 11,
   stack: 5
 };
-function getOverrides(overrides) {
-  return {
-    AvatarGroupItem: _objectSpread({
-      render: function render(Component, props, index) {
-        return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-          key: (0, _utils.composeUniqueKey)(props.avatar, index)
-        }));
-      }
-    }, overrides && overrides.AvatarGroupItem),
-    Avatar: _objectSpread({
-      render: function render(Component, props, index) {
-        return (
-          /*#__PURE__*/
-          //@ts-ignore - TS2604/TS2786: Component type union causing issues for help-center local consumption with TS 5.9.2
-          _react.default.createElement(Component, (0, _extends2.default)({}, props, {
-            key: (0, _utils.composeUniqueKey)(props, index)
-          }))
-        );
-      }
-    }, overrides && overrides.Avatar),
-    MoreIndicator: _objectSpread({
-      render: function render(Component, props) {
-        return /*#__PURE__*/_react.default.createElement(Component, props);
-      }
-    }, overrides && overrides.MoreIndicator)
-  };
-}
-
 /**
  * __Avatar group__
  *
@@ -128,6 +100,10 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var _useFocus = (0, _useFocusEvent.default)(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;
+  var _getOverrides = (0, _getOverrides2.getOverrides)(overrides),
+    avatarGroupItemOverrides = _getOverrides.AvatarGroupItem,
+    avatarOverrides = _getOverrides.Avatar,
+    moreIndicatorOverrides = _getOverrides.MoreIndicator;
 
   // When a trigger is focused, we want to open the popup
   // the user presses the DownArrow.
@@ -189,7 +165,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
         ariaHasPopup = _ref3['aria-haspopup'],
         onClick = _ref3.onClick,
         props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-      return getOverrides(overrides).MoreIndicator.render(_moreIndicator.default, _objectSpread(_objectSpread({
+      return moreIndicatorOverrides.render(_moreIndicator.default, _objectSpread(_objectSpread({
         buttonProps: showMoreButtonProps,
         borderColor: borderColor,
         count: total - max,
@@ -239,6 +215,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       }
       return boundariesElement === 'window' ? 'document' : 'viewport';
     }();
+    var avatarComponent = avatar && (0, _platformFeatureFlags.fg)('platform-avatar-group-pass-avatar-to-item') ? avatar : undefined;
     return /*#__PURE__*/_react.default.createElement(_popup.default, {
       isOpen: isOpen,
       onClose: onClose,
@@ -260,10 +237,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
         }, /*#__PURE__*/_react.default.createElement(_menu.Section, {
           titleId: labelId,
           testId: "".concat(testId, "--section")
-        }, data.slice(max).map(function (avatar, index) {
-          return getOverrides(overrides).AvatarGroupItem.render(_avatarGroupItem.default, {
-            avatar: avatar,
+        }, data.slice(max).map(function (avatarData, index) {
+          return avatarGroupItemOverrides.render(_avatarGroupItem.default, {
+            avatar: avatarData,
+            avatarComponent: avatarComponent,
             onAvatarClick: onAvatarClick,
+            avatarOverrides: avatarOverrides,
             testId: testId && "".concat(testId, "--avatar-group-item-").concat(index + max),
             index: index + max
           },
@@ -296,7 +275,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     size: size
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
     var callback = avatarData.onClick || onAvatarClick;
-    var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
+    var finalAvatar = avatarOverrides.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
       size: size,
       borderColor: borderColor || avatarData.borderColor,
       testId: testId && "".concat(testId, "--avatar-").concat(idx),
@@ -329,7 +308,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     "aria-label": label
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
     var callback = avatarData.onClick || onAvatarClick;
-    var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
+    var finalAvatar = avatarOverrides.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
       size: size,
       borderColor: borderColor || avatarData.borderColor,
       testId: testId && "".concat(testId, "--avatar-").concat(idx),

package/dist/cjs/components/get-overrides.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOverrides = getOverrides;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("./utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function getOverrides(overrides) {
+  return {
+    AvatarGroupItem: _objectSpread({
+      render: function render(Component, props, index) {
+        return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+          key: (0, _utils.composeUniqueKey)(props.avatar, index)
+        }));
+      }
+    }, overrides && overrides.AvatarGroupItem),
+    Avatar: _objectSpread({
+      render: function render(Component, props, index) {
+        return (
+          /*#__PURE__*/
+          //@ts-ignore - TS2604/TS2786: Component type union causing issues for help-center local consumption with TS 5.9.2
+          _react.default.createElement(Component, (0, _extends2.default)({}, props, {
+            key: (0, _utils.composeUniqueKey)(props, index)
+          }))
+        );
+      }
+    }, overrides && overrides.Avatar),
+    MoreIndicator: _objectSpread({
+      render: function render(Component, props) {
+        return /*#__PURE__*/_react.default.createElement(Component, props);
+      }
+    }, overrides && overrides.MoreIndicator)
+  };
+}

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

@@ -3,13 +3,16 @@ import React, { forwardRef } from 'react';
 import Avatar from '@atlaskit/avatar';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     avatar,
+    avatarComponent,
     index,
     onAvatarClick,
     testId,
+    avatarOverrides,
     role
   } = props;
   const {
@@ -67,7 +70,25 @@ const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, props), children);
   };
-  const AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
+  const AvatarComponent = fg('platform-avatar-group-pass-avatar-to-item') ? avatarComponent !== null && avatarComponent !== void 0 ? avatarComponent : Avatar : Avatar;
+  const AvatarIcon = avatarOverrides && fg('platform-avatar-group-pass-avatar-to-item') ? avatarOverrides.render(AvatarComponent, {
+    ...rest,
+    analyticsContext,
+    appearance,
+    as,
+    borderColor: 'transparent',
+    children,
+    isDisabled,
+    label,
+    name: '',
+    presence,
+    size: 'small',
+    src,
+    stackIndex,
+    status,
+    tabIndex,
+    testId: testId && `${testId}--avatar`
+  }, 0) : /*#__PURE__*/React.createElement(AvatarComponent, _extends({}, rest, {
     analyticsContext: analyticsContext,
     appearance: appearance,
     as: as,

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';
@@ -13,6 +12,7 @@ import Popup from '@atlaskit/popup';
 import Tooltip from '@atlaskit/tooltip';
 import AvatarGroupItem from './avatar-group-item';
 import { MoreDropdownTopLayer } from './avatar-group-top-layer';
+import { getOverrides } from './get-overrides';
 import Grid from './grid';
 import FocusManager from './internal/components/focus-manager';
 import PopupAvatarGroup from './internal/components/popup-avatar-group';
@@ -23,30 +23,6 @@ const MAX_COUNT = {
   grid: 11,
   stack: 5
 };
-function getOverrides(overrides) {
-  return {
-    AvatarGroupItem: {
-      render: (Component, props, index) => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-        key: composeUniqueKey(props.avatar, index)
-      })),
-      ...(overrides && overrides.AvatarGroupItem)
-    },
-    Avatar: {
-      render: (Component, props, index) =>
-      /*#__PURE__*/
-      //@ts-ignore - TS2604/TS2786: Component type union causing issues for help-center local consumption with TS 5.9.2
-      React.createElement(Component, _extends({}, props, {
-        key: composeUniqueKey(props, index)
-      })),
-      ...(overrides && overrides.Avatar)
-    },
-    MoreIndicator: {
-      render: (Component, props) => /*#__PURE__*/React.createElement(Component, props),
-      ...(overrides && overrides.MoreIndicator)
-    }
-  };
-}
-
 /**
  * __Avatar group__
  *
@@ -95,6 +71,11 @@ const AvatarGroup = ({
     isFocused,
     bindFocus
   } = useFocus();
+  const {
+    AvatarGroupItem: avatarGroupItemOverrides,
+    Avatar: avatarOverrides,
+    MoreIndicator: moreIndicatorOverrides
+  } = getOverrides(overrides);
 
   // When a trigger is focused, we want to open the popup
   // the user presses the DownArrow.
@@ -156,7 +137,7 @@ const AvatarGroup = ({
       'aria-haspopup': ariaHasPopup,
       onClick,
       ...props
-    }) => getOverrides(overrides).MoreIndicator.render(MoreIndicator, {
+    }) => moreIndicatorOverrides.render(MoreIndicator, {
       buttonProps: showMoreButtonProps,
       borderColor: borderColor,
       count: total - max,
@@ -207,6 +188,7 @@ const AvatarGroup = ({
       }
       return boundariesElement === 'window' ? 'document' : 'viewport';
     })();
+    const avatarComponent = avatar && fg('platform-avatar-group-pass-avatar-to-item') ? avatar : undefined;
     return /*#__PURE__*/React.createElement(Popup, {
       isOpen: isOpen,
       onClose: onClose,
@@ -226,9 +208,11 @@ const AvatarGroup = ({
       }, /*#__PURE__*/React.createElement(Section, {
         titleId: labelId,
         testId: `${testId}--section`
-      }, data.slice(max).map((avatar, index) => getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
-        avatar,
+      }, data.slice(max).map((avatarData, index) => avatarGroupItemOverrides.render(AvatarGroupItem, {
+        avatar: avatarData,
+        avatarComponent,
         onAvatarClick,
+        avatarOverrides,
         testId: testId && `${testId}--avatar-group-item-${index + max}`,
         index: index + max
       },
@@ -261,7 +245,7 @@ const AvatarGroup = ({
     size: size
   }, data.slice(0, maxAvatar).map((avatarData, idx) => {
     const callback = avatarData.onClick || onAvatarClick;
-    const finalAvatar = getOverrides(overrides).Avatar.render(avatar, {
+    const finalAvatar = avatarOverrides.render(avatar, {
       ...avatarData,
       size,
       borderColor: borderColor || avatarData.borderColor,
@@ -295,7 +279,7 @@ const AvatarGroup = ({
     "aria-label": label
   }, data.slice(0, maxAvatar).map((avatarData, idx) => {
     const callback = avatarData.onClick || onAvatarClick;
-    const finalAvatar = getOverrides(overrides).Avatar.render(avatar, {
+    const finalAvatar = avatarOverrides.render(avatar, {
       ...avatarData,
       size,
       borderColor: borderColor || avatarData.borderColor,

package/dist/es2019/components/get-overrides.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { composeUniqueKey } from './utils';
+export function getOverrides(overrides) {
+  return {
+    AvatarGroupItem: {
+      render: (Component, props, index) => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+        key: composeUniqueKey(props.avatar, index)
+      })),
+      ...(overrides && overrides.AvatarGroupItem)
+    },
+    Avatar: {
+      render: (Component, props, index) =>
+      /*#__PURE__*/
+      //@ts-ignore - TS2604/TS2786: Component type union causing issues for help-center local consumption with TS 5.9.2
+      React.createElement(Component, _extends({}, props, {
+        key: composeUniqueKey(props, index)
+      })),
+      ...(overrides && overrides.Avatar)
+    },
+    MoreIndicator: {
+      render: (Component, props) => /*#__PURE__*/React.createElement(Component, props),
+      ...(overrides && overrides.MoreIndicator)
+    }
+  };
+}

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

@@ -1,17 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["analyticsContext", "appearance", "as", "borderColor", "children", "href", "isDisabled", "key", "label", "name", "onClick", "presence", "size", "src", "stackIndex", "status", "tabIndex", "target", "testId"],
   _excluded2 = ["children", "className", "disabled", "draggable", "onClick", "onDragStart", "onMouseDown", "ref", "tabIndex", "data-testid"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef } from 'react';
 import Avatar from '@atlaskit/avatar';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var avatar = props.avatar,
+    avatarComponent = props.avatarComponent,
     index = props.index,
     onAvatarClick = props.onAvatarClick,
     testId = props.testId,
+    avatarOverrides = props.avatarOverrides,
     role = props.role;
   var analyticsContext = avatar.analyticsContext,
     appearance = avatar.appearance,
@@ -65,7 +71,24 @@ var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, props), children);
   };
-  var AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
+  var AvatarComponent = fg('platform-avatar-group-pass-avatar-to-item') ? avatarComponent !== null && avatarComponent !== void 0 ? avatarComponent : Avatar : Avatar;
+  var AvatarIcon = avatarOverrides && fg('platform-avatar-group-pass-avatar-to-item') ? avatarOverrides.render(AvatarComponent, _objectSpread(_objectSpread({}, rest), {}, {
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    as: as,
+    borderColor: 'transparent',
+    children: children,
+    isDisabled: isDisabled,
+    label: label,
+    name: '',
+    presence: presence,
+    size: 'small',
+    src: src,
+    stackIndex: stackIndex,
+    status: status,
+    tabIndex: tabIndex,
+    testId: testId && "".concat(testId, "--avatar")
+  }), 0) : /*#__PURE__*/React.createElement(AvatarComponent, _extends({}, rest, {
     analyticsContext: analyticsContext,
     appearance: appearance,
     as: as,

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

@@ -1,7 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["aria-controls", "aria-expanded", "aria-haspopup", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,6 +18,7 @@ import Popup from '@atlaskit/popup';
 import Tooltip from '@atlaskit/tooltip';
 import AvatarGroupItem from './avatar-group-item';
 import { MoreDropdownTopLayer } from './avatar-group-top-layer';
+import { getOverrides } from './get-overrides';
 import Grid from './grid';
 import FocusManager from './internal/components/focus-manager';
 import PopupAvatarGroup from './internal/components/popup-avatar-group';
@@ -29,34 +29,6 @@ var MAX_COUNT = {
   grid: 11,
   stack: 5
 };
-function getOverrides(overrides) {
-  return {
-    AvatarGroupItem: _objectSpread({
-      render: function render(Component, props, index) {
-        return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-          key: composeUniqueKey(props.avatar, index)
-        }));
-      }
-    }, overrides && overrides.AvatarGroupItem),
-    Avatar: _objectSpread({
-      render: function render(Component, props, index) {
-        return (
-          /*#__PURE__*/
-          //@ts-ignore - TS2604/TS2786: Component type union causing issues for help-center local consumption with TS 5.9.2
-          React.createElement(Component, _extends({}, props, {
-            key: composeUniqueKey(props, index)
-          }))
-        );
-      }
-    }, overrides && overrides.Avatar),
-    MoreIndicator: _objectSpread({
-      render: function render(Component, props) {
-        return /*#__PURE__*/React.createElement(Component, props);
-      }
-    }, overrides && overrides.MoreIndicator)
-  };
-}
-
 /**
  * __Avatar group__
  *
@@ -119,6 +91,10 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var _useFocus = useFocus(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;
+  var _getOverrides = getOverrides(overrides),
+    avatarGroupItemOverrides = _getOverrides.AvatarGroupItem,
+    avatarOverrides = _getOverrides.Avatar,
+    moreIndicatorOverrides = _getOverrides.MoreIndicator;
 
   // When a trigger is focused, we want to open the popup
   // the user presses the DownArrow.
@@ -180,7 +156,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
         ariaHasPopup = _ref3['aria-haspopup'],
         onClick = _ref3.onClick,
         props = _objectWithoutProperties(_ref3, _excluded);
-      return getOverrides(overrides).MoreIndicator.render(MoreIndicator, _objectSpread(_objectSpread({
+      return moreIndicatorOverrides.render(MoreIndicator, _objectSpread(_objectSpread({
         buttonProps: showMoreButtonProps,
         borderColor: borderColor,
         count: total - max,
@@ -230,6 +206,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       }
       return boundariesElement === 'window' ? 'document' : 'viewport';
     }();
+    var avatarComponent = avatar && fg('platform-avatar-group-pass-avatar-to-item') ? avatar : undefined;
     return /*#__PURE__*/React.createElement(Popup, {
       isOpen: isOpen,
       onClose: onClose,
@@ -251,10 +228,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
         }, /*#__PURE__*/React.createElement(Section, {
           titleId: labelId,
           testId: "".concat(testId, "--section")
-        }, data.slice(max).map(function (avatar, index) {
-          return getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
-            avatar: avatar,
+        }, data.slice(max).map(function (avatarData, index) {
+          return avatarGroupItemOverrides.render(AvatarGroupItem, {
+            avatar: avatarData,
+            avatarComponent: avatarComponent,
             onAvatarClick: onAvatarClick,
+            avatarOverrides: avatarOverrides,
             testId: testId && "".concat(testId, "--avatar-group-item-").concat(index + max),
             index: index + max
           },
@@ -287,7 +266,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     size: size
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
     var callback = avatarData.onClick || onAvatarClick;
-    var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
+    var finalAvatar = avatarOverrides.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
       size: size,
       borderColor: borderColor || avatarData.borderColor,
       testId: testId && "".concat(testId, "--avatar-").concat(idx),
@@ -320,7 +299,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     "aria-label": label
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
     var callback = avatarData.onClick || onAvatarClick;
-    var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
+    var finalAvatar = avatarOverrides.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
       size: size,
       borderColor: borderColor || avatarData.borderColor,
       testId: testId && "".concat(testId, "--avatar-").concat(idx),

package/dist/esm/components/get-overrides.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { composeUniqueKey } from './utils';
+export function getOverrides(overrides) {
+  return {
+    AvatarGroupItem: _objectSpread({
+      render: function render(Component, props, index) {
+        return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+          key: composeUniqueKey(props.avatar, index)
+        }));
+      }
+    }, overrides && overrides.AvatarGroupItem),
+    Avatar: _objectSpread({
+      render: function render(Component, props, index) {
+        return (
+          /*#__PURE__*/
+          //@ts-ignore - TS2604/TS2786: Component type union causing issues for help-center local consumption with TS 5.9.2
+          React.createElement(Component, _extends({}, props, {
+            key: composeUniqueKey(props, index)
+          }))
+        );
+      }
+    }, overrides && overrides.Avatar),
+    MoreIndicator: _objectSpread({
+      render: function render(Component, props) {
+        return /*#__PURE__*/React.createElement(Component, props);
+      }
+    }, overrides && overrides.MoreIndicator)
+  };
+}

package/dist/types/components/avatar-group-item.d.ts

@@ -1,9 +1,17 @@
-import React from 'react';
+import React, { type ElementType } from 'react';
+import Avatar from '@atlaskit/avatar';
+import { type getOverrides } from './get-overrides';
 import { type AvatarProps, type onAvatarClickHandler } from './types';
 export interface AvatarGroupItemProps {
     avatar: AvatarProps;
+    /**
+     * Custom component used to render the avatar inside the dropdown menu item.
+     * When not provided, defaults to the standard Avatar component.
+     */
+    avatarComponent?: typeof Avatar | ElementType<AvatarProps>;
     isActive?: boolean;
     isHover?: boolean;
+    avatarOverrides?: ReturnType<typeof getOverrides>['Avatar'];
     index: number;
     onAvatarClick?: onAvatarClickHandler;
     testId?: string;

package/dist/types/components/get-overrides.d.ts

@@ -0,0 +1,2 @@
+import type { AvatarGroupOverrides, DeepRequired } from './types';
+export declare function getOverrides(overrides?: AvatarGroupOverrides): DeepRequired<AvatarGroupOverrides>;

package/dist/types/components/utils.d.ts

@@ -1,2 +1,2 @@
-import { type AvatarProps } from './types';
+import type { AvatarProps } from './types';
 export declare const composeUniqueKey: (props: AvatarProps, index: number) => string | number;

package/dist/types-ts4.5/components/avatar-group-item.d.ts

@@ -1,9 +1,17 @@
-import React from 'react';
+import React, { type ElementType } from 'react';
+import Avatar from '@atlaskit/avatar';
+import { type getOverrides } from './get-overrides';
 import { type AvatarProps, type onAvatarClickHandler } from './types';
 export interface AvatarGroupItemProps {
     avatar: AvatarProps;
+    /**
+     * Custom component used to render the avatar inside the dropdown menu item.
+     * When not provided, defaults to the standard Avatar component.
+     */
+    avatarComponent?: typeof Avatar | ElementType<AvatarProps>;
     isActive?: boolean;
     isHover?: boolean;
+    avatarOverrides?: ReturnType<typeof getOverrides>['Avatar'];
     index: number;
     onAvatarClick?: onAvatarClickHandler;
     testId?: string;

package/dist/types-ts4.5/components/get-overrides.d.ts

@@ -0,0 +1,2 @@
+import type { AvatarGroupOverrides, DeepRequired } from './types';
+export declare function getOverrides(overrides?: AvatarGroupOverrides): DeepRequired<AvatarGroupOverrides>;

package/dist/types-ts4.5/components/utils.d.ts

@@ -1,2 +1,2 @@
-import { type AvatarProps } from './types';
+import type { AvatarProps } from './types';
 export declare const composeUniqueKey: (props: AvatarProps, index: number) => string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "12.9.0",
+	"version": "12.10.0",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -62,9 +62,11 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/toggle": "^15.6.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
+		"@atlassian/testing-library": "^0.5.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"lodash": "^4.17.21",
@@ -119,6 +121,9 @@
 		},
 		"remove_scaling_from_avatar_stack": {
 			"type": "boolean"
+		},
+		"platform-avatar-group-pass-avatar-to-item": {
+			"type": "boolean"
 		}
 	}
 }