@gravity-ui/dynamic-forms 3.4.1 → 3.5.0

package/build/cjs/lib/core/components/Form/Controller/utils.js

@@ -288,11 +288,9 @@ const updateStore = ({ store, setStore, spec: _spec, name, parentOnChange, paren
             parentOnChange,
             parentOnUnmount,
         })), { state: store.state });
-        if (updateState) {
-            nextStore = methodOnChange(nextStore, Object.assign({ valOrSetter: (value) => valueMutatorUpdated ? valueMutator.value : value }, (errorMutatorUpdated
-                ? { errorMutator: errorMutator.value }
-                : {})));
-        }
+        nextStore = methodOnChange(nextStore, Object.assign({ valOrSetter: (value) => valueMutatorUpdated ? valueMutator.value : value }, (errorMutatorUpdated
+            ? { errorMutator: errorMutator.value }
+            : {})));
         setStore(nextStore);
     }
     else if (updateNonCritical) {

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

@@ -47,15 +47,6 @@
   justify-content: center;
   order: -1;
 }
-.df-accordeon-card__header-content-title {
-  font-weight: 700;
-}
-.df-accordeon-card__header-content-title_size_s {
-  font-size: 13px;
-}
-.df-accordeon-card__header-content-title_size_m {
-  font-size: 16px;
-}
 .df-accordeon-card__header-content-description {
   margin-top: 12px;
   color: var(--g-color-text-complementary);

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

@@ -31,15 +31,22 @@ const AccordeonCard = ({ className, name, header, description, open: propsOpen,
             accordeonRef.current.classList.add('df-accordeon-card_empty');
         }
     });
+    const currentHeaderVariant = react_1.default.useMemo(() => {
+        if (!lodash_1.default.isString(header)) {
+            return 'body-1';
+        }
+        if (titleSize === 'm') {
+            return 'subheader-2';
+        }
+        return 'subheader-1';
+    }, [titleSize]);
     return (react_1.default.createElement("div", { ref: accordeonRef, className: b({ empty: Boolean(emptyBody) }, className) },
         react_1.default.createElement("div", { className: b('header', {
                 open: open && !emptyBody,
                 'without-action': ignoreHeaderToggle || alwaysOpen,
             }), onClick: !ignoreHeaderToggle && !alwaysOpen ? handleToggle : undefined },
             react_1.default.createElement("div", { className: b('header-content') },
-                react_1.default.createElement("span", { className: lodash_1.default.isString(header)
-                        ? b('header-content-title', { size: titleSize })
-                        : undefined }, header),
+                react_1.default.createElement(uikit_1.Text, { variant: currentHeaderVariant }, header),
                 description ? (react_1.default.createElement("span", { className: b('header-content-description'), dangerouslySetInnerHTML: { __html: description } })) : null),
             !emptyBody && !alwaysOpen ? (react_1.default.createElement("div", { className: b('header-toggle-btn'), onClick: preventEvent },
                 headerActionsTemplate ? (react_1.default.createElement("div", { className: b('interal-actions') }, headerActionsTemplate)) : null,

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

@@ -48,12 +48,6 @@
   margin-left: 10px;
 }
 .df-card__title {
-  font-size: var(--g-text-subheader-2-font-size);
-  font-weight: var(--g-text-subheader-font-weight);
-  line-height: var(--g-text-subheader-2-line-height);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   max-width: 533px;
 }
 .df-card__note {

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

@@ -38,7 +38,7 @@ const Card = ({ name, title: propsTitle, description, actions, open: propsOpen,
         if (lodash_1.default.isString(propsTitle)) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(uikit_1.Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT },
-                    react_1.default.createElement("div", { ref: titleRef, className: b('title') }, propsTitle)),
+                    react_1.default.createElement(uikit_1.Text, { className: b('title'), ellipsis: true, ref: titleRef, variant: "subheader-2" }, propsTitle)),
                 description ? (react_1.default.createElement("div", { className: b('note') },
                     react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: common_1.COMMON_POPOVER_PLACEMENT }))) : null));
         }

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

@@ -8,8 +8,4 @@
   display: block;
   margin: auto 10px;
   max-width: 160px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  color: var(--g-color-text-secondary);
 }

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

