@gravity-ui/dynamic-forms 1.5.0 → 1.6.1

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

@@ -2,13 +2,26 @@ import React from 'react';
 import _ from 'lodash';
 import { Controller } from '../../../../core';
 const OBJECT_VALUE_PROPERTY_NAME = 'value';
-export const ObjectValueInput = ({ spec, input, name }) => {
+export const ObjectValueInput = (props) => {
     var _a;
-    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 { 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 specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[OBJECT_VALUE_PROPERTY_NAME]) {
+    const childSpec = React.useMemo(() => {
+        var _a;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME]) {
+            const childSpec = _.cloneDeep(spec.properties[OBJECT_VALUE_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = 'transparent';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
         return null;
     }
-    return (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: specProperties[OBJECT_VALUE_PROPERTY_NAME], name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (React.createElement(Controller, { initialValue: (_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 }));
+    if (Layout) {
+        return React.createElement(Layout, Object.assign({}, props), content);
+    }
+    return React.createElement(React.Fragment, null, content);
 };

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

@@ -1,27 +1,27 @@
 .df-oneof {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
 }
 .df-oneof:last-child > .df-group-indent {
   margin-bottom: 0;
 }
-.df-oneof:last-child > .df-group-indent:empty + .df-oneof__toggler {
-  margin-bottom: 0;
-}
-.df-oneof__toggler {
-  margin-bottom: 15px;
-}
 .df-oneof .df-group-indent {
   all: unset;
 }
 .df-oneof .df-group-indent > .df-use-search {
   padding-top: 11px;
   padding-left: 20px;
-  margin-top: -11px;
+  margin-top: 4px;
   margin-bottom: 20px;
   margin-left: 5px;
   border-left: 1px solid var(--yc-color-line-generic-accent);
 }
 .df-oneof .df-group-indent > .df-use-search:empty {
   display: none;
+}
+.df-oneof .df-group-indent > .df-use-search:last-child {
+  margin-bottom: 0;
+}
+.df-oneof .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
+  margin-top: -10px;
 }

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

@@ -15,7 +15,7 @@ export const OneOf = (props) => {
     }, [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() },
+        React.createElement("div", null, toggler),
         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, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null,
-        React.createElement("div", { className: b('toggler') }, toggler)));
+            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));
 };

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

@@ -26,15 +26,15 @@ export const OneOfCard = (props) => {
     }, [togglerInput, props, arrayItem]);
     const headerActionsTemplate = React.useMemo(() => {
         if (arrayItem) {
-            return React.createElement(RemoveButton, { onDrop: input.onDrop });
+            return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });
         }
         return null;
-    }, [arrayItem, input.onDrop]);
+    }, [arrayItem, input.onDrop, name]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
         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, 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, { 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

@@ -1,17 +1,27 @@
 import React from 'react';
 import _ from 'lodash';
-import { Controller, } from '../../../../core';
+import { Controller } from '../../../../core';
 const SECRET_PROPERTY_NAME = 'raw';
-export const Secret = ({ spec, name, input }) => {
+export const Secret = (props) => {
     var _a;
+    const { spec, name, input, Layout } = props;
+    const childSpec = React.useMemo(() => {
+        var _a, _b;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME]) {
+            const childSpec = _.cloneDeep((_b = spec.properties) === null || _b === void 0 ? void 0 : _b[SECRET_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = 'transparent';
+            return childSpec;
+        }
+        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 (!_.isObjectLike(spec.properties)) {
+    if (!childSpec) {
         return null;
     }
-    const specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[SECRET_PROPERTY_NAME]) {
-        return null;
+    const content = (React.createElement(Controller, { initialValue: (_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}` }));
+    if (Layout) {
+        return React.createElement(Layout, Object.assign({}, props), content);
     }
-    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}` }));
+    return React.createElement(React.Fragment, null, content);
 };

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

@@ -3,7 +3,7 @@ import { Select as SelectBase } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './Select.css';
 const b = block('select');
-export const Select = ({ input, spec }) => {
+export const Select = ({ name, input, spec }) => {
     var _a;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = React.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
@@ -28,5 +28,5 @@ export const Select = ({ input, spec }) => {
             onBlur();
         }
     }, [onFocus, onBlur]);
-    return (React.createElement(SelectBase, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable }));
+    return (React.createElement(SelectBase, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, qa: name }));
 };

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

@@ -41,7 +41,7 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             id: 'remove',
             name: '',
             sticky: 'right',
-            template: ({ key }) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
+            template: ({ key }) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
                 React.createElement(Icon, { data: Xmark, size: 16 }))),
         };
         const columns = table.map(({ property, label }) => ({
@@ -74,9 +74,9 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
     }
     return (React.createElement("div", { className: b() },
         keys.length ? (React.createElement(Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top", getRowClassNames: getRowClassNames })) : null,
-        !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled },
+        !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled, qa: `${name}-init-arr` },
             React.createElement(Icon, { data: Plus, size: 14 }),
-            spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },
+            spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled, qa: `${name}-add-item` },
             React.createElement(Icon, { data: Plus, size: 14 }),
             spec.viewSpec.itemLabel || null))));
 };

