@gravity-ui/dynamic-forms 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.2.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.1.1...v1.2.0) (2023-03-23)
+
+
+### Features
+
+* search ([#10](https://github.com/gravity-ui/dynamic-forms/issues/10)) ([4ed7d5c](https://github.com/gravity-ui/dynamic-forms/commit/4ed7d5c85dbb890f4c8148d4de43a626917cec0f))
+
+## [1.1.1](https://github.com/gravity-ui/dynamic-forms/compare/v1.1.0...v1.1.1) (2023-03-21)
+
+
+### Bug Fixes
+
+* fix incorrect unmount ([#12](https://github.com/gravity-ui/dynamic-forms/issues/12)) ([592652b](https://github.com/gravity-ui/dynamic-forms/commit/592652b2814567b2188ec43779eb591b7dec6ade))
+
 ## [1.1.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.0.2...v1.1.0) (2023-03-19)
 
 

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

@@ -5,14 +5,24 @@ const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../helpers");
 const hooks_1 = require("./hooks");
-const Controller = ({ spec, name, initialValue, parentOnChange, }) => {
+const useSearch_1 = require("./hooks/useSearch");
+const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount, }) => {
     const { tools } = (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);
-    const renderProps = (0, hooks_1.useField)({ name, initialValue, spec, validate, tools, parentOnChange });
+    const renderProps = (0, hooks_1.useField)({
+        name,
+        initialValue,
+        spec,
+        validate,
+        tools,
+        parentOnChange,
+        parentOnUnmount,
+    });
+    const withSearch = (0, useSearch_1.useSearch)(spec, renderProps.input.value, name);
     if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec)) {
-        return render(renderProps);
+        return withSearch(render(renderProps));
     }
     return null;
 };

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

@@ -7,21 +7,30 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_is_1 = require("react-is");
 const helpers_1 = require("../../helpers");
 const Controller_1 = require("./Controller");
-const helpers_2 = require("./helpers");
 const hooks_1 = require("./hooks");
-const DynamicField = ({ name, spec, config, Monaco }) => {
+const utils_1 = require("./utils");
+const DynamicField = ({ name, spec, config, Monaco, search }) => {
     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 context = react_1.default.useMemo(() => ({
         config,
         Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
         tools,
     }), [tools, config, Monaco]);
-    const correctParams = react_1.default.useMemo(() => lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec) && (0, helpers_2.isCorrectConfig)(config), [name, spec, config]);
+    const searchContext = react_1.default.useMemo(() => ({
+        setField,
+        removeField,
+        isHiddenField,
+        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]);
     if (correctParams) {
         return (react_1.default.createElement(DynamicFormsCtx.Provider, { value: context },
-            react_1.default.createElement(Controller_1.Controller, { spec: spec, name: name, parentOnChange: null, initialValue: lodash_1.default.get(tools.initialValue, name) }),
-            watcher));
+            react_1.default.createElement(SearchContext.Provider, { value: searchContext },
+                react_1.default.createElement(Controller_1.Controller, { spec: spec, name: name, parentOnChange: null, parentOnUnmount: null, initialValue: lodash_1.default.get(tools.initialValue, name) }),
+                watcher)));
     }
     return null;
 };

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

@@ -9,3 +9,7 @@ tslib_1.__exportStar(require("./useRender"), exports);
 tslib_1.__exportStar(require("./useStore"), exports);
 tslib_1.__exportStar(require("./useValidate"), exports);
 tslib_1.__exportStar(require("./useMonaco"), exports);
+tslib_1.__exportStar(require("./useSearchStore"), exports);
+tslib_1.__exportStar(require("./useSearchContext"), exports);
+tslib_1.__exportStar(require("./useSearch"), exports);
+tslib_1.__exportStar(require("./useCreateSearchContext"), exports);

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

@@ -6,13 +6,13 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_is_1 = require("react-is");
 const helpers_1 = require("../../../helpers");
