@alfalab/core-components 48.11.0 → 48.12.0-beta.0

package/select/modern/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-e1bb3e1e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-65a71ee9.js';
 import 'react';
 import '../../../skeleton/modern';
 import 'classnames';

package/select/modern/presets/useSelectWithApply/hook.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'react-fast-compare';
 import '../../../../shared/modern';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-e1bb3e1e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-65a71ee9.js';
 import '../../utils.js';
 import '../../components/options-list/Component.js';
 import 'react-merge-refs';

package/select/modern/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,6 +1,6 @@
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-e1bb3e1e.js';
+export { O as OptionsListWithApply } from '../../../hook-65a71ee9.js';
 import './footer/Component.js';
 import './header/Component.js';
 import 'react-merge-refs';

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-e1bb3e1e";
+export * from "../../../hook-65a71ee9";

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../hook-e1bb3e1e.js';
+export { O as OptionsListWithApply } from '../../../hook-65a71ee9.js';
 import 'react';
 import 'react-fast-compare';
 import '../../../utils.js';

package/select/modern/shared/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-e1bb3e1e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-65a71ee9.js';
 export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVirtualVisibleOptions, useVisibleOptions } from '../utils.js';
 export { OptionDesktop } from '../components/option/desktop/Component.js';
 export { OptionMobile } from '../components/option/mobile/Component.js';
@@ -48,12 +48,12 @@ import 'compute-scroll-into-view';
 import 'downshift';
 import '../components/native-select/Component.js';
 import '../components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import '../list-popover-desktop-edd27f5e.js';
+import '../list-popover-desktop-b4058f29.js';
 import '../components/base-select/components/list-mobile/helpers/get-list-modal-mobile-props.js';
 import '../components/base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
 import '../components/base-select/components/list-mobile/list-mobile.js';
 import '../components/base-select/components/list-mobile/list-bottom-sheet-mobile.js';
-import '../mobile.module-b160a7de.js';
+import '../mobile.module-77acf76d.js';
 import '../components/base-select/components/list-mobile/list-modal-mobile.js';
 import '../../../base-modal/modern';
 import '../../../button/modern/mobile';

package/select/modern/typings.d.ts

@@ -6,7 +6,7 @@ import { InputProps } from "../../input";
 import { ModalProps } from "../../modal";
 import { ModalFooterProps, ModalHeaderProps } from "../../modal/shared";
 import { PopoverProps } from "../../popover";
-import { UseSelectWithApplyProps } from "./hook-94ef1330";
+import { UseSelectWithApplyProps } from "./hook-b8d44131";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**

package/select/moderncssm/Component.responsive.js

@@ -69,7 +69,7 @@ import './components/footer/index.module.css';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
 import './components/virtual-options-list/index.module.css';
-import './hook-0c8b8277.js';
+import './hook-50057c35.js';
 import 'react-fast-compare';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/moderncssm/desktop';

package/select/moderncssm/{hook-0c8b8277.js → hook-50057c35.js}

@@ -158,6 +158,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, onSelect
                 onChange: handleToggleAll,
             },
         },
+        allowUnselect: true,
         multiple: true,
         options: memoizedOptions,
         onChange: handleChange,

package/select/moderncssm/hook-b8d44131.d.ts

