@gravity-ui/dynamic-forms 5.6.0 → 5.8.0

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

@@ -25,4 +25,8 @@
   align-items: center;
   background-color: var(--g-color-base-float-hover);
   box-sizing: border-box;
+}
+.df-monaco-header__title {
+  display: flex;
+  align-items: center;
 }

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

@@ -7,8 +7,9 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('monaco-header');
-const MonacoHeader = ({ language, editButton }) => (react_1.default.createElement("div", { className: b() },
-    react_1.default.createElement("div", null,
-        react_1.default.createElement(uikit_1.Icon, { data: icons_1.File, size: 18 }),
-        react_1.default.createElement(uikit_1.Text, { variant: "body-3" }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
+const MonacoHeader = ({ language, dialogButton, headerIconSize, headerIconIndent, headerTitleVariant, }) => (react_1.default.createElement("div", { className: b() },
+    react_1.default.createElement("div", { className: b('title') },
+        react_1.default.createElement("div", { style: { marginRight: `${headerIconIndent}px` } },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.File, size: headerIconSize })),
+        react_1.default.createElement(uikit_1.Text, { variant: headerTitleVariant }, language)), dialogButton !== null && dialogButton !== void 0 ? dialogButton : null));
 exports.MonacoHeader = MonacoHeader;

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

@@ -22,10 +22,11 @@
   height: var(--df-monaco-input-height, 354px);
 }
 .df-monaco-input__container {
-  height: 100%;
+  height: calc(100% - 2px);
   display: flex;
   flex-direction: column;
   border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
 }
 .df-monaco-input__editor {
   flex: 1;

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

@@ -15,17 +15,17 @@ const MonacoInputBase = ({ name, input, spec, MonacoComponent, withoutDialog, })
     const { value, onChange } = input;
     const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
     const { monacoParams, disabled, layoutTitle } = spec.viewSpec;
-    const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 11 };
+    const { language = 'plaintext', fontSize = 11, headerIconSize = 18, headerIconIndent = 5, headerTitleVariant = 'body-2', headerDialogButtonSize = 'm', headerDialogIconSize = 16, } = monacoParams || {};
     const [monacoEditorDialog, setMonacoEditorDialog] = react_1.default.useState(false);
     const [monacoValue, setMonacoValue] = react_1.default.useState(value);
     const handleMonacoEditorDialogClose = react_1.default.useCallback(() => setMonacoEditorDialog(false), []);
     const dialogButton = react_1.default.useMemo(() => {
         if (!withoutDialog) {
-            return (react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true), qa: `${name}-open-dialog` },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: 16 })));
+            return (react_1.default.createElement(uikit_1.Button, { size: headerDialogButtonSize, onClick: () => setMonacoEditorDialog(true), qa: `${name}-open-dialog` },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: headerDialogIconSize })));
         }
         return;
-    }, [withoutDialog, setMonacoEditorDialog, name]);
+    }, [withoutDialog, setMonacoEditorDialog, name, headerDialogButtonSize, headerDialogIconSize]);
     react_1.default.useEffect(() => onChange(monacoValue), [monacoValue]);
     const options = (0, useMonacoOptions_1.useMonacoOptions)(fontSize, disabled !== null && disabled !== void 0 ? disabled : false);
     if (!MonacoEditor) {
@@ -33,10 +33,10 @@ const MonacoInputBase = ({ name, input, spec, MonacoComponent, withoutDialog, })
     }
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('container'), "data-qa": name },
-            react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, editButton: dialogButton }),
+            react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, dialogButton: dialogButton, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant }),
             react_1.default.createElement("div", { className: b('editor') },
                 react_1.default.createElement(MonacoEditor, { language: language, value: monacoValue, onChange: setMonacoValue, options: options }))),
-        react_1.default.createElement(MonacoInputDialog_1.MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
+        react_1.default.createElement(MonacoInputDialog_1.MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant })));
 };
 exports.MonacoInputBase = MonacoInputBase;
 const MonacoInput = (props) => (react_1.default.createElement(exports.MonacoInputBase, Object.assign({}, props)));

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

