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

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;
+    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 (_k) {
+                catch (_l) {
                     _defaultValue = undefined;
                 }
             }
@@ -75,14 +75,17 @@ 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();
         }

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)

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 '../../../';
@@ -38,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;
@@ -48,7 +49,7 @@ const SectionBase = (_a) => {
                 'with-popover': !descriptionAsSubtitle,
                 size: titleSize,
             }) },
-            React.createElement(Popover, { className: b('title-popover'), content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+            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,

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.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';
@@ -60,7 +59,7 @@ export class SimpleVerticalAccordeon extends React.Component {
         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/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 })));

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

@@ -3,7 +3,7 @@ import isObjectLike from 'lodash/isObjectLike';
 import { Card, ViewRow } from '../';
 import { ViewController } from '../../../core';
 export const CardOneOfView = (props) => {
-    const { value = {}, spec, name, Layout } = props;
+    const { value = {}, spec, name } = props;
     const [open, setOpen] = React.useState(true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     const specProperties = React.useMemo(() => (isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
@@ -14,18 +14,8 @@ export const CardOneOfView = (props) => {
             ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
             valueKey);
     }, [valueKey, spec.description, specProperties]);
-    const title = React.useMemo(() => {
-        const titleProps = {
-            spec: spec,
-            value: valueName,
-            name: name,
-            children: React.createElement(React.Fragment, null, valueName),
-        };
-        if (Layout) {
-            return React.createElement(Layout, Object.assign({}, titleProps));
-        }
-        return React.createElement(ViewRow, Object.assign({}, titleProps));
-    }, [spec, name, valueName, Layout]);
+    const title = React.useMemo(() => (React.createElement(ViewRow, { spec: spec, value: valueName, name: name },
+        React.createElement(React.Fragment, null, valueName))), [spec, name, valueName]);
     if (!value || !Object.keys(value).length) {
         return null;
     }

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

@@ -30,16 +30,18 @@
 .df-checkbox-group-view_vertical > *:not(:last-child) {
   margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
 }
-.df-checkbox-group-view__tooltip {
+.df-checkbox-group-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-checkbox-group-view__tooltip-container {
-  max-width: var(--df-tooltip-container-max-width, 100%);
+.df-checkbox-group-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
+  margin-bottom: var(--df-popover-item-margin-bottom, 6px);
 }
-.df-checkbox-group-view__tooltip-container:last-child {
+.df-checkbox-group-view__item:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block } from '../../../utils';
 import './CheckboxGroupView.css';
@@ -9,7 +9,8 @@ export const CheckboxGroupView = ({ spec, value = [] }) => {
     const _value = value;
     const items = React.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
     const verticalPlacement = React.useMemo(() => { var _a; return ((_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement) === 'vertical'; }, [(_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement]);
-    return (React.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 },
-        item,
-        !verticalPlacement && idx !== items.length - 1 ? ', ' : null)))));
+    return (React.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), key: item, hasArrow: true, disabled: item.length < 51 },
+        React.createElement(Text, { className: b('item') },
+            item,
+            !verticalPlacement && idx !== items.length - 1 ? ', ' : null))))));
 };

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

@@ -17,17 +17,19 @@
 }
 */
 /* Border-radius */
-.df-multi-oneof-view__tooltip {
+.df-multi-oneof-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-multi-oneof-view__tooltip-container {
-  max-width: var(--df-tooltip-container-max-width, 100%);
+.df-multi-oneof-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
+  margin-bottom: var(--df-popover-item-margin-bottom, 6px);
 }
-.df-multi-oneof-view__tooltip-container:last-child {
+.df-multi-oneof-view__item:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-multi-oneof-view__content_multiple-values > .df-group-indent {

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import isObjectLike from 'lodash/isObjectLike';
 import { ViewController } from '../../../../core';
 import { block } from '../../../utils';
 import { GroupIndent } from '../../GroupIndent';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './MultiOneOfView.css';
 const b = block('multi-oneof-view');
 export const MultiOneOfView = (props) => {
@@ -20,7 +21,8 @@ export const MultiOneOfView = (props) => {
     }), [spec.description, specProperties, values]);
     const selectView = React.useMemo(() => {
         const selectView = (React.createElement(React.Fragment, null, items.map((item) => {
-            return (React.createElement(Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item));
+            return (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), disabled: item.length < 51, hasArrow: true, key: item },
+                React.createElement(Text, { className: b('item') }, item)));
         })));
         if (Layout) {
             return (React.createElement(Layout, Object.assign({}, props, { value: values }), selectView));

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

@@ -17,16 +17,18 @@
 }
 */
 /* Border-radius */
-.df-multiselect-view__tooltip {
+.df-multiselect-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-multiselect-view__tooltip-container {
-  max-width: var(--df-tooltip-container-max-width, 100%);
+.df-multiselect-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
+  margin-bottom: var(--df-popover-item-margin-bottom, 6px);
 }
-.df-multiselect-view__tooltip-container:last-child {
+.df-multiselect-view__item:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './MultiSelectView.css';
 const b = block('multiselect-view');
 export const MultiSelectView = ({ spec, value = [] }) => {
     const _value = value;
     const items = React.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
-    return (React.createElement(React.Fragment, null, items.map((item) => (React.createElement(Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item)))));
+    return (React.createElement(React.Fragment, null, items.map((item) => (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), disabled: item.length < 51, hasArrow: true, key: item },
+        React.createElement(Text, { className: b('item') }, item))))));
 };

package/build/esm/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/esm/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.js

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Flex, Table } from '@gravity-ui/uikit';
+import { Flex, HelpMark, Table } from '@gravity-ui/uikit';
 import { ViewController, isArraySpec, isBooleanSpec, isObjectSpec, useDynamicFormsCtx, } from '../../../../core';
 import { block } from '../../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './TableArrayView.css';
-import { HelpPopover } from '@gravity-ui/components';
 const b = block('table-array-view');
 export const TableArrayView = ({ value = [], spec, name }) => {
     const { showLayoutDescription } = useDynamicFormsCtx();
@@ -23,7 +23,9 @@ export const TableArrayView = ({ value = [], spec, name }) => {
             name: description && showLayoutDescription
                 ? () => (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)))
                 : label,
             template: (_, idx) => {
                 var _a;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, RadioButton, Select } from '@gravity-ui/uikit';
+import { Checkbox, SegmentedRadioGroup, Select } from '@gravity-ui/uikit';
 import isObjectLike from 'lodash/isObjectLike';
 import some from 'lodash/some';
 import { TogglerCard } from '../../components';
@@ -96,7 +96,7 @@ export const useOneOf = ({ props, onTogglerChange }) => {
             return (React.createElement("div", { className: b('checkbox') },
                 React.createElement(Checkbox, { checked: checkboxValue, onUpdate: onCheckboxChange, disabled: spec.viewSpec.disabled, qa: name })));
         }
-        return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
+        return (React.createElement(SegmentedRadioGroup, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(SegmentedRadioGroup.Option, { key: option.value, value: option.value }, option.title)))));
     }, [
         togglerType,
         oneOfValue,