@gravity-ui/dynamic-forms 3.0.1 → 3.2.0

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

@@ -2,10 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Controller = void 0;
 const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
-const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) => {
-    const { tools, __mirror } = (0, hooks_1.useDynamicFormsCtx)();
+const Controller = ({ spec: _spec, name, value, parentOnChange, parentOnUnmount, }) => {
+    const { tools, mutators, __mirror } = (0, hooks_1.useDynamicFormsCtx)();
+    const spec = react_1.default.useMemo(() => {
+        const specMutator = lodash_1.default.get(mutators.spec, name, constants_1.EMPTY_MUTATOR);
+        if (specMutator !== constants_1.EMPTY_MUTATOR) {
+            return lodash_1.default.merge(_spec, specMutator);
+        }
+        return _spec;
+    }, [_spec, mutators.spec, name]);
     const { inputEntity, Layout } = (0, hooks_1.useComponents)(spec);
     const render = (0, hooks_1.useRender)({ name, spec, inputEntity, Layout });
     const validate = (0, hooks_1.useValidate)(spec);
@@ -18,6 +27,7 @@ const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) =>
         tools,
         parentOnChange,
         parentOnUnmount,
+        mutators,
     });
     const withSearch = (0, hooks_1.useSearch)(spec, renderProps.input.value, name);
     (0, hooks_1.useControllerMirror)(name, {

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

@@ -9,19 +9,22 @@ 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, generateRandomValue, search, withoutInsertFFDebounce, __mirror, }) => {
+const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, mutators: externalMutators, __mirror, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const SearchContext = (0, hooks_1.useCreateSearchContext)();
     const { tools, store } = (0, hooks_1.useStore)(name);
     const watcher = (0, hooks_1.useIntegrationFF)(store, withoutInsertFFDebounce);
+    const { mutators, mutateDFState } = (0, hooks_1.useMutators)(externalMutators);
     const { store: searchStore, setField, removeField, isHiddenField } = (0, hooks_1.useSearchStore)();
     const context = react_1.default.useMemo(() => ({
         config,
         Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
         generateRandomValue,
-        tools,
+        tools: Object.assign(Object.assign({}, tools), { mutateDFState }),
+        store,
+        mutators,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue]);
+    }), [tools, config, Monaco, __mirror, generateRandomValue, mutators, mutateDFState, store]);
     const searchContext = react_1.default.useMemo(() => ({
         setField,
         removeField,

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SPEC_TYPE_FOR_GENERATE_BUTTON = exports.OBJECT_ARRAY_CNT = exports.OBJECT_ARRAY_FLAG = void 0;
+exports.EMPTY_MUTATOR = 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'];
+exports.EMPTY_MUTATOR = '____empty-mutator';

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

@@ -9,8 +9,11 @@ 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("./useMutateDFState"), exports);
+tslib_1.__exportStar(require("./useMutators"), exports);
 tslib_1.__exportStar(require("./useRender"), exports);
 tslib_1.__exportStar(require("./useStore"), exports);
+tslib_1.__exportStar(require("./useStoreValue"), exports);
 tslib_1.__exportStar(require("./useValidate"), exports);
 tslib_1.__exportStar(require("./useMonaco"), exports);
 tslib_1.__exportStar(require("./useSearchStore"), exports);

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

@@ -7,11 +7,15 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../../helpers");
 const constants_1 = require("../constants");
 const utils_1 = require("../utils");
-const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }) => {
+const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, mutators, }) => {
     const firstRenderRef = react_1.default.useRef(true);
     const validate = react_1.default.useCallback((value) => propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate((0, utils_1.transformArrOut)(value)), [propsValidate]);
     const [state, setState] = react_1.default.useState(() => {
+        const valueMutator = lodash_1.default.get(mutators.values, name, constants_1.EMPTY_MUTATOR);
         let value = lodash_1.default.cloneDeep(externalValue);
+        if ((0, utils_1.isValueMutatorCorrect)(valueMutator, spec) && valueMutator !== constants_1.EMPTY_MUTATOR) {
+            value = valueMutator;
+        }
         if (lodash_1.default.isNil(value)) {
             if (spec.defaultValue) {
                 value = (0, utils_1.transformArrIn)(spec.defaultValue);
@@ -27,7 +31,11 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
                 }
             }
         }
-        const error = validate === null || validate === void 0 ? void 0 : validate(value);
+        let errorMutator = lodash_1.default.get(mutators.errors, name);
+        if (!(0, utils_1.isErrorMutatorCorrect)(errorMutator)) {
+            errorMutator = undefined;
+        }
+        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || errorMutator;
         const dirty = !lodash_1.default.isEqual(value, initialValue);
         return {
             active: false,
@@ -43,11 +51,11 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
             childErrors: {},
         };
     });
