@gravity-ui/dynamic-forms 2.3.0 → 2.5.0

package/build/cjs/lib/core/components/Form/Controller.js

@@ -28,7 +28,7 @@ const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) =>
         useField: renderProps,
         useSearch: withSearch,
     }, __mirror);
-    if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec)) {
+    if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec) && !spec.viewSpec.hideInput) {
         return withSearch(render(renderProps));
     }
     return null;

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

@@ -5,4 +5,15 @@
 .df-text-content .yc-label__text {
   text-align: initial;
   white-space: initial;
+}
+.df-text-content__icon {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+.df-text-content__wrapper {
+  display: flex;
+}
+.df-text-content__separator {
+  margin: 0 4px;
 }

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

@@ -4,21 +4,38 @@ exports.TextContent = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const utils_1 = require("../../../utils");
+const LazyLoader_1 = require("../../LazyLoader");
+const utils_2 = require("./utils");
 const b = (0, utils_1.block)('text-content');
 const TextContent = (_a) => {
-    var { spec, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "Layout"]);
-    const { themeLabel, layoutDescription } = spec.viewSpec;
-    if (!layoutDescription) {
+    var _b;
+    var { spec, Layout, input } = _a, restProps = tslib_1.__rest(_a, ["spec", "Layout", "input"]);
+    const { textContentParams, layoutDescription } = spec.viewSpec;
+    const text = react_1.default.useMemo(() => ((textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text) ? textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text : layoutDescription), [layoutDescription, textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text]);
+    if (!text) {
         return null;
     }
-    let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: layoutDescription } });
-    if (themeLabel) {
-        content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: themeLabel, className: b() }, content));
+    const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (react_1.default.createElement(LazyLoader_1.LazyLoader, { component: (0, utils_2.loadIcon)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
+    let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
+    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: input.value, icon: iconLib }, content));
+    }
+    else {
+        content = (react_1.default.createElement("div", { className: b('wrapper') },
+            iconLib ? (react_1.default.createElement(uikit_1.Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
+            content,
+            input.value ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: b('separator') }, ":"),
+                react_1.default.createElement(uikit_1.Text, { color: "secondary" }, input.value))) : null));
     }
     if (Layout) {
-        const _spec = Object.assign(Object.assign({}, spec), { viewSpec: Object.assign(Object.assign({}, spec.viewSpec), { layoutDescription: undefined }) });
-        return (react_1.default.createElement(Layout, Object.assign({ spec: _spec }, restProps), content));
+        const _spec = lodash_1.default.cloneDeep(spec);
+        if (!(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text)) {
+            _spec.viewSpec.layoutDescription = undefined;
+        }
+        return (react_1.default.createElement(Layout, Object.assign({ spec: _spec, input: input }, restProps), content));
     }
     return content;
 };

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const loadIcon = (name) => {
+    const Icon = react_1.default.lazy(() => {
+        return new Promise((resolve) => {
+            const icon = Promise.resolve().then(() => tslib_1.__importStar(require(`@gravity-ui/icons`))).then((module) => {
+                if (module[name]) {
+                    return { default: module[name] };
+                }
+                return {
+                    default: () => null,
+                };
+            });
+            resolve(icon);
+        });
+    });
+    return Icon;
+};
+exports.loadIcon = loadIcon;

package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -11,9 +11,6 @@
 .df-transparent_without-max-width {
   max-width: unset;
 }
-.df-transparent_without-max-width > .df-error-wrapper {
-  width: unset;
-}
 .df-transparent__remove-button {
   margin-left: 5px;
 }

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyLoader = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const LazyLoader = ({ component, initialFallback = react_1.default.createElement(react_1.default.Fragment, null), }) => {
+    const fallback = react_1.default.useRef(() => initialFallback);
+    const Component = component;
+    const updateFallback = async () => {
+        const result = await component._result;
+        if (!lodash_1.default.isUndefined(result)) {
+            fallback.current = result.default;
+        }
+    };
+    react_1.default.useEffect(() => {
+        updateFallback();
+    }, [component]);
+    return (react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement(fallback.current, null) },
+        react_1.default.createElement(Component, null)));
+};
+exports.LazyLoader = LazyLoader;

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

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

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

