@gravity-ui/dynamic-forms 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [1.6.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.5.0...v1.6.0) (2023-04-28)
+
+
+### Features
+
+* adapt useStore and useField with 18 react ([#31](https://github.com/gravity-ui/dynamic-forms/issues/31)) ([d64ae4a](https://github.com/gravity-ui/dynamic-forms/commit/d64ae4a1b3f9f2e8b02288c1088679b5c848f738))
+
+
+### Bug Fixes
+
+* fixed display for accordeon layoutDescription ([#34](https://github.com/gravity-ui/dynamic-forms/issues/34)) ([fa58210](https://github.com/gravity-ui/dynamic-forms/commit/fa58210239df31911f3865262a4d33bd653e1b01))
+* fixed display for one of ([#33](https://github.com/gravity-ui/dynamic-forms/issues/33)) ([823c8fc](https://github.com/gravity-ui/dynamic-forms/commit/823c8fceddcb9a7e0cf021c1b122470cf58db4df))
+
 ## [1.5.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.4.1...v1.5.0) (2023-04-18)
 
 

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

@@ -133,6 +133,9 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
+            if ((0, helpers_1.isReact18OrMore)()) {
+                firstRenderRef.current = true;
+            }
             (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
         };
     }, []);

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_final_form_1 = require("react-final-form");
+const helpers_1 = require("../../../helpers");
 const utils_1 = require("../utils");
 const useStore = (name) => {
     const form = (0, react_final_form_1.useForm)();
@@ -42,6 +43,11 @@ const useStore = (name) => {
     }, [name]);
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
+        return () => {
+            if ((0, helpers_1.isReact18OrMore)()) {
+                firstRenderRef.current = true;
+            }
+        };
     }, []);
     return { tools, store };
 };

package/build/cjs/lib/core/helpers.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isStringSpec = exports.isObjectSpec = exports.isNumberSpec = exports.isBooleanSpec = exports.isArraySpec = exports.isCorrectSpec = void 0;
+exports.isReact18OrMore = exports.isStringSpec = exports.isObjectSpec = exports.isNumberSpec = exports.isBooleanSpec = exports.isArraySpec = exports.isCorrectSpec = void 0;
 const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const constants_1 = require("./constants");
 const isCorrectSpec = (candidate) => lodash_1.default.isObjectLike(candidate) &&
@@ -23,3 +24,5 @@ const isObjectSpec = (candidate) => (candidate === null || candidate === void 0
 exports.isObjectSpec = isObjectSpec;
 const isStringSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === constants_1.SpecTypes.String;
 exports.isStringSpec = isStringSpec;
+const isReact18OrMore = () => Number(react_1.default.version.split('.')[0]) >= 18;
+exports.isReact18OrMore = isReact18OrMore;

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

@@ -8,7 +8,7 @@ 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)('accordeon-card');
-const AccordeonCard = ({ className, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, }) => {
+const AccordeonCard = ({ className, name, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, }) => {
     const accordeonRef = react_1.default.useRef(null);
     const bodyRef = react_1.default.useRef(null);
     const [open, setOpen] = react_1.default.useState(alwaysOpen || propsOpen || false);
@@ -43,7 +43,7 @@ const AccordeonCard = ({ className, header, description, open: propsOpen, onTogg
                 description ? (react_1.default.createElement("span", { className: b('header-content-description'), dangerouslySetInnerHTML: { __html: description } })) : null),
             !emptyBody && !alwaysOpen ? (react_1.default.createElement("div", { className: b('header-toggle-btn'), onClick: preventEvent },
                 headerActionsTemplate ? (react_1.default.createElement("div", { className: b('interal-actions') }, headerActionsTemplate)) : null,
-                react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleToggle },
+                react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleToggle, qa: `${name}-accordeon-toggler` },
                     react_1.default.createElement(uikit_1.Icon, { className: b('toggle-icon', { open }), data: icons_1.ChevronDown, size: 16 })))) : null),
         react_1.default.createElement("div", { ref: bodyRef, className: b('body', { open: open && !emptyBody }) }, children)));
 };

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

