@alfalab/core-components-phone-input 7.2.0 → 7.2.2

package/Component.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var textMaskCore = require('text-mask-core');
 var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input');
 var utils_index = require('./utils/index.js');
@@ -11,6 +12,7 @@ var utils_index = require('./utils/index.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
 var mask = [
     '+',
@@ -34,8 +36,6 @@ var countryPrefix = '+7 ';
 var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["clearableCountryCode"]);
     var inputRef = React.useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    React.useImperativeHandle(ref, function () { return inputRef.current; });
     var handleBeforeDisplay = React.useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
         /*
@@ -92,7 +92,7 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs__default.default([ref, inputRef]) })));
 });
 
 exports.PhoneInput = PhoneInput;

package/cssm/Component.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var textMaskCore = require('text-mask-core');
 var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input/cssm');
 var utils_index = require('./utils/index.js');
@@ -11,6 +12,7 @@ var utils_index = require('./utils/index.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
 var mask = [
     '+',
@@ -34,8 +36,6 @@ var countryPrefix = '+7 ';
 var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["clearableCountryCode"]);
     var inputRef = React.useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    React.useImperativeHandle(ref, function () { return inputRef.current; });
     var handleBeforeDisplay = React.useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
         /*
@@ -92,7 +92,7 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs__default.default([ref, inputRef]) })));
 });
 
 exports.PhoneInput = PhoneInput;

package/cssm/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component = require('./Component.js');
 require('tslib');
 require('react');
+require('react-merge-refs');
 require('text-mask-core');
 require('@alfalab/core-components-masked-input/cssm');
 require('./utils/index.js');

package/esm/Component.js

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
-import React, { useRef, useImperativeHandle, useCallback } from 'react';
+import React, { useRef, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { conformToMask } from 'text-mask-core';
 import { MaskedInput } from '@alfalab/core-components-masked-input/esm';
 import { deleteFormatting, setCaretPosition, getInsertedNumber } from './utils/index.js';
@@ -26,8 +27,6 @@ var countryPrefix = '+7 ';
 var PhoneInput = React.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = __rest(_a, ["clearableCountryCode"]);
     var inputRef = useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    useImperativeHandle(ref, function () { return inputRef.current; });
     var handleBeforeDisplay = useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
         /*
@@ -84,7 +83,7 @@ var PhoneInput = React.forwardRef(function (_a, ref) {
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React.createElement(MaskedInput, __assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+    return (React.createElement(MaskedInput, __assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs([ref, inputRef]) })));
 });
 
 export { PhoneInput };

package/esm/index.js

@@ -1,6 +1,7 @@
 export { PhoneInput } from './Component.js';
 import 'tslib';
 import 'react';
+import 'react-merge-refs';
 import 'text-mask-core';
 import '@alfalab/core-components-masked-input/esm';
 import './utils/index.js';

package/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component = require('./Component.js');
 require('tslib');
 require('react');
+require('react-merge-refs');
 require('text-mask-core');
 require('@alfalab/core-components-masked-input');
 require('./utils/index.js');

package/modern/Component.js

@@ -1,4 +1,5 @@
-import React, { useRef, useImperativeHandle, useCallback } from 'react';
+import React, { useRef, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { conformToMask } from 'text-mask-core';
 import { MaskedInput } from '@alfalab/core-components-masked-input/modern';
 import { deleteFormatting, setCaretPosition, getInsertedNumber } from './utils/index.js';
@@ -24,8 +25,6 @@ const mask = [
 const countryPrefix = '+7 ';
 const PhoneInput = React.forwardRef(({ clearableCountryCode = true, ...restProps }, ref) => {
     const inputRef = useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    useImperativeHandle(ref, () => inputRef.current);
     const handleBeforeDisplay = useCallback((conformedValue, config) => {
         const { rawValue, previousConformedValue, currentCaretPosition } = config;
         /*
@@ -82,7 +81,7 @@ const PhoneInput = React.forwardRef(({ clearableCountryCode = true, ...restProps
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React.createElement(MaskedInput, { ...restProps, defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef }));
+    return (React.createElement(MaskedInput, { ...restProps, defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs([ref, inputRef]) }));
 });
 
 export { PhoneInput };

package/modern/index.js

@@ -1,5 +1,6 @@
 export { PhoneInput } from './Component.js';
 import 'react';
+import 'react-merge-refs';
 import 'text-mask-core';
 import '@alfalab/core-components-masked-input/modern';
 import './utils/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-phone-input",
-    "version": "7.2.0",
+    "version": "7.2.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,7 +14,8 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-masked-input": "^6.2.0",
+        "@alfalab/core-components-masked-input": "^6.2.2",
+        "react-merge-refs": "^1.1.0",
         "text-mask-core": "^5.1.2",
         "tslib": "^2.4.0"
     }

package/src/Component.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useImperativeHandle, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { conformToMask, TextMaskConfig } from 'text-mask-core';
 
 import { MaskedInput, MaskedInputProps } from '@alfalab/core-components-masked-input';
@@ -34,9 +35,6 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
     ({ clearableCountryCode = true, ...restProps }, ref) => {
         const inputRef = useRef<HTMLInputElement>(null);
 
-        // Оставляет возможность прокинуть ref извне
-        useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
-
         const handleBeforeDisplay = useCallback(
             (conformedValue: string, config: TextMaskConfig) => {
                 const { rawValue, previousConformedValue, currentCaretPosition } = config;
@@ -123,7 +121,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
                 mask={mask}
                 onBeforeDisplay={handleBeforeDisplay}
                 type='tel'
-                ref={inputRef}
+                ref={mergeRefs([ref, inputRef])}
             />
         );
     },