[AvatarGroup] Enable targeting of additional Avatar when max props is passed

docs/pages/api-docs/avatar-group.json

@@ -2,6 +2,10 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
+    "componentsProps": {
+      "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
+      "default": "{}"
+    },
     "max": { "type": { "name": "custom", "description": "number" }, "default": "5" },
     "spacing": {
       "type": {

docs/translations/api-docs/avatar-group/avatar-group.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "children": "The avatars to stack.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "componentsProps": "The props used for each slot inside the AvatarGroup.",
     "max": "Max avatars to show before +x.",
     "spacing": "Spacing between avatars.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",

packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts

@@ -3,9 +3,11 @@ import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { AvatarGroupClasses } from './avatarGroupClasses';
+import Avatar from '../Avatar';
 
 export interface AvatarGroupPropsVariantOverrides {}
 
+export interface AvatarGroupComponentsPropsOverrides {}
 export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
    * The avatars to stack.
@@ -15,6 +17,14 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<AvatarGroupClasses>;
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps?: {
+    additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
+      AvatarGroupComponentsPropsOverrides;
+  };
   /**
    * Max avatars to show before +x.
    * @default 5

packages/mui-material/src/AvatarGroup/AvatarGroup.js

@@ -67,6 +67,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const {
     children: childrenProp,
     className,
+    componentsProps = {},
     max = 5,
     spacing = 'medium',
     total,
@@ -122,11 +123,10 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
       {extraAvatars ? (
         <AvatarGroupAvatar
           ownerState={ownerState}
-          className={classes.avatar}
-          style={{
-            marginLeft,
-          }}
           variant={variant}
+          {...componentsProps.additionalAvatar}
+          className={clsx(classes.avatar, componentsProps.additionalAvatar?.className)}
+          style={{ marginLeft, ...componentsProps.additionalAvatar?.style }}
         >
           +{extraAvatars}
         </AvatarGroupAvatar>
@@ -165,6 +165,13 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    additionalAvatar: PropTypes.object,
+  }),
   /**
    * Max avatars to show before +x.
    * @default 5

packages/mui-material/src/AvatarGroup/AvatarGroup.test.js

@@ -49,6 +49,22 @@ describe('<AvatarGroup />', () => {
     expect(container.textContent).to.equal('+2');
   });
 
+  it('should pass props from componentsProps.additionalAvatar to the slot component', () => {
+    const componentsProps = { additionalAvatar: { className: 'additional-avatar-test' } };
+
+    const { container } = render(
+      <AvatarGroup max={3} componentsProps={componentsProps}>
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
+      </AvatarGroup>,
+    );
+
+    const additionalAvatar = container.querySelector('.additional-avatar-test');
+    expect(additionalAvatar.classList.contains('additional-avatar-test')).to.equal(true);
+  });
+
   it('should respect total', () => {
     const { container } = render(
       <AvatarGroup total={10}>