-const helpers_2 = require("../helpers");
+const utils_1 = require("../utils");
 const _1 = require("./");
 const useComponents = (spec) => {
     var _a, _b;
     const { config } = (0, _1.useDynamicFormsCtx)();
     const { inputs, layouts } = react_1.default.useMemo(() => {
-        if ((0, helpers_2.isCorrectConfig)(config) && (0, helpers_1.isCorrectSpec)(spec)) {
+        if ((0, utils_1.isCorrectConfig)(config) && (0, helpers_1.isCorrectSpec)(spec)) {
             return config[spec.type];
         }
         return {};

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateSearchContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const createContext = lodash_1.default.once(() => react_1.default.createContext({}));
+const useCreateSearchContext = () => createContext();
+exports.useCreateSearchContext = useCreateSearchContext;

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

@@ -6,20 +6,20 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../../helpers");
 const constants_1 = require("../constants");
-const helpers_2 = require("../helpers");
-const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, }) => {
+const utils_1 = require("../utils");
+const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
     const firstRenderRef = react_1.default.useRef(true);
     const validate = react_1.default.useCallback((value) => {
         if (value === constants_1.REMOVED_ITEM) {
             return;
         }
-        return propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate((0, helpers_2.transformArrOut)(value));
+        return propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate((0, utils_1.transformArrOut)(value));
     }, [propsValidate]);
     const [state, setState] = react_1.default.useState(() => {
         let value = lodash_1.default.cloneDeep(initialValue);
         if (lodash_1.default.isNil(value)) {
             if (spec.defaultValue) {
-                value = (0, helpers_2.transformArrIn)(spec.defaultValue);
+                value = (0, utils_1.transformArrIn)(spec.defaultValue);
             }
             // if the spec with type array or object, and this spec has "required === true",
             // we immediately exclude empty value
@@ -52,7 +52,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
             setState((state) => {
                 const _value = lodash_1.default.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
                 const error = validate === null || validate === void 0 ? void 0 : validate(_value);
-                const value = (0, helpers_2.transformArrIn)(_value);
+                const value = (0, utils_1.transformArrIn)(_value);
                 let newChildErrors = Object.assign({}, state.childErrors);
                 if (childErrors) {
                     const nearestChildName = lodash_1.default.keys(childErrors).sort((a, b) => a.length - b.length)[0];
@@ -65,7 +65,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
             });
         };
         const onDrop = () => {
-            if ((0, helpers_2.isArrayItem)(name)) {
+            if ((0, utils_1.isArrayItem)(name)) {
                 onChange(constants_1.REMOVED_ITEM);
             }
             else {
@@ -86,7 +86,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
                 [constants_1.OBJECT_ARRAY_FLAG]: true,
                 [constants_1.OBJECT_ARRAY_CNT]: 0,
             });
-            const value = Object.assign(Object.assign({}, stateValue), { [`<${stateValue[constants_1.OBJECT_ARRAY_CNT]}>`]: (0, helpers_2.transformArrIn)(_value), [constants_1.OBJECT_ARRAY_CNT]: stateValue[constants_1.OBJECT_ARRAY_CNT] + 1 });
+            const value = Object.assign(Object.assign({}, stateValue), { [`<${stateValue[constants_1.OBJECT_ARRAY_CNT]}>`]: (0, utils_1.transformArrIn)(_value), [constants_1.OBJECT_ARRAY_CNT]: stateValue[constants_1.OBJECT_ARRAY_CNT] + 1 });
             const error = validate === null || validate === void 0 ? void 0 : validate(value);
             setState((state) => (Object.assign(Object.assign({}, state), { dirty: !lodash_1.default.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
         };
@@ -133,7 +133,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, { [name]: false });
+            (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
         };
     }, []);
     return renderProps;

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

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

package/build/cjs/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/cjs/lib/core/components/Form/hooks/useSearch/useSearch.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearch = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../../../kit/utils");
+const useSearchContext_1 = require("../useSearchContext");
+const b = (0, utils_1.block)('use-search');
+const useSearch = (spec, value, name) => {
+    const { setField, removeField, isHiddenField, searchFunction } = (0, useSearchContext_1.useSearchContext)();
+    const searchResult = react_1.default.useMemo(() => !searchFunction(spec, value, name), [name, searchFunction, spec, value]);
+    const hidden = react_1.default.useMemo(() => isHiddenField(name), [isHiddenField, name]);
+    const withSearch = react_1.default.useCallback((children) => react_1.default.createElement("div", { className: b({ hidden: hidden }) }, children), [hidden]);
+    react_1.default.useEffect(() => {
+        setField(name, searchResult);
+    }, [searchResult]);
+    react_1.default.useEffect(() => {
+        return () => removeField(name);
+    }, []);
+    return withSearch;
+};
+exports.useSearch = useSearch;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const index_1 = require("./index");
+const useSearchContext = () => {
+    const SearchContext = (0, index_1.useCreateSearchContext)();
+    const context = react_1.default.useContext(SearchContext);
+    return context;
+};
+exports.useSearchContext = useSearchContext;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchStore = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const __1 = require("../");
+const useSearchStore = (name) => {
+    const [store, setStore] = react_1.default.useState({ [name]: false });
+    const isHiddenField = react_1.default.useCallback((name) => {
+        const selfFlag = store[name];
+        if (selfFlag === false) {
+            return false;
+        }
+        let parentName = (0, __1.getParentName)(name);
+        while (parentName) {
+            if (store[parentName] === false) {
+                return false;
+            }
+            parentName = (0, __1.getParentName)(parentName);
+        }
+        for (const key of Object.keys(store)) {
+            if (key.includes(name + '.') && !store[key]) {
+                return false;
+            }
+        }
+        return true;
+    }, [store]);
+    return {
+        store,
+        setField: (name, search) => setStore((store) => (Object.assign(Object.assign({}, store), { [name]: search }))),
+        removeField: (name) => {
+            setStore((store) => lodash_1.default.omit(store, name));
+        },
+        isHiddenField,
+    };
+};
+exports.useSearchStore = useSearchStore;

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

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_final_form_1 = require("react-final-form");
-const helpers_1 = require("../helpers");
+const utils_1 = require("../utils");
 const useStore = (name) => {
     const form = (0, react_final_form_1.useForm)();
     const firstRenderRef = react_1.default.useRef(true);
     const [store, setStore] = react_1.default.useState(() => {
-        const initialValue = (0, helpers_1.transformArrIn)({
+        const initialValue = (0, utils_1.transformArrIn)({
             [name]: lodash_1.default.get(form.getState().values, name),
         });
         return {
@@ -50,17 +50,18 @@ const useStore = (name) => {
     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))) }))),
         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, helpers_1.transformArrOut)(value), store.name));
+        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, helpers_1.transformArrIn)({
+            const initialValue = (0, utils_1.transformArrIn)({
                 [name]: lodash_1.default.get(form.getState().values, name),
             });
             setStore({

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

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../../helpers");
-const helpers_2 = require("../helpers");
+const utils_1 = require("../utils");
 const _1 = require("./");
 const useValidate = (spec) => {
     const { config } = (0, _1.useDynamicFormsCtx)();
     const { validators } = react_1.default.useMemo(() => {
-        if ((0, helpers_2.isCorrectConfig)(config) && (0, helpers_1.isCorrectSpec)(spec)) {
+        if ((0, utils_1.isCorrectConfig)(config) && (0, helpers_1.isCorrectSpec)(spec)) {
             return config[spec.type];
         }
         return {};

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

@@ -4,5 +4,5 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./Controller"), exports);
 tslib_1.__exportStar(require("./DynamicField"), exports);
-tslib_1.__exportStar(require("./helpers"), exports);
 tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./utils"), exports);

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

@@ -13,3 +13,4 @@ tslib_1.__exportStar(require("./object"), exports);
 tslib_1.__exportStar(require("./string"), exports);
 tslib_1.__exportStar(require("./validators"), exports);
 tslib_1.__exportStar(require("./value"), exports);
+tslib_1.__exportStar(require("./search"), exports);

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

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

package/build/cjs/lib/core/components/Form/{helpers.js → utils/common.js}

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isArrayItem = exports.transformArrOut = exports.transformArrIn = exports.isCorrectConfig = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const constants_1 = require("../../constants");
-const constants_2 = require("./constants");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
 const isCorrectConfig = (candidate) => Object.values(constants_1.SpecTypes).every((type) => lodash_1.default.isObjectLike(candidate) &&
     lodash_1.default.isObjectLike(candidate[type]) &&
     lodash_1.default.isObjectLike(candidate[type].inputs) &&

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultSearchFunction = exports.getParentName = void 0;
+const getParentName = (name) => {
+    const index = name.lastIndexOf('.');
+    if (index !== -1) {
+        return name.substring(0, index);
+    }
+    return undefined;
+};
+exports.getParentName = getParentName;
+const getDefaultSearchFunction = (search) => (spec) => {
+    var _a;
+    if (search) {
+        return Boolean((_a = spec.viewSpec.layoutTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search.trim().toLowerCase()));
+    }
+    return true;
+};
+exports.getDefaultSearchFunction = getDefaultSearchFunction;

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

@@ -20,7 +20,7 @@ const ArrayBase = ({ spec, name, arrayInput, input }) => {
         let item;
         if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
             if ((0, core_1.isArraySpec)(spec.items)) {
-                item = { OBJECT_ARRAY_FLAG: true, OBJECT_ARRAY_CNT: 0 };
+                item = { [core_1.OBJECT_ARRAY_FLAG]: true, [core_1.OBJECT_ARRAY_CNT]: 0 };
             }
             else if ((0, core_1.isObjectSpec)(spec.items)) {
                 item = {};
@@ -39,14 +39,15 @@ const ArrayBase = ({ spec, name, arrayInput, input }) => {
         return itemSpec;
     }, [spec.items, itemSpecCorrect]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const items = react_1.default.useMemo(() => keys.map((key, idx) => {
         var _a;
         const itemSpec = getItemSpec(idx);
         if (!itemSpec) {
             return null;
         }
-        return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
-    }), [keys.join(''), name, getItemSpec, parentOnChange, input.value]);
+        return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
+    }), [keys.join(''), name, getItemSpec, parentOnChange, parentOnUnmount, input.value]);
     if (!itemSpecCorrect) {
         return null;
     }

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

@@ -30,7 +30,8 @@ const CardOneOf = (props) => {
         const value = lodash_1.default.set({}, childName.split(`${input.name}.`).join(''), childValue);
         input.onChange(value, childErrors);
     }, [input.onChange, input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(__1.Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, key: `${name}.${oneOfValue}` })) : null));
+    return (react_1.default.createElement(__1.Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };
 exports.CardOneOf = CardOneOf;

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

@@ -16,6 +16,7 @@ const ObjectBase = (_a) => {
             spec.viewSpec.layoutTitle || null));
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => restProps.input.onChange((currentValue) => currentValue, { [childName]: false }), [restProps.input.onChange]);
     const content = react_1.default.useMemo(() => {
         if (!lodash_1.default.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
             return null;
@@ -26,9 +27,17 @@ const ObjectBase = (_a) => {
         const specProperties = Object.assign({}, spec.properties);
         return (react_1.default.createElement(react_1.default.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
             var _a;
-            return specProperties[property] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, key: `${name ? name + '.' : ''}${property}` })) : null;
+            return specProperties[property] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
         })));
-    }, [spec.properties, spec.viewSpec.order, name, restProps.input.value, addBtn, parentOnChange]);
+    }, [
+        spec.properties,
+        spec.viewSpec.order,
+        name,
+        restProps.input.value,
+        addBtn,
+        parentOnChange,
+        parentOnUnmount,
+    ]);
     if (!Layout || !content) {
         return content;
     }

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

@@ -16,9 +16,10 @@ const OneOf = (props) => {
         const value = lodash_1.default.set({}, childName.split(`${props.input.name}.`).join(''), childValue);
         props.input.onChange(value, childErrors);
     }, [props.input.onChange, props.input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => props.input.onChange((currentValue) => currentValue, { [childName]: false }), [props.input.onChange]);
     return (react_1.default.createElement("div", { className: b() },
         specProperties[oneOfValue] ? (react_1.default.createElement(__1.GroupIndent, null,
-            react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, key: `${props.name}.${oneOfValue}` }))) : null,
+            react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null,
         react_1.default.createElement("div", { className: b('toggler') }, toggler)));
 };
 exports.OneOf = OneOf;

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

