@alfalab/core-components 48.34.0-beta.0 → 48.35.0

package/international-phone-input/cssm/components/base-international-phone-input/Component.js

@@ -6,7 +6,6 @@ var mergeRefs = require('react-merge-refs');
 var core = require('@maskito/core');
 var react = require('@maskito/react');
 var shared = require('../../../../select/cssm/shared');
-var coreComponentsShared = require('../../../../shared/cssm');
 var utils_index = require('../../utils/index.js');
 var components_countrySelect_Component = require('../country-select/Component.js');
 var styles = require('./index.module.css');
@@ -19,12 +18,12 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCodeFromProps = _b === void 0 ? true : _b, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _c = _a.size, size = _c === void 0 ? 56 : _c, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, customCountriesList = _a.customCountriesList, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen", "customCountriesList"]);
-    var lastCountryRef = React.useRef(null);
     var countriesData = React.useMemo(function () { return utils_index.initCountries(countries, customCountriesList); }, [countries, customCountriesList]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
     var _d = React.useState(defaultOpen), open = _d[0], setOpen = _d[1];
     var _e = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _e[0], setOpenCountry = _e[1];
+    var beforeAutofillValueRef = React.useRef('');
     var _f = React.useState(function () {
         return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
     }), selectedCountry = _f[0], setSelectedCountry = _f[1];
@@ -38,7 +37,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
     var maskOptions = React.useMemo(function () {
-        return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef);
+        return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode, beforeAutofillValueRef);
     }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
@@ -121,12 +120,6 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId, size: size }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
     };
     var inputProps = tslib.__assign({ className: styles__default.default.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles__default.default.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
-    React.useEffect(function () {
-        if (!preserveCountryCode || coreComponentsShared.isNullable(country)) {
-            return;
-        }
-        lastCountryRef.current = country;
-    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 

package/international-phone-input/cssm/typings-30750b73.d.ts

@@ -2,6 +2,7 @@
 /// <reference types="react-transition-group" />
 import React from "react";
 import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttributes, ElementType, FC, CSSProperties, MutableRefObject, ForwardRefExoticComponent, RefAttributes, AriaAttributes, ComponentType, FocusEvent, MouseEvent, SVGProps } from "react";
+import { SwipeableProps, SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
@@ -11,7 +12,6 @@ import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
 import { CSSTransitionProps } from "react-transition-group/CSSTransition";
 import { BasePlacement, VariationPlacement } from "@popperjs/core";
-import { SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { TextSkeletonProps } from "./index-f48ccc7b";
 import { Color } from "./colors-2c123cbc";
 import { Title, TitleProps } from "./index-86dd1e48";
@@ -485,6 +485,11 @@ type BottomSheetProps = {
      * Учитывать высоту виртуальной клавиатуры
      */
     virtualKeyboard?: boolean;
+    /**
+     * Предотвращать скролл во время свайпа
+     * @default false
+     */
+    preventScrollOnSwipe?: SwipeableProps["preventScrollOnSwipe"];
 };
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 declare const CLOSE_OFFSET = 0.2;

package/international-phone-input/cssm/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "../../../input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "../../../select/shared";
@@ -9,7 +9,7 @@ declare function findCountry(countries: Country[][], value: string | 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, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, beforeAutofillValueRef: MutableRefObject<string>): 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/international-phone-input/cssm/utils/index.js

@@ -128,33 +128,57 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         ' '
     ], false), format.split('').map(itemToMask), true);
 }
-function createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef) {
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode, beforeAutofillValueRef) {
     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),
