@nish1896/rhf-mui-components/misc/phone-input/index.d.ts

A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms

/**
 * Code Reference -
 * https://react-international-phone.vercel.app/docs/Advanced%20Usage/useWithUiLibs
 */
import { type ReactNode } from 'react';
import { type FieldValues, type Path, type Control, type RegisterOptions } from 'react-hook-form';
import { type TextFieldProps } from '@mui/material/TextField';
import { type ParsedCountry, type UsePhoneInputConfig } from 'react-international-phone';
import type { FormLabelProps, FormHelperTextProps } from '../../types';
import 'react-international-phone/style.css';
type PhoneInputChangeReturnValue = {
    phone: string;
    inputValue: string;
    country: ParsedCountry;
};
type InputTextFieldProps = Omit<TextFieldProps, 'name' | 'required' | 'value' | 'defaultValue' | 'onChange' | 'error' | 'InputProps' | 'inputRef' | 'type' | 'FormHelperTextProps'>;
type PhoneInputProps = Omit<UsePhoneInputConfig, 'value' | 'onChange'> & {
    hideDropdown?: boolean;
};
export type RHFPhoneInputProps<T extends FieldValues> = {
    fieldName: Path<T>;
    control: Control<T>;
    registerOptions?: RegisterOptions<T, Path<T>>;
    required?: boolean;
    value?: string;
    onValueChange?: (phoneData: PhoneInputChangeReturnValue) => void;
    showLabelAboveFormField?: boolean;
    formLabelProps?: FormLabelProps;
    errorMessage?: ReactNode;
    hideErrorMessage?: boolean;
    formHelperTextProps?: FormHelperTextProps;
    phoneInputProps?: PhoneInputProps;
} & InputTextFieldProps;
declare const RHFPhoneInput: <T extends FieldValues>({ fieldName, control, registerOptions, required, value, onValueChange, label, showLabelAboveFormField, formLabelProps, helperText, errorMessage, hideErrorMessage, formHelperTextProps, disabled, phoneInputProps, slotProps, ...rest }: RHFPhoneInputProps<T>) => import("react/jsx-runtime").JSX.Element;
export default RHFPhoneInput;