@atlaskit/avatar-group 12.8.0 → 12.10.0

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # @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
+
+- [`7250582895c0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7250582895c0b) -
+  Top-layer adoption work behind the `platform-dst-top-layer` feature flag. Public adopter APIs are
+  intentionally kept narrow while the top-layer API surface settles, with one exception called out
+  below.
+
+  Highlights:
+  - Pass the full `[along, away]` legacy popper offset through to the new top-layer
+    `placement.offset` API (via `fromLegacyPlacement`). Previously only the `away` axis was
+    forwarded, which dropped the `along` offset for consumers of `Popup`, `PopupSelect`,
+    `Spotlight`, and `Tooltip` when `platform-dst-top-layer` is enabled.
+  - Fix broken import of `dialogHeight` and `dialogWidth` from the removed utils module in
+    `@atlaskit/modal-dialog`.
+
+  Public API:
+  - **`@atlaskit/tooltip`** (`minor`): add an optional `testId?: string` field to `TriggerProps`.
+    This is additive (no existing prop changes shape). Required because `@atlaskit/button/new` (and
+    other `Pressable`-backed primitives) overwrite `data-testid` from spread, so the legacy
+    `(triggerProps as any)['data-testid']` workaround is silently absorbed by those consumers. A
+    typed `testId` field flows through their own `testId` destructure instead, restoring
+    `data-testid` propagation onto the rendered trigger element.
+  - **`@atlaskit/popup`**, **`@atlaskit/dropdown-menu`** (`patch`): no public type changes. Wider
+    `aria-haspopup` unions that the FF-on path produces are bridged at the package boundary into
+    `@atlaskit/top-layer` with localised `FUDGE(top-layer-api)` casts, documented in
+    `packages/design-system/top-layer/notes/decisions/migration-roadmap.md` ("Open API decisions
+    deferred to a follow-up PR"). They will be widened in a follow-up `minor` PR once the top-layer
+    API is committed.
+  - **`@atlaskit/modal-dialog`**, **`@atlaskit/select`**, **`@atlaskit/spotlight`**
+    (`patch`/`minor`): no public type changes; bug fixes only.
+
+  Merge-readiness fixes (FF-on test wiring + adopter behavior):
+  - **`@atlaskit/popup`** (`minor`): wire the compositional `PopupContent` to delegate to
+    `PopupContentTopLayer` when `platform-dst-top-layer` is enabled. Previously only the legacy
+    `Popup` component had the FF branch, leaving consumers of the compositional API on the legacy
+    popper path.
+  - **`@atlaskit/select`** (`minor`): add an `onClick` handler to the `PopupSelect` top-layer
+    trigger so clicks open/close the menu (mirrors the legacy global click handler in
+    `popup-select.tsx`). Add explicit Escape handling on the menu's `onKeyDown` so the menu closes
+    and focus returns to the trigger.
+  - **`@atlaskit/top-layer`** (`patch`): the `<dialog>` rendered by the Dialog primitive now sets
+    `aria-modal="true"` explicitly. Modern browsers infer modal semantics from `.showModal()` but
+    some assistive tech still keys off the explicit attribute.
+  - **`@atlaskit/top-layer`** (`patch`): guard `use-anchor-positioning` against environments where
+    `ResizeObserver` is not defined (e.g. jest's `node` environment, used by the post-office test
+    suite). The observer is used to wait for the popover's first valid layout before measuring;
+    consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners
+    still apply if the host environment polyfills `showPopover`. Real browsers always have
+    `ResizeObserver`.
+  - **`@atlaskit/modal-dialog`** (`patch`): on the FF-on path, drop the `tabIndex={-1}` (and unused
+    `:focus-visible` outline) from the modal content wrapper. The native `<dialog>.showModal()`
+    focus-delegate algorithm picks the first focusable descendant (including `tabindex=-1`), and the
+    wrapper was hijacking initial focus from the close button. Also honor `shouldReturnFocus={ref}`
+    on the FF-on path (an unmount-cleanup focuses the ref after `dialog.close()` so it overrides the
+    browser's automatic return-to-trigger). Boolean `shouldReturnFocus={false}` is not yet honored
+    on the FF-on path — see `top-layer/notes/merge-blockers.md`.
+  - **`@atlaskit/datetime-picker`** (`patch`): on the FF-on path, set `mode="manual"` on the
+    `Popup.Content` rendered by both `internal/menu-top-layer.tsx` (date-picker calendar) and
+    `internal/fixed-layer-menu-top-layer.tsx` (time-picker menu). With the default `mode="auto"`,
+    the same click event that opens the menu (which targets the react-select combobox input —
+    outside the popover element) bubbles to the browser's native popover light-dismiss handler and
+    immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc
+    dismissal via their own state, so opting out of the native auto-dismiss is the correct
+    integration. Also extend the existing Esc → trigger-focus restoration in
+    `components/date-picker.tsx` to the FF-on path (manual mode disables the browser's built-in
+    focus return, and the legacy code path was already handling this for itself behind an FF
+    negation).
+  - **`@atlaskit/popup`** (no public API change): no source changes — only FF-on Playwright
+    spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two `test.fixme`'d
+    nested-popover cases were not browser limitations; `popover="auto"` chains correctly via DOM
+    ancestry (the original fixmes had the wrong testId selector). Added `testId` props to two
+    examples (`16-popup-with-a11y-props`, `18-should-fit-container`) so default-shape tests can
+    reach the trigger.
+  - Test alignment for FF-on Playwright suites across `popup`, `select`, `datetime-picker`,
+    `inline-dialog`, `inline-message`, and `modal-dialog`: selector updates to match the new
+    top-layer testId convention (`${testId}--content`, `[role="dialog"][aria-label="calendar"]`),
+    per-spec `skipAxeCheck()` for example-level color-contrast violations unrelated to the
+    migration, and focus assertions adjusted to match native `<dialog>` / `Popup.Content` auto-focus
+    semantics (focus lands on the first focusable child, not the dialog container itself).
+  - **`@atlassian/capacity-planning-capacity-graph`**, **`@atlaskit/color-picker`**,
+    **`@atlassian/timeline-table`**, **`@atlassian/global-side-navigation`** (`patch`): scope `fg`
+    mocks in unit tests so `platform-dst-top-layer` returns `false`. JSDOM does not implement the
+    native Popover API (`showPopover`/`hidePopover`/`toggle` events), so leaving the gate ON in unit
+    tests caused popover content to remain in the DOM after close and broke close-behaviour
+    assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed
+    above.
+  - **`@atlaskit/dropdown-menu`** (no public API change): test/example-only fixes for the FF-on
+    Playwright suite. Added `role="menuitem"` to the nested-trigger `ButtonItem` in
+    `examples/93-testing-nested-keyboard-navigation-top-layer.tsx` to satisfy axe's
+    `aria-required-children` rule on the parent menu. Added a `test.beforeEach(skipAxeCheck)` to
+    `dropdown-menu.spec.tsx` (FF-on suite) for example-level `color-contrast` violations on the
+    pre-existing `color.text.selected`/`color.background.selected` token pair (3.91:1). Replaced a
+    deadlocking `await expect(moveItem).not.toBeFocused()` pre-open assertion (Playwright's
+    auto-wait blocks 5s on the absent element) with `await expect(moveItem).not.toBeVisible()`.
+    Suite result: 22/22 passing.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.8.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.8.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/"
@@ -37,9 +37,9 @@
 		"@atlaskit/menu": "^8.5.0",
 		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.18.0",
+		"@atlaskit/popup": "^4.19.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^22.1.0",
+		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/top-layer": "^0.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -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"
 		}
 	}
 }