Get initials using graphemes instead of chars (#3980)

* Handle characters requiring surrogate pairs in Avatar getInitials

* Split graphemes

* Replace graphemer with unicode-segmenter

* Update yarn.lock

* Run prettier

* Fix lint error

---------

Co-authored-by: Michelle Huang <[email protected]>

Author: mhuang1234

change/@fluentui-react-native-avatar-963eb462-f58a-482a-a400-7a53919e4443.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Handle characters requiring surrogate pairs in Avatar getInitials",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

packages/components/Avatar/package.json

@@ -40,7 +40,8 @@
     "@fluentui-react-native/theme-tokens": "workspace:*",
     "@fluentui-react-native/theming-utils": "workspace:*",
     "@fluentui-react-native/tokens": "workspace:*",
-    "@fluentui-react-native/use-styling": "workspace:*"
+    "@fluentui-react-native/use-styling": "workspace:*",
+    "unicode-segmenter": "^0.14.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

packages/components/Avatar/src/useAvatar.ts

@@ -1,13 +1,14 @@
 import type { ImageProps, ImageSourcePropType } from 'react-native';
 import { Platform } from 'react-native';
-
 import { createIconProps } from '@fluentui-react-native/icon';
 
 import type { AvatarProps, AvatarInfo, AvatarState, AvatarSize, AvatarColor } from './Avatar.types';
 import { AvatarColors } from './Avatar.types';
 import { getHashCodeWeb } from './getHashCode';
 import { titles, multiWordTitles } from './titles';
 
+const splitGraphemes = require('unicode-segmenter/grapheme').splitGraphemes as (str: string) => string[];
+
 /**
  * Re-usable hook for FURN Avatar.
  * This hook configures Avatar props and state for FURN Avatar.
@@ -124,12 +125,31 @@ export const getInitials = (name: string): string => {
   }
 
   const lastWordIdx = wordsLength - 1;
-  const firstLetter = words[0].charAt(0).toUpperCase();
-  const lastLetter = wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : '';
-  const initials = `${firstLetter}${ARABIC_ASIAN_REGEXP.test(name) ? '' : lastLetter}`;
+  const firstLetter = getFirstGrapheme(words[0]).toUpperCase();
+
+  let lastLetter = '';
+  if (wordsLength > 1 && !ARABIC_ASIAN_REGEXP.test(name)) {
+    lastLetter = getFirstGrapheme(words[lastWordIdx]).toUpperCase();
+  }
+
+  const initials = `${firstLetter}${lastLetter}`;
   return initials;
 };
 
+/**
+ * Get the first grapheme cluster from a string
+ *
+ * @param str input string
+ * @returns first grapheme cluster (handles composite emojis, skin tone modifiers, ZWJ sequences, etc.)
+ */
+const getFirstGrapheme = (str: string): string => {
+  if (!str) {
+    return '';
+  }
+
+  return [...splitGraphemes(str)][0] ?? '';
+};
+
 /**
  * A function which takes a name and returns array of valid words
  *

yarn.lock

@@ -2521,6 +2521,7 @@ __metadata:
     react-native-svg: "npm:>=15.4.0 <15.13.0"
     react-native-windows: "npm:^0.74.0"
     react-test-renderer: "npm:18.2.0"
+    unicode-segmenter: "npm:^0.14.4"
   peerDependencies:
     "@office-iss/react-native-win32": ^0.74.0
     react: 18.2.0
@@ -21410,6 +21411,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicode-segmenter@npm:^0.14.4":
+  version: 0.14.4
+  resolution: "unicode-segmenter@npm:0.14.4"
+  checksum: 10c0/ec062a90518fd8cdba14ad2516b2a5d8240931f5e7668bb8dc8881d7b6962ba9739df0219b4a237118f17b2fbdaf7704df8803538517c51315c73d380dc75128
+  languageName: node
+  linkType: hard
+
 "unicorn-magic@npm:^0.3.0":
   version: 0.3.0
   resolution: "unicorn-magic@npm:0.3.0"