From 1716061157f5aa1eb1709877bd2a0ae09b0ae4a2 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Wed, 11 Oct 2023 12:58:43 +0100
Subject: [PATCH 1/2] Migrating `AddCustomTemplateModalContent`

 - Removes `__unstableComposite` imports from `@wordpress/components`
 - Adds private `Composite*` exports from `@wordpress/components`
 - Refactors `SuggestionList` and `SuggestionListItem` to use updated `Composite` components
---
 .../add-custom-template-modal-content.js      | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 80a20939dec251..9f97c911a7de05 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -9,11 +9,9 @@ import {
 	FlexItem,
 	SearchControl,
 	TextHighlight,
+	privateApis as componentsPrivateApis,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -21,9 +19,16 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const EMPTY_ARRAY = [];
 
 function SuggestionListItem( {
@@ -31,22 +36,24 @@ function SuggestionListItem( {
 	search,
 	onSelect,
 	entityForSuggestions,
-	composite,
 } ) {
 	const baseCssClass =
 		'edit-site-custom-template-modal__suggestions_list__list-item';
 	return (
 		<CompositeItem
-			role="option"
-			as={ Button }
-			{ ...composite }
-			className={ baseCssClass }
-			onClick={ () =>
-				onSelect(
-					entityForSuggestions.config.getSpecificTemplate(
-						suggestion
-					)
-				)
+			render={
+				<Button
+					type="button"
+					role="option"
+					className={ baseCssClass }
+					onClick={ () =>
+						onSelect(
+							entityForSuggestions.config.getSpecificTemplate(
+								suggestion
+							)
+						)
+					}
+				/>
 			}
 		>
 			<Text
@@ -112,7 +119,7 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 }
 
 function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
+	const composite = useCompositeStore( { orientation: 'vertical' } );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
 	const suggestions = useSearchSuggestions(
 		entityForSuggestions,
@@ -136,7 +143,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 			) }
 			{ !! suggestions?.length && (
 				<Composite
-					{ ...composite }
+					store={ composite }
 					role="listbox"
 					className="edit-site-custom-template-modal__suggestions_list"
 					aria-label={ __( 'Suggestions list' ) }
@@ -148,7 +155,6 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 							search={ debouncedSearch }
 							onSelect={ onSelect }
 							entityForSuggestions={ entityForSuggestions }
-							composite={ composite }
 						/>
 					) ) }
 				</Composite>

From 49a5b8d17f6d98de8ff8a064adc64c3f76855b25 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Thu, 12 Oct 2023 11:35:03 +0100
Subject: [PATCH 2/2] Removing redundant `type="button"`

---
 .../add-new-template/add-custom-template-modal-content.js        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 9f97c911a7de05..643f1e6f818662 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -43,7 +43,6 @@ function SuggestionListItem( {
 		<CompositeItem
 			render={
 				<Button
-					type="button"
 					role="option"
 					className={ baseCssClass }
 					onClick={ () =>