react-native-phone-country-input 1.0.0

package/lib/commonjs/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CountryId", {
+  enumerable: true,
+  get: function () {
+    return _CountryIds.CountryId;
+  }
+});
+Object.defineProperty(exports, "CountrySelector", {
+  enumerable: true,
+  get: function () {
+    return _CountrySelector.CountrySelector;
+  }
+});
+Object.defineProperty(exports, "CountrySelectorModal", {
+  enumerable: true,
+  get: function () {
+    return _CountrySelectorModal.CountrySelectorModal;
+  }
+});
+Object.defineProperty(exports, "Keyboard", {
+  enumerable: true,
+  get: function () {
+    return _Keyboard.default;
+  }
+});
+Object.defineProperty(exports, "PhoneCountryInput", {
+  enumerable: true,
+  get: function () {
+    return _PhoneCountryInput.PhoneCountryInput;
+  }
+});
+Object.defineProperty(exports, "PhoneNumberField", {
+  enumerable: true,
+  get: function () {
+    return _PhoneNumberField.PhoneNumberField;
+  }
+});
+Object.defineProperty(exports, "usePhoneFieldState", {
+  enumerable: true,
+  get: function () {
+    return _UsePhoneFieldState.usePhoneFieldState;
+  }
+});
+var _PhoneCountryInput = require("./PhoneCountryInput/PhoneCountryInput");
+var _PhoneNumberField = require("./PhoneNumberField");
+var _CountrySelector = require("./CountrySelector/CountrySelector");
+var _CountrySelectorModal = require("./CountrySelector/CountrySelectorModal");
+var _Keyboard = _interopRequireDefault(require("./Keyboard/Keyboard"));
+var _UsePhoneFieldState = require("./hooks/UsePhoneFieldState");
+var _CountryIds = require("./enum/CountryIds");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_PhoneCountryInput","require","_PhoneNumberField","_CountrySelector","_CountrySelectorModal","_Keyboard","_interopRequireDefault","_UsePhoneFieldState","_CountryIds","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAAA,kBAAA,GAAAC,OAAA;AAIA,IAAAC,iBAAA,GAAAD,OAAA;AAGA,IAAAE,gBAAA,GAAAF,OAAA;AAGA,IAAAG,qBAAA,GAAAH,OAAA;AAGA,IAAAI,SAAA,GAAAC,sBAAA,CAAAL,OAAA;AAIA,IAAAM,mBAAA,GAAAN,OAAA;AAQA,IAAAO,WAAA,GAAAP,OAAA;AAA8C,SAAAK,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/commonjs/utils/characterDeletion.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.characterDeletion = characterDeletion;
+function characterDeletion(phoneNumber, selection) {
+  const isRange = selection.start !== selection.end;
+  if (!selection.hasBeenSelected && !isRange && selection.start === 0) {
+    return phoneNumber.slice(0, -1);
+  }
+  if (isRange) {
+    // selection.start digits are before the selection; first selected char is at index start+1
+    return phoneNumber.slice(0, selection.start + 1) + phoneNumber.slice(selection.end + 1);
+  }
+  // backspace: delete the digit immediately to the left of cursor (at index start); clamp to protect '+'
+  const start = Math.max(selection.start, 1);
+  return phoneNumber.slice(0, start) + phoneNumber.slice(start + 1);
+}
+//# sourceMappingURL=characterDeletion.js.map

package/lib/commonjs/utils/characterDeletion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["characterDeletion","phoneNumber","selection","isRange","start","end","hasBeenSelected","slice","Math","max"],"sourceRoot":"../../../src","sources":["utils/characterDeletion.ts"],"mappings":";;;;;;AAEO,SAASA,iBAAiBA,CAACC,WAAmB,EAAEC,SAAyB,EAAU;EACxF,MAAMC,OAAO,GAAGD,SAAS,CAACE,KAAK,KAAKF,SAAS,CAACG,GAAG;EAEjD,IAAI,CAACH,SAAS,CAACI,eAAe,IAAI,CAACH,OAAO,IAAID,SAAS,CAACE,KAAK,KAAK,CAAC,EAAE;IACnE,OAAOH,WAAW,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EACjC;EACA,IAAIJ,OAAO,EAAE;IACX;IACA,OAAOF,WAAW,CAACM,KAAK,CAAC,CAAC,EAAEL,SAAS,CAACE,KAAK,GAAG,CAAC,CAAC,GAAGH,WAAW,CAACM,KAAK,CAACL,SAAS,CAACG,GAAG,GAAG,CAAC,CAAC;EACzF;EACA;EACA,MAAMD,KAAK,GAAGI,IAAI,CAACC,GAAG,CAACP,SAAS,CAACE,KAAK,EAAE,CAAC,CAAC;EAC1C,OAAOH,WAAW,CAACM,KAAK,CAAC,CAAC,EAAEH,KAAK,CAAC,GAAGH,WAAW,CAACM,KAAK,CAACH,KAAK,GAAG,CAAC,CAAC;AACnE","ignoreList":[]}

