applyStateChanges

(state: Partial<CCSelectorState>) => void

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

changeHandler

((event: { target: { value: string; }; }) => void) | undefined

(ALPHA) An external change handler function to which the current phone number value is forwarded every time the value changes.

cleanUp

() => void

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

clearedRerender

boolean

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

clearErrorMsg

() => void

(ALPHA) Clears the errorMsg state variable.

countries

readonly CountryType[]

(ALPHA) The calling codes and names of the countries of the world.

countryCodeDigits

string

(ALPHA) The digits of the detected country code.

countryCodeValue

CountryType | null

(ALPHA) The CountryType object corresponding to the selected country code.

defaultValue

string

(ALPHA) A default phone number value. Used when the component is used as an uncontrolled component.

displayError

() => void

(ALPHA) Displays the error message for the time of the delay.

errorHandler

((error: string) => void) | undefined

(ALPHA) An external error handler function to which the error message is forwarded.

errorMsg

string | null

(ALPHA) Error message to be shown to the user.

errorMsgDelay

number

(ALPHA) Time of the message delay in seconds.

errorMsgTimeoutObj

NodeJS.Timeout | null

(ALPHA) Timeout object for timing how long the error message is displayed.

formElement

HTMLElement | undefined | null

(ALPHA) A form DOM element that is parent of the phone number input component.

handleCountryCodeChange

(_event: unknown, value: CountryType | null, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<CountryType> | undefined) => void

(ALPHA) A handler function for the CountryCodeSelector's change events. See 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”.

handlePhoneNumberChange

(event: { target: { value: string; }; }) => void

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

handleValueChange

(value: string | null | undefined) => void

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

initialize

(errorMsgDelay?: number, errorHandler?: ((error: string) => void) | undefined, changeHandler?: ((event: { target: { value: string; }; }) => void) | undefined) => () => void

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

inputSelection

InputSelection

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

phoneNumberInput

HTMLInputElement | undefined | null

(ALPHA) The phone number input DOM element.

phoneNumSplit

number

(ALPHA) An index indicating where the local part of the phone number starts.

phoneNumStr

string

(ALPHA) The whole phone number including the country code as a string. This is the value of the phone number input element.

placeInputSelection

() => void

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

possibleCountries

PossibleCountries | null

(ALPHA) Data on country codes that are possible based on the phoneNumStr.

setChangeHandler

(handler: ((event: { target: { value: string; }; }) => void) | undefined) => void

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

setErrorMsgDelay

(seconds: number) => void

(ALPHA) Sets the error message delay (how long the message is shown). Takes the delay in seconds as parameter.

setInputSelection

(inputSelection: InputSelection) => void

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

setPhoneNumberInput

(inputElement: HTMLInputElement | undefined | null) => void

(ALPHA) Sets the phoneNumberInput value. Takes the phone number input DOM element as parameter.

setRefs

(element: HTMLInputElement | null, inputRef?: MutableRefObject<HTMLInputElement | null> | RefCallback<HTMLInputElement | null>, defaultValue?: string) => void

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

significantDigits

string

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

toggleClearedRerender

() => void

(ALPHA) Toggles the clearedRerender state variable