@gravity-ui/dynamic-forms 2.7.2 → 2.8.0

package/build/cjs/lib/core/components/Form/DynamicField.js

@@ -9,7 +9,7 @@ const helpers_1 = require("../../helpers");
 const Controller_1 = require("./Controller");
 const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
-const DynamicField = ({ name, spec, config, Monaco, search, withoutInsertFFDebounce, __mirror, }) => {
+const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, __mirror, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const SearchContext = (0, hooks_1.useCreateSearchContext)();
     const { tools, store } = (0, hooks_1.useStore)(name);
@@ -18,9 +18,10 @@ const DynamicField = ({ name, spec, config, Monaco, search, withoutInsertFFDebou
     const context = react_1.default.useMemo(() => ({
         config,
         Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
+        generateRandomValue,
         tools,
         __mirror,
-    }), [tools, config, Monaco, __mirror]);
+    }), [tools, config, Monaco, __mirror, generateRandomValue]);
     const searchContext = react_1.default.useMemo(() => ({
         setField,
         removeField,

package/build/cjs/lib/core/components/Form/constants.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OBJECT_ARRAY_CNT = exports.OBJECT_ARRAY_FLAG = void 0;
+exports.SPEC_TYPE_FOR_GENERATE_BUTTON = exports.OBJECT_ARRAY_CNT = exports.OBJECT_ARRAY_FLAG = void 0;
 exports.OBJECT_ARRAY_FLAG = '____arr-obj';
 exports.OBJECT_ARRAY_CNT = '____arr-obj-cnt';
+exports.SPEC_TYPE_FOR_GENERATE_BUTTON = ['base', 'password', 'textarea'];

package/build/cjs/lib/core/components/Form/hooks/index.js

@@ -7,6 +7,7 @@ tslib_1.__exportStar(require("./useCreateContext"), exports);
 tslib_1.__exportStar(require("./useDynamicFieldMirror"), exports);
 tslib_1.__exportStar(require("./useDynamicFormsCtx"), exports);
 tslib_1.__exportStar(require("./useField"), exports);
+tslib_1.__exportStar(require("./useGenerateRandomValue"), exports);
 tslib_1.__exportStar(require("./useIntegrationFF"), exports);
 tslib_1.__exportStar(require("./useRender"), exports);
 tslib_1.__exportStar(require("./useStore"), exports);

package/build/cjs/lib/core/components/Form/hooks/useGenerateRandomValue.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGenerateRandomValue = void 0;
+const useDynamicFormsCtx_1 = require("./useDynamicFormsCtx");
+const useGenerateRandomValue = () => (0, useDynamicFormsCtx_1.useDynamicFormsCtx)().generateRandomValue;
+exports.useGenerateRandomValue = useGenerateRandomValue;

package/build/cjs/lib/core/components/Form/utils/common.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isArrayItem = exports.transformArrOut = exports.transformArrIn = exports.isCorrectConfig = void 0;
+exports.withGenerateButton = exports.isArrayItem = exports.transformArrOut = exports.transformArrIn = exports.isCorrectConfig = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const constants_1 = require("../../../constants");
+const helpers_1 = require("../../../helpers");
 const constants_2 = require("../constants");
 const isCorrectConfig = (candidate) => Object.values(constants_1.SpecTypes).every((type) => lodash_1.default.isObjectLike(candidate) &&
     lodash_1.default.isObjectLike(candidate[type]) &&
@@ -49,3 +50,7 @@ const transformArrOut = (value) => {
 exports.transformArrOut = transformArrOut;
 const isArrayItem = (name) => name[name.length - 1] === '>';
 exports.isArrayItem = isArrayItem;
+const withGenerateButton = (spec) => (0, helpers_1.isStringSpec)(spec) &&
+    constants_2.SPEC_TYPE_FOR_GENERATE_BUTTON.includes(spec.viewSpec.type) &&
+    spec.viewSpec.generateRandomValueButton;
+exports.withGenerateButton = withGenerateButton;

package/build/cjs/lib/kit/components/ErrorWrapper/ErrorWrapper.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('error-wrapper');
-const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, }) => {
+const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, className, }) => {
     const error = react_1.default.useMemo(() => {
         if ((meta.touched || meta.submitFailed) && meta.error) {
             return meta.error;
@@ -13,7 +13,7 @@ const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, }) => {
         return;
     }, [meta.touched, meta.submitFailed, meta.error]);
     const props = react_1.default.useMemo(() => (meta.error ? { 'data-form-error': true, 'data-form-error-name': name } : {}), [meta.error, name]);
-    return (react_1.default.createElement("span", Object.assign({ className: b({ error: !withoutChildErrorStyles && Boolean(error) }) }, props),
+    return (react_1.default.createElement("span", Object.assign({ className: b({ error: !withoutChildErrorStyles && Boolean(error) }, className) }, props),
         children,
         error && typeof error === 'string' ? (react_1.default.createElement("div", { className: b('error-text') }, error)) : null));
 };

package/build/cjs/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.css

@@ -0,0 +1,3 @@
+.df-generate-random-value-button {
+  margin-left: 8px;
+}

package/build/cjs/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenerateRandomValueButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const hooks_1 = require("../../../core/components/Form/hooks");
+const i18n_1 = tslib_1.__importDefault(require("../../i18n"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('generate-random-value-button');
+const GenerateRandomValueButton = ({ spec, onChange, }) => {
+    const generateRandomValue = (0, hooks_1.useGenerateRandomValue)();
+    if (lodash_1.default.isFunction(generateRandomValue) && spec.viewSpec.generateRandomValueButton) {
+        return (react_1.default.createElement(uikit_1.Button, { onClick: () => onChange(generateRandomValue(spec)), className: b() }, (0, i18n_1.default)('button-generate')));
+    }
+    return null;
+};
+exports.GenerateRandomValueButton = GenerateRandomValueButton;

package/build/cjs/lib/kit/components/GenerateRandomValueButton/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./GenerateRandomValueButton"), exports);

package/build/cjs/lib/kit/components/Inputs/Text/Text.css

@@ -0,0 +1,6 @@
+.df-text {
+  display: flex;
+}
+.df-text__button {
+  --yc-button-background-color-hover: transparent;
+}

package/build/cjs/lib/kit/components/Inputs/Text/Text.js

@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('text');
 const Text = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
+    const [hideValue, setHideValue] = react_1.default.useState(spec.viewSpec.type === 'password');
     const handleChange = react_1.default.useCallback((value) => {
         onChange(value);
     }, [onChange, spec]);
@@ -16,6 +20,21 @@ const Text = ({ name, input, spec }) => {
         }
         return 'text';
     }, [spec.viewSpec.type]);
-    return (react_1.default.createElement(uikit_1.TextInput, { type: type, value: lodash_1.default.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined, qa: name }));
+    const additionalRightContent = react_1.default.useMemo(() => {
+        if (type === 'password') {
+            const onClick = () => {
+                setHideValue((hideValue) => !hideValue);
+            };
+            return (react_1.default.createElement("div", { className: b() },
+                input.value ? (react_1.default.createElement(uikit_1.CopyToClipboard, { text: String(value), timeout: 500 }, (state) => (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('button'), size: "s" },
+                    react_1.default.createElement(uikit_1.Icon, { size: 14, data: state === uikit_1.CopyToClipboardStatus.Pending
+                            ? icons_1.Copy
+                            : icons_1.CopyCheck }))))) : null,
+                react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: onClick, className: b('button'), size: "s" },
+                    react_1.default.createElement(uikit_1.Icon, { data: hideValue ? icons_1.Eye : icons_1.EyeSlash, size: 14 }))));
+        }
+        return undefined;
+    }, [hideValue, input.value, type, value]);
+    return (react_1.default.createElement(uikit_1.TextInput, { type: hideValue ? 'password' : 'text', value: lodash_1.default.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined, qa: name, rightContent: additionalRightContent }));
 };
 exports.Text = Text;

