@syncfusion/react-inputs/src/common/inputbase.d.ts

Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form, designed to capture user input in React applications.

import { ChangeEvent, JSX, ReactNode, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, ReactElement, type MouseEvent } from 'react';
import { LabelMode, Variant, Size } from '@syncfusion/react-base';
import { HelperTextProps } from './helper-text';
export { LabelMode, Variant, Size };
/**
 * Constant object containing CSS class names used throughout the component.
 */
export declare const CLASS_NAMES: {
    RTL: string;
    DISABLE: string;
    READONLY: string;
    WRAPPER: string;
    INPUT: string;
    INPUTGROUP: string;
    FLOATINPUT: string;
    FLOATTEXT: string;
    CLEARICON: string;
    CLEARICONHIDE: string;
    LABELTOP: string;
    LABELBOTTOM: string;
    VALIDINPUT: string;
    TEXTBOX_FOCUS: string;
};
export interface IInput {
    placeholder: string;
    className: string;
    disabled?: boolean;
    readOnly?: boolean;
    floatLabelType?: LabelMode;
    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}
export interface validationProps {
    /**
     * Specifies whether the component is a required field in a form. When set to true,
     * the component will be marked as required.
     *
     * @default -
     */
    required?: boolean;
    /**
     * Specifies whether to override the validity state of the component. If valid is set, the required property will be ignored.
     *
     * @default -
     */
    valid?: boolean;
    /**
     * Specifies the form error message of the component.
     *
     * @default -
     */
    validationMessage?: string;
    /**
     * Specifies whether to apply visual representation of the invalid state of the component.
     * If set to false, no visual representation of the invalid state of the component will be applied.
     *
     * @default true
     */
    validityStyles?: boolean;
}
export interface inputBaseProps extends HelperTextProps {
    /**
     * Specifies the visual style variant of the component.
     *
     * @default Variant.Standard
     */
    variant?: Variant;
    /**
     * Specifies the size of the component. Options include 'Small', 'Medium' and 'Large'.
     *
     * @default Size.Medium
     */
    size?: Size;
    /**
     * Specifies the icon or element to display at the beginning of the input.
     *
     * @default -
     */
    prefix?: ReactNode;
    /**
     * Specifies the icon or element to display at the end of the input.
     *
     * @default -
     */
    suffix?: ReactNode;
}
/**
 * Interface for input arguments.
 */
export interface IInputArgs {
    floatLabelType?: LabelMode;
    placeholder?: string;
    width?: number | string;
    value?: string;
    defaultValue?: string;
    type?: string;
    role?: string;
    name?: string;
    tabIndex?: number;
    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
    onFocus?: any;
    onBlur?: any;
    onKeyDown?: any;
}
export type InputArgs = IInputArgs & Omit<InputHTMLAttributes<HTMLInputElement>, keyof IInputArgs>;
export declare const InputBase: ForwardRefExoticComponent<InputArgs & RefAttributes<HTMLInputElement>>;
/**
 * Renders the float label element.
 *
 * @param {LabelMode} floatLabelType - The type of float label.
 * @param {boolean} isFocused - Whether the input is focused.
 * @param {string} inputValue - The current input value.
 * @param {string} placeholder - The placeholder text.
 * @param {any} id - The reference to the input element.
 * @returns {ReactElement | null} A React element representing the float label, or null if not applicable.
 */
export declare const renderFloatLabelElement: (floatLabelType: LabelMode, isFocused: boolean, inputValue: string | number, placeholder: string | undefined, id: string) => ReactElement | null;
/**
 * Renders a adornment element inside the input.
 *
 * @param {ReactNode} adornment - The ReactNode to render as an input adornment.
 * @returns {JSX.Element | null} A span element wrapping the adornment, or null if adornment is null/undefined.
 */
export declare const renderAdornmentElement: (adornment: ReactNode) => JSX.Element | null;
/**
 * Renders a clear button for an input field that allows the user to clear the input.
 *
 * @param {string} inputValue - The current value of the input field.
 * @param {Function} clearInput - The function to call when the clear button is clicked.
 * @param {boolean|ReactNode} [clearIcon] - If true shows default icon, if false renders nothing, if ReactNode renders the provided node.
 * @param {string} [componentName] - The name of the component for localization.
 * @param {string} [locale] - The locale to use for localization.
 * @returns {JSX.Element|null} The clear button element or null if clearIcon is false.
 */
export declare const renderClearButton: (inputValue: string, clearInput: (event: MouseEvent) => void, clearIcon?: boolean | ReactNode, componentName?: string, locale?: string) => JSX.Element | null;