package/build/esm/lib/kit/components/Inputs/Text/Text.d.ts

@@ -1,2 +1,2 @@
 import { NumberInputProps, StringInputProps } from '../../../../core';
-export declare const Text: <T extends NumberInputProps | StringInputProps>({ input, spec }: T) => JSX.Element;
+export declare const Text: <T extends NumberInputProps | StringInputProps>({ name, input, spec }: T) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextInput } from '@gravity-ui/uikit';
 import _ from 'lodash';
-export const Text = ({ input, spec }) => {
+export const Text = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
     const handleChange = React.useCallback((value) => {
         onChange(value);
@@ -12,5 +12,5 @@ export const Text = ({ input, spec }) => {
         }
         return 'text';
     }, [spec.viewSpec.type]);
-    return (React.createElement(TextInput, { type: type, value: _.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined }));
+    return (React.createElement(TextInput, { type: type, value: _.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined, qa: name }));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInput as TextInputBase } from '@gravity-ui/uikit';
-export const TextArea = ({ input, spec }) => {
+export const TextArea = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
-    return (React.createElement(TextInputBase, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, multiline: true, placeholder: spec.viewSpec.placeholder }));
+    return (React.createElement(TextInputBase, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, multiline: true, placeholder: spec.viewSpec.placeholder, qa: name }));
 };

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

@@ -2,14 +2,27 @@ import React from 'react';
 import _ from 'lodash';
 import { Controller, isStringSpec, } from '../../../../core';
 const TEXT_LINK_PROPERTY_NAME = 'text';
