@gravity-ui/dynamic-forms 1.11.2 → 2.1.0

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

@@ -51,6 +51,10 @@
   font-size: var(--yc-text-subheader-2-font-size);
   font-weight: var(--yc-text-subheader-font-weight);
   line-height: var(--yc-text-subheader-2-line-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 533px;
 }
 .df-card__note {
   margin-left: 5px;

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

@@ -3,13 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const common_1 = require("../../constants/common");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('card');
 const Card = ({ name, title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
+    var _a;
     const containerRef = react_1.default.useRef(null);
+    const titleRef = react_1.default.useRef(null);
     const bodyRef = react_1.default.useRef(null);
     const [open, setOpen] = react_1.default.useState(alwaysOpen || propsOpen || false);
     const emptyBody = Boolean(bodyRef.current && !bodyRef.current.childElementCount);
@@ -29,15 +33,17 @@ const Card = ({ name, title: propsTitle, description, actions, open: propsOpen,
         return;
     }, [disableHeaderToggle, handleToggle]);
     const preventEvent = react_1.default.useCallback((e) => e.stopPropagation(), []);
+    const titlePopoverDisabled = (((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= common_1.COMMON_TITLE_MAX_WIDTH;
     const title = react_1.default.useMemo(() => {
         if (lodash_1.default.isString(propsTitle)) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: b('title') }, propsTitle),
+                react_1.default.createElement(uikit_1.Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT },
+                    react_1.default.createElement("div", { ref: titleRef, className: b('title') }, propsTitle)),
                 description ? (react_1.default.createElement("div", { className: b('note') },
-                    react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] }))) : null));
+                    react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: common_1.COMMON_POPOVER_PLACEMENT }))) : null));
         }
         return propsTitle;
-    }, [propsTitle, description]);
+    }, [propsTitle, titlePopoverDisabled, description]);
     react_1.default.useEffect(() => {
         if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
             setOpen(propsOpen);

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -4,7 +4,7 @@
   justify-content: space-between;
   padding: 15px;
   align-items: center;
-  background-color: var(--yc-color-private-black-50-solid);
+  background-color: var(--yc-color-base-float-hover);
 }
 .df-monaco-header_card {
   border-bottom: 1px solid var(--yc-color-line-generic);

package/build/cjs/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.css

@@ -0,0 +1,14 @@
+.df-multi-oneof__select {
+  max-width: 305px;
+}
+.df-multi-oneof__content_flat > .df-group-indent {
+  margin: 0;
+  border-left: none;
+  padding: 0;
+}
+.df-multi-oneof__content_flat > .df-group-indent > .df-use-search {
+  margin-top: 15px;
+}
+.df-multi-oneof__content_flat > .df-group-indent > .df-use-search:empty {
+  display: none;
+}

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiOneOfFlat = exports.MultiOneOf = void 0;
+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 core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const GroupIndent_1 = require("../../GroupIndent");
+const b = (0, utils_1.block)('multi-oneof');
+const MultiOneOf = (props) => {
+    const { name, input, spec, Layout, withoutIndent } = props;
+    const { value, onBlur, onChange, onFocus, parentOnUnmount } = input;
+    const [valueSelect, setValueSelect] = react_1.default.useState(() => (value ? Object.keys(value) : []));
+    const handleOpenChange = react_1.default.useCallback((open) => {
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [onFocus, onBlur]);
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => {
+        onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors);
+    }, [name, onChange]);
+    const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const options = react_1.default.useMemo(() => (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+        var _a, _b;
+        const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
+            ((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            value ||
+            '';
+        return {
+            value,
+            title,
+            content: title,
+        };
+    }), [spec.description, spec.viewSpec.order, specProperties]);
+    const filterable = react_1.default.useMemo(() => (options.length || 0) > 9, [options.length]);
+    const selectInput = react_1.default.useMemo(() => {
+        const select = (react_1.default.createElement(uikit_1.Select, { width: "max", value: valueSelect, options: options, onUpdate: setValueSelect, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true, className: b('select'), qa: name }));
+        if (Layout) {
+            return react_1.default.createElement(Layout, Object.assign({}, props), select);
+        }
+        return react_1.default.createElement(react_1.default.Fragment, null, select);
+    }, [
+        Layout,
+        filterable,
+        handleOpenChange,
+        name,
+        options,
+        props,
+        spec.viewSpec.disabled,
+        spec.viewSpec.placeholder,
+        valueSelect,
+    ]);
+    if (!options) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        selectInput,
+        react_1.default.createElement("div", { className: b('content', {
+                flat: withoutIndent,
+            }) },
+            react_1.default.createElement(GroupIndent_1.GroupIndent, null, valueSelect.map((property) => {
+                var _a;
+                return (react_1.default.createElement(react_1.default.Fragment, { key: property }, specProperties && specProperties[property] ? (react_1.default.createElement(core_1.Controller, { name: `${name}.${property}`, spec: specProperties[property], parentOnUnmount: parentOnUnmount, parentOnChange: parentOnChange, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[property] })) : null));
+            })))));
+};
+exports.MultiOneOf = MultiOneOf;
+const MultiOneOfFlat = (props) => (react_1.default.createElement(exports.MultiOneOf, Object.assign({}, props, { withoutIndent: true })));
+exports.MultiOneOfFlat = MultiOneOfFlat;

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

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

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

