@gravity-ui/dynamic-forms 5.2.0 → 5.3.0

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

@@ -8,6 +8,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
 const common_1 = require("../../constants/common");
 const utils_1 = require("../../utils");
+const HTMLContent_1 = require("../HTMLContent");
 const b = (0, utils_1.block)('card');
 const Card = ({ name, title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
     var _a;
@@ -41,7 +42,8 @@ const Card = ({ name, title: propsTitle, description, actions, open: propsOpen,
                 description ? (react_1.default.createElement("div", { className: b('note') },
                     react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                             placement: common_1.COMMON_POPOVER_PLACEMENT,
-                        } }, description))) : null));
+                        } },
+                        react_1.default.createElement(HTMLContent_1.HTMLContent, { html: description })))) : null));
         }
         return propsTitle;
     }, [propsTitle, titlePopoverDisabled, description]);

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

@@ -39,7 +39,7 @@
 .df-error-wrapper_error .g-text-input_view_normal:not(.df-error-wrapper-ignore) .g-text-input__content,
 .df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before,
 .df-error-wrapper_error .g-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
-  border-color: var(--g-color-text-danger);
+  border-color: var(--g-color-line-danger);
 }
 .df-error-wrapper__error-text {
   color: var(--g-color-text-danger);

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLContent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const HTMLContent = ({ html }) => {
+    return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
+};
+exports.HTMLContent = HTMLContent;

package/build/cjs/lib/kit/components/HTMLContent/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./HTMLContent"), exports);

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

@@ -11,6 +11,7 @@ const core_1 = require("../../../../core");
 const hooks_1 = require("../../../../core/components/Form/hooks");
 const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
+const HTMLContent_1 = require("../../HTMLContent");
 const b = (0, utils_1.block)('table-array');
 const TableArrayInput = ({ spec, name, arrayInput, input }) => {
     const { isHiddenField } = (0, hooks_1.useSearchContext)();
@@ -54,7 +55,8 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                     label,
                     react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                             placement: common_1.COMMON_POPOVER_PLACEMENT,
-                        } }, description))),
+                        } },
+                        react_1.default.createElement(HTMLContent_1.HTMLContent, { html: 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/Layouts/Column/Column.js

@@ -9,6 +9,7 @@ const core_1 = require("../../../../core");
 const components_1 = require("../../../components");
 const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
+const HTMLContent_1 = require("../../HTMLContent");
 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]);
@@ -21,7 +22,8 @@ const ColumnBase = ({ name, spec, input, meta, children, }) => {
                     react_1.default.createElement(uikit_1.Text, { className: b('note-inner') },
                         react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                                 placement: common_1.COMMON_POPOVER_PLACEMENT,
-                            } }, spec.viewSpec.layoutDescription)))) : null)),
+                            } },
+                            react_1.default.createElement(HTMLContent_1.HTMLContent, { html: 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_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 

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

@@ -9,6 +9,7 @@ const core_1 = require("../../../../core");
 const components_1 = require("../../../components");
 const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
+const HTMLContent_1 = require("../../HTMLContent");
 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]);
@@ -21,7 +22,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                     react_1.default.createElement(uikit_1.Text, { className: b('note-inner') },
                         react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                                 placement: common_1.COMMON_POPOVER_PLACEMENT,
-                            } }, spec.viewSpec.layoutDescription)))) : null)),
+                            } },
+                            react_1.default.createElement(HTMLContent_1.HTMLContent, { html: 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_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 

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

@@ -8,6 +8,7 @@ const __1 = require("../../");
 const __2 = require("../../../");
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
+const HTMLContent_1 = require("../../HTMLContent");
 const RemoveButton_1 = require("../../RemoveButton");
 const b = (0, utils_1.block)('section');
 const SectionBase = (_a) => {
@@ -60,7 +61,8 @@ const SectionBase = (_a) => {
             description = (react_1.default.createElement(uikit_1.Text, { className: b('note') },
                 react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                         placement: __2.COMMON_POPOVER_PLACEMENT,
-                    } }, spec.viewSpec.layoutDescription)));
+                    } },
+                    react_1.default.createElement(HTMLContent_1.HTMLContent, { html: spec.viewSpec.layoutDescription }))));
         }
     }
     const layoutTitle = spec.viewSpec.layoutTitle;

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

