@gravity-ui/dynamic-forms 5.2.0 → 5.4.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/RadioGroup/RadioGroup.css

@@ -0,0 +1,28 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-radio-group {
+  align-items: center;
+  height: var(--df-radio-group-height, 28px);
+}
+.df-radio-group_vertical {
+  align-items: flex-start;
+  margin-top: var(--df-radio-group-vertical-margin-top, var(--g-spacing-2));
+  height: auto;
+}

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+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 b = (0, utils_1.block)('radio-group');
+const RadioGroup = ({ name, input, spec, inputProps }) => {
+    var _a, _b, _c;
+    const { value, onBlur, onChange, onFocus } = input;
+    const { withCustomOptions, options: externalOptions } = inputProps || {};
+    const options = react_1.default.useMemo(() => {
+        var _a;
+        return withCustomOptions
+            ? externalOptions || []
+            : ((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+                var _a, _b, _c;
+                return ({
+                    value: id,
+                    content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                    disabled: ((_c = (_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.disabled) === null || _c === void 0 ? void 0 : _c[id]) || false,
+                });
+            })) || [];
+    }, [
+        withCustomOptions,
+        externalOptions,
+        spec.enum,
+        spec.description,
+        (_a = spec.viewSpec.radioGroupParams) === null || _a === void 0 ? void 0 : _a.disabled,
+    ]);
+    if (options.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(uikit_1.Flex, { className: b({ vertical: ((_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.direction) === 'vertical' }) },
+        react_1.default.createElement(uikit_1.RadioGroup, Object.assign({}, inputProps, { name: name, qa: name, disabled: spec.viewSpec.disabled, onUpdate: onChange, onBlur: onBlur, onFocus: onFocus, value: value, options: options, direction: ((_c = spec.viewSpec.radioGroupParams) === null || _c === void 0 ? void 0 : _c.direction) || 'horizontal' }))));
+};
+exports.RadioGroup = RadioGroup;

package/build/cjs/lib/kit/components/Inputs/RadioGroup/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RadioGroup"), 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/Inputs/index.js

@@ -14,6 +14,7 @@ tslib_1.__exportStar(require("./NumberWithScale"), exports);
 tslib_1.__exportStar(require("./ObjectBase"), exports);
 tslib_1.__exportStar(require("./ObjectValueInput"), exports);
 tslib_1.__exportStar(require("./OneOf"), exports);
+tslib_1.__exportStar(require("./RadioGroup"), exports);
 tslib_1.__exportStar(require("./Secret"), exports);
 tslib_1.__exportStar(require("./Select"), exports);
 tslib_1.__exportStar(require("./Switch"), exports);

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/cjs/lib/kit/constants/config.js

@@ -104,6 +104,7 @@ exports.dynamicConfig = {
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
+            radio_group: { Component: components_1.RadioGroup },
         },
         layouts: {
             row: components_1.Row,
@@ -212,6 +213,7 @@ exports.dynamicViewConfig = {
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },
             text_content: { Component: components_1.TextContentView, independent: true },
+            radio_group: { Component: components_1.BaseView },
         },
         layouts: {
             row: components_1.ViewRow,

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

@@ -168,6 +168,10 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
             filterPlaceholder?: string;
             meta?: Record<string, string>;
         };
+        radioGroupParams?: {
+            direction?: 'horizontal' | 'vertical';
+            disabled?: Record<string, boolean>;
+        };
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
         generateRandomValueButton?: boolean;

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/RadioGroup/RadioGroup.css

@@ -0,0 +1,28 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-radio-group {
+  align-items: center;
+  height: var(--df-radio-group-height, 28px);
+}
+.df-radio-group_vertical {
+  align-items: flex-start;
+  margin-top: var(--df-radio-group-vertical-margin-top, var(--g-spacing-2));
+  height: auto;
+}

package/build/esm/lib/kit/components/Inputs/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,7 @@
+import { type RadioGroupProps as RadioGroupBaseProps } from '@gravity-ui/uikit';
+import type { StringInput } from '../../../../core';
+import './RadioGroup.css';
+export interface RadioGroupProps extends Omit<RadioGroupBaseProps, 'direction' | 'onChange' | 'onBlur' | 'onFocus' | 'disabled' | 'qa' | 'content'> {
+    withCustomOptions?: boolean;
+}
+export declare const RadioGroup: StringInput<RadioGroupProps>;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Flex, RadioGroup as RadioGroupBase, } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './RadioGroup.css';
+const b = block('radio-group');
+export const RadioGroup = ({ name, input, spec, inputProps }) => {
+    var _a, _b, _c;
+    const { value, onBlur, onChange, onFocus } = input;
+    const { withCustomOptions, options: externalOptions } = inputProps || {};
+    const options = React.useMemo(() => {
+        var _a;
+        return withCustomOptions
+            ? externalOptions || []
+            : ((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+                var _a, _b, _c;
+                return ({
+                    value: id,
+                    content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                    disabled: ((_c = (_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.disabled) === null || _c === void 0 ? void 0 : _c[id]) || false,
+                });
+            })) || [];
+    }, [
+        withCustomOptions,
+        externalOptions,
+        spec.enum,
+        spec.description,
+        (_a = spec.viewSpec.radioGroupParams) === null || _a === void 0 ? void 0 : _a.disabled,
+    ]);
+    if (options.length === 0) {
+        return null;
+    }
+    return (React.createElement(Flex, { className: b({ vertical: ((_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.direction) === 'vertical' }) },
+        React.createElement(RadioGroupBase, Object.assign({}, inputProps, { name: name, qa: name, disabled: spec.viewSpec.disabled, onUpdate: onChange, onBlur: onBlur, onFocus: onFocus, value: value, options: options, direction: ((_c = spec.viewSpec.radioGroupParams) === null || _c === void 0 ? void 0 : _c.direction) || 'horizontal' }))));
+};

package/build/esm/lib/kit/components/Inputs/RadioGroup/index.d.ts

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

package/build/esm/lib/kit/components/Inputs/RadioGroup/index.js

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

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/Inputs/index.d.ts

@@ -11,6 +11,7 @@ export * from './NumberWithScale';
 export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
+export * from './RadioGroup';
 export * from './Secret';
 export * from './Select';
 export * from './Switch';

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

@@ -11,6 +11,7 @@ export * from './NumberWithScale';
 export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
+export * from './RadioGroup';
 export * from './Secret';
 export * from './Select';
 export * from './Switch';

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/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, RadioGroup, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -101,6 +101,7 @@ export const dynamicConfig = {
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInput },
             text_content: { Component: TextContent, independent: true },
+            radio_group: { Component: RadioGroup },
         },
         layouts: {
             row: Row,
@@ -209,6 +210,7 @@ export const dynamicViewConfig = {
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },
             text_content: { Component: TextContentView, independent: true },
+            radio_group: { Component: BaseView },
         },
         layouts: {
             row: ViewRow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.2.0",
+  "version": "5.4.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",