@gravity-ui/dynamic-forms 5.7.0 → 5.8.1

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

@@ -23,6 +23,10 @@
 .df-table-array__table .g-table__cell {
   border-bottom: 0px transparent;
 }
+.df-table-array__column-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .df-table-array__row .g-table__cell {
   border-bottom: 0px transparent;
   border-top: 1px solid var(--g-color-line-generic);
@@ -62,6 +66,12 @@
   max-width: 50px;
   min-width: 50px;
 }
+.df-table-array__cell-without-limit_arr, .df-table-array__cell-without-limit_obj {
+  padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
+}
+.df-table-array__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array__cell-without-limit_obj > .simple-vertical-accordeon {
+  margin-bottom: var(--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom, var(--g-spacing-0));
+}
 .df-table-array__idx {
   padding-top: var(--df-table-array-idx-padding-top, 6px);
 }

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

@@ -47,12 +47,12 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             template: ({ key }) => (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))),
         };
-        const columns = table.map(({ property, label, description }) => ({
+        const columns = table.map(({ property, label, description, width }) => ({
             id: property,
             name: !description
-                ? label
-                : () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center" },
-                    label,
+                ? () => (react_1.default.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label))
+                : () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
+                    react_1.default.createElement("div", { className: b('column-title') }, label),
                     react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                             placement: common_1.COMMON_POPOVER_PLACEMENT,
                         } },
@@ -64,11 +64,11 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                     return null;
                 }
                 const preparedEntitySpec = Object.assign(Object.assign({}, entitySpec), { viewSpec: Object.assign(Object.assign({}, entitySpec.viewSpec), { layoutTitle: table.map(({ label }) => label).join(` ${idx + 1} `) + ` ${idx + 1}` }) });
-                return (react_1.default.createElement("div", { className: b('cell', {
+                return (react_1.default.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
                         bool: (0, core_1.isBooleanSpec)(preparedEntitySpec),
                         arr: (0, core_1.isArraySpec)(preparedEntitySpec),
                         obj: (0, core_1.isObjectSpec)(preparedEntitySpec),
-                    }), key: `${name}.<${key}>.${property}` },
+                    }), style: { minWidth: width, maxWidth: width }, key: `${name}.<${key}>.${property}` },
                     react_1.default.createElement(core_1.Controller, { value: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: noop_1.default })));
             },
         }));

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

@@ -27,18 +27,18 @@
   min-height: var(--df-column-first-row-min-height, 28px);
   display: flex;
   margin-bottom: auto;
-  flex-direction: column;
+  flex-direction: row;
   flex-shrink: 0;
 }
 .df-column__first-row-inner {
-  display: inline;
+  flex-grow: 1;
   margin-top: auto;
   margin-bottom: auto;
 }
-.df-column__first-row::after {
-  content: "";
-  width: 100%;
-  flex-shrink: 1;
+.df-column__first-row-action {
+  padding-left: var(--g-spacing-2);
+  margin-top: auto;
+  margin-bottom: auto;
 }
 .df-column__title {
   word-break: break-word;

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

@@ -11,7 +11,7 @@ const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
 const HTMLContent_1 = require("../../HTMLContent");
 const b = (0, utils_1.block)('column');
-const ColumnBase = ({ name, spec, input, meta, children, }) => {
+const ColumnBase = ({ name, spec, input, meta, children, action, }) => {
     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() },
@@ -23,7 +23,8 @@ const ColumnBase = ({ name, spec, input, meta, children, }) => {
                         react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                                 placement: common_1.COMMON_POPOVER_PLACEMENT,
                             } },
-                            react_1.default.createElement(HTMLContent_1.HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null)),
+                            react_1.default.createElement(HTMLContent_1.HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null),
+            Boolean(action) && react_1.default.createElement("div", { className: b('first-row-action') }, action)),
         react_1.default.createElement("div", { className: b('second-row') },
             react_1.default.createElement("div", { className: b('second-row-inner') },
                 react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 

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

@@ -39,6 +39,9 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+.df-row__left-action {
+  padding-left: var(--g-spacing-2);
+}
 .df-row__left::after {
   content: "";
   width: 100%;

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

@@ -11,7 +11,7 @@ const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
 const HTMLContent_1 = require("../../HTMLContent");
 const b = (0, utils_1.block)('row');
-const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
+const RowBase = ({ name, spec, input, meta, verboseDescription, action, 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() },
@@ -23,7 +23,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                         react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                                 placement: common_1.COMMON_POPOVER_PLACEMENT,
                             } },
-                            react_1.default.createElement(HTMLContent_1.HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null)),
+                            react_1.default.createElement(HTMLContent_1.HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null,
+                Boolean(action) && react_1.default.createElement("span", { className: b('left-action') }, action))),
         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: 

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