package/lib/commonjs/utils/characterInsert.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.characterInsert = characterInsert;
+function characterInsert(phoneNumber, newChar, selection) {
+  const isARange = selection.start !== selection.end;
+  if (isARange) {
+    // selection.start digits are before the selection; first selected char is at index start+1
+    return phoneNumber.slice(0, selection.start + 1) + newChar + phoneNumber.slice(selection.end + 1);
+  } else if (selection.start === 0 && !selection.hasBeenSelected) {
+    return phoneNumber + newChar;
+  } else {
+    // cursor is after `start` digits; insert before char at index start+1; clamp to protect '+'
+    const start = Math.max(selection.start, 1);
+    return phoneNumber.slice(0, start + 1) + newChar + phoneNumber.slice(start + 1);
+  }
+}
+//# sourceMappingURL=characterInsert.js.map

package/lib/commonjs/utils/characterInsert.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["characterInsert","phoneNumber","newChar","selection","isARange","start","end","slice","hasBeenSelected","Math","max"],"sourceRoot":"../../../src","sources":["utils/characterInsert.ts"],"mappings":";;;;;;AAEO,SAASA,eAAeA,CAC7BC,WAAmB,EACnBC,OAAe,EACfC,SAAyB,EACjB;EACR,MAAMC,QAAQ,GAAGD,SAAS,CAACE,KAAK,KAAKF,SAAS,CAACG,GAAG;EAElD,IAAIF,QAAQ,EAAE;IACZ;IACA,OAAOH,WAAW,CAACM,KAAK,CAAC,CAAC,EAAEJ,SAAS,CAACE,KAAK,GAAG,CAAC,CAAC,GAAGH,OAAO,GAAGD,WAAW,CAACM,KAAK,CAACJ,SAAS,CAACG,GAAG,GAAG,CAAC,CAAC;EACnG,CAAC,MAAM,IAAIH,SAAS,CAACE,KAAK,KAAK,CAAC,IAAI,CAACF,SAAS,CAACK,eAAe,EAAE;IAC9D,OAAOP,WAAW,GAAGC,OAAO;EAC9B,CAAC,MAAM;IACL;IACA,MAAMG,KAAK,GAAGI,IAAI,CAACC,GAAG,CAACP,SAAS,CAACE,KAAK,EAAE,CAAC,CAAC;IAC1C,OAAOJ,WAAW,CAACM,KAAK,CAAC,CAAC,EAAEF,KAAK,GAAG,CAAC,CAAC,GAAGH,OAAO,GAAGD,WAAW,CAACM,KAAK,CAACF,KAAK,GAAG,CAAC,CAAC;EACjF;AACF","ignoreList":[]}

package/lib/commonjs/utils/fromMaskedNumberToUnmaskedSelection.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fromMaskedNumberToUnmaskedSelection = fromMaskedNumberToUnmaskedSelection;
+function fromMaskedNumberToUnmaskedSelection(maskedValue, maskedPoint) {
+  let count = 0;
+  for (let i = 0; i < maskedPoint && i < maskedValue.length; i++) {
+    if (/\d/.test(maskedValue[i])) count++;
+  }
+  return count;
+}
+//# sourceMappingURL=fromMaskedNumberToUnmaskedSelection.js.map

package/lib/commonjs/utils/fromMaskedNumberToUnmaskedSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fromMaskedNumberToUnmaskedSelection","maskedValue","maskedPoint","count","i","length","test"],"sourceRoot":"../../../src","sources":["utils/fromMaskedNumberToUnmaskedSelection.ts"],"mappings":";;;;;;AAAO,SAASA,mCAAmCA,CACjDC,WAAmB,EACnBC,WAAmB,EACX;EACR,IAAIC,KAAK,GAAG,CAAC;EACb,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,WAAW,IAAIE,CAAC,GAAGH,WAAW,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;IAC9D,IAAI,IAAI,CAACE,IAAI,CAACL,WAAW,CAACG,CAAC,CAAC,CAAC,EAAED,KAAK,EAAE;EACxC;EACA,OAAOA,KAAK;AACd","ignoreList":[]}