@@ -25,10 +25,11 @@
   padding: var(--df-monaco-input-dialog-dialog-footer-padding, var(--g-spacing-2) var(--g-spacing-8) var(--g-spacing-8));
 }
 .df-monaco-input-dialog__container {
-  height: 100%;
+  height: calc(100% - 2px);
   display: flex;
   flex-direction: column;
   border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
 }
 .df-monaco-input-dialog__editor {
   flex: 1;

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

@@ -10,7 +10,7 @@ const utils_1 = require("../../../utils");
 const MonacoHeader_1 = require("./MonacoHeader");
 const useMonacoOptions_1 = require("./useMonacoOptions");
 const b = (0, utils_1.block)('monaco-input-dialog');
-const MonacoInputDialog = ({ name, value, title, visible, language, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
+const MonacoInputDialog = ({ name, value, title, visible, language, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, headerIconSize, headerIconIndent, headerTitleVariant, }) => {
     const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
     const handleClose = react_1.default.useCallback(() => {
         onChange(value);
@@ -24,7 +24,7 @@ const MonacoInputDialog = ({ name, value, title, visible, language, onChange, on
         react_1.default.createElement(uikit_1.Dialog.Header, { caption: title, className: b('dialog-header') }),
         react_1.default.createElement(uikit_1.Dialog.Body, null,
             react_1.default.createElement("div", { className: b('container'), "data-qa": `${name}-dialog` },
-                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language }),
+                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant }),
                 react_1.default.createElement("div", { className: b('editor') },
                     react_1.default.createElement(MonacoEditor, { language: language, value: value, onChange: changeMonacoValue, options: options })))),
         react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));

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/Views/MonacoInputView/MonacoBaseView.css

@@ -18,6 +18,16 @@
 */
 /* Border-radius */
 .df-monaco-base-view {
-  border: 1px solid var(--g-color-line-generic);
   width: var(--df-monaco-base-view-width, 550px);
+  height: var(--df-monaco-base-view-height, 354px);
+}
+.df-monaco-base-view__container {
+  height: calc(100% - 2px);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
+}
+.df-monaco-base-view__editor {
+  flex: 1;
 }

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js

@@ -11,21 +11,26 @@ const MonacoHeader_1 = require("../../Inputs/MonacoInput/MonacoHeader");
 const useMonacoOptions_1 = require("../../Inputs/MonacoInput/useMonacoOptions");
 const MonacoViewDialog_1 = require("./MonacoViewDialog");
 const b = (0, utils_1.block)('monaco-base-view');
-const MonacoBaseView = ({ value, spec }) => {
+const MonacoBaseView = ({ value, spec, name }) => {
     const { monacoParams, layoutTitle } = spec.viewSpec;
     const MonacoEditor = (0, hooks_1.useMonaco)();
-    const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 12 };
+    const { language = 'plaintext', fontSize = 11, headerIconSize = 18, headerIconIndent = 5, headerTitleVariant = 'body-2', headerDialogButtonSize = 'm', headerDialogIconSize = 16, } = monacoParams || {};
     const options = (0, useMonacoOptions_1.useMonacoOptions)(fontSize, true);
     const [monacoEditorDialog, setMonacoEditorDialog] = react_1.default.useState(false);
     const handleMonacoEditorDialogClose = react_1.default.useCallback(() => setMonacoEditorDialog(false), []);
+    const dialogButton = react_1.default.useMemo(() => {
+        return (react_1.default.createElement(uikit_1.Button, { size: headerDialogButtonSize, onClick: () => setMonacoEditorDialog(true), qa: `${name}-open-dialog` },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: headerDialogIconSize })));
+    }, [setMonacoEditorDialog, name, headerDialogButtonSize, headerDialogIconSize]);
     if (!value || !MonacoEditor) {
         return null;
     }
     return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, editButton: react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true) },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: 16 })) }),
-        react_1.default.createElement(MonacoEditor, { language: language, value: value, height: '250', options: options }),
-        react_1.default.createElement(MonacoViewDialog_1.MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose })));
+        react_1.default.createElement("div", { className: b('container'), "data-qa": name },
+            react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, dialogButton: dialogButton, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant }),
+            react_1.default.createElement("div", { className: b('editor') },
+                react_1.default.createElement(MonacoEditor, { language: language, value: value, options: options }))),
+        react_1.default.createElement(MonacoViewDialog_1.MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant })));
 };
 const MonacoView = (props) => react_1.default.createElement(MonacoBaseView, Object.assign({}, props));
 exports.MonacoView = MonacoView;

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css

@@ -17,11 +17,22 @@
 }
 */
 /* Border-radius */
