@gravity-ui/dynamic-forms 1.1.0 → 1.2.0

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

@@ -1,14 +1,24 @@
 import _ from 'lodash';
 import { isCorrectSpec } from '../../helpers';
 import { useComponents, useDynamicFormsCtx, useField, useRender, useValidate } from './hooks';
-export const Controller = ({ spec, name, initialValue, parentOnChange, }) => {
+import { useSearch } from './hooks/useSearch';
+export const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount, }) => {
     const { tools } = useDynamicFormsCtx();
     const { inputEntity, Layout } = useComponents(spec);
     const render = useRender({ name, spec, inputEntity, Layout });
     const validate = useValidate(spec);
-    const renderProps = useField({ name, initialValue, spec, validate, tools, parentOnChange });
+    const renderProps = useField({
+        name,
+        initialValue,
+        spec,
+        validate,
+        tools,
+        parentOnChange,
+        parentOnUnmount,
+    });
+    const withSearch = useSearch(spec, renderProps.input.value, name);
     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,12 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import { Spec } from '../../types';
-import { DynamicFormConfig } from './types';
+import { DynamicFormConfig, FieldValue } from './types';
 export interface DynamicFieldProps {
     name: string;
     spec: Spec;
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
+    search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
 }
 export declare const DynamicField: React.FC<DynamicFieldProps>;

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

@@ -3,21 +3,30 @@ 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, useSearchStore, useStore } from './hooks';
+import { getDefaultSearchFunction, isCorrectConfig } from './utils';
+export const DynamicField = ({ name, spec, config, Monaco, search }) => {
     const DynamicFormsCtx = useCreateContext();
+    const SearchContext = useCreateSearchContext();
     const { tools, watcher } = useStore(name);
+    const { setField, removeField, isHiddenField } = useSearchStore(name);
     const context = React.useMemo(() => ({
         config,
         Monaco: isValidElementType(Monaco) ? Monaco : undefined,
         tools,
     }), [tools, config, Monaco]);
+    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]);
     if (correctParams) {
         return (React.createElement(DynamicFormsCtx.Provider, { value: context },
-            React.createElement(Controller, { spec: spec, name: name, parentOnChange: 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

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

@@ -6,3 +6,7 @@ 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/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/useField.d.ts

@@ -7,5 +7,6 @@ export interface FieldProps<Value extends FieldValue, SpecType extends Spec> {
     validate?: (value?: Value) => ValidateError;
     tools: DynamicFormsContext['tools'];
     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, }: FieldProps<Value, SpecType>) => FieldRenderProps<Value>;
+export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }: FieldProps<Value, SpecType>) => FieldRenderProps<Value>;

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

@@ -2,8 +2,8 @@ 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';
-export const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, }) => {
+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) => {
         if (value === REMOVED_ITEM) {
@@ -129,7 +129,7 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
     React.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, { [name]: false });
+            (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
         };
     }, []);
     return renderProps;

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,8 @@
+export declare const useSearchStore: (name: string) => {
+    store: {
+        [x: 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,33 @@
+import React from 'react';
+import _ from 'lodash';
+import { getParentName } from '../';
+export const useSearchStore = (name) => {
+    const [store, setStore] = React.useState({ [name]: false });
+    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;
+            }
+        }
+        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,
+    };
+};

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

