npm - @gravity-ui/dynamic-forms - Versions diffs - 4.17.0 → 5.0.0 - Mend

@gravity-ui/dynamic-forms 4.17.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

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

@@ -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 CHANGED Viewed

@@ -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/CheckboxGroup/CheckboxGroup.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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");
@@ -59,7 +58,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;
@@ -69,7 +70,7 @@ const SectionBase = (_a) => {
                 'with-popover': !descriptionAsSubtitle,
                 size: sizeTitle,
             }) },
-            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: variantTitle, ref: titleRef, ellipsis: true }, layoutTitle)),
             description,
             removeButton)) : null,

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

@@ -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 CHANGED Viewed

@@ -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 = variantTitle || 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/CheckboxGroupView/CheckboxGroupView.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/esm/lib/kit/components/Card/Card.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/CheckboxGroup/CheckboxGroup.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 '../../../';
@@ -57,7 +56,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;
@@ -67,7 +68,7 @@ const SectionBase = (_a) => {
                 'with-popover': !descriptionAsSubtitle,
                 size: sizeTitle,
             }) },
-            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: variantTitle, ref: titleRef, ellipsis: true }, layoutTitle)),
             description,
             removeButton)) : null,

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

@@ -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 CHANGED Viewed

@@ -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 = variantTitle || 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/CheckboxGroupView/CheckboxGroupView.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.17.0",
+  "version": "5.0.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -45,11 +45,10 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/components": "^3.0.0",
-    "@gravity-ui/date-components": "^2.10.3",
+    "@gravity-ui/date-components": "^3.0.0",
     "@gravity-ui/date-utils": "^2.5.5",
     "@gravity-ui/i18n": "^1.2.0",
-    "@gravity-ui/icons": "^2.8.1",
+    "@gravity-ui/icons": "^2.12.0",
     "lodash": "^4.17.20"
   },
   "devDependencies": {
@@ -61,7 +60,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^7.1.0",
     "@playwright/experimental-ct-react": "^1.40.0",
     "@playwright/test": "^1.40.0",
     "@storybook/addon-essentials": "^7.0.27",
@@ -115,7 +114,7 @@
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^7.0.0",
     "final-form": "^4.20.2",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",