@@ -8,7 +8,7 @@ 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)('card');
-const Card = ({ title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
+const Card = ({ name, title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
     const containerRef = react_1.default.useRef(null);
     const bodyRef = react_1.default.useRef(null);
     const [open, setOpen] = react_1.default.useState(alwaysOpen || propsOpen || false);
@@ -58,7 +58,7 @@ const Card = ({ title: propsTitle, description, actions, open: propsOpen, onTogg
             react_1.default.createElement("div", { className: b('header-right'), onClick: preventEvent },
                 actions ? react_1.default.createElement("div", { className: b('actions') }, actions) : null,
                 alwaysOpen ? null : (react_1.default.createElement("div", { className: b('toggler') },
-                    react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleToggle },
+                    react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleToggle, qa: `${name}-accordeon-toggler` },
                         react_1.default.createElement(uikit_1.Icon, { className: b('toggler-icon', { open }), data: icons_1.ChevronDown, size: 16 })))))),
         react_1.default.createElement("div", { ref: bodyRef, className: b('body', { open }) }, children)));
 };

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

@@ -53,9 +53,9 @@ const ArrayBase = ({ spec, name, arrayInput, input }) => {
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         items,
-        !arrayInput.value && spec.defaultValue ? (react_1.default.createElement(uikit_1.Button, { onClick: () => input.onChange((0, core_1.transformArrIn)(spec.defaultValue)), disabled: spec.viewSpec.disabled },
+        !arrayInput.value && spec.defaultValue ? (react_1.default.createElement(uikit_1.Button, { onClick: () => input.onChange((0, core_1.transformArrIn)(spec.defaultValue)), disabled: spec.viewSpec.disabled, qa: `${name}-init-arr` },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
-            spec.viewSpec.layoutTitle || null)) : (react_1.default.createElement(uikit_1.Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },
+            spec.viewSpec.layoutTitle || null)) : (react_1.default.createElement(uikit_1.Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled, qa: `${name}-add-item` },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
             spec.viewSpec.itemLabel || null))));
 };

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

@@ -22,7 +22,7 @@ const CardOneOf = (props) => {
     const toggler = react_1.default.useMemo(() => (react_1.default.createElement(Layouts_1.Row, Object.assign({}, props, { name: "__stub-name" }), togglerInput)), [togglerInput, props]);
     const actions = react_1.default.useMemo(() => {
         if ((0, core_1.isArrayItem)(name)) {
-            return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop });
+            return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop, name: name });
         }
         return;
     }, [name, input.onDrop]);
@@ -32,6 +32,6 @@ const CardOneOf = (props) => {
     }, [input.onChange, input.name]);
     const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(__1.Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, 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, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };
 exports.CardOneOf = CardOneOf;

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

@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('checkbox');
-const Checkbox = ({ input, spec }) => {
+const Checkbox = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
     const handleChange = react_1.default.useCallback((e) => onChange(e.target.checked), [onChange]);
     return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement(uikit_1.Checkbox, { checked: value, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, disabled: spec.viewSpec.disabled })));
+        react_1.default.createElement(uikit_1.Checkbox, { checked: value, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, disabled: spec.viewSpec.disabled, qa: name })));
 };
 exports.Checkbox = Checkbox;

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

@@ -9,7 +9,7 @@ const i18n_1 = tslib_1.__importDefault(require("../../../../kit/i18n"));
 const utils_1 = require("../../../utils");
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('file-input');
-const FileInput = ({ input, spec }) => {
+const FileInput = ({ name, input, spec }) => {
     var _a, _b;
     const { value, onChange } = input;
     const inputRef = react_1.default.useRef(null);
@@ -41,10 +41,10 @@ const FileInput = ({ input, spec }) => {
         return null;
     }, [fileName, value]);
     return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement(uikit_1.Button, { disabled: spec.viewSpec.disabled, onClick: handleClick }, (0, i18n_1.default)('button-upload_file')),
+        react_1.default.createElement(uikit_1.Button, { disabled: spec.viewSpec.disabled, onClick: handleClick, qa: `${name}-file-upload` }, (0, i18n_1.default)('button-upload_file')),
         react_1.default.createElement("input", { type: "file", ref: inputRef, autoComplete: "off", disabled: spec.viewSpec.disabled, onChange: handleInputChange, className: b('input'), tabIndex: -1, accept: (_b = spec.viewSpec.fileInput) === null || _b === void 0 ? void 0 : _b.accept }),
         react_1.default.createElement("span", { className: b('file-name') }, fileNameContent),
-        value ? (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled },
+        value ? (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled, qa: `${name}-file-remove` },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null));
 };
 exports.FileInput = FileInput;

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js

