diff --git a/packages/components/src/spectrum/utils/itemUtils.test.tsx b/packages/components/src/spectrum/utils/itemUtils.test.tsx index 51c6932a91..a09c8fc02d 100644 --- a/packages/components/src/spectrum/utils/itemUtils.test.tsx +++ b/packages/components/src/spectrum/utils/itemUtils.test.tsx @@ -61,7 +61,7 @@ describe('getItemTextValue', () => { object , - undefined, + '', ], ])( 'should return the expected `textValue`: %s, %s', diff --git a/packages/components/src/spectrum/utils/itemUtils.ts b/packages/components/src/spectrum/utils/itemUtils.ts index 49895787c9..a0e15bb07b 100644 --- a/packages/components/src/spectrum/utils/itemUtils.ts +++ b/packages/components/src/spectrum/utils/itemUtils.ts @@ -137,9 +137,10 @@ export function getItemKey< */ export function getItemTextValue(item: ItemElement): 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 === '' diff --git a/packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx b/packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx index c4a2c7b4cf..18e7433aff 100644 --- a/packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx +++ b/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)', diff --git a/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx b/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx index 74258085c1..1a14cc6fa6 100644 --- a/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx +++ b/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')