@cloud-ru/uikit-product-fields-predefined 2.4.8-preview-611dfd0c.0 → 2.4.8-preview-5e39e65e.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "2.4.8-preview-611dfd0c.0",
+  "version": "2.4.8-preview-5e39e65e.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
     "react-hook-form": ">=7.51.0",
     "yup": ">=0.32.0"
   },
-  "gitHead": "91b1c05cba012021d7db31e8c06710d6472459c2"
+  "gitHead": "0861ace3fef6d7e3bfecb3720061a8734cd30e47"
 }

package/src/components/FieldCode/FieldCode.tsx

@@ -5,7 +5,7 @@ import { FieldDecorator, FieldDecoratorProps } from '@snack-uikit/fields';
 
 import { Cell, ResendCode, type ResendCodeProps } from './components';
 import { FIELD_CODE_DEFAULT_FOCUS_EFFECTS, type FieldCodeFocusEffect } from './constants';
-import { useCodeInput, UseCodeInputParams, useFieldCodeError, useFieldHelpers, useFocusCell } from './hooks';
+import { useCodeInput, UseCodeInputParams, useFieldHelpers, useFocusCell } from './hooks';
 import styles from './styles.module.scss';
 import { getCellValidationState } from './utils';
 
@@ -26,19 +26,14 @@ export type FieldCodeOwnProps = {
   cellClassName?: string;
   /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
   spacing?: number[];
-  /**
-   * Подсветить пустые символы кода.
-   * Если не задано, совпадает с `validate`.
-   */
+  /** Подсветить пустые символы кода */
   showEmptyChars?: boolean;
   /** Компонент отправки нового кода */
   resendCode?: ResendCodeProps;
   /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
   focusEffects?: readonly FieldCodeFocusEffect[];
-  /** Встроенная валидация: пустое значение и неполный код */
-  validate?: boolean;
-  /** Показать сообщение «неверный код» (учитывается, если нет своего `error` и нет ошибки валидации) */
-  invalidCode?: boolean;
+  /** Сообщение при неверном коде, если не передан свой `error` */
+  invalidCode?: string;
 };
 
 export type FieldCodeProps = FieldCodeOwnProps &
@@ -58,16 +53,13 @@ export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function Field
     disabled,
     label,
     error,
-    validate = false,
-    invalidCode = false,
-    showEmptyChars: showEmptyCharsProp,
+    invalidCode,
+    showEmptyChars,
     resendCode,
     focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS,
     'data-test-id': dataTestId,
   } = props;
 
