text.tsx

/**
 * WordPress dependencies
 */
import { TextControl } from '@wordpress/components';
import { useCallback } from '@wordpress/element';

/**
 * Internal dependencies
 */
import type { DataFormControlProps } from '../types';

export default function Text< Item >( {
	data,
	field,
	onChange,
	hideLabelFromVision,
	errorMessage,
}: DataFormControlProps< Item > ) {
	const { id, label, placeholder } = field;
	const value = field.getValue( { item: data } );

	const onChangeControl = useCallback(
		( newValue: string ) =>
			onChange( {
				[ id ]: newValue,
			} ),
		[ id, onChange ]
	);

	return (
		<>
			<TextControl
				label={ label }
				placeholder={ placeholder }
				value={ value ?? '' }
				onChange={ onChangeControl }
				__next40pxDefaultSize
				__nextHasNoMarginBottom
				hideLabelFromVision={ hideLabelFromVision }
			/>
			{ errorMessage && (
				<p className="dataform-control-error">{ errorMessage }</p>
			) }
		</>
	);
}