import { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes, KeyboardEventHandler, MutableRefObject, ReactNode, RefCallback } from 'react'; import { InfoIcon, Label, MessageWithIcon, RequiredIndicator, Unit } from './components'; export type TextInputChangeReason = 'clear' | 'change'; export type TextInputNextProps = { label?: ReactNode; value?: string | number; size?: 'small' | 'medium' | 'large'; labelPlacement?: 'top' | 'start' | 'end'; /** * Change handler. `TextInputChangeReason` utility type is provided * @param value * @param changeReason * @param event is not present when input is cleared via clear button */ onChange?: (value: string, changeReason: TextInputChangeReason, event?: ChangeEvent) => void; disabled?: boolean; /** * Underlying `input`'s element `type` attribute */ inputType?: 'text' | 'email' | 'password' | 'number' | 'phone' | 'url' | 'search'; /** * Input mode that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */ inputMode?: HTMLAttributes['inputMode']; status?: 'error' | 'loading'; message?: ReactNode; onFocus?: FocusEventHandler; onBlur?: FocusEventHandler; onKeyDown?: KeyboardEventHandler; onKeyUp?: KeyboardEventHandler; clearable?: boolean; /** * Controls if the field should keep/gain focus after "Clear" button is clicked */ focusOnClear?: boolean; placeholder?: string; prefix?: ReactNode; suffix?: ReactNode; /** * Ref to an underlying `input` element */ inputRef?: RefCallback | MutableRefObject | null; /** * Ref to input container that contains `input` and its affixes * Useful for positioning of popovers */ inputContainerRef?: RefCallback | MutableRefObject | null; readOnly?: boolean; /** * If `true` will focus on the field on render. Useful for modals, but may be detrimental to a11y */ autoFocus?: boolean; /** * Escape hatch to provide arbitrary html attributes to `input` */ htmlAttributes?: Omit>, 'type' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'readOnly' | 'disabled' | 'value' | 'onChange' | 'inputMode' | 'autoFocus'>; /** * An escape hatch to tweak styling of internal elements */ elementsClassNames?: Partial<{ label: string; input: string; inputContainer: string; prefix: string; suffix: string; message: string; numberStepButtons: string; }>; className?: string; testId?: string; }; declare const TextInputBase: import("react").ForwardRefExoticComponent>; type TextInputNextType = typeof TextInputBase & { InfoIcon: typeof InfoIcon; MessageWithIcon: typeof MessageWithIcon; RequiredIndicator: typeof RequiredIndicator; Unit: typeof Unit; Label: typeof Label; }; export declare const TextInputNext: TextInputNextType; export {}; //# sourceMappingURL=TextInputNext.d.ts.map