@gravity-ui/dynamic-forms 1.2.0 → 1.4.0

package/build/cjs/lib/kit/components/Views/TextLinkView/TextLinkView.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLinkView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../../core");
+const TEXT_LINK_PROPERTY_NAME = 'text';
+const TextLinkView = ({ value, spec, name }) => {
+    const specProperties = spec.properties;
+    const preparedSpec = react_1.default.useMemo(() => {
+        var _a;
+        return specProperties && specProperties[TEXT_LINK_PROPERTY_NAME]
+            ? Object.assign(Object.assign({}, specProperties[TEXT_LINK_PROPERTY_NAME]), { viewSpec: Object.assign(Object.assign({}, (_a = specProperties[TEXT_LINK_PROPERTY_NAME]) === null || _a === void 0 ? void 0 : _a.viewSpec), { link: value === null || value === void 0 ? void 0 : value.link }) }) : undefined;
+    }, [specProperties, value === null || value === void 0 ? void 0 : value.link]);
+    return preparedSpec ? (react_1.default.createElement(core_1.ViewController, { spec: preparedSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}` })) : null;
+};
+exports.TextLinkView = TextLinkView;

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

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

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

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBaseView"), exports);
 tslib_1.__exportStar(require("./BaseView"), exports);
 tslib_1.__exportStar(require("./CardOneOfView"), exports);
+tslib_1.__exportStar(require("./FileInputView"), exports);
 tslib_1.__exportStar(require("./MonacoInputView"), exports);
 tslib_1.__exportStar(require("./MultiSelectView"), exports);
 tslib_1.__exportStar(require("./NumberWithScaleView"), exports);
@@ -12,3 +13,4 @@ tslib_1.__exportStar(require("./OneOfCardView"), exports);
 tslib_1.__exportStar(require("./OneOfView"), exports);
 tslib_1.__exportStar(require("./TableArrayView"), exports);
 tslib_1.__exportStar(require("./TextAreaView"), exports);
+tslib_1.__exportStar(require("./TextLinkView"), exports);

package/build/cjs/lib/kit/constants/config.js

@@ -60,6 +60,7 @@ exports.dynamicConfig = {
             card_oneof: { Component: components_1.CardOneOf, independent: true },
             secret: { Component: components_1.Secret, independent: true },
             base: { Component: components_1.ObjectBase, independent: true },
+            text_link: { Component: components_1.TextLink, independent: true },
         },
         layouts: {
             row: components_1.Row,
@@ -83,6 +84,7 @@ exports.dynamicConfig = {
             textarea: { Component: components_1.TextArea },
             select: { Component: components_1.Select },
             base: { Component: components_1.Text },
+            file_input: { Component: components_1.FileInput },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -155,6 +157,7 @@ exports.dynamicCardConfig = {
             oneof: { Component: components_1.OneOfCard, independent: true },
             secret: { Component: components_1.Secret, independent: true },
             base: { Component: components_1.ObjectBase, independent: true },
+            text_link: { Component: components_1.TextLink, independent: true },
         },
         layouts: {
             row: components_1.Row2,
@@ -175,6 +178,7 @@ exports.dynamicCardConfig = {
             textarea: { Component: components_1.TextArea },
             select: { Component: components_1.Select },
             base: { Component: components_1.Text },
+            file_input: { Component: components_1.FileInput },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInputCard },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -239,6 +243,7 @@ exports.dynamicViewConfig = {
             card_oneof: { Component: components_1.CardOneOfView, independent: true },
             secret: undefined,
             base: { Component: components_1.ObjectBaseView, independent: true },
+            text_link: { Component: components_1.TextLinkView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow,
@@ -258,6 +263,7 @@ exports.dynamicViewConfig = {
             textarea: { Component: components_1.TextAreaView },
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
+            file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },
             text_content: undefined,
@@ -316,6 +322,7 @@ exports.dynamicViewCardConfig = {
             oneof: { Component: components_1.OneOfCardView, independent: true },
             secret: undefined,
             base: { Component: components_1.ObjectBaseView, independent: true },
+            text_link: { Component: components_1.TextLinkView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow2,
@@ -333,6 +340,7 @@ exports.dynamicViewCardConfig = {
             textarea: { Component: components_1.TextAreaView },
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
+            file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoViewCard },
             text_content: undefined,

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

@@ -42,5 +42,7 @@
   "label_error-zero-start": "Value must not start with a zero",
   "label_error-dot-end": "Value must not end with a dot",
   "label_delete": "Delete",
-  "button_cancel": "Close"
+  "button_cancel": "Close",
+  "button-upload_file": "Upload file",
+  "label-data_loaded": "Data uploaded"
 }

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

@@ -42,5 +42,7 @@
   "label_error-zero-start": "Значение не должно начинаться с нуля",
   "label_error-dot-end": "Значение не должно заканчиваться точкой",
   "label_delete": "Удалить",
-  "button_cancel": "Закрыть"
+  "button_cancel": "Закрыть",
+  "button-upload_file": "Загрузить файл",
+  "label-data_loaded": "Данные загружены"
 }

package/build/cjs/lib/kit/utils/common.js

@@ -1,36 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCorrectSizeParams = exports.prepareSpec = exports.isNotEmptyValue = exports.getChildError = void 0;
+exports.isCorrectSizeParams = exports.prepareSpec = exports.isNotEmptyValue = void 0;
 const tslib_1 = require("tslib");
-const final_form_1 = require("final-form");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../core");
 const helpers_1 = require("../validators/helpers");
 const bigIntMath_1 = require("./bigIntMath");
-const getChildError = (name, errors, head) => {
-    const error = lodash_1.default.get(errors, name);
-    if (!head && (error === null || error === void 0 ? void 0 : error[final_form_1.ARRAY_ERROR])) {
-        return true;
-    }
-    else if (lodash_1.default.isArray(error)) {
-        return error.some((itemError, idx) => {
-            if (lodash_1.default.isArray(itemError) || lodash_1.default.isObjectLike(itemError)) {
-                return (0, exports.getChildError)(`${name}[${idx}]`, errors);
-            }
-            return Boolean(itemError);
-        });
-    }
-    else if (lodash_1.default.isObjectLike(error)) {
-        return Object.keys(error).some((key) => {
-            if (lodash_1.default.isArray(error[key]) || lodash_1.default.isObjectLike(error[key])) {
-                return (0, exports.getChildError)(`${name}.${key}`, errors);
-            }
-            return Boolean(error[key]);
-        });
-    }
-    return false;
-};
-exports.getChildError = getChildError;
 const isNotEmptyValue = (value, spec) => {
     var _a;
     if (lodash_1.default.isNil(value)) {

package/build/cjs/lib/kit/validators/validators.js

@@ -37,7 +37,7 @@ const getBooleanValidator = (params = {}) => {
 };
 exports.getBooleanValidator = getBooleanValidator;
 const getNumberValidator = (params = {}) => {
-    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, } = params;
+    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, } = params;
     return (spec, value = '') => {
         const stringValue = String(value);
         if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
@@ -50,16 +50,17 @@ const getNumberValidator = (params = {}) => {
             if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
                 return validators_1.ErrorMessages.SPACE_END;
             }
-            if (stringValue[stringValue.length - 1] === '.') {
+            if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
                 return validators_1.ErrorMessages.DOT_END;
             }
             if (!ignoreNumberCheck && !(0, helpers_1.isFloat)(stringValue)) {
                 return validators_1.ErrorMessages.NUMBER;
             }
-            if ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
-                (stringValue.length > 2 &&
-                    stringValue.substring(0, 2) === '-0' &&
-                    stringValue[2] !== '.')) {
+            if (!ignoreZeroStart &&
+                ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
+                    (stringValue.length > 2 &&
+                        stringValue.substring(0, 2) === '-0' &&
+                        stringValue[2] !== '.'))) {
                 return validators_1.ErrorMessages.ZERO_START;
             }
         }
@@ -71,8 +72,7 @@ const getNumberValidator = (params = {}) => {
         }
         if (!ignoreMinimumCheck &&
             lodash_1.default.isNumber(spec.minimum) &&
-            stringValue.length &&
-            spec.minimum > Number(stringValue)) {
+            ((stringValue.length && spec.minimum > Number(stringValue)) || !stringValue.length)) {
             return validators_1.ErrorMessages.minNumber(spec.minimum);
         }
         if (lodash_1.default.isString(spec.format) && stringValue.length) {

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

@@ -1,9 +1,8 @@
 import _ from 'lodash';
 import { isCorrectSpec } from '../../helpers';
-import { useComponents, useDynamicFormsCtx, useField, useRender, useValidate } from './hooks';
-import { useSearch } from './hooks/useSearch';
+import { useComponents, useControllerMirror, useDynamicFormsCtx, useField, useRender, useSearch, useValidate, } from './hooks';
 export const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount, }) => {
-    const { tools } = useDynamicFormsCtx();
+    const { tools, __mirror } = useDynamicFormsCtx();
     const { inputEntity, Layout } = useComponents(spec);
     const render = useRender({ name, spec, inputEntity, Layout });
     const validate = useValidate(spec);
@@ -17,6 +16,13 @@ export const Controller = ({ spec, name, initialValue, parentOnChange, parentOnU
         parentOnUnmount,
     });
     const withSearch = useSearch(spec, renderProps.input.value, name);
+    useControllerMirror(name, {
+        useComponents: { inputEntity, Layout },
+        useRender: render,
+        useValidate: validate,
+        useField: renderProps,
+        useSearch: withSearch,
+    }, __mirror);
     if (_.isString(name) && isCorrectSpec(spec)) {
         return withSearch(render(renderProps));
     }

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import { Spec } from '../../types';
-import { DynamicFormConfig, FieldValue } from './types';
+import { DynamicFormConfig, FieldValue, WonderMirror } from './types';
 export interface DynamicFieldProps {
     name: string;
     spec: Spec;
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
     search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
+    __mirror?: WonderMirror;
 }
 export declare const DynamicField: React.FC<DynamicFieldProps>;

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

@@ -3,18 +3,20 @@ import _ from 'lodash';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../helpers';
 import { Controller } from './Controller';
-import { useCreateContext, useCreateSearchContext, useSearchStore, useStore } from './hooks';
+import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useIntegrationFF, useSearchStore, useStore, } from './hooks';
 import { getDefaultSearchFunction, isCorrectConfig } from './utils';
-export const DynamicField = ({ name, spec, config, Monaco, search }) => {
+export const DynamicField = ({ name, spec, config, Monaco, search, __mirror, }) => {
     const DynamicFormsCtx = useCreateContext();
     const SearchContext = useCreateSearchContext();
-    const { tools, watcher } = useStore(name);
-    const { setField, removeField, isHiddenField } = useSearchStore(name);
+    const { tools, store } = useStore(name);
+    const watcher = useIntegrationFF(store);
+    const { store: searchStore, setField, removeField, isHiddenField } = useSearchStore();
     const context = React.useMemo(() => ({
         config,
         Monaco: isValidElementType(Monaco) ? Monaco : undefined,
         tools,
-    }), [tools, config, Monaco]);
+        __mirror,
+    }), [tools, config, Monaco, __mirror]);
     const searchContext = React.useMemo(() => ({
         setField,
         removeField,
@@ -22,6 +24,11 @@ export const DynamicField = ({ name, spec, config, Monaco, search }) => {
         searchFunction: _.isFunction(search) ? search : getDefaultSearchFunction(search),
     }), [isHiddenField, removeField, search, setField]);
     const correctParams = React.useMemo(() => _.isString(name) && isCorrectSpec(spec) && isCorrectConfig(config), [name, spec, config]);
+    useDynamicFieldMirror({
+        useStore: { tools, store },
+        useIntegrationFF: watcher,
+        useSearchStore: { store: searchStore, setField, removeField, isHiddenField },
+    }, __mirror);
     if (correctParams) {
         return (React.createElement(DynamicFormsCtx.Provider, { value: context },
             React.createElement(SearchContext.Provider, { value: searchContext },

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

@@ -1,7 +1,10 @@
 export * from './useComponents';
+export * from './useControllerMirror';
 export * from './useCreateContext';
+export * from './useDynamicFieldMirror';
 export * from './useDynamicFormsCtx';
 export * from './useField';
+export * from './useIntegrationFF';
 export * from './useRender';
 export * from './useStore';
 export * from './useValidate';

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

@@ -1,7 +1,10 @@
 export * from './useComponents';
+export * from './useControllerMirror';
 export * from './useCreateContext';
+export * from './useDynamicFieldMirror';
 export * from './useDynamicFormsCtx';
 export * from './useField';
+export * from './useIntegrationFF';
 export * from './useRender';
 export * from './useStore';
 export * from './useValidate';

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

@@ -0,0 +1,2 @@
+import { ControllerMirror, WonderMirror } from '../types';
+export declare const useControllerMirror: (name: string, params: ControllerMirror, __mirror?: WonderMirror) => void;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export const useControllerMirror = (name, params, __mirror) => {
+    if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.controller) {
+        __mirror.controller[name] = params;
+    }
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            if ((_a = __mirror === null || __mirror === void 0 ? void 0 : __mirror.controller) === null || _a === void 0 ? void 0 : _a[name]) {
+                delete __mirror.controller[name];
+            }
+        };
+    }, []);
+};

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

@@ -0,0 +1,2 @@
+import { DynamicFieldMirror, WonderMirror } from '../types';
+export declare const useDynamicFieldMirror: (params: DynamicFieldMirror, __mirror?: WonderMirror) => void;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export const useDynamicFieldMirror = (params, __mirror) => {
+    if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.field) {
+        __mirror.field.useStore = params.useStore;
+        __mirror.field.useIntegrationFF = params.useIntegrationFF;
+        __mirror.field.useSearchStore = params.useSearchStore;
+    }
+    React.useEffect(() => {
+        return () => {
+            if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.field) {
+                delete __mirror.field.useStore;
+                delete __mirror.field.useIntegrationFF;
+                delete __mirror.field.useSearchStore;
+            }
+        };
+    }, []);
+};

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

@@ -1,6 +1,6 @@
 import { Spec } from '../../../types';
 import { DynamicFormsContext, FieldRenderProps, FieldValue, ValidateError } from '../types';
-export interface FieldProps<Value extends FieldValue, SpecType extends Spec> {
+export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec> {
     name: string;
     spec: SpecType;
     initialValue: Value;
@@ -9,4 +9,4 @@ export interface FieldProps<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 useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }: FieldProps<Value, SpecType>) => FieldRenderProps<Value>;
+export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;

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

@@ -122,7 +122,7 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
         onDrop,
     ]);
     React.useEffect(() => {
-        if (!firstRenderRef.current || !_.isEqual(initialValue, state.value)) {
+        if (!firstRenderRef.current || !_.isEqual(initialValue, state.value) || state.error) {
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);

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

@@ -0,0 +1,2 @@
+import { DynamicFieldStore } from '../types';
+export declare const useIntegrationFF: (store: DynamicFieldStore) => JSX.Element;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import { Field as FinalFormField, useForm } from 'react-final-form';
+import { transformArrOut } from '../utils';
+export const useIntegrationFF = (store) => {
+    const form = useForm();
+    const watcher = React.useMemo(() => {
+        const props = {
+            name: store.name,
+            render: () => null,
+            subscription: {},
+            validate: () => {
+                const asyncErrors = [];
+                let error;
+                _.values(store.errors).forEach((err) => {
+                    if (err) {
+                        if (_.isFunction(err === null || err === void 0 ? void 0 : err.then)) {
+                            asyncErrors.push(err);
+                        }
+                        else {
+                            error = err;
+                        }
+                    }
+                });
+                if (asyncErrors.length) {
+                    return Promise.all(asyncErrors).then((r) => r[0]);
+                }
+                return error;
+            },
+        };
+        return React.createElement(FinalFormField, Object.assign({}, props));
+    }, [store.name, store.errors]);
+    const change = React.useCallback(debounce((value) => {
+        form.change(store.name, _.get(transformArrOut(value), store.name));
+    }, 100), [form.change, store.name]);
+    React.useEffect(() => {
+        change(store.values);
+    }, [store.values]);
+    return watcher;
+};

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

@@ -1,7 +1,5 @@
-export declare const useSearchStore: (name: string) => {
-    store: {
-        [x: string]: boolean;
-    };
+export declare const useSearchStore: () => {
+    store: Record<string, boolean>;
     setField: (name: string, search: boolean) => void;
     removeField: (name: string) => void;
     isHiddenField: (name: string) => boolean;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 import { getParentName } from '../';
-export const useSearchStore = (name) => {
-    const [store, setStore] = React.useState({ [name]: false });
+export const useSearchStore = () => {
+    const [store, setStore] = React.useState({});
     const isHiddenField = React.useCallback((name) => {
         const selfFlag = store[name];
         if (selfFlag === false) {
@@ -20,6 +20,9 @@ export const useSearchStore = (name) => {
                 return false;
             }
         }
+        if (_.isUndefined(selfFlag)) {
+            return false;
+        }
         return true;
     }, [store]);
     return {

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

@@ -1,10 +1,4 @@
-import { FieldObjectValue, FieldValue, ValidateError } from '../types';
-export interface DynamicFieldStore {
-    name: string;
-    initialValue: FieldObjectValue;
-    values: FieldObjectValue;
-    errors: Record<string, ValidateError>;
-}
+import { DynamicFieldStore, FieldObjectValue, FieldValue, ValidateError } from '../types';
 export declare const useStore: (name: string) => {
     tools: {
         initialValue: FieldObjectValue;
@@ -12,5 +6,5 @@ export declare const useStore: (name: string) => {
         onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
-    watcher: JSX.Element;
+    store: DynamicFieldStore;
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
-import { Field as FinalFormField, useForm } from 'react-final-form';
-import { transformArrIn, transformArrOut } from '../utils';
+import { useForm } from 'react-final-form';
+import { transformArrIn } from '../utils';
 export const useStore = (name) => {
     const form = useForm();
     const firstRenderRef = React.useRef(true);
@@ -17,44 +17,12 @@ export const useStore = (name) => {
         };
     });
     const submitFailed = form.getState().submitFailed;
-    const watcher = React.useMemo(() => {
-        const props = {
-            name: store.name,
-            render: () => null,
-            subscription: {},
-            validate: () => {
-                const asyncErrors = [];
-                let error;
-                _.values(store.errors).forEach((err) => {
-                    if (err) {
-                        if (_.isFunction(err === null || err === void 0 ? void 0 : err.then)) {
-                            asyncErrors.push(err);
-                        }
-                        else {
-                            error = err;
-                        }
-                    }
-                });
-                if (asyncErrors.length) {
-                    return Promise.all(asyncErrors).then((r) => r[0]);
-                }
-                return error;
-            },
-        };
-        return React.createElement(FinalFormField, Object.assign({}, props));
-    }, [store.name, store.errors]);
     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, value), errors: errors || {} }))),
-        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { errors: _.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
+        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, _.clone(value)), errors: errors || {} }))),
+        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.omit(store.values, name), errors: _.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
         submitFailed,
     }), [store.initialValue, setStore, submitFailed]);
-    const change = React.useCallback(_.debounce((value) => {
-        form.change(store.name, _.get(transformArrOut(value), store.name));
-    }, 100), [form.change, store.name]);
-    React.useEffect(() => {
-        change(store.values);
-    }, [store.values]);
     React.useEffect(() => {
         if (!firstRenderRef.current) {
             const initialValue = transformArrIn({
@@ -71,5 +39,5 @@ export const useStore = (name) => {
     React.useEffect(() => {
         firstRenderRef.current = false;
     }, []);
-    return { tools, watcher };
+    return { tools, store };
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { DynamicFormConfig, FieldObjectValue, FieldValue, ValidateError } from './';
+import { DynamicFormConfig, FieldObjectValue, FieldValue, ValidateError, WonderMirror } from './';
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
@@ -10,4 +10,5 @@ export interface DynamicFormsContext {
         onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
+    __mirror?: WonderMirror;
 }

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

@@ -5,8 +5,10 @@ export * from './context';
 export * from './field';
 export * from './input';
 export * from './layout';
+export * from './mirror';
 export * from './number';
 export * from './object';
+export * from './store';
 export * from './string';
 export * from './validators';
 export * from './value';

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

@@ -5,8 +5,10 @@ export * from './context';
 export * from './field';
 export * from './input';
 export * from './layout';
+export * from './mirror';
 export * from './number';
 export * from './object';
+export * from './store';
 export * from './string';
 export * from './validators';
 export * from './value';

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

@@ -0,0 +1,17 @@
+import { useComponents, useField, useIntegrationFF, useRender, useSearch, useSearchStore, useStore, useValidate } from '../hooks';
+export interface ControllerMirror {
+    useComponents?: ReturnType<typeof useComponents>;
+    useRender?: ReturnType<typeof useRender>;
+    useValidate?: ReturnType<typeof useValidate>;
+    useField?: ReturnType<typeof useField>;
+    useSearch?: ReturnType<typeof useSearch>;
+}
+export interface DynamicFieldMirror {
+    useStore?: ReturnType<typeof useStore>;
+    useIntegrationFF?: ReturnType<typeof useIntegrationFF>;
+    useSearchStore?: ReturnType<typeof useSearchStore>;
+}
+export interface WonderMirror {
+    field: DynamicFieldMirror;
+    controller: Record<string, ControllerMirror | undefined>;
+}

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

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

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

@@ -0,0 +1,7 @@
+import { FieldObjectValue, ValidateError } from '../types';
+export interface DynamicFieldStore {
+    name: string;
+    initialValue: FieldObjectValue;
+    values: FieldObjectValue;
+    errors: Record<string, ValidateError>;
+}

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

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

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useComponents, useDynamicFormsCtx, useRender } from './hooks';
 export const ViewController = ({ spec, name, }) => {
-    const { value, Link } = useDynamicFormsCtx();
-    const { viewEntity, Layout } = useComponents(spec);
+    const { config, value, Link } = useDynamicFormsCtx();
+    const { viewEntity, Layout } = useComponents(spec, config);
     const render = useRender({ name, value, spec, viewEntity, Layout, Link });
     return React.createElement(React.Fragment, null, render);
 };

package/build/esm/lib/core/components/View/hooks/useComponents.d.ts

@@ -1,6 +1,6 @@
 import { FormValue, Spec } from '../../../types';
-import { IndependentViewEntity, ViewEntity, ViewLayoutType } from '../types';
-export declare const useComponents: <Value extends FormValue, SpecType extends Spec>(spec: SpecType) => {
+import { DynamicViewConfig, IndependentViewEntity, ViewEntity, ViewLayoutType } from '../types';
+export declare const useComponents: <Value extends FormValue, SpecType extends Spec>(spec: SpecType, config: DynamicViewConfig) => {
     viewEntity: ViewEntity<Value, SpecType> | IndependentViewEntity<Value, SpecType> | undefined;
     Layout: ViewLayoutType<Value, SpecType> | undefined;
 };