package/build/cjs/lib/kit/components/Layouts/Row/Row.css

@@ -7,10 +7,6 @@
 .df-row:last-child {
   margin-bottom: 0;
 }
-.df-row_extra-width {
-  width: 533px;
-  max-width: 533px;
-}
 .df-row__left {
   width: 180px;
   min-height: 28px;
@@ -70,4 +66,7 @@
 }
 .df-row__required-mark {
   color: var(--yc-color-text-danger);
+}
+.df-row__error-wrapper {
+  min-width: 100%;
 }

package/build/cjs/lib/kit/components/Layouts/Row/Row.js

@@ -12,7 +12,8 @@ const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('row');
 const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
     const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
-    return (react_1.default.createElement("div", { className: b({ 'extra-width': (0, core_1.isArraySpec)(spec) || arrayItem }) },
+    const generateButton = react_1.default.useMemo(() => (0, core_1.withGenerateButton)(spec), [spec]);
+    return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("div", { className: b('left-inner') },
                 react_1.default.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
@@ -21,7 +22,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                         react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },
-                react_1.default.createElement(components_2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
+                react_1.default.createElement(components_2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec), className: b('error-wrapper') }, children),
+                generateButton ? (react_1.default.createElement(components_2.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
                 arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null),
             verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));