@@ -9,6 +9,7 @@ export declare const useStore: (name: string) => {
     tools: {
         initialValue: FieldObjectValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
+        onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
     watcher: JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { Field as FinalFormField, useForm } from 'react-final-form';
-import { transformArrIn, transformArrOut } from '../helpers';
+import { transformArrIn, transformArrOut } from '../utils';
 export const useStore = (name) => {
     const form = useForm();
     const firstRenderRef = React.useRef(true);
@@ -46,6 +46,7 @@ export const useStore = (name) => {
     const tools = React.useMemo(() => ({
         initialValue: store.initialValue,
         onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, value), errors: errors || {} }))),
+        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { errors: _.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
         submitFailed,
     }), [store.initialValue, setStore, submitFailed]);
     const change = React.useCallback(_.debounce((value) => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { isCorrectSpec } from '../../../helpers';
-import { isCorrectConfig } from '../helpers';
+import { isCorrectConfig } from '../utils';
 import { useDynamicFormsCtx } from './';
 export const useValidate = (spec) => {
     const { config } = useDynamicFormsCtx();

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

@@ -1,5 +1,5 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
-export * from './helpers';
 export * from './types';
+export * from './utils';

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

@@ -1,5 +1,5 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
-export * from './helpers';
 export * from './types';
+export * from './utils';

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

@@ -7,6 +7,7 @@ export interface DynamicFormsContext {
     tools: {
         initialValue: FieldObjectValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
+        onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
 }

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

@@ -10,3 +10,4 @@ export * from './object';
 export * from './string';
 export * from './validators';
 export * from './value';
+export * from './search';

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

@@ -10,3 +10,4 @@ export * from './object';
 export * from './string';
 export * from './validators';
 export * from './value';
+export * from './search';

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

@@ -0,0 +1,8 @@
+import { Spec } from '../../../types';
+import { FieldValue } from './value';
+export interface SearchContext {
+    setField: (name: string, search: boolean) => void;
+    removeField: (name: string) => void;
+    isHiddenField: (name: string) => boolean;
+    searchFunction: (spec: Spec, value: FieldValue, name: string) => boolean;
+}

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

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

package/build/esm/lib/core/components/Form/{helpers.d.ts → utils/common.d.ts}

@@ -1,4 +1,4 @@
-import { FormValue } from '../../types';
+import { FormValue } from '../../../types';
 export declare const isCorrectConfig: (candidate: any) => boolean;
 export declare const transformArrIn: <Type extends FormValue, ReturnType_1 extends FormValue = Type>(value: Type) => ReturnType_1;
 export declare const transformArrOut: <Type extends FormValue, ReturnType_1 extends FormValue = Type>(value: Type) => ReturnType_1;

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

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import { SpecTypes } from '../../constants';
-import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM } from './constants';
+import { SpecTypes } from '../../../constants';
+import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM } from '../constants';
 export const isCorrectConfig = (candidate) => Object.values(SpecTypes).every((type) => _.isObjectLike(candidate) &&
     _.isObjectLike(candidate[type]) &&
     _.isObjectLike(candidate[type].inputs) &&

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

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './search';

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

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './search';

package/build/esm/lib/core/components/Form/utils/search.d.ts

@@ -0,0 +1,3 @@
+import { Spec } from '../../../types';
+export declare const getParentName: (name: string) => string | undefined;
+export declare const getDefaultSearchFunction: (search?: string) => (spec: Spec) => boolean;

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

@@ -0,0 +1,14 @@
+export const getParentName = (name) => {
+    const index = name.lastIndexOf('.');
+    if (index !== -1) {
+        return name.substring(0, index);
+    }
+    return undefined;
+};
+export 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;
+};

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

@@ -16,7 +16,7 @@ export const ArrayBase = ({ spec, name, arrayInput, input }) => {
         let item;
         if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
             if (isArraySpec(spec.items)) {
-                item = { OBJECT_ARRAY_FLAG: true, OBJECT_ARRAY_CNT: 0 };
+                item = { [OBJECT_ARRAY_FLAG]: true, [OBJECT_ARRAY_CNT]: 0 };
             }
             else if (isObjectSpec(spec.items)) {
                 item = {};
@@ -35,14 +35,15 @@ export const ArrayBase = ({ spec, name, arrayInput, input }) => {
         return itemSpec;
     }, [spec.items, itemSpecCorrect]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const items = React.useMemo(() => keys.map((key, idx) => {
         var _a;
         const itemSpec = getItemSpec(idx);
         if (!itemSpec) {
             return null;
         }
-        return (React.createElement(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.createElement(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/esm/lib/kit/components/Inputs/CardOneOf/CardOneOf.js

@@ -26,6 +26,7 @@ export const CardOneOf = (props) => {
         const value = _.set({}, childName.split(`${input.name}.`).join(''), childValue);
         input.onChange(value, childErrors);
     }, [input.onChange, input.name]);
+    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(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.createElement(Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(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));
 };

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

@@ -13,6 +13,7 @@ export const ObjectBase = (_a) => {
             spec.viewSpec.layoutTitle || null));
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
+    const parentOnUnmount = React.useCallback((childName) => restProps.input.onChange((currentValue) => currentValue, { [childName]: false }), [restProps.input.onChange]);
     const content = React.useMemo(() => {
         if (!_.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
             return null;
@@ -23,9 +24,17 @@ export const ObjectBase = (_a) => {
         const specProperties = Object.assign({}, spec.properties);
         return (React.createElement(React.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
             var _a;
-            return specProperties[property] ? (React.createElement(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.createElement(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/esm/lib/kit/components/Inputs/OneOf/OneOf.js

@@ -13,8 +13,9 @@ export const OneOf = (props) => {
         const value = _.set({}, childName.split(`${props.input.name}.`).join(''), childValue);
         props.input.onChange(value, childErrors);
     }, [props.input.onChange, props.input.name]);
+    const parentOnUnmount = React.useCallback((childName) => props.input.onChange((currentValue) => currentValue, { [childName]: false }), [props.input.onChange]);
     return (React.createElement("div", { className: b() },
         specProperties[oneOfValue] ? (React.createElement(GroupIndent, null,
-            React.createElement(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.createElement(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.createElement("div", { className: b('toggler') }, toggler)));
 };

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

@@ -34,6 +34,7 @@ export const OneOfCard = (props) => {
         const value = _.set({}, childName.split(`${input.name}.`).join(''), childValue);
         input.onChange(value, childErrors);
     }, [input.onChange, input.name]);
+    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(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.createElement(AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(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));
 };

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

@@ -5,6 +5,7 @@ const SECRET_PROPERTY_NAME = 'raw';
 export const Secret = ({ spec, name, input }) => {
     var _a;
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     if (!_.isObjectLike(spec.properties)) {
         return null;
     }
@@ -12,5 +13,5 @@ export const Secret = ({ spec, name, input }) => {
     if (!specProperties[SECRET_PROPERTY_NAME]) {
         return null;
     }
-    return (React.createElement(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.createElement(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}` }));
 };

package/build/esm/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/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js

@@ -3,16 +3,21 @@ import { Plus, Xmark } from '@gravity-ui/icons';
 import { Button, Icon, Table } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM, isArraySpec, isBooleanSpec, isObjectSpec, transformArrIn, } from '../../../../core';
+import { useSearchContext } from '../../../../core/components/Form/hooks';
 import { block } from '../../../utils';
 import './TableArrayInput.css';
 const b = block('table-array');
 export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
+    const { isHiddenField } = useSearchContext();
     const keys = React.useMemo(() => Object.keys(arrayInput.value || {})
         .filter((k) => k !== OBJECT_ARRAY_FLAG &&
         k !== OBJECT_ARRAY_CNT &&
         arrayInput.value[k] !== 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.useCallback(() => {
         arrayInput.onItemAdd({});
     }, [arrayInput.onItemAdd]);
@@ -20,6 +25,7 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
         arrayInput.onItemRemove(key);
     }, [arrayInput.onItemRemove]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const columns = React.useMemo(() => {
         const { items, viewSpec: { table }, } = spec;
         if (!(table === null || table === void 0 ? void 0 : table.length) || !isObjectSpec(items)) {
@@ -29,39 +35,44 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             id: 'idx',
             name: '',
             sticky: 'left',
-            template: (key, idx) => (React.createElement("div", { className: b('idx'), key: `idx-${key}` }, idx + 1)),
+            template: ({ key }, idx) => (React.createElement("div", { className: b('idx'), key: `idx-${key}` }, idx + 1)),
         };
         const removeColumn = {
             id: 'remove',
             name: '',
             sticky: 'right',
-            template: (key) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
+            template: ({ key }) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
                 React.createElement(Icon, { data: 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.createElement("div", { className: b('cell', {
-                        bool: isBooleanSpec(entitySpec),
-                        arr: isArraySpec(entitySpec),
-                        obj: isObjectSpec(entitySpec),
+                        bool: isBooleanSpec(preparedEntitySpec),
+                        arr: isArraySpec(preparedEntitySpec),
+                        obj: isObjectSpec(preparedEntitySpec),
                     }), key: `${name}.<${key}>.${property}` },
-                    React.createElement(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.createElement(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.useCallback(({ key }) => {
+        const searchResult = isHiddenField(`${name}.<${key}>`);
+        return [b('row', { hidden: searchResult })];
+    }, [isHiddenField, name]);
     if (!columns) {
         return null;
     }
     return (React.createElement("div", { className: b() },
-        keys.length ? (React.createElement(Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top" })) : null,
+        keys.length ? (React.createElement(Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top", getRowClassNames: getRowClassNames })) : null,
         !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled },
             React.createElement(Icon, { data: Plus, size: 14 }),
             spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },

package/package.json

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