@@ -6,6 +6,6 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 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, qa: name }));
+    return (react_1.default.createElement(uikit_1.TextArea, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name }));
 };
 exports.TextArea = TextArea;

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

@@ -5,7 +5,10 @@ tslib_1.__exportStar(require("./ArrayBase"), exports);
 tslib_1.__exportStar(require("./CardOneOf"), exports);
 tslib_1.__exportStar(require("./Checkbox"), exports);
 tslib_1.__exportStar(require("./FileInput"), exports);
+tslib_1.__exportStar(require("./MonacoInput"), exports);
+tslib_1.__exportStar(require("./MultiOneOf"), exports);
 tslib_1.__exportStar(require("./MultiSelect"), exports);
+tslib_1.__exportStar(require("./NumberWithScale"), exports);
 tslib_1.__exportStar(require("./ObjectBase"), exports);
 tslib_1.__exportStar(require("./ObjectValueInput"), exports);
 tslib_1.__exportStar(require("./OneOf"), exports);
@@ -18,5 +21,3 @@ tslib_1.__exportStar(require("./Text"), exports);
 tslib_1.__exportStar(require("./TextArea"), exports);
 tslib_1.__exportStar(require("./TextContent"), exports);
 tslib_1.__exportStar(require("./TextLink"), exports);
-tslib_1.__exportStar(require("./NumberWithScale"), exports);
-tslib_1.__exportStar(require("./MonacoInput"), exports);

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

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowVerbose = exports.Row = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
-const components_1 = require("../../../components");
+const components_2 = require("../../../components");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('row');
 const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
