@gravity-ui/dynamic-forms 2.4.0 → 2.6.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/ArrayBase/ArrayBase.js

@@ -27,19 +27,7 @@ const ArrayBase = ({ spec, name, arrayInput, input }) => {
     }, [spec.items, itemSpecCorrect]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
     const AddButton = react_1.default.useCallback(() => {
-        let onClick = () => {
-            var _a;
-            let item;
-            if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
-                if ((0, core_1.isArraySpec)(spec.items)) {
-                    item = { [core_1.OBJECT_ARRAY_FLAG]: true, [core_1.OBJECT_ARRAY_CNT]: 0 };
-                }
-                else if ((0, core_1.isObjectSpec)(spec.items)) {
-                    item = {};
-                }
-            }
-            arrayInput.onItemAdd(item);
-        };
+        let onClick = () => arrayInput.onItemAdd(undefined);
         let qa = `${name}-add-item`;
         let title = spec.viewSpec.itemLabel;
         if (!arrayInput.value && spec.defaultValue) {
@@ -57,10 +45,10 @@ const ArrayBase = ({ spec, name, arrayInput, input }) => {
         input,
         name,
         spec.defaultValue,
-        spec.items,
         spec.viewSpec.disabled,
         spec.viewSpec.itemLabel,
         spec.viewSpec.layoutTitle,
+        spec.viewSpec.addButtonPosition,
     ]);
     const items = react_1.default.useMemo(() => keys.map((key, idx) => {
         var _a;

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

@@ -1,3 +1,6 @@
 .df-multi-select {
   max-width: 305px;
+}
+.df-multi-select__meta-text {
+  display: block;
 }

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

@@ -8,21 +8,34 @@ const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('multi-select');
 const MultiSelect = ({ name, input, spec }) => {
-    var _a;
+    var _a, _b, _c, _d;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = react_1.default.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
     const options = react_1.default.useMemo(() => {
         var _a;
         return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
-            var _a;
+            var _a, _b, _c, _d, _e;
             return ({
                 id,
                 value: id,
-                content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (react_1.default.createElement("div", { key: id },
+                    react_1.default.createElement(uikit_1.Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                    react_1.default.createElement(uikit_1.Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
                 key: id,
             });
         });
-    }, [spec.enum, spec.description]);
+    }, [spec.enum, spec.description, (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta]);
+    const renderOption = react_1.default.useCallback((option) => {
+        return react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.value);
+    }, []);
+    const getOptionHeight = react_1.default.useCallback(() => {
+        var _a;
+        if ((_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) {
+            return 44;
+        }
+        return 28;
+    }, [(_c = spec.viewSpec.selectParams) === null || _c === void 0 ? void 0 : _c.meta]);
     const handleToggle = react_1.default.useCallback((open) => {
         if (open) {
             onFocus();
@@ -33,6 +46,6 @@ const MultiSelect = ({ name, input, spec }) => {
     }, [onFocus, onBlur]);
     const _value = react_1.default.useMemo(() => (0, core_1.transformArrOut)(value), [value]);
     const handleChange = react_1.default.useCallback((value) => onChange((0, core_1.transformArrIn)(value)), [onChange]);
-    return (react_1.default.createElement(uikit_1.Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true, qa: name }));
+    return (react_1.default.createElement(uikit_1.Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, renderOption: renderOption, getOptionHeight: getOptionHeight, multiple: true, qa: name }));
 };
 exports.MultiSelect = MultiSelect;

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

@@ -0,0 +1,11 @@
+.df-object-base__content_inline {
+  display: flex;
+}
+.df-object-base__content_inline > .df-use-search {
+  width: 150px;
+  margin-bottom: 0;
+  margin-right: 8px;
+}
+.df-object-base__content_inline > .df-use-search:last-child {
+  margin-right: 0;
+}

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

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectBase = void 0;
+exports.ObjectInline = exports.ObjectBase = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('object-base');
 const ObjectBase = (_a) => {
-    var { spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "name", "Layout"]);
+    var { inline, spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["inline", "spec", "name", "Layout"]);
     const addBtn = react_1.default.useMemo(() => {
         var _a;
         return (react_1.default.createElement(uikit_1.Button, { onClick: () => restProps.input.onChange((0, core_1.transformArrIn)(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled, qa: `${name}-init-obj` },
@@ -17,25 +19,30 @@ const ObjectBase = (_a) => {
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
     const content = react_1.default.useMemo(() => {
-        if (!lodash_1.default.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
+        if (!spec.properties ||
+            !lodash_1.default.isObjectLike(spec.properties) ||
+            !Object.keys(spec.properties || {}).length) {
             return null;
         }
-        if (!restProps.input.value) {
+        if (!inline && !restProps.input.value) {
             return addBtn;
         }
-        const specProperties = Object.assign({}, spec.properties);
-        return (react_1.default.createElement(react_1.default.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
+        const specProperties = inline
+            ? (0, utils_1.filterPropertiesForObjectInline)(spec.properties)
+            : spec.properties;
+        return (react_1.default.createElement("div", { className: b('content', { inline }) }, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
             var _a;
             return specProperties[property] ? (react_1.default.createElement(core_1.Controller, { value: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, parentOnUnmount: restProps.input.parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
         })));
     }, [
         spec.properties,
         spec.viewSpec.order,
-        name,
         restProps.input.value,
+        restProps.input.parentOnUnmount,
+        inline,
         addBtn,
+        name,
         parentOnChange,
-        restProps.input.parentOnUnmount,
     ]);
     if (!Layout || !content) {
         return content;
@@ -43,3 +50,7 @@ const ObjectBase = (_a) => {
     return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
 };
 exports.ObjectBase = ObjectBase;
+const ObjectInline = (props) => {
+    return react_1.default.createElement(exports.ObjectBase, Object.assign({}, props, { inline: true }));
+};
+exports.ObjectInline = ObjectInline;

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

@@ -1,3 +1,6 @@
 .df-select {
   max-width: 305px;
+}
+.df-select__meta-text {
+  display: block;
 }

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

@@ -7,21 +7,34 @@ const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('select');
 const Select = ({ name, input, spec }) => {
-    var _a;
+    var _a, _b, _c, _d;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = react_1.default.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
     const options = react_1.default.useMemo(() => {
         var _a;
         return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
-            var _a;
+            var _a, _b, _c, _d, _e;
             return ({
                 id,
                 value: id,
-                content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (react_1.default.createElement("div", { key: id },
+                    react_1.default.createElement(uikit_1.Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                    react_1.default.createElement(uikit_1.Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
                 key: id,
             });
         });
-    }, [spec.enum, spec.description]);
+    }, [spec.enum, spec.description, (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta]);
+    const renderOption = react_1.default.useCallback((option) => {
+        return react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.value);
+    }, []);
+    const getOptionHeight = react_1.default.useCallback(() => {
+        var _a;
+        if ((_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) {
+            return 44;
+        }
+        return 28;
+    }, [(_c = spec.viewSpec.selectParams) === null || _c === void 0 ? void 0 : _c.meta]);
     const handleChange = react_1.default.useCallback((v) => onChange(v[0]), [onChange]);
     const handleToggle = react_1.default.useCallback((open) => {
         if (open) {
@@ -31,6 +44,6 @@ const Select = ({ name, input, spec }) => {
             onBlur();
         }
     }, [onFocus, onBlur]);
-    return (react_1.default.createElement(uikit_1.Select, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, qa: name }));
+    return (react_1.default.createElement(uikit_1.Select, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, getOptionHeight: getOptionHeight, renderOption: renderOption, qa: name }));
 };
 exports.Select = Select;

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/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/Views/ObjectBaseView/ObjectBaseView.css

@@ -0,0 +1,11 @@
+.df-object-base-view__content_inline {
+  display: flex;
+}
+.df-object-base-view__content_inline > div {
+  flex: auto;
+  margin-right: 8px;
+  margin-bottom: 0;
+}
+.df-object-base-view__content_inline > div:last-child {
+  margin-right: 0;
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectInlineView = exports.ObjectBaseView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('object-base-view');
+const ObjectBaseView = (_a) => {
+    var { inline, spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["inline", "spec", "name", "Layout"]);
+    if (!spec.properties || !lodash_1.default.isObjectLike(spec.properties)) {
+        return null;
+    }
+    const specProperties = inline
+        ? (0, utils_1.filterPropertiesForObjectInline)(spec.properties)
+        : spec.properties;
+    const content = (react_1.default.createElement("div", { className: b('content', { inline }) }, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => specProperties[property] ? (react_1.default.createElement(core_1.ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, key: `${name ? name + '.' : ''}${property}` })) : null)));
+    if (!Layout) {
+        return content;
+    }
+    return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+};
+exports.ObjectBaseView = ObjectBaseView;
+const ObjectInlineView = (props) => {
+    return react_1.default.createElement(exports.ObjectBaseView, Object.assign({}, props, { inline: true }));
+};
+exports.ObjectInlineView = ObjectInlineView;

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

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

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

@@ -8,6 +8,7 @@ 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);

package/build/cjs/lib/kit/constants/config.js

@@ -66,6 +66,7 @@ exports.dynamicConfig = {
             object_value: { Component: components_1.ObjectValueInput, independent: true },
             multi_oneof: { Component: components_1.MultiOneOf, independent: true },
             multi_oneof_flat: { Component: components_1.MultiOneOfFlat, independent: true },
+            inline: { Component: components_1.ObjectInline, independent: true },
         },
         layouts: {
             row: components_1.Row,
@@ -167,6 +168,7 @@ exports.dynamicCardConfig = {
             object_value: { Component: components_1.ObjectValueInput, independent: true },
             multi_oneof: { Component: components_1.MultiOneOf, independent: true },
             multi_oneof_flat: { Component: components_1.MultiOneOfFlat, independent: true },
+            inline: { Component: components_1.ObjectInline, independent: true },
         },
         layouts: {
             row: components_1.Row2,
@@ -261,6 +263,7 @@ exports.dynamicViewConfig = {
             object_value: { Component: components_1.ObjectValueInputView, independent: true },
             multi_oneof: { Component: components_1.MultiOneOfView, independent: true },
             multi_oneof_flat: { Component: components_1.MultiOneOfFlatView, independent: true },
+            inline: { Component: components_1.ObjectInlineView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow,
@@ -346,6 +349,7 @@ exports.dynamicViewCardConfig = {
             object_value: { Component: components_1.ObjectValueInputView, independent: true },
             multi_oneof: { Component: components_1.MultiOneOfView, independent: true },
             multi_oneof_flat: { Component: components_1.MultiOneOfFlatView, independent: true },
+            inline: { Component: components_1.ObjectInlineView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow2,

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/cjs/lib/kit/utils/index.js

@@ -4,3 +4,4 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./cn"), exports);
 tslib_1.__exportStar(require("./common"), exports);
 tslib_1.__exportStar(require("./bigIntMath"), exports);
+tslib_1.__exportStar(require("./objectInline"), exports);

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterPropertiesForObjectInline = void 0;
+const core_1 = require("../../core");
+const filterPropertiesForObjectInline = (properties) => {
+    return Object.fromEntries(Object.entries(properties).filter(([, propSpec]) => (0, core_1.isStringSpec)(propSpec) || (0, core_1.isNumberSpec)(propSpec)));
+};
+exports.filterPropertiesForObjectInline = filterPropertiesForObjectInline;

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,11 @@ export interface ArraySpec<LinkType = any> {
         link?: LinkType;
         placeholder?: string;
         addButtonPosition?: 'down' | 'right';
+        hideInput?: boolean;
+        selectParams?: {
+            filterPlaceholder?: string;
+            meta?: Record<string, string>;
+        };
     };
 }
 export interface BooleanSpec<LinkType = any> {
@@ -42,6 +48,7 @@ export interface BooleanSpec<LinkType = any> {
         layoutDescription?: string;
         layoutOpen?: boolean;
         link?: LinkType;
+        hideInput?: boolean;
     };
 }
 export interface NumberSpec<LinkType = any> {
@@ -62,6 +69,7 @@ export interface NumberSpec<LinkType = any> {
         link?: LinkType;
         placeholder?: string;
         copy?: boolean;
+        hideInput?: boolean;
     };
 }
 export interface ObjectSpec<LinkType = any> {
@@ -84,6 +92,7 @@ export interface ObjectSpec<LinkType = any> {
             toggler?: 'select' | 'radio' | 'card';
         };
         placeholder?: string;
+        hideInput?: boolean;
     };
 }
 export interface StringSpec<LinkType = any> {
@@ -119,13 +128,23 @@ 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;
             ignoreText?: boolean;
         };
         copy?: boolean;
+        selectParams?: {
+            filterPlaceholder?: string;
+            meta?: Record<string, string>;
+        };
     };
 }
 export type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Button, Icon, Label } from '@gravity-ui/uikit';
 import _ from 'lodash';
-import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isCorrectSpec, isObjectSpec, transformArrIn, } from '../../../../core';
+import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isCorrectSpec, transformArrIn, } from '../../../../core';
 import { block } from '../../../utils';
 import './ArrayBase.css';
 const b = block('array-base');
@@ -24,19 +24,7 @@ export const ArrayBase = ({ spec, name, arrayInput, input }) => {
     }, [spec.items, itemSpecCorrect]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
     const AddButton = React.useCallback(() => {
-        let onClick = () => {
-            var _a;
-            let item;
-            if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
-                if (isArraySpec(spec.items)) {
-                    item = { [OBJECT_ARRAY_FLAG]: true, [OBJECT_ARRAY_CNT]: 0 };
-                }
-                else if (isObjectSpec(spec.items)) {
-                    item = {};
-                }
-            }
-            arrayInput.onItemAdd(item);
-        };
+        let onClick = () => arrayInput.onItemAdd(undefined);
         let qa = `${name}-add-item`;
         let title = spec.viewSpec.itemLabel;
         if (!arrayInput.value && spec.defaultValue) {
@@ -54,10 +42,10 @@ export const ArrayBase = ({ spec, name, arrayInput, input }) => {
         input,
         name,
         spec.defaultValue,
-        spec.items,
         spec.viewSpec.disabled,
         spec.viewSpec.itemLabel,
         spec.viewSpec.layoutTitle,
+        spec.viewSpec.addButtonPosition,
     ]);
     const items = React.useMemo(() => keys.map((key, idx) => {
         var _a;

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

@@ -1,3 +1,6 @@
 .df-multi-select {
   max-width: 305px;
+}
+.df-multi-select__meta-text {
+  display: block;
 }

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

@@ -1,25 +1,38 @@
 import React from 'react';
-import { Select } from '@gravity-ui/uikit';
+import { Select, Text } from '@gravity-ui/uikit';
 import { transformArrIn, transformArrOut } from '../../../../core';
 import { block } from '../../../utils';
 import './MultiSelect.css';
 const b = block('multi-select');
 export const MultiSelect = ({ name, input, spec }) => {
-    var _a;
+    var _a, _b, _c, _d;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = React.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
     const options = React.useMemo(() => {
         var _a;
         return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
-            var _a;
+            var _a, _b, _c, _d, _e;
             return ({
                 id,
                 value: id,
-                content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (React.createElement("div", { key: id },
+                    React.createElement(Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                    React.createElement(Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
                 key: id,
             });
         });
-    }, [spec.enum, spec.description]);
+    }, [spec.enum, spec.description, (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta]);
+    const renderOption = React.useCallback((option) => {
+        return React.createElement(React.Fragment, { key: option.value }, option.content || option.value);
+    }, []);
+    const getOptionHeight = React.useCallback(() => {
+        var _a;
+        if ((_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) {
+            return 44;
+        }
+        return 28;
+    }, [(_c = spec.viewSpec.selectParams) === null || _c === void 0 ? void 0 : _c.meta]);
     const handleToggle = React.useCallback((open) => {
         if (open) {
             onFocus();
@@ -30,5 +43,5 @@ export const MultiSelect = ({ name, input, spec }) => {
     }, [onFocus, onBlur]);
     const _value = React.useMemo(() => transformArrOut(value), [value]);
     const handleChange = React.useCallback((value) => onChange(transformArrIn(value)), [onChange]);
-    return (React.createElement(Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true, qa: name }));
+    return (React.createElement(Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, renderOption: renderOption, getOptionHeight: getOptionHeight, multiple: true, qa: name }));
 };

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

@@ -0,0 +1,11 @@
+.df-object-base__content_inline {
+  display: flex;
+}
+.df-object-base__content_inline > .df-use-search {
+  width: 150px;
+  margin-bottom: 0;
+  margin-right: 8px;
+}
+.df-object-base__content_inline > .df-use-search:last-child {
+  margin-right: 0;
+}

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

@@ -1,2 +1,8 @@
-import { ObjectIndependentInput } from '../../../../core';
-export declare const ObjectBase: ObjectIndependentInput;
+import React from 'react';
+import { ObjectIndependentInput, ObjectIndependentInputProps } from '../../../../core';
+import './ObjectBase.css';
+export interface ObjectBaseProps extends ObjectIndependentInputProps {
+    inline?: boolean;
+}
+export declare const ObjectBase: React.FC<ObjectBaseProps>;
+export declare const ObjectInline: ObjectIndependentInput;

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

@@ -4,8 +4,11 @@ import { Plus } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { Controller, transformArrIn, } from '../../../../core';
+import { block, filterPropertiesForObjectInline } from '../../../utils';
+import './ObjectBase.css';
+const b = block('object-base');
 export const ObjectBase = (_a) => {
-    var { spec, name, Layout } = _a, restProps = __rest(_a, ["spec", "name", "Layout"]);
+    var { inline, spec, name, Layout } = _a, restProps = __rest(_a, ["inline", "spec", "name", "Layout"]);
     const addBtn = React.useMemo(() => {
         var _a;
         return (React.createElement(Button, { onClick: () => restProps.input.onChange(transformArrIn(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled, qa: `${name}-init-obj` },
@@ -14,28 +17,36 @@ export const ObjectBase = (_a) => {
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
     const content = React.useMemo(() => {
-        if (!_.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
+        if (!spec.properties ||
+            !_.isObjectLike(spec.properties) ||
+            !Object.keys(spec.properties || {}).length) {
             return null;
         }
-        if (!restProps.input.value) {
+        if (!inline && !restProps.input.value) {
             return addBtn;
         }
-        const specProperties = Object.assign({}, spec.properties);
-        return (React.createElement(React.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
+        const specProperties = inline
+            ? filterPropertiesForObjectInline(spec.properties)
+            : spec.properties;
+        return (React.createElement("div", { className: b('content', { inline }) }, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
             var _a;
             return specProperties[property] ? (React.createElement(Controller, { value: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, parentOnUnmount: restProps.input.parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
         })));
     }, [
         spec.properties,
         spec.viewSpec.order,
-        name,
         restProps.input.value,
+        restProps.input.parentOnUnmount,
+        inline,
         addBtn,
+        name,
         parentOnChange,
-        restProps.input.parentOnUnmount,
     ]);
     if (!Layout || !content) {
         return content;
     }
     return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
 };
+export const ObjectInline = (props) => {
+    return React.createElement(ObjectBase, Object.assign({}, props, { inline: true }));
+};

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

@@ -1,3 +1,6 @@
 .df-select {
   max-width: 305px;
+}
+.df-select__meta-text {
+  display: block;
 }

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

@@ -1,24 +1,37 @@
 import React from 'react';
-import { Select as SelectBase } from '@gravity-ui/uikit';
+import { Select as SelectBase, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './Select.css';
 const b = block('select');
 export const Select = ({ name, input, spec }) => {
-    var _a;
+    var _a, _b, _c, _d;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = React.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
     const options = React.useMemo(() => {
         var _a;
         return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
-            var _a;
+            var _a, _b, _c, _d, _e;
             return ({
                 id,
                 value: id,
-                content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (React.createElement("div", { key: id },
+                    React.createElement(Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                    React.createElement(Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
                 key: id,
             });
         });
-    }, [spec.enum, spec.description]);
+    }, [spec.enum, spec.description, (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta]);
+    const renderOption = React.useCallback((option) => {
+        return React.createElement(React.Fragment, { key: option.value }, option.content || option.value);
+    }, []);
+    const getOptionHeight = React.useCallback(() => {
+        var _a;
+        if ((_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) {
+            return 44;
+        }
+        return 28;
+    }, [(_c = spec.viewSpec.selectParams) === null || _c === void 0 ? void 0 : _c.meta]);
     const handleChange = React.useCallback((v) => onChange(v[0]), [onChange]);
     const handleToggle = React.useCallback((open) => {
         if (open) {
@@ -28,5 +41,5 @@ export const Select = ({ name, input, spec }) => {
             onBlur();
         }
     }, [onFocus, onBlur]);
-    return (React.createElement(SelectBase, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, qa: name }));
+    return (React.createElement(SelectBase, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, getOptionHeight: getOptionHeight, renderOption: renderOption, qa: name }));
 };

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/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/Views/ObjectBaseView/ObjectBaseView.css

@@ -0,0 +1,11 @@
+.df-object-base-view__content_inline {
+  display: flex;
+}
+.df-object-base-view__content_inline > div {
+  flex: auto;
+  margin-right: 8px;
+  margin-bottom: 0;
+}
+.df-object-base-view__content_inline > div:last-child {
+  margin-right: 0;
+}

package/build/esm/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ObjectIndependentView, ObjectIndependentViewProps } from '../../../../core';
+import './ObjectBaseView.css';
+export interface ObjectBaseViewProps extends ObjectIndependentViewProps {
+    inline?: boolean;
+}
+export declare const ObjectBaseView: React.FC<ObjectBaseViewProps>;
+export declare const ObjectInlineView: ObjectIndependentView;

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

@@ -0,0 +1,24 @@
+import { __rest } from "tslib";
+import React from 'react';
+import _ from 'lodash';
+import { ViewController } from '../../../../core';
+import { block, filterPropertiesForObjectInline } from '../../../utils';
+import './ObjectBaseView.css';
+const b = block('object-base-view');
+export const ObjectBaseView = (_a) => {
+    var { inline, spec, name, Layout } = _a, restProps = __rest(_a, ["inline", "spec", "name", "Layout"]);
+    if (!spec.properties || !_.isObjectLike(spec.properties)) {
+        return null;
+    }
+    const specProperties = inline
+        ? filterPropertiesForObjectInline(spec.properties)
+        : spec.properties;
+    const content = (React.createElement("div", { className: b('content', { inline }) }, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => specProperties[property] ? (React.createElement(ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, key: `${name ? name + '.' : ''}${property}` })) : null)));
+    if (!Layout) {
+        return content;
+    }
+    return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+};
+export const ObjectInlineView = (props) => {
+    return React.createElement(ObjectBaseView, Object.assign({}, props, { inline: true }));
+};

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

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

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

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

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

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

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

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

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfCard, OneOfCardView, OneOfFlat, OneOfFlatView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfCard, OneOfCardView, OneOfFlat, OneOfFlatView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -63,6 +63,7 @@ export const dynamicConfig = {
             object_value: { Component: ObjectValueInput, independent: true },
             multi_oneof: { Component: MultiOneOf, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
+            inline: { Component: ObjectInline, independent: true },
         },
         layouts: {
             row: Row,
@@ -164,6 +165,7 @@ export const dynamicCardConfig = {
             object_value: { Component: ObjectValueInput, independent: true },
             multi_oneof: { Component: MultiOneOf, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
+            inline: { Component: ObjectInline, independent: true },
         },
         layouts: {
             row: Row2,
@@ -258,6 +260,7 @@ export const dynamicViewConfig = {
             object_value: { Component: ObjectValueInputView, independent: true },
             multi_oneof: { Component: MultiOneOfView, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
+            inline: { Component: ObjectInlineView, independent: true },
         },
         layouts: {
             row: ViewRow,
@@ -343,6 +346,7 @@ export const dynamicViewCardConfig = {
             object_value: { Component: ObjectValueInputView, independent: true },
             multi_oneof: { Component: MultiOneOfView, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
+            inline: { Component: ObjectInlineView, independent: true },
         },
         layouts: {
             row: ViewRow2,

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/build/esm/lib/kit/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './cn';
 export * from './common';
 export * from './bigIntMath';
+export * from './objectInline';

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

@@ -1,3 +1,4 @@
 export * from './cn';
 export * from './common';
 export * from './bigIntMath';
+export * from './objectInline';

package/build/esm/lib/kit/utils/objectInline.d.ts

@@ -0,0 +1,4 @@
+import { Spec } from '../../core';
+export declare const filterPropertiesForObjectInline: (properties: Record<string, Spec>) => {
+    [k: string]: Spec;
+};

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

@@ -0,0 +1,4 @@
+import { isNumberSpec, isStringSpec } from '../../core';
+export const filterPropertiesForObjectInline = (properties) => {
+    return Object.fromEntries(Object.entries(properties).filter(([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec)));
+};

package/package.json

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

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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectBaseView = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const core_1 = require("../../../core");
-const ObjectBaseView = (_a) => {
-    var { spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "name", "Layout"]);
-    if (!lodash_1.default.isObjectLike(spec.properties)) {
-        return null;
-    }
-    const specProperties = Object.assign({}, spec.properties);
-    const content = (react_1.default.createElement(react_1.default.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => specProperties[property] ? (react_1.default.createElement(core_1.ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, key: `${name ? name + '.' : ''}${property}` })) : null)));
-    if (!Layout) {
-        return content;
-    }
-    return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
-};
-exports.ObjectBaseView = ObjectBaseView;

package/build/esm/lib/kit/components/Views/ObjectBaseView.d.ts

@@ -1,2 +0,0 @@
-import { ObjectIndependentView } from '../../../core';
-export declare const ObjectBaseView: ObjectIndependentView;

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

@@ -1,16 +0,0 @@
-import { __rest } from "tslib";
-import React from 'react';
-import _ from 'lodash';
-import { ViewController } from '../../../core';
-export const ObjectBaseView = (_a) => {
-    var { spec, name, Layout } = _a, restProps = __rest(_a, ["spec", "name", "Layout"]);
-    if (!_.isObjectLike(spec.properties)) {
-        return null;
-    }
-    const specProperties = Object.assign({}, spec.properties);
-    const content = (React.createElement(React.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => specProperties[property] ? (React.createElement(ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, key: `${name ? name + '.' : ''}${property}` })) : null)));
-    if (!Layout) {
-        return content;
-    }
-    return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
-};