@cloud-ru/uikit-product-fields-predefined 0.15.3 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/README.md +1 -0
- package/dist/cjs/components/FieldAi/FieldAi.d.ts +4 -0
- package/dist/cjs/components/FieldAi/FieldAi.js +6 -2
- package/dist/cjs/components/FieldAi/components/AlertButton/AlertButton.d.ts +5 -0
- package/dist/cjs/components/FieldAi/components/AlertButton/AlertButton.js +12 -0
- package/dist/cjs/components/FieldAi/components/AlertButton/index.d.ts +1 -0
- package/dist/cjs/components/FieldAi/components/AlertButton/index.js +17 -0
- package/dist/cjs/components/FieldAi/components/AlertButton/styles.module.css +17 -0
- package/dist/cjs/components/FieldAi/styles.module.css +29 -2
- package/dist/cjs/components/FieldPhone/FieldPhone.d.ts +1 -1
- package/dist/cjs/components/FieldPhone/FieldPhone.js +31 -0
- package/dist/cjs/components/FieldPhone/__tests__/constants.d.ts +29 -0
- package/dist/cjs/components/FieldPhone/__tests__/constants.js +175 -1
- package/dist/cjs/components/FieldPhone/__tests__/handleAutoInsert.spec.d.ts +1 -0
- package/dist/cjs/components/FieldPhone/__tests__/handleAutoInsert.spec.js +63 -0
- package/dist/cjs/components/FieldPhone/utils.d.ts +7 -0
- package/dist/cjs/components/FieldPhone/utils.js +30 -1
- package/dist/esm/components/FieldAi/FieldAi.d.ts +4 -0
- package/dist/esm/components/FieldAi/FieldAi.js +8 -4
- package/dist/esm/components/FieldAi/components/AlertButton/AlertButton.d.ts +5 -0
- package/dist/esm/components/FieldAi/components/AlertButton/AlertButton.js +6 -0
- package/dist/esm/components/FieldAi/components/AlertButton/index.d.ts +1 -0
- package/dist/esm/components/FieldAi/components/AlertButton/index.js +1 -0
- package/dist/esm/components/FieldAi/components/AlertButton/styles.module.css +17 -0
- package/dist/esm/components/FieldAi/styles.module.css +29 -2
- package/dist/esm/components/FieldPhone/FieldPhone.d.ts +1 -1
- package/dist/esm/components/FieldPhone/FieldPhone.js +32 -1
- package/dist/esm/components/FieldPhone/__tests__/constants.d.ts +29 -0
- package/dist/esm/components/FieldPhone/__tests__/constants.js +174 -0
- package/dist/esm/components/FieldPhone/__tests__/handleAutoInsert.spec.d.ts +1 -0
- package/dist/esm/components/FieldPhone/__tests__/handleAutoInsert.spec.js +61 -0
- package/dist/esm/components/FieldPhone/utils.d.ts +7 -0
- package/dist/esm/components/FieldPhone/utils.js +28 -0
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/FieldAi/FieldAi.tsx +28 -3
- package/src/components/FieldAi/components/AlertButton/AlertButton.tsx +16 -0
- package/src/components/FieldAi/components/AlertButton/index.ts +1 -0
- package/src/components/FieldAi/components/AlertButton/styles.module.scss +20 -0
- package/src/components/FieldAi/styles.module.scss +46 -7
- package/src/components/FieldPhone/FieldPhone.tsx +35 -1
- package/src/components/FieldPhone/__tests__/constants.ts +175 -0
- package/src/components/FieldPhone/__tests__/handleAutoInsert.spec.ts +87 -0
- package/src/components/FieldPhone/utils.ts +41 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 0.17.0 (2026-01-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **GIGAID-673:** fieldPhone browser paste ([0f3ed76](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/0f3ed76746a5499db194edc06c97f7987461262d))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# 0.16.0 (2026-01-20)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **AINFR-4337:** alert for secure password field ([b44c4dc](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/b44c4dc95160f4758070c33380581a1103c530a5))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## 0.15.3 (2025-12-24)
|
|
7
29
|
|
|
8
30
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -106,6 +106,7 @@
|
|
|
106
106
|
| resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
|
|
107
107
|
| secure | `boolean \| "password"` | - | Режим ввода sensitive данных (пароля, API ключей, токенов, etc) |
|
|
108
108
|
| onResetContextClick | `() => void` | - | Действие при клике по кнопке сброса контекста |
|
|
109
|
+
| onCancelSecure | `() => void` | - | Действие для отмены секьюрности поля |
|
|
109
110
|
| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
|
|
110
111
|
| key | `Key` | - | |
|
|
111
112
|
## FieldChat
|
|
@@ -7,6 +7,8 @@ export type FieldAiProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder'
|
|
|
7
7
|
onSubmit(value: string): void;
|
|
8
8
|
/** Действие при клике по кнопке сброса контекста */
|
|
9
9
|
onResetContextClick?(): void;
|
|
10
|
+
/** Действие для отмены секьюрности поля */
|
|
11
|
+
onCancelSecure?(): void;
|
|
10
12
|
}>;
|
|
11
13
|
export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
|
|
12
14
|
/** Режим ввода sensitive данных (пароля, API ключей, токенов, etc) */
|
|
@@ -15,6 +17,8 @@ export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<Fie
|
|
|
15
17
|
onSubmit(value: string): void;
|
|
16
18
|
/** Действие при клике по кнопке сброса контекста */
|
|
17
19
|
onResetContextClick?(): void;
|
|
20
|
+
/** Действие для отмены секьюрности поля */
|
|
21
|
+
onCancelSecure?(): void;
|
|
18
22
|
} & {
|
|
19
23
|
layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
|
|
20
24
|
} & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -22,17 +22,20 @@ const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
|
|
|
22
22
|
const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
|
|
23
23
|
const uikit_product_mobile_fields_1 = require("@cloud-ru/uikit-product-mobile-fields");
|
|
24
24
|
const button_1 = require("@snack-uikit/button");
|
|
25
|
+
const figma_tokens_1 = require("@snack-uikit/figma-tokens");
|
|
25
26
|
const tooltip_1 = require("@snack-uikit/tooltip");
|
|
27
|
+
const typography_1 = require("@snack-uikit/typography");
|
|
26
28
|
const FieldSubmitButton_1 = require("../../helperComponents/FieldSubmitButton");
|
|
27
29
|
const TextAreaActionsFooter_1 = require("../../helperComponents/TextAreaActionsFooter");
|
|
28
30
|
const helpers_1 = require("../../helpers");
|
|
29
31
|
const AIDisclaimer_1 = require("../AIDisclaimer/AIDisclaimer");
|
|
32
|
+
const AlertButton_1 = require("./components/AlertButton");
|
|
30
33
|
const MobileFieldAi_1 = require("./components/MobileFieldAi");
|
|
31
34
|
const WithPasswordValidation_1 = require("./components/WithPasswordValidation");
|
|
32
35
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
33
36
|
const utils_1 = require("./utils");
|
|
34
37
|
exports.FieldAi = (0, react_1.forwardRef)((_a, ref) => {
|
|
35
|
-
var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "disabled", "className"]);
|
|
38
|
+
var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, onCancelSecure, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "onCancelSecure", "disabled", "className"]);
|
|
36
39
|
const { layoutType, validationState } = props;
|
|
37
40
|
const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
|
|
38
41
|
const isTouchDevice = (0, helpers_1.isTouchDevice)(layoutType);
|
|
@@ -44,6 +47,7 @@ exports.FieldAi = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
44
47
|
const passwordValidation = (0, react_1.useMemo)(() => (0, utils_1.getValidationPassword)(value), [value]);
|
|
45
48
|
const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
|
|
46
49
|
const showPasswordError = !isPasswordValid && secure && value;
|
|
50
|
+
const showPasswordAlert = Boolean(onCancelSecure) && secure === 'password';
|
|
47
51
|
(0, react_1.useEffect)(() => () => {
|
|
48
52
|
if (timerRef.current) {
|
|
49
53
|
clearTimeout(timerRef.current);
|
|
@@ -84,5 +88,5 @@ exports.FieldAi = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
84
88
|
if (isTouchDevice && !secure) {
|
|
85
89
|
return ((0, jsx_runtime_1.jsx)(MobileFieldAi_1.MobileFieldAi, Object.assign({}, props, (0, uikit_product_mobile_fields_1.getAdaptiveFieldProps)(props), { onSubmit: handleSubmit, submitEnabled: isValueValid && !disabled, ref: ref, value: value })));
|
|
86
90
|
}
|
|
87
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), children: [(0, jsx_runtime_1.jsx)(WithPasswordValidation_1.WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: (0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: (0, classnames_1.default)(styles_module_scss_1.default.textarea, secure && isValueHidden ? styles_module_scss_1.default.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { left: secure && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'xs', icon: isValueHidden ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [secure && onResetContextClick && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { showTooltip: !isTouchDevice, className: (0, classnames_1.default)(styles_module_scss_1.default.submitButton, isTouchDevice ? styles_module_scss_1.default.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && (0, jsx_runtime_1.jsx)(AIDisclaimer_1.AIDisclaimer, { layoutType: layoutType })] }));
|
|
91
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, isPasswordMode && styles_module_scss_1.default.passwordWrapper, className), children: [showPasswordAlert && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.alert, children: [(0, jsx_runtime_1.jsx)(uikit_product_icons_1.PasswordLockSVG, { size: 16, color: figma_tokens_1.themeVars.sys.neutral.textSupport }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.alertText, children: t('FieldAi.secret.alert.text') }), (0, jsx_runtime_1.jsx)(AlertButton_1.AlertButton, { label: t('FieldAi.secret.alert.button'), onClick: onCancelSecure })] })), (0, jsx_runtime_1.jsx)(WithPasswordValidation_1.WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: (0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: (0, classnames_1.default)(styles_module_scss_1.default.textarea, secure && isValueHidden ? styles_module_scss_1.default.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { left: secure && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'xs', icon: isValueHidden ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [secure && onResetContextClick && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { showTooltip: !isTouchDevice, className: (0, classnames_1.default)(styles_module_scss_1.default.submitButton, isTouchDevice ? styles_module_scss_1.default.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && (0, jsx_runtime_1.jsx)(AIDisclaimer_1.AIDisclaimer, { layoutType: layoutType })] }));
|
|
88
92
|
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.AlertButton = AlertButton;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const typography_1 = require("@snack-uikit/typography");
|
|
9
|
+
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
10
|
+
function AlertButton({ label, onClick }) {
|
|
11
|
+
return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: styles_module_scss_1.default.button, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { className: styles_module_scss_1.default.label, children: label }) }));
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './AlertButton';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./AlertButton"), exports);
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.button{
|
|
2
|
+
outline:none;
|
|
3
|
+
border:none;
|
|
4
|
+
background-color:transparent;
|
|
5
|
+
cursor:pointer;
|
|
6
|
+
height:16px;
|
|
7
|
+
display:flex;
|
|
8
|
+
align-items:center;
|
|
9
|
+
justify-content:center;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.label{
|
|
13
|
+
color:var(--sys-blue-text-support, #4877b0);
|
|
14
|
+
}
|
|
15
|
+
.label:hover{
|
|
16
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
17
|
+
}
|
|
@@ -2,6 +2,33 @@
|
|
|
2
2
|
display:flex;
|
|
3
3
|
flex-direction:column;
|
|
4
4
|
gap:var(--dimension-050m, 4px);
|
|
5
|
+
position:relative;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.passwordWrapper{
|
|
9
|
+
gap:0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.alert{
|
|
13
|
+
display:flex;
|
|
14
|
+
gap:8px;
|
|
15
|
+
padding:4px 8px;
|
|
16
|
+
border-radius:8px 8px 0 0;
|
|
17
|
+
border:1px solid var(--sys-blue-decor-activated, #aac4ea);
|
|
18
|
+
background-color:var(--sys-blue-decor-default, #d6e2f4);
|
|
19
|
+
box-sizing:border-box;
|
|
20
|
+
height:38px;
|
|
21
|
+
position:absolute;
|
|
22
|
+
left:0;
|
|
23
|
+
top:-26px;
|
|
24
|
+
width:100%;
|
|
25
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.alertText{
|
|
29
|
+
flex:1;
|
|
30
|
+
min-width:0;
|
|
31
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
5
32
|
}
|
|
6
33
|
|
|
7
34
|
.secured textarea{
|
|
@@ -25,10 +52,10 @@
|
|
|
25
52
|
}
|
|
26
53
|
|
|
27
54
|
.submitButton:not([data-disabled]){
|
|
28
|
-
background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #
|
|
55
|
+
background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
|
|
29
56
|
}
|
|
30
57
|
|
|
31
58
|
.textarea > :first-child[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]){
|
|
32
59
|
border-color:transparent;
|
|
33
|
-
background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #
|
|
60
|
+
background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 8%, #78b9ec 17%, #70c6dd 28%, #64d8c7 38%, #5fd7c2 44%, #54d5b3 51%, #40d39c 58%, #26d07c 66%) border-box;
|
|
34
61
|
}
|
|
@@ -11,7 +11,7 @@ export type FieldPhoneProps = WithLayoutType<Omit<FieldTextProps, 'prefix' | 'pr
|
|
|
11
11
|
/** options — объект конфигурации для изменения стандартного списка стран */
|
|
12
12
|
options?: CountrySettings;
|
|
13
13
|
}>;
|
|
14
|
-
export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength"
|
|
14
|
+
export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "button" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength"> & {
|
|
15
15
|
/** Включить скролл для основной части списка стран */
|
|
16
16
|
scrollList?: boolean;
|
|
17
17
|
onChange?(value: string): void;
|
|
@@ -33,6 +33,8 @@ exports.FieldPhone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
33
33
|
const localRef = (0, react_1.useRef)(null);
|
|
34
34
|
const options = (0, hooks_1.useCountries)(optionsProp);
|
|
35
35
|
const isOnlyOneCountryAvailable = options.length === 1;
|
|
36
|
+
const rawInsertRef = (0, react_1.useRef)('');
|
|
37
|
+
const insertSwitchRef = (0, react_1.useRef)(false);
|
|
36
38
|
const [country, setCountry] = (0, utils_1.useValueControl)({
|
|
37
39
|
defaultValue: options[0],
|
|
38
40
|
onChange: onChangeCountry,
|
|
@@ -51,7 +53,19 @@ exports.FieldPhone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
51
53
|
definitions: {
|
|
52
54
|
X: /[0-9]/,
|
|
53
55
|
},
|
|
56
|
+
prepare: (str) => {
|
|
57
|
+
if (str.replace(/\D/g, '').length > 1) {
|
|
58
|
+
rawInsertRef.current = str;
|
|
59
|
+
}
|
|
60
|
+
return str;
|
|
61
|
+
},
|
|
54
62
|
}), [country === null || country === void 0 ? void 0 : country.mask]);
|
|
63
|
+
const clearRaw = () => {
|
|
64
|
+
rawInsertRef.current = '';
|
|
65
|
+
};
|
|
66
|
+
const markSwitchRef = () => {
|
|
67
|
+
insertSwitchRef.current = true;
|
|
68
|
+
};
|
|
55
69
|
const { ref: iMaskRef, value: iMaskValue, setValue, unmaskedValue, } = (0, react_imask_1.useIMask)(maskOptions, {
|
|
56
70
|
onAccept: (_, maskRef) => {
|
|
57
71
|
const unmasked = maskRef.unmaskedValue;
|
|
@@ -60,6 +74,23 @@ exports.FieldPhone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
60
74
|
if (value !== valueProp) {
|
|
61
75
|
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
|
|
62
76
|
}
|
|
77
|
+
if (insertSwitchRef.current) {
|
|
78
|
+
insertSwitchRef.current = false;
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
(0, utils_2.handleAutoInsert)({
|
|
82
|
+
raw: rawInsertRef.current,
|
|
83
|
+
onValueChange: value => {
|
|
84
|
+
setTimeout(() => setValue(value), 0);
|
|
85
|
+
},
|
|
86
|
+
onCountryChange: country => {
|
|
87
|
+
markSwitchRef();
|
|
88
|
+
clearRaw();
|
|
89
|
+
setCountry(country);
|
|
90
|
+
},
|
|
91
|
+
country,
|
|
92
|
+
options,
|
|
93
|
+
});
|
|
63
94
|
},
|
|
64
95
|
});
|
|
65
96
|
(0, react_1.useEffect)(() => {
|
|
@@ -3,3 +3,32 @@ export declare const phoneFormatCases: {
|
|
|
3
3
|
input: string;
|
|
4
4
|
expected: string;
|
|
5
5
|
}[];
|
|
6
|
+
export declare const handleAutoInsertCases: ({
|
|
7
|
+
name: string;
|
|
8
|
+
raw: string;
|
|
9
|
+
currentId: string;
|
|
10
|
+
expectedCountryId: string;
|
|
11
|
+
expectedValue: string;
|
|
12
|
+
expectedLengthFromCountryId?: undefined;
|
|
13
|
+
} | {
|
|
14
|
+
name: string;
|
|
15
|
+
raw: string;
|
|
16
|
+
currentId: string;
|
|
17
|
+
expectedValue: string;
|
|
18
|
+
expectedCountryId?: undefined;
|
|
19
|
+
expectedLengthFromCountryId?: undefined;
|
|
20
|
+
} | {
|
|
21
|
+
name: string;
|
|
22
|
+
raw: string;
|
|
23
|
+
currentId: string;
|
|
24
|
+
expectedCountryId?: undefined;
|
|
25
|
+
expectedValue?: undefined;
|
|
26
|
+
expectedLengthFromCountryId?: undefined;
|
|
27
|
+
} | {
|
|
28
|
+
name: string;
|
|
29
|
+
raw: string;
|
|
30
|
+
currentId: string;
|
|
31
|
+
expectedCountryId: string;
|
|
32
|
+
expectedLengthFromCountryId: string;
|
|
33
|
+
expectedValue?: undefined;
|
|
34
|
+
})[];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.phoneFormatCases = void 0;
|
|
3
|
+
exports.handleAutoInsertCases = exports.phoneFormatCases = void 0;
|
|
4
4
|
exports.phoneFormatCases = [
|
|
5
5
|
{ country: 'Russia', input: '+79878887879', expected: '+7 987 888-78-79' },
|
|
6
6
|
{ country: 'Russia', input: '+7987****875', expected: '+7 987 ***-*8-75' },
|
|
@@ -27,3 +27,177 @@ exports.phoneFormatCases = [
|
|
|
27
27
|
{ country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
|
|
28
28
|
{ country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
|
|
29
29
|
];
|
|
30
|
+
exports.handleAutoInsertCases = [
|
|
31
|
+
{
|
|
32
|
+
name: 'Kyrgyzstan switches + exact national',
|
|
33
|
+
raw: '+996 201 666666',
|
|
34
|
+
currentId: 'russia',
|
|
35
|
+
expectedCountryId: 'kyrgyzstan',
|
|
36
|
+
expectedValue: '201666666',
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: 'Kyrgyzstan same => exact national',
|
|
40
|
+
raw: '+996201666666',
|
|
41
|
+
currentId: 'kyrgyzstan',
|
|
42
|
+
expectedValue: '201666666',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: 'Russia incomplete => no calls',
|
|
46
|
+
raw: '+7 987',
|
|
47
|
+
currentId: 'russia',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: 'Albania (+355) XXX XXX-XXX',
|
|
51
|
+
raw: '+355 675 123 456',
|
|
52
|
+
currentId: 'russia',
|
|
53
|
+
expectedCountryId: 'albania',
|
|
54
|
+
expectedLengthFromCountryId: 'albania',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: 'Algeria (+213) XX XXX-XXXX',
|
|
58
|
+
raw: '+213 12 345 6789',
|
|
59
|
+
currentId: 'russia',
|
|
60
|
+
expectedCountryId: 'algeria',
|
|
61
|
+
expectedLengthFromCountryId: 'algeria',
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: 'Armenia (+374) XX XXX-XXX',
|
|
65
|
+
raw: '+374 10 123 456',
|
|
66
|
+
currentId: 'russia',
|
|
67
|
+
expectedCountryId: 'armenia',
|
|
68
|
+
expectedLengthFromCountryId: 'armenia',
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
name: 'Austria (+43) XXX XXX-XXXX',
|
|
72
|
+
raw: '+43 664 123 4567',
|
|
73
|
+
currentId: 'russia',
|
|
74
|
+
expectedCountryId: 'austria',
|
|
75
|
+
expectedLengthFromCountryId: 'austria',
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
name: 'Australia (+61) X XXXX-XXXX',
|
|
79
|
+
raw: '+61 4 1234 5678',
|
|
80
|
+
currentId: 'russia',
|
|
81
|
+
expectedCountryId: 'australia',
|
|
82
|
+
expectedLengthFromCountryId: 'australia',
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
name: 'Belarus (+375) XX XXX-XX-XX',
|
|
86
|
+
raw: '+375 29 123 45 67',
|
|
87
|
+
currentId: 'russia',
|
|
88
|
+
expectedCountryId: 'belarus',
|
|
89
|
+
expectedLengthFromCountryId: 'belarus',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
name: 'Bangladesh (+880) X XXX-XXXX',
|
|
93
|
+
raw: '+880 1 234 5678',
|
|
94
|
+
currentId: 'russia',
|
|
95
|
+
expectedCountryId: 'bangladesh',
|
|
96
|
+
expectedLengthFromCountryId: 'bangladesh',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: 'Bahrain (+973) XX XXX-XXX',
|
|
100
|
+
raw: '+973 33 123 456',
|
|
101
|
+
currentId: 'russia',
|
|
102
|
+
expectedCountryId: 'bahrain',
|
|
103
|
+
expectedLengthFromCountryId: 'bahrain',
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
name: 'Cyprus (+357) XX XXXXXX',
|
|
107
|
+
raw: '+357 99 123456',
|
|
108
|
+
currentId: 'russia',
|
|
109
|
+
expectedCountryId: 'cyprus',
|
|
110
|
+
expectedLengthFromCountryId: 'cyprus',
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
name: 'Georgia (+995) XXX XX-XX-XX',
|
|
114
|
+
raw: '+995 555 12 34 56',
|
|
115
|
+
currentId: 'russia',
|
|
116
|
+
expectedCountryId: 'georgia',
|
|
117
|
+
expectedLengthFromCountryId: 'georgia',
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
name: 'India (+91) XXXXX-XXXXX',
|
|
121
|
+
raw: '+91 98765 43210',
|
|
122
|
+
currentId: 'russia',
|
|
123
|
+
expectedCountryId: 'india',
|
|
124
|
+
expectedLengthFromCountryId: 'india',
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: 'Iran (+98) XXX XXX-XXXX',
|
|
128
|
+
raw: '+98 912 345 6789',
|
|
129
|
+
currentId: 'russia',
|
|
130
|
+
expectedCountryId: 'iran',
|
|
131
|
+
expectedLengthFromCountryId: 'iran',
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
name: 'Netherlands (+31) XX XXX-XXXX',
|
|
135
|
+
raw: '+31 20 123 4567',
|
|
136
|
+
currentId: 'russia',
|
|
137
|
+
expectedCountryId: 'netherlands',
|
|
138
|
+
expectedLengthFromCountryId: 'netherlands',
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
name: 'Romania (+40) XX XXX-XXXX',
|
|
142
|
+
raw: '+40 21 123 4567',
|
|
143
|
+
currentId: 'russia',
|
|
144
|
+
expectedCountryId: 'romania',
|
|
145
|
+
expectedLengthFromCountryId: 'romania',
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
name: 'Serbia (+381) XX XXX-XXXX',
|
|
149
|
+
raw: '+381 11 123 4567',
|
|
150
|
+
currentId: 'russia',
|
|
151
|
+
expectedCountryId: 'serbia',
|
|
152
|
+
expectedLengthFromCountryId: 'serbia',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
name: 'Uzbekistan (+998) XX XXX-XX-XX',
|
|
156
|
+
raw: '+998 90 123 45 67',
|
|
157
|
+
currentId: 'russia',
|
|
158
|
+
expectedCountryId: 'uzbekistan',
|
|
159
|
+
expectedLengthFromCountryId: 'uzbekistan',
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
name: 'Tajikistan (+992) XX XXX-XXXX',
|
|
163
|
+
raw: '+992 93 123 4567',
|
|
164
|
+
currentId: 'russia',
|
|
165
|
+
expectedCountryId: 'tajikistan',
|
|
166
|
+
expectedLengthFromCountryId: 'tajikistan',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Moldova (+373) XXXX XXXX',
|
|
170
|
+
raw: '+373 1234 5678',
|
|
171
|
+
currentId: 'russia',
|
|
172
|
+
expectedCountryId: 'moldova',
|
|
173
|
+
expectedLengthFromCountryId: 'moldova',
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
name: 'Netherlands (+31) switches from Moldova',
|
|
177
|
+
raw: '+31 20 123 4567',
|
|
178
|
+
currentId: 'moldova',
|
|
179
|
+
expectedCountryId: 'netherlands',
|
|
180
|
+
expectedLengthFromCountryId: 'netherlands',
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
name: 'Uzbekistan (+998) switches from Tajikistan',
|
|
184
|
+
raw: '+998 90 123 45 67',
|
|
185
|
+
currentId: 'tajikistan',
|
|
186
|
+
expectedCountryId: 'uzbekistan',
|
|
187
|
+
expectedLengthFromCountryId: 'uzbekistan',
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
name: 'Tajikistan (+992) switches from Albania',
|
|
191
|
+
raw: '+992 93 123 4567',
|
|
192
|
+
currentId: 'albania',
|
|
193
|
+
expectedCountryId: 'tajikistan',
|
|
194
|
+
expectedLengthFromCountryId: 'tajikistan',
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
name: 'Moldova (+373) switches from Egypt',
|
|
198
|
+
raw: '+373 1234 5678',
|
|
199
|
+
currentId: 'egypt',
|
|
200
|
+
expectedCountryId: 'moldova',
|
|
201
|
+
expectedLengthFromCountryId: 'moldova',
|
|
202
|
+
},
|
|
203
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const vitest_1 = require("vitest");
|
|
4
|
+
const countries_1 = require("../countries");
|
|
5
|
+
const utils_1 = require("../utils");
|
|
6
|
+
const constants_1 = require("./constants");
|
|
7
|
+
const OPTIONS = countries_1.ALL_COUNTRY_CODES.map(c => ({
|
|
8
|
+
id: c.value,
|
|
9
|
+
iso2: c.iso2,
|
|
10
|
+
mask: c.mask,
|
|
11
|
+
content: {
|
|
12
|
+
caption: c.caption,
|
|
13
|
+
option: c.value,
|
|
14
|
+
},
|
|
15
|
+
beforeContent: null,
|
|
16
|
+
}));
|
|
17
|
+
const byId = (id) => {
|
|
18
|
+
const found = OPTIONS.find(c => c.id === id);
|
|
19
|
+
if (!found)
|
|
20
|
+
throw new Error(`Country not found in OPTIONS: ${id}`);
|
|
21
|
+
return found;
|
|
22
|
+
};
|
|
23
|
+
const casesNoCalls = constants_1.handleAutoInsertCases.filter((c) => !('expectedValue' in c) && !('expectedLengthFromCountryId' in c));
|
|
24
|
+
const casesExact = constants_1.handleAutoInsertCases.filter((c) => 'expectedValue' in c);
|
|
25
|
+
(0, vitest_1.describe)('handleAutoInsert — no calls', () => {
|
|
26
|
+
casesNoCalls.forEach(tc => {
|
|
27
|
+
(0, vitest_1.it)(`${tc.name}`, () => {
|
|
28
|
+
const onValueChange = vitest_1.vi.fn();
|
|
29
|
+
const onCountryChange = vitest_1.vi.fn();
|
|
30
|
+
(0, utils_1.handleAutoInsert)({
|
|
31
|
+
raw: tc.raw,
|
|
32
|
+
onValueChange,
|
|
33
|
+
onCountryChange,
|
|
34
|
+
country: byId(tc.currentId),
|
|
35
|
+
options: OPTIONS,
|
|
36
|
+
});
|
|
37
|
+
(0, vitest_1.expect)(onCountryChange).not.toHaveBeenCalled();
|
|
38
|
+
(0, vitest_1.expect)(onValueChange).not.toHaveBeenCalled();
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
(0, vitest_1.describe)('handleAutoInsert — exact value', () => {
|
|
43
|
+
casesExact.forEach(tc => {
|
|
44
|
+
(0, vitest_1.it)(`${tc.name}`, () => {
|
|
45
|
+
var _a, _b;
|
|
46
|
+
const onValueChange = vitest_1.vi.fn();
|
|
47
|
+
const onCountryChange = vitest_1.vi.fn();
|
|
48
|
+
(0, utils_1.handleAutoInsert)({
|
|
49
|
+
raw: tc.raw,
|
|
50
|
+
onValueChange,
|
|
51
|
+
onCountryChange,
|
|
52
|
+
country: byId(tc.currentId),
|
|
53
|
+
options: OPTIONS,
|
|
54
|
+
});
|
|
55
|
+
(0, vitest_1.expect)(onValueChange).toHaveBeenCalledTimes(1);
|
|
56
|
+
(0, vitest_1.expect)(onValueChange).toHaveBeenCalledWith(tc.expectedValue);
|
|
57
|
+
const expectedCountryCalls = tc.expectedCountryId ? 1 : 0;
|
|
58
|
+
(0, vitest_1.expect)(onCountryChange).toHaveBeenCalledTimes(expectedCountryCalls);
|
|
59
|
+
const actualCountryId = (_b = (_a = onCountryChange.mock.calls[0]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id;
|
|
60
|
+
(0, vitest_1.expect)(actualCountryId).toBe(tc.expectedCountryId);
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
});
|
|
@@ -5,3 +5,10 @@ export declare const formatPhoneNumber: <T extends {
|
|
|
5
5
|
mask: string;
|
|
6
6
|
}>(phone: string, countries: readonly T[]) => string;
|
|
7
7
|
export declare function detectCountryByPhone(text: string, options: FieldPhoneOptionsProps[]): FieldPhoneOptionsProps | undefined;
|
|
8
|
+
export declare const handleAutoInsert: ({ raw, onValueChange, onCountryChange, country, options, }: {
|
|
9
|
+
raw: string;
|
|
10
|
+
onValueChange: (str: string) => void;
|
|
11
|
+
onCountryChange: (country: FieldPhoneOptionsProps) => void;
|
|
12
|
+
country?: FieldPhoneOptionsProps;
|
|
13
|
+
options: FieldPhoneOptionsProps[];
|
|
14
|
+
}) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.formatPhoneNumber = exports.uniqueSet = void 0;
|
|
3
|
+
exports.handleAutoInsert = exports.formatPhoneNumber = exports.uniqueSet = void 0;
|
|
4
4
|
exports.detectCountryByPhone = detectCountryByPhone;
|
|
5
5
|
const awesome_phonenumber_1 = require("awesome-phonenumber");
|
|
6
6
|
const countries_1 = require("./countries");
|
|
@@ -55,3 +55,32 @@ function detectCountryByPhone(text, options) {
|
|
|
55
55
|
}
|
|
56
56
|
return options.find(opt => opt.iso2 === regionCode);
|
|
57
57
|
}
|
|
58
|
+
const handleAutoInsert = ({ raw, onValueChange, onCountryChange, country, options, }) => {
|
|
59
|
+
var _a, _b, _c, _d, _e, _f;
|
|
60
|
+
if (!raw)
|
|
61
|
+
return;
|
|
62
|
+
const parsed = (0, awesome_phonenumber_1.parsePhoneNumber)(raw);
|
|
63
|
+
const ok = parsed.valid || parsed.possible;
|
|
64
|
+
if (!ok)
|
|
65
|
+
return;
|
|
66
|
+
const detected = detectCountryByPhone(raw, options);
|
|
67
|
+
if (!detected)
|
|
68
|
+
return;
|
|
69
|
+
let national = (_a = parsed.number) === null || _a === void 0 ? void 0 : _a.significant.replace(/\D/g, '');
|
|
70
|
+
if (!national)
|
|
71
|
+
return;
|
|
72
|
+
const nextNationalLength = ((_c = (_b = detected.mask) === null || _b === void 0 ? void 0 : _b.match(/X/g)) !== null && _c !== void 0 ? _c : []).length;
|
|
73
|
+
if (nextNationalLength && national.length > nextNationalLength) {
|
|
74
|
+
national = national.slice(-nextNationalLength);
|
|
75
|
+
}
|
|
76
|
+
const fullDigits = ((_e = (_d = parsed.number) === null || _d === void 0 ? void 0 : _d.e164) !== null && _e !== void 0 ? _e : raw).replace(/\D/g, '');
|
|
77
|
+
const countryCodeDigits = String((_f = parsed.countryCode) !== null && _f !== void 0 ? _f : '');
|
|
78
|
+
const expected = countryCodeDigits.length + nextNationalLength;
|
|
79
|
+
if (fullDigits.length < expected)
|
|
80
|
+
return;
|
|
81
|
+
if (detected.id !== (country === null || country === void 0 ? void 0 : country.id)) {
|
|
82
|
+
onCountryChange(detected);
|
|
83
|
+
}
|
|
84
|
+
onValueChange(national);
|
|
85
|
+
};
|
|
86
|
+
exports.handleAutoInsert = handleAutoInsert;
|
|
@@ -7,6 +7,8 @@ export type FieldAiProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder'
|
|
|
7
7
|
onSubmit(value: string): void;
|
|
8
8
|
/** Действие при клике по кнопке сброса контекста */
|
|
9
9
|
onResetContextClick?(): void;
|
|
10
|
+
/** Действие для отмены секьюрности поля */
|
|
11
|
+
onCancelSecure?(): void;
|
|
10
12
|
}>;
|
|
11
13
|
export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
|
|
12
14
|
/** Режим ввода sensitive данных (пароля, API ключей, токенов, etc) */
|
|
@@ -15,6 +17,8 @@ export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<Fie
|
|
|
15
17
|
onSubmit(value: string): void;
|
|
16
18
|
/** Действие при клике по кнопке сброса контекста */
|
|
17
19
|
onResetContextClick?(): void;
|
|
20
|
+
/** Действие для отмены секьюрности поля */
|
|
21
|
+
onCancelSecure?(): void;
|
|
18
22
|
} & {
|
|
19
23
|
layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
|
|
20
24
|
} & import("react").RefAttributes<HTMLTextAreaElement>>;
|