@@ -11,7 +11,7 @@ const MonacoHeader_1 = require("./MonacoHeader");
 const MonacoInputDialog_1 = require("./MonacoInputDialog");
 const useMonacoOptions_1 = require("./useMonacoOptions");
 const b = (0, utils_1.block)('monaco-input');
-const MonacoInputBase = ({ input, spec, card, MonacoComponent, withoutDialog, }) => {
+const MonacoInputBase = ({ name, input, spec, card, MonacoComponent, withoutDialog, }) => {
     const { value, onChange } = input;
     const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
     const { monacoParams, disabled, layoutTitle } = spec.viewSpec;
@@ -21,21 +21,21 @@ const MonacoInputBase = ({ input, spec, card, MonacoComponent, withoutDialog, })
     const handleMonacoEditorDialogClose = react_1.default.useCallback(() => setMonacoEditorDialog(false), []);
     const dialogButton = react_1.default.useMemo(() => {
         if (!withoutDialog) {
-            return (react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true) },
+            return (react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true), qa: `${name}-open-dialog` },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: 16 })));
         }
         return;
-    }, [withoutDialog, setMonacoEditorDialog]);
+    }, [withoutDialog, setMonacoEditorDialog, name]);
     react_1.default.useEffect(() => onChange(monacoValue), [monacoValue]);
     const options = (0, useMonacoOptions_1.useMonacoOptions)(fontSize, disabled !== null && disabled !== void 0 ? disabled : false);
     if (!MonacoEditor) {
         return null;
     }
     return (react_1.default.createElement("div", { className: b({ card }) },
-        react_1.default.createElement("div", { className: b('container') },
+        react_1.default.createElement("div", { className: b('container'), "data-qa": name },
             react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card, editButton: dialogButton }),
             react_1.default.createElement(MonacoEditor, { language: language, value: monacoValue, height: "300", onChange: setMonacoValue, options: options })),
-        react_1.default.createElement(MonacoInputDialog_1.MonacoInputDialog, { title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, card: card, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
+        react_1.default.createElement(MonacoInputDialog_1.MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, card: card, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
 };
 exports.MonacoInputBase = MonacoInputBase;
 const MonacoInput = (props) => (react_1.default.createElement(exports.MonacoInputBase, Object.assign({}, props)));

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js

@@ -10,7 +10,7 @@ const utils_1 = require("../../../utils");
 const MonacoHeader_1 = require("./MonacoHeader");
 const useMonacoOptions_1 = require("./useMonacoOptions");
 const b = (0, utils_1.block)('monaco-input-dialog');
-const MonacoInputDialog = ({ value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
+const MonacoInputDialog = ({ name, value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
     const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
     const handleClose = react_1.default.useCallback(() => {
         onChange(value);
@@ -23,7 +23,7 @@ const MonacoInputDialog = ({ value, title, visible, language, card, onChange, on
     return (react_1.default.createElement(uikit_1.Dialog, { open: visible, onClose: handleClose, className: b() },
         react_1.default.createElement(uikit_1.Dialog.Header, { caption: title, className: b('dialog-header') }),
         react_1.default.createElement(uikit_1.Dialog.Body, null,
-            react_1.default.createElement("div", { className: b('container') },
+            react_1.default.createElement("div", { className: b('container'), "data-qa": `${name}-dialog` },
                 react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card }),
                 react_1.default.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, options: options }))),
         react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));

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

@@ -7,7 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('multi-select');
-const MultiSelect = ({ input, spec }) => {
+const MultiSelect = ({ name, input, spec }) => {
     var _a;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = react_1.default.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]);
@@ -33,6 +33,6 @@ const MultiSelect = ({ input, spec }) => {
     }, [onFocus, onBlur]);
     const _value = react_1.default.useMemo(() => (0, core_1.transformArrOut)(value), [value]);
     const handleChange = react_1.default.useCallback((value) => onChange((0, core_1.transformArrIn)(value)), [onChange]);
-    return (react_1.default.createElement(uikit_1.Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true }));
+    return (react_1.default.createElement(uikit_1.Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true, qa: name }));
 };
 exports.MultiSelect = MultiSelect;

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

@@ -7,7 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const useInitial_1 = require("./useInitial");
 const b = (0, utils_1.block)('number-with-scale');
-const NumberWithScaleBase = ({ input, spec }) => {
+const NumberWithScaleBase = ({ name, input, spec }) => {
     const { value = '', onBlur, onFocus, onChange } = input;
     const { sizeParams, disabled, placeholder } = spec.viewSpec;
     const { defaultType, scale } = sizeParams;
@@ -64,8 +64,8 @@ const NumberWithScaleBase = ({ input, spec }) => {
         }
     }, [setPreparedValue, setScaleValue, incorrectStringNumber, value, scale, defaultType]);
     return (react_1.default.createElement("div", { className: b('wrapper') },
-        react_1.default.createElement(uikit_1.TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled }),
-        react_1.default.createElement(uikit_1.Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber })));
+        react_1.default.createElement(uikit_1.TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled, qa: name }),
+        react_1.default.createElement(uikit_1.Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber, qa: `${name}-scale` })));
 };
 const NumberWithScale = (props) => (0, utils_1.isCorrectSizeParams)(props.spec) ? react_1.default.createElement(NumberWithScaleBase, Object.assign({}, props)) : null;
 exports.NumberWithScale = NumberWithScale;

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

