@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

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

@@ -0,0 +1,3 @@
+export * from './components/ResendCode/index.js';
+export * from './FieldCode.js';
+export * from './hooks/useFieldCodeValidate.js';

package/dist/esm/components/FieldCode/styles.module.css

@@ -0,0 +1,45 @@
+.fieldCode{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+.fieldCode[data-stretch-cells]{
+  align-items:stretch;
+  width:100%;
+}
+
+.fieldCodeScrollable{
+  overflow-x:auto;
+}
+
+.fieldDecorator{
+  width:unset;
+}
+
+.codeContainer{
+  display:flex;
+  justify-content:safe center;
+}
+.codeContainer[data-stretch-cells]{
+  width:100%;
+}
+.codeContainer[data-size=s]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=m]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=l]{
+  gap:var(--sn-primitive-dimension-12, 12px);
+}
+
+.cellSpacing[data-size=s]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=m]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=l]{
+  margin-right:var(--sn-primitive-dimension-12, 12px);
+}

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

@@ -0,0 +1,6 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+export declare const isNumberChar: (char: string) => boolean;
+export declare const isStringCodeLength: (input: string, codeLength: number) => boolean;
+export declare const isZeroWidthSpace: (value: string) => value is "​";
+export declare function getFirstEmptyCellIndex(code: readonly string[]): number;
+export declare const getCellValidationState: (value: string, showEmptyChars?: boolean, error?: boolean) => FieldComboProps["validationState"];

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

@@ -0,0 +1,13 @@
+import { ZERO_WIDTH_SPACE } from './constants.js';
+export const isNumberChar = (char) => /^\d$/.test(char);
+export const isStringCodeLength = (input, codeLength) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+export const isZeroWidthSpace = (value) => value === ZERO_WIDTH_SPACE;
+export function getFirstEmptyCellIndex(code) {
+    return code.findIndex(isZeroWidthSpace);
+}
+export const getCellValidationState = (value, showEmptyChars, error) => {
+    if (showEmptyChars) {
+        return isZeroWidthSpace(value) ? 'error' : 'default';
+    }
+    return error ? 'error' : 'default';
+};

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