+.df-monaco-view-dialog {
+  width: var(--df-monaco-view-dialog-width, 966px);
+  height: var(--df-monaco-view-dialog-height, 804px);
+}
 .df-monaco-view-dialog .g-dialog-footer {
   padding: var(--df-monaco-view-dialog-footer-padding, var(--g-spacing-4));
 }
 .df-monaco-view-dialog__container {
+  height: calc(100% - 2px);
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
+}
+.df-monaco-view-dialog__editor {
+  flex: 1;
 }
 .df-monaco-view-dialog__dialog-header {
   height: var(--df-monaco-view-dialog-header-height, 48px);

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js

@@ -10,7 +10,7 @@ const utils_1 = require("../../../utils");
 const MonacoHeader_1 = require("../../Inputs/MonacoInput/MonacoHeader");
 const useMonacoOptions_1 = require("../../Inputs/MonacoInput/useMonacoOptions");
 const b = (0, utils_1.block)('monaco-view-dialog');
-const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, }) => {
+const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, headerIconSize, headerIconIndent, headerTitleVariant, }) => {
     const MonacoEditor = (0, hooks_1.useMonaco)();
     const handleClose = react_1.default.useCallback(() => {
         onClose();
@@ -23,8 +23,9 @@ const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize,
         react_1.default.createElement(uikit_1.Dialog.Header, { caption: title, className: b('dialog-header') }),
         react_1.default.createElement(uikit_1.Dialog.Body, null,
             react_1.default.createElement("div", { className: b('container') },
-                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language }),
-                react_1.default.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, options: options }))),
+                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant }),
+                react_1.default.createElement("div", { className: b('editor') },
+                    react_1.default.createElement(MonacoEditor, { language: language, value: value, options: options })))),
         react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));
 };
 exports.MonacoViewDialog = MonacoViewDialog;

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

@@ -1,4 +1,4 @@
-import type { AlertProps, LabelProps } from '@gravity-ui/uikit';
+import type { AlertProps, ButtonSize, LabelProps, TextProps } from '@gravity-ui/uikit';
 import type { ColorTextBaseProps } from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 import type { ReadAsMethod, SpecTypes } from '../constants';
 import type { ArrayValue, ObjectValue } from './';
@@ -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;
@@ -140,6 +141,11 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
         monacoParams?: {
             language?: string;
             fontSize?: number;
+            headerIconSize?: number;
+            headerIconIndent?: number;
+            headerTitleVariant?: TextProps['variant'];
+            headerDialogButtonSize?: ButtonSize;
+            headerDialogIconSize?: number;
         };
         hideValues?: string[];
         placeholder?: string;

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

@@ -25,4 +25,8 @@
   align-items: center;
   background-color: var(--g-color-base-float-hover);
   box-sizing: border-box;
+}
+.df-monaco-header__title {
+  display: flex;
+  align-items: center;
 }

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

@@ -1,8 +1,12 @@
 import React from 'react';
+import { type TextProps } from '@gravity-ui/uikit';
 import './MonacoHeader.css';
 interface MonacoHeaderProps {
-    language?: string;
-    editButton?: React.ReactNode;
+    language: string;
+    dialogButton?: React.ReactNode;
+    headerIconSize: number;
+    headerIconIndent: number;
+    headerTitleVariant: TextProps['variant'];
 }
 export declare const MonacoHeader: React.FC<MonacoHeaderProps>;
 export {};

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