package/lib/commonjs/utils/fromUnmaskedToMaskedPosition.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fromUnmaskedToMaskedPosition = fromUnmaskedToMaskedPosition;
+function fromUnmaskedToMaskedPosition(maskedValue, unmaskedPos) {
+  if (unmaskedPos <= 0) return 1;
+  let digitCount = 0;
+  for (let i = 0; i < maskedValue.length; i++) {
+    if (/\d/.test(maskedValue[i])) {
+      digitCount++;
+      if (digitCount === unmaskedPos) {
+        return i + 1;
+      }
+    }
+  }
+  return maskedValue.length;
+}
+//# sourceMappingURL=fromUnmaskedToMaskedPosition.js.map

package/lib/commonjs/utils/fromUnmaskedToMaskedPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fromUnmaskedToMaskedPosition","maskedValue","unmaskedPos","digitCount","i","length","test"],"sourceRoot":"../../../src","sources":["utils/fromUnmaskedToMaskedPosition.ts"],"mappings":";;;;;;AAAO,SAASA,4BAA4BA,CAACC,WAAmB,EAAEC,WAAmB,EAAU;EAC7F,IAAIA,WAAW,IAAI,CAAC,EAAE,OAAO,CAAC;EAC9B,IAAIC,UAAU,GAAG,CAAC;EAClB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,WAAW,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;IAC3C,IAAI,IAAI,CAACE,IAAI,CAACL,WAAW,CAACG,CAAC,CAAC,CAAC,EAAE;MAC7BD,UAAU,EAAE;MACZ,IAAIA,UAAU,KAAKD,WAAW,EAAE;QAC9B,OAAOE,CAAC,GAAG,CAAC;MACd;IACF;EACF;EACA,OAAOH,WAAW,CAACI,MAAM;AAC3B","ignoreList":[]}

package/lib/commonjs/utils/generateCountryCodeList.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCountryCodeList = generateCountryCodeList;
+var _regions = require("../consts/regions");
+function generateCountryCodeList(allowedCountryCodes, disallowedCountryCodes) {
+  return _regions.countryCodeList.filter(({
+    id
+  }) => {
+    if (allowedCountryCodes && !allowedCountryCodes.includes(id)) {
+      return false;
+    }
+    if (disallowedCountryCodes && disallowedCountryCodes.includes(id)) {
+      return false;
+    }
+    return true;
+  })
+  // sort by longer country codes first to ensure that we match the most specific country code when parsing the phone number
+  .sort((a, b) => b.code.length - a.code.length);
+}
+//# sourceMappingURL=generateCountryCodeList.js.map

package/lib/commonjs/utils/generateCountryCodeList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_regions","require","generateCountryCodeList","allowedCountryCodes","disallowedCountryCodes","countryCodeList","filter","id","includes","sort","a","b","code","length"],"sourceRoot":"../../../src","sources":["utils/generateCountryCodeList.ts"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAGO,SAASC,uBAAuBA,CACrCC,mBAAiC,EACjCC,sBAAoC,EACpC;EACA,OACEC,wBAAe,CACZC,MAAM,CAAC,CAAC;IAAEC;EAAG,CAAC,KAAK;IAClB,IAAIJ,mBAAmB,IAAI,CAACA,mBAAmB,CAACK,QAAQ,CAACD,EAAE,CAAC,EAAE;MAC5D,OAAO,KAAK;IACd;IACA,IAAIH,sBAAsB,IAAIA,sBAAsB,CAACI,QAAQ,CAACD,EAAE,CAAC,EAAE;MACjE,OAAO,KAAK;IACd;IACA,OAAO,IAAI;EACb,CAAC;EACD;EAAA,CACCE,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,CAACC,IAAI,CAACC,MAAM,GAAGH,CAAC,CAACE,IAAI,CAACC,MAAM,CAAC;AAEpD","ignoreList":[]}

package/lib/commonjs/utils/getDefaultRegion.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultRegion = getDefaultRegion;
+exports.getDefaultRegionWithNullableState = getDefaultRegionWithNullableState;
+var _expoLocalization = require("expo-localization");
+function getDefaultRegion(filteredCountryCodes) {
+  const localization = (0, _expoLocalization.getLocales)();
+  // console.debug('localization', JSON.stringify(localization, null, 2));
+  const id = localization?.[0]?.regionCode;
+  if (id) {
+    const matchedCountry = filteredCountryCodes.find(country => country.id === id);
+    if (matchedCountry) {
+      return matchedCountry;
+    }
+  }
+  return filteredCountryCodes[0];
+}
+function getDefaultRegionWithNullableState(filteredCountryCodes) {
+  const localization = (0, _expoLocalization.getLocales)();
+  // console.debug('localization', JSON.stringify(localization, null, 2));
+  const id = localization?.[0]?.regionCode;
+  if (id) {
+    const matchedCountry = filteredCountryCodes.find(country => country.id === id);
+    if (matchedCountry) {
+      return matchedCountry;
+    }
+  }
+  return null;
+}
+//# sourceMappingURL=getDefaultRegion.js.map