@@ -43,7 +43,7 @@ const FileInput = ({ name, input, spec }) => {
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement(uikit_1.Button, { disabled: spec.viewSpec.disabled, onClick: handleClick, qa: `${name}-file-upload` }, (0, i18n_1.default)('button-upload_file')),
         react_1.default.createElement("input", { type: "file", ref: inputRef, autoComplete: "off", disabled: spec.viewSpec.disabled, onChange: handleInputChange, className: b('input'), tabIndex: -1, accept: (_b = spec.viewSpec.fileInput) === null || _b === void 0 ? void 0 : _b.accept }),
-        react_1.default.createElement("span", { className: b('file-name') }, fileNameContent),
+        react_1.default.createElement(uikit_1.Text, { className: b('file-name'), ellipsis: true, color: "secondary" }, fileNameContent),
         value ? (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled, qa: `${name}-file-remove` },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null));
 };

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

@@ -5,9 +5,4 @@
   padding: 15px;
   align-items: center;
   background-color: var(--g-color-base-float-hover);
-}
-.df-monaco-header__language {
-  margin-top: 2px;
-  margin-left: 10px;
-  font-size: 16px;
 }

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

@@ -10,5 +10,5 @@ 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("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
+        react_1.default.createElement(uikit_1.Text, { variant: "body-3" }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
 exports.MonacoHeader = MonacoHeader;

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

@@ -27,7 +27,7 @@ const TextContent = (_a) => {
             iconLib ? (react_1.default.createElement(uikit_1.Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
             content,
             input.value ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { className: b('separator') }, ":"),
+                react_1.default.createElement(uikit_1.Text, { className: b('separator') }, ":"),
                 react_1.default.createElement(uikit_1.Text, { color: "secondary" }, input.value))) : null));
     }
     if (Layout) {

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

@@ -16,9 +16,9 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("div", { className: b('left-inner') },
-                react_1.default.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                react_1.default.createElement(uikit_1.Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
                 !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
-                    react_1.default.createElement("span", { className: b('note-inner') },
+                    react_1.default.createElement(uikit_1.Text, { className: b('note-inner') },
                         react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },

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

@@ -31,7 +31,7 @@ const SectionBase = (_a) => {
                 } }));
         }
         else {
-            description = (react_1.default.createElement("div", { className: b('note') },
+            description = (react_1.default.createElement(uikit_1.Text, { className: b('note') },
                 react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
         }
     }

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

@@ -1,11 +1,5 @@
 .df-long-value {
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-long-value_open {
-  white-space: pre-wrap;
-  word-wrap: break-word;
 }
 .df-long-value_long {
   cursor: pointer;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LongValue = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('long-value');
 const LongValue = ({ value, className }) => {
@@ -11,6 +12,15 @@ const LongValue = ({ value, className }) => {
     const [open, setOpen] = react_1.default.useState(false);
     const [long, setLong] = react_1.default.useState(false);
     const handleClick = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const currentTextProperies = react_1.default.useMemo(() => {
+        let wordBreak;
+        let whiteSpace;
+        if (open) {
+            wordBreak = 'break-all';
+            whiteSpace = 'break-spaces';
+        }
+        return { wordBreak, whiteSpace };
+    }, [open]);
     react_1.default.useEffect(() => {
         if (ref.current) {
             if (value !== prevValue.current) {
@@ -32,6 +42,7 @@ const LongValue = ({ value, className }) => {
             }
         }
     });
-    return (react_1.default.createElement("div", { ref: ref, className: b({ open, long }, className), onClick: long ? handleClick : undefined }, value));
+    return (react_1.default.createElement("div", { ref: ref, onClick: long ? handleClick : undefined },
+        react_1.default.createElement(uikit_1.Text, Object.assign({ className: b({ long }, className), ellipsis: true }, currentTextProperies), value)));
 };
 exports.LongValue = LongValue;

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

@@ -17,21 +17,6 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__title {
-  font-weight: 500;
-}
-.df-simple-vertical-accordeon__title_size_s {
-  margin-bottom: 0;
-  font-size: var(--g-text-body-1-font-size);
-}
-.df-simple-vertical-accordeon__title_size_m {
-  margin-bottom: 1px;
-  font-size: var(--g-text-body2-font-size);
-}
-.df-simple-vertical-accordeon__title_size_l {
-  margin-bottom: 2px;
-  font-size: var(--g-text-body3-font-size);
-}
 .df-simple-vertical-accordeon__tooltip {
   margin: 0px 5px;
 }

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

@@ -52,7 +52,7 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
     }
     render() {
         var _a;
-        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
+        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (react_1.default.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (react_1.default.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -60,11 +60,12 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         }
         const title = this.getTitle();
         const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
+        const currentTitleVariant = this.getCurrentTitleVariant();
         return (Boolean(react_1.default.Children.count(children)) && (react_1.default.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             react_1.default.createElement("div", { className: b('header') },
                 react_1.default.createElement(uikit_1.Popover, { content: title, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT },
                     react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
-                        react_1.default.createElement("b", { ref: this.titleRef, className: b('title', { size: titleSize }) }, title),
+                        react_1.default.createElement(uikit_1.Text, { variant: currentTitleVariant }, title),
                         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: b('chevron', { open }), size: 16 }))),
                 this.getTooltip(),
                 headerActionsTemplate ? headerActionsTemplate : null),
@@ -77,9 +78,19 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         }
         return this.state.open ? openTitle : title;
     }
+    getCurrentTitleVariant() {
+        const { titleSize } = this.props;
+        if (titleSize === 'm') {
+            return 'body-2';
+        }
+        if (titleSize === 'l') {
+            return 'body-3';
+        }
+        return 'body-1';
+    }
     getTooltip() {
         const { note } = this.props;
-        return note ? (react_1.default.createElement("span", { className: b('tooltip') },
+        return note ? (react_1.default.createElement(uikit_1.Text, { className: b('tooltip') },
             react_1.default.createElement(components_1.HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
     }
 }

package/build/cjs/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -14,12 +14,6 @@
   align-items: baseline;
   overflow: hidden;
 }
-.df-view-row__title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--g-color-text-secondary);
-}
 .df-view-row__dots {
   min-width: 40px;
   flex-grow: 1;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewRow = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('view-row');
@@ -12,7 +13,7 @@ const ViewRow = ({ value, spec, children, }) => {
     }
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('left') },
-            react_1.default.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle),
+            react_1.default.createElement(uikit_1.Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             react_1.default.createElement("div", { className: b('dots') })),
         react_1.default.createElement("div", { className: b('right') }, children),
         react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value })));

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

@@ -12,9 +12,7 @@ const NumberWithScaleViewBase = ({ spec, value }) => {
     const { scale } = spec.viewSpec.sizeParams;
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement(uikit_1.Popover, { placement: ['bottom', 'top'], content: initialValue, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: initialValue.length < 26 }, initialValue),
-        react_1.default.createElement("span", { className: b('size') },
-            " ",
-            scale[initialType].title)));
+        react_1.default.createElement(uikit_1.Text, { className: b('size') }, scale[initialType].title)));
 };
 const NumberWithScaleView = (props) => (0, utils_1.isCorrectSizeParams)(props.spec) && props.value ? react_1.default.createElement(NumberWithScaleViewBase, Object.assign({}, props)) : null;
 exports.NumberWithScaleView = NumberWithScaleView;

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