@@ -11,7 +11,7 @@ const ObjectBase = (_a) => {
     var { spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "name", "Layout"]);
     const addBtn = react_1.default.useMemo(() => {
         var _a;
-        return (react_1.default.createElement(uikit_1.Button, { onClick: () => restProps.input.onChange((0, core_1.transformArrIn)(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled },
+        return (react_1.default.createElement(uikit_1.Button, { onClick: () => restProps.input.onChange((0, core_1.transformArrIn)(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled, qa: `${name}-init-obj` },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
             spec.viewSpec.layoutTitle || null));
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
@@ -21,7 +21,7 @@ const ObjectBase = (_a) => {
         if (!lodash_1.default.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
             return null;
         }
-        if (!restProps.input.value && !spec.viewSpec.showOptional) {
+        if (!restProps.input.value) {
             return addBtn;
         }
         const specProperties = Object.assign({}, spec.properties);

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

@@ -6,14 +6,27 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../../../core");
 const OBJECT_VALUE_PROPERTY_NAME = 'value';
-const ObjectValueInput = ({ spec, input, name }) => {
+const ObjectValueInput = (props) => {
     var _a;
-    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 { 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 specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[OBJECT_VALUE_PROPERTY_NAME]) {
+    const childSpec = react_1.default.useMemo(() => {
+        var _a;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME]) {
+            const childSpec = lodash_1.default.cloneDeep(spec.properties[OBJECT_VALUE_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
         return null;
     }
-    return (react_1.default.createElement(core_1.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_1.default.createElement(core_1.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_1.default.createElement(Layout, Object.assign({}, props), content);
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.ObjectValueInput = ObjectValueInput;

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

@@ -18,8 +18,8 @@ const OneOf = (props) => {
     }, [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() },
+        react_1.default.createElement("div", null, toggler),
         specProperties[oneOfValue] ? (react_1.default.createElement(__1.GroupIndent, null,
-            react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null,
-        react_1.default.createElement("div", { className: b('toggler') }, toggler)));
+            react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
 };
 exports.OneOf = OneOf;

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

@@ -29,16 +29,16 @@ const OneOfCard = (props) => {
     }, [togglerInput, props, arrayItem]);
     const headerActionsTemplate = react_1.default.useMemo(() => {
         if (arrayItem) {
-            return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop });
+            return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop, name: name });
         }
         return null;
-    }, [arrayItem, input.onDrop]);
+    }, [arrayItem, input.onDrop, name]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => {
         const value = lodash_1.default.set({}, childName.split(`${input.name}.`).join(''), childValue);
         input.onChange(value, childErrors);
     }, [input.onChange, input.name]);
     const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(__1.AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, 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, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };
 exports.OneOfCard = OneOfCard;

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

@@ -6,17 +6,27 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../../../core");
 const SECRET_PROPERTY_NAME = 'raw';
-const Secret = ({ spec, name, input }) => {
+const Secret = (props) => {
     var _a;
+    const { spec, name, input, Layout } = props;
+    const childSpec = react_1.default.useMemo(() => {
+        var _a, _b;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME]) {
+            const childSpec = lodash_1.default.cloneDeep((_b = spec.properties) === null || _b === void 0 ? void 0 : _b[SECRET_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        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 (!lodash_1.default.isObjectLike(spec.properties)) {
+    if (!childSpec) {
         return null;
     }
-    const specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[SECRET_PROPERTY_NAME]) {
-        return null;
+    const content = (react_1.default.createElement(core_1.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_1.default.createElement(Layout, Object.assign({}, props), content);
     }
-    return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: specProperties[SECRET_PROPERTY_NAME], name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.Secret = Secret;

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

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('select');
-const Select = ({ input, spec }) => {
+const Select = ({ name, input, spec }) => {
     var _a;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = react_1.default.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]);
@@ -31,6 +31,6 @@ const Select = ({ input, spec }) => {
             onBlur();
         }
     }, [onFocus, onBlur]);
-    return (react_1.default.createElement(uikit_1.Select, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable }));
+    return (react_1.default.createElement(uikit_1.Select, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, qa: name }));
 };
 exports.Select = Select;

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

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

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

@@ -5,7 +5,7 @@ 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 Text = ({ input, spec }) => {
+const Text = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
     const handleChange = react_1.default.useCallback((value) => {
         onChange(value);
@@ -16,6 +16,6 @@ const Text = ({ input, spec }) => {
         }
         return 'text';
     }, [spec.viewSpec.type]);
-    return (react_1.default.createElement(uikit_1.TextInput, { type: type, value: lodash_1.default.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_1.default.createElement(uikit_1.TextInput, { type: type, value: lodash_1.default.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 }));
 };
 exports.Text = Text;

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

@@ -4,8 +4,8 @@ exports.TextArea = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const TextArea = ({ input, spec }) => {
+const TextArea = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
-    return (react_1.default.createElement(uikit_1.TextInput, { 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_1.default.createElement(uikit_1.TextInput, { 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 }));
 };
 exports.TextArea = TextArea;

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

@@ -6,15 +6,28 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../../../core");
 const TEXT_LINK_PROPERTY_NAME = 'text';
-const TextLink = ({ spec, input, name }) => {
+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 specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[TEXT_LINK_PROPERTY_NAME] ||
-        !(0, core_1.isStringSpec)(specProperties[TEXT_LINK_PROPERTY_NAME])) {
+    const childSpec = react_1.default.useMemo(() => {
+        var _a;
+        if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME]) &&
+            (0, core_1.isStringSpec)(spec.properties[TEXT_LINK_PROPERTY_NAME])) {
+            const childSpec = lodash_1.default.cloneDeep(spec.properties[TEXT_LINK_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
         return null;
     }
-    return (react_1.default.createElement(core_1.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_1.default.createElement(core_1.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_1.default.createElement(Layout, Object.assign({}, props), content);
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.TextLink = TextLink;

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

@@ -18,10 +18,10 @@ const Accordeon = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: onDrop });
+    }, [spec.required, input.value, onDrop, name]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
+    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
         react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };
 exports.Accordeon = Accordeon;

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

@@ -6,9 +6,9 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const i18n_1 = tslib_1.__importDefault(require("../../../i18n"));
-const RemoveButton = ({ onDrop }) => {
+const RemoveButton = ({ name, onDrop }) => {
     const items = react_1.default.useMemo(() => [{ text: (0, i18n_1.default)('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
-    const switcher = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Button, { view: "flat" },
+    const switcher = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Button, { view: "flat", qa: `${name}-drop-item` },
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, size: 16 }))), []);
     return react_1.default.createElement(uikit_1.DropdownMenu, { switcher: switcher, items: items });
 };

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

@@ -21,10 +21,10 @@ const AccordeonCardLayout = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop, name: name });
+    }, [spec.required, input.value, onDrop, name]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(__1.AccordeonCard, { header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
+    return (react_1.default.createElement(__1.AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
         react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };
 exports.AccordeonCardLayout = AccordeonCardLayout;

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

@@ -18,10 +18,10 @@ const CardAccordeon = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop, name: name });
+    }, [spec.required, input.value, onDrop, name]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(components_1.Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
+    return (react_1.default.createElement(components_1.Card, { name: name, title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
         react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };
 exports.CardAccordeon = CardAccordeon;