@gravity-ui/dynamic-forms 3.1.0 → 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, externalErrors, __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,7 +27,7 @@ const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) =>
         tools,
         parentOnChange,
         parentOnUnmount,
-        externalErrors,
+        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,20 +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, errors: externalErrors, __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,
-        externalErrors,
+        tools: Object.assign(Object.assign({}, tools), { mutateDFState }),
+        store,
+        mutators,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue, externalErrors]);
+    }), [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, externalErrors, }) => {
+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,13 +31,11 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
                 }
             }
         }
-        let externalError = lodash_1.default.get(externalErrors, name);
-        if (!(lodash_1.default.isString(externalError) ||
-            lodash_1.default.isBoolean(externalError) ||
-            lodash_1.default.isUndefined(externalError))) {
-            externalError = undefined;
+        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)) || externalError;
+        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || errorMutator;
         const dirty = !lodash_1.default.isEqual(value, initialValue);
         return {
             active: false,
@@ -49,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);
@@ -69,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);
@@ -77,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 })));
@@ -145,17 +148,23 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
         }
     }, [state.value]);
     react_1.default.useEffect(() => {
-        const externalError = lodash_1.default.get(externalErrors, name);
-        if (!firstRenderRef.current &&
-            (lodash_1.default.isString(externalError) ||
-                lodash_1.default.isBoolean(externalError) ||
-                lodash_1.default.isUndefined(externalError)) &&
-            state.error !== externalError &&
-            !(state.error && !externalError)) {
-            setState(Object.assign(Object.assign({}, state), { error: externalError }));
-            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: externalError }));
+        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 }));
+            }
         }
-    }, [externalErrors]);
+    }, [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/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/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, externalErrors, __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,7 +23,7 @@ export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount,
         tools,
         parentOnChange,
         parentOnUnmount,
-        externalErrors,
+        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 { BaseValidateError, DynamicFormConfig, FieldValue, WonderMirror } from './types';
+import { DynamicFormConfig, DynamicFormMutators, FieldValue, WonderMirror } from './types';
 export interface DynamicFieldProps {
     name: string;
     spec: Spec;
@@ -10,7 +10,7 @@ export interface DynamicFieldProps {
     search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
     generateRandomValue?: (spec: StringSpec) => string;
     withoutInsertFFDebounce?: boolean;
-    errors?: Record<string, BaseValidateError>;
+    mutators?: DynamicFormMutators;
     __mirror?: WonderMirror;
 }
 export declare const DynamicField: React.FC<DynamicFieldProps>;

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

@@ -3,22 +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, errors: externalErrors, __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,
-        externalErrors,
+        tools: Object.assign(Object.assign({}, tools), { mutateDFState }),
+        store,
+        mutators,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue, externalErrors]);
+    }), [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 { BaseValidateError, 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,6 +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;
-    externalErrors?: Record<string, BaseValidateError>;
+    mutators: DynamicFormMutators;
 }
-export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, externalErrors, }: 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, externalErrors, }) => {
+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,13 +27,11 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
                 }
             }
         }
-        let externalError = _.get(externalErrors, name);
-        if (!(_.isString(externalError) ||
-            _.isBoolean(externalError) ||
-            _.isUndefined(externalError))) {
-            externalError = undefined;
+        let errorMutator = _.get(mutators.errors, name);
+        if (!isErrorMutatorCorrect(errorMutator)) {
+            errorMutator = undefined;
         }
-        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || externalError;
+        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || errorMutator;
         const dirty = !_.isEqual(value, initialValue);
         return {
             active: false,
@@ -45,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);
@@ -65,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);
@@ -73,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 })));
@@ -141,17 +144,23 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
         }
     }, [state.value]);
     React.useEffect(() => {
-        const externalError = _.get(externalErrors, name);
-        if (!firstRenderRef.current &&
-            (_.isString(externalError) ||
-                _.isBoolean(externalError) ||
-                _.isUndefined(externalError)) &&
-            state.error !== externalError &&
-            !(state.error && !externalError)) {
-            setState(Object.assign(Object.assign({}, state), { error: externalError }));
-            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: externalError }));
+        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 }));
+            }
         }
-    }, [externalErrors]);
+    }, [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/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 { BaseValidateError, DynamicFormConfig, FieldValue, ValidateError, WonderMirror } from './';
+import { DynamicFieldStore, DynamicFormConfig, DynamicFormMutators, FieldValue, ValidateError, WonderMirror } from './';
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
@@ -11,7 +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;
     };
-    externalErrors?: Record<string, BaseValidateError>;
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",