@cloud-ru/uikit-product-fields-predefined 2.4.8-preview-df188565.0 → 2.4.8-preview-04a474c4.0

package/README.md

@@ -351,17 +351,24 @@
 | onChange | `(value: string, mask: InputMask<Record<string, unknown>>) => void` | - |  |
 | 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} |
 | key | `Key` | - |  |
+## useFieldCodeValidate
+Возвращает функцию валидации значения кода (пусто / неполный код).
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| codeLength* | `number` | - | Ожидаемая длина кода (цифр) |
 ## FieldCode
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| codeLength* | `number` | - | Количество цифр в коде |
+| codeLength* | `number` | - | Количество цифр в коде (ожидается целое ≥ 1) |
 | className | `string` | - | CSS-класс компонента |
 | cellClassName | `string` | - | CSS-класс ячейки кода |
 | spacing | `number[]` | - | Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) |
 | showEmptyChars | `boolean` | - | Подсветить пустые символы кода |
 | resendCode | `ResendCodeProps` | - | Компонент отправки нового кода |
 | focusEffects | `readonly FieldCodeFocusEffect[]` | - | Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) |
+| invalidCode | `string` | - | Сообщение при неверном коде, если не передан свой `error` |
 | value | `string` | - | Значение кода |
 | onChange | `(code: string) => void` | - | Колбек изменения значения |
 | onComplete | `(code: string) => void` | - | Колбек достижения ввода всех символов кода |

package/dist/cjs/components/FieldCode/FieldCode.d.ts

@@ -10,7 +10,8 @@ export type FieldCodeRef = {
     /** Сбросить значение кода */
     resetCode: () => void;
 };
-export type FieldCodeProps = {
+/** Собственные пропсы `FieldCode` */
+export type FieldCodeOwnProps = {
     /** CSS-класс компонента */
     className?: string;
     /** CSS-класс ячейки кода */
@@ -23,20 +24,10 @@ export type FieldCodeProps = {
     resendCode?: ResendCodeProps;
     /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
     focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
-export declare const FieldCode: import("react").ForwardRefExoticComponent<{
-    /** CSS-класс компонента */
-    className?: string;
-    /** CSS-класс ячейки кода */
-    cellClassName?: string;
-    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
-    spacing?: number[];
-    /** Подсветить пустые символы кода */
-    showEmptyChars?: boolean;
-    /** Компонент отправки нового кода */
-    resendCode?: ResendCodeProps;
-    /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
-    focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
+};
+export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
 export type { FieldCodeFocusEffect } from './constants';
 export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

package/dist/cjs/components/FieldCode/FieldCode.js

@@ -15,7 +15,7 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
     var _a;
-    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, showEmptyChars, resendCode, focusEffects = constants_1.FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, focusEffects = constants_1.FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
     const { inputsRef, moveFocus, blurFields } = (0, hooks_1.useFocusCell)(codeLength);
     const { code, cellHandlers, onChangeCode } = (0, hooks_1.useCodeInput)({ value, onChange, codeLength, moveFocus, onComplete });
     const { resetCode } = (0, hooks_1.useFieldHelpers)({
@@ -31,17 +31,18 @@ exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
         blurFields,
         resetCode,
     }), [moveFocus, blurFields, resetCode]);
+    const resolvedError = error !== null && error !== void 0 ? error : invalidCode;
     const resolvedDecoratorProps = {
         label,
         disabled,
         size,
-        error,
+        error: resolvedError,
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, className) }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [(0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, Object.assign({}, resolvedDecoratorProps, { children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.codeContainer, "data-size": size, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }
-                        }, className: (0, classnames_1.default)((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles_module_scss_1.default.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: (0, utils_1.getCellValidationState)(char, showEmptyChars, Boolean(error)) }, index))) }) })), resendCode ? (0, jsx_runtime_1.jsx)(components_1.ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
+                        }, className: (0, classnames_1.default)((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles_module_scss_1.default.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: (0, utils_1.getCellValidationState)(char, showEmptyChars, Boolean(resolvedError)) }, index))) }) })), resendCode ? (0, jsx_runtime_1.jsx)(components_1.ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
 });
 var constants_2 = require("./constants");
 Object.defineProperty(exports, "FIELD_CODE_DEFAULT_FOCUS_EFFECTS", { enumerable: true, get: function () { return constants_2.FIELD_CODE_DEFAULT_FOCUS_EFFECTS; } });

