@gravity-ui/dynamic-forms 1.1.1 → 1.3.0

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

@@ -7,15 +7,20 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../../../core");
+const hooks_1 = require("../../../../core/components/Form/hooks");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('table-array');
 const TableArrayInput = ({ spec, name, arrayInput, input }) => {
+    const { isHiddenField } = (0, hooks_1.useSearchContext)();
     const keys = react_1.default.useMemo(() => Object.keys(arrayInput.value || {})
         .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG &&
         k !== core_1.OBJECT_ARRAY_CNT &&
         arrayInput.value[k] !== core_1.REMOVED_ITEM)
         .map((k) => k.split('<').join('').split('>').join(''))
-        .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
+        .sort((a, b) => Number(a) - Number(b))
+        .map((key) => ({
+        key,
+    })), [arrayInput.value]);
     const onItemAdd = react_1.default.useCallback(() => {
         arrayInput.onItemAdd({});
     }, [arrayInput.onItemAdd]);
@@ -33,39 +38,45 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             id: 'idx',
             name: '',
             sticky: 'left',
-            template: (key, idx) => (react_1.default.createElement("div", { className: b('idx'), key: `idx-${key}` }, idx + 1)),
+            template: ({ key }, idx) => (react_1.default.createElement("div", { className: b('idx'), key: `idx-${key}` }, idx + 1)),
         };
         const removeColumn = {
             id: 'remove',
             name: '',
             sticky: 'right',
-            template: (key) => (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
+            template: ({ key }) => (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))),
         };
         const columns = table.map(({ property, label }) => ({
             id: property,
             name: label,
-            template: (key) => {
+            template: ({ key, }, idx) => {
                 var _a, _b, _c;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
                 if (!entitySpec) {
                     return null;
                 }
+                const preparedEntitySpec = Object.assign(Object.assign({}, entitySpec), { viewSpec: Object.assign(Object.assign({}, entitySpec.viewSpec), { layoutTitle: table.map(({ label }) => label).join(` ${idx + 1} `) + ` ${idx + 1}` }) });
                 return (react_1.default.createElement("div", { className: b('cell', {
-                        bool: (0, core_1.isBooleanSpec)(entitySpec),
-                        arr: (0, core_1.isArraySpec)(entitySpec),
-                        obj: (0, core_1.isObjectSpec)(entitySpec),
+                        bool: (0, core_1.isBooleanSpec)(preparedEntitySpec),
+                        arr: (0, core_1.isArraySpec)(preparedEntitySpec),
+                        obj: (0, core_1.isObjectSpec)(preparedEntitySpec),
                     }), key: `${name}.<${key}>.${property}` },
-                    react_1.default.createElement(core_1.Controller, { initialValue: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: entitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount })));
+                    react_1.default.createElement(core_1.Controller, { initialValue: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount })));
             },
         }));
         return [idxColumn, ...columns, removeColumn];
     }, [name, spec, onItemRemove, parentOnChange, parentOnUnmount, input.value]);
