@gravity-ui/dynamic-forms 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [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,12 +5,20 @@ 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 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,
+    });
     if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec)) {
         return render(renderProps);
     }

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

@@ -20,7 +20,7 @@ const DynamicField = ({ name, spec, 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]);
     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) }),
+            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/useField.js

@@ -7,7 +7,7 @@ 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 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) {
@@ -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/useStore.js

@@ -50,6 +50,7 @@ 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) => {

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.js

@@ -23,6 +23,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)) {
@@ -55,11 +56,11 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                         arr: (0, core_1.isArraySpec)(entitySpec),
                         obj: (0, core_1.isObjectSpec)(entitySpec),
                     }), 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: entitySpec, 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]);
     if (!columns) {
         return null;
     }

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;

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

@@ -1,12 +1,20 @@
 import _ from 'lodash';
 import { isCorrectSpec } from '../../helpers';
 import { useComponents, useDynamicFormsCtx, useField, useRender, useValidate } from './hooks';
-export const Controller = ({ spec, name, initialValue, parentOnChange, }) => {
+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,
+    });
     if (_.isString(name) && isCorrectSpec(spec)) {
         return render(renderProps);
     }

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

@@ -16,7 +16,7 @@ export const DynamicField = ({ name, spec, config, Monaco }) => {
     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) }),
+            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/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

@@ -3,7 +3,7 @@ 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, }) => {
+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/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

@@ -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/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/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.js

@@ -20,6 +20,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)) {
@@ -52,11 +53,11 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                         arr: isArraySpec(entitySpec),
                         obj: isObjectSpec(entitySpec),
                     }), 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: entitySpec, 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]);
     if (!columns) {
         return null;
     }

package/package.json

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