@abgov/react-components/lib/input/input.d.ts

Government of Alberta - UI components for React

import { JSX } from 'react';
import { GoabAutoCapitalize, GoabDate, GoabIconType, GoabInputOnBlurDetail, GoabInputOnChangeDetail, GoabInputOnFocusDetail, GoabInputOnKeyPressDetail, GoabInputType, Margins } from '@abgov/ui-components-common';
export interface IgnoreMe {
    ignore: string;
}
interface WCProps extends Margins {
    ref?: React.RefObject<HTMLInputElement | null>;
    type?: GoabInputType;
    name: string;
    value?: string;
    id?: string;
    autocapitalize?: GoabAutoCapitalize;
    autocomplete?: string;
    debounce?: number;
    placeholder?: string;
    leadingicon?: string;
    trailingicon?: string;
    variant: string;
    disabled?: string;
    error?: string;
    readonly?: string;
    focused?: string;
    handletrailingiconclick: string;
    width?: string;
    prefix?: string;
    suffix?: string;
    arialabel?: string;
    testid?: string;
    textalign?: string;
    min?: string | number;
    max?: string | number;
    step?: number;
    maxlength?: number;
    trailingiconarialabel?: string;
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            "goa-input": WCProps & React.HTMLAttributes<HTMLInputElement>;
        }
    }
}
interface BaseProps extends Margins {
    name: string;
    id?: string;
    debounce?: number;
    disabled?: boolean;
    autoCapitalize?: GoabAutoCapitalize;
    autoComplete?: string;
    placeholder?: string;
    leadingIcon?: GoabIconType;
    trailingIcon?: GoabIconType;
    onTrailingIconClick?: () => void;
    variant?: "goa" | "bare";
    focused?: boolean;
    readonly?: boolean;
    error?: boolean;
    width?: string;
    prefix?: string;
    suffix?: string;
    testId?: string;
    ariaLabel?: string;
    leadingContent?: React.ReactNode;
    trailingContent?: React.ReactNode;
    maxLength?: number;
    trailingIconAriaLabel?: string;
    textAlign?: "left" | "right";
}
type OnChange<T = string> = (detail: GoabInputOnChangeDetail<T>) => void;
type OnFocus<T = string> = (detail: GoabInputOnFocusDetail<T>) => void;
type OnBlur<T = string> = (detail: GoabInputOnBlurDetail<T>) => void;
type OnKeyPress<T = string> = (detail: GoabInputOnKeyPressDetail<T>) => void;
export interface GoabInputProps extends BaseProps {
    onChange?: OnChange<string>;
    value?: string;
    min?: number | string;
    max?: number | string;
    step?: number;
    onFocus?: OnFocus<string>;
    onBlur?: OnBlur<string>;
    onKeyPress?: OnKeyPress<string>;
}
interface GoabNumberInputProps extends BaseProps {
    onChange?: OnChange<number>;
    value?: number;
    min?: number;
    max?: number;
    step?: number;
    onFocus?: OnFocus<number>;
    onBlur?: OnBlur<number>;
    onKeyPress?: OnKeyPress<number>;
}
interface GoabDateInputProps extends BaseProps {
    onChange?: OnChange<GoabDate>;
    value?: GoabDate;
    min?: GoabDate;
    max?: GoabDate;
    step?: number;
    onFocus?: OnFocus<GoabDate>;
    onBlur?: OnBlur<GoabDate>;
    onKeyPress?: OnKeyPress<GoabDate>;
}
export declare function GoabInput({ id, debounce, name, type, autoCapitalize, autoComplete, leadingIcon, trailingIcon, variant, focused, disabled, readonly, value, placeholder, error, width, testId, min, max, step, prefix, suffix, ariaLabel, mt, mr, mb, ml, leadingContent, trailingContent, maxLength, trailingIconAriaLabel, textAlign, onTrailingIconClick, onChange, onFocus, onBlur, onKeyPress, }: GoabInputProps & {
    type?: GoabInputType;
}): JSX.Element;
export declare function GoabInputText(props: GoabInputProps): JSX.Element;
export declare function GoabInputPassword(props: GoabInputProps): JSX.Element;
export declare function GoabInputDate({ value, min, max, ...props }: GoabDateInputProps): JSX.Element;
export declare function GoabInputTime({ value, min, max, ...props }: GoabInputProps): JSX.Element;
export declare function GoabInputDateTime({ value, min, max, ...props }: GoabDateInputProps): JSX.Element;
export declare function GoabInputEmail(props: GoabInputProps): JSX.Element;
export declare function GoabInputSearch(props: GoabInputProps): JSX.Element;
export declare function GoabInputUrl(props: GoabInputProps): JSX.Element;
export declare function GoabInputTel(props: GoabInputProps): JSX.Element;
export declare function GoabInputFile(props: GoabInputProps): JSX.Element;
export declare function GoabInputMonth(props: GoabInputProps): JSX.Element;
export declare function GoabInputNumber({ min, max, value, textAlign, ...props }: GoabNumberInputProps): JSX.Element;
export declare function GoabInputRange(props: GoabInputProps): JSX.Element;
export default GoabInput;