package/lib/commonjs/utils/getDefaultRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_expoLocalization","require","getDefaultRegion","filteredCountryCodes","localization","getLocales","id","regionCode","matchedCountry","find","country","getDefaultRegionWithNullableState"],"sourceRoot":"../../../src","sources":["utils/getDefaultRegion.ts"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAGO,SAASC,gBAAgBA,CAACC,oBAAmC,EAAe;EACjF,MAAMC,YAAY,GAAG,IAAAC,4BAAU,EAAC,CAAC;EACjC;EACA,MAAMC,EAAE,GAAGF,YAAY,GAAG,CAAC,CAAC,EAAEG,UAAU;EACxC,IAAID,EAAE,EAAE;IACN,MAAME,cAAc,GAAGL,oBAAoB,CAACM,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACJ,EAAE,KAAKA,EAAE,CAAC;IAChF,IAAIE,cAAc,EAAE;MAClB,OAAOA,cAAc;IACvB;EACF;EACA,OAAOL,oBAAoB,CAAC,CAAC,CAAC;AAChC;AAEO,SAASQ,iCAAiCA,CAC/CR,oBAAmC,EACf;EACpB,MAAMC,YAAY,GAAG,IAAAC,4BAAU,EAAC,CAAC;EACjC;EACA,MAAMC,EAAE,GAAGF,YAAY,GAAG,CAAC,CAAC,EAAEG,UAAU;EACxC,IAAID,EAAE,EAAE;IACN,MAAME,cAAc,GAAGL,oBAAoB,CAACM,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACJ,EAAE,KAAKA,EAAE,CAAC;IAChF,IAAIE,cAAc,EAAE;MAClB,OAAOA,cAAc;IACvB;EACF;EACA,OAAO,IAAI;AACb","ignoreList":[]}

package/lib/commonjs/utils/maskToPhoneNumber.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.maskToPhoneNumber = maskToPhoneNumber;
+function maskToPhoneNumber(rawInput, countryCode, mask) {
+  const justDigits = rawInput.replace(/\D/g, '');
+  const restOfNumber = justDigits.slice(countryCode.length, justDigits.length);
+  let digitIndex = 0;
+  let maskedPart = '';
+  for (const char of mask) {
+    console.debug('char', char, 'digitIndex', digitIndex, 'restOfNumber', restOfNumber, 'restOfNumber[digitIndex]', restOfNumber[digitIndex], 'Output', maskedPart);
+    if (digitIndex >= restOfNumber.length) break;
+    if (char === '#') {
+      maskedPart += restOfNumber[digitIndex++];
+    } else {
+      maskedPart += char;
+    }
+  }
+  return countryCode + maskedPart;
+}
+//# sourceMappingURL=maskToPhoneNumber.js.map

package/lib/commonjs/utils/maskToPhoneNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["maskToPhoneNumber","rawInput","countryCode","mask","justDigits","replace","restOfNumber","slice","length","digitIndex","maskedPart","char","console","debug"],"sourceRoot":"../../../src","sources":["utils/maskToPhoneNumber.ts"],"mappings":";;;;;;AAAO,SAASA,iBAAiBA,CAACC,QAAgB,EAAEC,WAAmB,EAAEC,IAAY,EAAU;EAC7F,MAAMC,UAAU,GAAGH,QAAQ,CAACI,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;EAC9C,MAAMC,YAAY,GAAGF,UAAU,CAACG,KAAK,CAACL,WAAW,CAACM,MAAM,EAAEJ,UAAU,CAACI,MAAM,CAAC;EAC5E,IAAIC,UAAU,GAAG,CAAC;EAClB,IAAIC,UAAU,GAAG,EAAE;EAEnB,KAAK,MAAMC,IAAI,IAAIR,IAAI,EAAE;IACvBS,OAAO,CAACC,KAAK,CACX,MAAM,EACNF,IAAI,EACJ,YAAY,EACZF,UAAU,EACV,cAAc,EACdH,YAAY,EACZ,0BAA0B,EAC1BA,YAAY,CAACG,UAAU,CAAC,EACxB,QAAQ,EACRC,UACF,CAAC;IAED,IAAID,UAAU,IAAIH,YAAY,CAACE,MAAM,EAAE;IACvC,IAAIG,IAAI,KAAK,GAAG,EAAE;MAChBD,UAAU,IAAIJ,YAAY,CAACG,UAAU,EAAE,CAAC;IAC1C,CAAC,MAAM;MACLC,UAAU,IAAIC,IAAI;IACpB;EACF;EAEA,OAAOT,WAAW,GAAGQ,UAAU;AACjC","ignoreList":[]}