@@ -7,6 +7,7 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const common_1 = require("../../constants/common");
 const utils_1 = require("../../utils");
+const HTMLContent_1 = require("../HTMLContent");
 const b = (0, utils_1.block)('simple-vertical-accordeon');
 const TITLE_TEXT_MAX_WIDTH = 485; /** 533px (COMMON_TITLE_MAX_WIDTH) - 48px of padding */
 class SimpleVerticalAccordeon extends react_1.default.Component {
@@ -92,7 +93,8 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         return note ? (react_1.default.createElement(uikit_1.Text, { className: b('tooltip') },
             react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                     placement: common_1.COMMON_POPOVER_PLACEMENT,
-                } }, note))) : null;
+                } },
+                react_1.default.createElement(HTMLContent_1.HTMLContent, { html: note })))) : null;
     }
 }
 exports.SimpleVerticalAccordeon = SimpleVerticalAccordeon;

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

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const common_1 = require("../../constants/common");
 const utils_1 = require("../../utils");
+const HTMLContent_1 = require("../HTMLContent");
 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() },
@@ -13,7 +14,8 @@ const TogglerCard = ({ description, title, text, onClick, disabled, selected, })
             react_1.default.createElement(uikit_1.Text, { variant: "subheader-2", ellipsis: true }, title),
             description ? (react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                     placement: common_1.COMMON_POPOVER_PLACEMENT,
-                } }, description)) : null),
+                } },
+                react_1.default.createElement(HTMLContent_1.HTMLContent, { html: 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

@@ -8,6 +8,7 @@ const core_1 = require("../../../../core");
 const kit_1 = require("../../../../kit");
 const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
+const HTMLContent_1 = require("../../HTMLContent");
 const b = (0, utils_1.block)('view-column');
 const ViewColumn = ({ value, spec, children, }) => {
     const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
@@ -19,7 +20,8 @@ const ViewColumn = ({ value, spec, children, }) => {
             react_1.default.createElement(uikit_1.Text, { color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             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(HTMLContent_1.HTMLContent, { html: 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

@@ -8,6 +8,7 @@ const core_1 = require("../../../../core");
 const kit_1 = require("../../../../kit");
 const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
+const HTMLContent_1 = require("../../HTMLContent");
 const b = (0, utils_1.block)('view-row');
 const ViewRow = ({ value, spec, children, }) => {
     const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
@@ -19,7 +20,8 @@ const ViewRow = ({ value, spec, children, }) => {
             react_1.default.createElement(uikit_1.Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             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(HTMLContent_1.HTMLContent, { html: 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/TableArrayView/TableArrayView.js

@@ -7,6 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
 const common_1 = require("../../../constants/common");
 const utils_1 = require("../../../utils");
+const HTMLContent_1 = require("../../HTMLContent");
 const b = (0, utils_1.block)('table-array-view');
 const TableArrayView = ({ value = [], spec, name }) => {
     const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
@@ -28,7 +29,8 @@ const TableArrayView = ({ value = [], spec, name }) => {
                     label,
                     react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
                             placement: common_1.COMMON_POPOVER_PLACEMENT,
-                        } }, description)))
+                        } },
+                        react_1.default.createElement(HTMLContent_1.HTMLContent, { html: description }))))
                 : label,
             template: (_, idx) => {
                 var _a;

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

@@ -4,6 +4,7 @@ import { Button, Card as CardBase, HelpMark, Icon, Popover, Text } from '@gravit
 import isString from 'lodash/isString';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH } from '../../constants/common';
 import { block } from '../../utils';
+import { HTMLContent } from '../HTMLContent';
 import './Card.css';
 const b = block('card');
 export const Card = ({ name, title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
@@ -38,7 +39,8 @@ export const Card = ({ name, title: propsTitle, description, actions, open: prop
                 description ? (React.createElement("div", { className: b('note') },
                     React.createElement(HelpMark, { popoverProps: {
                             placement: COMMON_POPOVER_PLACEMENT,
-                        } }, description))) : null));
+                        } },
+                        React.createElement(HTMLContent, { html: description })))) : null));
         }
         return propsTitle;
     }, [propsTitle, titlePopoverDisabled, description]);

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