@@ -0,0 +1,112 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "./typings";
+type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Дополнительный обработчик клика на чекбокс выбрать все
+     */
+    onSelectAllClick?: (selectedMultiple: OptionShape[]) => void;
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
+    /**
+     * Включает отображение поиска
+     */
+    showSearch?: BaseSelectProps['showSearch'];
+    /**
+     *  Настройки поиска
+     */
+    searchProps?: BaseSelectProps['searchProps'];
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: boolean;
+};
+declare const SELECT_ALL_KEY = "select_all";
+declare function useSelectWithApply({ options, selected, onChange, onSelectAllClick, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, }: UseSelectWithApplyProps): {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings").OptionsListProps & {
+        showClear?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        selectedDraft?: OptionShape[] | undefined;
+        OptionsList?: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/footer/Component").FooterProps> | undefined;
+        Header?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps> | undefined;
+        headerProps?: import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps | undefined;
+        showHeaderWithSelectAll?: boolean | undefined;
+        setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    optionsListProps: {
+        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        showClear: boolean;
+        onClear: () => void;
+        onApply: () => void;
+        onClose: () => void;
+        selectedDraft: OptionShape[];
+        setSelectedDraft: import("react").Dispatch<import("react").SetStateAction<OptionShape[]>>;
+        showHeaderWithSelectAll: boolean;
+        headerProps: any;
+    };
+    allowUnselect: boolean;
+    multiple: boolean;
+    options: (OptionShape | import("./typings").GroupShape | {
+        key: string;
+        content: string;
+    })[];
+    onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
+    selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+    showSearch: boolean;
+    searchProps: {
+        value: string;
+        onChange: ((value: string) => void) | undefined;
+        componentProps?: import("./typings").SearchProps | undefined;
+        accessor?: ((option: OptionShape) => string) | undefined;
+        filterFn?: ((optionText: string, search: string) => boolean) | undefined;
+        filterGroup?: boolean | undefined;
+        groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
+    } | undefined;
+    originalProps: {
+        options: (OptionShape | import("./typings").GroupShape)[];
+        selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+        onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
+        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        optionsListProps: unknown;
+        showClear: boolean;
+        showSelectAll: boolean;
+        showHeaderWithSelectAll: boolean;
+        showSearch: boolean;
+        searchProps: {
+            componentProps?: import("./typings").SearchProps | undefined;
+            accessor?: ((option: OptionShape) => string) | undefined;
+            filterFn?: ((optionText: string, search: string) => boolean) | undefined;
+            value?: string | undefined;
+            onChange?: ((value: string) => void) | undefined;
+            filterGroup?: boolean | undefined;
+            groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
+        };
+    };
+};
+export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/select/moderncssm/index.js

@@ -69,7 +69,7 @@ import './components/footer/index.module.css';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
 import './components/virtual-options-list/index.module.css';
-import './hook-0c8b8277.js';
+import './hook-50057c35.js';
 import 'react-fast-compare';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/moderncssm/desktop';

package/select/moderncssm/mobile/Component.mobile.js

@@ -20,7 +20,7 @@ import { OptionResponsive } from '../components/option/Component.responsive.js';
 import { OptionsList } from '../components/options-list/Component.js';
 import { Search } from '../components/search/Component.js';
 import { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
-import { u as useSelectWithApply } from '../hook-0c8b8277.js';
+import { u as useSelectWithApply } from '../hook-50057c35.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/ChevronDownSIcon';

package/select/moderncssm/mobile/Component.modal.mobile.js

@@ -65,7 +65,7 @@ import '../components/search/index.module.css';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
 import '../components/virtual-options-list/index.module.css';
-import '../hook-0c8b8277.js';
+import '../hook-50057c35.js';
 import 'react-fast-compare';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/moderncssm/desktop';

package/select/moderncssm/mobile/index.js

@@ -66,7 +66,7 @@ import '../components/search/index.module.css';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
 import '../components/virtual-options-list/index.module.css';
-import '../hook-0c8b8277.js';
+import '../hook-50057c35.js';
 import 'react-fast-compare';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/moderncssm/desktop';

package/select/moderncssm/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-94ef1330";
+export * from "../hook-b8d44131";

package/select/moderncssm/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-0c8b8277.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-50057c35.js';
 import 'react';
 import '../../../skeleton/moderncssm';
 import 'classnames';

package/select/moderncssm/presets/useSelectWithApply/hook.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'react-fast-compare';
 import '../../../../shared/moderncssm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-0c8b8277.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-50057c35.js';
 import '../../utils.js';
 import '../../components/options-list/Component.js';
 import 'react-merge-refs';

package/select/moderncssm/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,6 +1,6 @@
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-0c8b8277.js';
+export { O as OptionsListWithApply } from '../../../hook-50057c35.js';
 import '../../../../../button/moderncssm/desktop';
 import '../../../../../shared/moderncssm';
 import './footer/index.module.css';

package/select/moderncssm/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-0c8b8277";
+export * from "../../../hook-50057c35";

package/select/moderncssm/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../hook-0c8b8277.js';
+export { O as OptionsListWithApply } from '../../../hook-50057c35.js';
 import 'react';
 import 'react-fast-compare';
 import '../../../utils.js';

package/select/moderncssm/shared/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-0c8b8277.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-50057c35.js';
 export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVirtualVisibleOptions, useVisibleOptions } from '../utils.js';
 export { OptionDesktop } from '../components/option/desktop/Component.js';
 export { OptionMobile } from '../components/option/mobile/Component.js';

