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

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

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

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

@@ -25,7 +25,7 @@ const TextContentComponent = ({ spec, value, Layout, }) => {
             : undefined;
         content = (react_1.default.createElement(uikit_1.Alert, { icon: iconLib, message: content, 
             // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
-            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert }));
+            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert, view: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.viewAlert }));
     }
     else if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
         content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));

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

@@ -10,6 +10,7 @@ const RemoveButton_1 = require("../../RemoveButton");
 const SimpleVerticalAccordeon_1 = require("../../SimpleVerticalAccordeon");
 const Accordeon = ({ name, spec, input, meta, children, }) => {
     var _a;
+    const { variantTitle } = spec.viewSpec.layoutProps || {};
     const [open, setOpen] = react_1.default.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
     const onDrop = react_1.default.useCallback(() => {
         setOpen(false);
@@ -22,7 +23,7 @@ const Accordeon = ({ name, spec, input, meta, children, }) => {
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: onDrop });
     }, [spec.required, input.value, onDrop, name]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
+    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true, variantTitle: variantTitle },
         react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };
 exports.Accordeon = Accordeon;

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

@@ -18,6 +18,25 @@ const SectionBase = (_a) => {
     const arrOrObjFlag = (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec);
     const titleRef = react_1.default.useRef(null);
     let content = children;
+    const { variantTitle: variantTitleProp } = spec.viewSpec.layoutProps || {};
+    const { sizeTitle, variantTitle } = react_1.default.useMemo(() => {
+        if (variantTitleProp) {
+            return {
+                sizeTitle: undefined,
+                variantTitle: variantTitleProp,
+            };
+        }
+        if (titleSize === 'm') {
+            return {
+                sizeTitle: titleSize,
+                variantTitle: 'body-2',
+            };
+        }
+        return {
+            sizeTitle: titleSize,
+            variantTitle: 'body-1',
+        };
+    }, [variantTitleProp, titleSize]);
     const removeButton = react_1.default.useMemo(() => {
         if ((input === null || input === void 0 ? void 0 : input.value) && (input === null || input === void 0 ? void 0 : input.onDrop) && (0, core_1.isArrayItem)(name)) {
             return (react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: input.onDrop, switcherClassName: b('remove-button') }));
@@ -49,10 +68,10 @@ const SectionBase = (_a) => {
     return (react_1.default.createElement("section", { className: b() },
         layoutTitle ? (react_1.default.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
-                size: titleSize,
+                size: sizeTitle,
             }) },
             react_1.default.createElement(uikit_1.Popover, { className: b('popover'), content: layoutTitle, placement: __2.COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
-                react_1.default.createElement(uikit_1.Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
+                react_1.default.createElement(uikit_1.Text, { className: b('title'), variant: variantTitle, ref: titleRef, ellipsis: true }, layoutTitle)),
             description,
             removeButton)) : null,
         react_1.default.createElement("div", { className: b('content') }, content)));

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

@@ -51,7 +51,7 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
     }
     render() {
         var _a;
-        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
+        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, variantTitle, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (react_1.default.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (react_1.default.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -59,7 +59,7 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         }
         const title = this.getTitle();
         const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
-        const currentTitleVariant = this.getCurrentTitleVariant();
+        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, className: b('popover'), hasArrow: true },

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

@@ -10,11 +10,12 @@ const SimpleVerticalAccordeon_1 = require("../../SimpleVerticalAccordeon");
 const ViewAccordeon = ({ name, value, spec, children, }) => {
     const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
     const [open, setOpen] = react_1.default.useState((0, isBoolean_1.default)(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
+    const { variantTitle } = spec.viewSpec.layoutProps || {};
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }
     return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: showLayoutDescription && spec.viewSpec.layoutDescription
             ? spec.viewSpec.layoutDescription
-            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true, variantTitle: variantTitle }, children));
 };
 exports.ViewAccordeon = ViewAccordeon;

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

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

package/build/cjs/lib/kit/utils/common.js

