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

package/build/cjs/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/cjs/lib/kit/components/Card/Card.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const components_1 = require("@gravity-ui/components");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
@@ -37,10 +36,12 @@ const Card = ({ name, title: propsTitle, description, actions, open: propsOpen,
     const title = react_1.default.useMemo(() => {
         if ((0, isString_1.default)(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, className: b('title-popover') },
+                react_1.default.createElement(uikit_1.Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT, className: b('popover') },
                     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));
+                    react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
+                            placement: common_1.COMMON_POPOVER_PLACEMENT,
+                        } }, description))) : null));
         }
         return propsTitle;
     }, [propsTitle, titlePopoverDisabled, description]);

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

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

package/build/cjs/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/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const components_1 = require("@gravity-ui/components");
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const set_1 = tslib_1.__importDefault(require("lodash/set"));
 const core_1 = require("../../../../core");
 const hooks_1 = require("../../../../core/components/Form/hooks");
 const utils_1 = require("../../../utils");
+const common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('table-array');
 const TableArrayInput = ({ spec, name, arrayInput, input }) => {
     const { isHiddenField } = (0, hooks_1.useSearchContext)();
@@ -52,7 +52,9 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                 ? label
                 : () => (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))),
             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/cjs/lib/kit/components/Inputs/Text/Text.js

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
 const isNil_1 = tslib_1.__importDefault(require("lodash/isNil"));
 const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, inputProps, }) => {
     const props = Object.assign(Object.assign({ hasClear: true }, inputProps), { value: (0, isNil_1.default)(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_1.default.createElement(components_1.PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
+        return react_1.default.createElement(uikit_1.PasswordInput, Object.assign({}, props, { autoComplete: "new-password" }));
     }
     return react_1.default.createElement(uikit_1.TextInput, Object.assign({}, props, { type: "text" }));
 };

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

@@ -17,7 +17,7 @@ const TextContentComponent = ({ spec, value, Layout, }) => {
     if (!text) {
         return null;
     }
-    const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (react_1.default.createElement(LazyLoader_1.LazyLoader, { component: (0, utils_2.loadIcon)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
+    const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (react_1.default.createElement(LazyLoader_1.LazyLoader, { component: (0, utils_2.loadIcon)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : undefined;
     let content = react_1.default.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) || !(0, lodash_1.isEmpty)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert)

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Column = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const components_1 = require("@gravity-ui/components");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
-const components_2 = require("../../../components");
+const components_1 = require("../../../components");
 const utils_1 = require("../../../utils");
+const common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('column');
 const ColumnBase = ({ name, spec, input, meta, children, }) => {
     const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
@@ -19,14 +19,16 @@ const ColumnBase = ({ name, spec, input, meta, children, }) => {
                 react_1.default.createElement(uikit_1.Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
                 spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
                     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(uikit_1.HelpMark, { popoverProps: {
+                                placement: common_1.COMMON_POPOVER_PLACEMENT,
+                            } }, spec.viewSpec.layoutDescription)))) : null)),
         react_1.default.createElement("div", { className: b('second-row') },
             react_1.default.createElement("div", { className: b('second-row-inner') },
-                react_1.default.createElement(components_2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
+                react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
                     // TODO: remove condition spec.viewSpec.type !== 'select'
                     ((0, core_1.isArraySpec)(spec) && spec.viewSpec.type !== 'select') ||
                         (0, core_1.isObjectSpec)(spec), className: b('error-wrapper') }, children),
-                generateButton ? (react_1.default.createElement(components_2.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
+                generateButton ? (react_1.default.createElement(components_1.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
                 arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null))));
 };

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowVerbose = exports.Row = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const components_1 = require("@gravity-ui/components");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
-const components_2 = require("../../../components");
+const components_1 = require("../../../components");
 const utils_1 = require("../../../utils");
+const common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('row');
 const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
     const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
@@ -19,14 +19,16 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                 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(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(uikit_1.HelpMark, { popoverProps: {
+                                placement: common_1.COMMON_POPOVER_PLACEMENT,
+                            } }, spec.viewSpec.layoutDescription)))) : null)),
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },
-                react_1.default.createElement(components_2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
+                react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
                     // TODO: remove condition spec.viewSpec.type !== 'select'
                     ((0, core_1.isArraySpec)(spec) && spec.viewSpec.type !== 'select') ||
                         (0, core_1.isObjectSpec)(spec), className: b('error-wrapper') }, children),