@@ -4,14 +4,6 @@
 .df-text-area-view_active {
   cursor: pointer;
 }
-.df-text-area-view__text-view {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-text-area-view__text-view_open {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-}
 .df-text-area-view__chevron {
   margin: 3px;
 }

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

@@ -14,7 +14,7 @@ const TextAreaView = ({ value = '' }) => {
         setIsOpen(!isOpen);
     }, [isOpen]);
     return (react_1.default.createElement("div", { className: b({ active: isValueLong }), onClick: isValueLong ? handleClick : undefined },
-        react_1.default.createElement("div", { className: b('text-view', { open: isOpen }) }, value),
+        react_1.default.createElement(uikit_1.Text, { ellipsis: true, whiteSpace: isOpen ? 'break-spaces' : undefined }, value),
         isValueLong ? (react_1.default.createElement("div", null,
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: b('chevron', { open: isOpen }), size: 16 }))) : null));
 };

package/build/esm/lib/core/components/Form/Controller/utils.js

@@ -275,11 +275,9 @@ export const updateStore = ({ store, setStore, spec: _spec, name, parentOnChange
             parentOnChange,
             parentOnUnmount,
         })), { state: store.state });
-        if (updateState) {
-            nextStore = methodOnChange(nextStore, Object.assign({ valOrSetter: (value) => valueMutatorUpdated ? valueMutator.value : value }, (errorMutatorUpdated
-                ? { errorMutator: errorMutator.value }
-                : {})));
-        }
+        nextStore = methodOnChange(nextStore, Object.assign({ valOrSetter: (value) => valueMutatorUpdated ? valueMutator.value : value }, (errorMutatorUpdated
+            ? { errorMutator: errorMutator.value }
+            : {})));
         setStore(nextStore);
     }
     else if (updateNonCritical) {

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

@@ -47,15 +47,6 @@
   justify-content: center;
   order: -1;
 }
