mui-tel-input/dist/index.d.ts

A phone number input designed for the React library MUI built with libphonenumber-js

import { AsYouType } from 'libphonenumber-js';
import { CountryCode } from 'libphonenumber-js';
import { getNumberType } from 'libphonenumber-js';
import { IconButtonProps } from '@mui/material/IconButton';
import { JSX } from 'react/jsx-runtime';
import { MenuProps } from '@mui/material/Menu';
import { NumberType } from 'libphonenumber-js';
import { TextFieldProps } from '@mui/material/TextField';

export { AsYouType }

declare type BaseTextFieldProps = Omit<TextFieldProps, 'onChange' | 'select' | 'type' | 'multiline' | 'defaultValue' | 'inputProps' | 'InputProps'>;

export declare const classes: {
    readonly textField: "MuiTelInput-TextField";
    readonly flagContainer: "MuiTelInput-Flag";
    readonly flagImg: "MuiTelInput-FlagImg";
    readonly flagButton: "MuiTelInput-IconButton";
    readonly menu: "MuiTelInput-Menu";
    readonly menuItem: "MuiTelInput-MenuItem";
    readonly listItemIconFlag: "MuiTelInput-ListItemIcon-flag";
    readonly listItemTextCountry: "MuiTelInput-ListItemText-country";
    readonly callingCode: "MuiTelInput-Typography-calling-code";
};

declare type ForceCallingCodeWithDefaultCountry = {
    forceCallingCode: true;
    defaultCountry: MuiTelInputCountry;
} | {
    forceCallingCode?: false | undefined;
    defaultCountry?: MuiTelInputCountry;
};

declare type GetFlagElement = (isoCode: MuiTelInputCountry, { countryName, isSelected, imgProps }: {
    countryName: string;
    isSelected: boolean;
    imgProps: React.ComponentPropsWithRef<'img'>;
}) => MuiTelInputFlagElement;

export { getNumberType }

declare const ISO_CODES: CountryCode[];

export declare function matchIsValidTel(text: string, options?: {
    excludedCountries?: MuiTelInputCountry[];
    onlyCountries?: MuiTelInputCountry[];
    continents?: MuiTelInputContinent_2[];
}): boolean;

export declare const MuiTelInput: (props: MuiTelInputProps) => JSX.Element;

export declare type MuiTelInputContinent = 'EU' | 'AS' | 'NA' | 'SA' | 'OC' | 'AF';

declare type MuiTelInputContinent_2 = 'EU' | 'AS' | 'NA' | 'SA' | 'OC' | 'AF'

export declare type MuiTelInputCountry = (typeof ISO_CODES)[number];

export declare type MuiTelInputFlagElement = React.ReactNode;

export declare interface MuiTelInputInfo {
    countryCode: MuiTelInputCountry | null;
    countryCallingCode: string | null;
    nationalNumber: string | null;
    numberType: Exclude<NumberType, undefined> | null;
    numberValue: string | null;
    reason: MuiTelInputReason;
}

export declare type MuiTelInputProps = BaseTextFieldProps & ForceCallingCodeWithDefaultCountry & {
    excludedCountries?: MuiTelInputCountry[];
    onlyCountries?: MuiTelInputCountry[];
    preferredCountries?: MuiTelInputCountry[];
    focusOnSelectCountry?: boolean;
    disableDropdown?: boolean;
    langOfCountryName?: string;
    disableFormatting?: boolean;
    continents?: MuiTelInputContinent[];
    onChange?: (value: string, info: MuiTelInputInfo) => void;
    onBlur?: (event: React.FocusEvent<HTMLInputElement>, info: MuiTelInputInfo) => void;
    value?: string | undefined;
    MenuProps?: Partial<MenuProps>;
    getFlagElement?: GetFlagElement;
    unknownFlagElement?: MuiTelInputFlagElement;
    FlagIconButtonProps?: Partial<IconButtonProps>;
};

export declare type MuiTelInputReason = 'country' | 'input' | 'blur';

export declare const textFieldClass = "MuiTelInput-TextField";

export { }