@alfalab/core-components-international-phone-input 2.7.0 → 2.7.2

package/moderncssm/use-skeleton-1328ead9.d.ts

@@ -2,6 +2,7 @@
 import React from "react";
 import { ReactNode } from "react";
 import { TextSkeletonProps } from "./types-1328ead9";
+type BorderRadiusSize = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 36 | 64 | "pill";
 type SkeletonProps = {
     /**
      * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
@@ -36,6 +37,11 @@ type SkeletonProps = {
      * @default default
      */
     colors?: "default" | "inverted";
+    /**
+     * Скругление углов
+     * @default 8
+     */
+    borderRadius?: BorderRadiusSize;
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 type SkeletonProps$0 = {
@@ -46,4 +52,4 @@ declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeleto
     renderSkeleton: (props: SkeletonProps$0) => React.JSX.Element | null;
     textRef: React.RefObject<HTMLElement>;
 };
-export { SkeletonProps, Skeleton, useSkeleton };
+export { BorderRadiusSize, SkeletonProps, Skeleton, useSkeleton };

package/moderncssm/utils/index.d.ts

@@ -1,14 +1,15 @@
+import { RefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "@alfalab/core-components-select/shared";
 import { CountriesData } from "../data/country-data";
 import { Country } from "../types";
 declare function initCountries(iso2s?: string[], customCountriesList?: CountriesData[]): Country[][];
-declare function findCountry(countries: Country[][], value?: string, iso2?: string, country?: Country): Country | undefined;
+declare function findCountry(countries: Country[][], value: string | undefined, iso2: string | undefined, country?: Country): Country | undefined;
 declare function guessCountry(inputNumber: string, data: Country[][]): Country | undefined;
 declare function clearMask(value: string): string;
 declare function createPhoneMaskExpression(country: Country | undefined, clearableCountryCode: boolean): Array<RegExp | string>;
-declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
 declare function defaultFilterFn(value: string | undefined, option: OptionShape): boolean;
 declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[];
 declare function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string): {

package/moderncssm/utils/index.js

@@ -115,17 +115,21 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         ...format.split('').map(itemToMask),
     ];
 }
