@gravity-ui/dynamic-forms 4.14.2 → 4.15.0

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/Column/Column.css

@@ -0,0 +1,62 @@
+.df-column {
+  margin-bottom: 15px;
+}
+.df-column:last-child {
+  margin-bottom: 0;
+}
+.df-column__first-row {
+  min-height: 28px;
+  display: flex;
+  margin-bottom: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.df-column__first-row-inner {
+  display: inline;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.df-column__first-row::after {
+  content: "";
+  width: 100%;
+  flex-shrink: 1;
+}
+.df-column__title {
+  word-break: break-word;
+  margin-right: 3px;
+}
+.df-column__title_required::after {
+  content: "*";
+  color: var(--g-color-text-danger);
+}
+.df-column__note {
+  position: relative;
+}
+.df-column__note-inner {
+  position: absolute;
+  margin-top: 1px;
+}
+.df-column__note-inner .g-help-popover {
+  display: flex;
+}
+.df-column__note-inner .g-help-popover > span {
+  display: flex;
+}
+.df-column__second-row {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.df-column__second-row-inner {
+  display: flex;
+  justify-content: space-around;
+}
+.df-column__remove-button {
+  margin-left: 5px;
+}
+.df-column__required-mark {
+  color: var(--g-color-text-danger);
+}
+.df-column__error-wrapper {
+  min-width: 100%;
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = 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_2 = require("../../../components");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('column');
+const ColumnBase = ({ name, spec, input, meta, children, }) => {
+    const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
+    const generateButton = react_1.default.useMemo(() => (0, core_1.withGenerateButton)(spec), [spec]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('first-row') },
+            react_1.default.createElement("div", { className: b('first-row-inner') },
+                react_1.default.createElement(uikit_1.Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
+                    react_1.default.createElement(uikit_1.Text, { className: b('note-inner') },
+                        react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
+        react_1.default.createElement("div", { className: b('second-row') },
+            react_1.default.createElement("div", { className: b('second-row-inner') },
+                react_1.default.createElement(components_2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
+                    // TODO: remove condition spec.viewSpec.type !== 'select'
+                    ((0, core_1.isArraySpec)(spec) && spec.viewSpec.type !== 'select') ||
+                        (0, core_1.isObjectSpec)(spec), className: b('error-wrapper') }, children),
+                generateButton ? (react_1.default.createElement(components_2.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
+                arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null))));
+};
+const Column = (props) => react_1.default.createElement(ColumnBase, Object.assign({}, props));
+exports.Column = Column;

package/build/cjs/lib/kit/components/Layouts/Column/index.js

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

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/Layouts/index.js

@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./AccordeonCard"), exports);
 tslib_1.__exportStar(require("./CardAccordeon"), exports);
 tslib_1.__exportStar(require("./CardSection"), exports);
 tslib_1.__exportStar(require("./Row"), exports);
+tslib_1.__exportStar(require("./Column"), exports);
 tslib_1.__exportStar(require("./Section"), exports);
 tslib_1.__exportStar(require("./TableCell"), exports);
 tslib_1.__exportStar(require("./Transparent"), exports);

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/ViewLayouts/ViewColumn/ViewColumn.css

@@ -0,0 +1,22 @@
+.df-view-column {
+  margin-bottom: 20px;
+}
+.df-view-column:last-child {
+  margin-bottom: 0;
+}
+.df-view-column__first-row {
+  display: flex;
+  align-items: baseline;
+}
+.df-view-column__note {
+  margin-inline-start: var(--g-spacing-half);
+}
+.df-view-column__second-row > .df-view-transparent {
+  margin-bottom: 6px;
+}
+.df-view-column__second-row > .df-view-transparent:last-child {
+  margin-bottom: 0;
+}
+.df-view-column:hover > .df-copy-button {
+  display: block;
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewColumn = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("@gravity-ui/components");
+const core_1 = require("../../../../core");
+const kit_1 = require("../../../../kit");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('view-column');
+const ViewColumn = ({ value, spec, children, }) => {
+    const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
+    if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('first-row') },
+            react_1.default.createElement(uikit_1.Text, { color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement(components_1.HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null),
+        react_1.default.createElement("div", { className: b('second-row') }, children),
+        react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value })));
+};
+exports.ViewColumn = ViewColumn;

package/build/cjs/lib/kit/components/ViewLayouts/ViewColumn/index.js

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

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

@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./ViewCardAccordeon"), exports);
 tslib_1.__exportStar(require("./ViewAccordeonCard"), exports);
 tslib_1.__exportStar(require("./ViewCardSection"), exports);
 tslib_1.__exportStar(require("./ViewRow"), exports);
+tslib_1.__exportStar(require("./ViewColumn"), exports);
 tslib_1.__exportStar(require("./ViewSection"), exports);
 tslib_1.__exportStar(require("./ViewTableCell"), exports);
 tslib_1.__exportStar(require("./ViewTransparent"), exports);

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

@@ -14,6 +14,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             accordeon: components_1.Accordeon,
             section: components_1.Section,
             section2: components_1.Section2,
@@ -37,6 +38,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
         },
@@ -51,6 +53,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
         },
@@ -75,6 +78,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             accordeon: components_1.Accordeon,
             section: components_1.Section,
             section2: components_1.Section2,
@@ -104,6 +108,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
             section: components_1.Section,
@@ -129,6 +134,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             accordeon: components_1.ViewAccordeon,
             section: components_1.ViewSection,
             section2: components_1.ViewSection2,
@@ -149,6 +155,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
         },
@@ -160,6 +167,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
         },