-.df-accordeon-card__header-content-title {
-  font-weight: 700;
-}
-.df-accordeon-card__header-content-title_size_s {
-  font-size: 13px;
-}
-.df-accordeon-card__header-content-title_size_m {
-  font-size: 16px;
-}
 .df-accordeon-card__header-content-description {
   margin-top: 12px;
   color: var(--g-color-text-complementary);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Icon } from '@gravity-ui/uikit';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { block } from '../../utils';
 import './AccordeonCard.css';
@@ -28,15 +28,22 @@ export const AccordeonCard = ({ className, name, header, description, open: prop
             accordeonRef.current.classList.add('df-accordeon-card_empty');
         }
     });
+    const currentHeaderVariant = React.useMemo(() => {
+        if (!_.isString(header)) {
+            return 'body-1';
+        }
+        if (titleSize === 'm') {
+            return 'subheader-2';
+        }
+        return 'subheader-1';
+    }, [titleSize]);
     return (React.createElement("div", { ref: accordeonRef, className: b({ empty: Boolean(emptyBody) }, className) },
         React.createElement("div", { className: b('header', {
                 open: open && !emptyBody,
                 'without-action': ignoreHeaderToggle || alwaysOpen,
             }), onClick: !ignoreHeaderToggle && !alwaysOpen ? handleToggle : undefined },
             React.createElement("div", { className: b('header-content') },
-                React.createElement("span", { className: _.isString(header)
-                        ? b('header-content-title', { size: titleSize })
-                        : undefined }, header),
+                React.createElement(Text, { variant: currentHeaderVariant }, header),
                 description ? (React.createElement("span", { className: b('header-content-description'), dangerouslySetInnerHTML: { __html: description } })) : null),
             !emptyBody && !alwaysOpen ? (React.createElement("div", { className: b('header-toggle-btn'), onClick: preventEvent },
                 headerActionsTemplate ? (React.createElement("div", { className: b('interal-actions') }, headerActionsTemplate)) : null,

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

@@ -48,12 +48,6 @@
   margin-left: 10px;
 }
 .df-card__title {
-  font-size: var(--g-text-subheader-2-font-size);
-  font-weight: var(--g-text-subheader-font-weight);
-  line-height: var(--g-text-subheader-2-line-height);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   max-width: 533px;
 }
 .df-card__note {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Card as CardBase, Icon, Popover } from '@gravity-ui/uikit';
+import { Button, Card as CardBase, Icon, Popover, Text } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH } from '../../constants/common';
 import { block } from '../../utils';
@@ -35,7 +35,7 @@ export const Card = ({ name, title: propsTitle, description, actions, open: prop
         if (_.isString(propsTitle)) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT },
-                    React.createElement("div", { ref: titleRef, className: b('title') }, propsTitle)),
+                    React.createElement(Text, { className: b('title'), ellipsis: true, ref: titleRef, variant: "subheader-2" }, propsTitle)),
                 description ? (React.createElement("div", { className: b('note') },
                     React.createElement(HelpPopover, { htmlContent: description, placement: COMMON_POPOVER_PLACEMENT }))) : null));
         }

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

@@ -8,8 +8,4 @@
   display: block;
   margin: auto 10px;
   max-width: 160px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  color: var(--g-color-text-secondary);
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Xmark } from '@gravity-ui/icons';
-import { Button, Icon, Label } from '@gravity-ui/uikit';
+import { Button, Icon, Label, Text } from '@gravity-ui/uikit';
 import i18n from '../../../../kit/i18n';
 import { block } from '../../../utils';
 import { readFile } from './utils';
