@cloud-ru/uikit-product-fields-predefined 0.16.0 → 0.17.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "16.1.1",
-    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.31",
-    "@cloud-ru/uikit-product-mobile-fields": "0.12.4",
-    "@cloud-ru/uikit-product-mobile-modal": "0.9.28",
-    "@cloud-ru/uikit-product-mobile-tooltip": "0.5.4",
+    "@cloud-ru/uikit-product-icons": "16.2.0",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.32",
+    "@cloud-ru/uikit-product-mobile-fields": "0.12.5",
+    "@cloud-ru/uikit-product-mobile-modal": "0.9.29",
+    "@cloud-ru/uikit-product-mobile-tooltip": "0.5.5",
     "@cloud-ru/uikit-product-utils": "8.1.0",
     "@snack-uikit/attachment": "0.4.10",
     "@snack-uikit/button": "0.19.16",
@@ -61,5 +61,5 @@
     "react-hook-form": ">=7.51.0",
     "yup": ">=0.32.0"
   },
-  "gitHead": "f0d31e819998afe109833b200e61860543bcf54b"
+  "gitHead": "f4fa36c232b7f4dd934a902694108db993d8b676"
 }

package/src/components/FieldPhone/FieldPhone.tsx

@@ -12,7 +12,7 @@ import { PLACEHOLDER_CHAR } from './constants';
 import { useCountries } from './hooks';
 import styles from './styles.module.scss';
 import { CountrySettings, FieldPhoneOptionsProps, MaskOptions } from './types';
-import { detectCountryByPhone } from './utils';
+import { detectCountryByPhone, handleAutoInsert } from './utils';
 
 export type FieldPhoneProps = WithLayoutType<
   Omit<
@@ -63,6 +63,9 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(
     const options = useCountries(optionsProp);
     const isOnlyOneCountryAvailable = options.length === 1;
 
+    const rawInsertRef = useRef('');
+    const insertSwitchRef = useRef(false);
+
     const [country, setCountry] = useValueControl<FieldPhoneOptionsProps>({
       defaultValue: options[0],
       onChange: onChangeCountry,
@@ -90,10 +93,23 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(
         definitions: {
           X: /[0-9]/,
         },
+        prepare: (str: string) => {
+          if (str.replace(/\D/g, '').length > 1) {
+            rawInsertRef.current = str;
+          }
+          return str;
+        },
       }),
       [country?.mask],
     );
 
+    const clearRaw = () => {
+      rawInsertRef.current = '';
+    };
+    const markSwitchRef = () => {
+      insertSwitchRef.current = true;
+    };
+
     const {
       ref: iMaskRef,
       value: iMaskValue,
@@ -110,6 +126,24 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(
         if (value !== valueProp) {
           onChangeProp?.(value);
         }
+
+        if (insertSwitchRef.current) {
+          insertSwitchRef.current = false;
+          return;
+        }
+        handleAutoInsert({
+          raw: rawInsertRef.current,
+          onValueChange: value => {
+            setTimeout(() => setValue(value), 0);
+          },
+          onCountryChange: country => {
+            markSwitchRef();
+            clearRaw();
+            setCountry(country);
+          },
+          country,
+          options,
+        });
       },
     });
 

package/src/components/FieldPhone/__tests__/constants.ts

