Update avatar-name.tsx (#7406)

* Update avatar-name.tsx

When users name more than 2 words, initials do not get displayed as expected. For example, Anil Pak is displayed as AP, but also Anil Pak Chakra is displayed as AP instead of AC.

* Comments resolved.

* docs: add changelog

---------

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

.changeset/shy-pumas-provide.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/avatar": patch
+---
+
+Fix issue where initials was not correctly computed when name includes a middle name like "Sage Naruto Manich"

packages/components/avatar/src/avatar-name.tsx

@@ -3,7 +3,8 @@ import { useAvatarStyles } from "./avatar-context"
 import { AvatarOptions } from "./avatar-types"
 
 export function initials(name: string) {
-  const [firstName, lastName] = name.split(" ")
+  const [firstName, ...otherNames] = name.split(" ");
+  const [lastName] = otherNames.reverse();
   return firstName && lastName
     ? `${firstName.charAt(0)}${lastName.charAt(0)}`
     : firstName.charAt(0)