@@ -20,6 +20,10 @@
 .df-table-array-view__table {
   margin-bottom: var(--df-table-array-view-table-margin-bottom, var(--g-spacing-3));
 }
+.df-table-array-view__column-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .df-table-array-view__cell {
   max-width: var(--df-table-array-view-cell-min-width, 150px);
   min-width: var(--df-table-array-view-cell-max-width, 150px);
@@ -33,4 +37,7 @@
 .df-table-array-view__cell_bool {
   max-width: 50px;
   min-width: 50px;
+}
+.df-table-array-view__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array-view__cell-without-limit_obj > .simple-vertical-accordeon {
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

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

@@ -22,27 +22,27 @@ const TableArrayView = ({ value = [], spec, name }) => {
             sticky: 'left',
             template: (__, idx) => (react_1.default.createElement("div", { className: b('idx'), key: `idx-${idx}` }, idx + 1)),
         };
-        const columns = table.map(({ property, label, description }) => ({
+        const columns = table.map(({ property, label, description, width }) => ({
             id: property,
             name: description && showLayoutDescription
-                ? () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center" },
-                    label,
+                ? () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
+                    react_1.default.createElement("div", { className: b('column-title') }, label),
                     react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                             placement: common_1.COMMON_POPOVER_PLACEMENT,
                         } },
                         react_1.default.createElement(HTMLContent_1.HTMLContent, { html: description }))))
-                : label,
+                : () => (react_1.default.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label)),
             template: (_, idx) => {
                 var _a;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
                 if (!entitySpec) {
                     return null;
                 }
-                return (react_1.default.createElement("div", { className: b('cell', {
+                return (react_1.default.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
                         bool: (0, core_1.isBooleanSpec)(entitySpec),
                         arr: (0, core_1.isArraySpec)(entitySpec),
                         obj: (0, core_1.isObjectSpec)(entitySpec),
-                    }), key: `${name}[${idx}].${property}` },
+                    }), style: { minWidth: width, maxWidth: width }, key: `${name}[${idx}].${property}` },
                     react_1.default.createElement(core_1.ViewController, { spec: entitySpec, name: `${name}[${idx}].${property}` })));
             },
         }));

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

@@ -25,6 +25,7 @@ export interface ArraySpec<LinkType = any, InputComponentProps extends Record<st
             label: string;
             property: string;
             description?: string;
+            width?: number;
         }[];
         link?: LinkType;
         placeholder?: string;

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

@@ -23,6 +23,10 @@
 .df-table-array__table .g-table__cell {
   border-bottom: 0px transparent;
 }
+.df-table-array__column-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .df-table-array__row .g-table__cell {
   border-bottom: 0px transparent;
   border-top: 1px solid var(--g-color-line-generic);
@@ -62,6 +66,12 @@
   max-width: 50px;
   min-width: 50px;
 }
+.df-table-array__cell-without-limit_arr, .df-table-array__cell-without-limit_obj {
+  padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
+}
+.df-table-array__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array__cell-without-limit_obj > .simple-vertical-accordeon {
+  margin-bottom: var(--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom, var(--g-spacing-0));
+}
 .df-table-array__idx {
   padding-top: var(--df-table-array-idx-padding-top, 6px);
 }

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

@@ -44,12 +44,12 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             template: ({ key }) => (React.createElement(Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
                 React.createElement(Icon, { data: TrashBin, size: 16 }))),
         };
-        const columns = table.map(({ property, label, description }) => ({
+        const columns = table.map(({ property, label, description, width }) => ({
             id: property,
             name: !description
-                ? label
-                : () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
-                    label,
+                ? () => (React.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label))
+                : () => (React.createElement(Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
+                    React.createElement("div", { className: b('column-title') }, label),
                     React.createElement(HelpMark, { popoverProps: {
                             placement: COMMON_POPOVER_PLACEMENT,
                         } },
@@ -61,11 +61,11 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                     return null;
                 }
                 const preparedEntitySpec = Object.assign(Object.assign({}, entitySpec), { viewSpec: Object.assign(Object.assign({}, entitySpec.viewSpec), { layoutTitle: table.map(({ label }) => label).join(` ${idx + 1} `) + ` ${idx + 1}` }) });
-                return (React.createElement("div", { className: b('cell', {
+                return (React.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
                         bool: isBooleanSpec(preparedEntitySpec),
                         arr: isArraySpec(preparedEntitySpec),
                         obj: isObjectSpec(preparedEntitySpec),
-                    }), key: `${name}.<${key}>.${property}` },
+                    }), style: { minWidth: width, maxWidth: width }, key: `${name}.<${key}>.${property}` },
                     React.createElement(Controller, { value: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: noop })));
             },
         }));

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

@@ -27,18 +27,18 @@
   min-height: var(--df-column-first-row-min-height, 28px);
   display: flex;
   margin-bottom: auto;
-  flex-direction: column;
+  flex-direction: row;
   flex-shrink: 0;
 }
 .df-column__first-row-inner {
-  display: inline;
+  flex-grow: 1;
   margin-top: auto;
   margin-bottom: auto;
 }