@@ -42,7 +42,7 @@ const isNotEmptyValue = (value, spec) => {
 };
 exports.isNotEmptyValue = isNotEmptyValue;
 const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     if ((0, isObjectLike_1.default)(spec)) {
         const result = (0, cloneDeep_1.default)(spec);
         if ((0, isString_1.default)(result.type)) {
@@ -54,7 +54,7 @@ const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_l) {
+                catch (_m) {
                     _defaultValue = undefined;
                 }
             }
@@ -75,20 +75,21 @@ const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
         if ((0, isString_1.default)((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.addButtonPosition)) {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
-        if ((0, isString_1.default)((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
-            result.viewSpec.textContentParams = Object.assign(Object.assign({}, result.viewSpec.textContentParams), { themeLabel: result.viewSpec.themeLabel.toLowerCase() });
-        }
-        if ((0, isString_1.default)((_f = (_e = result.viewSpec) === null || _e === void 0 ? void 0 : _e.oneOfParams) === null || _f === void 0 ? void 0 : _f.toggler)) {
+        if ((0, isString_1.default)((_e = (_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.oneOfParams) === null || _e === void 0 ? void 0 : _e.toggler)) {
             result.viewSpec.oneOfParams.toggler = result.viewSpec.oneOfParams.toggler.toLowerCase();
         }
-        if ((0, isString_1.default)((_h = (_g = result.viewSpec) === null || _g === void 0 ? void 0 : _g.textContentParams) === null || _h === void 0 ? void 0 : _h.themeLabel)) {
+        if ((0, isString_1.default)((_g = (_f = result.viewSpec) === null || _f === void 0 ? void 0 : _f.textContentParams) === null || _g === void 0 ? void 0 : _g.themeLabel)) {
             result.viewSpec.textContentParams.themeLabel =
                 result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
-        if ((0, isString_1.default)((_k = (_j = result.viewSpec) === null || _j === void 0 ? void 0 : _j.textContentParams) === null || _k === void 0 ? void 0 : _k.themeAlert)) {
+        if ((0, isString_1.default)((_j = (_h = result.viewSpec) === null || _h === void 0 ? void 0 : _h.textContentParams) === null || _j === void 0 ? void 0 : _j.themeAlert)) {
             result.viewSpec.textContentParams.themeAlert =
                 result.viewSpec.textContentParams.themeAlert.toLowerCase();
         }
+        if ((0, isString_1.default)((_l = (_k = result.viewSpec) === null || _k === void 0 ? void 0 : _k.textContentParams) === null || _l === void 0 ? void 0 : _l.viewAlert)) {
+            result.viewSpec.textContentParams.viewAlert =
+                result.viewSpec.textContentParams.viewAlert.toLowerCase();
+        }
         if ((0, isString_1.default)(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

package/build/esm/lib/core/components/View/types/layout.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormValue, Spec } from '../../../';
 import { ViewProps } from './';
-export type ViewLayoutProps<Value extends FormValue, SpecType extends Spec> = {
+export type ViewLayoutProps<Value extends FormValue, SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec> = {
     children: React.ReactElement;
 } & ViewProps<Value, SpecType>;
 export type ViewLayoutType<Value extends FormValue, SpecType extends Spec> = (props: ViewLayoutProps<Value, SpecType>) => React.ReactElement | null;

package/build/esm/lib/core/components/View/types/views.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormValue, Spec } from '../../../';
 import { ViewLayoutType } from './';
-export type ViewProps<Value extends FormValue, SpecType extends Spec> = {
+export type ViewProps<Value extends FormValue, SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec> = {
     spec: SpecType;
     name: string;
     value?: Value;

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

@@ -1,4 +1,4 @@
-import { AlertProps, LabelProps } from '@gravity-ui/uikit';
+import type { AlertProps, LabelProps } from '@gravity-ui/uikit';
 import { ColorTextBaseProps } from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 import { ReadAsMethod, SpecTypes } from '../constants';
 import { ArrayValue, ObjectValue } from './';
@@ -151,6 +151,7 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
             iconColor?: ColorTextBaseProps['color'];
             titleAlert?: string;
             themeAlert?: AlertProps['theme'];
+            viewAlert?: AlertProps['view'];
         };
         fileInput?: {
             accept?: string;

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

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

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

@@ -22,7 +22,7 @@ export const TextContentComponent = ({ spec, value, Layout, }) => {
             : undefined;
         content = (React.createElement(Alert, { icon: iconLib, message: content, 
             // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
-            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert }));
+            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert, view: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.viewAlert }));
     }
     else if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
         content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.d.ts

@@ -1,2 +1,7 @@
+import { TextProps } from '@gravity-ui/uikit';
 import { ArrayLayoutProps, ObjectLayoutProps } from '../../../../core';
-export declare const Accordeon: <T extends ArrayLayoutProps<undefined, undefined> | ObjectLayoutProps<undefined, undefined>>({ name, spec, input, meta, children, }: T) => JSX.Element;
+interface AccordeonLayoutProps {
+    variantTitle?: TextProps['variant'];
+}
+export declare const Accordeon: <T extends ArrayLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined> | ObjectLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined>>({ name, spec, input, meta, children, }: T) => JSX.Element;
+export {};

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.js

@@ -6,6 +6,7 @@ import { RemoveButton } from '../../RemoveButton';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const Accordeon = ({ name, spec, input, meta, children, }) => {
     var _a;
+    const { variantTitle } = spec.viewSpec.layoutProps || {};
     const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
     const onDrop = React.useCallback(() => {
         setOpen(false);
@@ -18,6 +19,6 @@ export const Accordeon = ({ name, spec, input, meta, children, }) => {
         return React.createElement(RemoveButton, { name: name, onDrop: onDrop });
     }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
+    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true, variantTitle: variantTitle },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

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

@@ -16,6 +16,25 @@ const SectionBase = (_a) => {
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
     const titleRef = React.useRef(null);
     let content = children;
+    const { variantTitle: variantTitleProp } = spec.viewSpec.layoutProps || {};
+    const { sizeTitle, variantTitle } = React.useMemo(() => {
+        if (variantTitleProp) {
+            return {
+                sizeTitle: undefined,
+                variantTitle: variantTitleProp,
+            };
+        }
+        if (titleSize === 'm') {
+            return {
+                sizeTitle: titleSize,
+                variantTitle: 'body-2',
+            };
+        }
+        return {
+            sizeTitle: titleSize,
+            variantTitle: 'body-1',
+        };
+    }, [variantTitleProp, titleSize]);
     const removeButton = React.useMemo(() => {
         if ((input === null || input === void 0 ? void 0 : input.value) && (input === null || input === void 0 ? void 0 : input.onDrop) && isArrayItem(name)) {
             return (React.createElement(RemoveButton, { name: name, onDrop: input.onDrop, switcherClassName: b('remove-button') }));
@@ -47,10 +66,10 @@ const SectionBase = (_a) => {
     return (React.createElement("section", { className: b() },
         layoutTitle ? (React.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
-                size: titleSize,
+                size: sizeTitle,
             }) },
             React.createElement(Popover, { className: b('popover'), content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
-                React.createElement(Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
+                React.createElement(Text, { className: b('title'), variant: variantTitle, ref: titleRef, ellipsis: true }, layoutTitle)),
             description,
             removeButton)) : null,
         React.createElement("div", { className: b('content') }, content)));

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextProps } from '@gravity-ui/uikit';
 import './SimpleVerticalAccordeon.css';
 interface SimpleVerticalAccordeonProps {
     children: React.ReactNode;
@@ -16,6 +17,7 @@ interface SimpleVerticalAccordeonProps {
     hideInsteadOfDestroy?: boolean;
     withBranchView?: boolean;
     viewLayout?: boolean;
+    variantTitle?: TextProps['variant'];
 }
 interface SimpleVerticalAccordeonState {
     open: boolean;

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

@@ -48,7 +48,7 @@ export class SimpleVerticalAccordeon extends React.Component {
     }
     render() {
         var _a;
-        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
+        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, variantTitle, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (React.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (React.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -56,7 +56,7 @@ export class SimpleVerticalAccordeon extends React.Component {
         }
         const title = this.getTitle();
         const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
-        const currentTitleVariant = this.getCurrentTitleVariant();
+        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, className: b('popover'), hasArrow: true },

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.d.ts

@@ -1,2 +1,7 @@
-import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
-export declare const ViewAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;
+import { TextProps } from '@gravity-ui/uikit';
+import { ArrayValue, ObjectValue, Spec, ViewLayoutProps } from '../../../../core';
+interface ViewAccordeonLayoutProps {
+    variantTitle?: TextProps['variant'];
+}
+export declare const ViewAccordeon: <T extends ViewLayoutProps<ArrayValue | ObjectValue, Spec<any, any, ViewAccordeonLayoutProps>>>({ name, value, spec, children, }: T) => JSX.Element | null;
+export {};

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

@@ -6,10 +6,11 @@ import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const ViewAccordeon = ({ name, value, spec, children, }) => {
     const { showLayoutDescription } = useDynamicFormsCtx();
     const [open, setOpen] = React.useState(isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
+    const { variantTitle } = spec.viewSpec.layoutProps || {};
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
     return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: showLayoutDescription && spec.viewSpec.layoutDescription
             ? spec.viewSpec.layoutDescription
-            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true, variantTitle: variantTitle }, children));
 };

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

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

package/build/esm/lib/kit/utils/common.js

@@ -37,7 +37,7 @@ export const isNotEmptyValue = (value, spec) => {
     return true;
 };
 export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     if (isObjectLike(spec)) {
         const result = cloneDeep(spec);
         if (isString(result.type)) {
@@ -49,7 +49,7 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_l) {
+                catch (_m) {
                     _defaultValue = undefined;
                 }
             }
@@ -70,20 +70,21 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
         if (isString((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.addButtonPosition)) {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
-        if (isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
-            result.viewSpec.textContentParams = Object.assign(Object.assign({}, result.viewSpec.textContentParams), { themeLabel: result.viewSpec.themeLabel.toLowerCase() });
-        }
-        if (isString((_f = (_e = result.viewSpec) === null || _e === void 0 ? void 0 : _e.oneOfParams) === null || _f === void 0 ? void 0 : _f.toggler)) {
+        if (isString((_e = (_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.oneOfParams) === null || _e === void 0 ? void 0 : _e.toggler)) {
             result.viewSpec.oneOfParams.toggler = result.viewSpec.oneOfParams.toggler.toLowerCase();
         }
-        if (isString((_h = (_g = result.viewSpec) === null || _g === void 0 ? void 0 : _g.textContentParams) === null || _h === void 0 ? void 0 : _h.themeLabel)) {
+        if (isString((_g = (_f = result.viewSpec) === null || _f === void 0 ? void 0 : _f.textContentParams) === null || _g === void 0 ? void 0 : _g.themeLabel)) {
             result.viewSpec.textContentParams.themeLabel =
                 result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
-        if (isString((_k = (_j = result.viewSpec) === null || _j === void 0 ? void 0 : _j.textContentParams) === null || _k === void 0 ? void 0 : _k.themeAlert)) {
+        if (isString((_j = (_h = result.viewSpec) === null || _h === void 0 ? void 0 : _h.textContentParams) === null || _j === void 0 ? void 0 : _j.themeAlert)) {
             result.viewSpec.textContentParams.themeAlert =
                 result.viewSpec.textContentParams.themeAlert.toLowerCase();
         }
+        if (isString((_l = (_k = result.viewSpec) === null || _k === void 0 ? void 0 : _k.textContentParams) === null || _l === void 0 ? void 0 : _l.viewAlert)) {
+            result.viewSpec.textContentParams.viewAlert =
+                result.viewSpec.textContentParams.viewAlert.toLowerCase();
+        }
         if (isString(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/date-components": "^3.0.0-beta.0",
+    "@gravity-ui/date-components": "^3.0.0",
     "@gravity-ui/date-utils": "^2.5.5",
     "@gravity-ui/i18n": "^1.2.0",
     "@gravity-ui/icons": "^2.12.0",
@@ -60,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": "^7.0.0-beta.5",
+    "@gravity-ui/uikit": "^7.1.0",
     "@playwright/experimental-ct-react": "^1.40.0",
     "@playwright/test": "^1.40.0",
     "@storybook/addon-essentials": "^7.0.27",
@@ -114,7 +114,7 @@
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^7.0.0-beta.5",
+    "@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",