@cloud-ru/uikit-product-fields-predefined 0.13.11 → 0.14.1

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

@@ -0,0 +1,81 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldNameRHF = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const yup_1 = require("yup");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_mobile_fields_1 = require("@cloud-ru/uikit-product-mobile-fields");
+const input_private_1 = require("@snack-uikit/input-private");
+const hooks_1 = require("../../hooks");
+const constants_1 = require("./constants");
+/**
+ * Поле имя c оберткой для React Hook Form
+ */
+exports.FieldNameRHF = (0, react_1.forwardRef)((props, ref) => {
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    const { controllerProps, maxLength = constants_1.DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, size = 'm', allowMoreThanMaxLength = true, error: propError } = props, inputProps = __rest(props, ["controllerProps", "maxLength", "required", "customSchema", "showLabel", "size", "allowMoreThanMaxLength", "error"]);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const { trigger } = (0, react_hook_form_1.useFormContext)();
+    const validationSchema = (0, react_1.useMemo)(() => {
+        let baseSchema = (0, yup_1.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 } = (0, hooks_1.useCustomFieldValidation)({ schema: validationSchema });
+    const handleFocus = value => {
+        var _a;
+        setIsFocused(true);
+        (_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, value);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, Object.assign({}, controllerProps, { rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            var _a, _b;
+            const isRequiredError = Boolean(error && ((_a = error.message) === null || _a === void 0 ? void 0 : _a.match(t('FieldName.required'))));
+            const shouldShowCounter = error && (((_b = error.message) === null || _b === void 0 ? void 0 : _b.match(t('FieldName.maxSymbols', { max: maxLength }))) || isRequiredError);
+            // - Есть ошибка обязательного поля и поле не в фокусе
+            // - Или другая ошибка
+            // - Или принудительно показываем ошибку
+            const showError = error && ((isRequiredError && !isFocused) || !isRequiredError);
+            const errorMes = propError !== null && propError !== void 0 ? propError : error === null || error === void 0 ? void 0 : error.message;
+            const handleChange = (newValue) => {
+                var _a;
+                (_a = inputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, newValue);
+                onChange(newValue);
+            };
+            const handleBlur = value => {
+                var _a;
+                (0, input_private_1.runAfterRerender)(() => setIsFocused(false));
+                (_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, value);
+                onBlur();
+            };
+            return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldText, Object.assign({}, inputProps, { inputMode: 'text', onClearButtonClick: () => trigger(controllerProps.name), allowMoreThanMaxLength: allowMoreThanMaxLength, ref: (0, merge_refs_1.default)(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, caption: !required ? t('FieldDescription.optional') : undefined })));
+        } })));
+});

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_MAX_NAME_LENGTH = void 0;
+exports.DEFAULT_MAX_NAME_LENGTH = 64;

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

@@ -0,0 +1,3 @@
+export { FieldName } from './FieldName';
+export { FieldNameRHF } from './FieldNameRHF';
+export type { BaseFieldNameProps, FieldNameRHFProps, FieldNameProps } from './types';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldNameRHF = exports.FieldName = void 0;
+var FieldName_1 = require("./FieldName");
+Object.defineProperty(exports, "FieldName", { enumerable: true, get: function () { return FieldName_1.FieldName; } });
+var FieldNameRHF_1 = require("./FieldNameRHF");
+Object.defineProperty(exports, "FieldNameRHF", { enumerable: true, get: function () { return FieldNameRHF_1.FieldNameRHF; } });

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

@@ -0,0 +1,15 @@
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+import { FieldTextProps } from '@cloud-ru/uikit-product-mobile-fields';
+export type BaseFieldNameProps = Omit<FieldTextProps, 'placeholder' | 'label' | 'footer' | 'type' | 'inputMode' | 'caption' | 'hint'> & {
+    showLabel?: boolean;
+    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/cjs/components/FieldName/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -21,5 +21,5 @@ export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<
     /** options — объект конфигурации для изменения стандартного списка стран */
     options?: CountrySettings;
 } & {
-    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
 } & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -3,3 +3,5 @@ export * from './SelectCreate';
 export * from './FieldAi';
 export * from './FieldChat';
 export * from './AIDisclaimer';
