@gravity-ui/dynamic-forms 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.3.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.2.0...v1.3.0) (2023-03-31)
+
+
+### Features
+
+* update row note position ([#20](https://github.com/gravity-ui/dynamic-forms/issues/20)) ([4f15395](https://github.com/gravity-ui/dynamic-forms/commit/4f153959596d3325ddeb2c2e9b24382e36d2db75))
+
+
+### Bug Fixes
+
+* add fixes + tests ([#15](https://github.com/gravity-ui/dynamic-forms/issues/15)) ([80113dd](https://github.com/gravity-ui/dynamic-forms/commit/80113dd05737b18158865506ed3ac8479d69e8d0))
+* **search:** fixed bug related to form blinking ([#21](https://github.com/gravity-ui/dynamic-forms/issues/21)) ([20bab2f](https://github.com/gravity-ui/dynamic-forms/commit/20bab2f628d698714bcee35993583f2c7712e843))
+* **textArea:** fixed row for text area ([#22](https://github.com/gravity-ui/dynamic-forms/issues/22)) ([d5469e7](https://github.com/gravity-ui/dynamic-forms/commit/d5469e7dd0eee86b26e8daba94e93d2fa9465b96))
+
 ## [1.2.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.1.1...v1.2.0) (2023-03-23)
 
 

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

@@ -5,9 +5,8 @@ const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../helpers");
 const hooks_1 = require("./hooks");
-const useSearch_1 = require("./hooks/useSearch");
 const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount, }) => {
-    const { tools } = (0, hooks_1.useDynamicFormsCtx)();
+    const { tools, __mirror } = (0, hooks_1.useDynamicFormsCtx)();
     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);
@@ -20,7 +19,14 @@ const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount,
         parentOnChange,
         parentOnUnmount,
     });
-    const withSearch = (0, useSearch_1.useSearch)(spec, renderProps.input.value, name);
+    const withSearch = (0, hooks_1.useSearch)(spec, renderProps.input.value, name);
+    (0, hooks_1.useControllerMirror)(name, {
+        useComponents: { inputEntity, Layout },
+        useRender: render,
+        useValidate: validate,
+        useField: renderProps,
+        useSearch: withSearch,
+    }, __mirror);
     if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec)) {
         return withSearch(render(renderProps));
     }

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

@@ -9,16 +9,18 @@ const helpers_1 = require("../../helpers");
 const Controller_1 = require("./Controller");
 const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
-const DynamicField = ({ name, spec, config, Monaco, search }) => {
+const DynamicField = ({ name, spec, config, Monaco, search, __mirror, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const SearchContext = (0, hooks_1.useCreateSearchContext)();
-    const { tools, watcher } = (0, hooks_1.useStore)(name);
-    const { setField, removeField, isHiddenField } = (0, hooks_1.useSearchStore)(name);
+    const { tools, store } = (0, hooks_1.useStore)(name);
+    const watcher = (0, hooks_1.useIntegrationFF)(store);
+    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,
         tools,
-    }), [tools, config, Monaco]);
+        __mirror,
+    }), [tools, config, Monaco, __mirror]);
     const searchContext = react_1.default.useMemo(() => ({
         setField,
         removeField,
@@ -26,6 +28,11 @@ const DynamicField = ({ name, spec, config, Monaco, search }) => {
         searchFunction: lodash_1.default.isFunction(search) ? search : (0, utils_1.getDefaultSearchFunction)(search),
     }), [isHiddenField, removeField, search, setField]);
     const correctParams = react_1.default.useMemo(() => lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec) && (0, utils_1.isCorrectConfig)(config), [name, spec, config]);
