@wordpress/components/src/text-control/index.js

UI components for WordPress.

/**
 * WordPress dependencies
 */
import { useInstanceId } from '@wordpress/compose';
import { forwardRef } from '@wordpress/element';

/**
 * Internal dependencies
 */
import BaseControl from '../base-control';

/**
 * @typedef OwnProps
 * @property {string} label Label for the control.
 * @property {boolean} [hideLabelFromVision] Whether to accessibly hide the label.
 * @property {string} value Value of the input.
 * @property {string} [help] Optional help text for the control.
 * @property {string} [className] Classname passed to BaseControl wrapper
 * @property {(value: string) => void} onChange Handle changes.
 * @property {string} [type='text'] Type of the input.
 */

/** @typedef {OwnProps & import('react').ComponentProps<'input'>} Props */

/**
 *
 * @param {Props} props Props
 * @param {import('react').Ref<HTMLInputElement>} [ref]
 */
function TextControl(
	{
		label,
		hideLabelFromVision,
		value,
		help,
		className,
		onChange,
		type = 'text',
		...props
	},
	ref
) {
	const instanceId = useInstanceId( TextControl );
	const id = `inspector-text-control-${ instanceId }`;
	const onChangeValue = (
		/** @type {import('react').ChangeEvent<HTMLInputElement>} */
		event
	) => onChange( event.target.value );

	return (
		<BaseControl
			label={ label }
			hideLabelFromVision={ hideLabelFromVision }
			id={ id }
			help={ help }
			className={ className }
		>
			<input
				className="components-text-control__input"
				type={ type }
				id={ id }
				value={ value }
				onChange={ onChangeValue }
				aria-describedby={ !! help ? id + '__help' : undefined }
				ref={ ref }
				{ ...props }
			/>
		</BaseControl>
	);
}

export default forwardRef( TextControl );