Migrating InserterListbox to use updated Composite implementation

packages/block-editor/src/components/block-types-list/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,11 +26,10 @@ function BlockTypesList( {
 	label,
 	isDraggable = true,
 } ) {
+	const className = 'block-editor-block-types-list';
+	const listId = useInstanceId( BlockTypesList, className );
 	return (
-		<InserterListboxGroup
-			className="block-editor-block-types-list"
-			aria-label={ label }
-		>
+		<InserterListboxGroup className={ className } aria-label={ label }>
 			{ chunk( items, 3 ).map( ( row, i ) => (
 				<InserterListboxRow key={ i }>
 					{ row.map( ( item, j ) => (
@@ -43,6 +43,7 @@ function BlockTypesList( {
 							onHover={ onHover }
 							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
+							rowId={ `${ listId }-${ i }` }
 						/>
 					) ) }
 				</InserterListboxRow>

packages/block-editor/src/components/inserter-listbox/index.js

@@ -1,26 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
+
 function InserterListbox( { children } ) {
-	const compositeState = useCompositeState( {
-		shift: true,
-		wrap: 'horizontal',
+	const store = useCompositeStore( {
+		focusShift: true,
+		focusWrap: 'horizontal',
 	} );
+
 	return (
-		<InserterListboxContext.Provider value={ compositeState }>
+		<Composite store={ store } render={ <></> }>
 			{ children }
-		</InserterListboxContext.Provider>
+		</Composite>
 	);
 }
 

packages/block-editor/src/components/inserter-listbox/item.js

@@ -3,32 +3,31 @@
  */
 import {
 	Button,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
-	const state = useContext( InserterListboxContext );
 	return (
 		<CompositeItem
 			ref={ ref }
-			state={ state }
 			role="option"
-			// Use the CompositeItem `focusable` prop over Button's
-			// isFocusable. The latter was shown to cause an issue
-			// with tab order in the inserter list.
-			focusable
+			// Use the CompositeItem `accessibleWhenDisabled` prop
+			// over Button's `isFocusable`. The latter was shown to
+			// cause an issue with tab order in the inserter list.
+			accessibleWhenDisabled
 			{ ...props }
-		>
-			{ ( htmlProps ) => {
+			render={ ( htmlProps ) => {
 				const propsWithTabIndex = {
 					...htmlProps,
 					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
@@ -45,7 +44,7 @@ function InserterListboxItem(
 				}
 				return <Button { ...propsWithTabIndex }>{ children }</Button>;
 			} }
-		</CompositeItem>
+		/>
 	);
 }
 

packages/block-editor/src/components/inserter-listbox/row.js

@@ -1,24 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useContext } from '@wordpress/element';
-import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeGroupV2: CompositeGroup } = unlock( componentsPrivateApis );
 
 function InserterListboxRow( props, ref ) {
-	const state = useContext( InserterListboxContext );
-	return (
-		<CompositeGroup
-			state={ state }
-			role="presentation"
-			ref={ ref }
-			{ ...props }
-		/>
-	);
+	return <CompositeGroup role="presentation" ref={ ref } { ...props } />;
 }
 
 export default forwardRef( InserterListboxRow );