+    (0, hooks_1.useDynamicFieldMirror)({
+        useStore: { tools, store },
+        useIntegrationFF: watcher,
+        useSearchStore: { store: searchStore, setField, removeField, isHiddenField },
+    }, __mirror);
     if (correctParams) {
         return (react_1.default.createElement(DynamicFormsCtx.Provider, { value: context },
             react_1.default.createElement(SearchContext.Provider, { value: searchContext },

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

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./useComponents"), exports);
+tslib_1.__exportStar(require("./useControllerMirror"), exports);
 tslib_1.__exportStar(require("./useCreateContext"), exports);
+tslib_1.__exportStar(require("./useDynamicFieldMirror"), exports);
 tslib_1.__exportStar(require("./useDynamicFormsCtx"), exports);
 tslib_1.__exportStar(require("./useField"), exports);
+tslib_1.__exportStar(require("./useIntegrationFF"), exports);
 tslib_1.__exportStar(require("./useRender"), exports);
 tslib_1.__exportStar(require("./useStore"), exports);
 tslib_1.__exportStar(require("./useValidate"), exports);

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControllerMirror = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useControllerMirror = (name, params, __mirror) => {
+    if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.controller) {
+        __mirror.controller[name] = params;
+    }
+    react_1.default.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];
+            }
+        };
+    }, []);
+};
+exports.useControllerMirror = useControllerMirror;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDynamicFieldMirror = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+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_1.default.useEffect(() => {
+        return () => {
+            if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.field) {
+                delete __mirror.field.useStore;
+                delete __mirror.field.useIntegrationFF;
+                delete __mirror.field.useSearchStore;
+            }
+        };
+    }, []);
+};
+exports.useDynamicFieldMirror = useDynamicFieldMirror;

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