package/lib/commonjs/utils/matchCountryCode.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.matchCountryCode = matchCountryCode;
+function matchCountryCode(filteredCountryCodes, rawInput) {
+  return filteredCountryCodes.find(({
+    code
+  }) => {
+    // intentional to use _value here instead of cleanedValue because we want to match against the raw input value that includes the '+' sign and any formatting characters, since country codes are typically prefixed with a '+' and may be followed by formatting characters like dashes or parentheses. Using cleanedValue would remove these characters and could lead to incorrect matching of country codes.
+
+    const phoneNumberWithoutPlus = rawInput.replace('+', '');
+    const CountryCodeWithoutPlus = code.replace('+', '');
+    const result = phoneNumberWithoutPlus.startsWith(CountryCodeWithoutPlus);
+    // console.debug(
+    //   'checking code',
+    //   code,
+    //   'against cleanedValue',
+    //   cleanedValue,
+    //   'result',
+    //   result
+    // );
+    return result;
+  });
+}
+//# sourceMappingURL=matchCountryCode.js.map

package/lib/commonjs/utils/matchCountryCode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["matchCountryCode","filteredCountryCodes","rawInput","find","code","phoneNumberWithoutPlus","replace","CountryCodeWithoutPlus","result","startsWith"],"sourceRoot":"../../../src","sources":["utils/matchCountryCode.ts"],"mappings":";;;;;;AAEO,SAASA,gBAAgBA,CAC9BC,oBAAmC,EACnCC,QAAgB,EACS;EACzB,OAAOD,oBAAoB,CAACE,IAAI,CAAC,CAAC;IAAEC;EAAK,CAAC,KAAK;IAC7C;;IAEA,MAAMC,sBAAsB,GAAGH,QAAQ,CAACI,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;IACxD,MAAMC,sBAAsB,GAAGH,IAAI,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;IACpD,MAAME,MAAM,GAAGH,sBAAsB,CAACI,UAAU,CAACF,sBAAsB,CAAC;IACxE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OAAOC,MAAM;EACf,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/module/CountrySelector/CountrySelector.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Pressable, Text } from 'react-native';
+import { CountrySelectorModal } from './CountrySelectorModal';
+import { Feather } from '@expo/vector-icons';
+
+// button for opening the country selector modal
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+//
+
+function CountrySelectorButton(props) {
+  const Button = useMemo(() => {
+    if (props.underlineButton) {
+      console.debug('Using custom button for CountrySelectorButton');
+      return props.underlineButton;
+    }
+    console.debug('Using default Pressable for CountrySelectorButton');
+    return Pressable;
+  }, [props.underlineButton]);
+  return (
+    /*#__PURE__*/
+    // This could be a simple button that, when pressed, opens the country selector modal
+    _jsxs(Button, {
+      ...props,
+      children: [/*#__PURE__*/_jsx(Text, {
+        children: props.value ? props.value.flag : '🏴‍☠️'
+      }), /*#__PURE__*/_jsx(Feather, {
+        name: `chevron-${props.isOpen ? 'up' : 'down'}`,
+        size: 14,
+        color: "gray"
+      })]
+    })
+  );
+}
+export function CountrySelector(props) {
+  const [internalValue, setInternalValue] = useState(props.value);
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const {
+    filtedredCountryCodes,
+    onSelectCountry,
+    onOpenChange
+  } = props;
+  const isControlled = props.isOpen !== undefined;
+  const effectiveIsOpen = isControlled ? props.isOpen ?? false : internalIsOpen;
+  const toggle = useCallback(() => {
+    const next = !effectiveIsOpen;
+    if (!isControlled) setInternalIsOpen(next);
+    onOpenChange?.(next);
+  }, [effectiveIsOpen, isControlled, onOpenChange]);
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CountrySelectorButton, {
+      ...props,
+      underlineButton: props.underlineButton,
+      value: internalValue,
+      isOpen: effectiveIsOpen,
+      onPress: toggle
+    }), /*#__PURE__*/_jsx(CountrySelectorModal, {
+      value: internalValue,
+      onSelectCountry: onSelectCountry ?? (() => {}),
+      UserCountryCodes: filtedredCountryCodes,
+      isOpen: effectiveIsOpen,
+      toggleModalVisablity: toggle
+    })]
+  });
+}
+//# sourceMappingURL=CountrySelector.js.map