package/build/cjs/lib/kit/components/Layouts/Row2/Row2.js

@@ -10,6 +10,7 @@ const components_1 = require("../../../components");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('row2');
 const Row2 = ({ name, spec, input, meta, children, }) => {
+    const generateButton = react_1.default.useMemo(() => (0, core_1.withGenerateButton)(spec), [spec]);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("div", { className: b('title') },
@@ -18,6 +19,7 @@ const Row2 = ({ name, spec, input, meta, children, }) => {
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },
                 react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
+                generateButton ? (react_1.default.createElement(components_1.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
                 (0, core_1.isArrayItem)(name) ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null),
             spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));

package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.js

@@ -11,6 +11,7 @@ const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('transparent');
 const Transparent = ({ name, spec, input, meta, children, }) => {
     const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
+    const generateButton = react_1.default.useMemo(() => (0, core_1.withGenerateButton)(spec), [spec]);
     const arrOrObjFlag = react_1.default.useMemo(() => (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec), [spec]);
     const removeButton = react_1.default.useMemo(() => {
         if (arrayItem) {
@@ -24,6 +25,7 @@ const Transparent = ({ name, spec, input, meta, children, }) => {
             'without-max-width': arrOrObjFlag,
         }) },
         react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, children),
+        generateButton ? (react_1.default.createElement(components_1.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
         removeButton));
 };
 exports.Transparent = Transparent;

package/build/cjs/lib/kit/components/index.js

@@ -5,6 +5,7 @@ tslib_1.__exportStar(require("./AccordeonCard"), exports);
 tslib_1.__exportStar(require("./Card"), exports);
 tslib_1.__exportStar(require("./CopyButton"), exports);
 tslib_1.__exportStar(require("./ErrorWrapper"), exports);
+tslib_1.__exportStar(require("./GenerateRandomValueButton"), exports);
 tslib_1.__exportStar(require("./GroupIndent"), exports);
 tslib_1.__exportStar(require("./Inputs"), exports);
 tslib_1.__exportStar(require("./Layouts"), exports);

package/build/cjs/lib/kit/i18n/en.json

@@ -44,5 +44,6 @@
   "label_delete": "Delete",
   "button_cancel": "Close",
   "button-upload_file": "Upload file",
-  "label-data_loaded": "Data uploaded"
+  "label-data_loaded": "Data uploaded",
+  "button-generate": "Generate"
 }

package/build/cjs/lib/kit/i18n/ru.json