@@ -0,0 +1,10 @@
+import { ValidationError } from 'yup';
+/**
+ * Поле «Описание» с локальным стейтом и валидацией (yup).
+ */
+export declare const FieldDescription: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/ds-fields").FieldTextAreaProps, "label" | "caption" | "hint" | "placeholder" | "footer" | "name" | "inputMode" | "searchPlaceholder"> & {
+    customSchema?: import("yup").StringSchema;
+    addButton?: boolean;
+} & {
+    onValidationError?(error: ValidationError | null): void;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/FieldDescription/FieldDescription.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldTextArea } from '@cloud-ru/ds-fields';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { string } from 'yup';
+import { useCustomFieldValidation } from '../../hooks/index.js';
+import { fieldsPredefinedLocale } from '../../locale/index.js';
+import { FieldWithAddButton } from './components/index.js';
+import { DEFAULT_MAX_LENGTH } from './constants.js';
+/**
+ * Поле «Описание» с локальным стейтом и валидацией (yup).
+ */
+export const FieldDescription = forwardRef(function FieldDescription({ size = 'm', required = false, maxLength = DEFAULT_MAX_LENGTH, customSchema, resizable = true, addButton, onValidationError, value: propValue, ...restProps }, ref) {
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    const textareaRef = useRef(null);
+    const validationSchema = useMemo(() => {
+        let baseSchema = string()
+            .trim()
+            .max(maxLength, t('FieldDescription.maxSymbols', { max: maxLength }));
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldDescription.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validate } = useCustomFieldValidation({ schema: validationSchema });
+    const [internalValue, setInternalValue] = useState(propValue ?? '');
+    const [error, setError] = useState(null);
+    // Как в FieldName: заданный `value` переводит поле в controlled-режим.
+    const value = propValue !== undefined ? propValue : internalValue;
+    const handleChange = (newValue) => {
+        setInternalValue(newValue);
+        restProps.onChange?.(newValue);
+        const result = validate(newValue);
+        setError(result.error);
+        onValidationError?.(result.error);
+    };
+    const handleBlur = (event) => {
+        restProps.onBlur?.(event);
+        const result = validate(value);
+        setError(result.error);
+        onValidationError?.(result.error);
+    };
+    const errorMes = restProps.error ?? error?.message;
+    const standaloneComponent = (_jsx(FieldTextArea, { ...restProps, resizable: resizable, label: t('FieldDescription.label'), placeholder: t('FieldDescription.placeholder'), inputMode: 'text', ref: mergeRefs(ref, textareaRef), size: size, maxLength: maxLength, value: value, onChange: handleChange, onBlur: handleBlur, validationState: errorMes ? 'error' : restProps.validationState, hint: errorMes, caption: !required ? t('FieldDescription.optional') : undefined }));
+    if (addButton && !required) {
+        return (_jsx(FieldWithAddButton, { autoFocusRef: textareaRef, size: size, children: standaloneComponent }));
+    }
+    return standaloneComponent;
+});

package/dist/esm/components/FieldDescription/FieldDescriptionRHF.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Поле «Описание» с обёрткой для react-hook-form.
+ */
+export declare const FieldDescriptionRHF: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/ds-fields").FieldTextAreaProps, "label" | "caption" | "hint" | "placeholder" | "footer" | "name" | "inputMode" | "searchPlaceholder"> & {
+    customSchema?: import("yup").StringSchema;
+    addButton?: boolean;
+} & {
+    controllerProps: Omit<import("react-hook-form").ControllerProps<import("react-hook-form").FieldValues>, "render" | "rules" | "disabled">;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/FieldDescription/FieldDescriptionRHF.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldTextArea } from '@cloud-ru/ds-fields';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef } from 'react';
+import { Controller } from 'react-hook-form';
+import { string } from 'yup';
+import { useCustomFieldValidation } from '../../hooks/index.js';
+import { fieldsPredefinedLocale } from '../../locale/index.js';
+import { FieldWithAddButton } from './components/FieldWithAddButton.js';
+import { DEFAULT_MAX_LENGTH } from './constants.js';
+/**
+ * Поле «Описание» с обёрткой для react-hook-form.
+ */
+export const FieldDescriptionRHF = forwardRef(function FieldDescriptionRHF({ controllerProps, customSchema, size = 'm', required = false, maxLength = DEFAULT_MAX_LENGTH, addButton, resizable = true, ...props }, ref) {
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    const textareaRef = useRef(null);
+    const validationSchema = useMemo(() => {
+        let baseSchema = string()
+            .trim()
+            .max(maxLength, t('FieldDescription.maxSymbols', { max: maxLength }));
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldDescription.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validateRHF } = useCustomFieldValidation({ schema: validationSchema });
+    const controllerComponent = (_jsx(Controller, { ...controllerProps, rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            const errorMes = props.error ?? error?.message;
+            return (_jsx(FieldTextArea, { ...props, resizable: resizable, size: size, label: t('FieldDescription.label'), placeholder: t('FieldDescription.placeholder'), inputMode: 'text', ref: mergeRefs(ref, localRef, textareaRef), maxLength: maxLength, value: value, onChange: newValue => {
+                    props.onChange?.(newValue);
+                    onChange(newValue);
+                }, onBlur: event => {
+                    props.onBlur?.(event);
+                    onBlur();
+                }, validationState: errorMes ? 'error' : props.validationState, hint: errorMes, caption: !required ? t('FieldDescription.optional') : undefined }));
+        } }));
+    if (addButton && !required) {
+        return (_jsx(FieldWithAddButton, { autoFocusRef: textareaRef, size: size, children: controllerComponent }));
+    }
+    return controllerComponent;
+});

package/dist/esm/components/FieldDescription/components/FieldWithAddButton.d.ts