-  const showEmptyChars = showEmptyCharsProp ?? validate;
-
   const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
   const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
   const { resetCode } = useFieldHelpers({
@@ -89,13 +81,7 @@ export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function Field
     [moveFocus, blurFields, resetCode],
   );
 
-  const resolvedError = useFieldCodeError({
-    validate,
-    value,
-    codeLength,
-    invalidCode,
-    error,
-  });
+  const resolvedError = error ?? invalidCode;
 
   const resolvedDecoratorProps = {
     label,

package/src/components/FieldCode/hooks/index.ts

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

package/src/components/FieldCode/hooks/useFieldCodeValidate.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+
+import { isNumberChar } from '../utils';
+
+export type UseFieldCodeValidateParams = {
+  /** Ожидаемая длина кода (цифр) */
+  codeLength: number;
+};
+
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+export function useFieldCodeValidate(params: UseFieldCodeValidateParams) {
+  const { codeLength } = params;
+  const { t } = useLocale('FieldsPredefined');
+
+  return useCallback(
+    (value?: string | number) => {
+      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/src/components/FieldCode/index.ts

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

package/src/components/FieldCode/styles.module.scss

@@ -27,7 +27,7 @@
 
 .cellSpacing {
   $spacing-sizes: (
-    's': 2px,
+    's': 8px,
     'm': 8px,
     'l': 12px,
   );

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

@@ -1,14 +0,0 @@
-/** Параметры хука разрешения текста ошибки: `error` > валидация (`validate`) > `invalidCode`. */
-export type UseFieldCodeErrorParams = {
-    /** Включить встроенную валидацию (пустое значение и неполный код) */
-    validate?: boolean;
-    /** Значение кода */
-    value?: string;
-    /** Ожидаемая длина кода */
-    codeLength: number;
-    /** Показать сообщение о неверном коде */
-    invalidCode?: boolean;
-    /** Ошибка снаружи */
-    error?: string;
-};
-export declare function useFieldCodeError(params: UseFieldCodeErrorParams): string | undefined;

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

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFieldCodeError = useFieldCodeError;
-const react_1 = require("react");
-const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
-const utils_1 = require("../utils");
-function useFieldCodeError(params) {
-    var _a;
-    const { validate = false, value, codeLength, invalidCode = false, error } = params;
-    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
-    const validationMessage = (0, react_1.useMemo)(() => {
-        if (!validate) {
-            return undefined;
-        }
-        const digits = (value !== null && value !== void 0 ? value : '').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, validate, value]);
-    const invalidCodeMessage = invalidCode ? t('FieldCode.invalidCode') : undefined;
-    return (_a = error !== null && error !== void 0 ? error : validationMessage) !== null && _a !== void 0 ? _a : invalidCodeMessage;
-}

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

@@ -1,14 +0,0 @@
-/** Параметры хука разрешения текста ошибки: `error` > валидация (`validate`) > `invalidCode`. */
-export type UseFieldCodeErrorParams = {
-    /** Включить встроенную валидацию (пустое значение и неполный код) */
-    validate?: boolean;
-    /** Значение кода */
-    value?: string;
-    /** Ожидаемая длина кода */
-    codeLength: number;
-    /** Показать сообщение о неверном коде */
-    invalidCode?: boolean;
-    /** Ошибка снаружи */
-    error?: string;
-};
-export declare function useFieldCodeError(params: UseFieldCodeErrorParams): string | undefined;

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

@@ -1,23 +0,0 @@
-import { useMemo } from 'react';
-import { useLocale } from '@cloud-ru/uikit-product-locale';
-import { isNumberChar } from '../utils';
-export function useFieldCodeError(params) {
-    var _a;
-    const { validate = false, value, codeLength, invalidCode = false, error } = params;
-    const { t } = useLocale('FieldsPredefined');
-    const validationMessage = useMemo(() => {
-        if (!validate) {
-            return undefined;
-        }
-        const digits = (value !== null && value !== void 0 ? value : '').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, validate, value]);
-    const invalidCodeMessage = invalidCode ? t('FieldCode.invalidCode') : undefined;
-    return (_a = error !== null && error !== void 0 ? error : validationMessage) !== null && _a !== void 0 ? _a : invalidCodeMessage;
-}

package/src/components/FieldCode/hooks/useFieldCodeError.ts

@@ -1,44 +0,0 @@
-import { useMemo } from 'react';
-
-import { useLocale } from '@cloud-ru/uikit-product-locale';
-
-import { isNumberChar } from '../utils';
-
-/** Параметры хука разрешения текста ошибки: `error` > валидация (`validate`) > `invalidCode`. */
-export type UseFieldCodeErrorParams = {
-  /** Включить встроенную валидацию (пустое значение и неполный код) */
-  validate?: boolean;
-  /** Значение кода */
-  value?: string;
-  /** Ожидаемая длина кода */
-  codeLength: number;
-  /** Показать сообщение о неверном коде */
-  invalidCode?: boolean;
-  /** Ошибка снаружи */
-  error?: string;
-};
-
-export function useFieldCodeError(params: UseFieldCodeErrorParams): string | undefined {
-  const { validate = false, value, codeLength, invalidCode = false, error } = params;
-  const { t } = useLocale('FieldsPredefined');
-
-  const validationMessage = useMemo(() => {
-    if (!validate) {
-      return undefined;
-    }
-
-    const digits = (value ?? '').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, validate, value]);
-
-  const invalidCodeMessage = invalidCode ? t('FieldCode.invalidCode') : undefined;
-  return error ?? validationMessage ?? invalidCodeMessage;
-}