+export * from './FieldName';
+export * from './FieldDescription';

package/dist/cjs/components/index.js

@@ -19,3 +19,5 @@ __exportStar(require("./SelectCreate"), exports);
 __exportStar(require("./FieldAi"), exports);
 __exportStar(require("./FieldChat"), exports);
 __exportStar(require("./AIDisclaimer"), exports);
+__exportStar(require("./FieldName"), exports);
+__exportStar(require("./FieldDescription"), exports);

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

@@ -1 +1,2 @@
 export * from './useOpen';
+export * from './useCustomFieldValidation';

package/dist/cjs/hooks/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useOpen"), exports);
+__exportStar(require("./useCustomFieldValidation"), exports);

package/dist/cjs/hooks/useCustomFieldValidation.d.ts

@@ -0,0 +1,12 @@
+import { AnySchema, ValidationError } from 'yup';
+export type UseFieldValidationProps = {
+    schema: AnySchema;
+};
+export declare const useCustomFieldValidation: ({ schema }: UseFieldValidationProps) => {
+    validate: (value: string) => {
+        error: null;
+    } | {
+        error: ValidationError;
+    };
+    validateRHF: (value: string) => string | true | undefined;
+};

package/dist/cjs/hooks/useCustomFieldValidation.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomFieldValidation = void 0;
+const react_1 = require("react");
+const yup_1 = require("yup");
+const useCustomFieldValidation = ({ schema }) => {
+    const validate = (0, react_1.useCallback)((value) => {
+        try {
+            schema.validateSync(value);
+            return { error: null };
+        }
+        catch (err) {
+            if (err instanceof yup_1.ValidationError) {
+                return { error: err };
+            }
+            return { error: null };
+        }
+    }, [schema]);
+    const validateRHF = (0, react_1.useCallback)((value) => {
+        try {
+            schema.validateSync(value);
+            return true;
+        }
+        catch (err) {
+            if (err instanceof yup_1.ValidationError)
+                return err.message;
+            return;
+        }
+    }, [schema]);
+    return { validate, validateRHF };
+};
+exports.useCustomFieldValidation = useCustomFieldValidation;

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

@@ -8,7 +8,7 @@ export type FieldAiProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder'
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
 }>;
-export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "placeholder" | "label" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
+export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
     /** Режим ввода sensitive данных (пароля, API ключей, токенов, etc) */
     secure?: boolean | "password";
     /** Колбек действия при отправке */