@@ -4,7 +4,8 @@ import { Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './MonacoHeader.css';
 const b = block('monaco-header');
-export const MonacoHeader = ({ language, editButton }) => (React.createElement("div", { className: b() },
-    React.createElement("div", null,
-        React.createElement(Icon, { data: File, size: 18 }),
-        React.createElement(Text, { variant: "body-3" }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
+export const MonacoHeader = ({ language, dialogButton, headerIconSize, headerIconIndent, headerTitleVariant, }) => (React.createElement("div", { className: b() },
+    React.createElement("div", { className: b('title') },
+        React.createElement("div", { style: { marginRight: `${headerIconIndent}px` } },
+            React.createElement(Icon, { data: File, size: headerIconSize })),
+        React.createElement(Text, { variant: headerTitleVariant }, language)), dialogButton !== null && dialogButton !== void 0 ? dialogButton : null));

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

@@ -22,10 +22,11 @@
   height: var(--df-monaco-input-height, 354px);
 }
 .df-monaco-input__container {
-  height: 100%;
+  height: calc(100% - 2px);
   display: flex;
   flex-direction: column;
   border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
 }
 .df-monaco-input__editor {
   flex: 1;

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

@@ -12,17 +12,17 @@ export const MonacoInputBase = ({ name, input, spec, MonacoComponent, withoutDia
     const { value, onChange } = input;
     const MonacoEditor = useMonaco() || MonacoComponent;
     const { monacoParams, disabled, layoutTitle } = spec.viewSpec;
-    const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 11 };
+    const { language = 'plaintext', fontSize = 11, headerIconSize = 18, headerIconIndent = 5, headerTitleVariant = 'body-2', headerDialogButtonSize = 'm', headerDialogIconSize = 16, } = monacoParams || {};
     const [monacoEditorDialog, setMonacoEditorDialog] = React.useState(false);
     const [monacoValue, setMonacoValue] = React.useState(value);
     const handleMonacoEditorDialogClose = React.useCallback(() => setMonacoEditorDialog(false), []);
     const dialogButton = React.useMemo(() => {
         if (!withoutDialog) {
-            return (React.createElement(Button, { onClick: () => setMonacoEditorDialog(true), qa: `${name}-open-dialog` },
-                React.createElement(Icon, { data: ChevronsExpandUpRight, size: 16 })));
+            return (React.createElement(Button, { size: headerDialogButtonSize, onClick: () => setMonacoEditorDialog(true), qa: `${name}-open-dialog` },
+                React.createElement(Icon, { data: ChevronsExpandUpRight, size: headerDialogIconSize })));
         }
         return;
-    }, [withoutDialog, setMonacoEditorDialog, name]);
+    }, [withoutDialog, setMonacoEditorDialog, name, headerDialogButtonSize, headerDialogIconSize]);
     React.useEffect(() => onChange(monacoValue), [monacoValue]);
     const options = useMonacoOptions(fontSize, disabled !== null && disabled !== void 0 ? disabled : false);
     if (!MonacoEditor) {
@@ -30,9 +30,9 @@ export const MonacoInputBase = ({ name, input, spec, MonacoComponent, withoutDia
     }
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('container'), "data-qa": name },
-            React.createElement(MonacoHeader, { language: language, editButton: dialogButton }),
+            React.createElement(MonacoHeader, { language: language, dialogButton: dialogButton, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant }),
             React.createElement("div", { className: b('editor') },
                 React.createElement(MonacoEditor, { language: language, value: monacoValue, onChange: setMonacoValue, options: options }))),
-        React.createElement(MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
+        React.createElement(MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant })));
 };
 export const MonacoInput = (props) => (React.createElement(MonacoInputBase, Object.assign({}, props)));

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

@@ -25,10 +25,11 @@
   padding: var(--df-monaco-input-dialog-dialog-footer-padding, var(--g-spacing-2) var(--g-spacing-8) var(--g-spacing-8));
 }
 .df-monaco-input-dialog__container {
-  height: 100%;
+  height: calc(100% - 2px);
   display: flex;
   flex-direction: column;
   border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
 }
 .df-monaco-input-dialog__editor {
   flex: 1;

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

@@ -1,17 +1,21 @@
 import React from 'react';
+import { type TextProps } from '@gravity-ui/uikit';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import './MonacoInputDialog.css';
 interface MonacoInputDialogProps {
     name: string;
     visible: boolean;
     value: string;
-    language?: string;
+    language: string;
     title: string | undefined;
     fontSize: number | undefined;
     onChange: (value: string) => void;
     onClose: () => void;
     changeMonacoValue: (value: string) => void;
     MonacoComponent?: React.ComponentType<MonacoEditorProps>;
+    headerIconSize: number;
+    headerIconIndent: number;
+    headerTitleVariant: TextProps['variant'];
 }
 export declare const MonacoInputDialog: React.FC<MonacoInputDialogProps>;
 export {};

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

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

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/Views/MonacoInputView/MonacoBaseView.css

@@ -18,6 +18,16 @@
 */
 /* Border-radius */
 .df-monaco-base-view {
-  border: 1px solid var(--g-color-line-generic);
   width: var(--df-monaco-base-view-width, 550px);
+  height: var(--df-monaco-base-view-height, 354px);
+}
+.df-monaco-base-view__container {
+  height: calc(100% - 2px);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
+}
+.df-monaco-base-view__editor {
+  flex: 1;
 }

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js

@@ -8,20 +8,25 @@ import { useMonacoOptions } from '../../Inputs/MonacoInput/useMonacoOptions';
 import { MonacoViewDialog } from './MonacoViewDialog';
 import './MonacoBaseView.css';
 const b = block('monaco-base-view');
-const MonacoBaseView = ({ value, spec }) => {
+const MonacoBaseView = ({ value, spec, name }) => {
     const { monacoParams, layoutTitle } = spec.viewSpec;
     const MonacoEditor = useMonaco();
-    const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 12 };
+    const { language = 'plaintext', fontSize = 11, headerIconSize = 18, headerIconIndent = 5, headerTitleVariant = 'body-2', headerDialogButtonSize = 'm', headerDialogIconSize = 16, } = monacoParams || {};
     const options = useMonacoOptions(fontSize, true);
     const [monacoEditorDialog, setMonacoEditorDialog] = React.useState(false);
     const handleMonacoEditorDialogClose = React.useCallback(() => setMonacoEditorDialog(false), []);
+    const dialogButton = React.useMemo(() => {
+        return (React.createElement(Button, { size: headerDialogButtonSize, onClick: () => setMonacoEditorDialog(true), qa: `${name}-open-dialog` },
+            React.createElement(Icon, { data: ChevronsExpandUpRight, size: headerDialogIconSize })));
+    }, [setMonacoEditorDialog, name, headerDialogButtonSize, headerDialogIconSize]);
     if (!value || !MonacoEditor) {
         return null;
     }
     return (React.createElement("div", { className: b() },
-        React.createElement(MonacoHeader, { language: language, editButton: React.createElement(Button, { onClick: () => setMonacoEditorDialog(true) },
-                React.createElement(Icon, { data: ChevronsExpandUpRight, size: 16 })) }),
-        React.createElement(MonacoEditor, { language: language, value: value, height: '250', options: options }),
-        React.createElement(MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose })));
+        React.createElement("div", { className: b('container'), "data-qa": name },
+            React.createElement(MonacoHeader, { language: language, dialogButton: dialogButton, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant }),
+            React.createElement("div", { className: b('editor') },
+                React.createElement(MonacoEditor, { language: language, value: value, options: options }))),
+        React.createElement(MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant })));
 };
 export const MonacoView = (props) => React.createElement(MonacoBaseView, Object.assign({}, props));

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css

