import { FormTokenField } from '@wordpress/components';
import { createFieldControl } from './createFieldControl';

/**
 * Token field: a tag-style text input. Value is an array of strings.
 * Schema field shape: label, placeholder, suggestions (array of strings for
 * autocomplete).
 *
 * @type {Function} Field-control component accepting `{ field }`.
 */
export const TokenField = createFieldControl( ( field, rhf ) => (
	<FormTokenField
		label={ field.label }
		value={ rhf.value ?? [] }
		suggestions={ field.suggestions }
		onChange={ rhf.onChange }
		disabled={ field.disabled }
		placeholder={ field.placeholder }
		__experimentalExpandOnFocus
		__next40pxDefaultSize
		__nextHasNoMarginBottom
	/>
) );