@gravity-ui/dynamic-forms 1.8.1 → 1.9.0

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

@@ -1,16 +1,11 @@
 import React from 'react';
 import _ from 'lodash';
 import { isArraySpec, isNumberSpec, isObjectSpec } from '../../../helpers';
-import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM } from '../constants';
+import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
 import { isArrayItem, transformArrIn, transformArrOut } from '../utils';
-export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
+export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }) => {
     const firstRenderRef = React.useRef(true);
-    const validate = React.useCallback((value) => {
-        if (value === REMOVED_ITEM) {
-            return;
-        }
-        return propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate(transformArrOut(value));
-    }, [propsValidate]);
+    const validate = React.useCallback((value) => propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate(transformArrOut(value)), [propsValidate]);
     const [state, setState] = React.useState(() => {
         let value = _.cloneDeep(externalValue);
         if (_.isNil(value)) {
@@ -51,7 +46,7 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
                 const _value = _.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
                 const error = validate === null || validate === void 0 ? void 0 : validate(_value);
                 let value = transformArrIn(_value);
-                if (isNumberSpec(spec) && value && value !== REMOVED_ITEM && !error) {
+                if (isNumberSpec(spec) && value && !error) {
                     value = Number(value);
                 }
                 let newChildErrors = Object.assign({}, state.childErrors);
@@ -67,20 +62,29 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
         };
         const onDrop = () => {
             if (isArrayItem(name)) {
-                onChange(REMOVED_ITEM);
+                (externalParentOnUnmount ? externalParentOnUnmount : tools.onUnmount)(name);
             }
             else {
                 onChange(undefined);
             }
         };
         return { onChange, onDrop };
-    }, [initialValue, setState, name, validate, spec]);
+    }, [initialValue, setState, name, validate, spec, externalParentOnUnmount, tools.onUnmount]);
     const onBlur = React.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
     }, [setState]);
     const onFocus = React.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: true, visited: true })));
     }, [setState]);
