From 9fb5750606b69f0fd9c4948d6fbf4312e2e5a061 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Tue, 14 Nov 2023 15:39:23 +0000
Subject: [PATCH 1/2] Migrating `PatternTransformationsMenu`

 - Removes `__unstableComposite` imports from `@wordpress/components`
 - Adds private `Composite*` exports from `@wordpress/components`
 - Refactors `BlockPatternsList` and `BlockPattern` to use updated `Composite` components
---
 .../pattern-transformations-menu.js           | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
index f9a4b7190a6dd8..8c4ec16071d1ea 100644
--- a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
@@ -11,9 +11,7 @@ import {
 	MenuItem,
 	Popover,
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
@@ -21,6 +19,13 @@ import {
  */
 import BlockPreview from '../block-preview';
 import useTransformedPatterns from './use-transformed-patterns';
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
 
 function PatternTransformationsMenu( {
 	blocks,
@@ -73,10 +78,10 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 }
 
 function BlockPatternsList( { patterns, onSelect } ) {
-	const composite = useCompositeState();
+	const composite = useCompositeStore();
 	return (
 		<Composite
-			{ ...composite }
+			store={ composite }
 			role="listbox"
 			className="block-editor-block-switcher__preview-patterns-container"
 			aria-label={ __( 'Patterns list' ) }
@@ -86,14 +91,13 @@ function BlockPatternsList( { patterns, onSelect } ) {
 					key={ pattern.name }
 					pattern={ pattern }
 					onSelect={ onSelect }
-					composite={ composite }
 				/>
 			) ) }
 		</Composite>
 	);
 }
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect } ) {
 	// TODO check pattern/preview width...
 	const baseClassName =
 		'block-editor-block-switcher__preview-patterns-container';
@@ -106,7 +110,6 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 			<CompositeItem
 				role="option"
 				as="div"
-				{ ...composite }
 				aria-label={ pattern.title }
 				aria-describedby={
 					pattern.description ? descriptionId : undefined

From 5fbf563bfe4517b2451359e049ab2541426e1c68 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Wed, 15 Nov 2023 16:58:09 +0000
Subject: [PATCH 2/2] s/as/render/

---
 .../pattern-transformations-menu.js               | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
index 8c4ec16071d1ea..84f2d4b6a7a950 100644
--- a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
@@ -108,13 +108,16 @@ function BlockPattern( { pattern, onSelect } ) {
 	return (
 		<div className={ `${ baseClassName }-list__list-item` }>
 			<CompositeItem
-				role="option"
-				as="div"
-				aria-label={ pattern.title }
-				aria-describedby={
-					pattern.description ? descriptionId : undefined
+				render={
+					<div
+						role="option"
+						aria-label={ pattern.title }
+						aria-describedby={
+							pattern.description ? descriptionId : undefined
+						}
+						className={ `${ baseClassName }-list__item` }
+					/>
 				}
-				className={ `${ baseClassName }-list__item` }
 				onClick={ () => onSelect( pattern.transformedBlocks ) }
 			>
 				<BlockPreview