@@ -44,5 +44,6 @@
   "label_delete": "Удалить",
   "button_cancel": "Закрыть",
   "button-upload_file": "Загрузить файл",
-  "label-data_loaded": "Данные загружены"
+  "label-data_loaded": "Данные загружены",
+  "button-generate": "Сгенерировать"
 }

package/build/esm/lib/core/components/Form/DynamicField.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { Spec } from '../../types';
+import { Spec, StringSpec } from '../../types';
 import { DynamicFormConfig, FieldValue, WonderMirror } from './types';
 export interface DynamicFieldProps {
     name: string;
@@ -8,6 +8,7 @@ export interface DynamicFieldProps {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
     search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
+    generateRandomValue?: (spec: StringSpec) => string;
     withoutInsertFFDebounce?: boolean;
     __mirror?: WonderMirror;
 }

package/build/esm/lib/core/components/Form/DynamicField.js

@@ -5,7 +5,7 @@ import { isCorrectSpec } from '../../helpers';
 import { Controller } from './Controller';
 import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useIntegrationFF, useSearchStore, useStore, } from './hooks';
 import { getDefaultSearchFunction, isCorrectConfig } from './utils';
-export const DynamicField = ({ name, spec, config, Monaco, search, withoutInsertFFDebounce, __mirror, }) => {
+export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, __mirror, }) => {
     const DynamicFormsCtx = useCreateContext();
     const SearchContext = useCreateSearchContext();
     const { tools, store } = useStore(name);
@@ -14,9 +14,10 @@ export const DynamicField = ({ name, spec, config, Monaco, search, withoutInsert
     const context = React.useMemo(() => ({
         config,
         Monaco: isValidElementType(Monaco) ? Monaco : undefined,
+        generateRandomValue,
         tools,
         __mirror,
-    }), [tools, config, Monaco, __mirror]);
+    }), [tools, config, Monaco, __mirror, generateRandomValue]);
     const searchContext = React.useMemo(() => ({
         setField,
         removeField,

package/build/esm/lib/core/components/Form/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const OBJECT_ARRAY_FLAG = "____arr-obj";
 export declare const OBJECT_ARRAY_CNT = "____arr-obj-cnt";
+export declare const SPEC_TYPE_FOR_GENERATE_BUTTON: string[];

package/build/esm/lib/core/components/Form/constants.js

@@ -1,2 +1,3 @@
 export const OBJECT_ARRAY_FLAG = '____arr-obj';
 export const OBJECT_ARRAY_CNT = '____arr-obj-cnt';
+export const SPEC_TYPE_FOR_GENERATE_BUTTON = ['base', 'password', 'textarea'];

package/build/esm/lib/core/components/Form/hooks/index.d.ts

@@ -4,6 +4,7 @@ export * from './useCreateContext';
 export * from './useDynamicFieldMirror';
 export * from './useDynamicFormsCtx';
 export * from './useField';
+export * from './useGenerateRandomValue';
 export * from './useIntegrationFF';
 export * from './useRender';
 export * from './useStore';

package/build/esm/lib/core/components/Form/hooks/index.js

@@ -4,6 +4,7 @@ export * from './useCreateContext';
 export * from './useDynamicFieldMirror';
 export * from './useDynamicFormsCtx';
 export * from './useField';
+export * from './useGenerateRandomValue';
 export * from './useIntegrationFF';
 export * from './useRender';
 export * from './useStore';

package/build/esm/lib/core/components/Form/hooks/useGenerateRandomValue.d.ts

@@ -0,0 +1 @@
+export declare const useGenerateRandomValue: () => ((spec: import("../../..").StringSpec<any>) => string) | undefined;

package/build/esm/lib/core/components/Form/hooks/useGenerateRandomValue.js

@@ -0,0 +1,2 @@
+import { useDynamicFormsCtx } from './useDynamicFormsCtx';
+export const useGenerateRandomValue = () => useDynamicFormsCtx().generateRandomValue;

package/build/esm/lib/core/components/Form/types/context.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
+import { StringSpec } from '../../../types';
 import { DynamicFormConfig, FieldValue, ValidateError, WonderMirror } from './';
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
+    generateRandomValue?: (spec: StringSpec) => string;
     tools: {
         initialValue: FieldValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;

package/build/esm/lib/core/components/Form/utils/common.d.ts

@@ -1,5 +1,6 @@
-import { FormValue } from '../../../types';
+import { FormValue, Spec } from '../../../types';
 export declare const isCorrectConfig: (candidate: any) => boolean;
 export declare const transformArrIn: <Type extends FormValue, ReturnType_1 extends FormValue = Type>(value: Type) => ReturnType_1;
 export declare const transformArrOut: <Type extends FormValue, ReturnType_1 extends FormValue = Type>(value: Type) => ReturnType_1;
 export declare const isArrayItem: (name: string) => boolean;
+export declare const withGenerateButton: (spec: Spec) => boolean | undefined;

package/build/esm/lib/core/components/Form/utils/common.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { SpecTypes } from '../../../constants';
-import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
+import { isStringSpec } from '../../../helpers';
+import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, SPEC_TYPE_FOR_GENERATE_BUTTON } from '../constants';
 export const isCorrectConfig = (candidate) => Object.values(SpecTypes).every((type) => _.isObjectLike(candidate) &&
     _.isObjectLike(candidate[type]) &&
     _.isObjectLike(candidate[type].inputs) &&
@@ -41,3 +42,6 @@ export const transformArrOut = (value) => {
     return value;
 };
 export const isArrayItem = (name) => name[name.length - 1] === '>';
+export const withGenerateButton = (spec) => isStringSpec(spec) &&
+    SPEC_TYPE_FOR_GENERATE_BUTTON.includes(spec.viewSpec.type) &&
+    spec.viewSpec.generateRandomValueButton;

package/build/esm/lib/core/types/specs.d.ts

@@ -145,6 +145,7 @@ export interface StringSpec<LinkType = any> {
             filterPlaceholder?: string;
             meta?: Record<string, string>;
         };
+        generateRandomValueButton?: boolean;
     };
 }
 export type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;

package/build/esm/lib/kit/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -6,5 +6,6 @@ export interface ErrorWrapperProps {
     name: string;
     meta: FieldRenderProps<FieldValue>['meta'];
     withoutChildErrorStyles?: boolean;
+    className?: string;
 }
 export declare const ErrorWrapper: React.FC<ErrorWrapperProps>;

package/build/esm/lib/kit/components/ErrorWrapper/ErrorWrapper.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { block } from '../../utils';
 import './ErrorWrapper.css';
 const b = block('error-wrapper');
-export const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, }) => {
+export const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, className, }) => {
     const error = React.useMemo(() => {
         if ((meta.touched || meta.submitFailed) && meta.error) {
             return meta.error;
@@ -10,7 +10,7 @@ export const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, })
         return;
     }, [meta.touched, meta.submitFailed, meta.error]);
     const props = React.useMemo(() => (meta.error ? { 'data-form-error': true, 'data-form-error-name': name } : {}), [meta.error, name]);