@@ -0,0 +1,7 @@
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+import { ReactNode, RefObject } from 'react';
+export declare function FieldWithAddButton({ children, size, autoFocusRef, }: {
+    children: ReactNode;
+    size?: FieldTextAreaProps['size'];
+    autoFocusRef: RefObject<HTMLTextAreaElement | null>;
+}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

package/dist/esm/components/FieldDescription/components/FieldWithAddButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
+import { useCallback, useEffect, useState } from 'react';
+import { TEST_IDS } from '../../../constants.js';
+import { fieldsPredefinedLocale } from '../../../locale/index.js';
+export function FieldWithAddButton({ children, size = 'm', autoFocusRef, }) {
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    const [showField, setShowField] = useState(false);
+    const { layoutType } = useAdaptiveLayout();
+    const isMobile = isMobileLayout(layoutType);
+    const handleAddClick = useCallback(() => setShowField(true), []);
+    useEffect(() => {
+        // На mobile автофокус запрещён — он принудительно открывает экранную клавиатуру.
+        if (showField && !isMobile && autoFocusRef.current) {
+            autoFocusRef.current.focus();
+        }
+    }, [showField, isMobile, autoFocusRef]);
+    if (showField) {
+        return children;
+    }
+    return (_jsx("div", { children: _jsx(Button, { view: VIEW.Function, icon: _jsx(PlusSVG, {}), iconPosition: ICON_POSITION.Before, label: t('FieldDescription.addButton'), onClick: handleAddClick, size: size, "data-test-id": TEST_IDS.fieldDescriptionAddButton }) }));
+}

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

@@ -0,0 +1 @@
+export * from './FieldWithAddButton.js';

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

@@ -0,0 +1 @@
+export * from './FieldWithAddButton.js';

package/dist/esm/components/FieldDescription/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_MAX_LENGTH = 255;

package/dist/esm/components/FieldDescription/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MAX_LENGTH = 255;

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

@@ -0,0 +1,3 @@
+export * from './FieldDescription.js';
+export * from './FieldDescriptionRHF.js';
+export * from './types.js';

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

@@ -0,0 +1,3 @@
+export * from './FieldDescription.js';
+export * from './FieldDescriptionRHF.js';
+export * from './types.js';

package/dist/esm/components/FieldDescription/types.d.ts

@@ -0,0 +1,17 @@
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+export type FieldDescriptionPropsBase = Omit<FieldTextAreaProps, 'placeholder' | 'label' | 'footer' | 'searchPlaceholder' | 'hint' | 'inputMode' | 'caption' | 'name'> & {
+    /** Дополнительная yup-схема, которая конкатенируется к встроенной */
+    customSchema?: StringSchema;
+    /** Поле появляется по кнопке «Добавить описание» (только для опционального поля) */
+    addButton?: boolean;
+};
+export type FieldDescriptionProps = FieldDescriptionPropsBase & {
+    /** Колбэк, вызываемый при изменении ошибки валидации (только в standalone-режиме) */
+    onValidationError?(error: ValidationError | null): void;
+};
+export type FieldDescriptionRHFProps = FieldDescriptionPropsBase & {
+    /** Режим контроллера с использованием react-hook-form */
+    controllerProps: Omit<ControllerProps<FieldValues>, 'render' | 'rules' | 'disabled'>;
+};

package/dist/esm/components/FieldDescription/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { InputMask } from 'imask';
+import { Mask } from './types.js';
+export type FieldMaskProps = Omit<FieldComboProps, 'value' | 'onChange' | 'inputMode'> & {
+    /** Значение поля (controlled-режим) */
+    value?: string;
+    /** Колбек смены значения; вторым аргументом — экземпляр маски imask */
+    onChange?(value: string, mask: InputMask): void;
+    /** Предустановленная маска поля */
+    mask: Mask;
+};
+export declare const FieldMask: import("react").ForwardRefExoticComponent<Omit<FieldMaskProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldMask/FieldMask.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useEffect } from 'react';
+import { useIMask } from 'react-imask';
+import { BASE_MASK_OPTIONS, MASK_OPTIONS } from './constants.js';
+export const FieldMask = forwardRef(function FieldMask({ value: valueProp, onChange, mask, size = 'm', ...props }, ref) {
+    const maskOptions = MASK_OPTIONS[mask];
+    const { ref: maskedRef, value, setValue, } = useIMask({ ...BASE_MASK_OPTIONS, ...maskOptions.options }, {
+        defaultValue: valueProp,
+        onAccept: onChange,
+    });
+    useEffect(() => {
+        if (valueProp !== undefined && valueProp !== value) {
+            setValue(valueProp);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    return (_jsx(FieldCombo
+    // @ts-expect-error тип maskedRef из react-imask не совпадает с ref-типом FieldCombo
+    , { 
+        // @ts-expect-error тип maskedRef из react-imask не совпадает с ref-типом FieldCombo
+        ref: mergeRefs(ref, maskedRef), value: value, onChange: setValue, placeholder: maskOptions.placeholder, inputMode: maskOptions.inputMode ?? 'numeric', size: size, ...props }));
+});

package/dist/esm/components/FieldMask/constants.d.ts

@@ -0,0 +1,19 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { Mask } from './types.js';
+export declare const MASK: {
+    readonly Code: "code";
+    readonly Uuid: "uuid";
+    readonly Passport: "passport";
+    readonly Snils: "snils";
+    readonly IpV4Address: "ip-v4-address";
+    readonly IpV4AddressWithMask: "ip-v4-address-with-mask";
+};
+export declare const MASK_OPTIONS: Record<Mask, {
+    placeholder: string;
+    options: Record<string, unknown>;
+    inputMode?: FieldComboProps['inputMode'];
+}>;
+export declare const BASE_MASK_OPTIONS: {
+    readonly lazy: true;
+    readonly autofix: true;
+};

package/dist/esm/components/FieldMask/constants.js

@@ -0,0 +1,57 @@
+export const MASK = {
+    Code: 'code',
+    Uuid: 'uuid',
+    Passport: 'passport',
+    Snils: 'snils',
+    IpV4Address: 'ip-v4-address',
+    IpV4AddressWithMask: 'ip-v4-address-with-mask',
+};
+export const MASK_OPTIONS = {
+    [MASK.Uuid]: {
+        placeholder: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
+        options: {
+            mask: 'hhhhhhhh-hhhh-hhhh-hhhh-hhhhhhhhhhhh',
+            placeholderChar: '_',
+            definitions: {
+                h: /[0-9a-f]/,
+            },
+        },
+        inputMode: 'text',
+    },
+    [MASK.Code]: {
+        placeholder: 'XXXX',
+        options: {
+            mask: '0000',
+            placeholderChar: '_',
+        },
+        inputMode: 'numeric',
+    },
+    [MASK.Passport]: {
+        placeholder: 'XXXX XXXXXX',
+        options: {
+            mask: '0000 000000',
+        },
+        inputMode: 'numeric',
+    },
+    [MASK.Snils]: {
+        placeholder: 'XXXXXX-XXX XX',
+        options: {
+            mask: '000000-000 00',
+        },
+        inputMode: 'numeric',
+    },
+    [MASK.IpV4Address]: {
+        placeholder: '___.___.___.___',
+        options: { mask: '0[00]{.}`0[00]{.}`0[00]{.}`0[00]' },
+        inputMode: 'numeric',
+    },
+    [MASK.IpV4AddressWithMask]: {
+        placeholder: '___.___.___.___/__',
+        options: { mask: '0[00]{.}`0[00]{.}`0[00]{.}`0[00]{/}`0[0]' },
+        inputMode: 'numeric',
+    },
+};
+export const BASE_MASK_OPTIONS = {
+    lazy: true,
+    autofix: true,
+};

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

@@ -0,0 +1,3 @@
+export { MASK } from './constants.js';
+export * from './FieldMask.js';
+export * from './types.js';

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

@@ -0,0 +1,3 @@
+export { MASK } from './constants.js';
+export * from './FieldMask.js';
+export * from './types.js';

package/dist/esm/components/FieldMask/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { MASK } from './constants.js';
+export type Mask = ValueOf<typeof MASK>;

package/dist/esm/components/FieldMask/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { FieldNameProps } from './types.js';
+/**
+ * Поле «Имя» с локальным стейтом и валидацией (yup).
+ */
+export declare const FieldName: import("react").ForwardRefExoticComponent<Omit<FieldNameProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldName/FieldName.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { runAfterRerender } from '@cloud-ru/ds-input-private';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { string } from 'yup';
+import { useCustomFieldValidation } from '../../hooks/index.js';
+import { fieldsPredefinedLocale } from '../../locale/index.js';
+import { DEFAULT_MAX_NAME_LENGTH } from './constants.js';
+/**
+ * Поле «Имя» с локальным стейтом и валидацией (yup).
+ */
+export const FieldName = forwardRef(function FieldName(props, ref) {
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    const { value: propValue = '', onChange: propOnChange, onBlur: propOnBlur, error: propError, maxLength = DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, allowMoreThanMaxLength = true, size = 'm', ...inputProps } = props;
+    const [internalValue, setInternalValue] = useState(propValue);
+    const [validationError, setValidationError] = useState(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const validationSchema = useMemo(() => {
+        let baseSchema = string()
+            .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+            if (!value)
+                return true;
+            return value.length <= maxLength;
+        })
+            .matches(/^[a-zA-Z0-9.\-_]*$/, {
+            message: t('FieldName.wrongSymbols'),
+            name: 'allowedSymbols',
+            excludeEmptyString: true,
+        });
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validate } = useCustomFieldValidation({ schema: validationSchema });
+    const currentValue = 'value' in props ? propValue : internalValue;
+    const currentError = propError || validationError?.message;
+    const isRequiredError = currentError?.match(t('FieldName.required'));
+    const handleChange = (newValue) => {
+        const result = validate(newValue);
+        // Если была required-ошибка и пользователь начал ввод — очищаем её.
+        if (isRequiredError && !isFocused) {
+            setValidationError(null);
+        }
+        else if (result.error && result.error.message !== t('FieldName.required')) {
+            // Любую НЕ required ошибку показываем сразу.
+            setValidationError(result.error);
+        }
+        else {
+            setValidationError(null);
+        }
+        setInternalValue(newValue);
+        propOnChange?.(newValue);
+    };
+    const handleBlur = (e) => {
+        runAfterRerender(() => setIsFocused(false));
+        const result = validate(currentValue);
+        setValidationError(result.error);
+        props.onValidationError?.(result.error);
+        propOnBlur?.(e);
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+    };
+    const handleClear = () => {
+        const result = validate('');
+        setValidationError(result.error);
+        props.onValidationError?.(result.error);
+    };
+    // Ошибка обязательного поля появляется после blur.
+    const showError = currentError && ((isRequiredError && !isFocused) || !isRequiredError);
+    // Счётчик — только при ошибке длины/обязательности (как в FieldNameRHF).
+    const shouldShowCounter = Boolean(currentError) &&
+        (Boolean(currentError?.match(t('FieldName.maxSymbols', { max: maxLength }))) || Boolean(isRequiredError));
+    return (_jsx(FieldCombo, { ...inputProps, inputMode: 'text', onClearButtonClick: handleClear, allowMoreThanMaxLength: allowMoreThanMaxLength, ref: mergeRefs(ref, inputRef), value: currentValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, validationState: showError ? 'error' : inputProps.validationState, hint: showError ? currentError : undefined, maxLength: shouldShowCounter && showError ? maxLength : undefined, size: size, label: showLabel ? t('FieldName.label') : undefined, placeholder: t('FieldName.placeholder'), caption: !required ? t('FieldDescription.optional') : undefined }));
+});

package/dist/esm/components/FieldName/FieldNameRHF.d.ts

@@ -0,0 +1,5 @@
+import { FieldNameRHFProps } from './types.js';
+/**
+ * Поле «Имя» с обёрткой для react-hook-form.
+ */
+export declare const FieldNameRHF: import("react").ForwardRefExoticComponent<Omit<FieldNameRHFProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldName/FieldNameRHF.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { runAfterRerender } from '@cloud-ru/ds-input-private';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { string } from 'yup';
+import { useCustomFieldValidation } from '../../hooks/index.js';
+import { fieldsPredefinedLocale } from '../../locale/index.js';
+import { DEFAULT_MAX_NAME_LENGTH } from './constants.js';
+/**
+ * Поле «Имя» с обёрткой для react-hook-form.
+ */
+export const FieldNameRHF = forwardRef(function FieldNameRHF(props, ref) {
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    const { controllerProps, maxLength = DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, size = 'm', allowMoreThanMaxLength = true, error: propError, ...inputProps } = props;
+    const [isFocused, setIsFocused] = useState(false);
+    const { trigger } = useFormContext();
+    const validationSchema = useMemo(() => {
+        let baseSchema = string()
+            .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+            if (!value)
+                return true;
+            return value.length <= maxLength;
+        })
+            .matches(/^[a-zA-Z0-9.\-_]*$/, {
+            message: t('FieldName.wrongSymbols'),
+            name: 'allowedSymbols',
+            excludeEmptyString: true,
+        });
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validateRHF } = useCustomFieldValidation({ schema: validationSchema });
+    const handleFocus = value => {
+        setIsFocused(true);
+        inputProps.onFocus?.(value);
+    };
+    return (_jsx(Controller, { ...controllerProps, rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            const isRequiredError = Boolean(error && error.message?.match(t('FieldName.required')));
+            const shouldShowCounter = error && (error.message?.match(t('FieldName.maxSymbols', { max: maxLength })) || isRequiredError);
+            // Показываем ошибку, если: required-ошибка и поле не в фокусе; либо любая другая ошибка;
+            // либо ошибка передана принудительно через проп `error`.
+            const showError = error && ((isRequiredError && !isFocused) || !isRequiredError);
+            const errorMes = propError ?? error?.message;
+            const handleClearButtonClick = () => {
+                trigger(controllerProps.name);
+            };
+            const handleChange = (newValue) => {
+                inputProps.onChange?.(newValue);
+                onChange(newValue);
+            };
+            const handleBlur = value => {
+                runAfterRerender(() => setIsFocused(false));
+                inputProps.onBlur?.(value);
+                onBlur();
+            };
+            return (_jsx(FieldCombo, { ...inputProps, inputMode: 'text', onClearButtonClick: handleClearButtonClick, allowMoreThanMaxLength: allowMoreThanMaxLength, ref: mergeRefs(ref, localRef), value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, validationState: showError ? 'error' : inputProps.validationState, hint: showError ? errorMes : undefined, maxLength: shouldShowCounter && showError ? maxLength : undefined, size: size, label: showLabel ? t('FieldName.label') : undefined, placeholder: t('FieldName.placeholder'), caption: !required ? t('FieldDescription.optional') : undefined }));
+        } }));
+});

package/dist/esm/components/FieldName/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_MAX_NAME_LENGTH = 64;

package/dist/esm/components/FieldName/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MAX_NAME_LENGTH = 64;

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

@@ -0,0 +1,3 @@
+export * from './FieldName.js';
+export * from './FieldNameRHF.js';
+export * from './types.js';

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

@@ -0,0 +1,3 @@
+export * from './FieldName.js';
+export * from './FieldNameRHF.js';
+export * from './types.js';

package/dist/esm/components/FieldName/types.d.ts

@@ -0,0 +1,22 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+export type BaseFieldNameProps = Omit<FieldComboProps, 'placeholder' | 'label' | 'footer' | 'type' | 'inputMode' | 'caption' | 'hint'> & {
+    /** Показывать предустановленный лейбл «Имя» */
+    showLabel?: boolean;
+    /**
+     * Дополнительная yup-схема, конкатенируется к встроенной (обязательность, длина, допустимые символы).
+     * Через неё подключают data-зависимые проверки, которые компонент не может выполнить сам — например,
+     * проверку уникальности имени по данным потребителя. Текст ошибки можно взять из локали пакета:
+     * `fieldsPredefinedLocale.useTranslations().t('FieldName.errorDuplicate')`.
+     */
+    customSchema?: StringSchema;
+};
+export type FieldNameProps = BaseFieldNameProps & {
+    /** Колбэк, вызываемый при изменении ошибки валидации */
+    onValidationError?(error: ValidationError | null): void;
+};
+export type FieldNameRHFProps = BaseFieldNameProps & {
+    /** Режим контроллера с использованием react-hook-form */
+    controllerProps: Omit<ControllerProps<FieldValues>, 'render' | 'rules' | 'disabled'>;
+};

package/dist/esm/components/FieldName/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { CountrySettings, FieldPhoneOptionsProps } from './types.js';
+export type FieldPhoneProps = Omit<FieldComboProps, 'prefix' | 'prefixIcon' | 'postfix' | 'placeholder' | 'allowMoreThanMaxLength' | 'elementBefore' | 'elementAfter' | 'inputMode'> & {
+    /** Скролл с ограничением высоты для списка стран. По умолчанию включён. */
+    scrollList?: boolean;
+    onChange?(value: string): void;
+    /** Плейсхолдер поля поиска в выпадающем списке стран */
+    searchPlaceholder?: string;
+    onChangeCountry?(country: FieldPhoneOptionsProps): void;
+    /** Конфигурация для изменения стандартного списка стран */
+    options?: CountrySettings;
+};
+export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldPhoneProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;