-                generateButton ? (react_1.default.createElement(components_2.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
+                generateButton ? (react_1.default.createElement(components_1.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
                 arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null),
             verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));

package/build/cjs/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/cjs/lib/kit/components/Layouts/Section/Section.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group2 = exports.Group = exports.SectionWithSubtitle2 = exports.SectionWithSubtitle = exports.Section2 = exports.Section = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
 const __1 = require("../../");
 const RemoveButton_1 = require("../../RemoveButton");
@@ -40,7 +39,9 @@ const SectionBase = (_a) => {
         }
         else {
             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'] })));
+                react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
+                        placement: __2.COMMON_POPOVER_PLACEMENT,
+                    } }, spec.viewSpec.layoutDescription)));
         }
     }
     const layoutTitle = spec.viewSpec.layoutTitle;
@@ -50,7 +51,7 @@ const SectionBase = (_a) => {
                 'with-popover': !descriptionAsSubtitle,
                 size: titleSize,
             }) },
-            react_1.default.createElement(uikit_1.Popover, { className: b('title-popover'), content: layoutTitle, placement: __2.COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+            react_1.default.createElement(uikit_1.Popover, { className: b('popover'), content: layoutTitle, placement: __2.COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
                 react_1.default.createElement(uikit_1.Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
             description,
             removeButton)) : null,

package/build/cjs/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/cjs/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleVerticalAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const components_1 = require("@gravity-ui/components");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const common_1 = require("../../constants/common");
@@ -63,7 +62,7 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         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.Popover, { content: title, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT, className: b('popover'), hasArrow: true },
                     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(uikit_1.Text, { variant: currentTitleVariant }, title),
                         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: b('chevron', { open }), size: 16 }))),
@@ -91,7 +90,9 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
     getTooltip() {
         const { note } = this.props;
         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;
+            react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
+                    placement: common_1.COMMON_POPOVER_PLACEMENT,
+                } }, note))) : null;
     }
 }
 exports.SimpleVerticalAccordeon = SimpleVerticalAccordeon;

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

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerCard = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
+const common_1 = require("../../constants/common");
 const b = (0, utils_1.block)('toggler-card');
 const TogglerCard = ({ description, title, text, onClick, disabled, selected, }) => {
     return (react_1.default.createElement(uikit_1.Card, { onClick: onClick, type: "selection", disabled: disabled ? !selected : disabled, selected: selected, size: "m", className: b() },
         react_1.default.createElement("div", { className: b('header') },
             react_1.default.createElement(uikit_1.Text, { variant: "subheader-2", ellipsis: true }, title),
-            description ? (react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })) : null),
+            description ? (react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
+                    placement: common_1.COMMON_POPOVER_PLACEMENT,
+                } }, description)) : null),
         react_1.default.createElement(uikit_1.Text, { variant: "body-1", color: "secondary", className: b('text') }, text)));
 };
 exports.TogglerCard = TogglerCard;

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

@@ -4,10 +4,10 @@ exports.ViewColumn = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const components_1 = require("@gravity-ui/components");
 const core_1 = require("../../../../core");
 const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
+const common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('view-column');
 const ViewColumn = ({ value, spec, children, }) => {
     const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
@@ -17,7 +17,9 @@ const ViewColumn = ({ value, spec, children, }) => {
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('first-row') },
             react_1.default.createElement(uikit_1.Text, { color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
-            showLayoutDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement(components_1.HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null),
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement(uikit_1.HelpMark, { className: b('note'), popoverProps: {
+                    placement: common_1.COMMON_POPOVER_PLACEMENT,
+                } }, spec.viewSpec.layoutDescription)) : null),
         react_1.default.createElement("div", { className: b('second-row') }, children),
         react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value })));
 };

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

@@ -4,10 +4,10 @@ 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 components_1 = require("@gravity-ui/components");
 const core_1 = require("../../../../core");
 const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