@@ -181,6 +189,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             accordeon: components_1.ViewAccordeon,
             section: components_1.ViewSection,
             section2: components_1.ViewSection2,
@@ -207,6 +216,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
             section: components_1.ViewSection,

package/build/esm/lib/core/components/Form/types/field.d.ts

@@ -28,5 +28,6 @@ export interface FieldRenderProps<Value extends FieldValue> {
         valid: boolean;
         visited: boolean;
         submitFailed: boolean;
+        childErrors: Record<string, ValidateError>;
     };
 }

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/Column/Column.css

@@ -0,0 +1,62 @@
+.df-column {
+  margin-bottom: 15px;
+}
+.df-column:last-child {
+  margin-bottom: 0;
+}
+.df-column__first-row {
+  min-height: 28px;
+  display: flex;
+  margin-bottom: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.df-column__first-row-inner {
+  display: inline;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.df-column__first-row::after {
+  content: "";
+  width: 100%;
+  flex-shrink: 1;
+}
+.df-column__title {
+  word-break: break-word;
+  margin-right: 3px;
+}
+.df-column__title_required::after {
+  content: "*";
+  color: var(--g-color-text-danger);
+}
+.df-column__note {
+  position: relative;
+}
+.df-column__note-inner {
+  position: absolute;
+  margin-top: 1px;
+}
+.df-column__note-inner .g-help-popover {
+  display: flex;
+}
+.df-column__note-inner .g-help-popover > span {
+  display: flex;
+}
+.df-column__second-row {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.df-column__second-row-inner {
+  display: flex;
+  justify-content: space-around;
+}
+.df-column__remove-button {
+  margin-left: 5px;
+}
+.df-column__required-mark {
+  color: var(--g-color-text-danger);
+}
+.df-column__error-wrapper {
+  min-width: 100%;
+}

package/build/esm/lib/kit/components/Layouts/Column/Column.d.ts

@@ -0,0 +1,3 @@
+import { FieldValue, LayoutProps, Spec } from '../../../../core';
+import './Column.css';
+export declare const Column: <T extends FieldValue, S extends Spec<any, undefined, undefined>>(props: LayoutProps<T, undefined, undefined, S>) => JSX.Element;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
+import { TrashBin } from '@gravity-ui/icons';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
+import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
+import { block } from '../../../utils';
+import './Column.css';
+const b = block('column');
+const ColumnBase = ({ name, spec, input, meta, children, }) => {
+    const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('first-row') },
+            React.createElement("div", { className: b('first-row-inner') },
+                React.createElement(Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                spec.viewSpec.layoutDescription ? (React.createElement("span", { className: b('note') },
+                    React.createElement(Text, { className: b('note-inner') },
+                        React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
+        React.createElement("div", { className: b('second-row') },
+            React.createElement("div", { className: b('second-row-inner') },
+                React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
+                    // TODO: remove condition spec.viewSpec.type !== 'select'
+                    (isArraySpec(spec) && spec.viewSpec.type !== 'select') ||
+                        isObjectSpec(spec), className: b('error-wrapper') }, children),
+                generateButton ? (React.createElement(GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
+                arrayItem ? (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    React.createElement(Icon, { data: TrashBin, size: 16 }))) : null))));
+};
+export const Column = (props) => React.createElement(ColumnBase, Object.assign({}, props));

package/build/esm/lib/kit/components/Layouts/Column/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/Column/index.js

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

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/Layouts/index.d.ts

@@ -3,6 +3,7 @@ export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';
+export * from './Column';
 export * from './Section';
 export * from './TableCell';
 export * from './Transparent';

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

@@ -3,6 +3,7 @@ export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';
+export * from './Column';
 export * from './Section';
 export * from './TableCell';
 export * from './Transparent';

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/ViewLayouts/ViewColumn/ViewColumn.css

@@ -0,0 +1,22 @@
+.df-view-column {
+  margin-bottom: 20px;
+}
+.df-view-column:last-child {
+  margin-bottom: 0;
+}
+.df-view-column__first-row {
+  display: flex;
+  align-items: baseline;
+}
+.df-view-column__note {
+  margin-inline-start: var(--g-spacing-half);
+}
+.df-view-column__second-row > .df-view-transparent {
+  margin-bottom: 6px;
+}
+.df-view-column__second-row > .df-view-transparent:last-child {
+  margin-bottom: 0;
+}
+.df-view-column:hover > .df-copy-button {
+  display: block;
+}

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
+import { useDynamicFormsCtx } from '../../../../core';
+import { CopyButton } from '../../../../kit';
+import { block, isNotEmptyValue } from '../../../utils';
+import './ViewColumn.css';
+const b = block('view-column');
+export const ViewColumn = ({ value, spec, children, }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('first-row') },
+            React.createElement(Text, { color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null),
+        React.createElement("div", { className: b('second-row') }, children),
+        React.createElement(CopyButton, { spec: spec, value: value })));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/index.d.ts

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

package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/index.js

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

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

@@ -3,6 +3,7 @@ export * from './ViewCardAccordeon';
 export * from './ViewAccordeonCard';
 export * from './ViewCardSection';
 export * from './ViewRow';
+export * from './ViewColumn';
 export * from './ViewSection';
 export * from './ViewTableCell';
 export * from './ViewTransparent';

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

@@ -3,6 +3,7 @@ export * from './ViewCardAccordeon';
 export * from './ViewAccordeonCard';
 export * from './ViewCardSection';
 export * from './ViewRow';
+export * from './ViewColumn';
 export * from './ViewSection';
 export * from './ViewTableCell';
 export * from './ViewTransparent';

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

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -11,6 +11,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -34,6 +35,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             table_item: TableCell,
             transparent: Transparent,
         },
@@ -48,6 +50,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             table_item: TableCell,
             transparent: Transparent,
         },
@@ -72,6 +75,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -101,6 +105,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             table_item: TableCell,
             transparent: Transparent,
             section: Section,
@@ -126,6 +131,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -146,6 +152,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
         },
@@ -157,6 +164,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
         },
@@ -178,6 +186,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -204,6 +213,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
             section: ViewSection,

package/package.json

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