-export const TextLink = ({ spec, input, name }) => {
+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 specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[TEXT_LINK_PROPERTY_NAME] ||
-        !isStringSpec(specProperties[TEXT_LINK_PROPERTY_NAME])) {
+    const childSpec = React.useMemo(() => {
+        var _a;
+        if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME]) &&
+            isStringSpec(spec.properties[TEXT_LINK_PROPERTY_NAME])) {
+            const childSpec = _.cloneDeep(spec.properties[TEXT_LINK_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = 'transparent';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
         return null;
     }
-    return (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: specProperties[TEXT_LINK_PROPERTY_NAME], name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (React.createElement(Controller, { initialValue: (_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 }));
+    if (Layout) {
+        return React.createElement(Layout, Object.assign({}, props), content);
+    }
+    return React.createElement(React.Fragment, null, content);
 };

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.js

@@ -14,9 +14,9 @@ export const Accordeon = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return React.createElement(RemoveButton, { name: name, onDrop: onDrop });
+    }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
+    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/Accordeon/RemoveButton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface RemoveButtonProps {
+    name: string;
     onDrop: () => void;
 }
 export declare const RemoveButton: React.FC<RemoveButtonProps>;

package/build/esm/lib/kit/components/Layouts/Accordeon/RemoveButton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { Ellipsis } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
 import i18n from '../../../i18n';
-export const RemoveButton = ({ onDrop }) => {
+export const RemoveButton = ({ name, onDrop }) => {
     const items = React.useMemo(() => [{ text: i18n('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
-    const switcher = React.useMemo(() => (React.createElement(Button, { view: "flat" },
+    const switcher = React.useMemo(() => (React.createElement(Button, { view: "flat", qa: `${name}-drop-item` },
         React.createElement(Icon, { data: Ellipsis, size: 16 }))), []);
     return React.createElement(DropdownMenu, { switcher: switcher, items: items });
 };

package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js

@@ -18,9 +18,9 @@ export const AccordeonCardLayout = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return React.createElement(RemoveButton, { onDrop: onDrop, name: name });
+    }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(AccordeonCard, { header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
+    return (React.createElement(AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/CardAccordeon.js

@@ -14,9 +14,9 @@ export const CardAccordeon = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return React.createElement(RemoveButton, { onDrop: onDrop, name: name });
+    }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/CardSection.js

@@ -6,8 +6,8 @@ export const CardSection = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: input.onDrop });
-    }, [spec.required, input.value, input.onDrop]);
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, alwaysOpen: true },
+        return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });
+    }, [spec.required, input.value, input.onDrop, name]);
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, alwaysOpen: true },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/Row/Row.js

@@ -18,7 +18,7 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
-                arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
             verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };

package/build/esm/lib/kit/components/Layouts/Row2/Row2.js

@@ -15,7 +15,7 @@ export const Row2 = ({ name, spec, input, meta, children, }) => {
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
-                isArrayItem(name) ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                isArrayItem(name) ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
             spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };

package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.js

@@ -14,7 +14,7 @@ const SectionCardBase = (_a) => {
     if (meta) {
         content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
     }
-    return (React.createElement(AccordeonCard, { className: b(), header: spec.viewSpec.layoutTitle, description: ignoreDescription ? undefined : spec.viewSpec.layoutDescription, titleSize: titleSize, alwaysOpen: true }, content));
+    return (React.createElement(AccordeonCard, { className: b(), name: name, header: spec.viewSpec.layoutTitle, description: ignoreDescription ? undefined : spec.viewSpec.layoutDescription, titleSize: titleSize, alwaysOpen: true }, content));
 };
 export const SectionCard = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "m" }));
 export const SectionCard2 = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "s" }));

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.js