-    const { onChange, onDrop } = react_1.default.useMemo(() => {
-        const onChange = (valOrSetter, childErrors) => {
+    const { onChange, onLocalChange, onDrop } = react_1.default.useMemo(() => {
+        const onLocalChange = (valOrSetter, childErrors, errorMutator) => {
             setState((state) => {
                 const _value = lodash_1.default.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
-                const error = validate === null || validate === void 0 ? void 0 : validate(_value);
+                const error = (validate === null || validate === void 0 ? void 0 : validate(_value)) || errorMutator;
                 let value = (0, utils_1.transformArrIn)(_value);
                 if ((0, helpers_1.isNumberSpec)(spec) && !error) {
                     value = (value ? Number(value) : undefined);
@@ -63,6 +71,7 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
                 return Object.assign(Object.assign({}, state), { dirty: !lodash_1.default.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: newChildErrors });
             });
         };
+        const onChange = (valOrSetter, childErrors) => onLocalChange(valOrSetter, childErrors);
         const onDrop = () => {
             if ((0, utils_1.isArrayItem)(name)) {
                 (externalParentOnUnmount ? externalParentOnUnmount : tools.onUnmount)(name);
@@ -71,7 +80,7 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
                 onChange(undefined, { [name]: false });
             }
         };
-        return { onChange, onDrop };
+        return { onChange, onLocalChange, onDrop };
     }, [initialValue, setState, name, validate, spec, externalParentOnUnmount, tools.onUnmount]);
     const onBlur = react_1.default.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
@@ -138,6 +147,24 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);
+    react_1.default.useEffect(() => {
+        if (!firstRenderRef.current) {
+            const valueMutator = lodash_1.default.get(mutators.values, name, constants_1.EMPTY_MUTATOR);
+            let errorMutator = lodash_1.default.get(mutators.errors, name);
+            if (!(0, utils_1.isErrorMutatorCorrect)(errorMutator)) {
+                errorMutator = undefined;
+            }
+            if ((0, utils_1.isValueMutatorCorrect)(valueMutator, spec) &&
+                valueMutator !== state.value &&
+                valueMutator !== constants_1.EMPTY_MUTATOR) {
+                onLocalChange(valueMutator, undefined, errorMutator);
+            }
+            else if (state.error !== errorMutator && !(state.error && !errorMutator)) {
+                setState(Object.assign(Object.assign({}, state), { error: errorMutator }));
+                (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: errorMutator }));
+            }
+        }
+    }, [mutators]);
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
         return () => {

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMutators = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const useMutators = (externalMutators) => {
+    const firstRenderRef = react_1.default.useRef(true);
+    const [store, setStore] = react_1.default.useState(externalMutators || {});
+    const mutateDFState = react_1.default.useCallback((mutators) => {
+        setStore((store) => (Object.assign(Object.assign(Object.assign(Object.assign({}, store), (mutators.errors ? { errors: lodash_1.default.merge(store.errors, mutators.errors) } : {})), (mutators.values ? { values: lodash_1.default.merge(store.values, mutators.values) } : {})), (mutators.spec ? { spec: lodash_1.default.merge(store.spec, mutators.spec) } : {}))));
+    }, [setStore]);
+    react_1.default.useEffect(() => {
+        if (firstRenderRef.current) {
+            firstRenderRef.current = false;
+        }
+        else if (externalMutators) {
+            mutateDFState(externalMutators);
+        }
+    }, [externalMutators]);
+    return { mutators: store, mutateDFState };
+};
+exports.useMutators = useMutators;

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

@@ -7,14 +7,14 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_final_form_1 = require("react-final-form");
 const utils_1 = require("../utils");
 const useStore = (name) => {
-    const form = (0, react_final_form_1.useForm)();
+    const formState = (0, react_final_form_1.useFormState)();
     const firstRenderRef = react_1.default.useRef(true);
     const [store, setStore] = react_1.default.useState(() => {
         const values = (0, utils_1.transformArrIn)({
-            [name]: lodash_1.default.get(form.getState().values, name),
+            [name]: lodash_1.default.get(formState.values, name),
         });
         const initialValue = (0, utils_1.transformArrIn)({
-            [name]: lodash_1.default.get(form.getState().initialValues, name),
+            [name]: lodash_1.default.get(formState.initialValues, name),
         });
         return {
             name,
@@ -23,7 +23,7 @@ const useStore = (name) => {
             errors: {},
         };
     });
-    const submitFailed = form.getState().submitFailed;
+    const submitFailed = formState.submitFailed;
     const tools = react_1.default.useMemo(() => ({
         initialValue: store.initialValue,
         onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: lodash_1.default.set(Object.assign({}, store.values), name, lodash_1.default.clone(value)), errors: errors || {} }))),
@@ -33,10 +33,10 @@ const useStore = (name) => {
     react_1.default.useEffect(() => {
         if (!firstRenderRef.current) {
             const values = (0, utils_1.transformArrIn)({
-                [name]: lodash_1.default.get(form.getState().values, name),
+                [name]: lodash_1.default.get(formState.values, name),
             });
             const initialValue = (0, utils_1.transformArrIn)({
-                [name]: lodash_1.default.get(form.getState().initialValues, name),
+                [name]: lodash_1.default.get(formState.initialValues, name),
             });
             setStore({
                 name: name,

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

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

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

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStoreValue = exports.useMutateDFState = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./Controller"), exports);
 tslib_1.__exportStar(require("./DynamicField"), exports);
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useMutateDFState", { enumerable: true, get: function () { return hooks_1.useMutateDFState; } });
+Object.defineProperty(exports, "useStoreValue", { enumerable: true, get: function () { return hooks_1.useStoreValue; } });
 tslib_1.__exportStar(require("./types"), exports);
 tslib_1.__exportStar(require("./utils"), exports);

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

@@ -9,6 +9,7 @@ tslib_1.__exportStar(require("./field"), exports);
 tslib_1.__exportStar(require("./input"), exports);
 tslib_1.__exportStar(require("./layout"), exports);
 tslib_1.__exportStar(require("./mirror"), exports);
+tslib_1.__exportStar(require("./mutators"), exports);
 tslib_1.__exportStar(require("./number"), exports);
 tslib_1.__exportStar(require("./object"), exports);
 tslib_1.__exportStar(require("./store"), exports);

package/build/cjs/lib/core/components/Form/types/mutators.js

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withGenerateButton = exports.isArrayItem = exports.transformArrOut = exports.transformArrIn = exports.isCorrectConfig = void 0;
+exports.isValueMutatorCorrect = exports.isErrorMutatorCorrect = 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");
@@ -54,3 +54,7 @@ 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;
+const isErrorMutatorCorrect = (errorMutator) => lodash_1.default.isString(errorMutator) || lodash_1.default.isBoolean(errorMutator) || lodash_1.default.isUndefined(errorMutator);
+exports.isErrorMutatorCorrect = isErrorMutatorCorrect;
+const isValueMutatorCorrect = (valueMutator, spec) => typeof valueMutator === spec.type || (lodash_1.default.isArray(valueMutator) && spec.type === constants_1.SpecTypes.Array);
+exports.isValueMutatorCorrect = isValueMutatorCorrect;

package/build/cjs/lib/core/components/View/DynamicView.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicView = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_is_1 = require("react-is");
 const helpers_1 = require("../../helpers");
 const ViewController_1 = require("./ViewController");
@@ -12,7 +11,7 @@ const hooks_1 = require("./hooks");
 const DynamicView = ({ value, spec, config, Link, Monaco }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const context = react_1.default.useMemo(() => ({ config, value, Link, Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
-    if (lodash_1.default.isObjectLike(value) && (0, helpers_1.isCorrectSpec)(spec) && (0, helpers_2.isCorrectViewConfig)(config)) {
+    if ((0, helpers_1.isCorrectSpec)(spec) && (0, helpers_2.isCorrectViewConfig)(config)) {
         return (react_1.default.createElement(DynamicFormsCtx.Provider, { value: context },
             react_1.default.createElement(ViewController_1.ViewController, { spec: spec, name: "" })));
     }

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

@@ -3,38 +3,23 @@ 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 components_1 = require("@gravity-ui/components");
 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]);
-    const type = react_1.default.useMemo(() => {
-        if (spec.viewSpec.type === 'password') {
-            return 'password';
-        }
-        return 'text';
-    }, [spec.viewSpec.type]);
-    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 }));
+const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
+    const props = {
+        value: lodash_1.default.isNil(value) ? '' : `${value}`,
+        hasClear: true,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onUpdate: onChange,
+        disabled: spec.viewSpec.disabled,
+        placeholder: spec.viewSpec.placeholder,
+        qa: name,
+    };
+    if (spec.viewSpec.type === 'password') {
+        return (react_1.default.createElement(components_1.PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
+    }
+    return react_1.default.createElement(uikit_1.TextInput, Object.assign({}, props, { type: "text" }));
 };
 exports.Text = Text;

package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const utils_1 = require("../../../utils");
 const SimpleVerticalAccordeon_1 = require("../../SimpleVerticalAccordeon");
 const ViewAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = react_1.default.useState(true);
+    const [open, setOpen] = react_1.default.useState(lodash_1.default.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }

package/build/cjs/lib/kit/components/ViewLayouts/ViewCardAccordeon.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewCardAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const __1 = require("../");
 const utils_1 = require("../../utils");
 const ViewCardAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = react_1.default.useState(true);
+    const [open, setOpen] = react_1.default.useState(lodash_1.default.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;

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

@@ -7,4 +7,4 @@ export interface ControllerProps<Value extends FieldValue, SpecType extends Spec
     parentOnChange: ((childName: string, childValue: FieldValue, childErrors: Record<string, ValidateError>) => void) | null;
     parentOnUnmount: ((childName: string) => void) | null;
 }
-export declare const Controller: <Value extends FieldValue, SpecType extends Spec>({ spec, name, value, parentOnChange, parentOnUnmount, }: ControllerProps<Value, SpecType>) => JSX.Element | null;
+export declare const Controller: <Value extends FieldValue, SpecType extends Spec>({ spec: _spec, name, value, parentOnChange, parentOnUnmount, }: ControllerProps<Value, SpecType>) => JSX.Element | null;

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

@@ -1,7 +1,16 @@
+import React from 'react';
 import _ from 'lodash';
+import { EMPTY_MUTATOR } from './constants';
 import { useComponents, useControllerMirror, useDynamicFormsCtx, useField, useRender, useSearch, useValidate, } from './hooks';
-export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) => {
-    const { tools, __mirror } = useDynamicFormsCtx();
+export const Controller = ({ spec: _spec, name, value, parentOnChange, parentOnUnmount, }) => {
+    const { tools, mutators, __mirror } = useDynamicFormsCtx();
+    const spec = React.useMemo(() => {
+        const specMutator = _.get(mutators.spec, name, EMPTY_MUTATOR);
+        if (specMutator !== EMPTY_MUTATOR) {
+            return _.merge(_spec, specMutator);
+        }
+        return _spec;
+    }, [_spec, mutators.spec, name]);
     const { inputEntity, Layout } = useComponents(spec);
     const render = useRender({ name, spec, inputEntity, Layout });
     const validate = useValidate(spec);
@@ -14,6 +23,7 @@ export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount,
         tools,
         parentOnChange,
         parentOnUnmount,
+        mutators,
     });
     const withSearch = useSearch(spec, renderProps.input.value, name);
     useControllerMirror(name, {

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

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

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

@@ -3,21 +3,24 @@ import _ from 'lodash';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../helpers';
 import { Controller } from './Controller';
-import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useIntegrationFF, useSearchStore, useStore, } from './hooks';
+import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useIntegrationFF, useMutators, useSearchStore, useStore, } from './hooks';
 import { getDefaultSearchFunction, isCorrectConfig } from './utils';
-export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, __mirror, }) => {
+export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, mutators: externalMutators, __mirror, }) => {
     const DynamicFormsCtx = useCreateContext();
     const SearchContext = useCreateSearchContext();
     const { tools, store } = useStore(name);
     const watcher = useIntegrationFF(store, withoutInsertFFDebounce);
+    const { mutators, mutateDFState } = useMutators(externalMutators);
     const { store: searchStore, setField, removeField, isHiddenField } = useSearchStore();
     const context = React.useMemo(() => ({
         config,
         Monaco: isValidElementType(Monaco) ? Monaco : undefined,
         generateRandomValue,
-        tools,
+        tools: Object.assign(Object.assign({}, tools), { mutateDFState }),
+        store,
+        mutators,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue]);
+    }), [tools, config, Monaco, __mirror, generateRandomValue, mutators, mutateDFState, store]);
     const searchContext = React.useMemo(() => ({
         setField,
         removeField,

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

@@ -1,3 +1,4 @@
 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[];
+export declare const EMPTY_MUTATOR = "____empty-mutator";

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

@@ -1,3 +1,4 @@
 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'];
+export const EMPTY_MUTATOR = '____empty-mutator';

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

@@ -6,8 +6,11 @@ export * from './useDynamicFormsCtx';
 export * from './useField';
 export * from './useGenerateRandomValue';
 export * from './useIntegrationFF';
+export * from './useMutateDFState';
+export * from './useMutators';
 export * from './useRender';
 export * from './useStore';
+export * from './useStoreValue';
 export * from './useValidate';
 export * from './useMonaco';
 export * from './useSearchStore';

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

@@ -6,8 +6,11 @@ export * from './useDynamicFormsCtx';
 export * from './useField';
 export * from './useGenerateRandomValue';
 export * from './useIntegrationFF';
+export * from './useMutateDFState';
+export * from './useMutators';
 export * from './useRender';
 export * from './useStore';
+export * from './useStoreValue';
 export * from './useValidate';
 export * from './useMonaco';
 export * from './useSearchStore';

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

@@ -1,5 +1,5 @@
 import { Spec } from '../../../types';
-import { DynamicFormsContext, FieldRenderProps, FieldValue, ValidateError } from '../types';
+import { DynamicFormMutators, DynamicFormsContext, FieldRenderProps, FieldValue, ValidateError } from '../types';
 export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec> {
     name: string;
     spec: SpecType;
@@ -9,5 +9,6 @@ export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec>
     tools: DynamicFormsContext['tools'];
     parentOnChange: ((childName: string, childValue: FieldValue, childErrors: Record<string, ValidateError>) => void) | null;
     parentOnUnmount: ((childName: string) => void) | null;
+    mutators: DynamicFormMutators;
 }
-export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;
+export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, mutators, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;

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

@@ -1,13 +1,17 @@
 import React from 'react';
 import _ from 'lodash';
 import { isArraySpec, isNumberSpec, isObjectSpec } from '../../../helpers';
-import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
-import { isArrayItem, transformArrIn, transformArrOut } from '../utils';
-export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }) => {
+import { EMPTY_MUTATOR, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
+import { isArrayItem, isErrorMutatorCorrect, isValueMutatorCorrect, transformArrIn, transformArrOut, } from '../utils';
+export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, mutators, }) => {
     const firstRenderRef = React.useRef(true);
     const validate = React.useCallback((value) => propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate(transformArrOut(value)), [propsValidate]);
     const [state, setState] = React.useState(() => {
+        const valueMutator = _.get(mutators.values, name, EMPTY_MUTATOR);
         let value = _.cloneDeep(externalValue);
+        if (isValueMutatorCorrect(valueMutator, spec) && valueMutator !== EMPTY_MUTATOR) {
+            value = valueMutator;
+        }
         if (_.isNil(value)) {
             if (spec.defaultValue) {
                 value = transformArrIn(spec.defaultValue);
@@ -23,7 +27,11 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
                 }
             }
         }
-        const error = validate === null || validate === void 0 ? void 0 : validate(value);
+        let errorMutator = _.get(mutators.errors, name);
+        if (!isErrorMutatorCorrect(errorMutator)) {
+            errorMutator = undefined;
+        }
+        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || errorMutator;
         const dirty = !_.isEqual(value, initialValue);
         return {
             active: false,
@@ -39,11 +47,11 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
             childErrors: {},
         };
     });
-    const { onChange, onDrop } = React.useMemo(() => {
-        const onChange = (valOrSetter, childErrors) => {
+    const { onChange, onLocalChange, onDrop } = React.useMemo(() => {
+        const onLocalChange = (valOrSetter, childErrors, errorMutator) => {
             setState((state) => {
                 const _value = _.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
-                const error = validate === null || validate === void 0 ? void 0 : validate(_value);
+                const error = (validate === null || validate === void 0 ? void 0 : validate(_value)) || errorMutator;
                 let value = transformArrIn(_value);
                 if (isNumberSpec(spec) && !error) {
                     value = (value ? Number(value) : undefined);
@@ -59,6 +67,7 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
                 return Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: newChildErrors });
             });
         };
+        const onChange = (valOrSetter, childErrors) => onLocalChange(valOrSetter, childErrors);
         const onDrop = () => {
             if (isArrayItem(name)) {
                 (externalParentOnUnmount ? externalParentOnUnmount : tools.onUnmount)(name);
@@ -67,7 +76,7 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
                 onChange(undefined, { [name]: false });
             }
         };
-        return { onChange, onDrop };
+        return { onChange, onLocalChange, onDrop };
     }, [initialValue, setState, name, validate, spec, externalParentOnUnmount, tools.onUnmount]);
     const onBlur = React.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
@@ -134,6 +143,24 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);
+    React.useEffect(() => {
+        if (!firstRenderRef.current) {
+            const valueMutator = _.get(mutators.values, name, EMPTY_MUTATOR);
+            let errorMutator = _.get(mutators.errors, name);
+            if (!isErrorMutatorCorrect(errorMutator)) {
+                errorMutator = undefined;
+            }
+            if (isValueMutatorCorrect(valueMutator, spec) &&
+                valueMutator !== state.value &&
+                valueMutator !== EMPTY_MUTATOR) {
+                onLocalChange(valueMutator, undefined, errorMutator);
+            }
+            else if (state.error !== errorMutator && !(state.error && !errorMutator)) {
+                setState(Object.assign(Object.assign({}, state), { error: errorMutator }));
+                (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: errorMutator }));
+            }
+        }
+    }, [mutators]);
     React.useEffect(() => {
         firstRenderRef.current = false;
         return () => {

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

@@ -0,0 +1 @@
+export declare const useMutateDFState: () => (mutators: import("..").DynamicFormMutators) => void;

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

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

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

@@ -0,0 +1,5 @@
+import { DynamicFormMutators } from '../types';
+export declare const useMutators: (externalMutators?: DynamicFormMutators) => {
+    mutators: DynamicFormMutators;
+    mutateDFState: (mutators: DynamicFormMutators) => void;
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import _ from 'lodash';
+export const useMutators = (externalMutators) => {
+    const firstRenderRef = React.useRef(true);
+    const [store, setStore] = React.useState(externalMutators || {});
+    const mutateDFState = React.useCallback((mutators) => {
+        setStore((store) => (Object.assign(Object.assign(Object.assign(Object.assign({}, store), (mutators.errors ? { errors: _.merge(store.errors, mutators.errors) } : {})), (mutators.values ? { values: _.merge(store.values, mutators.values) } : {})), (mutators.spec ? { spec: _.merge(store.spec, mutators.spec) } : {}))));
+    }, [setStore]);
+    React.useEffect(() => {
+        if (firstRenderRef.current) {
+            firstRenderRef.current = false;
+        }
+        else if (externalMutators) {
+            mutateDFState(externalMutators);
+        }
+    }, [externalMutators]);
+    return { mutators: store, mutateDFState };
+};

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import _ from 'lodash';
-import { useForm } from 'react-final-form';
+import { useFormState } from 'react-final-form';
 import { transformArrIn } from '../utils';
 export const useStore = (name) => {
-    const form = useForm();
+    const formState = useFormState();
     const firstRenderRef = React.useRef(true);
     const [store, setStore] = React.useState(() => {
         const values = transformArrIn({
-            [name]: _.get(form.getState().values, name),
+            [name]: _.get(formState.values, name),
         });
         const initialValue = transformArrIn({
-            [name]: _.get(form.getState().initialValues, name),
+            [name]: _.get(formState.initialValues, name),
         });
         return {
             name,
@@ -19,7 +19,7 @@ export const useStore = (name) => {
             errors: {},
         };
     });
-    const submitFailed = form.getState().submitFailed;
+    const submitFailed = formState.submitFailed;
     const tools = React.useMemo(() => ({
         initialValue: store.initialValue,
         onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, _.clone(value)), errors: errors || {} }))),
@@ -29,10 +29,10 @@ export const useStore = (name) => {
     React.useEffect(() => {
         if (!firstRenderRef.current) {
             const values = transformArrIn({
-                [name]: _.get(form.getState().values, name),
+                [name]: _.get(formState.values, name),
             });
             const initialValue = transformArrIn({
-                [name]: _.get(form.getState().initialValues, name),
+                [name]: _.get(formState.initialValues, name),
             });
             setStore({
                 name: name,

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

@@ -0,0 +1 @@
+export declare const useStoreValue: () => import("..").DynamicFieldStore;

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

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

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

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
+export { useMutateDFState, useStoreValue } from './hooks';
 export * from './types';
 export * from './utils';

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

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
+export { useMutateDFState, useStoreValue } from './hooks';
 export * from './types';
 export * from './utils';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import { StringSpec } from '../../../types';
-import { DynamicFormConfig, FieldValue, ValidateError, WonderMirror } from './';
+import { DynamicFieldStore, DynamicFormConfig, DynamicFormMutators, FieldValue, ValidateError, WonderMirror } from './';
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
@@ -11,6 +11,9 @@ export interface DynamicFormsContext {
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
         onUnmount: (name: string) => void;
         submitFailed: boolean;
+        mutateDFState: (mutators: DynamicFormMutators) => void;
     };
+    store: DynamicFieldStore;
+    mutators: DynamicFormMutators;
     __mirror?: WonderMirror;
 }

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

@@ -6,6 +6,7 @@ export * from './field';
 export * from './input';
 export * from './layout';
 export * from './mirror';
+export * from './mutators';
 export * from './number';
 export * from './object';
 export * from './store';

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

@@ -6,6 +6,7 @@ export * from './field';
 export * from './input';
 export * from './layout';
 export * from './mirror';
+export * from './mutators';
 export * from './number';
 export * from './object';
 export * from './store';

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

@@ -0,0 +1,7 @@
+import { FormValue, Spec } from '../../../types';
+import { BaseValidateError } from './';
+export interface DynamicFormMutators {
+    errors?: Record<string, BaseValidateError>;
+    values?: Record<string, FormValue>;
+    spec?: Record<string, Partial<Spec>>;
+}

package/build/esm/lib/core/components/Form/types/mutators.js

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

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

@@ -1,6 +1,9 @@
 import { FormValue, Spec } from '../../../types';
+import { ValidateError } 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;
+export declare const isErrorMutatorCorrect: (errorMutator: ValidateError) => boolean;
+export declare const isValueMutatorCorrect: (valueMutator: FormValue, spec: Spec) => boolean;

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

@@ -45,3 +45,5 @@ 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;
+export const isErrorMutatorCorrect = (errorMutator) => _.isString(errorMutator) || _.isBoolean(errorMutator) || _.isUndefined(errorMutator);
+export const isValueMutatorCorrect = (valueMutator, spec) => typeof valueMutator === spec.type || (_.isArray(valueMutator) && spec.type === SpecTypes.Array);

package/build/esm/lib/core/components/View/DynamicView.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { AnyObject, FormValue, Spec } from '../../types';
+import { FormValue, Spec } from '../../types';
 import { DynamicViewConfig } from './types';
 export interface DynamicViewProps {
-    value: AnyObject;
+    value: FormValue;
     spec: Spec;
     config: DynamicViewConfig;
     Link?: React.ComponentType<{

package/build/esm/lib/core/components/View/DynamicView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../helpers';
 import { ViewController } from './ViewController';
@@ -8,7 +7,7 @@ import { useCreateContext } from './hooks';
 export const DynamicView = ({ value, spec, config, Link, Monaco }) => {
     const DynamicFormsCtx = useCreateContext();
     const context = React.useMemo(() => ({ config, value, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
-    if (_.isObjectLike(value) && isCorrectSpec(spec) && isCorrectViewConfig(config)) {
+    if (isCorrectSpec(spec) && isCorrectViewConfig(config)) {
         return (React.createElement(DynamicFormsCtx.Provider, { value: context },
             React.createElement(ViewController, { spec: spec, name: "" })));
     }

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { AnyObject, FormValue, Spec } from '../../../types';
+import { FormValue, Spec } from '../../../types';
 import { DynamicViewConfig } from './';
 export interface DynamicViewContext {
     config: DynamicViewConfig;
-    value: AnyObject;
+    value: FormValue;
     Link?: React.ComponentType<{
         value: FormValue;
         link: Spec['viewSpec']['link'];

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

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

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

@@ -1,36 +1,20 @@
 import React from 'react';
-import { Copy, CopyCheck, Eye, EyeSlash } from '@gravity-ui/icons';
-import { Button, CopyToClipboard, CopyToClipboardStatus, Icon, TextInput } from '@gravity-ui/uikit';
+import { PasswordInput } from '@gravity-ui/components';
+import { 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]);
-    const type = React.useMemo(() => {
-        if (spec.viewSpec.type === 'password') {
-            return 'password';
-        }
-        return 'text';
-    }, [spec.viewSpec.type]);
-    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 }));
+export const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
+    const props = {
+        value: _.isNil(value) ? '' : `${value}`,
+        hasClear: true,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onUpdate: onChange,
+        disabled: spec.viewSpec.disabled,
+        placeholder: spec.viewSpec.placeholder,
+        qa: name,
+    };
+    if (spec.viewSpec.type === 'password') {
+        return (React.createElement(PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
+    }
+    return React.createElement(TextInput, Object.assign({}, props, { type: "text" }));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import _ from 'lodash';
 import { isNotEmptyValue } from '../../../utils';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const ViewAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = React.useState(true);
+    const [open, setOpen] = React.useState(_.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }

package/build/esm/lib/kit/components/ViewLayouts/ViewCardAccordeon.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import _ from 'lodash';
 import { Card } from '../';
 import { isNotEmptyValue } from '../../utils';
 export const ViewCardAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = React.useState(true);
+    const [open, setOpen] = React.useState(_.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!isNotEmptyValue(value, spec)) {
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/components": "^2.4.0",
+    "@gravity-ui/components": "^2.8.0",
     "@gravity-ui/i18n": "^1.1.0",
-    "@gravity-ui/icons": "^2.5.0",
+    "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.20"
   },
   "devDependencies": {
@@ -48,11 +48,11 @@
     "@babel/preset-typescript": "^7.18.6",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
-    "@gravity-ui/eslint-config": "^2.1.1",
-    "@gravity-ui/prettier-config": "^1.0.1",
+    "@gravity-ui/eslint-config": "^2.2.0",
+    "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.8.0",
+    "@gravity-ui/uikit": "^5.19.1",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.0.27",

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

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

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

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