@gravity-ui/dynamic-forms 4.14.1 → 4.14.3

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

@@ -26,7 +26,8 @@ const MultiOneOf = (props) => {
         onChange((currentValue) => (0, set_1.default)(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors);
     }, [name, onChange]);
     const specProperties = react_1.default.useMemo(() => ((0, isObjectLike_1.default)(spec.properties) ? spec.properties : {}), [spec.properties]);
-    const options = react_1.default.useMemo(() => (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+    const propertiesOrder = react_1.default.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
+    const options = react_1.default.useMemo(() => propertiesOrder.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) ||
@@ -37,7 +38,7 @@ const MultiOneOf = (props) => {
             title,
             content: title,
         };
-    }), [spec.description, spec.viewSpec.order, specProperties]);
+    }), [propertiesOrder, spec.description, 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 }));

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

@@ -20,6 +20,7 @@ const ObjectBase = (_a) => {
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => (0, set_1.default)(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
     const content = react_1.default.useMemo(() => {
+        var _a;
         if (!spec.properties ||
             !(0, isObjectLike_1.default)(spec.properties) ||
             !Object.keys(spec.properties || {}).length) {
@@ -32,7 +33,9 @@ const ObjectBase = (_a) => {
             ? (0, utils_1.filterPropertiesForObjectInline)(spec.properties)
             : spec.properties;
         const delimiter = spec.viewSpec.delimiter;
-        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+        const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
+            ? spec.viewSpec.order
+            : Object.keys(specProperties);
         return (react_1.default.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => {
             var _a;
             return specProperties[property] ? (react_1.default.createElement(react_1.default.Fragment, { key: `${name ? name + '.' : ''}${property}` },

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../../core");
 const components_1 = require("../../../components");
 const hooks_1 = require("../../../hooks");
 const RemoveButton_1 = require("../../RemoveButton");
@@ -15,7 +16,7 @@ const Accordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: onDrop });

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordeonCardForm = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../../core");
 const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
 const AccordeonCard_1 = require("../../AccordeonCard");
@@ -17,7 +18,7 @@ const AccordeonCardForm = ({ name, spec, input, children, meta, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: onDrop });

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../core");
 const components_1 = require("../../components");
 const hooks_1 = require("../../hooks");
 const RemoveButton_1 = require("../RemoveButton");
@@ -15,7 +16,7 @@ const CardAccordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop, name: name });

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

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardSection = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../core");
 const components_1 = require("../../components");
 const RemoveButton_1 = require("../RemoveButton");
 const CardSection = ({ name, spec, input, meta, children, }) => {
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop, name: name });

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

@@ -5,24 +5,25 @@
   margin-bottom: 0;
 }
 .df-section__header {
+  display: flex;
+  align-items: center;
   margin-bottom: 20px;
 }
-.df-section__header_with-popover {
-  display: flex;
+.df-section__header_size_s {
+  height: 18px;
+}
+.df-section__header_size_m {
+  height: 20px;
 }
 .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;
+.df-section__title-popover {
+  display: flex;
+  align-items: center;
 }
-.df-section__title_size_m {
-  font-size: 15px;
+.df-section__title-popover .g-popover__handler {
+  display: flex;
 }
 .df-section__note {
   margin-left: 5px;
@@ -35,4 +36,7 @@
 }
 .df-section__description {
   margin-top: 4px;
+}
+.df-section__remove-button {
+  margin-left: 5px;
 }

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

@@ -6,6 +6,7 @@ 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 RemoveButton_1 = require("../../RemoveButton");
 const __2 = require("../../../");
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
@@ -13,10 +14,17 @@ 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 input = restProps.input;
     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;
+    const removeButton = react_1.default.useMemo(() => {
+        if ((input === null || input === void 0 ? void 0 : input.value) && (input === null || input === void 0 ? void 0 : input.onDrop) && (0, core_1.isArrayItem)(name)) {
+            return (react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: input.onDrop, switcherClassName: b('remove-button') }));
+        }
+        return null;
+    }, [input === null || input === void 0 ? void 0 : input.value, input === null || input === void 0 ? void 0 : input.onDrop, name]);
     if (meta) {
         content = (react_1.default.createElement(__2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
     }
@@ -40,10 +48,12 @@ const SectionBase = (_a) => {
     return (react_1.default.createElement("section", { className: b() },
         layoutTitle ? (react_1.default.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
+                size: titleSize,
             }) },
-            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(uikit_1.Popover, { className: b('title-popover'), content: layoutTitle, placement: __2.COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+                react_1.default.createElement(uikit_1.Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
+            description,
+            removeButton)) : null,
         react_1.default.createElement("div", { className: b('content') }, content)));
 };
 const Section = (props) => react_1.default.createElement(SectionBase, Object.assign({ titleSize: "m" }, props));

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

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

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

@@ -17,14 +17,11 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__tooltip {
-  margin: 0px 5px;
-}
-.df-simple-vertical-accordeon__tooltip .g-help-popover {
+.df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
-.df-simple-vertical-accordeon__tooltip .g-help-popover > span {
-  display: flex;
+.df-simple-vertical-accordeon__tooltip {
+  margin: 0px 5px;
 }
 .df-simple-vertical-accordeon__chevron {
   transform: rotate(-90deg);

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

@@ -11,6 +11,7 @@ const b = (0, utils_1.block)('object-base-view');
 const ObjectBaseView = (_a) => {
     var { inline, spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["inline", "spec", "name", "Layout"]);
     const content = react_1.default.useMemo(() => {
+        var _a;
         if (!spec.properties || !(0, isObjectLike_1.default)(spec.properties)) {
             return null;
         }
@@ -18,7 +19,9 @@ const ObjectBaseView = (_a) => {
             ? (0, utils_1.filterPropertiesForObjectInline)(spec.properties)
             : spec.properties;
         const delimiter = spec.viewSpec.delimiter;
-        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+        const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
+            ? spec.viewSpec.order
+            : Object.keys(specProperties);
         return (react_1.default.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => specProperties[property] ? (react_1.default.createElement(react_1.default.Fragment, { key: `${name ? name + '.' : ''}${property}` },
             react_1.default.createElement(core_1.ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}` }),
             delimiter && delimiter[property] ? (react_1.default.createElement(uikit_1.Text, { className: b('delimiter') }, delimiter[property])) : null)) : null)));

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

@@ -16,6 +16,7 @@ const useOneOf = ({ props, onTogglerChange }) => {
     const specProperties = react_1.default.useMemo(() => ((0, isObjectLike_1.default)(spec.properties) ? spec.properties : {}), [spec.properties]);
     const specBooleanMap = react_1.default.useMemo(() => { var _a; return (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap; }, [(_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap]);
     const [oneOfValue, setOneOfValue] = react_1.default.useState(() => {
+        var _a;
         let valueKeys;
         if ((0, isObjectLike_1.default)(input.value)) {
             const keys = Object.keys(input.value);
@@ -23,7 +24,11 @@ const useOneOf = ({ props, onTogglerChange }) => {
                 valueKeys = keys;
             }
         }
-        return (valueKeys || spec.viewSpec.order || Object.keys(specProperties))[0];
+        if (valueKeys)
+            return valueKeys[0];
+        if ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
+            return spec.viewSpec.order[0];
+        return Object.keys(specProperties)[0];
     });
     const onOneOfChange = react_1.default.useCallback(([newValue]) => {
         if (newValue !== oneOfValue) {
@@ -46,7 +51,8 @@ const useOneOf = ({ props, onTogglerChange }) => {
         }
         return undefined;
     }, [oneOfValue, specBooleanMap]);
-    const options = react_1.default.useMemo(() => (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+    const propertiesOrder = react_1.default.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
+    const options = react_1.default.useMemo(() => propertiesOrder.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) ||
@@ -57,7 +63,7 @@ const useOneOf = ({ props, onTogglerChange }) => {
             title,
             content: title,
         };
-    }), [spec.description, spec.viewSpec.order, specProperties]);
+    }), [propertiesOrder, spec.description, specProperties]);
     const togglerType = react_1.default.useMemo(() => {
         var _a, _b, _c, _d;
         if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 4) {

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

@@ -23,7 +23,8 @@ export const MultiOneOf = (props) => {
         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) => {
+    const propertiesOrder = React.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
+    const options = React.useMemo(() => propertiesOrder.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) ||
@@ -34,7 +35,7 @@ export const MultiOneOf = (props) => {
             title,
             content: title,
         };
-    }), [spec.description, spec.viewSpec.order, specProperties]);
+    }), [propertiesOrder, spec.description, 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 }));

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

@@ -18,6 +18,7 @@ export const ObjectBase = (_a) => {
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
     const content = React.useMemo(() => {
+        var _a;
         if (!spec.properties ||
             !isObjectLike(spec.properties) ||
             !Object.keys(spec.properties || {}).length) {
@@ -30,7 +31,9 @@ export const ObjectBase = (_a) => {
             ? filterPropertiesForObjectInline(spec.properties)
             : spec.properties;
         const delimiter = spec.viewSpec.delimiter;
-        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+        const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
+            ? spec.viewSpec.order
+            : Object.keys(specProperties);
         return (React.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => {
             var _a;
             return specProperties[property] ? (React.createElement(React.Fragment, { key: `${name ? name + '.' : ''}${property}` },

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isArrayItem } from '../../../../core';
 import { ErrorWrapper } from '../../../components';
 import { useErrorChecker } from '../../../hooks';
 import { RemoveButton } from '../../RemoveButton';
@@ -11,7 +12,7 @@ export const Accordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { name: name, onDrop: onDrop });

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isArrayItem } from '../../../../core';
 import { useErrorChecker } from '../../../hooks';
 import { block } from '../../../utils';
 import { AccordeonCard } from '../../AccordeonCard';
@@ -14,7 +15,7 @@ export const AccordeonCardForm = ({ name, spec, input, children, meta, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { name: name, onDrop: onDrop });

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isArrayItem } from '../../../core';
 import { Card, ErrorWrapper } from '../../components';
 import { useErrorChecker } from '../../hooks';
 import { RemoveButton } from '../RemoveButton';
@@ -11,7 +12,7 @@ export const CardAccordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { onDrop: onDrop, name: name });

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import { isArrayItem } from '../../../core';
 import { Card, ErrorWrapper } from '../../components';
 import { RemoveButton } from '../RemoveButton';
 export const CardSection = ({ name, spec, input, meta, children, }) => {
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });

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

@@ -5,24 +5,25 @@
   margin-bottom: 0;
 }
 .df-section__header {
+  display: flex;
+  align-items: center;
   margin-bottom: 20px;
 }
-.df-section__header_with-popover {
-  display: flex;
+.df-section__header_size_s {
+  height: 18px;
+}
+.df-section__header_size_m {
+  height: 20px;
 }
 .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;
+.df-section__title-popover {
+  display: flex;
+  align-items: center;
 }
-.df-section__title_size_m {
-  font-size: 15px;
+.df-section__title-popover .g-popover__handler {
+  display: flex;
 }
 .df-section__note {
   margin-left: 5px;
@@ -35,4 +36,7 @@
 }
 .df-section__description {
   margin-top: 4px;
+}
+.df-section__remove-button {
+  margin-left: 5px;
 }

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

@@ -3,18 +3,26 @@ import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { Popover, Text } from '@gravity-ui/uikit';
 import { GroupIndent } from '../../';
+import { RemoveButton } from '../../RemoveButton';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper } from '../../../';
-import { isArraySpec, isObjectSpec, } from '../../../../core';
+import { isArrayItem, 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 input = restProps.input;
     const meta = restProps.meta;
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
     const titleRef = React.useRef(null);
     let content = children;
+    const removeButton = React.useMemo(() => {
+        if ((input === null || input === void 0 ? void 0 : input.value) && (input === null || input === void 0 ? void 0 : input.onDrop) && isArrayItem(name)) {
+            return (React.createElement(RemoveButton, { name: name, onDrop: input.onDrop, switcherClassName: b('remove-button') }));
+        }
+        return null;
+    }, [input === null || input === void 0 ? void 0 : input.value, input === null || input === void 0 ? void 0 : input.onDrop, name]);
     if (meta) {
         content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
     }
@@ -38,10 +46,12 @@ const SectionBase = (_a) => {
     return (React.createElement("section", { className: b() },
         layoutTitle ? (React.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
+                size: titleSize,
             }) },
-            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(Popover, { className: b('title-popover'), content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+                React.createElement(Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
+            description,
+            removeButton)) : null,
         React.createElement("div", { className: b('content') }, content)));
 };
 export const Section = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "m" }, props));

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

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

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

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

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

@@ -17,14 +17,11 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__tooltip {
-  margin: 0px 5px;
-}
-.df-simple-vertical-accordeon__tooltip .g-help-popover {
+.df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
-.df-simple-vertical-accordeon__tooltip .g-help-popover > span {
-  display: flex;
+.df-simple-vertical-accordeon__tooltip {
+  margin: 0px 5px;
 }
 .df-simple-vertical-accordeon__chevron {
   transform: rotate(-90deg);

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

@@ -9,6 +9,7 @@ const b = block('object-base-view');
 export const ObjectBaseView = (_a) => {
     var { inline, spec, name, Layout } = _a, restProps = __rest(_a, ["inline", "spec", "name", "Layout"]);
     const content = React.useMemo(() => {
+        var _a;
         if (!spec.properties || !isObjectLike(spec.properties)) {
             return null;
         }
@@ -16,7 +17,9 @@ export const ObjectBaseView = (_a) => {
             ? filterPropertiesForObjectInline(spec.properties)
             : spec.properties;
         const delimiter = spec.viewSpec.delimiter;
-        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+        const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
+            ? spec.viewSpec.order
+            : Object.keys(specProperties);
         return (React.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => specProperties[property] ? (React.createElement(React.Fragment, { key: `${name ? name + '.' : ''}${property}` },
             React.createElement(ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}` }),
             delimiter && delimiter[property] ? (React.createElement(Text, { className: b('delimiter') }, delimiter[property])) : null)) : null)));

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

@@ -13,6 +13,7 @@ export const useOneOf = ({ props, onTogglerChange }) => {
     const specProperties = React.useMemo(() => (isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
     const specBooleanMap = React.useMemo(() => { var _a; return (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap; }, [(_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap]);
     const [oneOfValue, setOneOfValue] = React.useState(() => {
+        var _a;
         let valueKeys;
         if (isObjectLike(input.value)) {
             const keys = Object.keys(input.value);
@@ -20,7 +21,11 @@ export const useOneOf = ({ props, onTogglerChange }) => {
                 valueKeys = keys;
             }
         }
-        return (valueKeys || spec.viewSpec.order || Object.keys(specProperties))[0];
+        if (valueKeys)
+            return valueKeys[0];
+        if ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
+            return spec.viewSpec.order[0];
+        return Object.keys(specProperties)[0];
     });
     const onOneOfChange = React.useCallback(([newValue]) => {
         if (newValue !== oneOfValue) {
@@ -43,7 +48,8 @@ export const useOneOf = ({ props, onTogglerChange }) => {
         }
         return undefined;
     }, [oneOfValue, specBooleanMap]);
-    const options = React.useMemo(() => (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+    const propertiesOrder = React.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
+    const options = React.useMemo(() => propertiesOrder.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) ||
@@ -54,7 +60,7 @@ export const useOneOf = ({ props, onTogglerChange }) => {
             title,
             content: title,
         };
-    }), [spec.description, spec.viewSpec.order, specProperties]);
+    }), [propertiesOrder, spec.description, specProperties]);
     const togglerType = React.useMemo(() => {
         var _a, _b, _c, _d;
         if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 4) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.14.1",
+  "version": "4.14.3",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",