{store.getState()}
\r\n * }\r\n */\n\nexport function useReduxContext() {\n var contextValue = useContext(ReactReduxContext);\n\n if (process.env.NODE_ENV !== 'production' && !contextValue) {\n throw new Error('could not find react-redux context value; please ensure the component is wrapped in a {store.getState()}
\r\n * }\r\n */\n\nexport var useStore = /*#__PURE__*/createStoreHook();","import { ReactReduxContext } from '../components/Context';\nimport { useStore as useDefaultStore, createStoreHook } from './useStore';\n/**\r\n * Hook factory, which creates a `useDispatch` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `\r\n * {value}\r\n * \r\n *
\r\n * )\r\n * }\r\n */\n\nexport var useDispatch = /*#__PURE__*/createDispatchHook();","import { useReducer, useRef, useMemo, useContext, useDebugValue } from 'react';\nimport { useReduxContext as useDefaultReduxContext } from './useReduxContext';\nimport { createSubscription } from '../utils/Subscription';\nimport { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';\nimport { ReactReduxContext } from '../components/Context';\n\nvar refEquality = function refEquality(a, b) {\n return a === b;\n};\n\nfunction useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub) {\n var _useReducer = useReducer(function (s) {\n return s + 1;\n }, 0),\n forceRender = _useReducer[1];\n\n var subscription = useMemo(function () {\n return createSubscription(store, contextSub);\n }, [store, contextSub]);\n var latestSubscriptionCallbackError = useRef();\n var latestSelector = useRef();\n var latestStoreState = useRef();\n var latestSelectedState = useRef();\n var storeState = store.getState();\n var selectedState;\n\n try {\n if (selector !== latestSelector.current || storeState !== latestStoreState.current || latestSubscriptionCallbackError.current) {\n var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references\n\n if (latestSelectedState.current === undefined || !equalityFn(newSelectedState, latestSelectedState.current)) {\n selectedState = newSelectedState;\n } else {\n selectedState = latestSelectedState.current;\n }\n } else {\n selectedState = latestSelectedState.current;\n }\n } catch (err) {\n if (latestSubscriptionCallbackError.current) {\n err.message += \"\\nThe error may be correlated with this previous error:\\n\" + latestSubscriptionCallbackError.current.stack + \"\\n\\n\";\n }\n\n throw err;\n }\n\n useIsomorphicLayoutEffect(function () {\n latestSelector.current = selector;\n latestStoreState.current = storeState;\n latestSelectedState.current = selectedState;\n latestSubscriptionCallbackError.current = undefined;\n });\n useIsomorphicLayoutEffect(function () {\n function checkForUpdates() {\n try {\n var newStoreState = store.getState(); // Avoid calling selector multiple times if the store's state has not changed\n\n if (newStoreState === latestStoreState.current) {\n return;\n }\n\n var _newSelectedState = latestSelector.current(newStoreState);\n\n if (equalityFn(_newSelectedState, latestSelectedState.current)) {\n return;\n }\n\n latestSelectedState.current = _newSelectedState;\n latestStoreState.current = newStoreState;\n } catch (err) {\n // we ignore all errors here, since when the component\n // is re-rendered, the selectors are called again, and\n // will throw again, if neither props nor store state\n // changed\n latestSubscriptionCallbackError.current = err;\n }\n\n forceRender();\n }\n\n subscription.onStateChange = checkForUpdates;\n subscription.trySubscribe();\n checkForUpdates();\n return function () {\n return subscription.tryUnsubscribe();\n };\n }, [store, subscription]);\n return selectedState;\n}\n/**\r\n * Hook factory, which creates a `useSelector` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `{counter}
\r\n * }\r\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","export * from './exports';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport { setBatch } from './utils/batch'; // Enable batched updates in our subscriptions for use\n// with standard React renderers (ReactDOM, React Native)\n\nsetBatch(batch);\nexport { batch };","/**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\nfunction isObject(value) {\n var type = typeof value;\n return value != null && (type == 'object' || type == 'function');\n}\n\nmodule.exports = isObject;\n","'use strict';\n\nexports.__esModule = true;\nexports.createPath = exports.parsePath = exports.getQueryStringValueFromPath = exports.stripQueryStringValueFromPath = exports.addQueryStringValueToPath = undefined;\n\nvar _warning = require('warning');\n\nvar _warning2 = _interopRequireDefault(_warning);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar addQueryStringValueToPath = exports.addQueryStringValueToPath = function addQueryStringValueToPath(path, key, value) {\n var _parsePath = parsePath(path),\n pathname = _parsePath.pathname,\n search = _parsePath.search,\n hash = _parsePath.hash;\n\n return createPath({\n pathname: pathname,\n search: search + (search.indexOf('?') === -1 ? '?' : '&') + key + '=' + value,\n hash: hash\n });\n};\n\nvar stripQueryStringValueFromPath = exports.stripQueryStringValueFromPath = function stripQueryStringValueFromPath(path, key) {\n var _parsePath2 = parsePath(path),\n pathname = _parsePath2.pathname,\n search = _parsePath2.search,\n hash = _parsePath2.hash;\n\n return createPath({\n pathname: pathname,\n search: search.replace(new RegExp('([?&])' + key + '=[a-zA-Z0-9]+(&?)'), function (match, prefix, suffix) {\n return prefix === '?' ? prefix : suffix;\n }),\n hash: hash\n });\n};\n\nvar getQueryStringValueFromPath = exports.getQueryStringValueFromPath = function getQueryStringValueFromPath(path, key) {\n var _parsePath3 = parsePath(path),\n search = _parsePath3.search;\n\n var match = search.match(new RegExp('[?&]' + key + '=([a-zA-Z0-9]+)'));\n return match && match[1];\n};\n\nvar extractPath = function extractPath(string) {\n var match = string.match(/^(https?:)?\\/\\/[^\\/]*/);\n return match == null ? string : string.substring(match[0].length);\n};\n\nvar parsePath = exports.parsePath = function parsePath(path) {\n var pathname = extractPath(path);\n var search = '';\n var hash = '';\n\n process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(path === pathname, 'A path must be pathname + search + hash only, not a full URL like \"%s\"', path) : void 0;\n\n var hashIndex = pathname.indexOf('#');\n if (hashIndex !== -1) {\n hash = pathname.substring(hashIndex);\n pathname = pathname.substring(0, hashIndex);\n }\n\n var searchIndex = pathname.indexOf('?');\n if (searchIndex !== -1) {\n search = pathname.substring(searchIndex);\n pathname = pathname.substring(0, searchIndex);\n }\n\n if (pathname === '') pathname = '/';\n\n return {\n pathname: pathname,\n search: search,\n hash: hash\n };\n};\n\nvar createPath = exports.createPath = function createPath(location) {\n if (location == null || typeof location === 'string') return location;\n\n var basename = location.basename,\n pathname = location.pathname,\n search = location.search,\n hash = location.hash;\n\n var path = (basename || '') + pathname;\n\n if (search && search !== '?') path += search;\n\n if (hash) path += hash;\n\n return path;\n};","\"use strict\";\n\nmodule.exports = function (fn) {\n\tif (typeof fn !== \"function\") throw new TypeError(fn + \" is not a function\");\n\treturn fn;\n};\n","/**\n * Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule DraftFeatureFlags\n * @format\n * \n */\n\n'use strict';\n\nvar DraftFeatureFlags = require('./DraftFeatureFlags-core');\n\nmodule.exports = DraftFeatureFlags;","/* eslint-disable max-lines */\nimport { Primitive, Span as SpanInterface, SpanContext, Transaction } from '@sentry/types';\nimport { dropUndefinedKeys, timestampWithMs, uuid4 } from '@sentry/utils';\n\n/**\n * Keeps track of finished spans for a given transaction\n * @internal\n * @hideconstructor\n * @hidden\n */\nexport class SpanRecorder {\n public spans: Span[] = [];\n\n private readonly _maxlen: number;\n\n public constructor(maxlen: number = 1000) {\n this._maxlen = maxlen;\n }\n\n /**\n * This is just so that we don't run out of memory while recording a lot\n * of spans. At some point we just stop and flush out the start of the\n * trace tree (i.e.the first n spans with the smallest\n * start_timestamp).\n */\n public add(span: Span): void {\n if (this.spans.length > this._maxlen) {\n span.spanRecorder = undefined;\n } else {\n this.spans.push(span);\n }\n }\n}\n\n/**\n * Span contains all data about a span\n */\nexport class Span implements SpanInterface {\n /**\n * @inheritDoc\n */\n public traceId: string = uuid4();\n\n /**\n * @inheritDoc\n */\n public spanId: string = uuid4().substring(16);\n\n /**\n * @inheritDoc\n */\n public parentSpanId?: string;\n\n /**\n * Internal keeper of the status\n */\n public status?: SpanStatusType | string;\n\n /**\n * @inheritDoc\n */\n public sampled?: boolean;\n\n /**\n * Timestamp in seconds when the span was created.\n */\n public startTimestamp: number = timestampWithMs();\n\n /**\n * Timestamp in seconds when the span ended.\n */\n public endTimestamp?: number;\n\n /**\n * @inheritDoc\n */\n public op?: string;\n\n /**\n * @inheritDoc\n */\n public description?: string;\n\n /**\n * @inheritDoc\n */\n public tags: { [key: string]: Primitive } = {};\n\n /**\n * @inheritDoc\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public data: { [key: string]: any } = {};\n\n /**\n * List of spans that were finalized\n */\n public spanRecorder?: SpanRecorder;\n\n /**\n * @inheritDoc\n */\n public transaction?: Transaction;\n\n /**\n * You should never call the constructor manually, always use `Sentry.startTransaction()`\n * or call `startChild()` on an existing span.\n * @internal\n * @hideconstructor\n * @hidden\n */\n public constructor(spanContext?: SpanContext) {\n if (!spanContext) {\n return this;\n }\n if (spanContext.traceId) {\n this.traceId = spanContext.traceId;\n }\n if (spanContext.spanId) {\n this.spanId = spanContext.spanId;\n }\n if (spanContext.parentSpanId) {\n this.parentSpanId = spanContext.parentSpanId;\n }\n // We want to include booleans as well here\n if ('sampled' in spanContext) {\n this.sampled = spanContext.sampled;\n }\n if (spanContext.op) {\n this.op = spanContext.op;\n }\n if (spanContext.description) {\n this.description = spanContext.description;\n }\n if (spanContext.data) {\n this.data = spanContext.data;\n }\n if (spanContext.tags) {\n this.tags = spanContext.tags;\n }\n if (spanContext.status) {\n this.status = spanContext.status;\n }\n if (spanContext.startTimestamp) {\n this.startTimestamp = spanContext.startTimestamp;\n }\n if (spanContext.endTimestamp) {\n this.endTimestamp = spanContext.endTimestamp;\n }\n }\n\n /**\n * @inheritDoc\n * @deprecated\n */\n public child(\n spanContext?: Pick\n * See the 0.9 migration guide in the GitHub repo.\n */\n ;\n\n _proto.reduce = function reduce() {\n throw new Error('`Session.prototype.reduce` has been removed. The Redux integration API ' + 'is now decoupled from ORM and Session - see the 0.9 migration guide ' + 'in the GitHub repo.');\n };\n\n _createClass(Session, [{\n key: \"accessedModelInstances\",\n get: function get() {\n var _this2 = this;\n\n return this.sessionBoundModels.filter(function (_ref) {\n var modelName = _ref.modelName;\n return !!_this2.getDataForModel(modelName).accessedInstances;\n }).reduce(function (result, _ref2) {\n var modelName = _ref2.modelName;\n return _objectSpread({}, result, _defineProperty({}, modelName, _this2.getDataForModel(modelName).accessedInstances));\n }, {});\n }\n }, {\n key: \"fullTableScannedModels\",\n get: function get() {\n var _this3 = this;\n\n return this.sessionBoundModels.filter(function (_ref3) {\n var modelName = _ref3.modelName;\n return !!_this3.getDataForModel(modelName).fullTableScanned;\n }).map(function (_ref4) {\n var modelName = _ref4.modelName;\n return modelName;\n });\n }\n }]);\n\n return Session;\n}();\n\nexport default Session;","var baseIsEqual = require('./_baseIsEqual');\n\n/**\n * This method is like `_.isEqual` except that it accepts `customizer` which\n * is invoked to compare values. If `customizer` returns `undefined`, comparisons\n * are handled by the method instead. The `customizer` is invoked with up to\n * six arguments: (objValue, othValue [, index|key, object, other, stack]).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @param {Function} [customizer] The function to customize comparisons.\n * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n * @example\n *\n * function isGreeting(value) {\n * return /^h(?:i|ello)$/.test(value);\n * }\n *\n * function customizer(objValue, othValue) {\n * if (isGreeting(objValue) && isGreeting(othValue)) {\n * return true;\n * }\n * }\n *\n * var array = ['hello', 'goodbye'];\n * var other = ['hi', 'goodbye'];\n *\n * _.isEqualWith(array, other, customizer);\n * // => true\n */\nfunction isEqualWith(value, other, customizer) {\n customizer = typeof customizer == 'function' ? customizer : undefined;\n var result = customizer ? customizer(value, other) : undefined;\n return result === undefined ? baseIsEqual(value, other, undefined, customizer) : !!result;\n}\n\nmodule.exports = isEqualWith;\n","export default function(a, b) {\n return a = +a, b = +b, function(t) {\n return a * (1 - t) + b * t;\n };\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Event, Exception, Mechanism, StackFrame } from '@sentry/types';\n\nimport { getGlobalObject } from './global';\nimport { addNonEnumerableProperty } from './object';\nimport { snipLine } from './string';\n\n/**\n * Extended Window interface that allows for Crypto API usage in IE browsers\n */\ninterface MsCryptoWindow extends Window {\n msCrypto?: Crypto;\n}\n\n/**\n * UUID4 generator\n *\n * @returns string Generated UUID4.\n */\nexport function uuid4(): string {\n const global = getGlobalObject() as MsCryptoWindow;\n const crypto = global.crypto || global.msCrypto;\n\n if (!(crypto === void 0) && crypto.getRandomValues) {\n // Use window.crypto API if available\n const arr = new Uint16Array(8);\n crypto.getRandomValues(arr);\n\n // set 4 in byte 7\n // eslint-disable-next-line no-bitwise\n arr[3] = (arr[3] & 0xfff) | 0x4000;\n // set 2 most significant bits of byte 9 to '10'\n // eslint-disable-next-line no-bitwise\n arr[4] = (arr[4] & 0x3fff) | 0x8000;\n\n const pad = (num: number): string => {\n let v = num.toString(16);\n while (v.length < 4) {\n v = `0${v}`;\n }\n return v;\n };\n\n return (\n pad(arr[0]) + pad(arr[1]) + pad(arr[2]) + pad(arr[3]) + pad(arr[4]) + pad(arr[5]) + pad(arr[6]) + pad(arr[7])\n );\n }\n // http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/2117523#2117523\n return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, c => {\n // eslint-disable-next-line no-bitwise\n const r = (Math.random() * 16) | 0;\n // eslint-disable-next-line no-bitwise\n const v = c === 'x' ? r : (r & 0x3) | 0x8;\n return v.toString(16);\n });\n}\n\n/**\n * Parses string form of URL into an object\n * // borrowed from https://tools.ietf.org/html/rfc3986#appendix-B\n * // intentionally using regex and not href parsing trick because React Native and other\n * // environments where DOM might not be available\n * @returns parsed URL object\n */\nexport function parseUrl(url: string): {\n host?: string;\n path?: string;\n protocol?: string;\n relative?: string;\n} {\n if (!url) {\n return {};\n }\n\n const match = url.match(/^(([^:/?#]+):)?(\\/\\/([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?$/);\n\n if (!match) {\n return {};\n }\n\n // coerce to undefined values to empty string so we don't get 'undefined'\n const query = match[6] || '';\n const fragment = match[8] || '';\n return {\n host: match[4],\n path: match[5],\n protocol: match[2],\n relative: match[5] + query + fragment, // everything minus origin\n };\n}\n\nfunction getFirstException(event: Event): Exception | undefined {\n return event.exception && event.exception.values ? event.exception.values[0] : undefined;\n}\n\n/**\n * Extracts either message or type+value from an event that can be used for user-facing logs\n * @returns event's description\n */\nexport function getEventDescription(event: Event): string {\n const { message, event_id: eventId } = event;\n if (message) {\n return message;\n }\n\n const firstException = getFirstException(event);\n if (firstException) {\n if (firstException.type && firstException.value) {\n return `${firstException.type}: ${firstException.value}`;\n }\n return firstException.type || firstException.value || eventId || '
\n * On subsequent runs, the selector first checks if the previously\n * accessed instances or `args` have changed in any way:\n *
- \n *
- If yes, the selector calls the function you passed to it. \n *
- If not, it just returns the previous result\n * (unless you call it for the first time). \n *
\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.isRequired,\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\nCountrySelectWithIcon.defaultProps = {\r\n\tarrowComponent: () => \r\n\t\t\t\t\t{getUnicodeFlagIcon(value)}\r\n\t\t\t\t
\r\n\t\t\t}\r\n\r\n\t\t\t{/* Or an SVG flag icon. */}\r\n\t\t\t{!(unicodeFlags && value) &&\r\n\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 && option.value === value) {\r\n\t\t\treturn option\r\n\t\t}\r\n\t}\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 {\r\n\tgetCountryCallingCode,\r\n\tMetadata\r\n} from 'libphonenumber-js/core'\r\n\r\nconst ONLY_DIGITS_REGEXP = /^\\d+$/\r\nexport default function getInternationalPhoneNumberPrefix(country, metadata) {\r\n\t// Standard international phone number prefix: \"+\" and \"country calling code\".\r\n\tlet prefix = '+' + getCountryCallingCode(country, metadata)\r\n\t// Get \"leading digits\" for a phone number of the country.\r\n\t// If there're \"leading digits\" then they can be part of the prefix too.\r\n\tmetadata = new Metadata(metadata)\r\n\tmetadata.selectNumberingPlan(country)\r\n\tif (metadata.numberingPlan.leadingDigits() && ONLY_DIGITS_REGEXP.test(metadata.numberingPlan.leadingDigits())) {\r\n\t\tprefix += metadata.numberingPlan.leadingDigits()\r\n\t}\r\n\treturn prefix\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\t// If `phoneDigits` is empty then set `phoneDigits` to\r\n\t\t\t// `+{getCountryCallingCode(newCountry)}`.\r\n\t\t\treturn getInternationalPhoneNumberPrefix(newCountry, metadata)\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 {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string?}\r\n */\r\nexport function getCountryForPartialE164Number(partialE164Number, {\r\n\tcountry,\r\n\tcountries,\r\n\trequired,\r\n\tmetadata\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 && (!countries || (countries.indexOf(derived_country) >= 0))) {\r\n\t\treturn derived_country\r\n\t}\r\n\t// If \"International\" country option has not been disabled\r\n\t// and the international phone number entered doesn't correspond\r\n\t// to the currently selected country then reset the currently selected country.\r\n\telse if (country &&\r\n\t\t!required &&\r\n\t\t!couldNumberBelongToCountry(partialE164Number, country, metadata)) {\r\n\t\treturn undefined\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 {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 `{ input, country, value }`.\r\n */\r\nexport function onPhoneDigitsChange(phoneDigits, {\r\n\tprevPhoneDigits,\r\n\tcountry,\r\n\tdefaultCountry,\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\tif (international && countryCallingCodeEditable === false) {\r\n\t\tconst prefix = getInternationalPhoneNumberPrefix(country, metadata)\r\n\t\t// The `` value must start with the country calling code.\r\n\t\tif (phoneDigits.indexOf(prefix) !== 0) {\r\n\t\t\tlet value\r\n\t\t\t// If a phone number input is declared as\r\n\t\t\t// `international` and `withCountryCallingCode`,\r\n\t\t\t// then it's gonna be non-empty even before the user\r\n\t\t\t// has input anything in it.\r\n\t\t\t// This will result in its contents (the country calling code part)\r\n\t\t\t// being selected when the user tabs into such field.\r\n\t\t\t// If the user then starts inputting the national part digits,\r\n\t\t\t// then `` value changes from `+xxx` to `y`\r\n\t\t\t// because inputting anything while having the `` value\r\n\t\t\t// selected results in erasing the `` value.\r\n\t\t\t// So, the component handles such case by restoring\r\n\t\t\t// the intended `` value: `+xxxy`.\r\n\t\t\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/43\r\n\t\t\tif (phoneDigits && phoneDigits[0] !== '+') {\r\n\t\t\t\tphoneDigits = prefix + phoneDigits\r\n\t\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t\t} else {\r\n\t\t\t\tphoneDigits = prefix\r\n\t\t\t}\r\n\t\t\treturn {\r\n\t\t\t\tphoneDigits,\r\n\t\t\t\tvalue,\r\n\t\t\t\tcountry\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` but started inputting an\r\n\t\t\t\t// international phone number for another country.\r\n\t\t\t\t// Even though the input value is non-empty,\r\n\t\t\t\t// the `value` is assumed `undefined` in such case.\r\n\t\t\t\t// The `country` will be reset (or re-selected)\r\n\t\t\t\t// immediately after such mismatch has been detected\r\n\t\t\t\t// by the phone number input component, and `value`\r\n\t\t\t\t// will be set to the currently entered international prefix.\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 `\"+2\"`\r\n\t\t\t\t// then `value` `undefined` will be returned from this function,\r\n\t\t\t\t// and then, immediately after that, `country` will be reset\r\n\t\t\t\t// and the `value` will be set to `\"+2\"`.\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\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\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}","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 {\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 {\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\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 `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\tsetInputRef = (instance) => {\r\n\t\tthis.inputRef.current = instance\r\n\t\tconst { inputRef: ref } = this.props\r\n\t\tif (ref) {\r\n\t\t\tif (typeof ref === 'function') {\r\n\t\t\t\tref(instance)\r\n\t\t\t} else {\r\n\t\t\t\tref.current = instance\r\n\t\t\t}\r\n\t\t}\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\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\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} = this.state\r\n\r\n\t\tconst {\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\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\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\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