fix: make textValue default to key for Normalized Item (#2113)

Resolves #2112

Author: AkshatJawne

packages/components/src/spectrum/utils/itemUtils.test.tsx

@@ -61,7 +61,7 @@ describe('getItemTextValue', () => {
       <Item key="">
         <span>object</span>
       </Item>,
-      undefined,
+      '',
     ],
   ])(
     'should return the expected `textValue`: %s, %s',

packages/components/src/spectrum/utils/itemUtils.ts

@@ -137,9 +137,10 @@ export function getItemKey<
  */
 export function getItemTextValue<T>(item: ItemElement<T>): string | undefined {
   if (item.props.textValue == null) {
+    const itemKeyStr = item.key == null ? undefined : String(item.key);
     return ['string', 'boolean', 'number'].includes(typeof item.props.children)
       ? String(item.props.children)
-      : undefined;
+      : itemKeyStr;
   }
 
   return item.props.textValue === ''

packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx

@@ -105,7 +105,7 @@ describe.each([
     it.each([
       [
         { key: 'mock.key', textValue: undefined },
-        'Empty',
+        'mock.key',
         'wrapIcon(undefined, illustration)',
         'wrapPrimitiveWithText(undefined, undefined)',
         'wrapPrimitiveWithText(undefined, description)',
@@ -115,6 +115,16 @@ describe.each([
           key: 'mock.key',
           item: { content: 'mock.content', textValue: undefined },
         },
+        'mock.key',
+        'wrapIcon(undefined, illustration)',
+        'wrapPrimitiveWithText(mock.content, undefined)',
+        'wrapPrimitiveWithText(undefined, description)',
+      ],
+      [
+        {
+          key: 'mock.key',
+          item: { content: 'mock.content', textValue: '' },
+        },
         'Empty',
         'wrapIcon(undefined, illustration)',
         'wrapPrimitiveWithText(mock.content, undefined)',
@@ -132,15 +142,30 @@ describe.each([
       ],
       [
         {
-          key: 'mock.key',
+          key: '',
           item: {
-            textValue: 'mock.textValue',
+            textValue: undefined,
             icon: 'mock.icon',
             content: 'mock.content',
             description: 'mock.description',
           },
         },
-        'mock.textValue',
+        'Empty',
+        'wrapIcon(mock.icon, illustration)',
+        'wrapPrimitiveWithText(mock.content, undefined)',
+        'wrapPrimitiveWithText(mock.description, description)',
+      ],
+      [
+        {
+          key: undefined,
+          item: {
+            textValue: undefined,
+            icon: 'mock.icon',
+            content: 'mock.content',
+            description: 'mock.description',
+          },
+        },
+        undefined,
         'wrapIcon(mock.icon, illustration)',
         'wrapPrimitiveWithText(mock.content, undefined)',
         'wrapPrimitiveWithText(mock.description, description)',

packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx

@@ -8,8 +8,8 @@ import { ListActionMenu, ListActionMenuProps } from '../ListActionMenu';
 import { Item } from '../shared';
 import {
   getItemKey,
-  ItemIconSlot,
   ITEM_EMPTY_STRING_TEXT_VALUE,
+  ItemIconSlot,
   NormalizedItem,
   TooltipOptions,
 } from './itemUtils';
@@ -50,7 +50,9 @@ export function useRenderNormalizedItem({
     (normalizedItem: NormalizedItem) => {
       const itemKey = getItemKey(normalizedItem);
       const content = wrapPrimitiveWithText(normalizedItem.item?.content);
-      const textValue = normalizedItem.item?.textValue ?? '';
+      const textValue =
+        normalizedItem.item?.textValue ??
+        (itemKey == null ? undefined : String(itemKey));
 
       const description = showItemDescriptions
         ? wrapPrimitiveWithText(normalizedItem.item?.description, 'description')