@@ -0,0 +1,18 @@
+.df-toggler-card {
+  width: 254px;
+  padding: 10px;
+  height: 88px;
+}
+.df-toggler-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.df-toggler-card__text {
+  margin-top: 12px;
+  display: block;
+  margin-right: 15px;
+  height: 36px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TogglerCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('toggler-card');
+const TogglerCard = ({ description, title, text, onClick, disabled, selected, }) => {
+    return (react_1.default.createElement(uikit_1.Card, { onClick: onClick, type: "selection", disabled: disabled ? !selected : disabled, selected: selected, size: "m", className: b() },
+        react_1.default.createElement("div", { className: b('header') },
+            react_1.default.createElement(uikit_1.Text, { variant: "subheader-2", ellipsis: true }, title),
+            description ? (react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })) : null),
+        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/TogglerCard/index.js

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

package/build/cjs/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -10,4 +10,5 @@
 }
 .df-view-transparent__inner {
   max-width: 100%;
+  width: 100%;
 }

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

@@ -8,7 +8,9 @@ tslib_1.__exportStar(require("./ErrorWrapper"), exports);
 tslib_1.__exportStar(require("./GroupIndent"), exports);
 tslib_1.__exportStar(require("./Inputs"), exports);
 tslib_1.__exportStar(require("./Layouts"), exports);
+tslib_1.__exportStar(require("./LazyLoader"), exports);
 tslib_1.__exportStar(require("./LongValue"), exports);
 tslib_1.__exportStar(require("./SimpleVerticalAccordeon"), exports);
+tslib_1.__exportStar(require("./TogglerCard"), exports);
 tslib_1.__exportStar(require("./Views"), exports);
 tslib_1.__exportStar(require("./ViewLayouts"), exports);

package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css

@@ -1,4 +1,14 @@
 .df-use-oneof__toggler_radio > .df-row {
   width: unset;
   max-width: unset;
+}
+.df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
+  padding-top: 0px;
+  margin-top: 15px;
+}
+.df-use-oneof__card {
+  display: flex;
+}
+.df-use-oneof__card > :first-child {
+  margin-right: 8px;
 }

package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('use-oneof');
 const MAX_TAB_TITLE_LENGTH = 20;
