Merge pull request #20507 from taras/tm/fix-safari-pre-16.3-compatibility

extractInitials without Regex lookbehind for Safari <16.3 compatibility

.changeset/ninety-numbers-study.md

@@ -0,0 +1,7 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed compatibility with Safari <16.3 by eliminating RegEx lookbehind in `extractInitials`.
+
+This PR also changed how initials are generated resulting in _John Jonathan Doe_ => _JD_ instead of _JJ_.

.github/vale/Vocab/Backstage/accept.txt

@@ -455,3 +455,4 @@ Pulumi
 Lightsail
 PR
 rebasing
+lookbehind

packages/core-components/src/components/Avatar/util.test.ts

@@ -17,25 +17,29 @@
 import { extractInitials, stringToColor } from './utils';
 
 describe('stringToColor', () => {
-  it('extract color', async () => {
+  it('extract color', () => {
     expect(stringToColor('Jenny Doe')).toEqual('#7809fa');
   });
 });
 
 describe('extractInitials', () => {
-  it('extract initials', async () => {
+  it('extract initials', () => {
     expect(extractInitials('Jenny Doe')).toEqual('JD');
   });
 
-  it('extract unicode initials', async () => {
+  it('extract unicode initials', () => {
     expect(extractInitials('Petr Čech')).toEqual('PČ');
   });
 
-  it('extract single letter for short name', async () => {
+  it('extract single letter for short name', () => {
     expect(extractInitials('Doe')).toEqual('D');
   });
 
-  it('limit the initials to two letters', async () => {
-    expect(extractInitials('John Jonathan Doe')).toEqual('JJ');
+  it('limit the initials to two letters', () => {
+    expect(extractInitials('John Jonathan Doe')).toEqual('JD');
+  });
+
+  it('removes spaces from beginning or the end', () => {
+    expect(extractInitials(' John Jonathan Doe ')).toEqual('JD');
   });
 });

packages/core-components/src/components/Avatar/utils.ts

@@ -27,9 +27,11 @@ export function stringToColor(str: string) {
   return color;
 }
 
-export function extractInitials(value: string) {
-  return value
-    .match(/(?<!\p{L})\p{L}/gu)
-    ?.join('')
-    .slice(0, 2);
+export function extractInitials(name: string) {
+  const names = name.trim().split(' ');
+  const firstName = names[0] ?? '';
+  const lastName = names.length > 1 ? names[names.length - 1] : '';
+  return firstName && lastName
+    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
+    : firstName.charAt(0);
 }