+    var plugins = [
+        coreComponentsShared.maskUtils.caretGuard(function (value, _a) {
+            var from = _a[0], to = _a[1];
+            return [from === to ? prefixLen : 0, value.length];
+        }),
     ];
     if (preserveCountryCode) {
-        var createMask = function (lastCountry) {
-            return createPhoneMaskExpression(lastCountry, clearableCountryCode);
-        };
-        preprocessors.push(coreComponentsShared.maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+        plugins.push(createMaskitoAutofillPlugin(beforeAutofillValueRef));
     }
     return {
         mask: mask,
-        preprocessors: preprocessors,
-        postprocessors: [coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
-        plugins: [
-            coreComponentsShared.maskUtils.caretGuard(function (value, _a) {
-                var from = _a[0], to = _a[1];
-                return [
-                    from === to ? prefixLen : 0,
-                    value.length,
-                ];
-            }),
+        preprocessors: [
+            coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
         ],
+        postprocessors: [coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
+        plugins: plugins,
+    };
+}
+function createMaskitoAutofillPlugin(beforeAutofillValueRef) {
+    return function (element) {
+        var value = element.value;
+        var handleInput = function () {
+            if (element.value.indexOf('+') === -1 && /^\+\d+/.test(value)) {
+                // eslint-disable-next-line no-param-reassign
+                beforeAutofillValueRef.current = value;
+            }
+            value = element.value;
+        };
+        var handleBlur = function () {
+            if (element.matches(':autofill') || element.matches(':-webkit-autofill')) {
+                // '+7 999 999 99 99' -> ['+7']
+                var match = beforeAutofillValueRef.current.match(/^\+\d+/);
+                if (match) {
+                    var p = match[0];
+                    if (!value.startsWith(p)) {
+                        maskitoUpdateElement(element, p + value);
+                    }
+                }
+            }
+        };
+        element.addEventListener('input', handleInput);
+        element.addEventListener('blur', handleBlur);
+        return function () {
+            element.removeEventListener('input', handleInput);
+            element.removeEventListener('blur', handleBlur);
+        };
     };
 }
 function defaultFilterFn(value, option) {
@@ -267,6 +291,17 @@ function getInternationalPhoneInputMobileTestIds(dataTestId) {
 function getInitialValueFromCountry(countryCode) {
     return "+".concat(countryCode);
 }
+/**
+ * @see https://github.com/taiga-family/maskito/issues/804#issuecomment-1862750990
+ */
+function maskitoUpdateElement(element, value) {
+    var initialValue = element.value;
+    // eslint-disable-next-line no-param-reassign
+    element.value = value;
+    if (element.value !== initialValue) {
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+}
 
 exports.clearMask = clearMask;
 exports.createMaskOptions = createMaskOptions;

package/international-phone-input/esm/Component.responsive.js

@@ -11,8 +11,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/esm/shared';
-import '../../shared/esm';
 import './utils/index.js';
+import '../../shared/esm';
 import './consts.js';
 import './data/country-data.js';
 import './components/country-select/Component.js';

package/international-phone-input/esm/components/base-international-phone-input/Component.js

@@ -1,12 +1,12 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
+import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '../../../../select/esm/shared';
-import { isNullable } from '../../../../shared/esm';
 import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData, getInitialValueFromCountry } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
+import '../../../../shared/esm';
 import '../../consts.js';
 import '../../data/country-data.js';
 import 'classnames';
@@ -21,12 +21,12 @@ require('./index.css');
 
 var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCodeFromProps = _b === void 0 ? true : _b, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _c = _a.size, size = _c === void 0 ? 56 : _c, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, customCountriesList = _a.customCountriesList, restProps = __rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen", "customCountriesList"]);
-    var lastCountryRef = useRef(null);
     var countriesData = useMemo(function () { return initCountries(countries, customCountriesList); }, [countries, customCountriesList]);
     var inputRef = useRef(null);
     var inputWrapperRef = useRef(null);
     var _d = useState(defaultOpen), open = _d[0], setOpen = _d[1];
     var _e = useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _e[0], setOpenCountry = _e[1];
+    var beforeAutofillValueRef = useRef('');
     var _f = useState(function () {
         return findCountry(countriesData, value, defaultIso2, countryProp);
     }), selectedCountry = _f[0], setSelectedCountry = _f[1];
@@ -40,7 +40,7 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
     var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
     var maskOptions = useMemo(function () {
-        return createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef);
+        return createMaskOptions(country, clearableCountryCode, preserveCountryCode, beforeAutofillValueRef);
     }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
@@ -123,12 +123,6 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
         return (React.createElement(CountrySelect, __assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId, size: size }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
     };
     var inputProps = __assign({ className: styles.component, ref: mergeRefs([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
-    useEffect(function () {
-        if (!preserveCountryCode || isNullable(country)) {
-            return;
-        }
-        lastCountryRef.current = country;
-    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React.createElement(InputAutocomplete, __assign({ closeOnSelect: true, Option: BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: __assign(__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: __assign(__assign(__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React.createElement(Input, __assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 

package/international-phone-input/esm/components/base-international-phone-input/index.js

@@ -5,8 +5,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../../select/esm/shared';
-import '../../../../shared/esm';
 import '../../utils/index.js';
+import '../../../../shared/esm';
 import '../../consts.js';
 import '../../data/country-data.js';
 import '../country-select/Component.js';

package/international-phone-input/esm/desktop/Component.desktop.js

@@ -8,8 +8,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../../../shared/esm';
 import '../utils/index.js';
+import '../../../shared/esm';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/esm/desktop/index.js

@@ -9,8 +9,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../../../shared/esm';
 import '../utils/index.js';
+import '../../../shared/esm';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/esm/index.js

@@ -12,8 +12,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/esm/shared';
-import '../../shared/esm';
 import './utils/index.js';
+import '../../shared/esm';
 import './consts.js';
 import './components/country-select/Component.js';
 import 'classnames';

package/international-phone-input/esm/mobile/Component.mobile.js

@@ -8,8 +8,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../../../shared/esm';
 import '../utils/index.js';
+import '../../../shared/esm';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/esm/mobile/index.js

@@ -9,8 +9,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../../../shared/esm';
 import '../utils/index.js';
+import '../../../shared/esm';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/esm/typings-30750b73.d.ts

@@ -2,6 +2,7 @@
 /// <reference types="react-transition-group" />
 import React from "react";
 import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttributes, ElementType, FC, CSSProperties, MutableRefObject, ForwardRefExoticComponent, RefAttributes, AriaAttributes, ComponentType, FocusEvent, MouseEvent, SVGProps } from "react";
+import { SwipeableProps, SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
@@ -11,7 +12,6 @@ import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
 import { CSSTransitionProps } from "react-transition-group/CSSTransition";
 import { BasePlacement, VariationPlacement } from "@popperjs/core";
-import { SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { TextSkeletonProps } from "./index-f48ccc7b";
 import { Color } from "./colors-2c123cbc";
 import { Title, TitleProps } from "./index-86dd1e48";
@@ -485,6 +485,11 @@ type BottomSheetProps = {
      * Учитывать высоту виртуальной клавиатуры
      */
     virtualKeyboard?: boolean;
+    /**
+     * Предотвращать скролл во время свайпа
+     * @default false
+     */
+    preventScrollOnSwipe?: SwipeableProps["preventScrollOnSwipe"];
 };
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 declare const CLOSE_OFFSET = 0.2;

package/international-phone-input/esm/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "../../../input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "../../../select/shared";
@@ -9,7 +9,7 @@ declare function findCountry(countries: Country[][], value: string | 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, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, beforeAutofillValueRef: MutableRefObject<string>): 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/international-phone-input/esm/utils/index.js

@@ -126,33 +126,57 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         ' '
     ], false), format.split('').map(itemToMask), true);
 }
-function createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef) {
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode, beforeAutofillValueRef) {
     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 = [
-        maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+    var plugins = [
+        maskUtils.caretGuard(function (value, _a) {
+            var from = _a[0], to = _a[1];
+            return [from === to ? prefixLen : 0, value.length];
+        }),
     ];
     if (preserveCountryCode) {
-        var createMask = function (lastCountry) {
-            return createPhoneMaskExpression(lastCountry, clearableCountryCode);
-        };
-        preprocessors.push(maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+        plugins.push(createMaskitoAutofillPlugin(beforeAutofillValueRef));
     }
     return {
         mask: mask,
-        preprocessors: preprocessors,
-        postprocessors: [maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
-        plugins: [
-            maskUtils.caretGuard(function (value, _a) {
-                var from = _a[0], to = _a[1];
-                return [
-                    from === to ? prefixLen : 0,
-                    value.length,
-                ];
-            }),
+        preprocessors: [
+            maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
         ],
+        postprocessors: [maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
+        plugins: plugins,
+    };
+}
+function createMaskitoAutofillPlugin(beforeAutofillValueRef) {
+    return function (element) {
+        var value = element.value;
+        var handleInput = function () {
+            if (element.value.indexOf('+') === -1 && /^\+\d+/.test(value)) {
+                // eslint-disable-next-line no-param-reassign
+                beforeAutofillValueRef.current = value;
+            }
+            value = element.value;
+        };
+        var handleBlur = function () {
+            if (element.matches(':autofill') || element.matches(':-webkit-autofill')) {
+                // '+7 999 999 99 99' -> ['+7']
+                var match = beforeAutofillValueRef.current.match(/^\+\d+/);
+                if (match) {
+                    var p = match[0];
+                    if (!value.startsWith(p)) {
+                        maskitoUpdateElement(element, p + value);
+                    }
+                }
+            }
+        };
+        element.addEventListener('input', handleInput);
+        element.addEventListener('blur', handleBlur);
+        return function () {
+            element.removeEventListener('input', handleInput);
+            element.removeEventListener('blur', handleBlur);
+        };
     };
 }
 function defaultFilterFn(value, option) {
@@ -265,5 +289,16 @@ function getInternationalPhoneInputMobileTestIds(dataTestId) {
 function getInitialValueFromCountry(countryCode) {
     return "+".concat(countryCode);
 }
+/**
+ * @see https://github.com/taiga-family/maskito/issues/804#issuecomment-1862750990
+ */
+function maskitoUpdateElement(element, value) {
+    var initialValue = element.value;
+    // eslint-disable-next-line no-param-reassign
+    element.value = value;
+    if (element.value !== initialValue) {
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+}
 
 export { clearMask, createMaskOptions, createPhoneMaskExpression, filterPhones, findCountry, getClear, getInitialValueFromCountry, getInternationalPhoneInputDesktopTestIds, getInternationalPhoneInputMobileTestIds, getPhoneData, guessCountry, initCountries };

package/international-phone-input/modern/Component.responsive.js

@@ -10,8 +10,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/modern/shared';
-import '../../shared/modern';
 import './utils/index.js';
+import '../../shared/modern';
 import './consts.js';
 import './data/country-data.js';
 import './components/country-select/Component.js';

package/international-phone-input/modern/components/base-international-phone-input/Component.js

@@ -1,11 +1,11 @@
-import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
+import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '../../../../select/modern/shared';
-import { isNullable } from '../../../../shared/modern';
 import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData, getInitialValueFromCountry } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
+import '../../../../shared/modern';
 import '../../consts.js';
 import '../../data/country-data.js';
 import 'classnames';
@@ -19,12 +19,12 @@ const styles = {"component":"international-phone-input__component_1xhv5","addons
 require('./index.css');
 
 const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearableCountryCodeFromProps = true, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 56, Input, InputAutocomplete, SelectComponent, view, clear: clearProp, open: openProps, defaultOpen, customCountriesList, ...restProps }, ref) => {
-    const lastCountryRef = useRef(null);
     const countriesData = useMemo(() => initCountries(countries, customCountriesList), [countries, customCountriesList]);
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
     const [open, setOpen] = useState(defaultOpen);
     const [openCountry, setOpenCountry] = useState(countrySelectProps?.defaultOpen);
+    const beforeAutofillValueRef = useRef('');
     const [selectedCountry, setSelectedCountry] = useState(() => findCountry(countriesData, value, defaultIso2, countryProp));
     const filteredOptions = filterPhones(value, options, filterFn);
     const country = countryProp ?? selectedCountry;
@@ -35,7 +35,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
     };
     const preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     const clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
-    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef), [country, clearableCountryCode, preserveCountryCode]);
+    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode, beforeAutofillValueRef), [country, clearableCountryCode, preserveCountryCode]);
     const maskRef = useMaskito({ options: maskOptions });
     const changeNumber = (phone) => {
         onChange?.(phone);
@@ -115,12 +115,6 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
         clear: getClear(clearProp, clearableCountryCode, value, country?.countryCode),
         ...restProps.inputProps,
     };
-    useEffect(() => {
-        if (!preserveCountryCode || isNullable(country)) {
-            return;
-        }
-        lastCountryRef.current = country;
-    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
             ...inputProps,
             onClear: handleClear,

package/international-phone-input/modern/components/base-international-phone-input/index.js

@@ -4,8 +4,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../../select/modern/shared';
-import '../../../../shared/modern';
 import '../../utils/index.js';
+import '../../../../shared/modern';
 import '../../consts.js';
 import '../../data/country-data.js';
 import '../country-select/Component.js';

package/international-phone-input/modern/desktop/Component.desktop.js

@@ -7,8 +7,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/modern/shared';
-import '../../../shared/modern';
 import '../utils/index.js';
+import '../../../shared/modern';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/modern/desktop/index.js

@@ -8,8 +8,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/modern/shared';
-import '../../../shared/modern';
 import '../utils/index.js';
+import '../../../shared/modern';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/modern/index.js

@@ -11,8 +11,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/modern/shared';
-import '../../shared/modern';
 import './utils/index.js';
+import '../../shared/modern';
 import './consts.js';
 import './components/country-select/Component.js';
 import 'classnames';

package/international-phone-input/modern/mobile/Component.mobile.js

@@ -7,8 +7,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/modern/shared';
-import '../../../shared/modern';
 import '../utils/index.js';
+import '../../../shared/modern';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/modern/mobile/index.js

@@ -8,8 +8,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/modern/shared';
-import '../../../shared/modern';
 import '../utils/index.js';
+import '../../../shared/modern';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/modern/typings-30750b73.d.ts

@@ -2,6 +2,7 @@
 /// <reference types="react-transition-group" />
 import React from "react";
 import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttributes, ElementType, FC, CSSProperties, MutableRefObject, ForwardRefExoticComponent, RefAttributes, AriaAttributes, ComponentType, FocusEvent, MouseEvent, SVGProps } from "react";
+import { SwipeableProps, SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
@@ -11,7 +12,6 @@ import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
 import { CSSTransitionProps } from "react-transition-group/CSSTransition";
 import { BasePlacement, VariationPlacement } from "@popperjs/core";
-import { SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { TextSkeletonProps } from "./index-f48ccc7b";
 import { Color } from "./colors-2c123cbc";
 import { Title, TitleProps } from "./index-86dd1e48";
@@ -485,6 +485,11 @@ type BottomSheetProps = {
      * Учитывать высоту виртуальной клавиатуры
      */
     virtualKeyboard?: boolean;
+    /**
+     * Предотвращать скролл во время свайпа
+     * @default false
+     */
+    preventScrollOnSwipe?: SwipeableProps["preventScrollOnSwipe"];
 };
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 declare const CLOSE_OFFSET = 0.2;

package/international-phone-input/modern/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "../../../input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "../../../select/shared";
@@ -9,7 +9,7 @@ declare function findCountry(countries: Country[][], value: string | 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, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, beforeAutofillValueRef: MutableRefObject<string>): 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): {