-function createMaskOptions(country, clearableCountryCode, preserveCountryCode) {
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef) {
     const countryCode = country?.countryCode;
     const prefix = countryCode ? getInitialValueFromCountry(countryCode) : '';
     const prefixLen = !clearableCountryCode && prefix ? prefix.length : 0;
     const mask = createPhoneMaskExpression(country, clearableCountryCode);
+    const preprocessors = [
+        maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+    ];
+    if (preserveCountryCode) {
+        const createMask = (lastCountry) => createPhoneMaskExpression(lastCountry, clearableCountryCode);
+        preprocessors.push(maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+    }
     return {
         mask,
-        preprocessors: [
-            maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
-            maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
-        ],
+        preprocessors,
         postprocessors: [maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             maskUtils.caretGuard((value, [from, to]) => [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-international-phone-input",
-    "version": "2.7.0",
+    "version": "2.7.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,10 +15,10 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input-autocomplete": "12.7.2",
-        "@alfalab/core-components-input": "^15.5.0",
-        "@alfalab/core-components-select": "^17.20.1",
-        "@alfalab/core-components-shared": "^0.14.1",
+        "@alfalab/core-components-input-autocomplete": "12.8.0",
+        "@alfalab/core-components-input": "^15.5.1",
+        "@alfalab/core-components-select": "^17.20.3",
+        "@alfalab/core-components-shared": "^0.15.0",
         "@alfalab/core-components-mq": "^4.4.1",
         "@alfalab/hooks": "^1.13.1",
         "@alfalab/icons-glyph": "^2.210.0",
@@ -29,5 +29,5 @@
         "tslib": "^2.4.0"
     },
     "themesVersion": "13.7.0",
-    "varsVersion": "9.16.0"
+    "varsVersion": "9.18.0"
 }

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

@@ -14,6 +14,7 @@ import { useMaskito } from '@maskito/react';
 import type { InputAutocompleteProps } from '@alfalab/core-components-input-autocomplete';
 import { AnyObject, BaseOption } from '@alfalab/core-components-select/shared';
 import type { BaseSelectChangePayload } from '@alfalab/core-components-select/typings';
+import { isNullable } from '@alfalab/core-components-shared';
 
 import type { BaseInternationalPhoneInputProps, Country } from '../../types';
 import {
@@ -59,6 +60,7 @@ export const BaseInternationalPhoneInput = forwardRef<
         },
         ref,
     ) => {
+        const lastCountryRef = useRef<Country | null>(null);
         const countriesData = useMemo(
             () => initCountries(countries, customCountriesList),
             [countries, customCountriesList],
@@ -84,7 +86,13 @@ export const BaseInternationalPhoneInput = forwardRef<
         const preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
         const clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
         const maskOptions = useMemo(
-            () => createMaskOptions(country, clearableCountryCode, preserveCountryCode),
+            () =>
+                createMaskOptions(
+                    country,
+                    clearableCountryCode,
+                    preserveCountryCode,
+                    lastCountryRef,
+                ),
             [country, clearableCountryCode, preserveCountryCode],
         );
 
@@ -206,6 +214,14 @@ export const BaseInternationalPhoneInput = forwardRef<
             ...restProps.inputProps,
         } as const;
 
+        useEffect(() => {
+            if (!preserveCountryCode || isNullable(country)) {
+                return;
+            }
+
+            lastCountryRef.current = country;
+        }, [country, preserveCountryCode]);
+
         return Array.isArray(options) ? (
             <InputAutocomplete
                 closeOnSelect={true}

package/src/types.ts

@@ -9,19 +9,12 @@ import type { InputAutocompleteDesktopProps } from '@alfalab/core-components-inp
 import type { InputAutocompleteMobileProps } from '@alfalab/core-components-input-autocomplete/mobile';
 import { OptionShape } from '@alfalab/core-components-select/typings';
 
+import { Country } from '../../types';
+
 import type { SharedCountrySelectProps } from './components/country-select';
 import { CountriesData } from './data/country-data';
 
-export type Country = {
-    name: string;
-    regions?: string[];
-    iso2: string;
-    countryCode: string;
-    dialCode: string;
-    format?: string;
-    priority: number;
-    mainCode?: boolean;
-};
+export { Country };
 
 export type AreaItem = Country & {
     isAreaCode: boolean;

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import type { MaskitoOptions } from '@maskito/core';
 
 import type { InputAutocompleteDesktopProps } from '@alfalab/core-components-input-autocomplete/desktop';
@@ -51,8 +52,8 @@ export function initCountries(iso2s?: string[], customCountriesList?: CountriesD
 
 export function findCountry(
     countries: Country[][],
-    value?: string,
-    iso2?: string,
+    value: string | undefined,
+    iso2: string | undefined,
     country?: Country,
 ) {
     if (country) return country;
@@ -163,18 +164,27 @@ export function createMaskOptions(
     country: Country | undefined,
     clearableCountryCode: boolean,
     preserveCountryCode: boolean,
+    lastCountryRef: RefObject<Country | null>,
 ): MaskitoOptions {
     const countryCode = country?.countryCode;
     const prefix = countryCode ? getInitialValueFromCountry(countryCode) : '';
     const prefixLen = !clearableCountryCode && prefix ? prefix.length : 0;
     const mask = createPhoneMaskExpression(country, clearableCountryCode);
 
+    const preprocessors = [
+        maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+    ];
+
+    if (preserveCountryCode) {
+        const createMask = (lastCountry: Country) =>
+            createPhoneMaskExpression(lastCountry, clearableCountryCode);
+
+        preprocessors.push(maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+    }
+
     return {
         mask,
-        preprocessors: [
-            maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
-            maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
-        ],
+        preprocessors,
         postprocessors: [maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             maskUtils.caretGuard((value, [from, to]) => [

package/types.d.ts

@@ -6,18 +6,9 @@ import { InputAutocompleteProps } from "@alfalab/core-components-input-autocompl
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
 import { OptionShape } from "./typings-d515b24c";
+import { Country } from "./index-464d40a4";
 import { SharedCountrySelectProps } from "./components/country-select/index";
 import { CountriesData } from "./data/country-data";
-type Country = {
-    name: string;
-    regions?: string[];
-    iso2: string;
-    countryCode: string;
-    dialCode: string;
-    format?: string;
-    priority: number;
-    mainCode?: boolean;
-};
 type AreaItem = Country & {
     isAreaCode: boolean;
     areaCodeLength: number;

package/typings-d515b24c.d.ts

@@ -5,6 +5,7 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttribute
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
+import { BackgroundColorType } from "./index-464d40a4";
 import { BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
@@ -175,7 +176,6 @@ type NavigationBarPrivateProps = {
     scrollableParentRef?: React.RefObject<HTMLDivElement>;
 };
 type NavigationBarProps = NavigationBarPrivateProps;
-type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = "center" | "left";
 type BottomSheetProps = {
     /**

package/use-skeleton-1328ead9.d.ts

@@ -2,6 +2,7 @@
 import React from "react";
 import { ReactNode } from "react";
 import { TextSkeletonProps } from "./types-1328ead9";
+type BorderRadiusSize = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 36 | 64 | "pill";
 type SkeletonProps = {
     /**
      * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
@@ -36,6 +37,11 @@ type SkeletonProps = {
      * @default default
      */
     colors?: "default" | "inverted";
+    /**
+     * Скругление углов
+     * @default 8
+     */
+    borderRadius?: BorderRadiusSize;
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 type SkeletonProps$0 = {
@@ -46,4 +52,4 @@ declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeleto
     renderSkeleton: (props: SkeletonProps$0) => React.JSX.Element | null;
     textRef: React.RefObject<HTMLElement>;
 };
-export { SkeletonProps, Skeleton, useSkeleton };
+export { BorderRadiusSize, SkeletonProps, Skeleton, useSkeleton };

package/utils/index.d.ts

@@ -1,14 +1,15 @@
+import { RefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "@alfalab/core-components-select/shared";
 import { CountriesData } from "../data/country-data";
 import { Country } from "../types";
 declare function initCountries(iso2s?: string[], customCountriesList?: CountriesData[]): Country[][];
-declare function findCountry(countries: Country[][], value?: string, iso2?: string, country?: Country): Country | undefined;
+declare function findCountry(countries: Country[][], value: string | undefined, iso2: string | undefined, country?: Country): Country | undefined;
 declare function guessCountry(inputNumber: string, data: Country[][]): Country | undefined;
 declare function clearMask(value: string): string;
 declare function createPhoneMaskExpression(country: Country | undefined, clearableCountryCode: boolean): Array<RegExp | string>;
-declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
 declare function defaultFilterFn(value: string | undefined, option: OptionShape): boolean;
 declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[];
 declare function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string): {

package/utils/index.js

@@ -120,17 +120,23 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         ' '
     ], false), format.split('').map(itemToMask), true);
 }
-function createMaskOptions(country, clearableCountryCode, preserveCountryCode) {
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef) {
     var countryCode = country === null || country === void 0 ? void 0 : country.countryCode;
     var prefix = countryCode ? getInitialValueFromCountry(countryCode) : '';
     var prefixLen = !clearableCountryCode && prefix ? prefix.length : 0;
     var mask = createPhoneMaskExpression(country, clearableCountryCode);
+    var preprocessors = [
+        coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+    ];
+    if (preserveCountryCode) {
+        var createMask = function (lastCountry) {
+            return createPhoneMaskExpression(lastCountry, clearableCountryCode);
+        };
+        preprocessors.push(coreComponentsShared.maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+    }
     return {
         mask: mask,
-        preprocessors: [
-            coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
-            coreComponentsShared.maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
-        ],
+        preprocessors: preprocessors,
         postprocessors: [coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             coreComponentsShared.maskUtils.caretGuard(function (value, _a) {