@@ -17,11 +17,22 @@
 }
 */
 /* Border-radius */
+.df-monaco-view-dialog {
+  width: var(--df-monaco-view-dialog-width, 966px);
+  height: var(--df-monaco-view-dialog-height, 804px);
+}
 .df-monaco-view-dialog .g-dialog-footer {
   padding: var(--df-monaco-view-dialog-footer-padding, var(--g-spacing-4));
 }
 .df-monaco-view-dialog__container {
+  height: calc(100% - 2px);
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--g-color-line-generic);
+  box-sizing: content-box;
+}
+.df-monaco-view-dialog__editor {
+  flex: 1;
 }
 .df-monaco-view-dialog__dialog-header {
   height: var(--df-monaco-view-dialog-header-height, 48px);

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
+import { type TextProps } from '@gravity-ui/uikit';
 import './MonacoViewDialog.css';
 interface MonacoViewDialogProps {
     visible: boolean;
     value: string;
-    language?: string;
+    language: string;
     title: string | undefined;
     fontSize: number | undefined;
     onClose: () => void;
+    headerIconSize: number;
+    headerIconIndent: number;
+    headerTitleVariant: TextProps['variant'];
 }
 export declare const MonacoViewDialog: React.FC<MonacoViewDialogProps>;
 export {};

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js

@@ -7,7 +7,7 @@ import { MonacoHeader } from '../../Inputs/MonacoInput/MonacoHeader';
 import { useMonacoOptions } from '../../Inputs/MonacoInput/useMonacoOptions';
 import './MonacoViewDialog.css';
 const b = block('monaco-view-dialog');
-export const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, }) => {
+export const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, headerIconSize, headerIconIndent, headerTitleVariant, }) => {
     const MonacoEditor = useMonaco();
     const handleClose = React.useCallback(() => {
         onClose();
@@ -20,7 +20,8 @@ export const MonacoViewDialog = ({ value, title, visible, language, onClose, fon
         React.createElement(Dialog.Header, { caption: title, className: b('dialog-header') }),
         React.createElement(Dialog.Body, null,
             React.createElement("div", { className: b('container') },
-                React.createElement(MonacoHeader, { language: language }),
-                React.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, options: options }))),
+                React.createElement(MonacoHeader, { language: language, headerIconSize: headerIconSize, headerIconIndent: headerIconIndent, headerTitleVariant: headerTitleVariant }),
+                React.createElement("div", { className: b('editor') },
+                    React.createElement(MonacoEditor, { language: language, value: value, options: options })))),
         React.createElement(Dialog.Footer, { textButtonApply: i18n('button_cancel'), onClickButtonApply: handleClose })));
 };

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.6.0",
+  "version": "5.8.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",