@@ -39,7 +39,7 @@
 .df-error-wrapper_error .g-text-input_view_normal:not(.df-error-wrapper-ignore) .g-text-input__content,
 .df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before,
 .df-error-wrapper_error .g-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
-  border-color: var(--g-color-text-danger);
+  border-color: var(--g-color-line-danger);
 }
 .df-error-wrapper__error-text {
   color: var(--g-color-text-danger);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface HTMLContentProps {
+    html: string;
+}
+export declare const HTMLContent: React.FC<HTMLContentProps>;
+export {};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export const HTMLContent = ({ html }) => {
+    return React.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
+};

package/build/esm/lib/kit/components/HTMLContent/index.d.ts

@@ -0,0 +1 @@
+export * from './HTMLContent';

package/build/esm/lib/kit/components/HTMLContent/index.js

@@ -0,0 +1 @@
+export * from './HTMLContent';

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

@@ -7,6 +7,7 @@ import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isBoolean
 import { useSearchContext } from '../../../../core/components/Form/hooks';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block } from '../../../utils';
+import { HTMLContent } from '../../HTMLContent';
 import './TableArrayInput.css';
 const b = block('table-array');
 export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
@@ -51,7 +52,8 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                     label,
                     React.createElement(HelpMark, { popoverProps: {
                             placement: COMMON_POPOVER_PLACEMENT,
-                        } }, description))),
+                        } },
+                        React.createElement(HTMLContent, { html: 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/Layouts/Column/Column.js

@@ -5,6 +5,7 @@ import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton } from '../.
 import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block } from '../../../utils';
+import { HTMLContent } from '../../HTMLContent';
 import './Column.css';
 const b = block('column');
 const ColumnBase = ({ name, spec, input, meta, children, }) => {
@@ -18,7 +19,8 @@ const ColumnBase = ({ name, spec, input, meta, children, }) => {
                     React.createElement(Text, { className: b('note-inner') },
                         React.createElement(HelpMark, { popoverProps: {
                                 placement: COMMON_POPOVER_PLACEMENT,
-                            } }, spec.viewSpec.layoutDescription)))) : null)),
+                            } },
+                            React.createElement(HTMLContent, { html: 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

@@ -5,6 +5,7 @@ import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton } from '../.
 import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block } from '../../../utils';
+import { HTMLContent } from '../../HTMLContent';
 import './Row.css';
 const b = block('row');
 const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
@@ -18,7 +19,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
                     React.createElement(Text, { className: b('note-inner') },
                         React.createElement(HelpMark, { popoverProps: {
                                 placement: COMMON_POPOVER_PLACEMENT,
-                            } }, spec.viewSpec.layoutDescription)))) : null)),
+                            } },
+                            React.createElement(HTMLContent, { html: 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.js

@@ -5,6 +5,7 @@ import { GroupIndent } from '../../';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper } from '../../../';
 import { isArrayItem, isArraySpec, isObjectSpec } from '../../../../core';
 import { block } from '../../../utils';
+import { HTMLContent } from '../../HTMLContent';
 import { RemoveButton } from '../../RemoveButton';
 import './Section.css';
 const b = block('section');
@@ -58,7 +59,8 @@ const SectionBase = (_a) => {
             description = (React.createElement(Text, { className: b('note') },
                 React.createElement(HelpMark, { popoverProps: {
                         placement: COMMON_POPOVER_PLACEMENT,
-                    } }, spec.viewSpec.layoutDescription)));
+                    } },
+                    React.createElement(HTMLContent, { html: spec.viewSpec.layoutDescription }))));
         }
     }
     const layoutTitle = spec.viewSpec.layoutTitle;

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

