@wordpress/components/build-module/text-control/index.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * 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 createElement(BaseControl, {
    label: label,
    hideLabelFromVision: hideLabelFromVision,
    id: id,
    help: help,
    className: className
  }, createElement("input", _extends({
    className: "components-text-control__input",
    type: type,
    id: id,
    value: value,
    onChange: onChangeValue,
    "aria-describedby": !!help ? id + '__help' : undefined,
    ref: ref
  }, props)));
}

export default forwardRef(TextControl);
//# sourceMappingURL=index.js.map