-    return (React.createElement("span", Object.assign({ className: b({ error: !withoutChildErrorStyles && Boolean(error) }) }, props),
+    return (React.createElement("span", Object.assign({ className: b({ error: !withoutChildErrorStyles && Boolean(error) }, className) }, props),
         children,
         error && typeof error === 'string' ? (React.createElement("div", { className: b('error-text') }, error)) : null));
 };

package/build/esm/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.css

@@ -0,0 +1,3 @@
+.df-generate-random-value-button {
+  margin-left: 8px;
+}

package/build/esm/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StringSpec } from '../../../core/types';
+import './GenerateRandomValueButton.css';
+interface GenerateRandomValueButtonProps {
+    spec: StringSpec;
+    onChange: (value: string) => void;
+}
+export declare const GenerateRandomValueButton: React.FC<GenerateRandomValueButtonProps>;
+export {};

package/build/esm/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { useGenerateRandomValue } from '../../../core/components/Form/hooks';
+import i18n from '../../i18n';
+import { block } from '../../utils';
+import './GenerateRandomValueButton.css';
+const b = block('generate-random-value-button');
+export const GenerateRandomValueButton = ({ spec, onChange, }) => {
+    const generateRandomValue = useGenerateRandomValue();
+    if (_.isFunction(generateRandomValue) && spec.viewSpec.generateRandomValueButton) {
+        return (React.createElement(Button, { onClick: () => onChange(generateRandomValue(spec)), className: b() }, i18n('button-generate')));
+    }
+    return null;
+};