-.df-column__first-row::after {
-  content: "";
-  width: 100%;
-  flex-shrink: 1;
+.df-column__first-row-action {
+  padding-left: var(--g-spacing-2);
+  margin-top: auto;
+  margin-bottom: auto;
 }
 .df-column__title {
   word-break: break-word;

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

@@ -8,7 +8,7 @@ import { block } from '../../../utils';
 import { HTMLContent } from '../../HTMLContent';
 import './Column.css';
 const b = block('column');
-const ColumnBase = ({ name, spec, input, meta, children, }) => {
+const ColumnBase = ({ name, spec, input, meta, children, action, }) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
     const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
     return (React.createElement("div", { className: b() },
@@ -20,7 +20,8 @@ const ColumnBase = ({ name, spec, input, meta, children, }) => {
                         React.createElement(HelpMark, { popoverProps: {
                                 placement: COMMON_POPOVER_PLACEMENT,
                             } },
-                            React.createElement(HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null)),
+                            React.createElement(HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null),
+            Boolean(action) && React.createElement("div", { className: b('first-row-action') }, action)),
         React.createElement("div", { className: b('second-row') },
             React.createElement("div", { className: b('second-row-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 

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

@@ -39,6 +39,9 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+.df-row__left-action {
+  padding-left: var(--g-spacing-2);
+}
 .df-row__left::after {
   content: "";
   width: 100%;

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

@@ -8,7 +8,7 @@ import { block } from '../../../utils';
 import { HTMLContent } from '../../HTMLContent';
 import './Row.css';
 const b = block('row');
-const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
+const RowBase = ({ name, spec, input, meta, verboseDescription, action, children, }) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
     const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
     return (React.createElement("div", { className: b() },
@@ -20,7 +20,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                         React.createElement(HelpMark, { popoverProps: {
                                 placement: COMMON_POPOVER_PLACEMENT,
                             } },
-                            React.createElement(HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null)),
+                            React.createElement(HTMLContent, { html: spec.viewSpec.layoutDescription }))))) : null,
+                Boolean(action) && React.createElement("span", { className: b('left-action') }, action))),
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 

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

@@ -20,6 +20,10 @@
 .df-table-array-view__table {
   margin-bottom: var(--df-table-array-view-table-margin-bottom, var(--g-spacing-3));
 }
+.df-table-array-view__column-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .df-table-array-view__cell {
   max-width: var(--df-table-array-view-cell-min-width, 150px);
   min-width: var(--df-table-array-view-cell-max-width, 150px);
@@ -33,4 +37,7 @@
 .df-table-array-view__cell_bool {
   max-width: 50px;
   min-width: 50px;
+}
+.df-table-array-view__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array-view__cell-without-limit_obj > .simple-vertical-accordeon {
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

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

@@ -19,27 +19,27 @@ export const TableArrayView = ({ value = [], spec, name }) => {
             sticky: 'left',
             template: (__, idx) => (React.createElement("div", { className: b('idx'), key: `idx-${idx}` }, idx + 1)),
         };
-        const columns = table.map(({ property, label, description }) => ({
+        const columns = table.map(({ property, label, description, width }) => ({
             id: property,
             name: description && showLayoutDescription
-                ? () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
-                    label,
+                ? () => (React.createElement(Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
+                    React.createElement("div", { className: b('column-title') }, label),
                     React.createElement(HelpMark, { popoverProps: {
                             placement: COMMON_POPOVER_PLACEMENT,
                         } },
                         React.createElement(HTMLContent, { html: description }))))
-                : label,
+                : () => (React.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label)),
             template: (_, idx) => {
                 var _a;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
                 if (!entitySpec) {
                     return null;
                 }
-                return (React.createElement("div", { className: b('cell', {
+                return (React.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
                         bool: isBooleanSpec(entitySpec),
                         arr: isArraySpec(entitySpec),
                         obj: isObjectSpec(entitySpec),
-                    }), key: `${name}[${idx}].${property}` },
+                    }), style: { minWidth: width, maxWidth: width }, key: `${name}[${idx}].${property}` },
                     React.createElement(ViewController, { spec: entitySpec, name: `${name}[${idx}].${property}` })));
             },
         }));

package/package.json

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