@@ -17,10 +18,10 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                 react_1.default.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
                 !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
                     react_1.default.createElement("span", { className: b('note-inner') },
-                        react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
+                        react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         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),
+                react_1.default.createElement(components_2.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, 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/Section/Section.css

@@ -12,8 +12,12 @@
   align-items: center;
 }
 .df-section__title {
+  max-width: 533px;
   font-weight: 500;
   margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .df-section__title_size_s {
   font-size: 13px;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group2 = exports.Group = exports.SectionWithSubtitle2 = exports.SectionWithSubtitle = exports.Section2 = exports.Section = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
 const __1 = require("../../");
 const __2 = require("../../../");
@@ -10,9 +11,11 @@ const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('section');
 const SectionBase = (_a) => {
+    var _b;
     var { name, spec, titleSize, withIndent, ignoreDescription, descriptionAsSubtitle, children } = _a, restProps = tslib_1.__rest(_a, ["name", "spec", "titleSize", "withIndent", "ignoreDescription", "descriptionAsSubtitle", "children"]);
     const meta = restProps.meta;
     const arrOrObjFlag = (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec);
+    const titleRef = react_1.default.useRef(null);
     let content = children;
     if (meta) {
         content = (react_1.default.createElement(__2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
@@ -29,14 +32,17 @@ const SectionBase = (_a) => {
         }
         else {
             description = (react_1.default.createElement("div", { className: b('note') },
-                react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
+                react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
         }
     }
+    const layoutTitle = spec.viewSpec.layoutTitle;
+    const layoutTitlePopoverDisabled = (((_b = titleRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0) <= __2.COMMON_TITLE_MAX_WIDTH;
     return (react_1.default.createElement("section", { className: b() },
-        spec.viewSpec.layoutTitle ? (react_1.default.createElement("div", { className: b('header', {
+        layoutTitle ? (react_1.default.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
             }) },
-            react_1.default.createElement("h2", { className: b('title', { size: titleSize }) }, spec.viewSpec.layoutTitle),
+            react_1.default.createElement(uikit_1.Popover, { content: layoutTitle, placement: __2.COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+                react_1.default.createElement("h2", { className: b('title', { size: titleSize }), ref: titleRef }, layoutTitle)),
             description)) : null,
         react_1.default.createElement("div", { className: b('content') }, content)));
 };

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

@@ -15,6 +15,7 @@
 }
 .df-simple-vertical-accordeon__header-inner {
   margin-left: -13px;
+  max-width: 533px;
 }
 .df-simple-vertical-accordeon__title {
   font-weight: 500;

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

@@ -3,14 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleVerticalAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const common_1 = require("../../constants/common");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('simple-vertical-accordeon');
+const TITLE_TEXT_MAX_WIDTH = 485; /** 533px (COMMON_TITLE_MAX_WIDTH) - 48px of padding */
 class SimpleVerticalAccordeon extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.componentRef = react_1.default.createRef();
+        this.titleRef = react_1.default.createRef();
         this.checkVisibility = () => {
             if (this.props.viewLayout) {
                 if (this.componentRef.current &&
@@ -47,17 +51,21 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         this.checkVisibility();
     }
     render() {
+        var _a;
         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) {
             return null;
         }
+        const title = this.getTitle();
+        const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
         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, 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 })),
+                react_1.default.createElement(uikit_1.Popover, { content: title, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT },
+                    react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
+                        react_1.default.createElement("b", { ref: this.titleRef, className: b('title', { size: titleSize }) }, title),
+                        react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: b('chevron', { open }), size: 16 }))),
                 this.getTooltip(),
                 headerActionsTemplate ? headerActionsTemplate : null),
             content)));
@@ -72,7 +80,7 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
     getTooltip() {
         const { note } = this.props;
         return note ? (react_1.default.createElement("span", { className: b('tooltip') },
-            react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
+            react_1.default.createElement(components_1.HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
     }
 }
 exports.SimpleVerticalAccordeon = SimpleVerticalAccordeon;

package/build/cjs/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.css

@@ -0,0 +1,21 @@
+.df-multi-oneof-view__tooltip {
+  overflow-wrap: break-word;
+}
+.df-multi-oneof-view__tooltip-container {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-bottom: 6px;
+}
+.df-multi-oneof-view__tooltip-container:last-child {
+  margin-bottom: 0;
+}
+.df-multi-oneof-view__content_multiple-values > .df-group-indent {
+  padding-top: 0px;
+}
+.df-multi-oneof-view__content_flat > .df-group-indent {
+  margin: 0 0 20px;
+  border-left: none;
+  padding: 0;
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiOneOfFlatView = exports.MultiOneOfView = void 0;
+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 core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const GroupIndent_1 = require("../../GroupIndent");
+const b = (0, utils_1.block)('multi-oneof-view');
+const MultiOneOfView = (props) => {
+    const { name, value, Layout, spec, withoutIndent } = props;
+    const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const values = react_1.default.useMemo(() => Object.keys(value || []), [value]);
+    const items = react_1.default.useMemo(() => values.map((value) => {
+        var _a, _b;
+        const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
+            ((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            value ||
+            '';
+        return title;
+    }), [spec.description, specProperties, values]);
+    const selectView = react_1.default.useMemo(() => {
+        const selectView = (react_1.default.createElement(react_1.default.Fragment, null, items.map((item) => {
+            return (react_1.default.createElement(uikit_1.Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item));
+        })));
+        if (Layout) {
+            return (react_1.default.createElement(Layout, Object.assign({}, props, { value: values }), selectView));
+        }
+        return react_1.default.createElement(react_1.default.Fragment, null, selectView);
+    }, [Layout, items, props, values]);
+    if (values.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        selectView,
+        react_1.default.createElement("div", { className: b('content', { flat: withoutIndent, 'multiple-values': items.length > 1 }) },
+            react_1.default.createElement(GroupIndent_1.GroupIndent, null, values.map((value) => (react_1.default.createElement(react_1.default.Fragment, { key: value }, specProperties && specProperties[value] ? (react_1.default.createElement(core_1.ViewController, { name: `${name}.${value}`, spec: specProperties[value] })) : null)))))));
+};
+exports.MultiOneOfView = MultiOneOfView;
+const MultiOneOfFlatView = (props) => (react_1.default.createElement(exports.MultiOneOfView, Object.assign({}, props, { withoutIndent: true })));
+exports.MultiOneOfFlatView = MultiOneOfFlatView;

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

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

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

@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./BaseView"), exports);
 tslib_1.__exportStar(require("./CardOneOfView"), exports);
 tslib_1.__exportStar(require("./FileInputView"), exports);
 tslib_1.__exportStar(require("./MonacoInputView"), exports);
+tslib_1.__exportStar(require("./MultiOneOfView"), exports);
 tslib_1.__exportStar(require("./MultiSelectView"), exports);
 tslib_1.__exportStar(require("./NumberWithScaleView"), exports);
 tslib_1.__exportStar(require("./ObjectBaseView"), exports);

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COMMON_TITLE_MAX_WIDTH = exports.COMMON_POPOVER_PLACEMENT = void 0;
+exports.COMMON_POPOVER_PLACEMENT = ['bottom', 'top'];
+exports.COMMON_TITLE_MAX_WIDTH = 533;

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

@@ -64,6 +64,8 @@ exports.dynamicConfig = {
             base: { Component: components_1.ObjectBase, independent: true },
             text_link: { Component: components_1.TextLink, independent: true },
             object_value: { Component: components_1.ObjectValueInput, independent: true },
+            multi_oneof: { Component: components_1.MultiOneOf, independent: true },
+            multi_oneof_flat: { Component: components_1.MultiOneOfFlat, independent: true },
         },
         layouts: {
             row: components_1.Row,
@@ -163,6 +165,8 @@ exports.dynamicCardConfig = {
             base: { Component: components_1.ObjectBase, independent: true },
             text_link: { Component: components_1.TextLink, independent: true },
             object_value: { Component: components_1.ObjectValueInput, independent: true },
+            multi_oneof: { Component: components_1.MultiOneOf, independent: true },
+            multi_oneof_flat: { Component: components_1.MultiOneOfFlat, independent: true },
         },
         layouts: {
             row: components_1.Row2,
@@ -255,6 +259,8 @@ exports.dynamicViewConfig = {
             base: { Component: components_1.ObjectBaseView, independent: true },
             text_link: { Component: components_1.TextLinkView, independent: true },
             object_value: { Component: components_1.ObjectValueInputView, independent: true },
+            multi_oneof: { Component: components_1.MultiOneOfView, independent: true },
+            multi_oneof_flat: { Component: components_1.MultiOneOfFlatView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow,
@@ -338,6 +344,8 @@ exports.dynamicViewCardConfig = {
             base: { Component: components_1.ObjectBaseView, independent: true },
             text_link: { Component: components_1.TextLinkView, independent: true },
             object_value: { Component: components_1.ObjectValueInputView, independent: true },
+            multi_oneof: { Component: components_1.MultiOneOfView, independent: true },
+            multi_oneof_flat: { Component: components_1.MultiOneOfFlatView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow2,

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./config"), exports);
+tslib_1.__exportStar(require("./common"), exports);

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

@@ -81,6 +81,7 @@ export interface ObjectSpec<LinkType = any> {
         oneOfParams?: {
             toggler?: 'select' | 'radio';
         };
+        placeholder?: string;
     };
 }
 export interface StringSpec<LinkType = any> {

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

@@ -51,6 +51,10 @@
   font-size: var(--yc-text-subheader-2-font-size);
   font-weight: var(--yc-text-subheader-font-weight);
   line-height: var(--yc-text-subheader-2-line-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 533px;
 }
 .df-card__note {
   margin-left: 5px;

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

@@ -1,12 +1,16 @@
 import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Card as CardBase, HelpPopover, Icon } from '@gravity-ui/uikit';
+import { Button, Card as CardBase, Icon, Popover } from '@gravity-ui/uikit';
 import _ from 'lodash';
+import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH } from '../../constants/common';
 import { block } from '../../utils';
 import './Card.css';
 const b = block('card');
 export const Card = ({ name, title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
+    var _a;
     const containerRef = React.useRef(null);
+    const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
     const emptyBody = Boolean(bodyRef.current && !bodyRef.current.childElementCount);
@@ -26,15 +30,17 @@ export const Card = ({ name, title: propsTitle, description, actions, open: prop
         return;
     }, [disableHeaderToggle, handleToggle]);
     const preventEvent = React.useCallback((e) => e.stopPropagation(), []);
+    const titlePopoverDisabled = (((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= COMMON_TITLE_MAX_WIDTH;
     const title = React.useMemo(() => {
         if (_.isString(propsTitle)) {
             return (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: b('title') }, propsTitle),
+                React.createElement(Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT },
+                    React.createElement("div", { ref: titleRef, className: b('title') }, propsTitle)),
                 description ? (React.createElement("div", { className: b('note') },
-                    React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] }))) : null));
+                    React.createElement(HelpPopover, { htmlContent: description, placement: COMMON_POPOVER_PLACEMENT }))) : null));
         }
         return propsTitle;
-    }, [propsTitle, description]);
+    }, [propsTitle, titlePopoverDisabled, description]);
     React.useEffect(() => {
         if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
             setOpen(propsOpen);

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -4,7 +4,7 @@
   justify-content: space-between;
   padding: 15px;
   align-items: center;
-  background-color: var(--yc-color-private-black-50-solid);
+  background-color: var(--yc-color-base-float-hover);
 }
 .df-monaco-header_card {
   border-bottom: 1px solid var(--yc-color-line-generic);

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

@@ -0,0 +1,14 @@
+.df-multi-oneof__select {
+  max-width: 305px;
+}
+.df-multi-oneof__content_flat > .df-group-indent {
+  margin: 0;
+  border-left: none;
+  padding: 0;
+}
+.df-multi-oneof__content_flat > .df-group-indent > .df-use-search {
+  margin-top: 15px;
+}
+.df-multi-oneof__content_flat > .df-group-indent > .df-use-search:empty {
+  display: none;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ObjectIndependentInput, ObjectIndependentInputProps } from '../../../../core';
+import './MultiOneOf.css';
+export interface MultiOneOfProps extends ObjectIndependentInputProps {
+    withoutIndent?: boolean;
+}
+export declare const MultiOneOf: React.FC<MultiOneOfProps>;
+export declare const MultiOneOfFlat: ObjectIndependentInput;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Select } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { Controller, } from '../../../../core';
+import { block } from '../../../utils';
+import { GroupIndent } from '../../GroupIndent';
+import './MultiOneOf.css';
+const b = block('multi-oneof');
+export const MultiOneOf = (props) => {
+    const { name, input, spec, Layout, withoutIndent } = props;
+    const { value, onBlur, onChange, onFocus, parentOnUnmount } = input;
+    const [valueSelect, setValueSelect] = React.useState(() => (value ? Object.keys(value) : []));
+    const handleOpenChange = React.useCallback((open) => {
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [onFocus, onBlur]);
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
+        onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors);
+    }, [name, onChange]);
+    const specProperties = React.useMemo(() => (_.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const options = React.useMemo(() => (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+        var _a, _b;
+        const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
+            ((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            value ||
+            '';
+        return {
+            value,
+            title,
+            content: title,
+        };
+    }), [spec.description, spec.viewSpec.order, specProperties]);
+    const filterable = React.useMemo(() => (options.length || 0) > 9, [options.length]);
+    const selectInput = React.useMemo(() => {
+        const select = (React.createElement(Select, { width: "max", value: valueSelect, options: options, onUpdate: setValueSelect, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true, className: b('select'), qa: name }));
+        if (Layout) {
+            return React.createElement(Layout, Object.assign({}, props), select);
+        }
+        return React.createElement(React.Fragment, null, select);
+    }, [
+        Layout,
+        filterable,
+        handleOpenChange,
+        name,
+        options,
+        props,
+        spec.viewSpec.disabled,
+        spec.viewSpec.placeholder,
+        valueSelect,
+    ]);
+    if (!options) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        selectInput,
+        React.createElement("div", { className: b('content', {
+                flat: withoutIndent,
+            }) },
+            React.createElement(GroupIndent, null, valueSelect.map((property) => {
+                var _a;
+                return (React.createElement(React.Fragment, { key: property }, specProperties && specProperties[property] ? (React.createElement(Controller, { name: `${name}.${property}`, spec: specProperties[property], parentOnUnmount: parentOnUnmount, parentOnChange: parentOnChange, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[property] })) : null));
+            })))));
+};
+export const MultiOneOfFlat = (props) => (React.createElement(MultiOneOf, Object.assign({}, props, { withoutIndent: true })));

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

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

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

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

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';
+import { TextArea as TextAreaBase } from '@gravity-ui/uikit';
 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, qa: name }));
