\r\n\t\t\t
\r\n\t)\r\n}\r\n\r\nCountrySelectWithIcon.propTypes = {\r\n\t// Country flag component.\r\n\ticonComponent: PropTypes.elementType,\r\n\r\n\t// Select arrow component.\r\n\tarrowComponent: PropTypes.elementType,\r\n\r\n\t// Set to `true` to render Unicode flag icons instead of SVG images.\r\n\tunicodeFlags: PropTypes.bool\r\n}\r\n\r\nfunction DefaultArrowComponent() {\r\n\treturn \r\n\t\t\t\t\t\t{getUnicodeFlagIcon(value)}\r\n\t\t\t\t\t
\r\n\t\t\t\t) : (\r\n\t\t\t\t\t\r\n}\r\n\r\nfunction getSelectedOption(options, value) {\r\n\tfor (const option of options) {\r\n\t\tif (!option.divider) {\r\n\t\t\tif (isSameOptionValue(option.value, value)) {\r\n\t\t\t\treturn option\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction isSameOptionValue(value1, value2) {\r\n\t// `undefined` is identical to `null`: both mean \"no country selected\".\r\n\tif (value1 === undefined || value1 === null) {\r\n\t\treturn value2 === undefined || value2 === null\r\n\t}\r\n\treturn value1 === value2\r\n}","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport classNames from 'classnames'\r\n\r\n// Default country flag icon.\r\n// `![]()
` is wrapped in a `` to prevent SVGs from exploding in size in IE 11.\r\n// https://github.com/catamphetamine/react-phone-number-input/issues/111\r\nexport default function FlagComponent({\r\n\tcountry,\r\n\tcountryName,\r\n\tflags,\r\n\tflagUrl,\r\n\t...rest\r\n}) {\r\n\tif (flags && flags[country]) {\r\n\t\treturn flags[country]({ title: countryName })\r\n\t}\r\n\treturn (\r\n\t\t![]()
`.\r\n\tcountryName: PropTypes.string.isRequired,\r\n\r\n\t// Country flag icon components.\r\n\t// By default flag icons are inserted as `![]()
`s\r\n\t// with their `src` pointed to `country-flag-icons` gitlab pages website.\r\n\t// There might be cases (e.g. an offline application)\r\n\t// where having a large (3 megabyte) `` flags\r\n\t// bundle is more appropriate.\r\n\t// `import flags from 'react-phone-number-input/flags'`.\r\n\tflags: PropTypes.objectOf(PropTypes.elementType),\r\n\r\n\t// A URL for a country flag icon.\r\n\t// By default it points to `country-flag-icons` gitlab pages website.\r\n\tflagUrl: PropTypes.string.isRequired\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nexport default function InternationalIcon({ aspectRatio, ...rest }) {\r\n\tif (aspectRatio === 1) {\r\n\t\treturn \r\n\t\t\t{title} \r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t{title} \r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\tcountry\r\n\t\t\t\t\t?\r\n\t\t\t\t\t
\r\n\t\t)\r\n\t}\r\n\r\n\tCountryIcon.propTypes = {\r\n\t\tcountry: PropTypes.string,\r\n\t\tlabel: PropTypes.string.isRequired,\r\n\t\taspectRatio: PropTypes.number\r\n\t}\r\n\r\n\treturn CountryIcon\r\n}\r\n\r\nexport default createCountryIconComponent({\r\n\t// Must be equal to `defaultProps.flagUrl` in `./PhoneInputWithCountry.js`.\r\n\tflagUrl: 'https://purecatamphetamine.github.io/country-flag-icons/3x2/{XX}.svg',\r\n\tflagComponent: Flag,\r\n\tinternationalIcon: DefaultInternationalIcon\r\n})","import { useRef, useCallback } from 'react'\r\n\r\n/**\r\n * This hook creates an internal copy of a `ref`\r\n * and returns a new `ref`-alike setter function\r\n * that updates both `ref` and the internal copy of it.\r\n * That `ref`-alike setter function could then be passed\r\n * to child elements instead of the original `ref`.\r\n *\r\n * The internal copy of the `ref` can then be used to\r\n * call instance methods like `.focus()`, etc.\r\n *\r\n * One may ask: why create a copy of `ref` for \"internal\" use\r\n * when the code could use the original `ref` for that.\r\n * The answer is: the code would have to dance around the original `ref` anyway\r\n * to figure out whether it exists and to find out the internal implementation of it\r\n * in order to read its value correctly. This hook encapsulates all that \"boilerplate\" code.\r\n * The returned copy of the `ref` is guaranteed to exist and functions as a proper ref \"object\".\r\n * The returned `ref`-alike setter function must be used instead of the original `ref`\r\n * when passing it to child elements.\r\n *\r\n * @param {(object|function)} [externalRef] — The original `ref` that may have any internal implementation and might not even exist.\r\n * @return {any[]} Returns an array of two elements: a copy of the `ref` for \"internal\" use and a `ref`-alike setter function that should be used in-place of the original `ref` when passing it to child elements.\r\n */\r\nexport default function useExternalRef(externalRef) {\r\n // Create a copy of the original `ref` (which might not exist).\r\n // Both refs will point to the same value.\r\n const refCopy = useRef()\r\n\r\n // Updates both `ref`s with the same `value`.\r\n const refSetter = useCallback((value) => {\r\n setRefsValue([externalRef, refCopy], value)\r\n }, [\r\n externalRef,\r\n refCopy\r\n ])\r\n\r\n return [refCopy, refSetter]\r\n}\r\n\r\n// Sets the same `value` of all `ref`s.\r\n// Some of the `ref`s may not exist in which case they'll be skipped.\r\nexport function setRefsValue(refs, value) {\r\n for (const ref of refs) {\r\n if (ref) {\r\n setRefValue(ref, value)\r\n }\r\n }\r\n}\r\n\r\n// Sets the value of a `ref`.\r\n// Before React Hooks were introduced, `ref`s used to be functions.\r\n// After React Hooks were introduces, `ref`s became objects with `.current` property.\r\n// This function sets a `ref`'s value regardless of its internal implementation,\r\n// so it supports both types of `ref`s.\r\nfunction setRefValue(ref, value) {\r\n if (typeof ref === 'function') {\r\n ref(value)\r\n } else {\r\n ref.current = value\r\n }\r\n}","import parsePhoneNumber_, {\r\n\tgetCountryCallingCode,\r\n\tAsYouType,\r\n\tMetadata\r\n} from 'libphonenumber-js/core'\r\n\r\nimport getInternationalPhoneNumberPrefix from './getInternationalPhoneNumberPrefix.js'\r\n\r\n/**\r\n * Decides which country should be pre-selected\r\n * when the phone number input component is first mounted.\r\n * @param {object?} phoneNumber - An instance of `PhoneNumber` class.\r\n * @param {string?} country - Pre-defined country (two-letter code).\r\n * @param {string[]?} countries - A list of countries available.\r\n * @param {object} metadata - `libphonenumber-js` metadata\r\n * @return {string?}\r\n */\r\nexport function getPreSelectedCountry({\r\n\tvalue,\r\n\tphoneNumber,\r\n\tdefaultCountry,\r\n\tgetAnyCountry,\r\n\tcountries,\r\n\trequired,\r\n\tmetadata\r\n}) {\r\n\tlet country\r\n\r\n\t// If can get country from E.164 phone number\r\n\t// then it overrides the `country` passed (or not passed).\r\n\tif (phoneNumber && phoneNumber.country) {\r\n\t\t// `country` will be left `undefined` in case of non-detection.\r\n\t\tcountry = phoneNumber.country\r\n\t} else if (defaultCountry) {\r\n\t\tif (!value || couldNumberBelongToCountry(value, defaultCountry, metadata)) {\r\n\t\t\tcountry = defaultCountry\r\n\t\t}\r\n\t}\r\n\r\n\t// Only pre-select a country if it's in the available `countries` list.\r\n\tif (countries && countries.indexOf(country) < 0) {\r\n\t\tcountry = undefined\r\n\t}\r\n\r\n\t// If there will be no \"International\" option\r\n\t// then some `country` must be selected.\r\n\t// It will still be the wrong country though.\r\n\t// But still country `` can't be left in a broken state.\r\n\tif (!country && required && countries && countries.length > 0) {\r\n\t\tcountry = getAnyCountry()\r\n\t\t// noCountryMatchesTheNumber = true\r\n\t}\r\n\r\n\treturn country\r\n}\r\n\r\n/**\r\n * Generates a sorted list of country `` options.\r\n * @param {string[]} countries - A list of two-letter (\"ISO 3166-1 alpha-2\") country codes.\r\n * @param {object} labels - Custom country labels. E.g. `{ RU: 'Россия', US: 'США', ... }`.\r\n * @param {boolean} addInternationalOption - Whether should include \"International\" option at the top of the list.\r\n * @return {object[]} A list of objects having shape `{ value : string, label : string }`.\r\n */\r\nexport function getCountrySelectOptions({\r\n\tcountries,\r\n\tcountryNames,\r\n\taddInternationalOption,\r\n\t// `locales` are only used in country name comparator:\r\n\t// depending on locale, string sorting order could be different.\r\n\tcompareStringsLocales,\r\n\tcompareStrings: _compareStrings\r\n}) {\r\n\t// Default country name comparator uses `String.localeCompare()`.\r\n\tif (!_compareStrings) {\r\n\t\t_compareStrings = compareStrings\r\n\t}\r\n\r\n\t// Generates a `` option for each country.\r\n\tconst countrySelectOptions = countries.map((country) => ({\r\n\t\tvalue: country,\r\n\t\t// All `locale` country names included in this library\r\n\t\t// include all countries (this is checked at build time).\r\n\t\t// The only case when a country name might be missing\r\n\t\t// is when a developer supplies their own `labels` property.\r\n\t\t// To guard against such cases, a missing country name\r\n\t\t// is substituted by country code.\r\n\t\tlabel: countryNames[country] || country\r\n\t}))\r\n\r\n\t// Sort the list of countries alphabetically.\r\n\tcountrySelectOptions.sort((a, b) => _compareStrings(a.label, b.label, compareStringsLocales))\r\n\r\n\t// Add the \"International\" option to the country list (if suitable)\r\n\tif (addInternationalOption) {\r\n\t\tcountrySelectOptions.unshift({\r\n\t\t\tlabel: countryNames.ZZ\r\n\t\t})\r\n\t}\r\n\r\n\treturn countrySelectOptions\r\n}\r\n\r\n/**\r\n * Parses a E.164 phone number to an instance of `PhoneNumber` class.\r\n * @param {string?} value = E.164 phone number.\r\n * @param {object} metadata - `libphonenumber-js` metadata\r\n * @return {object} Object having shape `{ country: string?, countryCallingCode: string, number: string }`. `PhoneNumber`: https://gitlab.com/catamphetamine/libphonenumber-js#phonenumber.\r\n * @example\r\n * parsePhoneNumber('+78005553535')\r\n */\r\nexport function parsePhoneNumber(value, metadata) {\r\n\treturn parsePhoneNumber_(value || '', metadata)\r\n}\r\n\r\n/**\r\n * Generates national number digits for a parsed phone.\r\n * May prepend national prefix.\r\n * The phone number must be a complete and valid phone number.\r\n * @param {object} phoneNumber - An instance of `PhoneNumber` class.\r\n * @param {object} metadata - `libphonenumber-js` metadata\r\n * @return {string}\r\n * @example\r\n * getNationalNumberDigits({ country: 'RU', phone: '8005553535' })\r\n * // returns '88005553535'\r\n */\r\nexport function generateNationalNumberDigits(phoneNumber) {\r\n\treturn phoneNumber.formatNational().replace(/\\D/g, '')\r\n}\r\n\r\n/**\r\n * Migrates parsed `` `value` for the newly selected `country`.\r\n * @param {string?} phoneDigits - Phone number digits (and `+`) parsed from phone number `` (it's not the same as the `value` property).\r\n * @param {string?} prevCountry - Previously selected country.\r\n * @param {string?} newCountry - Newly selected country. Can't be same as previously selected country.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @param {boolean} useNationalFormat - whether should attempt to convert from international to national number for the new country.\r\n * @return {string?}\r\n */\r\nexport function getPhoneDigitsForNewCountry(phoneDigits, {\r\n\tprevCountry,\r\n\tnewCountry,\r\n\tmetadata,\r\n\tuseNationalFormat\r\n}) {\r\n\tif (prevCountry === newCountry) {\r\n\t\treturn phoneDigits\r\n\t}\r\n\r\n\t// If `parsed_input` is empty\r\n\t// then no need to migrate anything.\r\n\tif (!phoneDigits) {\r\n\t\tif (useNationalFormat) {\r\n\t\t\treturn ''\r\n\t\t} else {\r\n\t\t\tif (newCountry) {\r\n\t\t\t\t// If `phoneDigits` is empty then set `phoneDigits` to\r\n\t\t\t\t// `+{getCountryCallingCode(newCountry)}`.\r\n\t\t\t\treturn getInternationalPhoneNumberPrefix(newCountry, metadata)\r\n\t\t\t}\r\n\t\t\treturn ''\r\n\t\t}\r\n\t}\r\n\r\n\t// If switching to some country.\r\n\t// (from \"International\" or another country)\r\n\t// If switching from \"International\" then `phoneDigits` starts with a `+`.\r\n\t// Otherwise it may or may not start with a `+`.\r\n\tif (newCountry) {\r\n\t\t// If the phone number was entered in international format\r\n\t\t// then migrate it to the newly selected country.\r\n\t\t// The phone number may be incomplete.\r\n\t\t// The phone number entered not necessarily starts with\r\n\t\t// the previously selected country phone prefix.\r\n\t\tif (phoneDigits[0] === '+') {\r\n\t\t\t// If the international phone number is for the new country\r\n\t\t\t// then convert it to local if required.\r\n\t\t\tif (useNationalFormat) {\r\n\t\t\t\t// // If a phone number is being input in international form\r\n\t\t\t\t// // and the country can already be derived from it,\r\n\t\t\t\t// // and if it is the new country, then format as a national number.\r\n\t\t\t\t// const derived_country = getCountryFromPossiblyIncompleteInternationalPhoneNumber(phoneDigits, metadata)\r\n\t\t\t\t// if (derived_country === newCountry) {\r\n\t\t\t\t// \treturn stripCountryCallingCode(phoneDigits, derived_country, metadata)\r\n\t\t\t\t// }\r\n\r\n\t\t\t\t// Actually, the two countries don't necessarily need to match:\r\n\t\t\t\t// the condition could be looser here, because several countries\r\n\t\t\t\t// might share the same international phone number format\r\n\t\t\t\t// (for example, \"NANPA\" countries like US, Canada, etc).\r\n\t\t\t\t// The looser condition would be just \"same nternational phone number format\"\r\n\t\t\t\t// which would mean \"same country calling code\" in the context of `libphonenumber-js`.\r\n\t\t\t\tif (phoneDigits.indexOf('+' + getCountryCallingCode(newCountry, metadata)) === 0) {\r\n\t\t\t\t\treturn stripCountryCallingCode(phoneDigits, newCountry, metadata)\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Simply discard the previously entered international phone number,\r\n\t\t\t\t// because otherwise any \"smart\" transformation like getting the\r\n\t\t\t\t// \"national (significant) number\" part and then prepending the\r\n\t\t\t\t// newly selected country's \"country calling code\" to it\r\n\t\t\t\t// would just be confusing for a user without being actually useful.\r\n\t\t\t\treturn ''\r\n\r\n\t\t\t\t// // Simply strip the leading `+` character\r\n\t\t\t\t// // therefore simply converting all digits into a \"local\" phone number.\r\n\t\t\t\t// // https://github.com/catamphetamine/react-phone-number-input/issues/287\r\n\t\t\t\t// return phoneDigits.slice(1)\r\n\t\t\t}\r\n\r\n\t\t\tif (prevCountry) {\r\n\t\t\t\tconst newCountryPrefix = getInternationalPhoneNumberPrefix(newCountry, metadata)\r\n\t\t\t\tif (phoneDigits.indexOf(newCountryPrefix) === 0) {\r\n\t\t\t\t\treturn phoneDigits\r\n\t\t\t\t} else {\r\n\t\t\t\t\treturn newCountryPrefix\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tconst defaultValue = getInternationalPhoneNumberPrefix(newCountry, metadata)\r\n\t\t\t\t// If `phoneDigits`'s country calling code part is the same\r\n\t\t\t\t// as for the new `country`, then leave `phoneDigits` as is.\r\n\t\t\t\tif (phoneDigits.indexOf(defaultValue) === 0) {\r\n\t\t\t\t\treturn phoneDigits\r\n\t\t\t\t}\r\n\t\t\t\t// If `phoneDigits`'s country calling code part is not the same\r\n\t\t\t\t// as for the new `country`, then set `phoneDigits` to\r\n\t\t\t\t// `+{getCountryCallingCode(newCountry)}`.\r\n\t\t\t\treturn defaultValue\r\n\t\t\t}\r\n\r\n\t\t\t// // If the international phone number already contains\r\n\t\t\t// // any country calling code then trim the country calling code part.\r\n\t\t\t// // (that could also be the newly selected country phone code prefix as well)\r\n\t\t\t// // `phoneDigits` doesn't neccessarily belong to `prevCountry`.\r\n\t\t\t// // (e.g. if a user enters an international number\r\n\t\t\t// // not belonging to any of the reduced `countries` list).\r\n\t\t\t// phoneDigits = stripCountryCallingCode(phoneDigits, prevCountry, metadata)\r\n\r\n\t\t\t// // Prepend country calling code prefix\r\n\t\t\t// // for the newly selected country.\r\n\t\t\t// return e164(phoneDigits, newCountry, metadata) || `+${getCountryCallingCode(newCountry, metadata)}`\r\n\t\t}\r\n\t}\r\n\t// If switching to \"International\" from a country.\r\n\telse {\r\n\t\t// If the phone number was entered in national format.\r\n\t\tif (phoneDigits[0] !== '+') {\r\n\t\t\t// Format the national phone number as an international one.\r\n\t\t\t// The phone number entered not necessarily even starts with\r\n\t\t\t// the previously selected country phone prefix.\r\n\t\t\t// Even if the phone number belongs to whole another country\r\n\t\t\t// it will still be parsed into some national phone number.\r\n\t\t\t//\r\n\t\t\t// Ignore the now-uncovered `|| ''` code branch:\r\n\t\t\t// previously `e164()` function could return an empty string\r\n\t\t\t// even when `phoneDigits` were not empty.\r\n\t\t\t// Now it always returns some `value` when there're any `phoneDigits`.\r\n\t\t\t// Still, didn't remove the `|| ''` code branch just in case\r\n\t\t\t// that logic changes somehow in some future, so there're no\r\n\t\t\t// possible bugs related to that.\r\n\t\t\t//\r\n\t\t\t// (ignore the `|| ''` code branch)\r\n\t\t\t/* istanbul ignore next */\r\n\t\t\treturn e164(phoneDigits, prevCountry, metadata) || ''\r\n\t\t}\r\n\t}\r\n\r\n\treturn phoneDigits\r\n}\r\n\r\n/**\r\n * Converts phone number digits to a (possibly incomplete) E.164 phone number.\r\n * @param {string?} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.\r\n * @param {string?} country\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string?}\r\n */\r\nexport function e164(number, country, metadata) {\r\n\tif (!number) {\r\n\t\treturn\r\n\t}\r\n\t// If the phone number is being input in international format.\r\n\tif (number[0] === '+') {\r\n\t\t// If it's just the `+` sign then return nothing.\r\n\t\tif (number === '+') {\r\n\t\t\treturn\r\n\t\t}\r\n\t\t// Return a E.164 phone number.\r\n\t\t//\r\n\t\t// Could return `number` \"as is\" here, but there's a possibility\r\n\t\t// that some user might incorrectly input an international number\r\n\t\t// with a \"national prefix\". Such numbers aren't considered valid,\r\n\t\t// but `libphonenumber-js` is \"forgiving\" when it comes to parsing\r\n\t\t// user's input, and this input component follows that behavior.\r\n\t\t//\r\n\t\tconst asYouType = new AsYouType(country, metadata)\r\n\t\tasYouType.input(number)\r\n\t\t// This function would return `undefined` only when `number` is `\"+\"`,\r\n\t\t// but at this point it is known that `number` is not `\"+\"`.\r\n\t\treturn asYouType.getNumberValue()\r\n\t}\r\n\t// For non-international phone numbers\r\n\t// an accompanying country code is required.\r\n\t// The situation when `country` is `undefined`\r\n\t// and a non-international phone number is passed\r\n\t// to this function shouldn't happen.\r\n\tif (!country) {\r\n\t\treturn\r\n\t}\r\n\tconst partial_national_significant_number = getNationalSignificantNumberDigits(number, country, metadata)\r\n\t//\r\n\t// Even if no \"national (significant) number\" digits have been input,\r\n\t// still return a non-`undefined` value.\r\n\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/113\r\n\t//\r\n\t// For example, if the user has selected country `US` and entered `\"1\"`\r\n\t// then that `\"1\"` is just a \"national prefix\" and no \"national (significant) number\"\r\n\t// digits have been input yet. Still, return `\"+1\"` as `value` in such cases,\r\n\t// because otherwise the app would think that the input is empty and mark it as such\r\n\t// while in reality it isn't empty, which might be thought of as a \"bug\", or just\r\n\t// a \"weird\" behavior.\r\n\t//\r\n\t// if (partial_national_significant_number) {\r\n\t\treturn `+${getCountryCallingCode(country, metadata)}${partial_national_significant_number || ''}`\r\n\t// }\r\n}\r\n\r\n/**\r\n * Trims phone number digits if they exceed the maximum possible length\r\n * for a national (significant) number for the country.\r\n * @param {string} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.\r\n * @param {string} country\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string} Can be empty.\r\n */\r\nexport function trimNumber(number, country, metadata) {\r\n\tconst nationalSignificantNumberPart = getNationalSignificantNumberDigits(number, country, metadata)\r\n\tif (nationalSignificantNumberPart) {\r\n\t\tconst overflowDigitsCount = nationalSignificantNumberPart.length - getMaxNumberLength(country, metadata)\r\n\t\tif (overflowDigitsCount > 0) {\r\n\t\t\treturn number.slice(0, number.length - overflowDigitsCount)\r\n\t\t}\r\n\t}\r\n\treturn number\r\n}\r\n\r\nfunction getMaxNumberLength(country, metadata) {\r\n\t// Get \"possible lengths\" for a phone number of the country.\r\n\tmetadata = new Metadata(metadata)\r\n\tmetadata.selectNumberingPlan(country)\r\n\t// Return the last \"possible length\".\r\n\treturn metadata.numberingPlan.possibleLengths()[metadata.numberingPlan.possibleLengths().length - 1]\r\n}\r\n\r\n// If the phone number being input is an international one\r\n// then tries to derive the country from the phone number.\r\n// (regardless of whether there's any country currently selected)\r\n/**\r\n * @param {string} partialE164Number - A possibly incomplete E.164 phone number.\r\n * @param {string?} country - Currently selected country.\r\n * @param {string[]?} countries - A list of available countries. If not passed then \"all countries\" are assumed.\r\n * @param {string?} defaultCountry — Default country.\r\n * @param {string?} latestCountrySelectedByUser — The latest country that has been manually selected by the user.\r\n * @param {boolean?} required — Whether \"International\" option could be selected, meaning \"no country is selected\".\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string?}\r\n */\r\nexport function getCountryForPartialE164Number(partialE164Number, {\r\n\tcountry,\r\n\tcountries,\r\n\tdefaultCountry,\r\n\tlatestCountrySelectedByUser,\r\n\trequired,\r\n\tmetadata\r\n}) {\r\n\t// `partialE164Number` is supposed to be an E.164 phone number.\r\n\r\n\t// `partialE164Number` is supposed to be non-empty when calling this function\r\n\t// so it doesn't check for `if (!partialE164Number)`.\r\n\r\n\tif (partialE164Number === '+') {\r\n\t\t// Don't change the currently selected country yet.\r\n\t\treturn country\r\n\t}\r\n\r\n\tconst derived_country = getCountryFromPossiblyIncompleteInternationalPhoneNumber(partialE164Number, metadata)\r\n\r\n\t// If a phone number is being input in international form\r\n\t// and the country can already be derived from it,\r\n\t// then select that country.\r\n\tif (derived_country) {\r\n\t\tif (!countries || (countries.indexOf(derived_country) >= 0)) {\r\n\t\t\treturn derived_country\r\n\t\t} else {\r\n\t\t\treturn undefined\r\n\t\t}\r\n\t}\r\n\t// Otherwise, if the phone number doesn't correspond to any particular country.\r\n\t// If some country was previously selected.\r\n\telse if (country) {\r\n\t\t// If the international phone number entered could still correspond to the previously selected country\r\n\t\t// and also to some other country or countries corresponding to the same calling code\r\n\t\t// then it should reset the currently selected country to reflect the ambiguity.\r\n\t\tif (couldNumberBelongToCountry(partialE164Number, country, metadata)) {\r\n\t\t\t// Reset the country either to the latest one that was manually selected by the user\r\n\t\t\t// or to the default country or just reset the country selection.\r\n\t\t\tif (latestCountrySelectedByUser && couldNumberBelongToCountry(partialE164Number, latestCountrySelectedByUser, metadata)) {\r\n\t\t\t\treturn latestCountrySelectedByUser\r\n\t\t\t} else if (defaultCountry && couldNumberBelongToCountry(partialE164Number, defaultCountry, metadata)) {\r\n\t\t\t\treturn defaultCountry\r\n\t\t\t} else {\r\n\t\t\t\tif (!required) {\r\n\t\t\t\t\t// Just reset the currently selected country.\r\n\t\t\t\t\treturn undefined\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// If \"International\" country option has not been disabled\r\n\t\t\t// and the international phone number entered doesn't necessarily correspond to\r\n\t\t\t// the currently selected country and it could not possibly correspond to it\r\n\t\t\t// then reset the currently selected country.\r\n\t\t\tif (!required) {\r\n\t\t\t\treturn undefined\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// Don't change the currently selected country.\r\n\treturn country\r\n}\r\n\r\n/**\r\n * Parses `` value. Derives `country` from `input`. Derives an E.164 `value`.\r\n * @param {string?} phoneDigits — Parsed `` value. Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\r\n * @param {string?} prevPhoneDigits — Previous parsed `` value. Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\r\n * @param {string?} country - Currently selected country.\r\n * @param {string?} defaultCountry - Default country.\r\n * @param {string?} latestCountrySelectedByUser - The latest country that has been manually selected by the user.\r\n * @param {boolean} countryRequired - Is selecting some country required.\r\n * @param {function} getAnyCountry - Can be used to get any country when selecting some country required.\r\n * @param {string[]?} countries - A list of available countries. If not passed then \"all countries\" are assumed.\r\n * @param {boolean} international - Set to `true` to force international phone number format (leading `+`). Set to `false` to force \"national\" phone number format. Is `undefined` by default.\r\n * @param {boolean} limitMaxLength — Whether to enable limiting phone number max length.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {object} An object of shape `{ phoneDigits, country, value }`. `phoneDigits` returned here are a \"normalized\" version of the original `phoneDigits`. The returned `phoneDigits` shouldn't be used anywhere except for passing it as `prevPhoneDigits` parameter to this same function on next input change event.\r\n */\r\nexport function onPhoneDigitsChange(phoneDigits, {\r\n\tprevPhoneDigits,\r\n\tcountry,\r\n\tdefaultCountry,\r\n\tlatestCountrySelectedByUser,\r\n\tcountryRequired,\r\n\tgetAnyCountry,\r\n\tcountries,\r\n\tinternational,\r\n\tlimitMaxLength,\r\n\tcountryCallingCodeEditable,\r\n\tmetadata\r\n}) {\r\n\t// When the input is in `international` and `countryCallingCodeEditable={false}` mode,\r\n\t// the `country` should not change. If the user attempted to overwrite the country callling code part,\r\n\t// the component should reset it back to the correct country calling code for the `country`.\r\n\tif (international && countryCallingCodeEditable === false) {\r\n\t\tif (country) {\r\n\t\t\t// For international phone numbers written with non-editable country calling code,\r\n\t\t\t// the `` value must always start with that non-editable country calling code.\r\n\t\t\tconst prefix = getInternationalPhoneNumberPrefix(country, metadata)\r\n\t\t\t// If the input value doesn't start with the non-editable country calling code,\r\n\t\t\t// it should be fixed.\r\n\t\t\tif (phoneDigits.indexOf(prefix) !== 0) {\r\n\t\t\t\tlet value\r\n\t\t\t\t// If a phone number input is declared as\r\n\t\t\t\t// `international: true` and `countryCallingCodeEditable: false`,\r\n\t\t\t\t// then the value of the `` is gonna be non-empty at all times,\r\n\t\t\t\t// even before the user has started to input any digits in the input field,\r\n\t\t\t\t// because the country calling code is always there by design.\r\n\t\t\t\t//\r\n\t\t\t\t// The fact that the input value is always non-empty results in a side effect:\r\n\t\t\t\t// whenever a user tabs into such input field, its value gets automatically selected.\r\n\t\t\t\t// If at that moment in time the user starts typing in the national digits of the phone number,\r\n\t\t\t\t// the selected `` value gets automatically replaced by those typed-in digits\r\n\t\t\t\t// so the value changes from `+xxx` to `y`, because inputting anything while having\r\n\t\t\t\t// the `` value selected results in erasing that `` value.\r\n\t\t\t\t//\r\n\t\t\t\t// This component handles such cases by restoring the `` value to what\r\n\t\t\t\t// it should be in such cases: `+xxxy`.\r\n\t\t\t\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/43\r\n\t\t\t\t//\r\n\t\t\t\tconst hasStartedTypingInNationalNumberDigitsHavingInputValueSelected = phoneDigits && phoneDigits[0] !== '+'\r\n\t\t\t\tif (hasStartedTypingInNationalNumberDigitsHavingInputValueSelected) {\r\n\t\t\t\t\t// Fix the input value to what it should be: `y` → `+xxxy`.\r\n\t\t\t\t\tphoneDigits = prefix + phoneDigits\r\n\t\t\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// In other cases, simply reset the `` value, because there're only two\r\n\t\t\t\t\t// possible cases:\r\n\t\t\t\t\t// * The user has selected the `` value and then hit Delete/Backspace to erase it.\r\n\t\t\t\t\t// * The user has pasted an international phone number for another country calling code,\r\n\t\t\t\t\t// which is considered a non-valid value.\r\n\t\t\t\t\tphoneDigits = prefix\r\n\t\t\t\t}\r\n\t\t\t\treturn {\r\n\t\t\t\t\tphoneDigits,\r\n\t\t\t\t\tvalue,\r\n\t\t\t\t\tcountry\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// If `international` property is `false`, then it means\r\n\t// \"enforce national-only format during input\",\r\n\t// so, if that's the case, then remove all `+` characters,\r\n\t// but only if some country is currently selected.\r\n\t// (not if \"International\" country is selected).\r\n\tif (international === false && country && phoneDigits && phoneDigits[0] === '+') {\r\n\t\tphoneDigits = convertInternationalPhoneDigitsToNational(phoneDigits, country, metadata)\r\n\t}\r\n\r\n\t// Trim the input to not exceed the maximum possible number length.\r\n\tif (phoneDigits && country && limitMaxLength) {\r\n\t\tphoneDigits = trimNumber(phoneDigits, country, metadata)\r\n\t}\r\n\r\n\t// If this `onChange()` event was triggered\r\n\t// as a result of selecting \"International\" country,\r\n\t// then force-prepend a `+` sign if the phone number\r\n\t// `` value isn't in international format.\r\n\t// Also, force-prepend a `+` sign if international\r\n\t// phone number input format is set.\r\n\tif (phoneDigits && phoneDigits[0] !== '+' && (!country || international)) {\r\n\t\tphoneDigits = '+' + phoneDigits\r\n\t}\r\n\r\n\t// If the previously entered phone number\r\n\t// has been entered in international format\r\n\t// and the user decides to erase it,\r\n\t// then also reset the `country`\r\n\t// because it was most likely automatically selected\r\n\t// while the user was typing in the phone number\r\n\t// in international format.\r\n\t// This fixes the issue when a user is presented\r\n\t// with a phone number input with no country selected\r\n\t// and then types in their local phone number\r\n\t// then discovers that the input's messed up\r\n\t// (a `+` has been prepended at the start of their input\r\n\t// and a random country has been selected),\r\n\t// decides to undo it all by erasing everything\r\n\t// and then types in their local phone number again\r\n\t// resulting in a seemingly correct phone number\r\n\t// but in reality that phone number has incorrect country.\r\n\t// https://github.com/catamphetamine/react-phone-number-input/issues/273\r\n\tif (!phoneDigits && prevPhoneDigits && prevPhoneDigits[0] === '+') {\r\n\t\tif (international) {\r\n\t\t\tcountry = undefined\r\n\t\t} else {\r\n\t\t\tcountry = defaultCountry\r\n\t\t}\r\n\t}\r\n\t// Also resets such \"randomly\" selected country\r\n\t// as soon as the user erases the number\r\n\t// digit-by-digit up to the leading `+` sign.\r\n\tif (phoneDigits === '+' && prevPhoneDigits && prevPhoneDigits[0] === '+' && prevPhoneDigits.length > '+'.length) {\r\n\t\tcountry = undefined\r\n\t}\r\n\r\n\t// Generate the new `value` property.\r\n\tlet value\r\n\tif (phoneDigits) {\r\n\t\tif (phoneDigits[0] === '+') {\r\n\t\t\tif (phoneDigits === '+') {\r\n\t\t\t\tvalue = undefined\r\n\t\t\t} else if (country && getInternationalPhoneNumberPrefix(country, metadata).indexOf(phoneDigits) === 0) {\r\n\t\t\t\t// Selected a `country` and started inputting an\r\n\t\t\t\t// international phone number for this country\r\n\t\t\t\t// but hasn't input any \"national (significant) number\" digits yet.\r\n\t\t\t\t// In that case, assume `value` be `undefined`.\r\n\t\t\t\t//\r\n\t\t\t\t// For example, if selected `country` `\"US\"`\r\n\t\t\t\t// and started inputting phone number `\"+1\"`\r\n\t\t\t\t// then `value` `undefined` will be returned from this function.\r\n\t\t\t\t//\r\n\t\t\t\tvalue = undefined\r\n\t\t\t} else {\r\n\t\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t}\r\n\t}\r\n\r\n\t// Derive the country from the phone number.\r\n\t// (regardless of whether there's any country currently selected,\r\n\t// because there could be several countries corresponding to one country calling code)\r\n\tif (value) {\r\n\t\tcountry = getCountryForPartialE164Number(value, {\r\n\t\t\tcountry,\r\n\t\t\tcountries,\r\n\t\t\tdefaultCountry,\r\n\t\t\tlatestCountrySelectedByUser,\r\n\t\t\t// `countryRequired` flag is not passed here.\r\n\t\t\t// Instead, it's explicitly checked a bit later in the code.\r\n\t\t\trequired: false,\r\n\t\t\tmetadata\r\n\t\t})\r\n\t\t// If `international` property is `false`, then it means\r\n\t\t// \"enforce national-only format during input\",\r\n\t\t// so, if that's the case, then remove all `+` characters,\r\n\t\t// but only if some country is currently selected.\r\n\t\t// (not if \"International\" country is selected).\r\n\t\tif (international === false && country && phoneDigits && phoneDigits[0] === '+') {\r\n\t\t\tphoneDigits = convertInternationalPhoneDigitsToNational(phoneDigits, country, metadata)\r\n\t\t\t// Re-calculate `value` because `phoneDigits` has changed.\r\n\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t}\r\n\t}\r\n\r\n\tif (!country && countryRequired) {\r\n\t\tcountry = defaultCountry || getAnyCountry()\r\n\t}\r\n\r\n\treturn {\r\n\t\t// `phoneDigits` returned here are a \"normalized\" version of the original `phoneDigits`.\r\n\t\t// The returned `phoneDigits` shouldn't be used anywhere except for passing it as\r\n\t\t// `prevPhoneDigits` parameter to this same function on next input change event.\r\n\t\tphoneDigits,\r\n\t\tcountry,\r\n\t\tvalue\r\n\t}\r\n}\r\n\r\nfunction convertInternationalPhoneDigitsToNational(input, country, metadata) {\r\n\t// Handle the case when a user might have pasted\r\n\t// a phone number in international format.\r\n\tif (input.indexOf(getInternationalPhoneNumberPrefix(country, metadata)) === 0) {\r\n\t\t// Create \"as you type\" formatter.\r\n\t\tconst formatter = new AsYouType(country, metadata)\r\n\t\t// Input partial national phone number.\r\n\t\tformatter.input(input)\r\n\t\t// Return the parsed partial national phone number.\r\n\t\tconst phoneNumber = formatter.getNumber()\r\n\t\tif (phoneNumber) {\r\n\t\t\t// Transform the number to a national one,\r\n\t\t\t// and remove all non-digits.\r\n\t\t\treturn phoneNumber.formatNational().replace(/\\D/g, '')\r\n\t\t} else {\r\n\t\t\treturn ''\r\n\t\t}\r\n\t} else {\r\n\t\t// Just remove the `+` sign.\r\n\t\treturn input.replace(/\\D/g, '')\r\n\t}\r\n}\r\n\r\n/**\r\n * Determines the country for a given (possibly incomplete) E.164 phone number.\r\n * @param {string} number - A possibly incomplete E.164 phone number.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string?}\r\n */\r\nexport function getCountryFromPossiblyIncompleteInternationalPhoneNumber(number, metadata) {\r\n\tconst formatter = new AsYouType(null, metadata)\r\n\tformatter.input(number)\r\n\t// // `001` is a special \"non-geograpical entity\" code\r\n\t// // in Google's `libphonenumber` library.\r\n\t// if (formatter.getCountry() === '001') {\r\n\t// \treturn\r\n\t// }\r\n\treturn formatter.getCountry()\r\n}\r\n\r\n/**\r\n * Compares two strings.\r\n * A helper for `Array.sort()`.\r\n * @param {string} a — First string.\r\n * @param {string} b — Second string.\r\n * @param {(string[]|string)} [locales] — The `locales` argument of `String.localeCompare`.\r\n */\r\nexport function compareStrings(a, b, locales) {\r\n // Use `String.localeCompare` if it's available.\r\n // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare\r\n // Which means everyone except IE <= 10 and Safari <= 10.\r\n // `localeCompare()` is available in latest Node.js versions.\r\n /* istanbul ignore else */\r\n if (String.prototype.localeCompare) {\r\n return a.localeCompare(b, locales);\r\n }\r\n /* istanbul ignore next */\r\n return a < b ? -1 : (a > b ? 1 : 0);\r\n}\r\n\r\n/**\r\n * Strips `+${countryCallingCode}` prefix from an E.164 phone number.\r\n * @param {string} number - (possibly incomplete) E.164 phone number.\r\n * @param {string?} country - A possible country for this phone number.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string}\r\n */\r\nexport function stripCountryCallingCode(number, country, metadata) {\r\n\t// Just an optimization, so that it\r\n\t// doesn't have to iterate through all country calling codes.\r\n\tif (country) {\r\n\t\tconst countryCallingCodePrefix = '+' + getCountryCallingCode(country, metadata)\r\n\r\n\t\t// If `country` fits the actual `number`.\r\n\t\tif (number.length < countryCallingCodePrefix.length) {\r\n\t\t\tif (countryCallingCodePrefix.indexOf(number) === 0) {\r\n\t\t\t\treturn ''\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (number.indexOf(countryCallingCodePrefix) === 0) {\r\n\t\t\t\treturn number.slice(countryCallingCodePrefix.length)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// If `country` doesn't fit the actual `number`.\r\n\t// Try all available country calling codes.\r\n\tfor (const country_calling_code of Object.keys(metadata.country_calling_codes)) {\r\n\t\tif (number.indexOf(country_calling_code) === '+'.length) {\r\n\t\t\treturn number.slice('+'.length + country_calling_code.length)\r\n\t\t}\r\n\t}\r\n\r\n\treturn ''\r\n}\r\n\r\n/**\r\n * Parses a partially entered national phone number digits\r\n * (or a partially entered E.164 international phone number)\r\n * and returns the national significant number part.\r\n * National significant number returned doesn't come with a national prefix.\r\n * @param {string} number - National number digits. Or possibly incomplete E.164 phone number.\r\n * @param {string?} country\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string} [result]\r\n */\r\nexport function getNationalSignificantNumberDigits(number, country, metadata) {\r\n\t// Create \"as you type\" formatter.\r\n\tconst formatter = new AsYouType(country, metadata)\r\n\t// Input partial national phone number.\r\n\tformatter.input(number)\r\n\t// Return the parsed partial national phone number.\r\n\tconst phoneNumber = formatter.getNumber()\r\n\treturn phoneNumber && phoneNumber.nationalNumber\r\n}\r\n\r\n/**\r\n * Checks if a partially entered E.164 phone number could belong to a country.\r\n * @param {string} number\r\n * @param {string} country\r\n * @return {boolean}\r\n */\r\nexport function couldNumberBelongToCountry(number, country, metadata) {\r\n\tconst intlPhoneNumberPrefix = getInternationalPhoneNumberPrefix(country, metadata)\r\n\tlet i = 0\r\n\twhile (i < number.length && i < intlPhoneNumberPrefix.length) {\r\n\t\tif (number[i] !== intlPhoneNumberPrefix[i]) {\r\n\t\t\treturn false\r\n\t\t}\r\n\t\ti++\r\n\t}\r\n\treturn true\r\n}\r\n\r\n/**\r\n * Gets initial \"phone digits\" (including `+`, if using international format).\r\n * @return {string} [phoneDigits] Returns `undefined` if there should be no initial \"phone digits\".\r\n */\r\nexport function getInitialPhoneDigits({\r\n\tvalue,\r\n\tphoneNumber,\r\n\tdefaultCountry,\r\n\tinternational,\r\n\tuseNationalFormat,\r\n\tmetadata\r\n}) {\r\n\t// If the `value` (E.164 phone number)\r\n\t// belongs to the currently selected country\r\n\t// and `useNationalFormat` is `true`\r\n\t// then convert `value` (E.164 phone number)\r\n\t// to a local phone number digits.\r\n\t// E.g. '+78005553535' -> '88005553535'.\r\n\tif ((international === false || useNationalFormat) && phoneNumber && phoneNumber.country) {\r\n\t\treturn generateNationalNumberDigits(phoneNumber)\r\n\t}\r\n\t// If `international` property is `true`,\r\n\t// meaning \"enforce international phone number format\",\r\n\t// then always show country calling code in the input field.\r\n\tif (!value && international && defaultCountry) {\r\n\t\treturn getInternationalPhoneNumberPrefix(defaultCountry, metadata)\r\n\t}\r\n\treturn value\r\n}\r\n\r\n// function doesIncompletePhoneNumberCorrespondToASingleCountry(value, metadata) {\r\n// \t// Create \"as you type\" formatter.\r\n// \tconst formatter = new AsYouType(undefined, metadata)\r\n// \t// Input partial national phone number.\r\n// \tformatter.input(value)\r\n// \t// Return the parsed partial national phone number.\r\n// \tconst phoneNumber = formatter.getNumber()\r\n// \tif (phoneNumber) {\r\n// \t\treturn phoneNumber.getPossibleCountries().length === 1\r\n// \t} else {\r\n// \t\treturn false\r\n// \t}\r\n// }","import {\r\n\tgetInitialPhoneDigits,\r\n\tgetCountryForPartialE164Number,\r\n\tparsePhoneNumber,\r\n\tcouldNumberBelongToCountry\r\n} from './phoneInputHelpers.js'\r\n\r\nimport { validateE164Number } from './isE164Number.js'\r\n\r\nimport getInternationalPhoneNumberPrefix from './getInternationalPhoneNumberPrefix.js'\r\n\r\nimport {\r\n\tisCountrySupportedWithError,\r\n\tgetSupportedCountries\r\n} from './countries.js'\r\n\r\nexport default function getPhoneInputWithCountryStateUpdateFromNewProps(props, prevProps, state) {\r\n\tconst {\r\n\t\tmetadata,\r\n\t\tcountries,\r\n\t\tdefaultCountry: newDefaultCountry,\r\n\t\tvalue: newValue,\r\n\t\treset: newReset,\r\n\t\tinternational,\r\n\t\t// `displayInitialValueAsLocalNumber` property has been\r\n\t\t// superceded by `initialValueFormat` property.\r\n\t\tdisplayInitialValueAsLocalNumber,\r\n\t\tinitialValueFormat\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tdefaultCountry: prevDefaultCountry,\r\n\t\tvalue: prevValue,\r\n\t\treset: prevReset\r\n\t} = prevProps\r\n\r\n\tconst {\r\n\t\tcountry,\r\n\t\tvalue,\r\n\t\t// If the user has already manually selected a country\r\n\t\t// then don't override that already selected country\r\n\t\t// if the `defaultCountry` property changes.\r\n\t\t// That's what `hasUserSelectedACountry` flag is for.\r\n\t\thasUserSelectedACountry,\r\n\t\tlatestCountrySelectedByUser\r\n\t} = state\r\n\r\n\tconst _getInitialPhoneDigits = (parameters) => getInitialPhoneDigits({\r\n\t\t...parameters,\r\n\t\tinternational,\r\n\t\tuseNationalFormat: displayInitialValueAsLocalNumber || initialValueFormat === 'national',\r\n\t\tmetadata\r\n\t})\r\n\r\n\t// Some users requested a way to reset the component\r\n\t// (both number `` and country ``).\r\n\t// Whenever `reset` property changes both number ``\r\n\t// and country `` are reset.\r\n\t// It's not implemented as some instance `.reset()` method\r\n\t// because `ref` is forwarded to ``.\r\n\t// It's also not replaced with just resetting `country` on\r\n\t// external `value` reset, because a user could select a country\r\n\t// and then not input any `value`, and so the selected country\r\n\t// would be \"stuck\", if not using this `reset` property.\r\n\t// https://github.com/catamphetamine/react-phone-number-input/issues/300\r\n\tif (newReset !== prevReset) {\r\n\t\treturn {\r\n\t\t\tphoneDigits: _getInitialPhoneDigits({\r\n\t\t\t\tvalue: undefined,\r\n\t\t\t\tdefaultCountry: newDefaultCountry\r\n\t\t\t}),\r\n\t\t\tvalue: undefined,\r\n\t\t\tcountry: newDefaultCountry,\r\n\t\t\tlatestCountrySelectedByUser: undefined,\r\n\t\t\thasUserSelectedACountry: undefined\r\n\t\t}\r\n\t}\r\n\r\n\t// `value` is the value currently shown in the component:\r\n\t// it's stored in the component's `state`, and it's not the `value` property.\r\n\t// `prevValue` is \"previous `value` property\".\r\n\t// `newValue` is \"new `value` property\".\r\n\r\n\t// If the default country changed\r\n\t// (e.g. in case of ajax GeoIP detection after page loaded)\r\n\t// then select it, but only if the user hasn't already manually\r\n\t// selected a country, and no phone number has been manually entered so far.\r\n\t// Because if the user has already started inputting a phone number\r\n\t// then they're okay with no country being selected at all (\"International\")\r\n\t// and they don't want to be disturbed, don't want their input to be screwed, etc.\r\n\tif (newDefaultCountry !== prevDefaultCountry) {\r\n\t\tconst isNewDefaultCountrySupported = !newDefaultCountry || isCountrySupportedWithError(newDefaultCountry, metadata)\r\n\t\tconst noValueHasBeenEnteredByTheUser = (\r\n\t\t\t// By default, \"no value has been entered\" means `value` is `undefined`.\r\n\t\t\t!value ||\r\n\t\t\t// When `international` is `true`, and some country has been pre-selected,\r\n\t\t\t// then the `` contains a pre-filled value of `+${countryCallingCode}${leadingDigits}`,\r\n\t\t\t// so in case of `international` being `true`, \"the user hasn't entered anything\" situation\r\n\t\t\t// doesn't just mean `value` is `undefined`, but could also mean `value` is `+${countryCallingCode}`.\r\n\t\t\t(international && value === _getInitialPhoneDigits({\r\n\t\t\t\tvalue: undefined,\r\n\t\t\t\tdefaultCountry: prevDefaultCountry\r\n\t\t\t}))\r\n\t\t)\r\n\t\t// Only update the `defaultCountry` property if no phone number\r\n\t\t// has been entered by the user or pre-set by the application.\r\n\t\tconst noValueHasBeenEntered = !newValue && noValueHasBeenEnteredByTheUser\r\n\t\tif (!hasUserSelectedACountry && isNewDefaultCountrySupported && noValueHasBeenEntered) {\r\n\t\t\treturn {\r\n\t\t\t\tcountry: newDefaultCountry,\r\n\t\t\t\t// If `phoneDigits` is empty, then automatically select the new `country`\r\n\t\t\t\t// and set `phoneDigits` to `+{getCountryCallingCode(newCountry)}`.\r\n\t\t\t\t// The code assumes that \"no phone number has been entered by the user\",\r\n\t\t\t\t// and no `value` property has been passed, so the `phoneNumber` parameter\r\n\t\t\t\t// of `_getInitialPhoneDigits({ value, phoneNumber, ... })` is `undefined`.\r\n\t\t\t\tphoneDigits: _getInitialPhoneDigits({\r\n\t\t\t\t\tvalue: undefined,\r\n\t\t\t\t\tdefaultCountry: newDefaultCountry\r\n\t\t\t\t}),\r\n\t\t\t\t// `value` is `undefined` and it stays so.\r\n\t\t\t\tvalue: undefined\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// If a new `value` is set externally.\r\n\t// (e.g. as a result of an ajax API request\r\n\t// to get user's phone after page loaded)\r\n\t// The first part — `newValue !== prevValue` —\r\n\t// is basically `props.value !== prevProps.value`\r\n\t// so it means \"if value property was changed externally\".\r\n\t// The second part — `newValue !== value` —\r\n\t// is for ignoring the `getDerivedStateFromProps()` call\r\n\t// which happens in `this.onChange()` right after `this.setState()`.\r\n\t// If this `getDerivedStateFromProps()` call isn't ignored\r\n\t// then the country flag would reset on each input.\r\n\tif (!valuesAreEqual(newValue, prevValue) && !valuesAreEqual(newValue, value)) {\r\n\t\tlet phoneNumber\r\n\t\tlet parsedCountry\r\n\t\tif (newValue) {\r\n\t\t\t// Validate that the newly-supplied `value` is in `E.164` format.\r\n\t\t\t// Because sometimes people attempt to supply a `value` like \"+1 (879) 490-8676\".\r\n\t\t\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/231#note_2016334796\r\n\t\t\tif (newValue) {\r\n\t\t\t\tvalidateE164Number(newValue)\r\n\t\t\t}\r\n\t\t\tphoneNumber = parsePhoneNumber(newValue, metadata)\r\n\t\t\tconst supportedCountries = getSupportedCountries(countries, metadata)\r\n\t\t\tif (phoneNumber && phoneNumber.country) {\r\n\t\t\t\t// Ignore `else` because all countries are supported in metadata.\r\n\t\t\t\t/* istanbul ignore next */\r\n\t\t\t\tif (!supportedCountries || supportedCountries.indexOf(phoneNumber.country) >= 0) {\r\n\t\t\t\t\tparsedCountry = phoneNumber.country\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tparsedCountry = getCountryForPartialE164Number(newValue, {\r\n\t\t\t\t\tcountry: undefined,\r\n\t\t\t\t\tcountries: supportedCountries,\r\n\t\t\t\t\tmetadata\r\n\t\t\t\t})\r\n\r\n\t\t\t\t// In cases when multiple countries correspond to the same country calling code,\r\n\t\t\t\t// the phone number digits of `newValue` have to be matched against country-specific\r\n\t\t\t\t// regular expressions in order to determine the exact country.\r\n\t\t\t\t// Sometimes, that algorithm can't decide for sure which country does the phone number belong to,\r\n\t\t\t\t// for example when the digits of `newValue` don't match any of those regular expressions.\r\n\t\t\t\t// and the country of the phone number couldn't be determined.\r\n\t\t\t\t// In those cases, people prefer the component to show the flag of the `defaultCountry`\r\n\t\t\t\t// if the phone number could potentially belong to that `defaultCountry`.\r\n\t\t\t\t// At least that's how the component behaves when a user pastes an international\r\n\t\t\t\t// phone number into the input field: for example, when `defaultCountry` is `\"US\"`\r\n\t\t\t\t// and the user pastes value \"+1 555 555 5555\" into the input field, it keep showing \"US\" flag.\r\n\t\t\t\t// So when setting new `value` property externally, the component should behave the same way:\r\n\t\t\t\t// it should select the `defaultCountry` when the new `value` could potentially belong\r\n\t\t\t\t// to that country in cases when the exact country can't be determined.\r\n\t\t\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/413#issuecomment-1536219404\r\n\t\t\t\tif (!parsedCountry) {\r\n\t\t\t\t\tif (newDefaultCountry) {\r\n\t\t\t\t\t\tif (newValue.indexOf(getInternationalPhoneNumberPrefix(newDefaultCountry, metadata)) === 0) {\r\n\t\t\t\t\t\t\tparsedCountry = newDefaultCountry\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tlet userCountrySelectionHistoryStateUpdate\r\n\t\tif (newValue) {\r\n\t\t\t// If the latest country that has been manually selected by the user\r\n\t\t\t// no longer corresponds to the new value then reset it.\r\n\t\t\tif (latestCountrySelectedByUser) {\r\n\t\t\t\tconst couldNewValueCorrespondToLatestCountrySelectedByUser =\r\n\t\t\t\t\tparsedCountry\r\n\t\t\t\t\t\t? latestCountrySelectedByUser === parsedCountry\r\n\t\t\t\t\t\t: couldNumberBelongToCountry(newValue, latestCountrySelectedByUser, metadata)\r\n\r\n\t\t\t\tif (couldNewValueCorrespondToLatestCountrySelectedByUser) {\r\n\t\t\t\t\tif (!parsedCountry) {\r\n\t\t\t\t\t\tparsedCountry = latestCountrySelectedByUser\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\tuserCountrySelectionHistoryStateUpdate = {\r\n\t\t\t\t\t\tlatestCountrySelectedByUser: undefined\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// When the `value` property is being reset \"externally\",\r\n\t\t\t// reset any tracking of the country that the user has previously selected.\r\n\t\t\tuserCountrySelectionHistoryStateUpdate = {\r\n\t\t\t\tlatestCountrySelectedByUser: undefined,\r\n\t\t\t\thasUserSelectedACountry: undefined\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\t...userCountrySelectionHistoryStateUpdate,\r\n\t\t\tphoneDigits: _getInitialPhoneDigits({\r\n\t\t\t\tphoneNumber,\r\n\t\t\t\tvalue: newValue,\r\n\t\t\t\tdefaultCountry: newDefaultCountry\r\n\t\t\t}),\r\n\t\t\tvalue: newValue,\r\n\t\t\tcountry: newValue ? parsedCountry : newDefaultCountry\r\n\t\t}\r\n\t}\r\n\r\n\t// `defaultCountry` didn't change.\r\n\t// `value` didn't change.\r\n\t// `phoneDigits` didn't change, because `value` didn't change.\r\n\t//\r\n\t// So no need to update state.\r\n}\r\n\r\nexport function valuesAreEqual(value1, value2) {\r\n\t// If `value` has been set to `null` externally then convert it to `undefined`.\r\n\t//\r\n\t// For example, `react-hook-form` sets `value` to `null` when the user clears the input.\r\n\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/164\r\n\t// In that case, without this conversion of `null` to `undefined`, it would reset\r\n\t// the selected country to `defaultCountry` because in that case `newValue !== value`\r\n\t// because `null !== undefined`.\r\n\t//\r\n\t// Historically, empty `value` is encoded as `undefined`.\r\n\t// Perhaps empty `value` would be better encoded as `null` instead.\r\n\t// But because that would be a potentially breaking change for some people,\r\n\t// it's left as is for the current \"major\" version of this library.\r\n\t//\r\n\tif (value1 === null) {\r\n\t\tvalue1 = undefined\r\n\t}\r\n\tif (value2 === null) {\r\n\t\tvalue2 = undefined\r\n\t}\r\n\treturn value1 === value2\r\n}","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport classNames from 'classnames'\r\n\r\nimport InputSmart from './InputSmart.js'\r\nimport InputBasic from './InputBasic.js'\r\n\r\nimport { CountrySelectWithIcon as CountrySelect } from './CountrySelect.js'\r\n\r\nimport Flag from './Flag.js'\r\nimport InternationalIcon from './InternationalIcon.js'\r\n\r\nimport { validateE164Number } from './helpers/isE164Number.js'\r\n\r\nimport {\r\n\tsortCountryOptions,\r\n\tisCountrySupportedWithError,\r\n\tgetSupportedCountries,\r\n\tgetSupportedCountryOptions,\r\n\tgetCountries\r\n} from './helpers/countries.js'\r\n\r\nimport { createCountryIconComponent } from './CountryIcon.js'\r\n\r\nimport { setRefsValue } from './useExternalRef.js'\r\n\r\nimport {\r\n\tmetadata as metadataPropType,\r\n\tlabels as labelsPropType\r\n} from './PropTypes.js'\r\n\r\nimport {\r\n\tgetPreSelectedCountry,\r\n\tgetCountrySelectOptions,\r\n\tcouldNumberBelongToCountry,\r\n\tparsePhoneNumber,\r\n\tgenerateNationalNumberDigits,\r\n\tgetPhoneDigitsForNewCountry,\r\n\tgetInitialPhoneDigits,\r\n\tonPhoneDigitsChange,\r\n\te164\r\n} from './helpers/phoneInputHelpers.js'\r\n\r\nimport getPhoneInputWithCountryStateUpdateFromNewProps from './helpers/getPhoneInputWithCountryStateUpdateFromNewProps.js'\r\n\r\nclass PhoneNumberInput_ extends React.PureComponent {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.inputRef = React.createRef()\r\n\r\n\t\tconst {\r\n\t\t\tvalue,\r\n\t\t\tlabels,\r\n\t\t\tinternational,\r\n\t\t\taddInternationalOption,\r\n\t\t\t// `displayInitialValueAsLocalNumber` property has been\r\n\t\t\t// superceded by `initialValueFormat` property.\r\n\t\t\tdisplayInitialValueAsLocalNumber,\r\n\t\t\tinitialValueFormat,\r\n\t\t\tmetadata\r\n\t\t} = this.props\r\n\r\n\t\tlet {\r\n\t\t\tdefaultCountry,\r\n\t\t\tcountries\r\n\t\t} = this.props\r\n\r\n\t\t// Validate `defaultCountry`.\r\n\t\tif (defaultCountry) {\r\n\t\t\tif (!this.isCountrySupportedWithError(defaultCountry)) {\r\n\t\t\t\tdefaultCountry = undefined\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Validate that the initially-supplied `value` is in `E.164` format.\r\n\t\t// Because sometimes people attempt to supply a `value` like \"+1 (879) 490-8676\".\r\n\t\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/231#note_2016334796\r\n\t\tif (value) {\r\n\t\t\tvalidateE164Number(value)\r\n\t\t}\r\n\r\n\t\t// Validate `countries`.\r\n\t\tcountries = getSupportedCountries(countries, metadata)\r\n\r\n\t\tconst phoneNumber = parsePhoneNumber(value, metadata)\r\n\r\n\t\tthis.CountryIcon = createCountryIconComponent(this.props)\r\n\r\n\t\tconst preSelectedCountry = getPreSelectedCountry({\r\n\t\t\tvalue,\r\n\t\t\tphoneNumber,\r\n\t\t\tdefaultCountry,\r\n\t\t\trequired: !addInternationalOption,\r\n\t\t\tcountries: countries || getCountries(metadata),\r\n\t\t\tgetAnyCountry: () => this.getFirstSupportedCountry({ countries }),\r\n\t\t\tmetadata\r\n\t\t})\r\n\r\n\t\tthis.state = {\r\n\t\t\t// Workaround for `this.props` inside `getDerivedStateFromProps()`.\r\n\t\t\tprops: this.props,\r\n\r\n\t\t\t// The country selected.\r\n\t\t\tcountry: preSelectedCountry,\r\n\r\n\t\t\t// `countries` are stored in `this.state` because they're filtered.\r\n\t\t\t// For example, a developer might theoretically pass some unsupported\r\n\t\t\t// countries as part of the `countries` property, and because of that\r\n\t\t\t// the component uses `this.state.countries` (which are filtered)\r\n\t\t\t// instead of `this.props.countries`\r\n\t\t\t// (which could potentially contain unsupported countries).\r\n\t\t\tcountries,\r\n\r\n\t\t\t// `phoneDigits` state property holds non-formatted user's input.\r\n\t\t\t// The reason is that there's no way of finding out\r\n\t\t\t// in which form should `value` be displayed: international or national.\r\n\t\t\t// E.g. if `value` is `+78005553535` then it could be input\r\n\t\t\t// by a user both as `8 (800) 555-35-35` and `+7 800 555 35 35`.\r\n\t\t\t// Hence storing just `value` is not sufficient for correct formatting.\r\n\t\t\t// E.g. if a user entered `8 (800) 555-35-35`\r\n\t\t\t// then value is `+78005553535` and `phoneDigits` are `88005553535`\r\n\t\t\t// and if a user entered `+7 800 555 35 35`\r\n\t\t\t// then value is `+78005553535` and `phoneDigits` are `+78005553535`.\r\n\t\t\tphoneDigits: getInitialPhoneDigits({\r\n\t\t\t\tvalue,\r\n\t\t\t\tphoneNumber,\r\n\t\t\t\tdefaultCountry,\r\n\t\t\t\tinternational,\r\n\t\t\t\tuseNationalFormat: displayInitialValueAsLocalNumber || initialValueFormat === 'national',\r\n\t\t\t\tmetadata\r\n\t\t\t}),\r\n\r\n\t\t\t// `value` property is duplicated in state.\r\n\t\t\t// The reason is that `getDerivedStateFromProps()`\r\n\t\t\t// needs this `value` to compare to the new `value` property\r\n\t\t\t// to find out if `phoneDigits` needs updating:\r\n\t\t\t// If the `value` property was changed externally\r\n\t\t\t// then it won't be equal to `state.value`\r\n\t\t\t// in which case `phoneDigits` and `country` should be updated.\r\n\t\t\tvalue\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tconst { onCountryChange } = this.props\r\n\t\tlet { defaultCountry } = this.props\r\n\t\tconst { country: selectedCountry } = this.state\r\n\t\tif (onCountryChange) {\r\n\t\t\tif (defaultCountry) {\r\n\t\t\t\tif (!this.isCountrySupportedWithError(defaultCountry)) {\r\n\t\t\t\t\tdefaultCountry = undefined\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif (selectedCountry !== defaultCountry) {\r\n\t\t\t\tonCountryChange(selectedCountry)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidUpdate(prevProps, prevState) {\r\n\t\tconst { onCountryChange } = this.props\r\n\t\tconst { country } = this.state\r\n\t\t// Call `onCountryChange` when user selects another country.\r\n\t\tif (onCountryChange && country !== prevState.country) {\r\n\t\t\tonCountryChange(country)\r\n\t\t}\r\n\t}\r\n\r\n\t// This function mimicks `refSetter` function returned from `useExternalRef()` hook\r\n\t// because this class-like React component can't use the `useExternalRef()` hook.\r\n\tsetInputRef = (instance) => {\r\n\t\tsetRefsValue([this.props.inputRef, this.inputRef], instance)\r\n\t}\r\n\r\n\tgetCountrySelectOptions({ countries }) {\r\n\t\tconst {\r\n\t\t\tinternational,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tcountryOptionsOrder,\r\n\t\t\taddInternationalOption,\r\n\t\t\tlabels,\r\n\t\t\tlocales,\r\n\t\t\tmetadata\r\n\t\t} = this.props\r\n\r\n\t\treturn this.useMemoCountrySelectOptions(() => {\r\n\t\t\treturn sortCountryOptions(\r\n\t\t\t\tgetCountrySelectOptions({\r\n\t\t\t\t\tcountries: countries || getCountries(metadata),\r\n\t\t\t\t\tcountryNames: labels,\r\n\t\t\t\t\taddInternationalOption: (international && countryCallingCodeEditable === false) ? false : addInternationalOption,\r\n\t\t\t\t\tcompareStringsLocales: locales,\r\n\t\t\t\t\t// compareStrings\r\n\t\t\t\t}),\r\n\t\t\t\tgetSupportedCountryOptions(countryOptionsOrder, metadata)\r\n\t\t\t)\r\n\t\t}, [\r\n\t\t\tcountries,\r\n\t\t\tcountryOptionsOrder,\r\n\t\t\taddInternationalOption,\r\n\t\t\tlabels,\r\n\t\t\tmetadata\r\n\t\t])\r\n\t}\r\n\r\n\tuseMemoCountrySelectOptions(generator, dependencies) {\r\n\t\tif (\r\n\t\t\t!this.countrySelectOptionsMemoDependencies ||\r\n\t\t\t!areEqualArrays(dependencies, this.countrySelectOptionsMemoDependencies)\r\n\t\t) {\r\n\t\t\tthis.countrySelectOptionsMemo = generator()\r\n\t\t\tthis.countrySelectOptionsMemoDependencies = dependencies\r\n\t\t}\r\n\t\treturn this.countrySelectOptionsMemo\r\n\t}\r\n\r\n\tgetFirstSupportedCountry({ countries }) {\r\n\t\tconst countryOptions = this.getCountrySelectOptions({ countries })\r\n\t\treturn countryOptions[0].value\r\n\t}\r\n\r\n\t// A shorthand for not passing `metadata` as a second argument.\r\n\tisCountrySupportedWithError = (country) => {\r\n\t\tconst { metadata } = this.props\r\n\t\treturn isCountrySupportedWithError(country, metadata)\r\n\t}\r\n\r\n\t// Country `` `onChange` handler.\r\n\tonCountryChange = (newCountry) => {\r\n\t\tconst {\r\n\t\t\tinternational,\r\n\t\t\tmetadata,\r\n\t\t\tonChange,\r\n\t\t\tfocusInputOnCountrySelection\r\n\t\t} = this.props\r\n\r\n\t\tconst {\r\n\t\t\tphoneDigits: prevPhoneDigits,\r\n\t\t\tcountry: prevCountry\r\n\t\t} = this.state\r\n\r\n\t\t// After the new `country` has been selected,\r\n\t\t// if the phone number `` holds any digits\r\n\t\t// then migrate those digits for the new `country`.\r\n\t\tconst newPhoneDigits = getPhoneDigitsForNewCountry(prevPhoneDigits, {\r\n\t\t\tprevCountry,\r\n\t\t\tnewCountry,\r\n\t\t\tmetadata,\r\n\t\t\t// Convert the phone number to \"national\" format\r\n\t\t\t// when the user changes the selected country by hand.\r\n\t\t\tuseNationalFormat: !international\r\n\t\t})\r\n\r\n\t\tconst newValue = e164(newPhoneDigits, newCountry, metadata)\r\n\r\n\t\t// Focus phone number `` upon country selection.\r\n\t\tif (focusInputOnCountrySelection) {\r\n\t\t\tthis.inputRef.current.focus()\r\n\t\t}\r\n\r\n\t\t// If the user has already manually selected a country\r\n\t\t// then don't override that already selected country\r\n\t\t// if the `defaultCountry` property changes.\r\n\t\t// That's what `hasUserSelectedACountry` flag is for.\r\n\r\n\t\tthis.setState({\r\n\t\t\tcountry: newCountry,\r\n\t\t\tlatestCountrySelectedByUser: newCountry,\r\n\t\t\thasUserSelectedACountry: true,\r\n\t\t\tphoneDigits: newPhoneDigits,\r\n\t\t\tvalue: newValue\r\n\t\t},\r\n\t\t() => {\r\n\t\t\t// Update the new `value` property.\r\n\t\t\t// Doing it after the `state` has been updated\r\n\t\t\t// because `onChange()` will trigger `getDerivedStateFromProps()`\r\n\t\t\t// with the new `value` which will be compared to `state.value` there.\r\n\t\t\tonChange(newValue)\r\n\t\t})\r\n\t}\r\n\r\n\t/**\r\n\t * `` `onChange()` handler.\r\n\t * Updates `value` property accordingly (so that they are kept in sync).\r\n\t * @param {string?} input — Either a parsed phone number or an empty string. Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\r\n\t */\r\n\tonChange = (_phoneDigits) => {\r\n\t\tconst {\r\n\t\t\tdefaultCountry,\r\n\t\t\tonChange,\r\n\t\t\taddInternationalOption,\r\n\t\t\tinternational,\r\n\t\t\tlimitMaxLength,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tmetadata\r\n\t\t} = this.props\r\n\r\n\t\tconst {\r\n\t\t\tcountries,\r\n\t\t\tphoneDigits: prevPhoneDigits,\r\n\t\t\tcountry: currentlySelectedCountry,\r\n\t\t\tlatestCountrySelectedByUser\r\n\t\t} = this.state\r\n\r\n\t\tconst {\r\n\t\t\t// `phoneDigits` returned here are a \"normalized\" version of the original `phoneDigits`.\r\n\t\t\t// The returned `phoneDigits` shouldn't be used anywhere except for passing it as\r\n\t\t\t// `prevPhoneDigits` parameter to the same `onPhoneDigitsChange()` function\r\n\t\t\t// on next input change event.\r\n\t\t\tphoneDigits,\r\n\t\t\tcountry,\r\n\t\t\tvalue\r\n\t\t} = onPhoneDigitsChange(_phoneDigits, {\r\n\t\t\tprevPhoneDigits,\r\n\t\t\tcountry: currentlySelectedCountry,\r\n\t\t\tcountryRequired: !addInternationalOption,\r\n\t\t\tdefaultCountry,\r\n\t\t\tlatestCountrySelectedByUser,\r\n\t\t\tgetAnyCountry: () => this.getFirstSupportedCountry({ countries }),\r\n\t\t\tcountries,\r\n\t\t\tinternational,\r\n\t\t\tlimitMaxLength,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tmetadata\r\n\t\t})\r\n\r\n\t\tconst stateUpdate = {\r\n\t\t\tphoneDigits,\r\n\t\t\tvalue,\r\n\t\t\tcountry\r\n\t\t}\r\n\r\n\t\t// Reset `latestCountrySelectedByUser` if it no longer fits the `value`.\r\n\t\tif (latestCountrySelectedByUser && value && !couldNumberBelongToCountry(value, latestCountrySelectedByUser, metadata)) {\r\n\t\t\tstateUpdate.latestCountrySelectedByUser = undefined\r\n\t\t}\r\n\r\n\t\tif (countryCallingCodeEditable === false) {\r\n\t\t\t// If it simply did `setState({ phoneDigits: intlPrefix })` here,\r\n\t\t\t// then it would have no effect when erasing an inital international prefix\r\n\t\t\t// via Backspace, because `phoneDigits` in `state` wouldn't change\r\n\t\t\t// as a result, because it was `prefix` and it became `prefix`,\r\n\t\t\t// so the component wouldn't rerender, and the user would be able\r\n\t\t\t// to erase the country calling code part, and that part is\r\n\t\t\t// assumed to be non-eraseable. That's why the component is\r\n\t\t\t// forcefully rerendered here.\r\n\t\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/367#issuecomment-721703501\r\n\t\t\tif (!value && phoneDigits === this.state.phoneDigits) {\r\n\t\t\t\t// Force a re-render of the `` in order to reset its value.\r\n\t\t\t\tstateUpdate.forceRerender = {}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tthis.setState(\r\n\t\t\tstateUpdate,\r\n\t\t\t// Update the new `value` property.\r\n\t\t\t// Doing it after the `state` has been updated\r\n\t\t\t// because `onChange()` will trigger `getDerivedStateFromProps()`\r\n\t\t\t// with the new `value` which will be compared to `state.value` there.\r\n\t\t\t() => onChange(value)\r\n\t\t)\r\n\t}\r\n\r\n\t// Toggles the `--focus` CSS class.\r\n\t_onFocus = () => this.setState({ isFocused: true })\r\n\r\n\t// Toggles the `--focus` CSS class.\r\n\t_onBlur = () => this.setState({ isFocused: false })\r\n\r\n\tonFocus = (event) => {\r\n\t\tthis._onFocus()\r\n\t\tconst { onFocus } = this.props\r\n\t\tif (onFocus) {\r\n\t\t\tonFocus(event)\r\n\t\t}\r\n\t}\r\n\r\n\tonBlur = (event) => {\r\n\t\tconst { onBlur } = this.props\r\n\t\tthis._onBlur()\r\n\t\tif (onBlur) {\r\n\t\t\tonBlur(event)\r\n\t\t}\r\n\t}\r\n\r\n\tonCountryFocus = (event) => {\r\n\t\tthis._onFocus()\r\n\t\t// this.setState({ countrySelectFocused: true })\r\n\t\tconst { countrySelectProps } = this.props\r\n\t\tif (countrySelectProps) {\r\n\t\t\tconst { onFocus } = countrySelectProps\r\n\t\t\tif (onFocus) {\r\n\t\t\t\tonFocus(event)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tonCountryBlur = (event) => {\r\n\t\tthis._onBlur()\r\n\t\t// this.setState({ countrySelectFocused: false })\r\n\t\tconst { countrySelectProps } = this.props\r\n\t\tif (countrySelectProps) {\r\n\t\t\tconst { onBlur } = countrySelectProps\r\n\t\t\tif (onBlur) {\r\n\t\t\t\tonBlur(event)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// `state` holds previous props as `props`, and also:\r\n\t// * `country` — The currently selected country, e.g. `\"RU\"`.\r\n\t// * `value` — The currently entered phone number (E.164), e.g. `+78005553535`.\r\n\t// * `phoneDigits` — The parsed `` value, e.g. `8005553535`.\r\n\t// (and a couple of other less significant properties)\r\n\tstatic getDerivedStateFromProps(props, state) {\r\n\t\treturn {\r\n\t\t\t// Emulate `prevProps` via `state.props`.\r\n\t\t\tprops,\r\n\t\t\t...getPhoneInputWithCountryStateUpdateFromNewProps(props, state.props, state)\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst {\r\n\t\t\t// Generic HTML attributes.\r\n\t\t\tname,\r\n\t\t\tdisabled,\r\n\t\t\treadOnly,\r\n\t\t\tautoComplete,\r\n\t\t\tstyle,\r\n\t\t\tclassName,\r\n\r\n\t\t\t// Number `` properties.\r\n\t\t\tinputRef,\r\n\t\t\tinputComponent,\r\n\t\t\tnumberInputProps,\r\n\t\t\tsmartCaret,\r\n\r\n\t\t\t// Country `` properties.\r\n\t\t\tcountrySelectComponent: CountrySelectComponent,\r\n\t\t\tcountrySelectProps,\r\n\r\n\t\t\t// Container `` properties.\r\n\t\t\tcontainerComponent: ContainerComponent,\r\n\t\t\tcontainerComponentProps,\r\n\r\n\t\t\t// Get \"rest\" properties (passed through to number ``).\r\n\t\t\tdefaultCountry,\r\n\t\t\tcountries: countriesProperty,\r\n\t\t\tcountryOptionsOrder,\r\n\t\t\tlabels,\r\n\t\t\tflags,\r\n\t\t\tflagComponent,\r\n\t\t\tflagUrl,\r\n\t\t\taddInternationalOption,\r\n\t\t\tinternationalIcon,\r\n\t\t\t// `displayInitialValueAsLocalNumber` property has been\r\n\t\t\t// superceded by `initialValueFormat` property.\r\n\t\t\tdisplayInitialValueAsLocalNumber,\r\n\t\t\tinitialValueFormat,\r\n\t\t\tonCountryChange,\r\n\t\t\tlimitMaxLength,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tfocusInputOnCountrySelection,\r\n\t\t\treset,\r\n\t\t\tmetadata,\r\n\t\t\tinternational,\r\n\t\t\tlocales,\r\n\t\t\t// compareStrings,\r\n\t\t\t...rest\r\n\t\t} = this.props\r\n\r\n\t\tconst {\r\n\t\t\tcountry,\r\n\t\t\tcountries,\r\n\t\t\tphoneDigits,\r\n\t\t\tisFocused\r\n\t\t} = this.state\r\n\r\n\t\tconst InputComponent = smartCaret ? InputSmart : InputBasic\r\n\r\n\t\tconst countrySelectOptions = this.getCountrySelectOptions({ countries })\r\n\r\n\t\treturn (\r\n\t\t\t