@@ -37,7 +37,8 @@ const OneOfCard = (props) => {
         const value = lodash_1.default.set({}, childName.split(`${input.name}.`).join(''), childValue);
         input.onChange(value, childErrors);
     }, [input.onChange, input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(__1.AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, key: `${name}.${oneOfValue}` })) : null));
+    return (react_1.default.createElement(__1.AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };
 exports.OneOfCard = OneOfCard;

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

@@ -9,6 +9,7 @@ const SECRET_PROPERTY_NAME = 'raw';
 const Secret = ({ spec, name, input }) => {
     var _a;
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     if (!lodash_1.default.isObjectLike(spec.properties)) {
         return null;
     }
@@ -16,6 +17,6 @@ const Secret = ({ spec, name, input }) => {
     if (!specProperties[SECRET_PROPERTY_NAME]) {
         return null;
     }
-    return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: specProperties[SECRET_PROPERTY_NAME], name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+    return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: specProperties[SECRET_PROPERTY_NAME], name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
 };
 exports.Secret = Secret;

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

@@ -1,6 +1,16 @@
 .df-table-array__table {
   margin-bottom: 10px;
 }
+.df-table-array__table .yc-table__cell {
+  border-bottom: 0px transparent;
+}
+.df-table-array__row .yc-table__cell {
+  border-bottom: 0px transparent;
+  border-top: 1px solid var(--yc-color-line-generic);
+}
+.df-table-array__row_hidden {
+  display: none;
+}
 .df-table-array__cell .yc-text-input,
 .df-table-array__cell .yc-select-control,
 .df-table-array__cell .yc-select,

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]);
@@ -23,6 +28,7 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
         arrayInput.onItemRemove(key);
     }, [arrayInput.onItemRemove]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const columns = react_1.default.useMemo(() => {
         const { items, viewSpec: { table }, } = spec;
         if (!(table === null || table === void 0 ? void 0 : table.length) || !(0, core_1.isObjectSpec)(items)) {
@@ -32,39 +38,44 @@ 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 })));
+                    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, input.value]);
+    }, [name, spec, onItemRemove, parentOnChange, parentOnUnmount, input.value]);
+    const getRowClassNames = react_1.default.useCallback(({ key }) => {
+        const searchResult = isHiddenField(`${name}.<${key}>`);
+        return [b('row', { hidden: searchResult })];
+    }, [isHiddenField, name]);
     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/esm/lib/core/components/Form/Controller.d.ts

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