mui-country-code-selector

import { AutocompleteChangeDetails } from '@mui/material'; import { AutocompleteChangeReason } from '@mui/material'; import { AutocompleteProps } from '@mui/material'; import { AutocompleteRenderInputParams } from '@mui/material'; import { Breakpoint } from '@mui/material'; import { FilterOptionsState } from '@mui/material'; import { FormGroupProps } from '@mui/material'; import { FormHelperTextProps } from '@mui/material'; import { GridLegacyProps } from '@mui/material'; import { GridProps } from '@mui/material'; import { GridSize } from '@mui/material'; import { JSX } from 'react/jsx-runtime'; import { MutableRefObject } from 'react'; import { Property } from 'csstype'; import { ReactNode } from 'react'; import { RefCallback } from 'react'; import { RefObject } from 'react'; import { StackProps } from '@mui/material'; import { TextFieldProps } from '@mui/material'; import { TextFieldVariants } from '@mui/material'; /** * Represents the props of the `CountryCodeSelectorComposite` components. * @alpha */ export declare interface CCSelectorCompositeProps { /** * The global HTML `id` attribute passed to the input subcomponent of the * composite component. Defines an identifier which must be unique in the * whole document. See * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id} * for more information. */ id?: string; /** * An HTML `name` attribute passed to the input subcomponent of the composite * component. Name attribute is a string specifying a name for the input. * This name is submitted along with the control's value when the form data * is submitted. See * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name} * for more information. */ name?: string; /** * Variable holding the value of the phone number input field. Provide this * when you wish to use the component as a controlled component. */ value?: string; /** * Phone number input's change event handler. Sets the `value` prop. * Provide this when you wish to use the component as a controlled * component. */ onChange?: (e: { target: { value: string; }; }) => void; /** Label for the country code selector input element. */ countryCodeLabel?: string; /** Label for the phone number input element. */ phoneNumberLabel?: string; /** Defines how long the error message is displayed in seconds. */ errorMessageDelay?: number; /** * Determines how the error message is displayed. When set to `both`, error * is displayed both as an error status of the component and by displaying an * error message. When set to `none` neither is displayed. Prop can also be * set as `message` or `status` in which case the corresponding method is * used to indicate the error. */ errorMessageDisplay?: 'none' | 'message' | 'status' | 'both'; /** * Passes a custom function for handling errors. The function receives the * error message as a parameter. */ onError?: (error: string) => void; /** * A React ref that will be set to point to the phone number input element. * Provide this to access the component's value when using the component as * an uncontrolled component. */ inputRef?: RefObject<HTMLInputElement | null> | RefCallback<HTMLInputElement | null>; /** * A default phone number value. Provide this if you wish to set the default * value when using the component as an uncontrolled component. */ defaultValue?: string; /** * Defines what kind of layout components the subcomponents of the composite * component are wrapped in. Accepts the following values: `gridLegacy`, * `gridLegacyItems`, `grid`, `gridItems`, `stack`, and `group`. Option * `gridLegacy` wraps the components into MUI GridLegacy item components and * creates a GridLegacy container around them. Option `gridLegacyItems` just * wraps the components into GridLegacy items and leaves the container out. * Options `grid` and `gridItems` do the same with MUI Grid components. * Option `stack` wraps the components in a MUI Stack component, and with the * `group` option the components are wrapped in a MUI FormGroup component. */ layout?: LayoutProp; /** * Props passed to the MUI FormGroup component if the `group` layout wrapper * is used. See {@link https://mui.com/material-ui/api/form-group/} for more * information about what props can be passed to the component. */ formGroupProps?: Partial<FormGroupProps>; /** * Props passed to the MUI GridLegacy container component if the `gridLegacy` * layout wrapper is used. See * {@link https://mui.com/material-ui/api/grid-legacy/} for more information * about what props can be passed to the component. */ gridLegacyContainerProps?: GridLegacyContainerProps; /** * Props passed to the MUI GridLegacy item components if the `gridLegacy` * or `gridLegacyItems` layout wrapper is used. Is overwritten by * `gridLegacySelectorProps` and `gridLegacyInputProps`. See * {@link https://mui.com/material-ui/api/grid-legacy/} for more information * about what props can be passed to the component. */ gridLegacyItemProps?: GridLegacyItemProps; /** * Props passed to the MUI GridLegacy item component that the selector * component is wrapped in, if the `gridLegacy` or `gridLegacyItems` layout * wrapper is used. Overwrites the `gridLegacyItemProps`. See * {@link https://mui.com/material-ui/api/grid-legacy/} for more information * about what props can be passed to the component. */ gridLegacySelectorProps?: GridLegacyItemProps; /** * Props passed to the MUI GridLegacy item component that the phone number * input component is wrapped in, if the `gridLegacy`or `gridLegacyItems` * layout wrapper is used. Overwrites the `gridLegacyItemProps`. See * {@link https://mui.com/material-ui/api/grid-legacy/} for more information * about what props can be passed to the component. */ gridLegacyInputProps?: GridLegacyItemProps; /** * Props passed to the MUI GridLegacy item component that the error message * component is wrapped in, if the `gridLegacy`or `gridLegacyItems` layout * wrapper is used. Overwrites the `gridLegacyItemProps`. See * {@link https://mui.com/material-ui/api/grid-legacy/} for more information * about what props can be passed to the component. */ gridLegacyErrorProps?: GridLegacyItemProps; /** * Props passed to the MUI Grid container component if the `grid` layout * wrapper is used. See {@link https://mui.com/material-ui/api/grid/} * for more information about what props can be passed to the component. */ gridContainerProps?: GridContainerProps; /** * Props passed to the MUI Grid item components if the `grid` or `gridItems` * layout wrapper is used. Is overwritten by `gridSelectorProps` and * `gridInputProps`. See * {@link https://mui.com/material-ui/api/grid/} for more information * about what props can be passed to the component. */ gridItemProps?: GridItemProps; /** * Props passed to the MUI Grid item component that the selector component * is wrapped in, if `grid` layout wrapper is used. Overwrites the * `gridItemProps`. See {@link https://mui.com/material-ui/api/grid/} for * more information about what props can be passed to the component. */ gridSelectorProps?: GridItemProps; /** * Props passed to the MUI Grid item component that the phone number input * component is wrapped in, if the `grid` or `gridItems` layout wrapper is * used. Overwrites the `grid2ItemProps`. See * {@link https://mui.com/material-ui/api/grid/} for more information about * what props can be passed to the component. */ gridInputProps?: GridItemProps; /** * Props passed to the MUI Grid item component that the error message * component is wrapped in, if the `grid` or `gridItems` layout wrapper is * used. Overwrites the `grid2ItemProps`. See * {@link https://mui.com/material-ui/api/grid/} for more information about * what props can be passed to the component. */ gridErrorProps?: GridItemProps; /** * Props passed to the MUI Stack component if the `stack` layout wrapper is * used. See {@link https://mui.com/material-ui/api/stack/} for more * information about what props can be passed to the component. */ stackProps?: Partial<StackProps>; /** * Sets the breakpoint size props of the selector components grid item, when * `gridLegacy` or `grid` layout is used. The Grid component accepts an object * with keys for MUI's responsive breakpoints (`xs`, `sm`, `md`, `lg`, and * `xl`), and the values can be either a number, string "auto", or a boolean. * For the Grid component the object must be added to the props using key * `size`. If the value for a breakpoint is `false` the prop is ignored. * * See {@link https://mui.com/material-ui/api/grid/} for more * information about MUI Grid props, * {@link https://mui.com/material-ui/api/grid-legacy/} for more information * about MUI GridLegacy props, and * {@link https://mui.com/material-ui/customization/breakpoints/} for more * information about MUI's responsive breakpoints. */ selectorSize?: ComponentSize | ComponentSizeGridLegacy; /** * Sets the breakpoint size props of the phone number input components grid * item, when the `gridLegacy` or `grid` layout is used. The Grid component * accepts an object with keys for MUI's responsive breakpoints (`xs`, `sm`, * `md`, `lg`, and `xl`), and the values can be either a number, string * "auto", or a boolean. For the Grid component the object must be added to * the props using key `size`. If the value for a breakpoint is `false` the * prop is ignored. * * See {@link https://mui.com/material-ui/api/grid/} for more * information about MUI Grid props, * {@link https://mui.com/material-ui/api/grid-legacy/} for more information * about MUI GridLegacy props, and * {@link https://mui.com/material-ui/customization/breakpoints/} for more * information about MUI's responsive breakpoints. */ inputSize?: ComponentSize | ComponentSizeGridLegacy; /** * Sets the breakpoint size props of the error message components grid item, * when the `gridLegacy` or `grid` layout is used. The Grid component accepts * an object with keys for MUI's responsive breakpoints (`xs`, `sm`, `md`, * `lg`, and `xl`), and the values can be either a number, string "auto", or * a boolean. For the Grid component the object must be added to the props * using key `size`. If the value for a breakpoint is `false` the prop is * ignored. * * See {@link https://mui.com/material-ui/api/grid/} for more * information about MUI Grid props, * {@link https://mui.com/material-ui/api/grid-legacy/} for more * information about MUI GridLegacy props, and * {@link https://mui.com/material-ui/customization/breakpoints/} for more * information about MUI's responsive breakpoints. */ errorSize?: ComponentSize | ComponentSizeGridLegacy; /** * Custom options for setting how the select options are filtered based on * the input. See * {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-filterOptions} * and {@link https://mui.com/material-ui/react-autocomplete/#custom-filter} * for more information about custom filtering. */ filterOptions?: (options: CountryType[], state: FilterOptionsState<CountryType>) => CountryType[]; /** * A boolean value that specifies whether or not to shrink the selector and * phone number input components' labels. See * {@link https://mui.com/material-ui/react-text-field/#shrink} for more * information. */ shrink?: boolean; /** * Defines which variant of the MUI TextField is used in the country code * selector and phone number input components. See * {@link https://mui.com/material-ui/react-text-field/#basic-textfield} * about the TextField variants. */ variant?: TextFieldVariants; /** * Props applied to the underlying CountryCodeSelector element. See * {@link https://mui.com/material-ui/api/autocomplete/} for more information * about MUI's Autocomplete's API. */ selectorProps?: Partial<CCSelectorProps> | Record<string, never>; /** * Props applied to the underlying TextField component (the phone number * input). See * {@link https://mui.com/material-ui/api/text-field/} for more information * about the MUI's TextField's API. */ inputProps?: Partial<Omit<TextFieldProps, 'onChange' | 'select' | 'SelectProps' | 'value'>> | Record<string, never>; /** * Props applied to the FormHelperText component of the composite country code * selector component (a possible error message). See * {@link https://mui.com/material-ui/api/form-helper-text/} for more * information about the MUI's FormHelperText's API. */ errorProps?: Partial<FormHelperTextProps> | Record<string, never>; /** * Passes a numeric React ref object to the selector component, which is then * increased by one every time the component is rendered. */ selectorRenderCountRef?: RefObject<number>; /** * Passes a numeric React ref object to the phone number input component, * which is then increased by one every time the component is rendered. */ inputRenderCountRef?: RefObject<number>; } /** * Represents the props of the `CountryCodeSelector` components. * @alpha */ export declare interface CCSelectorProps extends Omit<AutocompleteProps<CountryType, false, boolean, false>, 'getOptionLabel' | 'onChange' | 'options' | 'renderInput' | 'value'> { /** * A function for rendering the selected option on underlying AutoComplete * component. See * {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-getOptionLabel} * for more information about MUI's Autocomplete's `getOptionLabel` prop. */ getOptionLabel?: ((option: CountryType) => string) | undefined; /** * Sets the `label` string on underlying MUI AutoComplete component's * TextField component. */ label?: string; /** * A function for rendering the input element, that is passed to the * underlying MUI Autocomplete component. See * {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-renderInput} * for more information about MUI's Autocomplete's `renderInput` prop. * @returns The input element. */ renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode; /** * A boolean value that specifies whether or not to shrink the selector and * phone number input components' labels. See * {@link https://mui.com/material-ui/react-text-field/#shrink} for more * information. */ shrink?: boolean; /** * Defines which variant of the Autocomplete's TextField component is used. See * {@link https://mui.com/material-ui/react-text-field/#basic-textfield} * about the TextField's variants. */ variant?: TextFieldVariants; /** * Passes a numeric React ref object to the selector component, which is then * increased by one every time the component is rendered. */ renderCountRef?: MutableRefObject<number>; } /** * Props for the version of the CountryCodeSelector that uses React's * `useState` for the state. * @internal */ export declare interface CCSelectorPropsReact extends CCSelectorProps { /** * Value of the country code selector element. Provide this when you wish to * use the component as a controlled component. */ value: CountryType | null | undefined; /** * CountryCodeSelector's onChange event handler. Sets the component's value. * Provide this when you wish to use the component as a controlled * component. */ onChange: (_e: unknown, value: CountryType | null, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<CountryType> | undefined) => void; /** The calling codes and names of the countries of the world. */ countries: readonly CountryType[]; } /** * Represents a common state between the autocomplete component for selecting * the country code and the phone number input component, which together form * a complete phone number input component. * @alpha */ export declare interface CCSelectorState { /** * The whole phone number including the country code as a string. This is * the value of the phone number input element. */ phoneNumStr: string; /** An index indicating where the local part of the phone number starts. */ phoneNumSplit: number; /** * The digits of the phone number that are significant in terms of the * country code. Contains only the digits without visual separator * characters or the plus sign. */ significantDigits: string; /** The digits of the detected country code. */ countryCodeDigits: string; /** The `CountryType` object corresponding to the selected country code. */ countryCodeValue: CountryType | null; /** The calling codes and names of the countries of the world. */ countries: readonly CountryType[]; /** Data on country codes that are possible based on the `phoneNumStr`. */ possibleCountries: PossibleCountries | null; /** Error message to be shown to the user. */ errorMsg: string | null; /** Time of the message delay in seconds. */ errorMsgDelay: number; /** `Timeout` object for timing how long the error message is displayed. */ errorMsgTimeoutObj: NodeJS.Timeout | null; /** The phone number input DOM element. */ phoneNumberInput: HTMLInputElement | undefined | null; /** A form DOM element that is parent of the phone number input component. */ formElement: HTMLElement | undefined | null; /** * A default phone number value. Used when the component is used as an * uncontrolled component. */ defaultValue: string; /** * The start and end indices of the selected text within the phone number * input. * * React keeps track of the cursor position and selection of the controlled * input elements. In some situations, however, React doesn't know where to * place the cursor. For example, when an input does not get accepted by the * onChange handler and the value is not changed, React places the cursor at * the end of the value string. Only remedy to this seems to be to keep track * of the cursor position internally, within the application. */ inputSelection: InputSelection; /** * The state variable `clearedRerender` is used for triggering a rerender of * the component after the phone number input has been cleared and the * component has lost focus. The rerender is needed for getting the MUI * TextField's label to enlarge back to it's initial state. It is important * that the value is subscribed to in the `useCountryCodeStore` for it to be * able to trigger the rerender. The value is toggled by the blur handler * when the input has been cleared and the element loses the focus. */ clearedRerender: boolean; /** * An external change handler function to which the current phone number * value is forwarded every time the value changes. */ changeHandler: ((event: { target: { value: string; }; }) => void) | undefined; /** * An external error handler function to which the error message is * forwarded. */ errorHandler: ((error: string) => void) | undefined; /** * Sets the `phoneNumberInput` value. Takes the phone number input DOM * element as parameter. */ setPhoneNumberInput: (inputElement: HTMLInputElement | undefined | null) => void; /** * Sets the error message delay (how long the message is shown). Takes the * delay in seconds as parameter. */ setErrorMsgDelay: (seconds: number) => void; /** * Sets a change handler function that is run with the current phone number * value every time the value changes. This is used e.g., in the composite * selector components (`CountryCodeSelectorCompositeZustand` and * `CountryCodeSelectorCompositeReact`) to update the value prop when the * component is used as a controlled component. */ setChangeHandler: (handler: ((event: { target: { value: string; }; }) => void) | undefined) => void; /** * Sets the `inputSelection` state variable. Takes an object containing the * start and end indices of the text selection within the phone number input * element as paramter. */ setInputSelection: (inputSelection: InputSelection) => void; /** Toggles the `clearedRerender` state variable */ toggleClearedRerender: () => void; /** * Sets references to the phone number input DOM element. Adds also some * event handlers and initializes the phone number input with the default * value when used as an uncontrolled component. * * Parameters: * * `element` - the phone number input DOM element, * * `inputRef` - a React MutableRef object (this can be used to access the * value of the component when used as an uncontrolled component), and * * `defaultValue` - the default * value for the phone number input when used as an uncontrolled component. */ setRefs: (element: HTMLInputElement | null, inputRef?: MutableRefObject<HTMLInputElement | null> | RefCallback<HTMLInputElement | null>, defaultValue?: string) => void; /** * Initializes the component and returns a cleanup function. This, or the * individual setter and cleanup functions, must be called in a `useEffect` * hook in the component body. Provides an easy way to take care of the * initialization and the cleanup. * * Parameters: * * `errorMsgDelay` - Time the error message is displayed in seconds. * * `errorHandler` - An external error handler function to which the error * message is forwarded to. * * `changeHandler` - An external change handler function to which the * current phone number value is forwared every time the value changes. * * @returns A cleanup function that removes the reset event handler from the * form element. */ initialize: (errorMsgDelay?: number, errorHandler?: ((error: string) => void) | undefined, changeHandler?: ((event: { target: { value: string; }; }) => void) | undefined) => () => void; /** * The cleanup function which is executed when the component unmounts. * Removes the reset event listener added to the form DOM element. Is * returned by the `initialize` function. */ cleanUp: () => void; /** * A handler function for the phone number input's change events. Takes * care of detecting the country code from the input and setting the * `countryCodeDigits` and the `countryCodeVal` based on that. * * Parameters: * * `event` - The change event object from the phone number input. */ handlePhoneNumberChange: (event: { target: { value: string; }; }) => void; /** * A handler function for the `CountryCodeSelector`'s change events. See * {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-onChange} * for more information about the function parameters. * * Parameters: * * `e` - The event source of the callback. * * `value` - The new value of the component. * * `reason` - One of "createOption", "selectOption", "removeOption", * "blur" or "clear". */ handleCountryCodeChange: (_event: unknown, value: CountryType | null, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<CountryType> | undefined) => void; /** * Applies the state changes to outside variables using the changeHandler * function (controlled mode) or the reference to the phone number input * DOM element. * * Parameters: * * `state` - The partial state object containing the changes. */ applyStateChanges: (state: Partial<CCSelectorState>) => void; /** * Handles changes to the value prop. This should be called from a useEffect * hook in the component's body. * * When the component is used as a controlled component the value of the * phone number input element can be set (is controlled) from the outside. * If the value is changed directly (in contrast to changing it in the * onChange() handler function), this change must be handled using the * handlePhoneNumberChange() function so that the change is also taken into * account in the country code selector's value. * * Parameters: * * `value` - The value prop of a controlled component. */ handleValueChange: (value: string | null | undefined) => void; /** * Places the cursor (more specifically the start and end indices of the * text selection) within the phone number input element according to the * `inputSelection` state variable. */ placeInputSelection: () => void; /** Displays the error message for the time of the delay. */ displayError: () => void; /** Clears the errorMsg state variable. */ clearErrorMsg: () => void; } /** * Represents a value for the composite component props that change the size of * country code selector's subcomponents in a MUI `Grid`. * @alpha */ export declare interface ComponentSize { size: ResponsiveStyleValue<GridSize>; } /** * Represents a value for the composite component props that change the size of * country code selector's subcomponents in a MUI `Grid` (the legacy grid * component). * @alpha */ declare interface ComponentSizeGridLegacy { xs?: number | false | 'auto'; sm?: number | false | 'auto'; md?: number | false | 'auto'; lg?: number | false | 'auto'; xl?: number | false | 'auto'; } /** * Autocomplete component to select the country code of a phone number from a * list of countries. Based on the MUI `Autocomplete` component * ({@link https://mui.com/material-ui/react-autocomplete}). Can be used in * conjunction with a text input field and common state between the * subcomponents to create a complete phone number input component. * @alpha */ declare function CountryCodeSelector({ autoHighlight, autoSelect, filterOptions, getOptionKey, getOptionLabel, handleHomeEndKeys, label, renderOption, renderInput, shrink, slotProps, variant, renderCountRef, ...rest }: CCSelectorProps): JSX.Element; export { CountryCodeSelector } export { CountryCodeSelector as CountryCodeSelectorZustand } /** * A complete phone number input React component with a country code selector * autocomplete field. Based on MUI's `Autocomplete` * ({@link https://mui.com/material-ui/react-autocomplete/}) and `TextField` * ({@link https://mui.com/material-ui/react-text-field/}) components. These * subcomponents are combined using a common state that is implemented * differently in specific variants of the component. * * This component variant uses the provided Zustand store as the common state * between the subcomponents. See the documentation for `CCSelectorState` and * `useCountryCodeStore` for more information about the store. * * @returns A complete phone number input React component with a country code * selector autocomplete field. * @alpha */ declare function CountryCodeSelectorComposite({ id, name, value, onChange, inputRef, countryCodeLabel, phoneNumberLabel, errorMessageDelay, errorMessageDisplay, onError, defaultValue, layout, formGroupProps, gridLegacyContainerProps, gridLegacyItemProps, gridLegacySelectorProps, gridLegacyInputProps, gridLegacyErrorProps, gridContainerProps, gridItemProps, gridSelectorProps, gridInputProps, gridErrorProps, stackProps, selectorSize, inputSize, errorSize, filterOptions, shrink, variant, selectorProps, inputProps, errorProps, selectorRenderCountRef, inputRenderCountRef, }: CCSelectorCompositeProps): JSX.Element; export { CountryCodeSelectorComposite } export { CountryCodeSelectorComposite as CountryCodeSelectorCompositeZustand } /** * A complete phone number input React component with a country code selector * autocomplete field. Based on MUI's `Autocomplete` * ({@link https://mui.com/material-ui/react-autocomplete/}) and `TextField` * ({@link https://mui.com/material-ui/react-text-field/}) components. These * subcomponents are combined using a common state that is implemented * differently in specific variants of the component. * * This component variant uses React's state management utilities to create the * common state between the subcomponents. * * @returns A complete phone number input React component with a country code * selector autocomplete field. * @alpha */ export declare function CountryCodeSelectorCompositeReact({ id, name, value, onChange, countryCodeLabel, phoneNumberLabel, errorMessageDelay, errorMessageDisplay, onError, inputRef, defaultValue, layout, formGroupProps, gridLegacyContainerProps, gridLegacyItemProps, gridLegacySelectorProps, gridLegacyInputProps, gridLegacyErrorProps, gridContainerProps, gridItemProps, gridSelectorProps, gridInputProps, gridErrorProps, stackProps, selectorSize, inputSize, errorSize, filterOptions, shrink, variant, selectorProps, inputProps, errorProps, selectorRenderCountRef, inputRenderCountRef, }: CCSelectorCompositeProps): JSX.Element; /** * Autocomplete component to select the country code of a phone number from a * a list of countries. Based on the MUI `Autocomplete` component * ({@link https://mui.com/material-ui/react-autocomplete}). Can be used in * conjunction with a text input field and common state between the * subcomponents to create a complete phone number input component. * * This version is only meant to be used internally by the * `CountryCodeSelectorCombinedReact` component. * @internal */ export declare function CountryCodeSelectorReact({ autoHighlight, autoSelect, filterOptions, getOptionKey, getOptionLabel, handleHomeEndKeys, label, onChange, renderOption, renderInput, shrink, slotProps, value, variant, renderCountRef, countries, ...rest }: CCSelectorPropsReact): JSX.Element; /** * A provider component for the `CountryCodeStoreContext`. Every country code * selector must have its own state. When creating a custom component that uses * Zustand store for the state, the components of the phone number input must * be surrounded in `CountryCodeStoreProvider` tags. The combined Zustand * component hides this by using a higher order component. * @param param0 - Children of the provider component in an object. * @alpha */ export declare function CountryCodeStoreProvider({ children }: { children: ReactNode; }): JSX.Element; /** * A short country name or an array of names for the country. */ declare type CountryName = string | string[]; /** * Represents data for an individual country. Contains records for the name, * the ITU-T E.164 international calling code, and two letter ISO 3166 country * code of the country. Is used as the * @alpha */ export declare interface CountryType { /** * Name(s) of the country. * * If there are more than one name, the list has the following structure: * 1) the official or recommended short name (e.g, "Bolivia"), * 2) a complementary addition to the name (e.g., "Plurinational State of") or * probably a better known version of the name (e.g., "Czech Republic" for * "Czechia"), * 3) ...n) alternative spelling(s) of the name (e.g., "Cote d'Ivoire" and * "Cote dIvoire" for "Côte d'Ivoire"). * * The first entry can be used as the shortest possible representation of a * country's name. If there is more space the second entry could be added in * parentheses to make it easier to identify the country. The alternate * spellings can help in finding the country when searching. */ country: CountryName; /** * ITU-T E.164 assigned international calling code for the country. Although * a country can have multiple calling codes, a single calling code is stored * here. This is because the data structure is meant to be used as the * options list for the country code selector, in which each calling code * must have its own entry. * See {@link https://www.itu.int/pub/T-SP-E.164D} or * {@link https://en.wikipedia.org/wiki/List_of_country_calling_codes} for * more information about the calling codes. */ code: string; /** * Two letter ISO 3166 country code of the country. See * {@link https://www.iso.org/iso-3166-country-codes.html} or * {@link https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes} for * more information about the ISO 3166 country codes. See also documentation * for the displayIso field for more */ iso: IsoAlpha2; /** * The display version of the ISO 3166 code in the `iso` field. * * Some entries are not real countries, but subdivisions of one (e.g., * Ascension, SH-AC). Correct ISO 3166-2 subdivision code includes the two * letter ISO 3166-1 code of the larger entity and a two letter code for the * subdivision separated with a dash. Due to way Vite imports json files, it * is easier to not include the dash in the `iso` field that is used as key * in the json files containing the country name translations. In those cases * the display version of the ISO 3166-2 code is stored in this field. */ displayIso?: string; } /** * Creates a default filter options function for the `CountryCodeSelector`'s * underlying `Autocomplete` component. See * {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-filterOptions} * and {@link https://mui.com/material-ui/react-autocomplete/#custom-filter} * for more information about custom filtering. * @alpha */ export declare function createDefaultFilterOptions(): (options: CountryType[], state: FilterOptionsState<CountryType>) => CountryType[]; /** * Creates a default function for getting the option label string in the * `CountryCodeSelector`'s underlying `Autocomplete` component. * See {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-getOptionLabel} * for more information about the `getOptionLabel` prop. * @param elementWidth - The width of the selector element. * @returns A function for getting the option label string. * @alpha */ export declare function createDefaultGetOptionLabel(elementWidth: number): (option: CountryType) => string; /** * Returns a default function for rendering the input component of the * `CountryCodeSelector`'s underlying `Autocomplete` component. See * {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-renderInput} * for more information about the `renderInput` prop. * @param label - CountryCodeSelector component's label passed to the input * component. * @param elementWidth - The width of the selector element. * @param shrink - Indicates whether to shrink the label or not. * @param variant - Variant of the `TextField` component to use. * @returns A function for rendering the input component of the * `CountryCodeSelector`'s `Autocomplete` component. * @alpha */ export declare function createDefaultRenderInput(label: string, elementWidth: number, shrink?: boolean, variant?: TextFieldVariants): (params: AutocompleteRenderInputParams) => JSX.Element; /** * Default label text for the `CountryCodeSelector` component. * @alpha */ export declare const DEFAULT_COUNTRY_CODE_LABEL = "Country code"; /** * Default abbreviation for the label text. Used when `window.innerWidth` is * smaller than `theme.breakpoints.values.sm` (i.e. the viewport width is * smaller than the smallest breakpoint in the MUI theme that the component * uses). See {@link https://mui.com/material-ui/customization/breakpoints/} * for more information about the breakpoints and * {@link https://mui.com/material-ui/customization/theming/} for more * information about the MUI's themes. * @alpha */ export declare const DEFAULT_COUNTRY_CODE_LABEL_ABBREVIATION = "Country"; /** * Default `max-width` for the `CountryCodeSelector`'s option list (i.e., * default `max-width` of the `paper` subcomponent of the underlying * `Autocomplete` component). * @alpha */ export declare const DEFAULT_OPTION_LIST_MAX_WIDTH: Property.Width; /** * Default width for the `CountryCodeSelector`'s option list (i.e., default * `width` of the `paper` subcomponent of the underlying `Autocomplete` * component). * @alpha */ export declare const DEFAULT_OPTION_LIST_WIDTH: Property.Width; /** * Default slot props object for `CountryCodeSelector`'s underlying * `Autocomplete` component. Sets the default `min-width` for the `paper` * component that implements the dropdown option list. * @alpha */ export declare const DEFAULT_SLOT_PROPS: { paper: { sx: { width: string & {}; maxWidth: string & {}; }; }; }; /** * Default function for getting the option key string in the * `CountryCodeSelector`'s underlying `Autocomplete` component. * See {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-getOptionKey} * for more information about the `getOptionKey` prop. * @returns The string to be used as the key of the option. * @alpha */ export declare function defaultGetOptionKey(option: CountryType): string; /** * Default function for rendering the options in the `CountryCodeSelector`'s * underlying `Autocomplete` component. See * {@link https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-renderOption} * for more information about the `renderOption` prop. * @param props - The props to apply on the `li` element. * @param option - The option to render. * @returns The option element. * @alpha */ export declare function defaultRenderOption(props: React.HTMLAttributes<HTMLLIElement> & { key: any; }, option: CountryType): React.ReactNode; /** * Returns the international calling codes and names for the countries of the * world in `CountryType` objects. * @alpha */ export declare function getCountries(locale?: string): Promise<readonly CountryType[]>; /** * Represents the props that can be passed to a MUI `Grid2` container component * used for the layout of the subcomponents of composite country code selector * component. * @alpha */ export declare type GridContainerProps = Partial<Omit<GridProps, 'size' | 'offset'>>; /** * Represents the props that can be passed to a MUI `Grid2` item components * used for the layout of the subcomponents of composite country code selector * component. * @alpha */ export declare type GridItemProps = Partial<Omit<GridProps, 'spacing' | 'rowSpacing' | 'columnSpacing'>>; /** * Represents the props that can be passed to a MUI `Grid` container component * used for the layout of the subcomponents of composite country code selector * component. * @alpha */ export declare type GridLegacyContainerProps = Partial<GridLegacyProps>; /** * Represents the props that can be passed to a MUI `Grid` item components * used for the layout of the subcomponents of composite country code selector * component. * @alpha */ export declare type GridLegacyItemProps = Partial<Omit<GridLegacyProps, 'spacing' | 'rowSpacing' | 'columnSpacing'>>; /** * Wraps the composite country code selector's subcomponents into MUI * `GridLegacy` and `GridLegacy item`components. * @internal */ export declare function GridLegacyWrapper({ gridItemProps, gridSelectorProps, gridInputProps, gridErrorProps, selectorSize, inputSize, errorSize, children, }: GridLegacyWrapperProps): JSX.Element; /** * Represents the props of the `GridLegacyWrapper` component. * @internal */ export declare interface GridLegacyWrapperProps { gridItemProps: GridLegacyItemProps | undefined; gridSelectorProps: GridLegacyItemProps | undefined; gridInputProps: GridLegacyItemProps | undefined; gridErrorProps: GridLegacyItemProps | undefined; selectorSize: ComponentSizeGridLegacy | undefined; inputSize: ComponentSizeGridLegacy | undefined; errorSize: ComponentSizeGridLegacy | undefined; children: ReactNode; } /** * Wraps the combined country code selector's subcomponents into MUI `Grid` * components. * @internal */ export declare function GridWrapper({ gridItemProps, gridSelectorProps, gridInputProps, gridErrorProps, selectorSize, inputSize, errorSize, children, }: GridWrapperProps): JSX.Element; /** * Represents the props of the `GridWrapper` component. * @internal */ export declare interface GridWrapperProps { gridItemProps: GridItemProps | undefined; gridSelectorProps: GridItemProps | undefined; gridInputProps: GridItemProps | undefined; gridErrorProps: GridItemProps | undefined; selectorSize: ComponentSize | undefined; inputSize: ComponentSize | undefined; errorSize: ComponentSize | undefined; children: ReactNode; } /** * Represents the text selection range within the input element (phone number * input). * @alpha */ export declare interface InputSelection { /** The start index of the text selection within the input element. */ selectionStart: number; /** The end index of the text selection within the input element. */ selectionEnd: number; } /** * ISO 3166 two letter country codes of areas that have an ITU-T E.164 or NANP * telephone calling code. * * NOTES! Although Ascencion (SH-AC) is a subdivision of a larger entity, it * has its own calling code, so it is included. Bouvet Island (BV), French * Southern Territories (TF), and Heard Island and McDonald Islands (HM), * however, have ISO 3166 country codes, but they do not have their own calling * codes, so they are not included. * * See {@link https://stackoverflow.com/a/54061487} and * {@link https://github.com/Microsoft/TypeScript/pull/29510} for more * information about the type syntax. */ declare type IsoAlpha2 = (typeof isoAlpha2Arr)[number]; /** The accepted ISO 3166 two letter country codes in an array. */ declare const isoAlpha2Arr: readonly ["AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AQ", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ", "BQBO", "BQSA", "BQSE", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CC", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CX", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "EH", "ER", "ES", "ET", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB", "GD", "GE", "GF", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GS", "GT", "GU", "GW", "GY", "HK", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IM", "IN", "IO", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MF", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NC", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PM", "PN", "PR", "PS", "PT", "PW", "PY", "QA", "RE", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SH", "SHAC", "SI", "SJ", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TC", "TD", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "UM", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VI", "VN", "VU", "WF", "WS", "XK", "YE", "YT", "ZA", "ZM", "ZW"]; /** * Represents a value of the `CompositeCountryCodeSelector`'s prop that defines * what kind of layout components its subcomponents are wrapped in, if any. * @alpha */ export declare type LayoutProp = 'gridLegacy' | 'gridLegacyItems' | 'grid' | 'gridItems' | 'stack' | 'group' | 'row'; /** * Represents data about country codes that are possible based on the phone * number input. * @alpha */ export declare interface PossibleCountries { /** * Digits that were considered when selecting the codes in the possible * countries array. */ digitsConsidered: string; /** * The minimum number of digits in the codes in the possibleCountries array. */ minCodeDigits: number; /** * The maximum number of digits in the codes in the possibleCountries array. */ maxCodeDigits: number; /** * Array of `CountryType` objects corresponding to the possible country codes. */ possibleCountries: readonly CountryType[]; } declare type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null; }; /** * A responsive breakpoint below which the CountryCodeSelector components use * shorter labels. * @alpha */ export declare const SELECTOR_RESPONSIVE_BREAKPOINT_WIDTH = 145; /** * A custom hook that returns a country code store. Store is fetched from a * React context and therefore the component using this hook is expected to be * surrounded by `CountryCodeStoreProvider` tags. * @alpha */ export declare const useCountryCodeStore: () => Pick<CCSelectorState, "phoneNumStr" | "countryCodeValue" | "countries" | "errorMsg" | "errorMsgDelay" | "errorMsgTimeoutObj" | "phoneNumberInput" | "clearedRerender" | "setPhoneNumberInput" | "setRefs" | "initialize" | "cleanUp" | "handlePhoneNumberChange" | "handleCountryCodeChange" | "handleValueChange" | "placeInputSelection">; /** * Wraps the composite country code selector's subcomponents into MUI's `Grid`, * `GridLegacy` or `FormGroup` components according to the `layout` prop's * value. * @internal */ export declare function Wrapper({ layout, formGroupProps, gridLegacyContainerProps, gridLegacyItemProps, gridLegacySelectorProps, gridLegacyInputProps, gridLegacyErrorProps, gridContainerProps, gridItemProps, gridSelectorProps, gridInputProps, gridErrorProps, stackProps, selectorSize, inputSize, errorSize, children, }: WrapperProps): JSX.Element; /** * Props for the `Wrapper` component. * @internal */ export declare interface WrapperProps { layout?: LayoutProp; formGroupProps?: Partial<FormGroupProps>; gridLegacyContainerProps?: GridLegacyContainerProps; gridLegacyItemProps?: GridLegacyItemProps; gridLegacySelectorProps?: GridLegacyItemProps; gridLegacyInputProps?: GridLegacyItemProps; gridLegacyErrorProps?: GridLegacyItemProps; gridContainerProps?: GridContainerProps; gridItemProps?: GridItemProps; gridSelectorProps?: GridItemProps; gridInputProps?: GridItemProps; gridErrorProps?: GridItemProps; stackProps?: Partial<StackProps>; selectorSize?: ComponentSize | ComponentSizeGridLegacy; inputSize?: ComponentSize | ComponentSizeGridLegacy; errorSize?: ComponentSize | ComponentSizeGridLegacy; children: ReactNode; } export { }