From 7cd0ea366acf0b9b483d0da46ecca220aac55401 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Tue, 23 Jan 2024 19:00:15 +0530
Subject: [PATCH] [material-ui][AvatarGroup] Refactor component thereby fixing
 custom spacing logic (#40686)

---
 .../src/AvatarGroup/AvatarGroup.js            | 58 +++++++------------
 1 file changed, 21 insertions(+), 37 deletions(-)

diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
index cf15bc2b3b6859..a1fdfb09dc466e 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -33,31 +33,25 @@ const AvatarGroupRoot = styled('div', {
     [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
     ...styles.root,
   }),
-})(({ theme }) => ({
-  [`& .${avatarClasses.root}`]: {
-    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-    boxSizing: 'content-box',
-    marginLeft: -8,
-    '&:last-child': {
-      marginLeft: 0,
+})(({ theme, ownerState }) => {
+  const marginValue =
+    ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined
+      ? SPACINGS[ownerState.spacing]
+      : -ownerState.spacing;
+
+  return {
+    [`& .${avatarClasses.root}`]: {
+      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+      boxSizing: 'content-box',
+      marginLeft: marginValue ?? -8,
+      '&:last-child': {
+        marginLeft: 0,
+      },
     },
-  },
-  display: 'flex',
-  flexDirection: 'row-reverse',
-}));
-
-const AvatarGroupAvatar = styled(Avatar, {
-  name: 'MuiAvatarGroup',
-  slot: 'Avatar',
-  overridesResolver: (props, styles) => styles.avatar,
-})(({ theme }) => ({
-  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-  boxSizing: 'content-box',
-  marginLeft: -8,
-  '&:last-child': {
-    marginLeft: 0,
-  },
-}));
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  };
+});
 
 const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const props = useThemeProps({
@@ -117,8 +111,6 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
 
-  const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
-
   const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
 
   return (
@@ -130,28 +122,20 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
       {...other}
     >
       {extraAvatars ? (
-        <AvatarGroupAvatar
-          ownerState={ownerState}
+        <Avatar
           variant={variant}
           {...additionalAvatarSlotProps}
           className={clsx(classes.avatar, additionalAvatarSlotProps?.className)}
-          style={{ marginLeft, ...additionalAvatarSlotProps?.style }}
         >
           {extraAvatarsElement}
-        </AvatarGroupAvatar>
+        </Avatar>
       ) : null}
       {children
         .slice(0, maxAvatars)
         .reverse()
-        .map((child, index) => {
+        .map((child) => {
           return React.cloneElement(child, {
             className: clsx(child.props.className, classes.avatar),
-            style: {
-              // Consistent with "&:last-child" styling for the default spacing,
-              // we do not apply custom marginLeft spacing on the last child
-              marginLeft: index === maxAvatars - 1 ? undefined : marginLeft,
-              ...child.props.style,
-            },
             variant: child.props.variant || variant,
           });
         })}