package/build/esm/lib/kit/components/GenerateRandomValueButton/index.d.ts

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

package/build/esm/lib/kit/components/GenerateRandomValueButton/index.js

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

package/build/esm/lib/kit/components/Inputs/Text/Text.css

@@ -0,0 +1,6 @@
+.df-text {
+  display: flex;
+}
+.df-text__button {
+  --yc-button-background-color-hover: transparent;
+}

package/build/esm/lib/kit/components/Inputs/Text/Text.d.ts

@@ -1,2 +1,3 @@
 import { NumberInputProps, StringInputProps } from '../../../../core';
+import './Text.css';
 export declare const Text: <T extends NumberInputProps | StringInputProps>({ name, input, spec }: T) => JSX.Element;

package/build/esm/lib/kit/components/Inputs/Text/Text.js

@@ -1,8 +1,13 @@
 import React from 'react';
-import { TextInput } from '@gravity-ui/uikit';
+import { Copy, CopyCheck, Eye, EyeSlash } from '@gravity-ui/icons';
+import { Button, CopyToClipboard, CopyToClipboardStatus, Icon, TextInput } from '@gravity-ui/uikit';
 import _ from 'lodash';
+import { block } from '../../../utils';
+import './Text.css';
+const b = block('text');
 export const Text = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
+    const [hideValue, setHideValue] = React.useState(spec.viewSpec.type === 'password');
     const handleChange = React.useCallback((value) => {
         onChange(value);
     }, [onChange, spec]);
@@ -12,5 +17,20 @@ export const Text = ({ name, input, spec }) => {
         }
         return 'text';
     }, [spec.viewSpec.type]);
-    return (React.createElement(TextInput, { type: type, value: _.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined, qa: name }));
+    const additionalRightContent = React.useMemo(() => {
+        if (type === 'password') {
+            const onClick = () => {
+                setHideValue((hideValue) => !hideValue);
+            };
+            return (React.createElement("div", { className: b() },
+                input.value ? (React.createElement(CopyToClipboard, { text: String(value), timeout: 500 }, (state) => (React.createElement(Button, { view: "flat-secondary", className: b('button'), size: "s" },
+                    React.createElement(Icon, { size: 14, data: state === CopyToClipboardStatus.Pending
+                            ? Copy
+                            : CopyCheck }))))) : null,
+                React.createElement(Button, { view: "flat-secondary", onClick: onClick, className: b('button'), size: "s" },
+                    React.createElement(Icon, { data: hideValue ? Eye : EyeSlash, size: 14 }))));
+        }
+        return undefined;
+    }, [hideValue, input.value, type, value]);
+    return (React.createElement(TextInput, { type: hideValue ? 'password' : 'text', value: _.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined, qa: name, rightContent: additionalRightContent }));
 };

package/build/esm/lib/kit/components/Layouts/Row/Row.css

@@ -7,10 +7,6 @@
 .df-row:last-child {
   margin-bottom: 0;
 }
-.df-row_extra-width {
-  width: 533px;
-  max-width: 533px;
-}
 .df-row__left {
   width: 180px;
   min-height: 28px;
@@ -70,4 +66,7 @@
 }
 .df-row__required-mark {
   color: var(--yc-color-text-danger);
+}
+.df-row__error-wrapper {
+  min-width: 100%;
 }

