Add component support for suggestion for FormTokenField

[dinhtungdu]

What problem does this address?

In the <FormTokenField> component, the return type of displayTransform is expected to be a string. But in fact, we can return a component to display complex suggestions lists like the screenshot below.

When returning a component for displayTransform, we have an issue with the <Token> component:

gutenberg/packages/components/src/form-token-field/token.tsx

Lines 47 to 54 in 59fb859

	const transformedValue = displayTransform( value );
	const termPositionAndCount = sprintf(
	/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
	__( '%1$s (%2$s of %3$s)' ),
	transformedValue,
	termPosition,
	termsCount
	);

The transformed value (which is a component) is printed as a string, resulting in the value of termPositionAndCount becomes [bbject Object] (1 of 1) (see screenshot).

What is your proposed solution?

We should add a new prop suggestionDisplayTransform or listDisplayTransform with the default value to the displayTransform value. The new prop is used for the suggestions list only and the return type can be string or component.

Additional information

This issue is raised when we try to migrate from a custom dropdown component to <FormTokenField> in woocommerce/woocommerce-blocks#3762 and woocommerce/woocommerce-blocks#6647.

[mirka]

For what it's worth, we are starting to explore (#41466) a more composable API for this family of components, which should allow use cases like this.