@@ -40,7 +40,7 @@ export const FileInput = ({ name, input, spec }) => {
     return (React.createElement("div", { className: b() },
         React.createElement(Button, { disabled: spec.viewSpec.disabled, onClick: handleClick, qa: `${name}-file-upload` }, i18n('button-upload_file')),
         React.createElement("input", { type: "file", ref: inputRef, autoComplete: "off", disabled: spec.viewSpec.disabled, onChange: handleInputChange, className: b('input'), tabIndex: -1, accept: (_b = spec.viewSpec.fileInput) === null || _b === void 0 ? void 0 : _b.accept }),
-        React.createElement("span", { className: b('file-name') }, fileNameContent),
+        React.createElement(Text, { className: b('file-name'), ellipsis: true, color: "secondary" }, fileNameContent),
         value ? (React.createElement(Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled, qa: `${name}-file-remove` },
             React.createElement(Icon, { data: Xmark, size: 16 }))) : null));
 };

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

@@ -5,9 +5,4 @@
   padding: 15px;
   align-items: center;
   background-color: var(--g-color-base-float-hover);
-}
-.df-monaco-header__language {
-  margin-top: 2px;
-  margin-left: 10px;
-  font-size: 16px;
 }

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { File } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+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("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
+        React.createElement(Text, { variant: "body-3" }, language)), editButton !== null && editButton !== void 0 ? editButton : null));

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