package/select/moderncssm/typings.d.ts

@@ -6,7 +6,7 @@ import { InputProps } from "../../input";
 import { ModalProps } from "../../modal";
 import { ModalFooterProps, ModalHeaderProps } from "../../modal/shared";
 import { PopoverProps } from "../../popover";
-import { UseSelectWithApplyProps } from "./hook-94ef1330";
+import { UseSelectWithApplyProps } from "./hook-b8d44131";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**

package/select/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-94ef1330";
+export * from "../hook-b8d44131";

package/select/presets/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-4d462686.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-4ece6157.js');
 
 
 

package/select/presets/useSelectWithApply/hook.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('react-fast-compare');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-4d462686.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-4ece6157.js');
 
 
 

package/select/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-4d462686.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-4ece6157.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 

package/select/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-4d462686";
+export * from "../../../hook-4ece6157";

package/select/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-4d462686.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-4ece6157.js');
 
 
 

package/select/shared/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-4d462686.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-4ece6157.js');
 var utils = require('../utils.js');
 var components_option_desktop_Component = require('../components/option/desktop/Component.js');
 var components_option_mobile_Component = require('../components/option/mobile/Component.js');

package/select/typings.d.ts

@@ -6,7 +6,7 @@ import { InputProps } from "../input";
 import { ModalProps } from "../modal";
 import { ModalFooterProps, ModalHeaderProps } from "../modal/shared";
 import { PopoverProps } from "../popover";
-import { UseSelectWithApplyProps } from "./hook-94ef1330";
+import { UseSelectWithApplyProps } from "./hook-b8d44131";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**