package/build/esm/lib/kit/components/Layouts/Row/Row.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
-import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
-import { ErrorWrapper } from '../../../components';
+import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
+import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { block } from '../../../utils';
 import './Row.css';
 const b = block('row');
 const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
-    return (React.createElement("div", { className: b({ 'extra-width': isArraySpec(spec) || arrayItem }) },
+    const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
+    return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement("div", { className: b('left-inner') },
                 React.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
@@ -18,7 +19,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                         React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
-                React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
+                React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec), className: b('error-wrapper') }, children),
+                generateButton ? (React.createElement(GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
                 arrayItem ? (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     React.createElement(Icon, { data: TrashBin, size: 16 }))) : null),
             verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));

package/build/esm/lib/kit/components/Layouts/Row2/Row2.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
-import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
-import { ErrorWrapper } from '../../../components';
+import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
+import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { block } from '../../../utils';
 import './Row2.css';
 const b = block('row2');
 export const Row2 = ({ name, spec, input, meta, children, }) => {
+    const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement("div", { className: b('title') },
@@ -15,6 +16,7 @@ export const Row2 = ({ name, spec, input, meta, children, }) => {
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
+                generateButton ? (React.createElement(GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
                 isArrayItem(name) ? (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     React.createElement(Icon, { data: TrashBin, size: 16 }))) : null),
             spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
-import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
-import { ErrorWrapper } from '../../../components';
+import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
+import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { block } from '../../../utils';
 import './Transparent.css';
 const b = block('transparent');
 export const Transparent = ({ name, spec, input, meta, children, }) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
     const arrOrObjFlag = React.useMemo(() => isArraySpec(spec) || isObjectSpec(spec), [spec]);
     const removeButton = React.useMemo(() => {
         if (arrayItem) {
@@ -21,5 +22,6 @@ export const Transparent = ({ name, spec, input, meta, children, }) => {
             'without-max-width': arrOrObjFlag,
         }) },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, children),
+        generateButton ? (React.createElement(GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
         removeButton));
 };

package/build/esm/lib/kit/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './AccordeonCard';
 export * from './Card';
 export * from './CopyButton';
 export * from './ErrorWrapper';
+export * from './GenerateRandomValueButton';
 export * from './GroupIndent';
 export * from './Inputs';
 export * from './Layouts';

package/build/esm/lib/kit/components/index.js

@@ -2,6 +2,7 @@ export * from './AccordeonCard';
 export * from './Card';
 export * from './CopyButton';
 export * from './ErrorWrapper';
+export * from './GenerateRandomValueButton';
 export * from './GroupIndent';
 export * from './Inputs';
 export * from './Layouts';

package/build/esm/lib/kit/i18n/en.json

@@ -44,5 +44,6 @@
   "label_delete": "Delete",
   "button_cancel": "Close",
   "button-upload_file": "Upload file",
-  "label-data_loaded": "Data uploaded"
+  "label-data_loaded": "Data uploaded",
+  "button-generate": "Generate"
 }

package/build/esm/lib/kit/i18n/ru.json

@@ -44,5 +44,6 @@
   "label_delete": "Удалить",
   "button_cancel": "Закрыть",
   "button-upload_file": "Загрузить файл",
-  "label-data_loaded": "Данные загружены"
+  "label-data_loaded": "Данные загружены",
+  "button-generate": "Сгенерировать"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -65,6 +65,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-is": "^17.0.3",
+    "@types/uuid": "^9.0.4",
     "css-loader": "^5.2.6",
     "eslint": "^8.27.0",
     "final-form": "^4.20.2",
@@ -82,6 +83,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
+    "randexp": "^0.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.3",
@@ -95,7 +97,8 @@
     "stylelint": "^14.15.0",
     "stylelint-scss": "^4.2.0",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^5.0.0",