@gravity-ui/dynamic-forms 1.5.0 → 1.6.0

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

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

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

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

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

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

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

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

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

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

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

@@ -47,7 +47,7 @@ class SimpleVerticalAccordeon extends react_1.default.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_1.default.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (react_1.default.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -55,7 +55,7 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         }
         return (Boolean(react_1.default.Children.count(children)) && (react_1.default.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             react_1.default.createElement("div", { className: b('header') },
-                react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick },
+                react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler` },
                     react_1.default.createElement("b", { className: b('title', { size: titleSize }) }, this.getTitle()),
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: b('chevron', { open }), size: 16 })),
                 this.getTooltip(),

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

@@ -5,11 +5,11 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
 const SimpleVerticalAccordeon_1 = require("../../SimpleVerticalAccordeon");
-const ViewAccordeon = ({ value, spec, children, }) => {
+const ViewAccordeon = ({ name, value, spec, children, }) => {
     const [open, setOpen] = react_1.default.useState(true);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }
-    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
 };
 exports.ViewAccordeon = ViewAccordeon;

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

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const __1 = require("../../");
 const utils_1 = require("../../../utils");
-const ViewAccordeonCard = ({ value, spec, children, }) => {
+const ViewAccordeonCard = ({ name, value, spec, children, }) => {
     const [open, setOpen] = react_1.default.useState(true);
     const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }
-    return (react_1.default.createElement(__1.AccordeonCard, { header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
+    return (react_1.default.createElement(__1.AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
 };
 exports.ViewAccordeonCard = ViewAccordeonCard;

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

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const __1 = require("../");
 const utils_1 = require("../../utils");
-const ViewCardAccordeon = ({ value, spec, children, }) => {
+const ViewCardAccordeon = ({ name, value, spec, children, }) => {
     const [open, setOpen] = react_1.default.useState(true);
     const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }
-    return (react_1.default.createElement(__1.Card, { title: spec.viewSpec.layoutTitle, open: open, onToggle: onToggle, checkEmptyBody: true }, children));
+    return (react_1.default.createElement(__1.Card, { name: name, title: spec.viewSpec.layoutTitle, open: open, onToggle: onToggle, checkEmptyBody: true }, children));
 };
 exports.ViewCardAccordeon = ViewCardAccordeon;

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

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
-const ViewCardSection = ({ value, spec, children, }) => {
+const ViewCardSection = ({ name, value, spec, children, }) => {
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }
-    return (react_1.default.createElement(components_1.Card, { title: spec.viewSpec.layoutTitle, alwaysOpen: true, checkEmptyBody: true }, children));
+    return (react_1.default.createElement(components_1.Card, { name: name, title: spec.viewSpec.layoutTitle, alwaysOpen: true, checkEmptyBody: true }, children));
 };
 exports.ViewCardSection = ViewCardSection;

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

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

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

@@ -3,13 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectValueInputView = void 0;
 const tslib_1 = require("tslib");
 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 ObjectValueInputView = ({ spec, name }) => {
-    const specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[OBJECT_VALUE_PROPERTY_NAME]) {
+const ObjectValueInputView = (_a) => {
+    var { spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "name", "Layout"]);
+    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.ViewController, { spec: specProperties[OBJECT_VALUE_PROPERTY_NAME], name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
+    const content = (react_1.default.createElement(core_1.ViewController, { spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
+    if (Layout) {
+        return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.ObjectValueInputView = ObjectValueInputView;

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

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

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

@@ -3,15 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLinkView = void 0;
 const tslib_1 = require("tslib");
 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 TextLinkView = ({ value, spec, name }) => {
-    const specProperties = spec.properties;
-    const preparedSpec = react_1.default.useMemo(() => {
+const TextLinkView = (_a) => {
+    var { value, spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["value", "spec", "name", "Layout"]);
+    const childSpec = react_1.default.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_1.default.createElement(core_1.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]) &&
+            (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 = '';
+            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_1.default.createElement(core_1.ViewController, { spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}` });
+    if (Layout) {
+        return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.TextLinkView = TextLinkView;

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

@@ -7,7 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const MAX_TAB_TITLE_LENGTH = 20;
 const useOneOf = ({ props, onTogglerChange }) => {
-    const { input, spec, Layout } = props;
+    const { name, input, spec, Layout } = props;
     const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
     const [oneOfValue, setOneOfValue] = react_1.default.useState(() => {
         let valueKeys;
@@ -41,10 +41,10 @@ const useOneOf = ({ props, onTogglerChange }) => {
     const togglerInput = react_1.default.useMemo(() => {
         if (options.length > 3 ||
             lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH)) {
-            return (react_1.default.createElement(uikit_1.Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7 }));
+            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 }, options.map((option) => (react_1.default.createElement(uikit_1.RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
-    }, [options, oneOfValue, onOneOfChange]);
+        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]);
     const toggler = react_1.default.useMemo(() => {
         if (Layout) {
             return react_1.default.createElement(Layout, Object.assign({}, props), togglerInput);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
-import { isArraySpec, isObjectSpec } from '../../../helpers';
+import { isArraySpec, isObjectSpec, isReact18OrMore } from '../../../helpers';
 import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM } from '../constants';
 import { isArrayItem, transformArrIn, transformArrOut } from '../utils';
 export const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
@@ -129,6 +129,9 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
     React.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
+            if (isReact18OrMore()) {
+                firstRenderRef.current = true;
+            }
             (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
         };
     }, []);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { useForm } from 'react-final-form';
+import { isReact18OrMore } from '../../../helpers';
 import { transformArrIn } from '../utils';
 export const useStore = (name) => {
     const form = useForm();
@@ -38,6 +39,11 @@ export const useStore = (name) => {
     }, [name]);
     React.useEffect(() => {
         firstRenderRef.current = false;
+        return () => {
+            if (isReact18OrMore()) {
+                firstRenderRef.current = true;
+            }
+        };
     }, []);
     return { tools, store };
 };

package/build/esm/lib/core/helpers.d.ts

@@ -5,3 +5,4 @@ export declare const isBooleanSpec: (candidate: any) => candidate is BooleanSpec
 export declare const isNumberSpec: (candidate: any) => candidate is NumberSpec<any>;
 export declare const isObjectSpec: (candidate: any) => candidate is ObjectSpec<any>;
 export declare const isStringSpec: (candidate: any) => candidate is StringSpec<any>;
+export declare const isReact18OrMore: () => boolean;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import _ from 'lodash';
 import { SpecTypes } from './constants';
 export const isCorrectSpec = (candidate) => _.isObjectLike(candidate) &&
@@ -13,3 +14,4 @@ export const isBooleanSpec = (candidate) => (candidate === null || candidate ===
 export const isNumberSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === SpecTypes.Number;
 export const isObjectSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === SpecTypes.Object;
 export const isStringSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === SpecTypes.String;
+export const isReact18OrMore = () => Number(React.version.split('.')[0]) >= 18;

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

@@ -77,7 +77,6 @@ export interface ObjectSpec<LinkType = any> {
         layoutOpen?: boolean;
         order?: string[];
         link?: LinkType;
-        showOptional?: boolean;
     };
 }
 export interface StringSpec<LinkType = any> {

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

@@ -2,6 +2,7 @@ import React from 'react';
 import './AccordeonCard.css';
 export interface AccordeonCardProps {
     children: React.ReactNode;
+    name: string;
     header: React.ReactNode;
     description?: string;
     className?: string;

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

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import { block } from '../../utils';
 import './AccordeonCard.css';
 const b = block('accordeon-card');
-export const AccordeonCard = ({ className, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, }) => {
+export const AccordeonCard = ({ className, name, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, }) => {
     const accordeonRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
@@ -40,7 +40,7 @@ export const AccordeonCard = ({ className, header, description, open: propsOpen,
                 description ? (React.createElement("span", { className: b('header-content-description'), dangerouslySetInnerHTML: { __html: description } })) : null),
             !emptyBody && !alwaysOpen ? (React.createElement("div", { className: b('header-toggle-btn'), onClick: preventEvent },
                 headerActionsTemplate ? (React.createElement("div", { className: b('interal-actions') }, headerActionsTemplate)) : null,
-                React.createElement(Button, { view: "flat", onClick: handleToggle },
+                React.createElement(Button, { view: "flat", onClick: handleToggle, qa: `${name}-accordeon-toggler` },
                     React.createElement(Icon, { className: b('toggle-icon', { open }), data: ChevronDown, size: 16 })))) : null),
         React.createElement("div", { ref: bodyRef, className: b('body', { open: open && !emptyBody }) }, children)));
 };

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

@@ -2,6 +2,7 @@ import React from 'react';
 import './Card.css';
 export interface CardProps {
     children: React.ReactNode;
+    name: string;
     title?: string | React.ReactNode;
     description?: string;
     actions?: React.ReactNode;

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

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import { block } from '../../utils';
 import './Card.css';
 const b = block('card');
-export const Card = ({ title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
+export const Card = ({ name, title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
     const containerRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
@@ -55,7 +55,7 @@ export const Card = ({ title: propsTitle, description, actions, open: propsOpen,
             React.createElement("div", { className: b('header-right'), onClick: preventEvent },
                 actions ? React.createElement("div", { className: b('actions') }, actions) : null,
                 alwaysOpen ? null : (React.createElement("div", { className: b('toggler') },
-                    React.createElement(Button, { view: "flat", onClick: handleToggle },
+                    React.createElement(Button, { view: "flat", onClick: handleToggle, qa: `${name}-accordeon-toggler` },
                         React.createElement(Icon, { className: b('toggler-icon', { open }), data: ChevronDown, size: 16 })))))),
         React.createElement("div", { ref: bodyRef, className: b('body', { open }) }, children)));
 };

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

@@ -49,9 +49,9 @@ export const ArrayBase = ({ spec, name, arrayInput, input }) => {
     }
     return (React.createElement(React.Fragment, null,
         items,
-        !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/CardOneOf/CardOneOf.js

@@ -18,7 +18,7 @@ export const CardOneOf = (props) => {
     const toggler = React.useMemo(() => (React.createElement(Row, Object.assign({}, props, { name: "__stub-name" }), togglerInput)), [togglerInput, props]);
     const actions = React.useMemo(() => {
         if (isArrayItem(name)) {
-            return React.createElement(RemoveButton, { onDrop: input.onDrop });
+            return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });
         }
         return;
     }, [name, input.onDrop]);
@@ -28,5 +28,5 @@ export const CardOneOf = (props) => {
     }, [input.onChange, input.name]);
     const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
+    return (React.createElement(Card, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };

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

@@ -3,9 +3,9 @@ import { Checkbox as CheckboxBase } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './Checkbox.css';
 const b = block('checkbox');
-export const Checkbox = ({ input, spec }) => {
+export const Checkbox = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
     const handleChange = React.useCallback((e) => onChange(e.target.checked), [onChange]);
     return (React.createElement("div", { className: b() },
-        React.createElement(CheckboxBase, { checked: value, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, disabled: spec.viewSpec.disabled })));
+        React.createElement(CheckboxBase, { checked: value, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, disabled: spec.viewSpec.disabled, qa: name })));
 };

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

@@ -6,7 +6,7 @@ import { block } from '../../../utils';
 import { readFile } from './utils';
 import './FileInput.css';
 const b = block('file-input');
-export const FileInput = ({ input, spec }) => {
+export const FileInput = ({ name, input, spec }) => {
     var _a, _b;
     const { value, onChange } = input;
     const inputRef = React.useRef(null);
@@ -38,9 +38,9 @@ export const FileInput = ({ input, spec }) => {
         return null;
     }, [fileName, value]);
     return (React.createElement("div", { className: b() },
-        React.createElement(Button, { disabled: spec.viewSpec.disabled, onClick: handleClick }, i18n('button-upload_file')),
+        React.createElement(Button, { disabled: spec.viewSpec.disabled, onClick: handleClick, qa: `${name}-file-upload` }, i18n('button-upload_file')),
         React.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.createElement("span", { className: b('file-name') }, fileNameContent),
-        value ? (React.createElement(Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled },
+        value ? (React.createElement(Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled, qa: `${name}-file-remove` },
             React.createElement(Icon, { data: Xmark, size: 16 }))) : null));
 };

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

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

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import './MonacoInputDialog.css';
 interface MonacoInputDialogProps {
+    name: string;
     visible: boolean;
     value: string;
     language?: string;

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

@@ -7,7 +7,7 @@ import { MonacoHeader } from './MonacoHeader';
 import { useMonacoOptions } from './useMonacoOptions';
 import './MonacoInputDialog.css';
 const b = block('monaco-input-dialog');
-export const MonacoInputDialog = ({ value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
+export const MonacoInputDialog = ({ name, value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
     const MonacoEditor = useMonaco() || MonacoComponent;
     const handleClose = React.useCallback(() => {
         onChange(value);
@@ -20,7 +20,7 @@ export const MonacoInputDialog = ({ value, title, visible, language, card, onCha
     return (React.createElement(Dialog, { open: visible, onClose: handleClose, className: b() },
         React.createElement(Dialog.Header, { caption: title, className: b('dialog-header') }),
         React.createElement(Dialog.Body, null,
-            React.createElement("div", { className: b('container') },
+            React.createElement("div", { className: b('container'), "data-qa": `${name}-dialog` },
                 React.createElement(MonacoHeader, { language: language, card: card }),
                 React.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, options: options }))),
         React.createElement(Dialog.Footer, { textButtonApply: i18n('button_cancel'), onClickButtonApply: handleClose })));

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

@@ -4,7 +4,7 @@ import { transformArrIn, transformArrOut } from '../../../../core';
 import { block } from '../../../utils';
 import './MultiSelect.css';
 const b = block('multi-select');
-export const MultiSelect = ({ input, spec }) => {
+export const MultiSelect = ({ 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]);
@@ -30,5 +30,5 @@ export const MultiSelect = ({ input, spec }) => {
     }, [onFocus, onBlur]);
     const _value = React.useMemo(() => transformArrOut(value), [value]);
     const handleChange = React.useCallback((value) => onChange(transformArrIn(value)), [onChange]);
-    return (React.createElement(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.createElement(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 }));
 };

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

@@ -4,7 +4,7 @@ import { block, divide, isCorrectSizeParams, multiply } from '../../../utils';
 import { useInitial } from './useInitial';
 import './NumberWithScale.css';
 const b = 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;
@@ -61,7 +61,7 @@ const NumberWithScaleBase = ({ input, spec }) => {
         }
     }, [setPreparedValue, setScaleValue, incorrectStringNumber, value, scale, defaultType]);
     return (React.createElement("div", { className: b('wrapper') },
-        React.createElement(TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled }),
-        React.createElement(Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber })));
+        React.createElement(TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled, qa: name }),
+        React.createElement(Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber, qa: `${name}-scale` })));
 };
 export const NumberWithScale = (props) => isCorrectSizeParams(props.spec) ? React.createElement(NumberWithScaleBase, Object.assign({}, props)) : null;

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

@@ -8,7 +8,7 @@ export const ObjectBase = (_a) => {
     var { spec, name, Layout } = _a, restProps = __rest(_a, ["spec", "name", "Layout"]);
     const addBtn = React.useMemo(() => {
         var _a;
-        return (React.createElement(Button, { onClick: () => restProps.input.onChange(transformArrIn(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled },
+        return (React.createElement(Button, { onClick: () => restProps.input.onChange(transformArrIn(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled, qa: `${name}-init-obj` },
             React.createElement(Icon, { data: Plus, size: 14 }),
             spec.viewSpec.layoutTitle || null));
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
@@ -18,7 +18,7 @@ export const ObjectBase = (_a) => {
         if (!_.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);