+    const parentOnUnmount = React.useCallback((childName) => {
+        if (isArraySpec(spec) || isObjectSpec(spec)) {
+            onChange((currentValue) => currentValue
+                ? _.omit(currentValue, childName.split(`${name}.`)[1])
+                : currentValue, {
+                [childName]: false,
+            });
+        }
+    }, [onChange, name, spec]);
     const renderProps = React.useMemo(() => {
         const onItemAdd = (_value) => {
             const stateValue = (state.value || {
@@ -92,9 +96,7 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
             setState((state) => (Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
         };
         const onItemRemove = (idx) => {
-            const value = Object.assign(Object.assign({}, state.value), { [`<${idx}>`]: REMOVED_ITEM });
-            const error = validate === null || validate === void 0 ? void 0 : validate(value);
-            setState((state) => (Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
+            parentOnUnmount(`${name}.<${idx}>`);
         };
         return {
             input: {
@@ -104,6 +106,7 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
                 onBlur,
                 onFocus,
                 onDrop,
+                parentOnUnmount,
             },
             arrayInput: {
                 name,
@@ -125,6 +128,7 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
         onBlur,
         onFocus,
         onDrop,
+        parentOnUnmount,
     ]);
     React.useEffect(() => {
         if (!firstRenderRef.current || !_.isEqual(externalValue, state.value) || state.error) {
@@ -134,7 +138,7 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
     React.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
+            (externalParentOnUnmount ? externalParentOnUnmount : tools.onUnmount)(name);
         };
     }, []);
     return renderProps;

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

@@ -1,2 +1,2 @@
 import { DynamicFieldStore } from '../types';
-export declare const useIntegrationFF: (store: DynamicFieldStore) => JSX.Element;
+export declare const useIntegrationFF: (store: DynamicFieldStore, withoutDebounce?: boolean) => JSX.Element;

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

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import debounce from 'lodash/debounce';
 import { Field as FinalFormField, useForm } from 'react-final-form';
 import { transformArrOut } from '../utils';
-export const useIntegrationFF = (store) => {
+export const useIntegrationFF = (store, withoutDebounce) => {
     const form = useForm();
     const watcher = React.useMemo(() => {
         const props = {
@@ -31,11 +31,26 @@ export const useIntegrationFF = (store) => {
         };
         return React.createElement(FinalFormField, Object.assign({}, props));
     }, [store.name, store.errors]);
-    const change = React.useCallback(debounce((value) => {
-        form.change(store.name, _.get(transformArrOut(value), store.name));
-    }, 100), [form.change, store.name]);
+    const change = React.useMemo(() => {
+        const cb = (value) => {
+            if (store.name) {
+                form.change(store.name, _.get(transformArrOut(value), store.name));
+            }
+        };
+        if (withoutDebounce) {
+            return cb;
+        }
+        return debounce(cb, 100);
+    }, [form.change, store.name, withoutDebounce]);
     React.useEffect(() => {
         change(store.values);
     }, [store.values]);
+    React.useEffect(() => {
+        return () => {
+            if (store.name) {
+                form.change(store.name, undefined);
+            }
+        };
+    }, []);
     return watcher;
 };

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

@@ -8,6 +8,7 @@ export interface FieldRenderProps<Value extends FieldValue> {
         onChange: (value: Value | ((currentValue: Value) => Value), childErrors?: Record<string, ValidateError>) => void;
         onFocus: (event?: React.FocusEvent<HTMLElement>) => void;
         onDrop: () => void;
+        parentOnUnmount: (childName: string) => void;
     };
     arrayInput: {
         name: string;

package/build/esm/lib/core/components/Form/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 { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
 export const isCorrectConfig = (candidate) => Object.values(SpecTypes).every((type) => _.isObjectLike(candidate) &&
     _.isObjectLike(candidate[type]) &&
     _.isObjectLike(candidate[type].inputs) &&
@@ -26,9 +26,7 @@ export const transformArrOut = (value) => {
     if (_.isObject(value) && !_.isArray(value)) {
         if (value[OBJECT_ARRAY_FLAG]) {
             const _value = Object.keys(value)
-                .filter((key) => key !== OBJECT_ARRAY_FLAG &&
-                key !== OBJECT_ARRAY_CNT &&
-                value[key] !== REMOVED_ITEM)
+                .filter((key) => key !== OBJECT_ARRAY_FLAG && key !== OBJECT_ARRAY_CNT)
                 .map((key) => key.split('<').join('').split('>').join(''))
                 .sort((a, b) => Number(a) - Number(b))
                 .map((key) => transformArrOut(value[`<${key}>`]));

package/build/esm/lib/core/types/specs.d.ts

@@ -59,6 +59,7 @@ export interface NumberSpec<LinkType = any> {
         layoutOpen?: boolean;
         link?: LinkType;
         placeholder?: string;
+        copy?: boolean;
     };
 }
 export interface ObjectSpec<LinkType = any> {
@@ -121,6 +122,7 @@ export interface StringSpec<LinkType = any> {
             readAsMethod?: ReadAsMethod;
             ignoreText?: boolean;
         };
+        copy?: boolean;
     };
 }
 export type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;

package/build/esm/lib/kit/components/CopyButton/CopyButton.css

@@ -0,0 +1,4 @@
+.df-copy-button {
+  display: none;
+  margin: 2px 0 0 5px;
+}

package/build/esm/lib/kit/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormValue, Spec } from '../../../core';
+import './CopyButton.css';
+export interface CopyButtonProps {
+    spec: Spec;
+    value: FormValue;
+}
+/**
+ *
+ * Use the with-copy-button scss mixin for visible on hover
+ */
+export declare const CopyButton: React.FC<CopyButtonProps>;

package/build/esm/lib/kit/components/CopyButton/CopyButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClipboardButton } from '@gravity-ui/uikit';
+import { isNumberSpec, isStringSpec } from '../../../core';
+import { block } from '../../utils';
+import './CopyButton.css';
+const b = block('copy-button');
+/**
+ *
+ * Use the with-copy-button scss mixin for visible on hover
+ */
+export const CopyButton = ({ spec, value }) => {
+    if ((isStringSpec(spec) || isNumberSpec(spec)) && spec.viewSpec.copy) {
+        return React.createElement(ClipboardButton, { className: b(), text: `${value}`, size: 14 });
+    }
+    return null;
+};

package/build/esm/lib/kit/components/CopyButton/index.d.ts

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

package/build/esm/lib/kit/components/CopyButton/index.js

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

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

@@ -2,12 +2,10 @@ import React from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
-import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM, isArraySpec, isCorrectSpec, isObjectSpec, transformArrIn, } from '../../../../core';
+import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isCorrectSpec, isObjectSpec, transformArrIn, } from '../../../../core';
 export const ArrayBase = ({ spec, name, arrayInput, input }) => {
     const keys = React.useMemo(() => Object.keys(arrayInput.value || {})
-        .filter((k) => k !== OBJECT_ARRAY_FLAG &&
-        k !== OBJECT_ARRAY_CNT &&
-        arrayInput.value[k] !== REMOVED_ITEM)
+        .filter((k) => k !== OBJECT_ARRAY_FLAG && k !== OBJECT_ARRAY_CNT)
         .map((k) => k.split('<').join('').split('>').join(''))
         .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
     const itemSpecCorrect = React.useMemo(() => isCorrectSpec(spec.items), [spec.items]);
@@ -35,15 +33,14 @@ 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, { value: (_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]);
+        return (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
+    }), [keys.join(''), name, getItemSpec, parentOnChange, input.parentOnUnmount, input.value]);
     if (!itemSpecCorrect) {
         return null;
     }

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

@@ -26,7 +26,6 @@ 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, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(Controller, { value: (_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));
+    return (React.createElement(Card, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };

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

@@ -13,7 +13,6 @@ 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;
@@ -24,7 +23,7 @@ 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, { value: (_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;
+            return specProperties[property] ? (React.createElement(Controller, { value: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, parentOnUnmount: restProps.input.parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
         })));
     }, [
         spec.properties,
@@ -33,7 +32,7 @@ export const ObjectBase = (_a) => {
         restProps.input.value,
         addBtn,
         parentOnChange,
-        parentOnUnmount,
+        restProps.input.parentOnUnmount,
     ]);
     if (!Layout || !content) {
         return content;

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

@@ -6,7 +6,6 @@ export const ObjectValueInput = (props) => {
     var _a;
     const { spec, input, name, Layout } = props;
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
-    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const childSpec = React.useMemo(() => {
         var _a;
         if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME]) {
@@ -19,7 +18,7 @@ export const ObjectValueInput = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount }));
     if (Layout) {
         return React.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -13,14 +13,13 @@ const OneOfComponent = (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({
             base: !props.withoutIndent,
             flat: props.withoutIndent,
         }) },
         React.createElement("div", null, toggler),
         specProperties[oneOfValue] ? (React.createElement(GroupIndent, null,
-            React.createElement(Controller, { value: (_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(Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: props.input.parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
 };
 export const OneOf = OneOfComponent;
 export const OneOfFlat = (props) => (React.createElement(OneOfComponent, Object.assign({}, props, { withoutIndent: true })));

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

@@ -34,7 +34,6 @@ 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(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { value: (_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));
+    return (React.createElement(AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };

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

@@ -15,11 +15,10 @@ export const Secret = (props) => {
         return undefined;
     }, [spec.properties]);
     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 (!childSpec) {
         return null;
     }
-    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: childSpec, name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: childSpec, name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
     if (Layout) {
         return React.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -2,7 +2,7 @@ import React from 'react';
 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 { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isBooleanSpec, isObjectSpec, transformArrIn, } from '../../../../core';
 import { useSearchContext } from '../../../../core/components/Form/hooks';
 import { block } from '../../../utils';
 import './TableArrayInput.css';
@@ -10,9 +10,7 @@ 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)
+        .filter((k) => k !== OBJECT_ARRAY_FLAG && k !== OBJECT_ARRAY_CNT)
         .map((k) => k.split('<').join('').split('>').join(''))
         .sort((a, b) => Number(a) - Number(b))
         .map((key) => ({
@@ -25,7 +23,6 @@ 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)) {
@@ -59,11 +56,11 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                         arr: isArraySpec(preparedEntitySpec),
                         obj: isObjectSpec(preparedEntitySpec),
                     }), key: `${name}.<${key}>.${property}` },
-                    React.createElement(Controller, { value: (_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 })));
+                    React.createElement(Controller, { value: (_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: _.noop })));
             },
         }));
         return [idxColumn, ...columns, removeColumn];
-    }, [name, spec, onItemRemove, parentOnChange, parentOnUnmount, input.value]);
+    }, [name, spec, onItemRemove, parentOnChange, input.parentOnUnmount, input.value]);
     const getRowClassNames = React.useCallback(({ key }) => {
         var _a;
         const searchResult = (_a = spec.viewSpec.table) === null || _a === void 0 ? void 0 : _a.every(({ property }) => isHiddenField(`${name}.<${key}>.${property}`));

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

@@ -6,7 +6,6 @@ export const TextLink = (props) => {
     var _a;
     const { spec, input, name, Layout } = props;
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
-    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const childSpec = React.useMemo(() => {
         var _a;
         if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME]) &&
@@ -20,7 +19,7 @@ export const TextLink = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount }));
     if (Layout) {
         return React.createElement(Layout, Object.assign({}, props), content);
     }

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -37,4 +37,7 @@
 }
 .df-view-row__right > .df-view-transparent:last-child {
   margin-bottom: 0;
+}
+.df-view-row:hover > .df-copy-button {
+  display: block;
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewRow.css';
 const b = block('view-row');
@@ -10,5 +11,6 @@ export const ViewRow = ({ value, spec, children, }) => {
         React.createElement("div", { className: b('left') },
             React.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle),
             React.createElement("div", { className: b('dots') })),
-        React.createElement("div", { className: b('right') }, children)));
+        React.createElement("div", { className: b('right') }, children),
+        React.createElement(CopyButton, { spec: spec, value: value })));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -1,14 +1,20 @@
 .df-view-table-cell {
   display: flex;
+}
+.df-view-table-cell__inner {
+  display: flex;
   flex-direction: column;
   justify-content: center;
 }
-.df-view-table-cell > .df-view-row:last-child {
+.df-view-table-cell__inner > .df-view-row:last-child {
   margin-bottom: 0;
 }
-.df-view-table-cell > .df-view-transparent {
+.df-view-table-cell__inner > .df-view-transparent {
   margin-bottom: 6px;
 }
-.df-view-table-cell > .df-view-transparent:last-child {
+.df-view-table-cell__inner > .df-view-transparent:last-child {
   margin-bottom: 0;
+}
+.df-view-table-cell:hover > .df-copy-button {
+  display: block;
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.js

@@ -1,5 +1,11 @@
 import React from 'react';
+import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewTableCell.css';
 const b = block('view-table-cell');
-export const ViewTableCell = ({ value, spec, children, }) => (React.createElement("div", { className: b() }, isNotEmptyValue(value, spec) ? children : '—'));
+export const ViewTableCell = ({ value, spec, children, }) => {
+    const empty = isNotEmptyValue(value, spec);
+    return (React.createElement("div", { className: b() }, empty ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: b('inner') }, children),
+        React.createElement(CopyButton, { spec: spec, value: value }))) : ('—')));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -1,6 +1,10 @@
 .df-view-transparent {
+  display: flex;
   margin-bottom: 20px;
 }
 .df-view-transparent:last-child {
   margin-bottom: 0;
+}
+.df-view-transparent:hover > .df-copy-button {
+  display: block;
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewTransparent.css';
 const b = block('view-transparent');
-export const ViewTransparent = ({ value, spec, children, }) => isNotEmptyValue(value, spec) ? React.createElement("div", { className: b() }, children) : null;
+export const ViewTransparent = ({ value, spec, children, }) => isNotEmptyValue(value, spec) ? (React.createElement("div", { className: b() },
+    React.createElement("div", null, children),
+    React.createElement(CopyButton, { spec: spec, value: value }))) : null;

package/build/esm/lib/kit/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './AccordeonCard';
 export * from './Card';
+export * from './CopyButton';
 export * from './ErrorWrapper';
 export * from './GroupIndent';
 export * from './Inputs';

package/build/esm/lib/kit/components/index.js

@@ -1,5 +1,6 @@
 export * from './AccordeonCard';
 export * from './Card';
+export * from './CopyButton';
 export * from './ErrorWrapper';
 export * from './GroupIndent';
 export * from './Inputs';

package/build/esm/lib/kit/constants/config.js

@@ -209,6 +209,7 @@ export const dynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -227,6 +228,7 @@ export const dynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             table_item: ViewTableCell,
         },
     },
@@ -236,6 +238,7 @@ export const dynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
         },
@@ -252,6 +255,7 @@ export const dynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -275,6 +279,7 @@ export const dynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
             section: ViewSection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -57,6 +57,7 @@
     "@storybook/react": "^6.5.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.180",
     "@types/react": "^18.0.28",