@@ -11,11 +11,11 @@ export const Transparent = ({ name, spec, input, meta, children, }) => {
     const arrOrObjFlag = React.useMemo(() => isArraySpec(spec) || isObjectSpec(spec), [spec]);
     const removeButton = React.useMemo(() => {
         if (arrayItem) {
-            return (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+            return (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                 React.createElement(Icon, { data: Xmark, size: 16 })));
         }
         return null;
-    }, [input.onDrop, arrayItem]);
+    }, [input.onDrop, arrayItem, name]);
     return (React.createElement("div", { className: b({
             'array-item': arrayItem && !arrOrObjFlag,
             'without-max-width': arrOrObjFlag,

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

@@ -32,7 +32,7 @@
   font-size: var(--yc-text-body3-font-size);
 }
 .df-simple-vertical-accordeon__tooltip {
-  margin-right: 8px;
+  margin: 0px 5px;
 }
 .df-simple-vertical-accordeon__tooltip .yc-help-popover {
   display: flex;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import './SimpleVerticalAccordeon.css';
 interface SimpleVerticalAccordeonProps {
     children: React.ReactNode;
+    name: string;
     title: string;
     titleSize?: 's' | 'm' | 'l';
     note?: string;

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

@@ -44,7 +44,7 @@ export class SimpleVerticalAccordeon extends React.Component {
         this.checkVisibility();
     }
     render() {
-        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, } = this.props;
+        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (React.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (React.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -52,7 +52,7 @@ export class SimpleVerticalAccordeon extends React.Component {
         }
         return (Boolean(React.Children.count(children)) && (React.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             React.createElement("div", { className: b('header') },
-                React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick },
+                React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler` },
                     React.createElement("b", { className: b('title', { size: titleSize }) }, this.getTitle()),
                     React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 })),
                 this.getTooltip(),

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.d.ts

@@ -1,2 +1,2 @@
 import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
-export declare const ViewAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;
+export declare const ViewAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { isNotEmptyValue } from '../../../utils';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
-export const ViewAccordeon = ({ value, spec, children, }) => {
+export const ViewAccordeon = ({ name, value, spec, children, }) => {
     const [open, setOpen] = React.useState(true);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.d.ts

@@ -1,2 +1,2 @@
 import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
-export declare const ViewAccordeonCard: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;
+export declare const ViewAccordeonCard: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { AccordeonCard } from '../../';
 import { isNotEmptyValue } from '../../../utils';
-export const ViewAccordeonCard = ({ value, spec, children, }) => {
+export const ViewAccordeonCard = ({ name, value, spec, children, }) => {
     const [open, setOpen] = React.useState(true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(AccordeonCard, { header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
+    return (React.createElement(AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewCardAccordeon.d.ts

@@ -1,2 +1,2 @@
 import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../core';
-export declare const ViewCardAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;
+export declare const ViewCardAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Card } from '../';
 import { isNotEmptyValue } from '../../utils';
-export const ViewCardAccordeon = ({ value, spec, children, }) => {
+export const ViewCardAccordeon = ({ name, value, spec, children, }) => {
     const [open, setOpen] = React.useState(true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, open: open, onToggle: onToggle, checkEmptyBody: true }, children));
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, open: open, onToggle: onToggle, checkEmptyBody: true }, children));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewCardSection.d.ts

@@ -1,2 +1,2 @@
 import { FormValue, Spec, ViewLayoutProps } from '../../../core';
-export declare const ViewCardSection: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;
+export declare const ViewCardSection: <T extends FormValue, S extends Spec>({ name, value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Card } from '../../components';
 import { isNotEmptyValue } from '../../utils';
-export const ViewCardSection = ({ value, spec, children, }) => {
+export const ViewCardSection = ({ name, value, spec, children, }) => {
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, alwaysOpen: true, checkEmptyBody: true }, children));
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, alwaysOpen: true, checkEmptyBody: true }, children));
 };

package/build/esm/lib/kit/components/Views/CardOneOfView.js

@@ -19,5 +19,5 @@ export const CardOneOfView = (props) => {
     if (!value || !Object.keys(value).length) {
         return null;
     }
-    return (React.createElement(Card, { title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
+    return (React.createElement(Card, { name: name, title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
 };

package/build/esm/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.js

@@ -1,10 +1,25 @@
+import { __rest } from "tslib";
 import React from 'react';
+import _ from 'lodash';
 import { ViewController } from '../../../../core';
 const OBJECT_VALUE_PROPERTY_NAME = 'value';
-export const ObjectValueInputView = ({ spec, name }) => {
-    const specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[OBJECT_VALUE_PROPERTY_NAME]) {
+export const ObjectValueInputView = (_a) => {
+    var { spec, name, Layout } = _a, restProps = __rest(_a, ["spec", "name", "Layout"]);
+    const childSpec = React.useMemo(() => {
+        var _a;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME]) {
+            const childSpec = _.cloneDeep(spec.properties[OBJECT_VALUE_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
         return null;
     }
-    return (React.createElement(ViewController, { spec: specProperties[OBJECT_VALUE_PROPERTY_NAME], name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
+    const content = (React.createElement(ViewController, { spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
+    if (Layout) {
+        return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+    }
+    return React.createElement(React.Fragment, null, content);
 };

package/build/esm/lib/kit/components/Views/OneOfCardView.js

@@ -24,5 +24,5 @@ export const OneOfCardView = (props) => {
     if (!value || !Object.keys(value).length) {
         return null;
     }
-    return (React.createElement(AccordeonCard, { className: "df-accordeon-card-layout", header: wrappedValue, open: open, onToggle: onToggle, ignoreHeaderToggle: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
+    return (React.createElement(AccordeonCard, { className: "df-accordeon-card-layout", name: name, header: wrappedValue, open: open, onToggle: onToggle, ignoreHeaderToggle: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
 };

package/build/esm/lib/kit/components/Views/TextLinkView/TextLinkView.js

@@ -1,12 +1,27 @@
+import { __rest } from "tslib";
 import React from 'react';
-import { ViewController } from '../../../../core';
+import _ from 'lodash';
+import { ViewController, isStringSpec } from '../../../../core';
 const TEXT_LINK_PROPERTY_NAME = 'text';
-export const TextLinkView = ({ value, spec, name }) => {
-    const specProperties = spec.properties;
-    const preparedSpec = React.useMemo(() => {
+export const TextLinkView = (_a) => {
+    var { value, spec, name, Layout } = _a, restProps = __rest(_a, ["value", "spec", "name", "Layout"]);
+    const childSpec = React.useMemo(() => {
         var _a;
-        return specProperties && specProperties[TEXT_LINK_PROPERTY_NAME]
-            ? Object.assign(Object.assign({}, specProperties[TEXT_LINK_PROPERTY_NAME]), { viewSpec: Object.assign(Object.assign({}, (_a = specProperties[TEXT_LINK_PROPERTY_NAME]) === null || _a === void 0 ? void 0 : _a.viewSpec), { link: value === null || value === void 0 ? void 0 : value.link }) }) : undefined;
-    }, [specProperties, value === null || value === void 0 ? void 0 : value.link]);
-    return preparedSpec ? (React.createElement(ViewController, { spec: preparedSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}` })) : null;
+        if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME]) &&
+            isStringSpec(spec.properties[TEXT_LINK_PROPERTY_NAME])) {
+            const childSpec = _.cloneDeep(spec.properties[TEXT_LINK_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            childSpec.viewSpec.link = value === null || value === void 0 ? void 0 : value.link;
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties, value === null || value === void 0 ? void 0 : value.link]);
+    if (!childSpec || !(value === null || value === void 0 ? void 0 : value.text)) {
+        return null;
+    }
+    const content = React.createElement(ViewController, { spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}` });
+    if (Layout) {
+        return (React.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
+    }
+    return React.createElement(React.Fragment, null, content);
 };

package/build/esm/lib/kit/hooks/useOneOf.js

@@ -3,7 +3,7 @@ import { RadioButton, Select } from '@gravity-ui/uikit';
 import _ from 'lodash';
 const MAX_TAB_TITLE_LENGTH = 20;
 export const useOneOf = ({ props, onTogglerChange }) => {
-    const { input, spec, Layout } = props;
+    const { name, input, spec, Layout } = props;
     const specProperties = React.useMemo(() => (_.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
     const [oneOfValue, setOneOfValue] = React.useState(() => {
         let valueKeys;
@@ -37,10 +37,10 @@ export const useOneOf = ({ props, onTogglerChange }) => {
     const togglerInput = React.useMemo(() => {
         if (options.length > 3 ||
             _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH)) {
-            return (React.createElement(Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7 }));
+            return (React.createElement(Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
         }
-        return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
-    }, [options, oneOfValue, onOneOfChange]);
+        return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
+    }, [options, oneOfValue, onOneOfChange, name]);
     const toggler = React.useMemo(() => {
         if (Layout) {
             return React.createElement(Layout, Object.assign({}, props), togglerInput);