@@ -16,5 +16,5 @@ export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<Fie
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
 } & {
-    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/FieldAi/components/MobileFieldAi/MobileFieldAi.d.ts

@@ -1,5 +1,5 @@
 import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
-export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "placeholder" | "label" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
+export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
     onSubmit(): void;
     submitEnabled: boolean;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

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

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

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

@@ -0,0 +1,62 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { string } from 'yup';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldTextArea } from '@cloud-ru/uikit-product-mobile-fields';
+import { useCustomFieldValidation } from '../../hooks';
+import { FieldWithAddButton } from './components';
+import { DEFAULT_MAX_LENGTH } from './constants';
+/**
+ * Поле описание c локальным стейтом и валидацией
+ */
+export const FieldDescription = forwardRef((_a, ref) => {
+    var _b;
+    var { size = 'm', required = false, maxLength = DEFAULT_MAX_LENGTH, customSchema, resizable = true, addButton, onValidationError } = _a, props = __rest(_a, ["size", "required", "maxLength", "customSchema", "resizable", "addButton", "onValidationError"]);
+    const { t } = useLocale('FieldsPredefined');
+    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 [value, setValue] = useState('');
+    const [error, setError] = useState(null);
+    const handleChange = (newValue) => {
+        var _a;
+        setValue(newValue);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+        const result = validate(newValue);
+        setError(result.error);
+        onValidationError === null || onValidationError === void 0 ? void 0 : onValidationError(result.error);
+    };
+    const handleBlur = (newValue) => {
+        var _a;
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+        const result = validate(value);
+        setError(result.error);
+        onValidationError === null || onValidationError === void 0 ? void 0 : onValidationError(result.error);
+    };
+    const errorMes = (_b = props.error) !== null && _b !== void 0 ? _b : error === null || error === void 0 ? void 0 : error.message;
+    const standaloneComponent = (_jsx(AdaptiveFieldTextArea, Object.assign({}, props, { resizable: resizable, label: t('FieldDescription.label'), inputMode: 'text', ref: mergeRefs(ref, textareaRef), size: size, maxLength: maxLength, value: value, onChange: handleChange, onBlur: handleBlur, validationState: errorMes ? 'error' : props.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,11 @@
+/**
+ * Поле описание c оберткой для React Hook Form
+ */
+export declare const FieldDescriptionRHF: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/uikit-product-mobile-fields").FieldTextAreaProps, "name" | "caption" | "label" | "hint" | "placeholder" | "inputMode" | "searchPlaceholder" | "footer"> & {
+    customSchema?: import("yup").StringSchema;
+    addButton?: boolean;
+} & {
+    controllerProps: Omit<import("react-hook-form").ControllerProps<import("react-hook-form").FieldValues>, "render" | "rules" | "disabled">;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef } from 'react';
+import { Controller } from 'react-hook-form';
+import { string } from 'yup';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldTextArea } from '@cloud-ru/uikit-product-mobile-fields';
+import { useCustomFieldValidation } from '../../hooks';
+import { FieldWithAddButton } from './components/FieldWithAddButton';
+import { DEFAULT_MAX_LENGTH } from './constants';
+/**
+ * Поле описание c оберткой для React Hook Form
+ */
+export const FieldDescriptionRHF = forwardRef((_a, ref) => {
+    var { controllerProps, customSchema, size = 'm', required = false, maxLength = DEFAULT_MAX_LENGTH, addButton, resizable = true } = _a, props = __rest(_a, ["controllerProps", "customSchema", "size", "required", "maxLength", "addButton", "resizable"]);
+    const { t } = useLocale('FieldsPredefined');
+    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, Object.assign({}, controllerProps, { rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            var _a;
+            const errorMes = (_a = props.error) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.message;
+            return (_jsx(AdaptiveFieldTextArea, Object.assign({}, props, { resizable: resizable, size: size, label: t('FieldDescription.label'), inputMode: 'text', ref: mergeRefs(ref, localRef, textareaRef), maxLength: maxLength, value: value, onChange: newValue => {
+                    var _a;
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+                    onChange(newValue);
+                }, onBlur: value => {
+                    var _a;
+                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, value);
+                    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 { RefObject } from 'react';
+import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+export declare function FieldWithAddButton({ children, size, autoFocusRef, }: {
+    children: React.ReactNode;
+    size?: FieldTextAreaProps['size'];
+    autoFocusRef: RefObject<HTMLTextAreaElement | null>;
+}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonFunction } from '@snack-uikit/button';
+export function FieldWithAddButton({ children, size, autoFocusRef, }) {
+    const { t } = useLocale('FieldsPredefined');
+    const [showField, setShowField] = useState(false);
+    useEffect(() => {
+        if (showField && autoFocusRef.current) {
+            autoFocusRef.current.focus();
+        }
+    }, [showField, autoFocusRef]);
+    if (showField) {
+        return children;
+    }
+    return (_jsx("div", { children: !showField && (_jsx(ButtonFunction, { icon: _jsx(PlusSVG, {}), iconPosition: 'before', label: t('FieldDescription.addButton'), onClick: () => setShowField(true), size: size })) }));
+}

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

@@ -0,0 +1 @@
+export { FieldWithAddButton } from './FieldWithAddButton';

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

@@ -0,0 +1 @@
+export { FieldWithAddButton } from './FieldWithAddButton';

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 { FieldDescription } from './FieldDescription';
+export { FieldDescriptionRHF } from './FieldDescriptionRHF';
+export type { FieldDescriptionProps, FieldDescriptionPropsBase, FieldDescriptionRHFProps } from './types';

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

@@ -0,0 +1,2 @@
+export { FieldDescription } from './FieldDescription';
+export { FieldDescriptionRHF } from './FieldDescriptionRHF';

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

@@ -0,0 +1,16 @@
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+export type FieldDescriptionPropsBase = Omit<FieldTextAreaProps, 'placeholder' | 'label' | 'footer' | 'searchPlaceholder' | 'hint' | 'inputMode' | 'caption' | 'name'> & {
+    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/FieldName/FieldName.d.ts

@@ -0,0 +1,12 @@
+import { ValidationError } from 'yup';
+/**
+ * Поле имя c локальным стейтом и валидацией
+ */
+export declare const FieldName: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/uikit-product-mobile-fields").FieldTextProps, "type" | "caption" | "label" | "hint" | "placeholder" | "inputMode" | "footer"> & {
+    showLabel?: boolean;
+    customSchema?: import("yup").StringSchema;
+} & {
+    onValidationError?: (error: ValidationError | null) => void;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { string } from 'yup';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldText } from '@cloud-ru/uikit-product-mobile-fields';
+import { runAfterRerender } from '@snack-uikit/input-private';
+import { useCustomFieldValidation } from '../../hooks';
+import { DEFAULT_MAX_NAME_LENGTH } from './constants';
+/**
+ * Поле имя c локальным стейтом и валидацией
+ */
+export const FieldName = forwardRef((props, ref) => {
+    const { t } = useLocale('FieldsPredefined');
+    const { value: propValue = '', onChange: propOnChange, onBlur: propOnBlur, error: propError, maxLength = DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, allowMoreThanMaxLength = true, size = 'm' } = props, inputProps = __rest(props, ["value", "onChange", "onBlur", "error", "maxLength", "required", "customSchema", "showLabel", "allowMoreThanMaxLength", "size"]);
+    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 === null || validationError === void 0 ? void 0 : validationError.message);
+    const isRequiredError = currentError === null || currentError === void 0 ? void 0 : 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 === null || propOnChange === void 0 ? void 0 : propOnChange(newValue);
+    };
+    const handleBlur = (e) => {
+        var _a;
+        runAfterRerender(() => setIsFocused(false));
+        const result = validate(currentValue);
+        setValidationError(result.error);
+        (_a = props.onValidationError) === null || _a === void 0 ? void 0 : _a.call(props, result.error);
+        propOnBlur === null || propOnBlur === void 0 ? void 0 : propOnBlur(e);
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+    };
+    const handleClear = () => {
+        var _a;
+        const result = validate('');
+        setValidationError(result.error);
+        (_a = props.onValidationError) === null || _a === void 0 ? void 0 : _a.call(props, result.error);
+    };
+    const shouldShowCounter = currentError && ((currentError === null || currentError === void 0 ? void 0 : currentError.match(t('FieldName.maxSymbols', { max: maxLength }))) || isRequiredError);
+    // Ошибка обязательного поля появляется после blur
+    const showError = currentError && ((isRequiredError && !isFocused) || !isRequiredError);
+    return (_jsx(AdaptiveFieldText, Object.assign({}, 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, caption: !required ? t('FieldDescription.optional') : undefined })));
+});

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

@@ -0,0 +1,11 @@
+/**
+ * Поле имя c оберткой для React Hook Form
+ */
+export declare const FieldNameRHF: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/uikit-product-mobile-fields").FieldTextProps, "type" | "caption" | "label" | "hint" | "placeholder" | "inputMode" | "footer"> & {
+    showLabel?: boolean;
+    customSchema?: import("yup").StringSchema;
+} & {
+    controllerProps: Omit<import("react-hook-form").ControllerProps<import("react-hook-form").FieldValues>, "render" | "rules" | "disabled">;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
+} & import("react").RefAttributes<HTMLInputElement>>;