@@ -126,7 +126,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
         onDrop,
     ]);
     react_1.default.useEffect(() => {
-        if (!firstRenderRef.current || !lodash_1.default.isEqual(initialValue, state.value)) {
+        if (!firstRenderRef.current || !lodash_1.default.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/cjs/lib/core/components/Form/hooks/useIntegrationFF.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntegrationFF = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const react_final_form_1 = require("react-final-form");
+const utils_1 = require("../utils");
+const useIntegrationFF = (store) => {
+    const form = (0, react_final_form_1.useForm)();
+    const watcher = react_1.default.useMemo(() => {
+        const props = {
+            name: store.name,
+            render: () => null,
+            subscription: {},
+            validate: () => {
+                const asyncErrors = [];
+                let error;
+                lodash_1.default.values(store.errors).forEach((err) => {
+                    if (err) {
+                        if (lodash_1.default.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_1.default.createElement(react_final_form_1.Field, Object.assign({}, props));
+    }, [store.name, store.errors]);
+    const change = react_1.default.useCallback((0, debounce_1.default)((value) => {
+        form.change(store.name, lodash_1.default.get((0, utils_1.transformArrOut)(value), store.name));
+    }, 100), [form.change, store.name]);
+    react_1.default.useEffect(() => {
+        change(store.values);
+    }, [store.values]);
+    return watcher;
+};
+exports.useIntegrationFF = useIntegrationFF;

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

@@ -5,8 +5,8 @@ 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 useSearchStore = (name) => {
-    const [store, setStore] = react_1.default.useState({ [name]: false });
+const useSearchStore = () => {
+    const [store, setStore] = react_1.default.useState({});
     const isHiddenField = react_1.default.useCallback((name) => {
         const selfFlag = store[name];
         if (selfFlag === false) {
@@ -24,6 +24,9 @@ const useSearchStore = (name) => {
                 return false;
             }
         }
+        if (lodash_1.default.isUndefined(selfFlag)) {
+            return false;
+        }
         return true;
     }, [store]);
     return {

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

@@ -21,44 +21,12 @@ const useStore = (name) => {
         };
     });
     const submitFailed = form.getState().submitFailed;
-    const watcher = react_1.default.useMemo(() => {
-        const props = {
-            name: store.name,
-            render: () => null,
-            subscription: {},
-            validate: () => {
-                const asyncErrors = [];
-                let error;
-                lodash_1.default.values(store.errors).forEach((err) => {
-                    if (err) {
-                        if (lodash_1.default.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_1.default.createElement(react_final_form_1.Field, Object.assign({}, props));
-    }, [store.name, store.errors]);
     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, value), errors: errors || {} }))),
-        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { errors: lodash_1.default.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
+        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 || {} }))),
+        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { values: lodash_1.default.omit(store.values, name), errors: lodash_1.default.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
         submitFailed,
     }), [store.initialValue, setStore, submitFailed]);
-    const change = react_1.default.useCallback(lodash_1.default.debounce((value) => {
-        form.change(store.name, lodash_1.default.get((0, utils_1.transformArrOut)(value), store.name));
-    }, 100), [form.change, store.name]);
-    react_1.default.useEffect(() => {
-        change(store.values);
-    }, [store.values]);
     react_1.default.useEffect(() => {
         if (!firstRenderRef.current) {
             const initialValue = (0, utils_1.transformArrIn)({
@@ -75,6 +43,6 @@ const useStore = (name) => {
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
     }, []);
-    return { tools, watcher };
+    return { tools, store };
 };
 exports.useStore = useStore;

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

@@ -8,8 +8,10 @@ tslib_1.__exportStar(require("./context"), exports);
 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("./number"), exports);
 tslib_1.__exportStar(require("./object"), exports);
+tslib_1.__exportStar(require("./store"), exports);
 tslib_1.__exportStar(require("./string"), exports);
 tslib_1.__exportStar(require("./validators"), exports);
 tslib_1.__exportStar(require("./value"), exports);

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

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

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

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

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

@@ -68,9 +68,10 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
         return [idxColumn, ...columns, removeColumn];
     }, [name, spec, onItemRemove, parentOnChange, parentOnUnmount, input.value]);
     const getRowClassNames = react_1.default.useCallback(({ key }) => {
-        const searchResult = isHiddenField(`${name}.<${key}>`);
+        var _a;
+        const searchResult = (_a = spec.viewSpec.table) === null || _a === void 0 ? void 0 : _a.every(({ property }) => isHiddenField(`${name}.<${key}>.${property}`));
         return [b('row', { hidden: searchResult })];
-    }, [isHiddenField, name]);
+    }, [isHiddenField, name, spec.viewSpec.table]);
     if (!columns) {
         return null;
     }

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLink = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const core_1 = require("../../../../core");
+const TEXT_LINK_PROPERTY_NAME = 'text';
+const TextLink = ({ spec, input, name }) => {
+    var _a;
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
+    const specProperties = Object.assign({}, spec.properties);
+    if (!specProperties[TEXT_LINK_PROPERTY_NAME] ||
+        !(0, core_1.isStringSpec)(specProperties[TEXT_LINK_PROPERTY_NAME])) {
+        return null;
+    }
+    return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: specProperties[TEXT_LINK_PROPERTY_NAME], name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+};
+exports.TextLink = TextLink;

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

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

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

@@ -14,5 +14,6 @@ tslib_1.__exportStar(require("./TableArrayInput"), exports);
 tslib_1.__exportStar(require("./Text"), exports);
 tslib_1.__exportStar(require("./TextArea"), exports);
 tslib_1.__exportStar(require("./TextContent"), exports);
+tslib_1.__exportStar(require("./TextLink"), exports);
 tslib_1.__exportStar(require("./NumberWithScale"), exports);
 tslib_1.__exportStar(require("./MonacoInput"), exports);

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

@@ -13,13 +13,16 @@
 }
 .df-row__left {
   width: 180px;
+  min-height: 28px;
   display: flex;
+  margin-bottom: auto;
   flex-direction: column;
   flex-shrink: 0;
 }
 .df-row__left-inner {
-  min-height: 28px;
-  display: flex;
+  display: inline;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 .df-row__left::after {
   content: "";
@@ -27,18 +30,24 @@
   flex-shrink: 1;
 }
 .df-row__title {
-  align-self: center;
+  word-break: break-word;
+  margin-right: 3px;
+}
+.df-row__title_required::after {
+  content: "*";
+  color: var(--yc-color-text-danger);
 }
 .df-row__note {
-  height: 28px;
-  display: flex;
-  align-items: center;
-  margin-left: 5px;
+  padding-right: 16px;
+}
+.df-row__note-inner {
+  position: absolute;
+  margin-top: 1px;
 }
-.df-row__note .yc-help-popover {
+.df-row__note-inner .yc-help-popover {
   display: flex;
 }
-.df-row__note .yc-help-popover > span {
+.df-row__note-inner .yc-help-popover > span {
   display: flex;
 }
 .df-row__right {
@@ -59,6 +68,5 @@
   margin-left: 5px;
 }
 .df-row__required-mark {
-  margin-left: 2px;
   color: var(--yc-color-text-danger);
 }

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

@@ -14,11 +14,10 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
     return (react_1.default.createElement("div", { className: b({ 'extra-width': (0, core_1.isArraySpec)(spec) || arrayItem }) },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("div", { className: b('left-inner') },
-                react_1.default.createElement("div", { className: b('title') },
-                    spec.viewSpec.layoutTitle,
-                    spec.required && react_1.default.createElement("span", { className: b('required-mark') }, "*")),
-                !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('note') },
-                    react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] }))) : null)),
+                react_1.default.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
+                    react_1.default.createElement("span", { className: b('note-inner') },
+                        react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },
                 react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),

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

@@ -12,3 +12,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,
@@ -155,6 +156,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,
@@ -239,6 +241,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,
@@ -316,6 +319,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,

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

@@ -71,8 +71,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;