@@ -24,3 +24,178 @@ export const phoneFormatCases = [
   { country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
   { country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
 ];
+
+export const handleAutoInsertCases = [
+  {
+    name: 'Kyrgyzstan switches + exact national',
+    raw: '+996 201 666666',
+    currentId: 'russia',
+    expectedCountryId: 'kyrgyzstan',
+    expectedValue: '201666666',
+  },
+  {
+    name: 'Kyrgyzstan same => exact national',
+    raw: '+996201666666',
+    currentId: 'kyrgyzstan',
+    expectedValue: '201666666',
+  },
+  {
+    name: 'Russia incomplete => no calls',
+    raw: '+7 987',
+    currentId: 'russia',
+  },
+  {
+    name: 'Albania (+355) XXX XXX-XXX',
+    raw: '+355 675 123 456',
+    currentId: 'russia',
+    expectedCountryId: 'albania',
+    expectedLengthFromCountryId: 'albania',
+  },
+  {
+    name: 'Algeria (+213) XX XXX-XXXX',
+    raw: '+213 12 345 6789',
+    currentId: 'russia',
+    expectedCountryId: 'algeria',
+    expectedLengthFromCountryId: 'algeria',
+  },
+  {
+    name: 'Armenia (+374) XX XXX-XXX',
+    raw: '+374 10 123 456',
+    currentId: 'russia',
+    expectedCountryId: 'armenia',
+    expectedLengthFromCountryId: 'armenia',
+  },
+  {
+    name: 'Austria (+43) XXX XXX-XXXX',
+    raw: '+43 664 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'austria',
+    expectedLengthFromCountryId: 'austria',
+  },
+  {
+    name: 'Australia (+61) X XXXX-XXXX',
+    raw: '+61 4 1234 5678',
+    currentId: 'russia',
+    expectedCountryId: 'australia',
+    expectedLengthFromCountryId: 'australia',
+  },
+  {
+    name: 'Belarus (+375) XX XXX-XX-XX',
+    raw: '+375 29 123 45 67',
+    currentId: 'russia',
+    expectedCountryId: 'belarus',
+    expectedLengthFromCountryId: 'belarus',
+  },
+  {
+    name: 'Bangladesh (+880) X XXX-XXXX',
+    raw: '+880 1 234 5678',
+    currentId: 'russia',
+    expectedCountryId: 'bangladesh',
+    expectedLengthFromCountryId: 'bangladesh',
+  },
+  {
+    name: 'Bahrain (+973) XX XXX-XXX',
+    raw: '+973 33 123 456',
+    currentId: 'russia',
+    expectedCountryId: 'bahrain',
+    expectedLengthFromCountryId: 'bahrain',
+  },
+  {
+    name: 'Cyprus (+357) XX XXXXXX',
+    raw: '+357 99 123456',
+    currentId: 'russia',
+    expectedCountryId: 'cyprus',
+    expectedLengthFromCountryId: 'cyprus',
+  },
+  {
+    name: 'Georgia (+995) XXX XX-XX-XX',
+    raw: '+995 555 12 34 56',
+    currentId: 'russia',
+    expectedCountryId: 'georgia',
+    expectedLengthFromCountryId: 'georgia',
+  },
+  {
+    name: 'India (+91) XXXXX-XXXXX',
+    raw: '+91 98765 43210',
+    currentId: 'russia',
+    expectedCountryId: 'india',
+    expectedLengthFromCountryId: 'india',
+  },
+  {
+    name: 'Iran (+98) XXX XXX-XXXX',
+    raw: '+98 912 345 6789',
+    currentId: 'russia',
+    expectedCountryId: 'iran',
+    expectedLengthFromCountryId: 'iran',
+  },
+  {
+    name: 'Netherlands (+31) XX XXX-XXXX',
+    raw: '+31 20 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'netherlands',
+    expectedLengthFromCountryId: 'netherlands',
+  },
+  {
+    name: 'Romania (+40) XX XXX-XXXX',
+    raw: '+40 21 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'romania',
+    expectedLengthFromCountryId: 'romania',
+  },
+  {
+    name: 'Serbia (+381) XX XXX-XXXX',
+    raw: '+381 11 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'serbia',
+    expectedLengthFromCountryId: 'serbia',
+  },
+  {
+    name: 'Uzbekistan (+998) XX XXX-XX-XX',
+    raw: '+998 90 123 45 67',
+    currentId: 'russia',
+    expectedCountryId: 'uzbekistan',
+    expectedLengthFromCountryId: 'uzbekistan',
+  },
+  {
+    name: 'Tajikistan (+992) XX XXX-XXXX',
+    raw: '+992 93 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'tajikistan',
+    expectedLengthFromCountryId: 'tajikistan',
+  },
+  {
+    name: 'Moldova (+373) XXXX XXXX',
+    raw: '+373 1234 5678',
+    currentId: 'russia',
+    expectedCountryId: 'moldova',
+    expectedLengthFromCountryId: 'moldova',
+  },
+  {
+    name: 'Netherlands (+31) switches from Moldova',
+    raw: '+31 20 123 4567',
+    currentId: 'moldova',
+    expectedCountryId: 'netherlands',
+    expectedLengthFromCountryId: 'netherlands',
+  },
+  {
+    name: 'Uzbekistan (+998) switches from Tajikistan',
+    raw: '+998 90 123 45 67',
+    currentId: 'tajikistan',
+    expectedCountryId: 'uzbekistan',
+    expectedLengthFromCountryId: 'uzbekistan',
+  },
+  {
+    name: 'Tajikistan (+992) switches from Albania',
+    raw: '+992 93 123 4567',
+    currentId: 'albania',
+    expectedCountryId: 'tajikistan',
+    expectedLengthFromCountryId: 'tajikistan',
+  },
+  {
+    name: 'Moldova (+373) switches from Egypt',
+    raw: '+373 1234 5678',
+    currentId: 'egypt',
+    expectedCountryId: 'moldova',
+    expectedLengthFromCountryId: 'moldova',
+  },
+];

package/src/components/FieldPhone/__tests__/handleAutoInsert.spec.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { ALL_COUNTRY_CODES } from '../countries';
+import { handleAutoInsert } from '../utils';
+import { handleAutoInsertCases } from './constants';
+
+const OPTIONS = ALL_COUNTRY_CODES.map(c => ({
+  id: c.value,
+  iso2: c.iso2,
+  mask: c.mask,
+  content: {
+    caption: c.caption,
+    option: c.value,
+  },
+  beforeContent: null,
+}));
+
+const byId = (id: string) => {
+  const found = OPTIONS.find(c => c.id === id);
+  if (!found) throw new Error(`Country not found in OPTIONS: ${id}`);
+  return found;
+};
+
+type BaseCase = {
+  name: string;
+  raw: string;
+  currentId: string;
+};
+
+type NoCallsCase = BaseCase;
+
+type ExactCase = BaseCase & {
+  expectedValue: string;
+  expectedCountryId?: string;
+};
+
+const casesNoCalls: NoCallsCase[] = handleAutoInsertCases.filter(
+  (c): c is NoCallsCase => !('expectedValue' in c) && !('expectedLengthFromCountryId' in c),
+);
+
+const casesExact: ExactCase[] = handleAutoInsertCases.filter((c): c is ExactCase => 'expectedValue' in c);
+
+describe('handleAutoInsert — no calls', () => {
+  casesNoCalls.forEach(tc => {
+    it(`${tc.name}`, () => {
+      const onValueChange = vi.fn();
+      const onCountryChange = vi.fn();
+
+      handleAutoInsert({
+        raw: tc.raw,
+        onValueChange,
+        onCountryChange,
+        country: byId(tc.currentId),
+        options: OPTIONS,
+      });
+
+      expect(onCountryChange).not.toHaveBeenCalled();
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('handleAutoInsert — exact value', () => {
+  casesExact.forEach(tc => {
+    it(`${tc.name}`, () => {
+      const onValueChange = vi.fn();
+      const onCountryChange = vi.fn();
+
+      handleAutoInsert({
+        raw: tc.raw,
+        onValueChange,
+        onCountryChange,
+        country: byId(tc.currentId),
+        options: OPTIONS,
+      });
+
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      expect(onValueChange).toHaveBeenCalledWith(tc.expectedValue);
+
+      const expectedCountryCalls = tc.expectedCountryId ? 1 : 0;
+      expect(onCountryChange).toHaveBeenCalledTimes(expectedCountryCalls);
+
+      const actualCountryId = onCountryChange.mock.calls[0]?.[0]?.id;
+      expect(actualCountryId).toBe(tc.expectedCountryId);
+    });
+  });
+});

package/src/components/FieldPhone/utils.ts

@@ -69,3 +69,44 @@ export function detectCountryByPhone(text: string, options: FieldPhoneOptionsPro
 
   return options.find(opt => opt.iso2 === regionCode);
 }
+
+export const handleAutoInsert = ({
+  raw,
+  onValueChange,
+  onCountryChange,
+  country,
+  options,
+}: {
+  raw: string;
+  onValueChange: (str: string) => void;
+  onCountryChange: (country: FieldPhoneOptionsProps) => void;
+  country?: FieldPhoneOptionsProps;
+  options: FieldPhoneOptionsProps[];
+}) => {
+  if (!raw) return;
+
+  const parsed = parsePhoneNumber(raw);
+  const ok = parsed.valid || parsed.possible;
+  if (!ok) return;
+
+  const detected = detectCountryByPhone(raw, options);
+  if (!detected) return;
+
+  let national = parsed.number?.significant.replace(/\D/g, '');
+  if (!national) return;
+
+  const nextNationalLength = (detected.mask?.match(/X/g) ?? []).length;
+  if (nextNationalLength && national.length > nextNationalLength) {
+    national = national.slice(-nextNationalLength);
+  }
+
+  const fullDigits = (parsed.number?.e164 ?? raw).replace(/\D/g, '');
+  const countryCodeDigits = String(parsed.countryCode ?? '');
+  const expected = countryCodeDigits.length + nextNationalLength;
+  if (fullDigits.length < expected) return;
+
+  if (detected.id !== country?.id) {
+    onCountryChange(detected);
+  }
+  onValueChange(national);
+};