@gravity-ui/dynamic-forms 5.5.0 → 5.7.0

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

@@ -24,4 +24,9 @@
   padding: var(--df-monaco-header-padding, var(--g-spacing-4));
   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

@@ -19,7 +19,15 @@
 /* Border-radius */
 .df-monaco-input {
   width: var(--df-monaco-input-width, 550px);
+  height: var(--df-monaco-input-height, 354px);
 }
 .df-monaco-input__container {
+  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,9 +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(MonacoEditor, { language: language, value: monacoValue, height: "300", 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(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, 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

@@ -17,11 +17,22 @@
 }
 */
 /* Border-radius */
+.df-monaco-input-dialog {
+  width: var(--df-monaco-input-dialog-width, 966px);
+  height: var(--df-monaco-input-dialog-height, 804px);
+}
 .df-monaco-input-dialog .g-dialog-footer {
   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: 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;
 }
 .df-monaco-input-dialog__dialog-header .g-dialog-header__caption {
   min-height: var(--df-monaco-dialog-header-caption-min-height, 24px);

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,8 +24,9 @@ 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(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, 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, onChange: changeMonacoValue, options: options })))),
         react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));
 };
 exports.MonacoInputDialog = MonacoInputDialog;

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/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 './';
@@ -140,6 +140,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

@@ -24,4 +24,9 @@
   padding: var(--df-monaco-header-padding, var(--g-spacing-4));
   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

@@ -19,7 +19,15 @@
 /* Border-radius */
 .df-monaco-input {
   width: var(--df-monaco-input-width, 550px);
+  height: var(--df-monaco-input-height, 354px);
 }
 .df-monaco-input__container {
+  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,8 +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(MonacoEditor, { language: language, value: monacoValue, height: "300", 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(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, 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

@@ -17,11 +17,22 @@
 }
 */
 /* Border-radius */
+.df-monaco-input-dialog {
+  width: var(--df-monaco-input-dialog-width, 966px);
+  height: var(--df-monaco-input-dialog-height, 804px);
+}
 .df-monaco-input-dialog .g-dialog-footer {
   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: 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;
 }
 .df-monaco-input-dialog__dialog-header .g-dialog-header__caption {
   min-height: var(--df-monaco-dialog-header-caption-min-height, 24px);

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,8 @@ 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(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, 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, onChange: changeMonacoValue, options: options })))),
         React.createElement(Dialog.Footer, { textButtonApply: i18n('button_cancel'), onClickButtonApply: handleClose })));
 };

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/package.json

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