package/lib/module/CountrySelector/CountrySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useMemo","useState","Pressable","Text","CountrySelectorModal","Feather","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CountrySelectorButton","props","Button","underlineButton","console","debug","children","value","flag","name","isOpen","size","color","CountrySelector","internalValue","setInternalValue","internalIsOpen","setInternalIsOpen","filtedredCountryCodes","onSelectCountry","onOpenChange","isControlled","undefined","effectiveIsOpen","toggle","next","onPress","UserCountryCodes","toggleModalVisablity"],"sourceRoot":"../../../src","sources":["CountrySelector/CountrySelector.tsx"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEjE,SAAgBC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAOA;;AAEA,SAASC,qBAAqBA,CAACC,KAAiC,EAAE;EAChE,MAAMC,MAAM,GAAGd,OAAO,CAAC,MAAM;IAC3B,IAAIa,KAAK,CAACE,eAAe,EAAE;MACzBC,OAAO,CAACC,KAAK,CAAC,+CAA+C,CAAC;MAC9D,OAAOJ,KAAK,CAACE,eAAe;IAC9B;IACAC,OAAO,CAACC,KAAK,CAAC,mDAAmD,CAAC;IAClE,OAAOf,SAAS;EAClB,CAAC,EAAE,CAACW,KAAK,CAACE,eAAe,CAAC,CAAC;EAC3B;IAAA;IACE;IACAN,KAAA,CAACK,MAAM;MAAA,GAAKD,KAAK;MAAAK,QAAA,gBACfX,IAAA,CAACJ,IAAI;QAAAe,QAAA,EAAEL,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACM,KAAK,CAACC,IAAI,GAAG;MAAO,CAAO,CAAC,eACvDb,IAAA,CAACF,OAAO;QAACgB,IAAI,EAAE,WAAWR,KAAK,CAACS,MAAM,GAAG,IAAI,GAAG,MAAM,EAAG;QAACC,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAM,CAAE,CAAC;IAAA,CAC7E;EAAC;AAEb;AASA,OAAO,SAASC,eAAeA,CAACZ,KAA2B,EAAE;EAC3D,MAAM,CAACa,aAAa,EAAEC,gBAAgB,CAAC,GAAG1B,QAAQ,CAACY,KAAK,CAACM,KAAK,CAAC;EAC/D,MAAM,CAACS,cAAc,EAAEC,iBAAiB,CAAC,GAAG5B,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM;IAAE6B,qBAAqB;IAAEC,eAAe;IAAEC;EAAa,CAAC,GAAGnB,KAAK;EAEtE,MAAMoB,YAAY,GAAGpB,KAAK,CAACS,MAAM,KAAKY,SAAS;EAC/C,MAAMC,eAAe,GAAGF,YAAY,GAAIpB,KAAK,CAACS,MAAM,IAAI,KAAK,GAAIM,cAAc;EAE/E,MAAMQ,MAAM,GAAGtC,WAAW,CAAC,MAAM;IAC/B,MAAMuC,IAAI,GAAG,CAACF,eAAe;IAC7B,IAAI,CAACF,YAAY,EAAEJ,iBAAiB,CAACQ,IAAI,CAAC;IAC1CL,YAAY,GAAGK,IAAI,CAAC;EACtB,CAAC,EAAE,CAACF,eAAe,EAAEF,YAAY,EAAED,YAAY,CAAC,CAAC;EAEjDjC,SAAS,CAAC,MAAM;IACd4B,gBAAgB,CAACd,KAAK,CAACM,KAAK,CAAC;EAC/B,CAAC,EAAE,CAACN,KAAK,CAACM,KAAK,CAAC,CAAC;EAEjB,oBACEV,KAAA,CAAAE,SAAA;IAAAO,QAAA,gBACEX,IAAA,CAACK,qBAAqB;MAAA,GAChBC,KAAK;MACTE,eAAe,EAAEF,KAAK,CAACE,eAAgB;MACvCI,KAAK,EAAEO,aAAc;MACrBJ,MAAM,EAAEa,eAAgB;MACxBG,OAAO,EAAEF;IAAO,CACjB,CAAC,eACF7B,IAAA,CAACH,oBAAoB;MACnBe,KAAK,EAAEO,aAAc;MACrBK,eAAe,EAAEA,eAAe,KAAK,MAAM,CAAC,CAAC,CAAE;MAC/CQ,gBAAgB,EAAET,qBAAsB;MACxCR,MAAM,EAAEa,eAAgB;MACxBK,oBAAoB,EAAEJ;IAAO,CAC9B,CAAC;EAAA,CACF,CAAC;AAEP","ignoreList":[]}