package/dist/cjs/components/FieldCode/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useCodeInput';
+export * from './useFieldCodeValidate';
 export * from './useFocusCell';
 export * from './useFieldHelpers';

package/dist/cjs/components/FieldCode/hooks/index.js

@@ -15,5 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useCodeInput"), exports);
+__exportStar(require("./useFieldCodeValidate"), exports);
 __exportStar(require("./useFocusCell"), exports);
 __exportStar(require("./useFieldHelpers"), exports);

package/dist/cjs/components/FieldCode/hooks/useCodeInput.d.ts

@@ -1,6 +1,6 @@
 import { ClipboardEvent, KeyboardEvent } from 'react';
 export type UseCodeInputParams = {
-    /** Количество цифр в коде */
+    /** Количество цифр в коде (ожидается целое ≥ 1) */
     codeLength: number;
     /** Значение кода */
     value?: string;

package/dist/cjs/components/FieldCode/hooks/useFieldCodeValidate.d.ts

@@ -0,0 +1,8 @@
+export type UseFieldCodeValidateParams = {
+    /** Ожидаемая длина кода (цифр) */
+    codeLength: number;
+};
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+export declare function useFieldCodeValidate(params: UseFieldCodeValidateParams): (value?: string | number) => string | undefined;

package/dist/cjs/components/FieldCode/hooks/useFieldCodeValidate.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeValidate = useFieldCodeValidate;
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const utils_1 = require("../utils");
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+function useFieldCodeValidate(params) {
+    const { codeLength } = params;
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    return (0, react_1.useCallback)((value) => {
+        const str = value != null ? String(value) : '';
+        const digits = str.split('').filter(utils_1.isNumberChar).join('');
+        if (digits.length === 0) {
+            return t('FieldCode.required');
+        }
+        if (digits.length < codeLength) {
+            return t('FieldCode.minLength', { count: codeLength });
+        }
+        return undefined;
+    }, [codeLength, t]);
+}

package/dist/cjs/components/FieldCode/index.d.ts

@@ -1 +1,2 @@
 export * from './FieldCode';
+export { useFieldCodeValidate, type UseFieldCodeValidateParams } from './hooks/useFieldCodeValidate';

package/dist/cjs/components/FieldCode/index.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeValidate = void 0;
 __exportStar(require("./FieldCode"), exports);
+var useFieldCodeValidate_1 = require("./hooks/useFieldCodeValidate");
+Object.defineProperty(exports, "useFieldCodeValidate", { enumerable: true, get: function () { return useFieldCodeValidate_1.useFieldCodeValidate; } });

package/dist/esm/components/FieldCode/FieldCode.d.ts

@@ -10,7 +10,8 @@ export type FieldCodeRef = {
     /** Сбросить значение кода */
     resetCode: () => void;
 };
-export type FieldCodeProps = {
+/** Собственные пропсы `FieldCode` */
+export type FieldCodeOwnProps = {
     /** CSS-класс компонента */
     className?: string;
     /** CSS-класс ячейки кода */
@@ -23,20 +24,10 @@ export type FieldCodeProps = {
     resendCode?: ResendCodeProps;
     /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
     focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
-export declare const FieldCode: import("react").ForwardRefExoticComponent<{
-    /** CSS-класс компонента */
-    className?: string;
-    /** CSS-класс ячейки кода */
-    cellClassName?: string;
-    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
-    spacing?: number[];
-    /** Подсветить пустые символы кода */
-    showEmptyChars?: boolean;
-    /** Компонент отправки нового кода */
-    resendCode?: ResendCodeProps;
-    /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
-    focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
+};
+export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
 export type { FieldCodeFocusEffect } from './constants';
 export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

package/dist/esm/components/FieldCode/FieldCode.js

@@ -9,7 +9,7 @@ import styles from './styles.module.css';
 import { getCellValidationState } from './utils';
 export const FieldCode = forwardRef(function FieldCode(props, ref) {
     var _a;
-    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, showEmptyChars, resendCode, focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
     const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
     const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
     const { resetCode } = useFieldHelpers({
@@ -25,16 +25,17 @@ export const FieldCode = forwardRef(function FieldCode(props, ref) {
         blurFields,
         resetCode,
     }), [moveFocus, blurFields, resetCode]);
+    const resolvedError = error !== null && error !== void 0 ? error : invalidCode;
     const resolvedDecoratorProps = {
         label,
         disabled,
         size,
-        error,
+        error: resolvedError,
     };
     return (_jsxs("div", Object.assign({ className: cn(styles.fieldCode, className) }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [_jsx(FieldDecorator, Object.assign({}, resolvedDecoratorProps, { children: _jsx("div", { className: styles.codeContainer, "data-size": size, children: code.map((char, index) => (_jsx(Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }
-                        }, className: cn((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: getCellValidationState(char, showEmptyChars, Boolean(error)) }, index))) }) })), resendCode ? _jsx(ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
+                        }, className: cn((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: getCellValidationState(char, showEmptyChars, Boolean(resolvedError)) }, index))) }) })), resendCode ? _jsx(ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
 });
 export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

package/dist/esm/components/FieldCode/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useCodeInput';
+export * from './useFieldCodeValidate';
 export * from './useFocusCell';
 export * from './useFieldHelpers';

package/dist/esm/components/FieldCode/hooks/index.js

@@ -1,3 +1,4 @@
 export * from './useCodeInput';
+export * from './useFieldCodeValidate';
 export * from './useFocusCell';
 export * from './useFieldHelpers';

package/dist/esm/components/FieldCode/hooks/useCodeInput.d.ts

@@ -1,6 +1,6 @@
 import { ClipboardEvent, KeyboardEvent } from 'react';
 export type UseCodeInputParams = {
-    /** Количество цифр в коде */
+    /** Количество цифр в коде (ожидается целое ≥ 1) */
     codeLength: number;
     /** Значение кода */
     value?: string;

package/dist/esm/components/FieldCode/hooks/useFieldCodeValidate.d.ts

@@ -0,0 +1,8 @@
+export type UseFieldCodeValidateParams = {
+    /** Ожидаемая длина кода (цифр) */
+    codeLength: number;
+};
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+export declare function useFieldCodeValidate(params: UseFieldCodeValidateParams): (value?: string | number) => string | undefined;

package/dist/esm/components/FieldCode/hooks/useFieldCodeValidate.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { isNumberChar } from '../utils';
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+export function useFieldCodeValidate(params) {
+    const { codeLength } = params;
+    const { t } = useLocale('FieldsPredefined');
+    return useCallback((value) => {
+        const str = value != null ? String(value) : '';
+        const digits = str.split('').filter(isNumberChar).join('');
+        if (digits.length === 0) {
+            return t('FieldCode.required');
+        }
+        if (digits.length < codeLength) {
+            return t('FieldCode.minLength', { count: codeLength });
+        }
+        return undefined;
+    }, [codeLength, t]);
+}

package/dist/esm/components/FieldCode/index.d.ts

@@ -1 +1,2 @@
 export * from './FieldCode';
+export { useFieldCodeValidate, type UseFieldCodeValidateParams } from './hooks/useFieldCodeValidate';

package/dist/esm/components/FieldCode/index.js

@@ -1 +1,2 @@
 export * from './FieldCode';
+export { useFieldCodeValidate } from './hooks/useFieldCodeValidate';