@@ -3,6 +3,7 @@ import { ChevronDown } from '@gravity-ui/icons';
 import { Button, HelpMark, Icon, Popover, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import { block } from '../../utils';
+import { HTMLContent } from '../HTMLContent';
 import './SimpleVerticalAccordeon.css';
 const b = block('simple-vertical-accordeon');
 const TITLE_TEXT_MAX_WIDTH = 485; /** 533px (COMMON_TITLE_MAX_WIDTH) - 48px of padding */
@@ -89,7 +90,8 @@ export class SimpleVerticalAccordeon extends React.Component {
         return note ? (React.createElement(Text, { className: b('tooltip') },
             React.createElement(HelpMark, { popoverProps: {
                     placement: COMMON_POPOVER_PLACEMENT,
-                } }, note))) : null;
+                } },
+                React.createElement(HTMLContent, { html: note })))) : null;
     }
 }
 SimpleVerticalAccordeon.defaultProps = {

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Card, HelpMark, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import { block } from '../../utils';
+import { HTMLContent } from '../HTMLContent';
 import './TogglerCard.css';
 const b = block('toggler-card');
 export const TogglerCard = ({ description, title, text, onClick, disabled, selected, }) => {
@@ -10,6 +11,7 @@ export const TogglerCard = ({ description, title, text, onClick, disabled, selec
             React.createElement(Text, { variant: "subheader-2", ellipsis: true }, title),
             description ? (React.createElement(HelpMark, { popoverProps: {
                     placement: COMMON_POPOVER_PLACEMENT,
-                } }, description)) : null),
+                } },
+                React.createElement(HTMLContent, { html: description }))) : null),
         React.createElement(Text, { variant: "body-1", color: "secondary", className: b('text') }, text)));
 };

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

@@ -4,6 +4,7 @@ import { useDynamicFormsCtx } from '../../../../core';
 import { CopyButton } from '../../../../kit';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block, isNotEmptyValue } from '../../../utils';
+import { HTMLContent } from '../../HTMLContent';
 import './ViewColumn.css';
 const b = block('view-column');
 export const ViewColumn = ({ value, spec, children, }) => {
@@ -16,7 +17,8 @@ export const ViewColumn = ({ value, spec, children, }) => {
             React.createElement(Text, { color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpMark, { className: b('note'), popoverProps: {
                     placement: COMMON_POPOVER_PLACEMENT,
-                } }, spec.viewSpec.layoutDescription)) : null),
+                } },
+                React.createElement(HTMLContent, { html: 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

@@ -4,6 +4,7 @@ import { useDynamicFormsCtx } from '../../../../core';
 import { CopyButton } from '../../../../kit';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block, isNotEmptyValue } from '../../../utils';
+import { HTMLContent } from '../../HTMLContent';
 import './ViewRow.css';
 const b = block('view-row');
 export const ViewRow = ({ value, spec, children, }) => {
@@ -16,7 +17,8 @@ export const ViewRow = ({ value, spec, children, }) => {
             React.createElement(Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpMark, { className: b('note'), popoverProps: {
                     placement: COMMON_POPOVER_PLACEMENT,
-                } }, spec.viewSpec.layoutDescription)) : null,
+                } },
+                React.createElement(HTMLContent, { html: 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/TableArrayView/TableArrayView.js

@@ -3,6 +3,7 @@ import { Flex, HelpMark, Table } from '@gravity-ui/uikit';
 import { ViewController, isArraySpec, isBooleanSpec, isObjectSpec, useDynamicFormsCtx, } from '../../../../core';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block } from '../../../utils';
+import { HTMLContent } from '../../HTMLContent';
 import './TableArrayView.css';
 const b = block('table-array-view');
 export const TableArrayView = ({ value = [], spec, name }) => {
@@ -25,7 +26,8 @@ export const TableArrayView = ({ value = [], spec, name }) => {
                     label,
                     React.createElement(HelpMark, { popoverProps: {
                             placement: COMMON_POPOVER_PLACEMENT,
-                        } }, description)))
+                        } },
+                        React.createElement(HTMLContent, { html: description }))))
                 : label,
             template: (_, idx) => {
                 var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -80,6 +80,7 @@
     "@types/react-is": "^17.0.3",
     "@types/uuid": "^9.0.4",
     "@vitejs/plugin-react": "^4.2.0",
+    "ajv": "^8.17.1",
     "css-loader": "^5.2.6",
     "eslint": "^8.49.0",
     "final-form": "^4.20.2",