From a2fe333bf0ead94fac99880cf37d6fc125187665 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 26 Aug 2024 18:58:22 +0200
Subject: [PATCH] Extract computeDropdownTriggerCompositeId

---
 .../src/dataviews-layouts/list/index.tsx      | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index da04c50fc5ff7..92add7c43049f 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -38,7 +38,7 @@ import type { Action, NormalizedField, ViewListProps } from '../../types';
 
 interface ListViewItemProps< Item > {
 	actions: Action< Item >[];
-	id?: string;
+	id: string;
 	isSelected: boolean;
 	item: Item;
 	mediaField?: NormalizedField< Item >;
@@ -56,6 +56,10 @@ const {
 	DropdownMenuV2: DropdownMenu,
 } = unlock( componentsPrivateApis );
 
+function computeDropdownTriggerCompositeId( domId: string ) {
+	return `${ domId }-dropdown`;
+}
+
 function ListItem< Item >( {
 	actions,
 	id,
@@ -262,7 +266,9 @@ function ListItem< Item >( {
 							<DropdownMenu
 								trigger={
 									<CompositeItem
-										id={ `${ id }-dropdown` }
+										id={ computeDropdownTriggerCompositeId(
+											id
+										) }
 										render={
 											<Button
 												size="small"
@@ -324,8 +330,13 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const baseId = useInstanceId( ViewList, 'view-list' );
 
 	const getItemDomId = useCallback(
-		( item?: Item ) =>
-			item ? `${ baseId }-${ getItemId( item ) }` : undefined,
+		( item?: Item ) => {
+			if ( ! item ) {
+				return;
+			}
+
+			return `${ baseId }-${ getItemId( item ) }`;
+		},
 		[ baseId, getItemId ]
 	);
 
@@ -397,7 +408,12 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 
 	const selectItemDropdownTrigger = ( itemIndex: number ) => {
 		const item = data[ itemIndex ];
-		const nextCompositeActiveId = `${ getItemDomId( item ) }-dropdown`;
+		const itemDomId = getItemDomId( item );
+		if ( ! itemDomId ) {
+			return;
+		}
+		const nextCompositeActiveId =
+			computeDropdownTriggerCompositeId( itemDomId );
 		setActiveCompositeId( nextCompositeActiveId );
 		(
 			document.querySelector( `#${ nextCompositeActiveId }` ) as
@@ -443,7 +459,9 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 			setActiveId={ setActiveCompositeId }
 		>
 			{ data.map( ( item ) => {
-				const id = getItemDomId( item );
+				// Since `item` is guaranteed not to be undefined, we can safely
+				// let typescript know that `id` is not undefined either.
+				const id = getItemDomId( item )!;
 				return (
 					<ListItem
 						key={ id }