@@ -25,7 +25,7 @@ export const TextContent = (_a) => {
             iconLib ? (React.createElement(Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
             content,
             input.value ? (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: b('separator') }, ":"),
+                React.createElement(Text, { className: b('separator') }, ":"),
                 React.createElement(Text, { color: "secondary" }, input.value))) : null));
     }
     if (Layout) {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { TrashBin } from '@gravity-ui/icons';
-import { Button, Icon } from '@gravity-ui/uikit';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
 import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
 import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { block } from '../../../utils';
@@ -13,9 +13,9 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement("div", { className: b('left-inner') },
-                React.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                React.createElement(Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
                 !verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("span", { className: b('note') },
-                    React.createElement("span", { className: b('note-inner') },
+                    React.createElement(Text, { className: b('note-inner') },
                         React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { GroupIndent } from '../../';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper } from '../../../';
 import { isArraySpec, isObjectSpec, } from '../../../../core';
@@ -29,7 +29,7 @@ const SectionBase = (_a) => {
                 } }));
         }
         else {
-            description = (React.createElement("div", { className: b('note') },
+            description = (React.createElement(Text, { className: b('note') },
                 React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
         }
     }

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

@@ -1,11 +1,5 @@
 .df-long-value {
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-long-value_open {
-  white-space: pre-wrap;
-  word-wrap: break-word;
 }
 .df-long-value_long {
   cursor: pointer;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from '@gravity-ui/uikit';
 import { block } from '../../utils';
 import './LongValue.css';
 const b = block('long-value');
@@ -8,6 +9,15 @@ export const LongValue = ({ value, className }) => {
     const [open, setOpen] = React.useState(false);
     const [long, setLong] = React.useState(false);
     const handleClick = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const currentTextProperies = React.useMemo(() => {
+        let wordBreak;
+        let whiteSpace;
+        if (open) {
+            wordBreak = 'break-all';
+            whiteSpace = 'break-spaces';
+        }
+        return { wordBreak, whiteSpace };
+    }, [open]);
     React.useEffect(() => {
         if (ref.current) {
             if (value !== prevValue.current) {
@@ -29,5 +39,6 @@ export const LongValue = ({ value, className }) => {
             }
         }
     });
-    return (React.createElement("div", { ref: ref, className: b({ open, long }, className), onClick: long ? handleClick : undefined }, value));
+    return (React.createElement("div", { ref: ref, onClick: long ? handleClick : undefined },
+        React.createElement(Text, Object.assign({ className: b({ long }, className), ellipsis: true }, currentTextProperies), value)));
 };

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

@@ -17,21 +17,6 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__title {
-  font-weight: 500;
-}
-.df-simple-vertical-accordeon__title_size_s {
-  margin-bottom: 0;
-  font-size: var(--g-text-body-1-font-size);
-}
-.df-simple-vertical-accordeon__title_size_m {
-  margin-bottom: 1px;
-  font-size: var(--g-text-body2-font-size);
-}
-.df-simple-vertical-accordeon__title_size_l {
-  margin-bottom: 2px;
-  font-size: var(--g-text-body3-font-size);
-}
 .df-simple-vertical-accordeon__tooltip {
   margin: 0px 5px;
 }

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

@@ -37,6 +37,7 @@ export declare class SimpleVerticalAccordeon extends React.Component<SimpleVerti
     checkVisibility: () => void;
     private handleClick;
     private getTitle;
+    private getCurrentTitleVariant;
     private getTooltip;
 }
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Icon, Popover } from '@gravity-ui/uikit';
+import { Button, Icon, Popover, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import { block } from '../../utils';
 import './SimpleVerticalAccordeon.css';
@@ -49,7 +49,7 @@ export class SimpleVerticalAccordeon extends React.Component {
     }
     render() {
         var _a;
-        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
+        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (React.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (React.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -57,11 +57,12 @@ export class SimpleVerticalAccordeon extends React.Component {
         }
         const title = this.getTitle();
         const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
+        const currentTitleVariant = this.getCurrentTitleVariant();
         return (Boolean(React.Children.count(children)) && (React.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             React.createElement("div", { className: b('header') },
                 React.createElement(Popover, { content: title, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT },
                     React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
-                        React.createElement("b", { ref: this.titleRef, className: b('title', { size: titleSize }) }, title),
+                        React.createElement(Text, { variant: currentTitleVariant }, title),
                         React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 }))),
                 this.getTooltip(),
                 headerActionsTemplate ? headerActionsTemplate : null),
@@ -74,9 +75,19 @@ export class SimpleVerticalAccordeon extends React.Component {
         }
         return this.state.open ? openTitle : title;
     }
+    getCurrentTitleVariant() {
+        const { titleSize } = this.props;
+        if (titleSize === 'm') {
+            return 'body-2';
+        }
+        if (titleSize === 'l') {
+            return 'body-3';
+        }
+        return 'body-1';
+    }
     getTooltip() {
         const { note } = this.props;
-        return note ? (React.createElement("span", { className: b('tooltip') },
+        return note ? (React.createElement(Text, { className: b('tooltip') },
             React.createElement(HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
     }
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -14,12 +14,6 @@
   align-items: baseline;
   overflow: hidden;
 }
-.df-view-row__title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--g-color-text-secondary);
-}
 .df-view-row__dots {
   min-width: 40px;
   flex-grow: 1;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from '@gravity-ui/uikit';
 import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewRow.css';
@@ -9,7 +10,7 @@ export const ViewRow = ({ value, spec, children, }) => {
     }
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
-            React.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle),
+            React.createElement(Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             React.createElement("div", { className: b('dots') })),
         React.createElement("div", { className: b('right') }, children),
         React.createElement(CopyButton, { spec: spec, value: value })));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { block, isCorrectSizeParams } from '../../../utils';
 import { useInitial } from '../../Inputs/NumberWithScale/useInitial';
 import './NumberWithScaleView.css';
@@ -9,8 +9,6 @@ const NumberWithScaleViewBase = ({ spec, value }) => {
     const { scale } = spec.viewSpec.sizeParams;
     return (React.createElement("div", { className: b() },
         React.createElement(Popover, { placement: ['bottom', 'top'], content: initialValue, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: initialValue.length < 26 }, initialValue),
-        React.createElement("span", { className: b('size') },
-            " ",
-            scale[initialType].title)));
+        React.createElement(Text, { className: b('size') }, scale[initialType].title)));
 };
 export const NumberWithScaleView = (props) => isCorrectSizeParams(props.spec) && props.value ? React.createElement(NumberWithScaleViewBase, Object.assign({}, props)) : null;

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

@@ -4,14 +4,6 @@
 .df-text-area-view_active {
   cursor: pointer;
 }
-.df-text-area-view__text-view {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-text-area-view__text-view_open {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-}
 .df-text-area-view__chevron {
   margin: 3px;
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+import { Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './TextAreaView.css';
 const b = block('text-area-view');
@@ -11,7 +11,7 @@ export const TextAreaView = ({ value = '' }) => {
         setIsOpen(!isOpen);
     }, [isOpen]);
     return (React.createElement("div", { className: b({ active: isValueLong }), onClick: isValueLong ? handleClick : undefined },
-        React.createElement("div", { className: b('text-view', { open: isOpen }) }, value),
+        React.createElement(Text, { ellipsis: true, whiteSpace: isOpen ? 'break-spaces' : undefined }, value),
         isValueLong ? (React.createElement("div", null,
             React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open: isOpen }), size: 16 }))) : null));
 };

package/package.json

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