@kadconsulting/dry/dist/src/components/TextInput/TextInputTypes.d.ts

KAD Reusable Component Library

import type { ReactNode, RefObject, HTMLAttributes, LabelHTMLAttributes } from 'react';
import type { Props as MaskProps } from 'react-input-mask';
export interface TextInputProps extends React.HTMLAttributes<HTMLInputElement> {
    /** Props passed to the TextInput's outermost container (contains label, input, helper text and/or error text) */
    ContainerProps?: HTMLAttributes<HTMLDivElement>;
    max?: number;
    min?: number;
    step?: number;
    placeholder?: string;
    required?: boolean;
    pattern?: string;
    maxLength?: number;
    minLength?: number;
    autoComplete?: string;
    autoFocus?: boolean;
    /** Default sm; md is 4px larger in both directions */
    size?: 'sm' | 'md';
    /** Default is 'text' */
    inputType?: 'text' | 'email' | 'password' | 'number' | 'date' | 'select' | 'tel' | 'url' | 'time' | 'datetime-local' | 'month' | 'week' | 'search' | 'color' | 'file' | 'hidden' | 'image' | 'range' | 'reset' | 'submit' | 'button' | 'checkbox' | 'radio' | 'datetime';
    /** A string is the most likely type here, but supports a ReactNode, so that icons or multiple elements can be passed */
    Label?: ReactNode;
    /** Props passed to the label element (the <label /> container of any elements passed) */
    LabelProps?: LabelHTMLAttributes<HTMLLabelElement>;
    /** Optional ref to pass to input label */
    labelRef?: RefObject<HTMLLabelElement>;
    /** An optional adornment to display to the left of the input; adds calculated padding to the input so that entered text is not occluded */
    InputAdornmentLeft?: ReactNode;
    /** Props passed to the input adornment's container */
    InputAdornmentLeftProps?: HTMLAttributes<HTMLDivElement>;
    /** Optional ref to pass to left input adornment */
    inputAdornmentLeftRef?: RefObject<HTMLLabelElement>;
    /** An optional adornment to display to the left of the input; adds calculated padding to the input so that entered text is not occluded */
    InputAdornmentRight?: ReactNode;
    /** Props passed to the input adornment's container */
    InputAdornmentRightProps?: HTMLAttributes<HTMLDivElement>;
    /** Optional ref to pass to right input adornment */
    inputAdornmentRightRef?: RefObject<HTMLLabelElement>;
    /** Props to pass to ReactInputMaskProps; if passed, these special props (and all others) are passed to react-input-mask instead of an input. */
    maskProps?: MaskProps;
    /** A string is the most likely type here, but supports a ReactNode, so that icons, anchors, or multiple elements can be passed */
    HintText?: ReactNode;
    /** Props passed to the input adornment's container */
    HintTextProps?: HTMLAttributes<HTMLDivElement>;
    /** Optional ref to pass to error container */
    HintTextRef?: RefObject<HTMLDivElement>;
    /** A truthy value displays the error message below the input; if helper text is also passed, error message takes precedence. A string is the most likely type here, but supports a ReactNode, so that icons, anchors for information to solve the error, or multiple elements can be passed */
    ErrorText?: ReactNode;
    /** Props passed to the input adornment's container */
    ErrorTextProps?: HTMLAttributes<HTMLDivElement>;
    /** Optional ref to pass to error container */
    errorTextRef?: RefObject<HTMLDivElement>;
    disabled?: boolean;
    /** Support @testing-library/react `screen.getByTestId` */
    'data-testid'?: string;
    width?: string;
    value?: string;
    labelColor?: string;
    inputTextColor?: string;
    inputBackgroundColor?: string;
}