@gravity-ui/dynamic-forms 1.8.1 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.9.1](https://github.com/gravity-ui/dynamic-forms/compare/v1.9.0...v1.9.1) (2023-06-07)
+
+
+### Bug Fixes
+
+* fixed styles for transperant and toggler oneof ([#60](https://github.com/gravity-ui/dynamic-forms/issues/60)) ([64ca12a](https://github.com/gravity-ui/dynamic-forms/commit/64ca12ad87ffd50fdda24901cd8f2e70e8c03868))
+
+## [1.9.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.8.1...v1.9.0) (2023-06-07)
+
+
+### Features
+
+* add ability to disable final-form insertion delay ([#56](https://github.com/gravity-ui/dynamic-forms/issues/56)) ([4df2b00](https://github.com/gravity-ui/dynamic-forms/commit/4df2b00c5b07bdacbbd399acdb5cf01af5521dbc))
+* add copy button for view layouts ([#59](https://github.com/gravity-ui/dynamic-forms/issues/59)) ([c31fcbf](https://github.com/gravity-ui/dynamic-forms/commit/c31fcbfe0da0ba369cd16595b2cb9190ac4498f0))
+* add store and entity unmount callbacks ([#55](https://github.com/gravity-ui/dynamic-forms/issues/55)) ([8f7c4c6](https://github.com/gravity-ui/dynamic-forms/commit/8f7c4c6a624941e10c624dc3098e4e601639d25e))
+
 ## [1.8.1](https://github.com/gravity-ui/dynamic-forms/compare/v1.8.0...v1.8.1) (2023-05-30)
 
 

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

@@ -9,11 +9,11 @@ const helpers_1 = require("../../helpers");
 const Controller_1 = require("./Controller");
 const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
-const DynamicField = ({ name, spec, config, Monaco, search, __mirror, }) => {
+const DynamicField = ({ name, spec, config, Monaco, search, withoutInsertFFDebounce, __mirror, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const SearchContext = (0, hooks_1.useCreateSearchContext)();
     const { tools, store } = (0, hooks_1.useStore)(name);
-    const watcher = (0, hooks_1.useIntegrationFF)(store);
+    const watcher = (0, hooks_1.useIntegrationFF)(store, withoutInsertFFDebounce);
     const { store: searchStore, setField, removeField, isHiddenField } = (0, hooks_1.useSearchStore)();
     const context = react_1.default.useMemo(() => ({
         config,

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OBJECT_ARRAY_CNT = exports.OBJECT_ARRAY_FLAG = exports.REMOVED_ITEM = void 0;
-exports.REMOVED_ITEM = '____removed-item';
+exports.OBJECT_ARRAY_CNT = exports.OBJECT_ARRAY_FLAG = void 0;
 exports.OBJECT_ARRAY_FLAG = '____arr-obj';
 exports.OBJECT_ARRAY_CNT = '____arr-obj-cnt';

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

@@ -7,14 +7,9 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../../helpers");
 const constants_1 = require("../constants");
 const utils_1 = require("../utils");
-const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
+const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }) => {
     const firstRenderRef = react_1.default.useRef(true);
-    const validate = react_1.default.useCallback((value) => {
-        if (value === constants_1.REMOVED_ITEM) {
-            return;
-        }
-        return propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate((0, utils_1.transformArrOut)(value));
-    }, [propsValidate]);
+    const validate = react_1.default.useCallback((value) => propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate((0, utils_1.transformArrOut)(value)), [propsValidate]);
     const [state, setState] = react_1.default.useState(() => {
         let value = lodash_1.default.cloneDeep(externalValue);
         if (lodash_1.default.isNil(value)) {
@@ -55,7 +50,7 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
                 const _value = lodash_1.default.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
                 const error = validate === null || validate === void 0 ? void 0 : validate(_value);
                 let value = (0, utils_1.transformArrIn)(_value);
-                if ((0, helpers_1.isNumberSpec)(spec) && value && value !== constants_1.REMOVED_ITEM && !error) {
+                if ((0, helpers_1.isNumberSpec)(spec) && value && !error) {
                     value = Number(value);
                 }
                 let newChildErrors = Object.assign({}, state.childErrors);
@@ -71,20 +66,29 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
         };
         const onDrop = () => {
             if ((0, utils_1.isArrayItem)(name)) {
-                onChange(constants_1.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_1.default.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
     }, [setState]);
     const onFocus = react_1.default.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: true, visited: true })));
     }, [setState]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => {
+        if ((0, helpers_1.isArraySpec)(spec) || (0, helpers_1.isObjectSpec)(spec)) {
+            onChange((currentValue) => currentValue
+                ? lodash_1.default.omit(currentValue, childName.split(`${name}.`)[1])
+                : currentValue, {
+                [childName]: false,
+            });
+        }
+    }, [onChange, name, spec]);
     const renderProps = react_1.default.useMemo(() => {
         const onItemAdd = (_value) => {
             const stateValue = (state.value || {
@@ -96,9 +100,7 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
             setState((state) => (Object.assign(Object.assign({}, state), { dirty: !lodash_1.default.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
         };
         const onItemRemove = (idx) => {
-            const value = Object.assign(Object.assign({}, state.value), { [`<${idx}>`]: constants_1.REMOVED_ITEM });
-            const error = validate === null || validate === void 0 ? void 0 : validate(value);
-            setState((state) => (Object.assign(Object.assign({}, state), { dirty: !lodash_1.default.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
+            parentOnUnmount(`${name}.<${idx}>`);
         };
         return {
             input: {
@@ -108,6 +110,7 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
                 onBlur,
                 onFocus,
                 onDrop,
+                parentOnUnmount,
             },
             arrayInput: {
                 name,
@@ -129,6 +132,7 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
         onBlur,
         onFocus,
         onDrop,
+        parentOnUnmount,
     ]);
     react_1.default.useEffect(() => {
         if (!firstRenderRef.current || !lodash_1.default.isEqual(externalValue, state.value) || state.error) {
@@ -138,7 +142,7 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
+            (externalParentOnUnmount ? externalParentOnUnmount : tools.onUnmount)(name);
         };
     }, []);
     return renderProps;

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

@@ -7,7 +7,7 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const react_final_form_1 = require("react-final-form");
 const utils_1 = require("../utils");
-const useIntegrationFF = (store) => {
+const useIntegrationFF = (store, withoutDebounce) => {
     const form = (0, react_final_form_1.useForm)();
     const watcher = react_1.default.useMemo(() => {
         const props = {
@@ -35,12 +35,27 @@ const useIntegrationFF = (store) => {
         };
         return react_1.default.createElement(react_final_form_1.Field, Object.assign({}, props));
     }, [store.name, store.errors]);
-    const change = react_1.default.useCallback((0, debounce_1.default)((value) => {
-        form.change(store.name, lodash_1.default.get((0, utils_1.transformArrOut)(value), store.name));
-    }, 100), [form.change, store.name]);
+    const change = react_1.default.useMemo(() => {
+        const cb = (value) => {
+            if (store.name) {
+                form.change(store.name, lodash_1.default.get((0, utils_1.transformArrOut)(value), store.name));
+            }
+        };
+        if (withoutDebounce) {
+            return cb;
+        }
+        return (0, debounce_1.default)(cb, 100);
+    }, [form.change, store.name, withoutDebounce]);
     react_1.default.useEffect(() => {
         change(store.values);
     }, [store.values]);
+    react_1.default.useEffect(() => {
+        return () => {
+            if (store.name) {
+                form.change(store.name, undefined);
+            }
+        };
+    }, []);
     return watcher;
 };
 exports.useIntegrationFF = useIntegrationFF;

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

@@ -32,9 +32,7 @@ const transformArrOut = (value) => {
     if (lodash_1.default.isObject(value) && !lodash_1.default.isArray(value)) {
         if (value[constants_2.OBJECT_ARRAY_FLAG]) {
             const _value = Object.keys(value)
-                .filter((key) => key !== constants_2.OBJECT_ARRAY_FLAG &&
-                key !== constants_2.OBJECT_ARRAY_CNT &&
-                value[key] !== constants_2.REMOVED_ITEM)
+                .filter((key) => key !== constants_2.OBJECT_ARRAY_FLAG && key !== constants_2.OBJECT_ARRAY_CNT)
                 .map((key) => key.split('<').join('').split('>').join(''))
                 .sort((a, b) => Number(a) - Number(b))
                 .map((key) => (0, exports.transformArrOut)(value[`<${key}>`]));

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../core");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('copy-button');
+/**
+ *
+ * Use the with-copy-button scss mixin for visible on hover
+ */
+const CopyButton = ({ spec, value }) => {
+    if (((0, core_1.isStringSpec)(spec) || (0, core_1.isNumberSpec)(spec)) && spec.viewSpec.copy) {
+        return react_1.default.createElement(uikit_1.ClipboardButton, { className: b(), text: `${value}`, size: 14 });
+    }
+    return null;
+};
+exports.CopyButton = CopyButton;

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

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

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

@@ -9,9 +9,7 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../../../core");
 const ArrayBase = ({ spec, name, arrayInput, input }) => {
     const keys = react_1.default.useMemo(() => Object.keys(arrayInput.value || {})
-        .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG &&
-        k !== core_1.OBJECT_ARRAY_CNT &&
-        arrayInput.value[k] !== core_1.REMOVED_ITEM)
+        .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG && k !== core_1.OBJECT_ARRAY_CNT)
         .map((k) => k.split('<').join('').split('>').join(''))
         .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
     const itemSpecCorrect = react_1.default.useMemo(() => (0, core_1.isCorrectSpec)(spec.items), [spec.items]);
@@ -39,15 +37,14 @@ 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, { 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_1.default.createElement(core_1.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/cjs/lib/kit/components/Inputs/CardOneOf/CardOneOf.js

@@ -30,8 +30,7 @@ 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, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.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_1.default.createElement(__1.Card, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.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));
 };
 exports.CardOneOf = CardOneOf;

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

@@ -16,7 +16,6 @@ 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;
@@ -27,7 +26,7 @@ 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, { 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_1.default.createElement(core_1.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,
@@ -36,7 +35,7 @@ const ObjectBase = (_a) => {
         restProps.input.value,
         addBtn,
         parentOnChange,
-        parentOnUnmount,
+        restProps.input.parentOnUnmount,
     ]);
     if (!Layout || !content) {
         return content;

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

@@ -10,7 +10,6 @@ const ObjectValueInput = (props) => {
     var _a;
     const { spec, input, name, Layout } = props;
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
-    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const childSpec = react_1.default.useMemo(() => {
         var _a;
         if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME]) {
@@ -23,7 +22,7 @@ const ObjectValueInput = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (react_1.default.createElement(core_1.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_1.default.createElement(core_1.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_1.default.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -16,14 +16,13 @@ const OneOfComponent = (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({
             base: !props.withoutIndent,
             flat: props.withoutIndent,
         }) },
-        react_1.default.createElement("div", null, toggler),
+        toggler,
         specProperties[oneOfValue] ? (react_1.default.createElement(__1.GroupIndent, null,
-            react_1.default.createElement(core_1.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_1.default.createElement(core_1.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));
 };
 exports.OneOf = OneOfComponent;
 const OneOfFlat = (props) => (react_1.default.createElement(OneOfComponent, Object.assign({}, props, { withoutIndent: true })));

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

@@ -37,8 +37,7 @@ 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(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.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_1.default.createElement(__1.AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.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));
 };
 exports.OneOfCard = OneOfCard;

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

@@ -19,11 +19,10 @@ const Secret = (props) => {
         return undefined;
     }, [spec.properties]);
     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 (!childSpec) {
         return null;
     }
-    const content = (react_1.default.createElement(core_1.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_1.default.createElement(core_1.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_1.default.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -13,9 +13,7 @@ const b = (0, utils_1.block)('table-array');
 const TableArrayInput = ({ spec, name, arrayInput, input }) => {
     const { isHiddenField } = (0, hooks_1.useSearchContext)();
     const keys = react_1.default.useMemo(() => Object.keys(arrayInput.value || {})
-        .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG &&
-        k !== core_1.OBJECT_ARRAY_CNT &&
-        arrayInput.value[k] !== core_1.REMOVED_ITEM)
+        .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG && k !== core_1.OBJECT_ARRAY_CNT)
         .map((k) => k.split('<').join('').split('>').join(''))
         .sort((a, b) => Number(a) - Number(b))
         .map((key) => ({
@@ -28,7 +26,6 @@ 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)) {
@@ -62,11 +59,11 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                         arr: (0, core_1.isArraySpec)(preparedEntitySpec),
                         obj: (0, core_1.isObjectSpec)(preparedEntitySpec),
                     }), key: `${name}.<${key}>.${property}` },
-                    react_1.default.createElement(core_1.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_1.default.createElement(core_1.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: lodash_1.default.noop })));
             },
         }));
         return [idxColumn, ...columns, removeColumn];
-    }, [name, spec, onItemRemove, parentOnChange, parentOnUnmount, input.value]);
+    }, [name, spec, onItemRemove, parentOnChange, input.parentOnUnmount, input.value]);
     const getRowClassNames = react_1.default.useCallback(({ key }) => {
         var _a;
         const searchResult = (_a = spec.viewSpec.table) === null || _a === void 0 ? void 0 : _a.every(({ property }) => isHiddenField(`${name}.<${key}>.${property}`));

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

@@ -10,7 +10,6 @@ const TextLink = (props) => {
     var _a;
     const { spec, input, name, Layout } = props;
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
-    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     const childSpec = react_1.default.useMemo(() => {
         var _a;
         if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME]) &&
@@ -24,7 +23,7 @@ const TextLink = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (react_1.default.createElement(core_1.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_1.default.createElement(core_1.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_1.default.createElement(Layout, Object.assign({}, props), content);
     }

package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -11,6 +11,9 @@
 .df-transparent_without-max-width {
   max-width: unset;
 }
+.df-transparent_without-max-width > .df-error-wrapper {
+  width: unset;
+}
 .df-transparent__remove-button {
   margin-left: 5px;
 }

package/build/cjs/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/cjs/lib/kit/components/ViewLayouts/ViewRow/ViewRow.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewRow = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('view-row');
 const ViewRow = ({ value, spec, children, }) => {
@@ -13,6 +14,7 @@ const ViewRow = ({ value, spec, children, }) => {
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle),
             react_1.default.createElement("div", { className: b('dots') })),
-        react_1.default.createElement("div", { className: b('right') }, children)));
+        react_1.default.createElement("div", { className: b('right') }, children),
+        react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value })));
 };
 exports.ViewRow = ViewRow;

package/build/cjs/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/cjs/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.js

@@ -3,7 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewTableCell = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('view-table-cell');
-const ViewTableCell = ({ value, spec, children, }) => (react_1.default.createElement("div", { className: b() }, (0, utils_1.isNotEmptyValue)(value, spec) ? children : '—'));
+const ViewTableCell = ({ value, spec, children, }) => {
+    const empty = (0, utils_1.isNotEmptyValue)(value, spec);
+    return (react_1.default.createElement("div", { className: b() }, empty ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: b('inner') }, children),
+        react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value }))) : ('—')));
+};
 exports.ViewTableCell = ViewTableCell;

package/build/cjs/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/cjs/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.js

@@ -3,7 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewTransparent = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('view-transparent');
-const ViewTransparent = ({ value, spec, children, }) => (0, utils_1.isNotEmptyValue)(value, spec) ? react_1.default.createElement("div", { className: b() }, children) : null;
+const ViewTransparent = ({ value, spec, children, }) => (0, utils_1.isNotEmptyValue)(value, spec) ? (react_1.default.createElement("div", { className: b() },
+    react_1.default.createElement("div", null, children),
+    react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value }))) : null;
 exports.ViewTransparent = ViewTransparent;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./AccordeonCard"), exports);
 tslib_1.__exportStar(require("./Card"), exports);
+tslib_1.__exportStar(require("./CopyButton"), exports);
 tslib_1.__exportStar(require("./ErrorWrapper"), exports);
 tslib_1.__exportStar(require("./GroupIndent"), exports);
 tslib_1.__exportStar(require("./Inputs"), exports);

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

@@ -212,6 +212,7 @@ exports.dynamicViewConfig = {
         },
         layouts: {
             row: components_1.ViewRow,
+            row_verbose: components_1.ViewRow,
             accordeon: components_1.ViewAccordeon,
             section: components_1.ViewSection,
             section2: components_1.ViewSection2,
@@ -230,6 +231,7 @@ exports.dynamicViewConfig = {
         },
         layouts: {
             row: components_1.ViewRow,
+            row_verbose: components_1.ViewRow,
             table_item: components_1.ViewTableCell,
         },
     },
@@ -239,6 +241,7 @@ exports.dynamicViewConfig = {
         },
         layouts: {
             row: components_1.ViewRow,
+            row_verbose: components_1.ViewRow,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
         },
@@ -255,6 +258,7 @@ exports.dynamicViewConfig = {
         },
         layouts: {
             row: components_1.ViewRow,
+            row_verbose: components_1.ViewRow,
             accordeon: components_1.ViewAccordeon,
             section: components_1.ViewSection,
             section2: components_1.ViewSection2,
@@ -278,6 +282,7 @@ exports.dynamicViewConfig = {
         },
         layouts: {
             row: components_1.ViewRow,
+            row_verbose: components_1.ViewRow,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
             section: components_1.ViewSection,

package/build/cjs/lib/kit/hooks/useOneOf/index.js

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

package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css

@@ -0,0 +1,4 @@
+.df-use-oneof__toggler_radio > .df-row {
+  width: unset;
+  max-width: unset;
+}

package/build/cjs/lib/kit/hooks/{useOneOf.js → useOneOf/useOneOf.js}

@@ -5,6 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('use-oneof');
 const MAX_TAB_TITLE_LENGTH = 20;
 const useOneOf = ({ props, onTogglerChange }) => {
     var _a;
@@ -39,22 +41,28 @@ const useOneOf = ({ props, onTogglerChange }) => {
             content: title,
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
-    const togglerInput = react_1.default.useMemo(() => {
+    const selectToggler = react_1.default.useMemo(() => {
         var _a, _b;
-        if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
+        return ((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
             (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'select' ||
                 options.length > 3 ||
-                lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
+                lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH));
+    }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
+    const togglerInput = react_1.default.useMemo(() => {
+        if (selectToggler) {
             return (react_1.default.createElement(uikit_1.Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
         }
         return (react_1.default.createElement(uikit_1.RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (react_1.default.createElement(uikit_1.RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
-    }, [options, oneOfValue, onOneOfChange, name, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
+    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
     const toggler = react_1.default.useMemo(() => {
         if (Layout) {
-            return react_1.default.createElement(Layout, Object.assign({}, props), togglerInput);
+            return (react_1.default.createElement("div", { className: b('toggler', {
+                    radio: !selectToggler,
+                }) },
+                react_1.default.createElement(Layout, Object.assign({}, props), togglerInput)));
         }
-        return togglerInput;
-    }, [Layout, togglerInput, props]);
+        return react_1.default.createElement("div", null, togglerInput);
+    }, [Layout, togglerInput, selectToggler, props]);
     return { oneOfValue, specProperties, toggler, togglerInput };
 };
 exports.useOneOf = useOneOf;