Replace old CustomSelectControl select control with the V2 legacy a…

…dapter and fix selectedItem handling `onChange`

packages/block-editor/src/components/font-appearance-control/index.js

@@ -151,6 +151,10 @@ export default function FontAppearanceControl( props ) {
 				key: value,
 				name,
 				style: { fontStyle: undefined, fontWeight: value },
+				className: 'yay-custom-class-name-yolo',
+				arbitrary: 'property',
+				foo: 'bar',
+				bar: 'foooo',
 			} );
 		} );
 		return combinedOptions;
@@ -212,9 +216,9 @@ export default function FontAppearanceControl( props ) {
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }
-				onChange={ ( { selectedItem } ) =>
-					onChange( selectedItem.style )
-				}
+				onChange={ ( { selectedItem } ) => {
+					onChange( selectedItem.style );
+				} }
 			/>
 		)
 	);

packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx

@@ -14,7 +14,11 @@ import { useState } from '@wordpress/element';
  */
 import UncontrolledCustomSelectControl from '..';
 
-const customClass = 'amber-skies';
+const className = 'amber-skies';
+const style = {
+	backgroundColor: 'rgb(127, 255, 212)',
+	rotate: '13deg',
+};
 
 const legacyProps = {
 	label: 'label!',
@@ -26,7 +30,7 @@ const legacyProps = {
 		{
 			key: 'flower2',
 			name: 'crimson clover',
-			className: customClass,
+			className,
 		},
 		{
 			key: 'flower3',
@@ -35,15 +39,18 @@ const legacyProps = {
 		{
 			key: 'color1',
 			name: 'amber',
-			className: customClass,
+			className,
 		},
 		{
 			key: 'color2',
 			name: 'aquamarine',
-			style: {
-				backgroundColor: 'rgb(127, 255, 212)',
-				rotate: '13deg',
-			},
+			style,
+		},
+		{
+			key: 'aquarela-key',
+			name: 'aquarela',
+			className,
+			style,
 		},
 	],
 };
@@ -53,7 +60,9 @@ const ControlledCustomSelectControl = ( {
 	onChange,
 	...restProps
 }: React.ComponentProps< typeof UncontrolledCustomSelectControl > ) => {
+	const { value: overrideValue } = restProps;
 	const [ value, setValue ] = useState( options[ 0 ] );
+	const initialValue = overrideValue ?? value;
 	return (
 		<UncontrolledCustomSelectControl
 			{ ...restProps }
@@ -63,7 +72,7 @@ const ControlledCustomSelectControl = ( {
 				setValue( args.selectedItem );
 			} }
 			value={ options.find(
-				( option: any ) => option.key === value.key
+				( option: any ) => option.key === initialValue.key
 			) }
 		/>
 	);
@@ -148,7 +157,7 @@ describe.each( [
 		// assert against filtered array
 		itemsWithClass.map( ( { name } ) =>
 			expect( screen.getByRole( 'option', { name } ) ).toHaveClass(
-				customClass
+				className
 			)
 		);
 
@@ -160,7 +169,7 @@ describe.each( [
 		// assert against filtered array
 		itemsWithoutClass.map( ( { name } ) =>
 			expect( screen.getByRole( 'option', { name } ) ).not.toHaveClass(
-				customClass
+				className
 			)
 		);
 	} );
@@ -286,7 +295,7 @@ describe.each( [
 			expect.objectContaining( {
 				inputValue: '',
 				isOpen: false,
-				selectedItem: { key: 'violets', name: 'violets' },
+				selectedItem: { key: 'flower1', name: 'violets' },
 				type: '',
 			} )
 		);
@@ -302,6 +311,7 @@ describe.each( [
 			expect.objectContaining( {
 				inputValue: '',
 				isOpen: false,
+
 				selectedItem: expect.objectContaining( {
 					name: 'aquamarine',
 				} ),
@@ -328,7 +338,7 @@ describe.each( [
 		await type( 'p' );
 		await press.Enter();
 
-		expect( mockOnChange ).toHaveReturnedWith( 'poppy' );
+		expect( mockOnChange ).toHaveReturnedWith( 'flower1' );
 	} );
 
 	describe( 'Keyboard behavior and accessibility', () => {
@@ -457,4 +467,57 @@ describe.each( [
 			).toBeVisible();
 		} );
 	} );
+
+	// V1 styles items via a `style` or `className` metadata property in the option item object. Some consumers still expect it, e.g:
+	//
+	// - https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/font-appearance-control/index.js#L216
+	//
+	// Returning these properties as part of the item object was not tested as part of the V1 test. Possibly this was an accidental API?
+	// or was it intentional? If intentional, we might need to implement something similar in V2, too? The alternative is to rely on the
+	// `key` attriute for the item and get the actual data from some dictionary in a store somewhere, which would require refactoring
+	// consumers that rely on the self-contained `style` and `className` attributes.
+	it( 'Should return style metadata as part of the selected option from onChange', async () => {
+		const mockOnChange = jest.fn();
+
+		render( <Component { ...legacyProps } onChange={ mockOnChange } /> );
+
+		await click(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		);
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'aquarela',
+			} )
+		);
+
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				selectedItem: expect.objectContaining( {
+					className,
+					style,
+				} ),
+			} )
+		);
+	} );
+
+	it( 'Should display the initial value passed as the selected value', async () => {
+		const initialSelectedItem = legacyProps.options[ 5 ];
+
+		const testProps = {
+			...legacyProps,
+			value: initialSelectedItem,
+		};
+
+		render( <Component { ...testProps } /> );
+
+		const currentSelectedItem = await screen.findByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		// Verify the initial selected value
+		expect( currentSelectedItem ).toHaveTextContent( 'aquarela' );
+	} );
 } );

packages/components/src/index.ts

@@ -64,6 +64,7 @@ export {
 } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
+export { default as CustomSelectControlV2 } from './custom-select-control-v2';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as __experimentalDimensionControl } from './dimension-control';