@hypothesis/frontend-shared/lib/components/TextInput.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * @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
 */
export function TextInput({ classes, inputRef, hasError, type, ...restProps }: TextInputProps): import("preact").JSX.Element;
/**
 * 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 }: TextInputWithButtonProps): import("preact").JSX.Element;
export type Children = import('preact').ComponentChildren;
export type TextInputBaseProps = {
    /**
     * - Additional CSS classes to apply
     */
    classes?: string | undefined;
    /**
     * - Optional ref for
     * the rendered `input` element.
     */
    inputRef?: import("preact").Ref<HTMLInputElement> | undefined;
    /**
     * - There is an error associated with this input. Will
     * set some error styling.
     */
    hasError?: boolean | undefined;
    /**
     * - Set the <input> type:
     * restricted to the "text-like" type values.
     */
    type?: "search" | "text" | "email" | "url" | undefined;
};
export type TextInputProps = TextInputBaseProps & import('preact').JSX.HTMLAttributes<HTMLInputElement>;
export type TextInputWithButtonProps = {
    children: Children;
    /**
     * - Additional CSS classes to apply
     */
    classes?: string | undefined;
};