+    const getRowClassNames = react_1.default.useCallback(({ 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, spec.viewSpec.table]);
     if (!columns) {
         return null;
     }
     return (react_1.default.createElement("div", { className: b() },
-        keys.length ? (react_1.default.createElement(uikit_1.Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top" })) : null,
+        keys.length ? (react_1.default.createElement(uikit_1.Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top", getRowClassNames: getRowClassNames })) : null,
         !arrayInput.value && spec.defaultValue ? (react_1.default.createElement(uikit_1.Button, { onClick: () => input.onChange((0, core_1.transformArrIn)(spec.defaultValue)), disabled: spec.viewSpec.disabled },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
             spec.viewSpec.layoutTitle || null)) : (react_1.default.createElement(uikit_1.Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },

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,8 +1,8 @@
 import _ from 'lodash';
 import { isCorrectSpec } from '../../helpers';
-import { useComponents, useDynamicFormsCtx, useField, useRender, useValidate } from './hooks';
+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);
@@ -15,8 +15,16 @@ export const Controller = ({ spec, name, initialValue, parentOnChange, parentOnU
         parentOnChange,
         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 render(renderProps);
+        return withSearch(render(renderProps));
     }
     return null;
 };

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import { Spec } from '../../types';
-import { DynamicFormConfig } 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,21 +3,37 @@ import _ from 'lodash';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../helpers';
 import { Controller } from './Controller';
-import { isCorrectConfig } from './helpers';
-import { useCreateContext, useStore } from './hooks';
-export const DynamicField = ({ name, spec, config, Monaco }) => {
+import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useIntegrationFF, useSearchStore, useStore, } from './hooks';
+import { getDefaultSearchFunction, isCorrectConfig } from './utils';
+export const DynamicField = ({ name, spec, config, Monaco, search, __mirror, }) => {
     const DynamicFormsCtx = useCreateContext();
-    const { tools, watcher } = useStore(name);
+    const SearchContext = useCreateSearchContext();
+    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,
+        isHiddenField,
+        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(Controller, { spec: spec, name: name, parentOnChange: null, parentOnUnmount: null, initialValue: _.get(tools.initialValue, name) }),
-            watcher));
+            React.createElement(SearchContext.Provider, { value: searchContext },
+                React.createElement(Controller, { spec: spec, name: name, parentOnChange: null, parentOnUnmount: null, initialValue: _.get(tools.initialValue, name) }),
+                watcher)));
     }
     return null;
 };

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

@@ -1,8 +1,15 @@
 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';
 export * from './useMonaco';
+export * from './useSearchStore';
+export * from './useSearchContext';
+export * from './useSearch';
+export * from './useCreateSearchContext';

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

@@ -1,8 +1,15 @@
 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';
 export * from './useMonaco';
+export * from './useSearchStore';
+export * from './useSearchContext';
+export * from './useSearch';
+export * from './useCreateSearchContext';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../../helpers';
-import { isCorrectConfig } from '../helpers';
+import { isCorrectConfig } from '../utils';
 import { useDynamicFormsCtx } from './';
 export const useComponents = (spec) => {
     var _a, _b;

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/useCreateSearchContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SearchContext } from '../types';
+export declare const useCreateSearchContext: () => React.Context<SearchContext>;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import _ from 'lodash';
+const createContext = _.once(() => React.createContext({}));
+export const useCreateSearchContext = () => createContext();

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

@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import { isArraySpec, isObjectSpec } from '../../../helpers';
 import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM } from '../constants';
-import { isArrayItem, transformArrIn, transformArrOut } from '../helpers';
+import { isArrayItem, transformArrIn, transformArrOut } from '../utils';
 export const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
     const firstRenderRef = React.useRef(true);
     const validate = React.useCallback((value) => {
@@ -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/useSearch/index.d.ts

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

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

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

package/build/esm/lib/core/components/Form/hooks/useSearch/useSearch.css

@@ -0,0 +1,9 @@
+.df-use-search {
+  margin-bottom: 15px;
+}
+.df-use-search_hidden {
+  display: none;
+}
+.df-use-search:last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,4 @@
+import { Spec } from '../../../../types';
+import { FieldValue } from '../../types';
+import './useSearch.css';
+export declare const useSearch: (spec: Spec, value: FieldValue, name: string) => (children: JSX.Element | null) => JSX.Element;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { block } from '../../../../../kit/utils';
+import { useSearchContext } from '../useSearchContext';
+import './useSearch.css';
+const b = block('use-search');
+export const useSearch = (spec, value, name) => {
+    const { setField, removeField, isHiddenField, searchFunction } = useSearchContext();
+    const searchResult = React.useMemo(() => !searchFunction(spec, value, name), [name, searchFunction, spec, value]);
+    const hidden = React.useMemo(() => isHiddenField(name), [isHiddenField, name]);
+    const withSearch = React.useCallback((children) => React.createElement("div", { className: b({ hidden: hidden }) }, children), [hidden]);
+    React.useEffect(() => {
+        setField(name, searchResult);
+    }, [searchResult]);
+    React.useEffect(() => {
+        return () => removeField(name);
+    }, []);
+    return withSearch;
+};

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { useCreateSearchContext } from './index';
+export const useSearchContext = () => {
+    const SearchContext = useCreateSearchContext();
+    const context = React.useContext(SearchContext);
+    return context;
+};

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,36 @@
+import React from 'react';
+import _ from 'lodash';
+import { getParentName } from '../';
+export const useSearchStore = () => {
+    const [store, setStore] = React.useState({});
+    const isHiddenField = React.useCallback((name) => {
+        const selfFlag = store[name];
+        if (selfFlag === false) {
+            return false;
+        }
+        let parentName = getParentName(name);
+        while (parentName) {
+            if (store[parentName] === false) {
+                return false;
+            }
+            parentName = getParentName(parentName);
+        }
+        for (const key of Object.keys(store)) {
+            if (key.includes(name + '.') && !store[key]) {
+                return false;
+            }
+        }
+        if (_.isUndefined(selfFlag)) {
+            return false;
+        }
+        return true;
+    }, [store]);
+    return {
+        store,
+        setField: (name, search) => setStore((store) => (Object.assign(Object.assign({}, store), { [name]: search }))),
+        removeField: (name) => {
+            setStore((store) => _.omit(store, name));
+        },
+        isHiddenField,
+    };
+};