@gravity-ui/dynamic-forms 4.17.0 → 5.0.0-beta.0

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

@@ -20,14 +20,16 @@
 .df-number-with-scale-view {
   display: flex;
 }
-.df-number-with-scale-view__tooltip {
+.df-number-with-scale-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-number-with-scale-view__tooltip-container {
-  white-space: nowrap;
+.df-number-with-scale-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: var(--df-tooltip-container-max-width, 100%);
+  display: block;
 }
 .df-number-with-scale-view__size {
   margin-left: var(--df-number-with-scale-view-size-margin-left, var(--g-spacing-half));

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

@@ -11,7 +11,8 @@ const NumberWithScaleViewBase = ({ spec, value }) => {
     const { initialValue, initialType } = (0, useInitial_1.useInitial)(value || '', 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(uikit_1.Popover, { placement: ['bottom', 'top'], content: initialValue, className: b('popover'), disabled: initialValue.length < 26, hasArrow: true },
+            react_1.default.createElement(uikit_1.Text, { className: b('item') }, initialValue)),
         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;

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

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
-const components_1 = require("@gravity-ui/components");
+const common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('table-array-view');
 const TableArrayView = ({ value = [], spec, name }) => {
     const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
@@ -26,7 +26,9 @@ const TableArrayView = ({ value = [], spec, name }) => {
             name: description && showLayoutDescription
                 ? () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center" },
                     label,
-                    react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })))
+                    react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
+                            placement: common_1.COMMON_POPOVER_PLACEMENT,
+                        } }, description)))
                 : label,
             template: (_, idx) => {
                 var _a;

package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.js

@@ -99,7 +99,7 @@ const useOneOf = ({ props, onTogglerChange }) => {
             return (react_1.default.createElement("div", { className: b('checkbox') },
                 react_1.default.createElement(uikit_1.Checkbox, { checked: checkboxValue, onUpdate: onCheckboxChange, disabled: spec.viewSpec.disabled, qa: name })));
         }
-        return (react_1.default.createElement(uikit_1.RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (react_1.default.createElement(uikit_1.RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
+        return (react_1.default.createElement(uikit_1.SegmentedRadioGroup, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (react_1.default.createElement(uikit_1.SegmentedRadioGroup.Option, { key: option.value, value: option.value }, option.title)))));
     }, [
         togglerType,
         oneOfValue,

package/build/cjs/lib/kit/utils/common.js

@@ -42,7 +42,7 @@ const isNotEmptyValue = (value, spec) => {
 };
 exports.isNotEmptyValue = isNotEmptyValue;
 const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     if ((0, isObjectLike_1.default)(spec)) {
         const result = (0, cloneDeep_1.default)(spec);
         if ((0, isString_1.default)(result.type)) {
@@ -54,7 +54,7 @@ const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_m) {
+                catch (_l) {
                     _defaultValue = undefined;
                 }
             }
@@ -75,21 +75,20 @@ const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
         if ((0, isString_1.default)((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.addButtonPosition)) {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
-        if ((0, isString_1.default)((_e = (_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.oneOfParams) === null || _e === void 0 ? void 0 : _e.toggler)) {
+        if ((0, isString_1.default)((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
+            result.viewSpec.textContentParams = Object.assign(Object.assign({}, result.viewSpec.textContentParams), { themeLabel: result.viewSpec.themeLabel.toLowerCase() });
+        }
+        if ((0, isString_1.default)((_f = (_e = result.viewSpec) === null || _e === void 0 ? void 0 : _e.oneOfParams) === null || _f === void 0 ? void 0 : _f.toggler)) {
             result.viewSpec.oneOfParams.toggler = result.viewSpec.oneOfParams.toggler.toLowerCase();
         }
-        if ((0, isString_1.default)((_g = (_f = result.viewSpec) === null || _f === void 0 ? void 0 : _f.textContentParams) === null || _g === void 0 ? void 0 : _g.themeLabel)) {
+        if ((0, isString_1.default)((_h = (_g = result.viewSpec) === null || _g === void 0 ? void 0 : _g.textContentParams) === null || _h === void 0 ? void 0 : _h.themeLabel)) {
             result.viewSpec.textContentParams.themeLabel =
                 result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
-        if ((0, isString_1.default)((_j = (_h = result.viewSpec) === null || _h === void 0 ? void 0 : _h.textContentParams) === null || _j === void 0 ? void 0 : _j.themeAlert)) {
+        if ((0, isString_1.default)((_k = (_j = result.viewSpec) === null || _j === void 0 ? void 0 : _j.textContentParams) === null || _k === void 0 ? void 0 : _k.themeAlert)) {
             result.viewSpec.textContentParams.themeAlert =
                 result.viewSpec.textContentParams.themeAlert.toLowerCase();
         }
-        if ((0, isString_1.default)((_l = (_k = result.viewSpec) === null || _k === void 0 ? void 0 : _k.textContentParams) === null || _l === void 0 ? void 0 : _l.viewAlert)) {
-            result.viewSpec.textContentParams.viewAlert =
-                result.viewSpec.textContentParams.viewAlert.toLowerCase();
-        }
         if ((0, isString_1.default)(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

package/build/esm/lib/core/components/View/types/layout.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormValue, Spec } from '../../../';
 import { ViewProps } from './';
-export type ViewLayoutProps<Value extends FormValue, SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec> = {
+export type ViewLayoutProps<Value extends FormValue, SpecType extends Spec> = {
     children: React.ReactElement;
 } & ViewProps<Value, SpecType>;
 export type ViewLayoutType<Value extends FormValue, SpecType extends Spec> = (props: ViewLayoutProps<Value, SpecType>) => React.ReactElement | null;

package/build/esm/lib/core/components/View/types/views.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormValue, Spec } from '../../../';
 import { ViewLayoutType } from './';
-export type ViewProps<Value extends FormValue, SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec> = {
+export type ViewProps<Value extends FormValue, SpecType extends Spec> = {
     spec: SpecType;
     name: string;
     value?: Value;

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

@@ -1,4 +1,4 @@
-import type { AlertProps, LabelProps } from '@gravity-ui/uikit';
+import { AlertProps, LabelProps } from '@gravity-ui/uikit';
 import { ColorTextBaseProps } from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 import { ReadAsMethod, SpecTypes } from '../constants';
 import { ArrayValue, ObjectValue } from './';
@@ -151,7 +151,6 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
             iconColor?: ColorTextBaseProps['color'];
             titleAlert?: string;
             themeAlert?: AlertProps['theme'];
-            viewAlert?: AlertProps['view'];
         };
         fileInput?: {
             accept?: string;

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

@@ -70,8 +70,10 @@
   max-width: var(--df-card-title-max-width, 533px);
   height: var(--df-card-title-height, var(--g-spacing-5));
 }
-.df-card__title-popover {
-  height: var(--df-card-title-popover-height, var(--g-spacing-5));
+.df-card__popover {
+  padding: var(--g-spacing-2);
+  overflow-wrap: break-word;
+  max-width: 300px;
 }
 .df-card__note {
   margin-left: var(--df-card-note-margin-left, 5px);

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Card as CardBase, Icon, Popover, Text } from '@gravity-ui/uikit';
+import { Button, Card as CardBase, HelpMark, Icon, Popover, Text } from '@gravity-ui/uikit';
 import isString from 'lodash/isString';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH } from '../../constants/common';
 import { block } from '../../utils';
@@ -34,10 +33,12 @@ export const Card = ({ name, title: propsTitle, description, actions, open: prop
     const title = React.useMemo(() => {
         if (isString(propsTitle)) {
             return (React.createElement(React.Fragment, null,
-                React.createElement(Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT, className: b('title-popover') },
+                React.createElement(Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT, className: b('popover') },
                     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));
+                    React.createElement(HelpMark, { popoverProps: {
+                            placement: COMMON_POPOVER_PLACEMENT,
+                        } }, description))) : null));
         }
         return propsTitle;
     }, [propsTitle, titlePopoverDisabled, description]);

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

@@ -7,7 +7,7 @@ import { Row } from '../../Layouts';
 import { RemoveButton } from '../../RemoveButton';
 export const CardOneOf = (props) => {
     var _a;
-    const { input, meta, spec, name, Layout } = props;
+    const { input, meta, spec, name } = props;
     const [open, setOpen] = React.useState(true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     const onOpen = React.useCallback(() => setOpen(true), [setOpen]);
@@ -15,13 +15,7 @@ export const CardOneOf = (props) => {
         props,
         onTogglerChange: onOpen,
     });
-    const toggler = React.useMemo(() => {
-        const togglerProps = Object.assign(Object.assign({}, props), { name: '__stub-name', children: togglerInput });
-        if (Layout) {
-            return React.createElement(Layout, Object.assign({}, togglerProps));
-        }
-        return React.createElement(Row, Object.assign({}, togglerProps));
-    }, [togglerInput, props, Layout]);
+    const toggler = React.useMemo(() => (React.createElement(Row, Object.assign({}, props, { name: "__stub-name" }), togglerInput)), [togglerInput, props]);
     const actions = React.useMemo(() => {
         if (isArrayItem(name)) {
             return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });

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

@@ -22,6 +22,9 @@
   align-items: center;
   height: var(--df-checkbox-height, 28px);
 }
+.df-checkbox-group .g-control-label__text {
+  margin-inline-start: var(--df-checkbox-margint-start, 5px);
+}
 .df-checkbox-group > *:not(:last-child) {
   margin-right: var(--df-checkbox-group-child-margin-right, 6px);
 }

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Plus, TrashBin } from '@gravity-ui/icons';
-import { Button, Flex, Icon, Table } from '@gravity-ui/uikit';
-import { HelpPopover } from '@gravity-ui/components';
+import { Button, Flex, HelpMark, Icon, Table } from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
 import set from 'lodash/set';
 import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isBooleanSpec, isObjectSpec, transformArrIn, } from '../../../../core';
 import { useSearchContext } from '../../../../core/components/Form/hooks';
 import { block } from '../../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './TableArrayInput.css';
 const b = block('table-array');
 export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
@@ -49,7 +49,9 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                 ? label
                 : () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
                     label,
-                    React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] }))),
+                    React.createElement(HelpMark, { popoverProps: {
+                            placement: COMMON_POPOVER_PLACEMENT,
+                        } }, description))),
             template: ({ key, }, idx) => {
                 var _a, _b, _c;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { PasswordInput } from '@gravity-ui/components';
-import { TextInput } from '@gravity-ui/uikit';
+import { PasswordInput, TextInput } from '@gravity-ui/uikit';
 import isNil from 'lodash/isNil';
 export const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, inputProps, }) => {
     const props = Object.assign(Object.assign({ hasClear: true }, inputProps), { value: isNil(value) ? '' : `${value}`, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name });
     if (spec.viewSpec.type === 'password') {
-        return (React.createElement(PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
+        return React.createElement(PasswordInput, Object.assign({}, props, { autoComplete: "new-password" }));
     }
     return React.createElement(TextInput, Object.assign({}, props, { type: "text" }));
 };

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

@@ -14,7 +14,7 @@ export const TextContentComponent = ({ spec, value, Layout, }) => {
     if (!text) {
         return null;
     }
-    const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (React.createElement(LazyLoader, { component: loadIcon(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
+    const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (React.createElement(LazyLoader, { component: loadIcon(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : undefined;
     let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
     if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert) {
         const titleAlert = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert) || !isEmpty(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert)
@@ -22,7 +22,7 @@ export const TextContentComponent = ({ spec, value, Layout, }) => {
             : undefined;
         content = (React.createElement(Alert, { icon: iconLib, message: content, 
             // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
-            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert, view: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.viewAlert }));
+            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert }));
     }
     else if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
         content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));

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

@@ -1,7 +1,2 @@
-import { TextProps } from '@gravity-ui/uikit';
 import { ArrayLayoutProps, ObjectLayoutProps } from '../../../../core';
-interface AccordeonLayoutProps {
-    variantTitle?: TextProps['variant'];
-}
-export declare const Accordeon: <T extends ArrayLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined> | ObjectLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined>>({ name, spec, input, meta, children, }: T) => JSX.Element;
-export {};
+export declare const Accordeon: <T extends ArrayLayoutProps<undefined, undefined> | ObjectLayoutProps<undefined, undefined>>({ name, spec, input, meta, children, }: T) => JSX.Element;

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

@@ -6,7 +6,6 @@ import { RemoveButton } from '../../RemoveButton';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const Accordeon = ({ name, spec, input, meta, children, }) => {
     var _a;
-    const { variantTitle } = spec.viewSpec.layoutProps || {};
     const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
     const onDrop = React.useCallback(() => {
         setOpen(false);
@@ -19,6 +18,6 @@ export const Accordeon = ({ name, spec, input, meta, children, }) => {
         return React.createElement(RemoveButton, { name: name, onDrop: onDrop });
     }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true, variantTitle: variantTitle },
+    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
 import { TrashBin } from '@gravity-ui/icons';
-import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { Button, HelpMark, Icon, Text } from '@gravity-ui/uikit';
 import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
 import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { block } from '../../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './Column.css';
 const b = block('column');
 const ColumnBase = ({ name, spec, input, meta, children, }) => {
@@ -16,7 +16,9 @@ const ColumnBase = ({ name, spec, input, meta, children, }) => {
                 React.createElement(Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
                 spec.viewSpec.layoutDescription ? (React.createElement("span", { className: b('note') },
                     React.createElement(Text, { className: b('note-inner') },
-                        React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
+                        React.createElement(HelpMark, { popoverProps: {
+                                placement: COMMON_POPOVER_PLACEMENT,
+                            } }, spec.viewSpec.layoutDescription)))) : null)),
         React.createElement("div", { className: b('second-row') },
             React.createElement("div", { className: b('second-row-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 

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

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

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

@@ -37,12 +37,10 @@
 .df-section__title {
   max-width: var(--df-section-title-max-width, 533px);
 }
-.df-section__title-popover {
-  display: flex;
-  align-items: center;
-}
-.df-section__title-popover .g-popover__handler {
-  display: flex;
+.df-section__popover {
+  padding: var(--g-spacing-2);
+  overflow-wrap: break-word;
+  max-width: 300px;
 }
 .df-section__note {
   margin-left: var(--df-section-note-margin-left, 5px);

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

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
-import { Popover, Text } from '@gravity-ui/uikit';
+import { HelpMark, Popover, Text } from '@gravity-ui/uikit';
 import { GroupIndent } from '../../';
 import { RemoveButton } from '../../RemoveButton';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper } from '../../../';
@@ -17,25 +16,6 @@ const SectionBase = (_a) => {
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
     const titleRef = React.useRef(null);
     let content = children;
-    const { variantTitle: variantTitleProp } = spec.viewSpec.layoutProps || {};
-    const { sizeTitle, variantTitle } = React.useMemo(() => {
-        if (variantTitleProp) {
-            return {
-                sizeTitle: undefined,
-                variantTitle: variantTitleProp,
-            };
-        }
-        if (titleSize === 'm') {
-            return {
-                sizeTitle: titleSize,
-                variantTitle: 'body-2',
-            };
-        }
-        return {
-            sizeTitle: titleSize,
-            variantTitle: 'body-1',
-        };
-    }, [variantTitleProp, titleSize]);
     const removeButton = React.useMemo(() => {
         if ((input === null || input === void 0 ? void 0 : input.value) && (input === null || input === void 0 ? void 0 : input.onDrop) && isArrayItem(name)) {
             return (React.createElement(RemoveButton, { name: name, onDrop: input.onDrop, switcherClassName: b('remove-button') }));
@@ -57,7 +37,9 @@ const SectionBase = (_a) => {
         }
         else {
             description = (React.createElement(Text, { className: b('note') },
-                React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
+                React.createElement(HelpMark, { popoverProps: {
+                        placement: COMMON_POPOVER_PLACEMENT,
+                    } }, spec.viewSpec.layoutDescription)));
         }
     }
     const layoutTitle = spec.viewSpec.layoutTitle;
@@ -65,10 +47,10 @@ const SectionBase = (_a) => {
     return (React.createElement("section", { className: b() },
         layoutTitle ? (React.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
-                size: sizeTitle,
+                size: titleSize,
             }) },
-            React.createElement(Popover, { className: b('title-popover'), content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
-                React.createElement(Text, { className: b('title'), variant: variantTitle, ref: titleRef, ellipsis: true }, layoutTitle)),
+            React.createElement(Popover, { className: b('popover'), content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+                React.createElement(Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
             description,
             removeButton)) : null,
         React.createElement("div", { className: b('content') }, content)));

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

@@ -42,6 +42,9 @@
 .df-simple-vertical-accordeon__tooltip {
   margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) 5px);
 }
+.df-simple-vertical-accordeon__popover {
+  padding: var(--g-spacing-2);
+}
 .df-simple-vertical-accordeon__chevron {
   transform: rotate(-90deg);
 }

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TextProps } from '@gravity-ui/uikit';
 import './SimpleVerticalAccordeon.css';
 interface SimpleVerticalAccordeonProps {
     children: React.ReactNode;
@@ -17,7 +16,6 @@ interface SimpleVerticalAccordeonProps {
     hideInsteadOfDestroy?: boolean;
     withBranchView?: boolean;
     viewLayout?: boolean;
-    variantTitle?: TextProps['variant'];
 }
 interface SimpleVerticalAccordeonState {
     open: boolean;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Icon, Popover, Text } from '@gravity-ui/uikit';
+import { Button, HelpMark, Icon, Popover, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import { block } from '../../utils';
 import './SimpleVerticalAccordeon.css';
@@ -49,7 +48,7 @@ export class SimpleVerticalAccordeon extends React.Component {
     }
     render() {
         var _a;
-        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, variantTitle, } = 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,10 +56,10 @@ 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 = variantTitle || this.getCurrentTitleVariant();
+        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(Popover, { content: title, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT, className: b('popover'), hasArrow: true },
                     React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
                         React.createElement(Text, { variant: currentTitleVariant }, title),
                         React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 }))),
@@ -88,7 +87,9 @@ export class SimpleVerticalAccordeon extends React.Component {
     getTooltip() {
         const { note } = this.props;
         return note ? (React.createElement(Text, { className: b('tooltip') },
-            React.createElement(HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
+            React.createElement(HelpMark, { popoverProps: {
+                    placement: COMMON_POPOVER_PLACEMENT,
+                } }, note))) : null;
     }
 }
 SimpleVerticalAccordeon.defaultProps = {

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

@@ -1,13 +1,15 @@
 import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
-import { Card, Text } from '@gravity-ui/uikit';
+import { Card, HelpMark, Text } from '@gravity-ui/uikit';
 import { block } from '../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import './TogglerCard.css';
 const b = block('toggler-card');
 export const TogglerCard = ({ description, title, text, onClick, disabled, selected, }) => {
     return (React.createElement(Card, { onClick: onClick, type: "selection", disabled: disabled ? !selected : disabled, selected: selected, size: "m", className: b() },
         React.createElement("div", { className: b('header') },
             React.createElement(Text, { variant: "subheader-2", ellipsis: true }, title),
-            description ? (React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })) : null),
+            description ? (React.createElement(HelpMark, { popoverProps: {
+                    placement: COMMON_POPOVER_PLACEMENT,
+                } }, description)) : null),
         React.createElement(Text, { variant: "body-1", color: "secondary", className: b('text') }, text)));
 };

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

@@ -1,7 +1,2 @@
-import { TextProps } from '@gravity-ui/uikit';
-import { ArrayValue, ObjectValue, Spec, ViewLayoutProps } from '../../../../core';
-interface ViewAccordeonLayoutProps {
-    variantTitle?: TextProps['variant'];
-}
-export declare const ViewAccordeon: <T extends ViewLayoutProps<ArrayValue | ObjectValue, Spec<any, any, ViewAccordeonLayoutProps>>>({ name, value, spec, children, }: T) => JSX.Element | null;
-export {};
+import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
+export declare const ViewAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;

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

@@ -6,11 +6,10 @@ import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const ViewAccordeon = ({ name, value, spec, children, }) => {
     const { showLayoutDescription } = useDynamicFormsCtx();
     const [open, setOpen] = React.useState(isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
-    const { variantTitle } = spec.viewSpec.layoutProps || {};
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
     return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: showLayoutDescription && spec.viewSpec.layoutDescription
             ? spec.viewSpec.layoutDescription
-            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true, variantTitle: variantTitle }, children));
+            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
 };

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

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

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Text } from '@gravity-ui/uikit';
-import { HelpPopover } from '@gravity-ui/components';
+import { HelpMark, Text } from '@gravity-ui/uikit';
 import { useDynamicFormsCtx } from '../../../../core';
 import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './ViewRow.css';
 const b = block('view-row');
 export const ViewRow = ({ value, spec, children, }) => {
@@ -14,7 +14,9 @@ export const ViewRow = ({ value, spec, children, }) => {
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement(Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
-            showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null,
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpMark, { className: b('note'), popoverProps: {
+                    placement: COMMON_POPOVER_PLACEMENT,
+                } }, spec.viewSpec.layoutDescription)) : null,
             React.createElement("div", { className: b('dots') })),
         React.createElement("div", { className: b('right') }, children),
         React.createElement(CopyButton, { spec: spec, value: value })));