package/shared/createPaddingStyle.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-type PaddingType = number | string | {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
+import { PaddingType } from "./index-464d40a4";
 declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 export { createPaddingStyle };

package/shared/cssm/createPaddingStyle.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-type PaddingType = number | string | {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
+import { PaddingType } from "./index-464d40a4";
 declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 export { createPaddingStyle };

package/shared/cssm/index-464d40a4.d.ts

@@ -0,0 +1,23 @@
+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 BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
+type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType, Country };

package/shared/cssm/maskUtils.d.ts

@@ -1,4 +1,6 @@
+import { RefObject } from 'react';
 import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from '@maskito/core';
+import { Country } from "./index-464d40a4";
 /**
  *  Запрещает каретке становиться за указанные границы
  */
@@ -14,7 +16,7 @@ declare function insertionPhonePreprocessor(mask: Array<string | RegExp>, countr
 /**
  * Препроцессор необходим для сохранения кода страны при автозаполнении
  */
-declare function preserveCountryCodePreprocessor(countryCode: string | undefined, preserveCountryCode: boolean): MaskitoPreprocessor;
+declare function preserveCountryCodePreprocessor(countryRef: RefObject<Country | null>, createMask: (country: Country) => Array<string | RegExp>): MaskitoPreprocessor;
 declare const maskUtils: {
     insertionPhonePreprocessor: typeof insertionPhonePreprocessor;
     prefixPostprocessor: typeof prefixPostprocessor;

package/shared/cssm/maskUtils.js

@@ -64,12 +64,16 @@ function prefixPostprocessor(prefix) {
         }
         : function (state) { return state; };
 }
-var countDigits = function (value) { return value.replace(/\D/g, '').length; };
+var clearMask = function (value) { return value.replace(/\D/g, ''); };
+var countDigits = function (value) { return clearMask(value).length; };
+var getCompletePhoneLength = function (mask) {
+    return mask.filter(function (item) { return "".concat(item) === "".concat(/\d/) || /[0-9]/.test("".concat(item)); }).length;
+};
 /**
  * Препроцессор необходим для правильной вставки/автокомплита телефонного номера
  */
 function insertionPhonePreprocessor(mask, countryCode, clearableCountryCode) {
-    var completePhoneLength = mask.filter(function (item) { return "".concat(item) === "".concat(/\d/) || /[0-9]/.test("".concat(item)); }).length;
+    var completePhoneLength = getCompletePhoneLength(mask);
     var trimCountryPrefix = function (value) {
         if (countryCode === '7') {
             return value.replace(/^(\+?7?\s?8?)\s?/, '');
@@ -106,21 +110,26 @@ function insertionPhonePreprocessor(mask, countryCode, clearableCountryCode) {
 /**
  * Препроцессор необходим для сохранения кода страны при автозаполнении
  */
-function preserveCountryCodePreprocessor(countryCode, preserveCountryCode) {
+function preserveCountryCodePreprocessor(countryRef, createMask) {
     return function (_a) {
-        var elementState = _a.elementState, data = _a.data;
-        if (!preserveCountryCode || fnUtils.fnUtils.isNil(countryCode)) {
-            return { elementState: elementState, data: data };
-        }
+        var elementState = _a.elementState;
         var value = elementState.value, selection = elementState.selection;
-        if (value.length > 0 && !value.startsWith('+')) {
-            var nextValue = countryCode.concat(value);
-            return {
-                elementState: {
-                    value: nextValue,
-                    selection: selection,
-                },
-            };
+        var country = countryRef.current;
+        if (!value.startsWith('+') && fnUtils.isNonNullable(country)) {
+            var countryCode = country.countryCode;
+            var numbersValue = clearMask(value);
+            if (!numbersValue.startsWith(countryCode)) {
+                var nextValue = countryCode.concat(numbersValue);
+                var mask = createMask(country);
+                if (countDigits(nextValue) === getCompletePhoneLength(mask)) {
+                    return {
+                        elementState: {
+                            selection: selection,
+                            value: nextValue,
+                        },
+                    };
+                }
+            }
         }
         return { elementState: elementState };
     };

package/shared/esm/createPaddingStyle.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-type PaddingType = number | string | {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
+import { PaddingType } from "./index-464d40a4";
 declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 export { createPaddingStyle };

package/shared/esm/index-464d40a4.d.ts

@@ -0,0 +1,23 @@
+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 BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
+type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType, Country };

package/shared/esm/maskUtils.d.ts

@@ -1,4 +1,6 @@
+import { RefObject } from 'react';
 import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from '@maskito/core';
+import { Country } from "./index-464d40a4";
 /**
  *  Запрещает каретке становиться за указанные границы
  */
@@ -14,7 +16,7 @@ declare function insertionPhonePreprocessor(mask: Array<string | RegExp>, countr
 /**
  * Препроцессор необходим для сохранения кода страны при автозаполнении
  */
-declare function preserveCountryCodePreprocessor(countryCode: string | undefined, preserveCountryCode: boolean): MaskitoPreprocessor;
+declare function preserveCountryCodePreprocessor(countryRef: RefObject<Country | null>, createMask: (country: Country) => Array<string | RegExp>): MaskitoPreprocessor;
 declare const maskUtils: {
     insertionPhonePreprocessor: typeof insertionPhonePreprocessor;
     prefixPostprocessor: typeof prefixPostprocessor;