CountryCodeSelector({ autoHighlight, autoSelect, filterOptions, getOptionKey, getOptionLabel, handleHomeEndKeys, label, renderOption, renderInput, shrink, slotProps, variant, renderCountRef, …rest })

(ALPHA) Autocomplete component to select the country code of a phone number from a list of countries. Based on the MUI Autocomplete component (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.

CountryCodeSelectorComposite({ id, name, value, onChange, inputRef, countryCodeLabel, phoneNumberLabel, errorMessageDelay, errorMessageDisplay, onError, defaultValue, layout, formGroupProps, gridContainerProps, gridItemProps, gridSelectorProps, gridInputProps, gridErrorProps, grid2ContainerProps, grid2ItemProps, grid2SelectorProps, grid2InputProps, grid2ErrorProps, stackProps, selectorSize, inputSize, errorSize, filterOptions, shrink, variant, selectorProps, inputProps, errorProps, selectorRenderCountRef, inputRenderCountRef, })

(ALPHA) A complete phone number input React component with a country code selector autocomplete field. Based on MUI’s Autocomplete (https://mui.com/material-ui/react-autocomplete/) and TextField (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.

CountryCodeSelectorCompositeReact({ id, name, value, onChange, countryCodeLabel, phoneNumberLabel, errorMessageDelay, errorMessageDisplay, onError, inputRef, defaultValue, layout, formGroupProps, gridContainerProps, gridItemProps, gridSelectorProps, gridInputProps, gridErrorProps, grid2ContainerProps, grid2ItemProps, grid2SelectorProps, grid2InputProps, grid2ErrorProps, stackProps, selectorSize, inputSize, errorSize, filterOptions, shrink, variant, selectorProps, inputProps, errorProps, selectorRenderCountRef, inputRenderCountRef, })

(ALPHA) A complete phone number input React component with a country code selector autocomplete field. Based on MUI’s Autocomplete (https://mui.com/material-ui/react-autocomplete/) and TextField (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.

CountryCodeStoreProvider({ children })

(ALPHA) 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.

createDefaultFilterOptions()

(ALPHA) Creates a default filter options function for the CountryCodeSelector's underlying Autocomplete component. See https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-filterOptions and https://mui.com/material-ui/react-autocomplete/#custom-filter for more information about custom filtering.

createDefaultGetOptionLabel(elementWidth)

(ALPHA) Creates a default function for getting the option label string in the CountryCodeSelector's underlying Autocomplete component. See https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-getOptionLabel for more information about the getOptionLabel prop.

createDefaultRenderInput(label, elementWidth, shrink, variant)

(ALPHA) Returns a default function for rendering the input component of the CountryCodeSelector's underlying Autocomplete component. See https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-renderInput for more information about the renderInput prop.

defaultGetOptionKey(option)

(ALPHA) Default function for getting the option key string in the CountryCodeSelector's underlying Autocomplete component. See https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-getOptionKey for more information about the getOptionKey prop.

defaultRenderOption(props, option)

(ALPHA) Default function for rendering the options in the CountryCodeSelector's underlying Autocomplete component. See https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-renderOption for more information about the renderOption prop.

getCountries(locale)

(ALPHA) Returns the international calling codes and names for the countries of the world in CountryType objects.

useCountryCodeStore()

(ALPHA) 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.

CCSelectorCompositeProps

(ALPHA) Represents the props of the CountryCodeSelectorComposite components.

CCSelectorProps

(ALPHA) Represents the props of the CountryCodeSelector components.

CCSelectorState

(ALPHA) 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.

ComponentSize

(ALPHA) Represents a value for the composite component props that change the size of country code selector’s subcomponents in a MUI Grid or Grid2.

CountryType

(ALPHA) 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

InputSelection

(ALPHA) Represents the text selection range within the input element (phone number input).

PossibleCountries

(ALPHA) Represents data about country codes that are possible based on the phone number input.

DEFAULT_COUNTRY_CODE_LABEL_ABBREVIATION

(ALPHA) 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 https://mui.com/material-ui/customization/breakpoints/ for more information about the breakpoints and https://mui.com/material-ui/customization/theming/ for more information about the MUI’s themes.

DEFAULT_COUNTRY_CODE_LABEL

(ALPHA) Default label text for the CountryCodeSelector component.

DEFAULT_OPTION_LIST_MAX_WIDTH

(ALPHA) Default max-width for the CountryCodeSelector's option list (i.e., default max-width of the paper subcomponent of the underlying Autocomplete component).

DEFAULT_OPTION_LIST_WIDTH

(ALPHA) Default width for the CountryCodeSelector's option list (i.e., default width of the paper subcomponent of the underlying Autocomplete component).

DEFAULT_SLOT_PROPS

(ALPHA) 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.

SELECTOR_RESPONSIVE_BREAKPOINT_WIDTH

(ALPHA) A responsive breakpoint below which the CountryCodeSelector components use shorter labels.

Grid2ContainerProps

(ALPHA) 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.

Grid2ItemProps

(ALPHA) 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.

GridContainerProps

(ALPHA) 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.

GridItemProps

(ALPHA) 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.

LayoutProp

(ALPHA) Represents a value of the CompositeCountryCodeSelector's prop that defines what kind of layout components its subcomponents are wrapped in, if any.