@@ -41,28 +42,52 @@ const useOneOf = ({ props, onTogglerChange }) => {
             content: title,
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
-    const selectToggler = react_1.default.useMemo(() => {
-        var _a, _b;
-        return ((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
-            (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'select' ||
+    const togglerType = react_1.default.useMemo(() => {
+        var _a, _b, _c;
+        if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 3) {
+            return 'card';
+        }
+        if (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) !== 'radio' &&
+            (((_c = spec.viewSpec.oneOfParams) === null || _c === void 0 ? void 0 : _c.toggler) === 'select' ||
                 options.length > 3 ||
-                lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH));
+                lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
+            return 'select';
+        }
+        return 'radio';
     }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
     const togglerInput = react_1.default.useMemo(() => {
-        if (selectToggler) {
+        if (togglerType === 'card') {
+            return (react_1.default.createElement("div", { className: b('card') }, options.map(({ value }) => {
+                var _a, _b, _c;
+                const onClick = () => {
+                    onOneOfChange([value]);
+                };
+                return (react_1.default.createElement(components_1.TogglerCard, { title: ((_a = specProperties[value]) === null || _a === void 0 ? void 0 : _a.viewSpec.layoutTitle) || '', disabled: spec.viewSpec.disabled, text: ((_b = spec.description) === null || _b === void 0 ? void 0 : _b[value]) || '', description: (_c = specProperties[value]) === null || _c === void 0 ? void 0 : _c.viewSpec.layoutDescription, onClick: onClick, selected: oneOfValue === value, key: value }));
+            })));
+        }
+        if (togglerType === 'select') {
             return (react_1.default.createElement(uikit_1.Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
         }
         return (react_1.default.createElement(uikit_1.RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (react_1.default.createElement(uikit_1.RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
-    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
+    }, [
+        togglerType,
+        oneOfValue,
+        spec.viewSpec.disabled,
+        name,
+        options,
+        onOneOfChange,
+        specProperties,
+    ]);
     const toggler = react_1.default.useMemo(() => {
         if (Layout) {
             return (react_1.default.createElement("div", { className: b('toggler', {
-                    radio: !selectToggler,
+                    radio: togglerType === 'radio',
+                    card: togglerType === 'card',
                 }) },
                 react_1.default.createElement(Layout, Object.assign({}, props), togglerInput)));
         }
         return react_1.default.createElement("div", null, togglerInput);
-    }, [Layout, togglerInput, selectToggler, props]);
+    }, [Layout, togglerInput, togglerType, props]);
     return { oneOfValue, specProperties, toggler, togglerInput };
 };
 exports.useOneOf = useOneOf;

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

@@ -36,7 +36,7 @@ const isNotEmptyValue = (value, spec) => {
 };
 exports.isNotEmptyValue = isNotEmptyValue;
 const prepareSpec = (spec, parseJsonDefaultValue) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (lodash_1.default.isObjectLike(spec)) {
         const result = lodash_1.default.cloneDeep(spec);
         if (lodash_1.default.isString(result.type)) {
@@ -48,7 +48,7 @@ const prepareSpec = (spec, parseJsonDefaultValue) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_e) {
+                catch (_j) {
                     _defaultValue = undefined;
                 }
             }
@@ -70,7 +70,14 @@ const prepareSpec = (spec, parseJsonDefaultValue) => {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
         if (lodash_1.default.isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
-            result.viewSpec.themeLabel = result.viewSpec.themeLabel.toLowerCase();
+            result.viewSpec.textContentParams = Object.assign(Object.assign({}, result.viewSpec.textContentParams), { themeLabel: result.viewSpec.themeLabel.toLowerCase() });
+        }
+        if (lodash_1.default.isString((_f = (_e = result.viewSpec) === null || _e === void 0 ? void 0 : _e.oneOfParams) === null || _f === void 0 ? void 0 : _f.toggler)) {
+            result.viewSpec.oneOfParams.toggler = result.viewSpec.oneOfParams.toggler.toLowerCase();
+        }
+        if (lodash_1.default.isString((_h = (_g = result.viewSpec) === null || _g === void 0 ? void 0 : _g.textContentParams) === null || _h === void 0 ? void 0 : _h.themeLabel)) {
+            result.viewSpec.textContentParams.themeLabel =
+                result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
         if (lodash_1.default.isString(result.validator)) {
             result.validator = result.validator.toLowerCase();

package/build/esm/lib/core/components/Form/Controller.js

@@ -24,7 +24,7 @@ export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount,
         useField: renderProps,
         useSearch: withSearch,
     }, __mirror);
-    if (_.isString(name) && isCorrectSpec(spec)) {
+    if (_.isString(name) && isCorrectSpec(spec) && !spec.viewSpec.hideInput) {
         return withSearch(render(renderProps));
     }
     return null;

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

@@ -1,4 +1,5 @@
 import { 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 './';
 export interface ArraySpec<LinkType = any> {
@@ -27,6 +28,7 @@ export interface ArraySpec<LinkType = any> {
         link?: LinkType;
         placeholder?: string;
         addButtonPosition?: 'down' | 'right';
+        hideInput?: boolean;
     };
 }
 export interface BooleanSpec<LinkType = any> {
@@ -42,6 +44,7 @@ export interface BooleanSpec<LinkType = any> {
         layoutDescription?: string;
         layoutOpen?: boolean;
         link?: LinkType;
+        hideInput?: boolean;
     };
 }
 export interface NumberSpec<LinkType = any> {
@@ -62,6 +65,7 @@ export interface NumberSpec<LinkType = any> {
         link?: LinkType;
         placeholder?: string;
         copy?: boolean;
+        hideInput?: boolean;
     };
 }
 export interface ObjectSpec<LinkType = any> {
@@ -81,9 +85,10 @@ export interface ObjectSpec<LinkType = any> {
         order?: string[];
         link?: LinkType;
         oneOfParams?: {
-            toggler?: 'select' | 'radio';
+            toggler?: 'select' | 'radio' | 'card';
         };
         placeholder?: string;
+        hideInput?: boolean;
     };
 }
 export interface StringSpec<LinkType = any> {
@@ -119,7 +124,13 @@ export interface StringSpec<LinkType = any> {
         };
         hideValues?: string[];
         placeholder?: string;
-        themeLabel?: LabelProps['theme'];
+        hideInput?: boolean;
+        textContentParams?: {
+            themeLabel?: LabelProps['theme'];
+            text: string;
+            icon?: string;
+            iconColor?: ColorTextBaseProps['color'];
+        };
         fileInput?: {
             accept?: string;
             readAsMethod?: ReadAsMethod;

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

@@ -5,4 +5,15 @@
 .df-text-content .yc-label__text {
   text-align: initial;
   white-space: initial;
+}
+.df-text-content__icon {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+.df-text-content__wrapper {
+  display: flex;
+}
+.df-text-content__separator {
+  margin: 0 4px;
 }

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

@@ -1,22 +1,39 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { Label } from '@gravity-ui/uikit';
+import { Label, Text } from '@gravity-ui/uikit';
+import _ from 'lodash';
 import { block } from '../../../utils';
+import { LazyLoader } from '../../LazyLoader';
+import { loadIcon } from './utils';
 import './TextContent.css';
 const b = block('text-content');
 export const TextContent = (_a) => {
-    var { spec, Layout } = _a, restProps = __rest(_a, ["spec", "Layout"]);
-    const { themeLabel, layoutDescription } = spec.viewSpec;
-    if (!layoutDescription) {
+    var _b;
+    var { spec, Layout, input } = _a, restProps = __rest(_a, ["spec", "Layout", "input"]);
+    const { textContentParams, layoutDescription } = spec.viewSpec;
+    const text = React.useMemo(() => ((textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text) ? textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text : layoutDescription), [layoutDescription, textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text]);
+    if (!text) {
         return null;
     }
-    let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: layoutDescription } });
-    if (themeLabel) {
-        content = (React.createElement(Label, { size: "m", theme: themeLabel, className: b() }, content));
+    const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (React.createElement(LazyLoader, { component: loadIcon(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
+    let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
+    if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
+        content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: input.value, icon: iconLib }, content));
+    }
+    else {
+        content = (React.createElement("div", { className: b('wrapper') },
+            iconLib ? (React.createElement(Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
+            content,
+            input.value ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: b('separator') }, ":"),
+                React.createElement(Text, { color: "secondary" }, input.value))) : null));
     }
     if (Layout) {
-        const _spec = Object.assign(Object.assign({}, spec), { viewSpec: Object.assign(Object.assign({}, spec.viewSpec), { layoutDescription: undefined }) });
-        return (React.createElement(Layout, Object.assign({ spec: _spec }, restProps), content));
+        const _spec = _.cloneDeep(spec);
+        if (!(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text)) {
+            _spec.viewSpec.layoutDescription = undefined;
+        }
+        return (React.createElement(Layout, Object.assign({ spec: _spec, input: input }, restProps), content));
     }
     return content;
 };

package/build/esm/lib/kit/components/Inputs/TextContent/utils.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const loadIcon: (name: string) => React.LazyExoticComponent<React.ComponentType<any>>;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export const loadIcon = (name) => {
+    const Icon = React.lazy(() => {
+        return new Promise((resolve) => {
+            const icon = import(`@gravity-ui/icons`).then((module) => {
+                if (module[name]) {
+                    return { default: module[name] };
+                }
+                return {
+                    default: () => null,
+                };
+            });
+            resolve(icon);
+        });
+    });
+    return Icon;
+};

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -11,9 +11,6 @@
 .df-transparent_without-max-width {
   max-width: unset;
 }
-.df-transparent_without-max-width > .df-error-wrapper {
-  width: unset;
-}
 .df-transparent__remove-button {
   margin-left: 5px;
 }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export type LazyLoaderProps = {
+    component: React.LazyExoticComponent<React.ComponentType<any>>;
+    initialFallback?: JSX.Element;
+};
+export declare const LazyLoader: ({ component, initialFallback, }: LazyLoaderProps) => JSX.Element;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import _ from 'lodash';
+export const LazyLoader = ({ component, initialFallback = React.createElement(React.Fragment, null), }) => {
+    const fallback = React.useRef(() => initialFallback);
+    const Component = component;
+    const updateFallback = async () => {
+        const result = await component._result;
+        if (!_.isUndefined(result)) {
+            fallback.current = result.default;
+        }
+    };
+    React.useEffect(() => {
+        updateFallback();
+    }, [component]);
+    return (React.createElement(React.Suspense, { fallback: React.createElement(fallback.current, null) },
+        React.createElement(Component, null)));
+};

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

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

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

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

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

@@ -0,0 +1,18 @@
+.df-toggler-card {
+  width: 254px;
+  padding: 10px;
+  height: 88px;
+}
+.df-toggler-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.df-toggler-card__text {
+  margin-top: 12px;
+  display: block;
+  margin-right: 15px;
+  height: 36px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import './TogglerCard.css';
+interface TogglerCardProps {
+    description?: string;
+    title: string;
+    text: string;
+    onClick: () => void;
+    disabled?: boolean;
+    selected: boolean;
+}
+export declare const TogglerCard: React.FC<TogglerCardProps>;
+export {};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
+import { Card, Text } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './TogglerCard.css';
+const b = block('toggler-card');
+export const TogglerCard = ({ description, title, text, onClick, disabled, selected, }) => {
+    return (React.createElement(Card, { onClick: onClick, type: "selection", disabled: disabled ? !selected : disabled, selected: selected, size: "m", className: b() },
+        React.createElement("div", { className: b('header') },
+            React.createElement(Text, { variant: "subheader-2", ellipsis: true }, title),
+            description ? (React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })) : null),
+        React.createElement(Text, { variant: "body-1", color: "secondary", className: b('text') }, text)));
+};

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

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

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

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

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -10,4 +10,5 @@
 }
 .df-view-transparent__inner {
   max-width: 100%;
+  width: 100%;
 }

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

@@ -5,7 +5,9 @@ export * from './ErrorWrapper';
 export * from './GroupIndent';
 export * from './Inputs';
 export * from './Layouts';
+export * from './LazyLoader';
 export * from './LongValue';
 export * from './SimpleVerticalAccordeon';
+export * from './TogglerCard';
 export * from './Views';
 export * from './ViewLayouts';

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

@@ -5,7 +5,9 @@ export * from './ErrorWrapper';
 export * from './GroupIndent';
 export * from './Inputs';
 export * from './Layouts';
+export * from './LazyLoader';
 export * from './LongValue';
 export * from './SimpleVerticalAccordeon';
+export * from './TogglerCard';
 export * from './Views';
 export * from './ViewLayouts';

package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css

@@ -1,4 +1,14 @@
 .df-use-oneof__toggler_radio > .df-row {
   width: unset;
   max-width: unset;
+}
+.df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
+  padding-top: 0px;
+  margin-top: 15px;
+}
+.df-use-oneof__card {
+  display: flex;
+}
+.df-use-oneof__card > :first-child {
+  margin-right: 8px;
 }

package/build/esm/lib/kit/hooks/useOneOf/useOneOf.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RadioButton, Select } from '@gravity-ui/uikit';
 import _ from 'lodash';
+import { TogglerCard } from '../../components';
 import { block } from '../../utils';
 import './useOneOf.css';
 const b = block('use-oneof');
@@ -38,27 +39,51 @@ export const useOneOf = ({ props, onTogglerChange }) => {
             content: title,
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
-    const selectToggler = React.useMemo(() => {
-        var _a, _b;
-        return ((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
-            (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'select' ||
+    const togglerType = React.useMemo(() => {
+        var _a, _b, _c;
+        if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 3) {
+            return 'card';
+        }
+        if (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) !== 'radio' &&
+            (((_c = spec.viewSpec.oneOfParams) === null || _c === void 0 ? void 0 : _c.toggler) === 'select' ||
                 options.length > 3 ||
-                _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH));
+                _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
+            return 'select';
+        }
+        return 'radio';
     }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
     const togglerInput = React.useMemo(() => {
-        if (selectToggler) {
+        if (togglerType === 'card') {
+            return (React.createElement("div", { className: b('card') }, options.map(({ value }) => {
+                var _a, _b, _c;
+                const onClick = () => {
+                    onOneOfChange([value]);
+                };
+                return (React.createElement(TogglerCard, { title: ((_a = specProperties[value]) === null || _a === void 0 ? void 0 : _a.viewSpec.layoutTitle) || '', disabled: spec.viewSpec.disabled, text: ((_b = spec.description) === null || _b === void 0 ? void 0 : _b[value]) || '', description: (_c = specProperties[value]) === null || _c === void 0 ? void 0 : _c.viewSpec.layoutDescription, onClick: onClick, selected: oneOfValue === value, key: value }));
+            })));
+        }
+        if (togglerType === 'select') {
             return (React.createElement(Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
         }
         return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
-    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
+    }, [
+        togglerType,
+        oneOfValue,
+        spec.viewSpec.disabled,
+        name,
+        options,
+        onOneOfChange,
+        specProperties,
+    ]);
     const toggler = React.useMemo(() => {
         if (Layout) {
             return (React.createElement("div", { className: b('toggler', {
-                    radio: !selectToggler,
+                    radio: togglerType === 'radio',
+                    card: togglerType === 'card',
                 }) },
                 React.createElement(Layout, Object.assign({}, props), togglerInput)));
         }
         return React.createElement("div", null, togglerInput);
-    }, [Layout, togglerInput, selectToggler, props]);
+    }, [Layout, togglerInput, togglerType, props]);
     return { oneOfValue, specProperties, toggler, togglerInput };
 };

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

@@ -31,7 +31,7 @@ export const isNotEmptyValue = (value, spec) => {
     return true;
 };
 export const prepareSpec = (spec, parseJsonDefaultValue) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (_.isObjectLike(spec)) {
         const result = _.cloneDeep(spec);
         if (_.isString(result.type)) {
@@ -43,7 +43,7 @@ export const prepareSpec = (spec, parseJsonDefaultValue) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_e) {
+                catch (_j) {
                     _defaultValue = undefined;
                 }
             }
@@ -65,7 +65,14 @@ export const prepareSpec = (spec, parseJsonDefaultValue) => {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
         if (_.isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
-            result.viewSpec.themeLabel = result.viewSpec.themeLabel.toLowerCase();
+            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)) {
+            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)) {
+            result.viewSpec.textContentParams.themeLabel =
+                result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
         if (_.isString(result.validator)) {
             result.validator = result.validator.toLowerCase();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",