+const common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('view-row');
 const ViewRow = ({ value, spec, children, }) => {
     const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
@@ -17,7 +17,9 @@ 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(uikit_1.Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
-            showLayoutDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement(components_1.HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null,
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement(uikit_1.HelpMark, { className: b('note'), popoverProps: {
+                    placement: common_1.COMMON_POPOVER_PLACEMENT,
+                } }, spec.viewSpec.layoutDescription)) : null,
             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/CardOneOfView.js

@@ -7,7 +7,7 @@ const isObjectLike_1 = tslib_1.__importDefault(require("lodash/isObjectLike"));
 const __1 = require("../");
 const core_1 = require("../../../core");
 const CardOneOfView = (props) => {
-    const { value = {}, spec, name, Layout } = props;
+    const { value = {}, spec, name } = props;
     const [open, setOpen] = react_1.default.useState(true);
     const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
     const specProperties = react_1.default.useMemo(() => ((0, isObjectLike_1.default)(spec.properties) ? spec.properties : {}), [spec.properties]);
@@ -18,18 +18,8 @@ const CardOneOfView = (props) => {
             ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
             valueKey);
     }, [valueKey, spec.description, specProperties]);
-    const title = react_1.default.useMemo(() => {
-        const titleProps = {
-            spec: spec,
-            value: valueName,
-            name: name,
-            children: react_1.default.createElement(react_1.default.Fragment, null, valueName),
-        };
-        if (Layout) {
-            return react_1.default.createElement(Layout, Object.assign({}, titleProps));
-        }
-        return react_1.default.createElement(__1.ViewRow, Object.assign({}, titleProps));
-    }, [spec, name, valueName, Layout]);
+    const title = react_1.default.useMemo(() => (react_1.default.createElement(__1.ViewRow, { spec: spec, value: valueName, name: name },
+        react_1.default.createElement(react_1.default.Fragment, null, valueName))), [spec, name, valueName]);
     if (!value || !Object.keys(value).length) {
         return null;
     }

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

@@ -12,8 +12,9 @@ const CheckboxGroupView = ({ spec, value = [] }) => {
     const _value = value;
     const items = react_1.default.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_1.default.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_1.default.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (react_1.default.createElement(uikit_1.Popover, { placement: common_1.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_1.default.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (react_1.default.createElement(uikit_1.Popover, { placement: common_1.COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), key: item, hasArrow: true, disabled: item.length < 51 },
+        react_1.default.createElement(uikit_1.Text, { className: b('item') },
+            item,
+            !verticalPlacement && idx !== items.length - 1 ? ', ' : null))))));
 };
 exports.CheckboxGroupView = CheckboxGroupView;

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

@@ -8,6 +8,7 @@ const isObjectLike_1 = tslib_1.__importDefault(require("lodash/isObjectLike"));
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
 const GroupIndent_1 = require("../../GroupIndent");
+const common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('multi-oneof-view');
 const MultiOneOfView = (props) => {
     const { name, value, Layout, spec, withoutIndent } = props;
@@ -23,7 +24,8 @@ const MultiOneOfView = (props) => {
     }), [spec.description, specProperties, values]);
     const selectView = react_1.default.useMemo(() => {
         const selectView = (react_1.default.createElement(react_1.default.Fragment, null, items.map((item) => {
-            return (react_1.default.createElement(uikit_1.Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item));
+            return (react_1.default.createElement(uikit_1.Popover, { placement: common_1.COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), disabled: item.length < 51, hasArrow: true, key: item },
+                react_1.default.createElement(uikit_1.Text, { className: b('item') }, item)));
         })));
         if (Layout) {
             return (react_1.default.createElement(Layout, Object.assign({}, props, { value: values }), selectView));

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

@@ -5,10 +5,12 @@ 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 common_1 = require("../../../constants/common");
 const b = (0, utils_1.block)('multiselect-view');
 const MultiSelectView = ({ spec, value = [] }) => {
     const _value = value;
     const items = react_1.default.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, items.map((item) => (react_1.default.createElement(uikit_1.Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item)))));
+    return (react_1.default.createElement(react_1.default.Fragment, null, items.map((item) => (react_1.default.createElement(uikit_1.Popover, { placement: common_1.COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), disabled: item.length < 51, hasArrow: true, key: item },
+        react_1.default.createElement(uikit_1.Text, { className: b('item') }, item))))));
 };
 exports.MultiSelectView = MultiSelectView;

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,