package/lib/module/CountrySelector/CountrySelectorModal.js

@@ -0,0 +1,262 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Modal, View, Text, StyleSheet, useWindowDimensions, TouchableWithoutFeedback, TextInput, SectionList, Pressable } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Feather } from '@expo/vector-icons';
+import { getDefaultRegionWithNullableState } from '../utils/getDefaultRegion';
+import { spacing, borderWidth as borders, fontSize as fontSizes, padding, borderWidth, radius, SIDE_SCREEN_PADDING } from '../Styling/Sizing';
+import { colors } from '../Styling/Colors';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CLICK_COUNTS_KEY = '@country_selector_click_counts';
+const RECENT_SECTION_COUNT = 4;
+export function CountrySelectorModal(props) {
+  const {
+    height
+  } = useWindowDimensions();
+  const [searchValue, setSearchValue] = useState('');
+  const [clickCounts, setClickCounts] = useState({});
+  useEffect(() => {
+    AsyncStorage.getItem(CLICK_COUNTS_KEY).then(raw => {
+      if (raw) setClickCounts(JSON.parse(raw));
+    });
+  }, []);
+  const recordClick = useCallback(async country => {
+    const updated = {
+      ...clickCounts,
+      [country.id]: (clickCounts[country.id] ?? 0) + 1
+    };
+    setClickCounts(updated);
+    await AsyncStorage.setItem(CLICK_COUNTS_KEY, JSON.stringify(updated));
+  }, [clickCounts]);
+  const recentSection = useMemo(() => {
+    const allCountries = props.UserCountryCodes ?? [];
+    const defaultCountry = getDefaultRegionWithNullableState(allCountries);
+    const topClicked = Object.entries(clickCounts).sort(([, a], [, b]) => b - a).slice(0, RECENT_SECTION_COUNT).map(([id]) => allCountries.find(c => c.id === id)).filter(c => c != null);
+    if (!defaultCountry && topClicked.length === 0) return null;
+    const data = [];
+    if (defaultCountry) data.push(defaultCountry);
+    for (const c of topClicked) {
+      if (!data.some(d => d.id === c.id)) data.push(c);
+    }
+    return {
+      title: 'Recent Countries',
+      data
+    };
+  }, [clickCounts, props.UserCountryCodes]);
+  const sections = useMemo(() => {
+    const sorted = [...(props.UserCountryCodes ?? [])].sort((a, b) => a.name.localeCompare(b.name));
+    const filtered = searchValue.length < 1 ? sorted : sorted.filter(({
+      name,
+      code,
+      id
+    }) => name.toLowerCase().includes(searchValue.toLowerCase()) || code.includes(searchValue) || id.toLowerCase().includes(searchValue.toLowerCase()));
+    const grouped = filtered.reduce((acc, country) => {
+      let letter = country.name[0].toUpperCase();
+      if (letter === 'Å') {
+        letter = 'A';
+      }
+      if (!acc[letter]) acc[letter] = [];
+      acc[letter].push(country);
+      return acc;
+    }, {});
+    const alphaSections = Object.keys(grouped).sort().map(letter => ({
+      title: letter,
+      data: grouped[letter]
+    }));
+    return alphaSections;
+  }, [props.UserCountryCodes, searchValue]);
+  const allSections = useMemo(() => {
+    if (searchValue.length > 0 || !recentSection) return sections;
+    return [recentSection, ...sections];
+  }, [recentSection, sections, searchValue]);
+  const UserModal = useMemo(() => {
+    if (props.underlineModal) {
+      console.debug('underlineModal');
+      return props.underlineModal;
+    }
+    console.debug('underlineModal - underfine');
+    return undefined;
+  }, [props.underlineModal]);
+  if (UserModal) {
+    return /*#__PURE__*/_jsx(UserModal, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(Modal, {
+    animationType: "slide",
+    visible: props.isOpen,
+    transparent: true,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.overlay,
+      children: [/*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: () => {
+          props.toggleModalVisablity();
+          setSearchValue('');
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: StyleSheet.absoluteFillObject
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.container, {
+          height: height / 2.5
+        }],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            backgroundColor: colors.white,
+            padding: padding[3],
+            borderTopLeftRadius: radius['3xl'],
+            borderTopRightRadius: radius['3xl']
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.searchContainer,
+            children: [/*#__PURE__*/_jsx(Feather, {
+              name: "search",
+              size: 16,
+              color: "gray"
+            }), /*#__PURE__*/_jsx(TextInput, {
+              placeholder: "Country name or code",
+              style: styles.searchInput,
+              value: searchValue,
+              onChangeText: value => {
+                setSearchValue(value);
+              }
+            })]
+          })
+        }), /*#__PURE__*/_jsx(SectionList, {
+          ItemSeparatorComponent: () => /*#__PURE__*/_jsx(View, {
+            style: styles.divider
+          }),
+          sections: allSections,
+          keyExtractor: (item, index) => `${item.id}-${index}`,
+          style: {
+            borderTopLeftRadius: radius['lg'],
+            borderTopRightRadius: radius['lg']
+          },
+          renderSectionHeader: ({
+            section
+          }) => /*#__PURE__*/_jsx(View, {
+            style: styles.sectionHeader,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.sectionHeaderText,
+              children: section.title
+            })
+          }),
+          renderItem: ({
+            item,
+            index,
+            section
+          }) => {
+            const isSelected = item.id === props.value?.id;
+            const isFirst = index === 0;
+            const isLast = index === section.data.length - 1;
+            return /*#__PURE__*/_jsxs(Pressable, {
+              onPress: () => {
+                recordClick(item);
+                props.onSelectCountry(item);
+                props.toggleModalVisablity();
+                setSearchValue('');
+              },
+              style: {
+                padding: spacing[3],
+                gap: spacing[1],
+                marginHorizontal: SIDE_SCREEN_PADDING,
+                backgroundColor: isSelected ? colors.blue[50] : colors.white,
+                borderTopLeftRadius: isFirst ? radius.lg : 0,
+                borderTopRightRadius: isFirst ? radius.lg : 0,
+                borderBottomLeftRadius: isLast ? radius.lg : 0,
+                borderBottomRightRadius: isLast ? radius.lg : 0
+              },
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: {
+                  flexDirection: 'row',
+                  gap: spacing[1],
+                  alignItems: 'center'
+                },
+                children: [/*#__PURE__*/_jsx(Text, {
+                  children: item.flag
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [{
+                    flexShrink: 1
+                  }, isSelected ? {
+                    fontWeight: '600'
+                  } : undefined],
+                  children: item.name
+                }), /*#__PURE__*/_jsxs(Text, {
+                  children: ["(", item.code, ")"]
+                }), isSelected && /*#__PURE__*/_jsx(Feather, {
+                  name: "check",
+                  size: 14,
+                  color: colors.blue[500],
+                  style: {
+                    marginLeft: 'auto'
+                  }
+                })]
+              }), /*#__PURE__*/_jsx(View, {
+                children: /*#__PURE__*/_jsxs(Text, {
+                  style: {
+                    fontSize: fontSizes.xs,
+                    color: colors.gray[400],
+                    paddingHorizontal: padding[0.5]
+                  },
+                  children: [item.code, " ", item.mask.replace(/\#/g, '_')]
+                })
+              })]
+            });
+          }
+        })]
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  container: {
+    backgroundColor: colors.gray[200],
+    // gap: gap[4],
+    borderTopLeftRadius: radius['3xl'],
+    borderTopRightRadius: radius['3xl'],
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 8
+  },
+  searchContainer: {
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: borders.DEFAULT,
+    borderColor: colors.gray[100],
+    paddingHorizontal: spacing[1],
+    backgroundColor: colors.gray[300],
+    borderRadius: radius['2xl']
+  },
+  searchInput: {
+    flex: 1,
+    padding: spacing[1]
+  },
+  divider: {
+    height: borderWidth.DEFAULT,
+    backgroundColor: colors.gray[200],
+    marginHorizontal: spacing[1.5]
+  },
+  sectionHeader: {
+    backgroundColor: colors.gray[200],
+    paddingHorizontal: SIDE_SCREEN_PADDING,
+    paddingVertical: spacing[2]
+  },
+  sectionHeaderText: {
+    fontSize: fontSizes.xs,
+    fontWeight: '700',
+    color: colors.gray[500],
+    textTransform: 'uppercase',
+    letterSpacing: 0.8
+  }
+});
+//# sourceMappingURL=CountrySelectorModal.js.map