+    return (React.createElement(TextAreaBase, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name }));
 };

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

@@ -2,7 +2,10 @@ export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
 export * from './FileInput';
+export * from './MonacoInput';
+export * from './MultiOneOf';
 export * from './MultiSelect';
+export * from './NumberWithScale';
 export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
@@ -15,5 +18,3 @@ export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
 export * from './TextLink';
-export * from './NumberWithScale';
-export * from './MonacoInput';

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

@@ -2,7 +2,10 @@ export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
 export * from './FileInput';
+export * from './MonacoInput';
+export * from './MultiOneOf';
 export * from './MultiSelect';
+export * from './NumberWithScale';
 export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
@@ -15,5 +18,3 @@ export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
 export * from './TextLink';
-export * from './NumberWithScale';
-export * from './MonacoInput';

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
 import { Xmark } from '@gravity-ui/icons';
-import { Button, HelpPopover, Icon } from '@gravity-ui/uikit';
+import { Button, Icon } from '@gravity-ui/uikit';
 import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
 import { ErrorWrapper } from '../../../components';
 import { block } from '../../../utils';

package/build/esm/lib/kit/components/Layouts/Section/Section.css

@@ -12,8 +12,12 @@
   align-items: center;
 }
 .df-section__title {
+  max-width: 533px;
   font-weight: 500;
   margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .df-section__title_size_s {
   font-size: 13px;

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

@@ -1,16 +1,19 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { HelpPopover } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
+import { Popover } from '@gravity-ui/uikit';
 import { GroupIndent } from '../../';
-import { ErrorWrapper } from '../../../';
+import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper } from '../../../';
 import { isArraySpec, isObjectSpec, } from '../../../../core';
 import { block } from '../../../utils';
 import './Section.css';
 const b = block('section');
 const SectionBase = (_a) => {
+    var _b;
     var { name, spec, titleSize, withIndent, ignoreDescription, descriptionAsSubtitle, children } = _a, restProps = __rest(_a, ["name", "spec", "titleSize", "withIndent", "ignoreDescription", "descriptionAsSubtitle", "children"]);
     const meta = restProps.meta;
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
+    const titleRef = React.useRef(null);
     let content = children;
     if (meta) {
         content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
@@ -30,11 +33,14 @@ const SectionBase = (_a) => {
                 React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
         }
     }
+    const layoutTitle = spec.viewSpec.layoutTitle;
+    const layoutTitlePopoverDisabled = (((_b = titleRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0) <= COMMON_TITLE_MAX_WIDTH;
     return (React.createElement("section", { className: b() },
-        spec.viewSpec.layoutTitle ? (React.createElement("div", { className: b('header', {
+        layoutTitle ? (React.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
             }) },
-            React.createElement("h2", { className: b('title', { size: titleSize }) }, spec.viewSpec.layoutTitle),
+            React.createElement(Popover, { content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+                React.createElement("h2", { className: b('title', { size: titleSize }), ref: titleRef }, layoutTitle)),
             description)) : null,
         React.createElement("div", { className: b('content') }, content)));
 };

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

@@ -15,6 +15,7 @@
 }
 .df-simple-vertical-accordeon__header-inner {
   margin-left: -13px;
+  max-width: 533px;
 }
 .df-simple-vertical-accordeon__title {
   font-weight: 500;

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

@@ -29,6 +29,7 @@ export declare class SimpleVerticalAccordeon extends React.Component<SimpleVerti
         withBranchView: boolean;
     };
     componentRef: React.RefObject<HTMLDivElement>;
+    titleRef: React.RefObject<HTMLElement>;
     constructor(props: SimpleVerticalAccordeonProps);
     componentDidUpdate(prevProps: Readonly<SimpleVerticalAccordeonProps>): void;
     componentDidMount(): void;

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

@@ -1,13 +1,17 @@
 import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, HelpPopover, Icon } from '@gravity-ui/uikit';
+import { Button, Icon, Popover } from '@gravity-ui/uikit';
+import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import { block } from '../../utils';
 import './SimpleVerticalAccordeon.css';
 const b = block('simple-vertical-accordeon');
+const TITLE_TEXT_MAX_WIDTH = 485; /** 533px (COMMON_TITLE_MAX_WIDTH) - 48px of padding */
 export class SimpleVerticalAccordeon extends React.Component {
     constructor(props) {
         super(props);
         this.componentRef = React.createRef();
+        this.titleRef = React.createRef();
         this.checkVisibility = () => {
             if (this.props.viewLayout) {
                 if (this.componentRef.current &&
@@ -44,17 +48,21 @@ export class SimpleVerticalAccordeon extends React.Component {
         this.checkVisibility();
     }
     render() {
+        var _a;
         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) {
             return null;
         }
+        const title = this.getTitle();
+        const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
         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, 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 })),
+                React.createElement(Popover, { content: title, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT },
+                    React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
+                        React.createElement("b", { ref: this.titleRef, className: b('title', { size: titleSize }) }, title),
+                        React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 }))),
                 this.getTooltip(),
                 headerActionsTemplate ? headerActionsTemplate : null),
             content)));

