From 46f307fed58921c5c6f6ce3078518003da57a3cb Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 6 Nov 2023 20:43:54 +0530
Subject: [PATCH] chore: update avatar group logic (#2672)

---
 packages/ui/src/avatar/avatar-group.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
index 4abb4a93b..129f9e3af 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -35,8 +35,11 @@ export const AvatarGroup: React.FC<Props> = (props) => {
   // calculate total length of avatars inside the group
   const totalAvatars = React.Children.toArray(children).length;
 
+  // if avatars are equal to max + 1, then we need to show the last avatar as well, if avatars are more than max + 1, then we need to show the count of the remaining avatars
+  const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
+
   // slice the children to the maximum number of avatars
-  const avatars = React.Children.toArray(children).slice(0, max);
+  const avatars = React.Children.toArray(children).slice(0, maxAvatarsToRender);
 
   // assign the necessary props from the AvatarGroup component to the Avatar components
   const avatarsWithUpdatedProps = avatars.map((avatar) => {
@@ -58,7 +61,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
           {avatar}
         </div>
       ))}
-      {max < totalAvatars && (
+      {maxAvatarsToRender < totalAvatars && (
         <Tooltip
           tooltipContent={`${totalAvatars} total`}
           disabled={!showTooltip}