@hypothesis/frontend-shared/lib/components/TextInput.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/TextInput.js";
import classnames from 'classnames';
/**
 * @typedef {import('preact').ComponentChildren} Children
 *
 * @typedef TextInputBaseProps
 * @prop {string} [classes] - Additional CSS classes to apply
 * @prop {import('preact').Ref<HTMLInputElement>} [inputRef] - Optional ref for
 *   the rendered `input` element.
 * @prop {boolean} [hasError] - There is an error associated with this input. Will
 *   set some error styling.
 * @prop {'email'|'search'|'text'|'url'} [type="text"] - Set the <input> type:
 *   restricted to the "text-like" type values.
 */

/**
 * @typedef {TextInputBaseProps & import('preact').JSX.HTMLAttributes<HTMLInputElement>} TextInputProps
 */

/**
 * @typedef TextInputWithButtonProps
 * @prop {Children} children
 * @prop {string} [classes] - Additional CSS classes to apply
 */

/**
 * Wrap a textual `<input>` element with some styles and provide error UI
 *
 * @param {TextInputProps} props
 */

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export function TextInput({
  classes = '',
  inputRef,
  hasError = false,
  type = 'text',
  ...restProps
}) {
  return _jsxDEV("input", {
    className: classnames('Hyp-TextInput', {
      'has-error': hasError
    }, classes),
    ...restProps,
    ref: inputRef,
    type: type
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 39,
    columnNumber: 5
  }, this);
}
/**
 * A wrapping component for pairing a `TextInput` with an `IconButton` component.
 * Applies appropriate design pattern. Expected usage:
 *
 * <TextInputWithButton>
 *   <TextInput />
 *   <IconButton />
 * </TextInputWithButton>
 *
 * Current implementation assumes the input is on the left and button on right.
 *
 * @param {TextInputWithButtonProps} props
 */

export function TextInputWithButton({
  children,
  classes = ''
}) {
  return _jsxDEV("div", {
    className: classnames('Hyp-TextInputWithButton', classes),
    children: children
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 67,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=TextInput.js.map