package/build/esm/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.css

@@ -0,0 +1,21 @@
+.df-multi-oneof-view__tooltip {
+  overflow-wrap: break-word;
+}
+.df-multi-oneof-view__tooltip-container {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-bottom: 6px;
+}
+.df-multi-oneof-view__tooltip-container:last-child {
+  margin-bottom: 0;
+}
+.df-multi-oneof-view__content_multiple-values > .df-group-indent {
+  padding-top: 0px;
+}
+.df-multi-oneof-view__content_flat > .df-group-indent {
+  margin: 0 0 20px;
+  border-left: none;
+  padding: 0;
+}

package/build/esm/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ObjectIndependentView, ObjectIndependentViewProps } from '../../../../core';
+import './MultiOneOfView.css';
+export interface MultiOneOfViewProps extends ObjectIndependentViewProps {
+    withoutIndent?: boolean;
+}
+export declare const MultiOneOfView: React.FC<MultiOneOfViewProps>;
+export declare const MultiOneOfFlatView: ObjectIndependentView;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Popover } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { ViewController } from '../../../../core';
+import { block } from '../../../utils';
+import { GroupIndent } from '../../GroupIndent';
+import './MultiOneOfView.css';
+const b = block('multi-oneof-view');
+export const MultiOneOfView = (props) => {
+    const { name, value, Layout, spec, withoutIndent } = props;
+    const specProperties = React.useMemo(() => (_.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const values = React.useMemo(() => Object.keys(value || []), [value]);
+    const items = React.useMemo(() => values.map((value) => {
+        var _a, _b;
+        const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
+            ((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            value ||
+            '';
+        return title;
+    }), [spec.description, specProperties, values]);
+    const selectView = React.useMemo(() => {
+        const selectView = (React.createElement(React.Fragment, null, items.map((item) => {
+            return (React.createElement(Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item));
+        })));
+        if (Layout) {
+            return (React.createElement(Layout, Object.assign({}, props, { value: values }), selectView));
+        }
+        return React.createElement(React.Fragment, null, selectView);
+    }, [Layout, items, props, values]);
+    if (values.length === 0) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        selectView,
+        React.createElement("div", { className: b('content', { flat: withoutIndent, 'multiple-values': items.length > 1 }) },
+            React.createElement(GroupIndent, null, values.map((value) => (React.createElement(React.Fragment, { key: value }, specProperties && specProperties[value] ? (React.createElement(ViewController, { name: `${name}.${value}`, spec: specProperties[value] })) : null)))))));
+};
+export const MultiOneOfFlatView = (props) => (React.createElement(MultiOneOfView, Object.assign({}, props, { withoutIndent: true })));

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

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

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

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

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

@@ -3,6 +3,7 @@ export * from './BaseView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';
+export * from './MultiOneOfView';
 export * from './MultiSelectView';
 export * from './NumberWithScaleView';
 export * from './ObjectBaseView';

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

@@ -3,6 +3,7 @@ export * from './BaseView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';
+export * from './MultiOneOfView';
 export * from './MultiSelectView';
 export * from './NumberWithScaleView';
 export * from './ObjectBaseView';

package/build/esm/lib/kit/constants/common.d.ts

@@ -0,0 +1,3 @@
+import type { PopoverProps } from '@gravity-ui/uikit';
+export declare const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'];
+export declare const COMMON_TITLE_MAX_WIDTH = 533;

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

@@ -0,0 +1,2 @@
+export const COMMON_POPOVER_PLACEMENT = ['bottom', 'top'];
+export const COMMON_TITLE_MAX_WIDTH = 533;

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

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfCard, OneOfCardView, OneOfFlat, OneOfFlatView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfCard, OneOfCardView, OneOfFlat, OneOfFlatView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -61,6 +61,8 @@ export const dynamicConfig = {
             base: { Component: ObjectBase, independent: true },
             text_link: { Component: TextLink, independent: true },
             object_value: { Component: ObjectValueInput, independent: true },
+            multi_oneof: { Component: MultiOneOf, independent: true },
+            multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
         },
         layouts: {
             row: Row,
@@ -160,6 +162,8 @@ export const dynamicCardConfig = {
             base: { Component: ObjectBase, independent: true },
             text_link: { Component: TextLink, independent: true },
             object_value: { Component: ObjectValueInput, independent: true },
+            multi_oneof: { Component: MultiOneOf, independent: true },
+            multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
         },
         layouts: {
             row: Row2,
@@ -252,6 +256,8 @@ export const dynamicViewConfig = {
             base: { Component: ObjectBaseView, independent: true },
             text_link: { Component: TextLinkView, independent: true },
             object_value: { Component: ObjectValueInputView, independent: true },
+            multi_oneof: { Component: MultiOneOfView, independent: true },
+            multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
         },
         layouts: {
             row: ViewRow,
@@ -335,6 +341,8 @@ export const dynamicViewCardConfig = {
             base: { Component: ObjectBaseView, independent: true },
             text_link: { Component: TextLinkView, independent: true },
             object_value: { Component: ObjectValueInputView, independent: true },
+            multi_oneof: { Component: MultiOneOfView, independent: true },
+            multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
         },
         layouts: {
             row: ViewRow2,

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

@@ -1 +1,2 @@
 export * from './config';
+export * from './common';

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

@@ -1 +1,2 @@
 export * from './config';
+export * from './common';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "1.11.2",
+  "version": "2.1.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -37,6 +37,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@gravity-ui/components": "^2.0.0",
     "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/icons": "^2.1.0",
     "bem-cn-lite": "^4.0.0",
@@ -47,11 +48,11 @@
     "@babel/preset-typescript": "^7.18.6",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
-    "@gravity-ui/eslint-config": "^2.0.0",
+    "@gravity-ui/eslint-config": "^2.1.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^4.10.0",
+    "@gravity-ui/uikit": "^5.0.2",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.0.27",
@@ -97,7 +98,7 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^4.0.0",
+    "@gravity-ui/uikit": "^5.0.0",
     "final-form": "^4.20.2",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",