fix(intl-phone-input): ability to overwrite country-data

.changeset/violet-dancers-check.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-international-phone-input': minor
+---
+
+добавлен опциональный проп customCountriesList, который можно использовать, чтобы переопределить дефолтный массив country-data

packages/international-phone-input/src/Component.test.tsx

@@ -8,6 +8,7 @@ import {
     getInternationalPhoneInputDesktopTestIds,
     getInternationalPhoneInputMobileTestIds,
 } from './utils';
+import { countriesData } from './data/country-data';
 
 describe('InternationalPhoneInput', () => {
     Object.defineProperty(window, 'matchMedia', {
@@ -744,4 +745,38 @@ describe('InternationalPhoneInput', () => {
 
         expect(getByTestIdHint(testIds.fieldHint)).toBeInTheDocument();
     });
+
+    it('should be able to overwrite countries list with customCountriesList prop', async () => {
+        const dti = 'test-dti';
+
+        let customCountriesList = countriesData.map((countryData) => {
+            if (countryData[4]) {
+                const fullNumberLength =
+                    countryData[3].length + countryData[4].replace(/\s/g, '').length;
+                const additionalNumberLength = 15 - fullNumberLength;
+
+                if (additionalNumberLength > 0) {
+                    // Overwrite number length
+                    countryData[4] = `${countryData[4]} ${'.'.repeat(additionalNumberLength)}`;
+                }
+            }
+
+            return countryData;
+        });
+
+        const { getByTestId } = render(
+            <InternationalPhoneInputStateful
+                label='Номер телефона'
+                placeholder='Введите номер телефона'
+                dataTestId={dti}
+                customCountriesList={customCountriesList}
+            />,
+        );
+
+        const input = getByTestId(dti);
+
+        await userEvent.type(input, '+123451234512345');
+
+        expect(input).toHaveValue('+1 234 512 3451 2345');
+    });
 });

packages/international-phone-input/src/components/base-international-phone-input/Component.tsx

@@ -54,11 +54,15 @@ export const BaseInternationalPhoneInput = forwardRef<
             clear: clearProp,
             open: openProps,
             defaultOpen,
+            customCountriesList,
             ...restProps
         },
         ref,
     ) => {
-        const countriesData = useMemo(() => initCountries(countries), [countries]);
+        const countriesData = useMemo(
+            () => initCountries(countries, customCountriesList),
+            [countries, customCountriesList],
+        );
         const inputRef = useRef<HTMLInputElement>(null);
         const inputWrapperRef = useRef<HTMLDivElement>(null);
 

packages/international-phone-input/src/types.ts

@@ -10,6 +10,7 @@ import type { InputAutocompleteMobileProps } from '@alfalab/core-components-inpu
 import { OptionShape } from '@alfalab/core-components-select/typings';
 
 import type { SharedCountrySelectProps } from './components/country-select';
+import { CountriesData } from './data/country-data';
 
 export type Country = {
     name: string;
@@ -43,6 +44,11 @@ type CommonPhoneInputProps = {
      */
     defaultIso2?: string;
 
+    /**
+     * Список правил парсинга номеров телефонов по странам (для переопределения дефолтного)
+     */
+    customCountriesList?: CountriesData[];
+
     /**
      * Возможность стереть код страны
      * @default true

packages/international-phone-input/src/utils/index.ts

@@ -5,13 +5,14 @@ import { GroupShape, isGroup, OptionShape } from '@alfalab/core-components-selec
 import { getDataTestId, maskUtils } from '@alfalab/core-components-shared';
 
 import { DEFAULT_PHONE_FORMAT } from '../consts';
-import { countriesData } from '../data/country-data';
+import { CountriesData, countriesData } from '../data/country-data';
 import type { AreaItem, Country } from '../types';
 
-export function initCountries(iso2s?: string[]) {
+export function initCountries(iso2s?: string[], customCountriesList?: CountriesData[]) {
+    const data = customCountriesList ?? countriesData;
     const filteredCountriesData = Array.isArray(iso2s)
-        ? countriesData.filter((country) => iso2s.includes(country[2]))
-        : countriesData;
+        ? data.filter((country) => iso2s.includes(country[2]))
+        : data;
 
     return filteredCountriesData.map((country) => {
         const countryItem: Country = {