@gravity-ui/dynamic-forms 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [1.7.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.6.2...v1.7.0) (2023-05-22)
+
+
+### Features
+
+* add flat oneof input, add oneof params to object spec ([#44](https://github.com/gravity-ui/dynamic-forms/issues/44)) ([25e9a35](https://github.com/gravity-ui/dynamic-forms/commit/25e9a3588b359cc251e5fdc19a1b51c5a614abb8))
+
+
+### Bug Fixes
+
+* initial value ([#39](https://github.com/gravity-ui/dynamic-forms/issues/39)) ([ce52d65](https://github.com/gravity-ui/dynamic-forms/commit/ce52d6531b8dbabd3462dfd430b947b99e00b433))
+
+
+### Performance Improvements
+
+* remove strict mode wrapper and react version check ([#43](https://github.com/gravity-ui/dynamic-forms/issues/43)) ([ec823bf](https://github.com/gravity-ui/dynamic-forms/commit/ec823bf56d4bec192649b8cd2c3da16def094bfb))
+
+## [1.6.2](https://github.com/gravity-ui/dynamic-forms/compare/v1.6.1...v1.6.2) (2023-05-16)
+
+
+### Bug Fixes
+
+* add css rule for errors ([#41](https://github.com/gravity-ui/dynamic-forms/issues/41)) ([a6661bc](https://github.com/gravity-ui/dynamic-forms/commit/a6661bcd3a86a29ec3b457bccbf6d8f46aaf0408))
+* add number value transform ([#40](https://github.com/gravity-ui/dynamic-forms/issues/40)) ([d422d90](https://github.com/gravity-ui/dynamic-forms/commit/d422d901e675c6f7014a07f9bfae972fcd555b76))
+
 ## [1.6.1](https://github.com/gravity-ui/dynamic-forms/compare/v1.6.0...v1.6.1) (2023-05-02)
 
 

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

@@ -5,14 +5,15 @@ const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../helpers");
 const hooks_1 = require("./hooks");
-const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount, }) => {
+const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) => {
     const { tools, __mirror } = (0, hooks_1.useDynamicFormsCtx)();
     const { inputEntity, Layout } = (0, hooks_1.useComponents)(spec);
     const render = (0, hooks_1.useRender)({ name, spec, inputEntity, Layout });
     const validate = (0, hooks_1.useValidate)(spec);
     const renderProps = (0, hooks_1.useField)({
         name,
-        initialValue,
+        initialValue: lodash_1.default.get(tools.initialValue, name),
+        value,
         spec,
         validate,
         tools,

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

@@ -36,7 +36,7 @@ const DynamicField = ({ name, spec, config, Monaco, search, __mirror, }) => {
     if (correctParams) {
         return (react_1.default.createElement(DynamicFormsCtx.Provider, { value: context },
             react_1.default.createElement(SearchContext.Provider, { value: searchContext },
-                react_1.default.createElement(Controller_1.Controller, { spec: spec, name: name, parentOnChange: null, parentOnUnmount: null, initialValue: lodash_1.default.get(tools.initialValue, name) }),
+                react_1.default.createElement(Controller_1.Controller, { spec: spec, name: name, parentOnChange: null, parentOnUnmount: null, value: lodash_1.default.get(store.values, name) }),
                 watcher)));
     }
     return null;

package/build/cjs/lib/core/components/Form/hooks/useField.js

@@ -7,7 +7,7 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../../helpers");
 const constants_1 = require("../constants");
 const utils_1 = require("../utils");
-const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
+const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
     const firstRenderRef = react_1.default.useRef(true);
     const validate = react_1.default.useCallback((value) => {
         if (value === constants_1.REMOVED_ITEM) {
@@ -16,7 +16,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
         return propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate((0, utils_1.transformArrOut)(value));
     }, [propsValidate]);
     const [state, setState] = react_1.default.useState(() => {
-        let value = lodash_1.default.cloneDeep(initialValue);
+        let value = lodash_1.default.cloneDeep(externalValue);
         if (lodash_1.default.isNil(value)) {
             if (spec.defaultValue) {
                 value = (0, utils_1.transformArrIn)(spec.defaultValue);
@@ -33,17 +33,19 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
             }
         }
         const error = validate === null || validate === void 0 ? void 0 : validate(value);
+        const dirty = !lodash_1.default.isEqual(value, initialValue);
+        const pristine = value === initialValue;
         return {
             active: false,
-            dirty: false,
+            dirty,
             error,
             invalid: Boolean(error),
-            modified: false,
-            pristine: false,
-            touched: false,
+            modified: dirty || !pristine,
+            pristine,
+            touched: dirty || !pristine,
             valid: !error,
             value,
-            visited: false,
+            visited: dirty || !pristine,
             childErrors: {},
         };
     });
@@ -52,7 +54,10 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
             setState((state) => {
                 const _value = lodash_1.default.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
                 const error = validate === null || validate === void 0 ? void 0 : validate(_value);
-                const value = (0, utils_1.transformArrIn)(_value);
+                let value = (0, utils_1.transformArrIn)(_value);
+                if ((0, helpers_1.isNumberSpec)(spec) && value && !error) {
+                    value = Number(value);
+                }
                 let newChildErrors = Object.assign({}, state.childErrors);
                 if (childErrors) {
                     const nearestChildName = lodash_1.default.keys(childErrors).sort((a, b) => a.length - b.length)[0];
@@ -73,7 +78,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
             }
         };
         return { onChange, onDrop };
-    }, [initialValue, setState, name, validate]);
+    }, [initialValue, setState, name, validate, spec]);
     const onBlur = react_1.default.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
     }, [setState]);
@@ -126,16 +131,13 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
         onDrop,
     ]);
     react_1.default.useEffect(() => {
-        if (!firstRenderRef.current || !lodash_1.default.isEqual(initialValue, state.value) || state.error) {
+        if (!firstRenderRef.current || !lodash_1.default.isEqual(externalValue, state.value) || state.error) {
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            if ((0, helpers_1.isReact18OrMore)()) {
-                firstRenderRef.current = true;
-            }
             (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
         };
     }, []);

package/build/cjs/lib/core/components/Form/hooks/useStore.js

@@ -5,19 +5,21 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_final_form_1 = require("react-final-form");
-const helpers_1 = require("../../../helpers");
 const utils_1 = require("../utils");
 const useStore = (name) => {
     const form = (0, react_final_form_1.useForm)();
     const firstRenderRef = react_1.default.useRef(true);
     const [store, setStore] = react_1.default.useState(() => {
-        const initialValue = (0, utils_1.transformArrIn)({
+        const values = (0, utils_1.transformArrIn)({
             [name]: lodash_1.default.get(form.getState().values, name),
         });
+        const initialValue = (0, utils_1.transformArrIn)({
+            [name]: lodash_1.default.get(form.getState().initialValues, name),
+        });
         return {
             name,
-            initialValue,
-            values: lodash_1.default.cloneDeep(initialValue),
+            initialValue: lodash_1.default.cloneDeep(initialValue),
+            values: lodash_1.default.cloneDeep(values),
             errors: {},
         };
     });
@@ -30,24 +32,22 @@ const useStore = (name) => {
     }), [store.initialValue, setStore, submitFailed]);
     react_1.default.useEffect(() => {
         if (!firstRenderRef.current) {
-            const initialValue = (0, utils_1.transformArrIn)({
+            const values = (0, utils_1.transformArrIn)({
                 [name]: lodash_1.default.get(form.getState().values, name),
             });
+            const initialValue = (0, utils_1.transformArrIn)({
+                [name]: lodash_1.default.get(form.getState().initialValues, name),
+            });
             setStore({
                 name: name,
-                initialValue,
-                values: lodash_1.default.cloneDeep(initialValue),
+                initialValue: lodash_1.default.cloneDeep(initialValue),
+                values: lodash_1.default.cloneDeep(values),
                 errors: {},
             });
         }
     }, [name]);
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
-        return () => {
-            if ((0, helpers_1.isReact18OrMore)()) {
-                firstRenderRef.current = true;
-            }
-        };
     }, []);
     return { tools, store };
 };

package/build/cjs/lib/core/helpers.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isReact18OrMore = exports.isStringSpec = exports.isObjectSpec = exports.isNumberSpec = exports.isBooleanSpec = exports.isArraySpec = exports.isCorrectSpec = void 0;
+exports.isStringSpec = exports.isObjectSpec = exports.isNumberSpec = exports.isBooleanSpec = exports.isArraySpec = exports.isCorrectSpec = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const constants_1 = require("./constants");
 const isCorrectSpec = (candidate) => lodash_1.default.isObjectLike(candidate) &&
@@ -24,5 +23,3 @@ const isObjectSpec = (candidate) => (candidate === null || candidate === void 0
 exports.isObjectSpec = isObjectSpec;
 const isStringSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === constants_1.SpecTypes.String;
 exports.isStringSpec = isStringSpec;
-const isReact18OrMore = () => Number(react_1.default.version.split('.')[0]) >= 18;
-exports.isReact18OrMore = isReact18OrMore;

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

@@ -38,13 +38,14 @@
 .df-card__header-left {
   display: flex;
   align-items: center;
+  flex-grow: 1;
 }
 .df-card__header-right {
   display: flex;
   align-items: center;
 }
 .df-card__header-right > * {
-  margin-left: 5px;
+  margin-left: 10px;
 }
 .df-card__title {
   font-size: var(--yc-text-subheader-2-font-size);

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

@@ -12,6 +12,7 @@
 .df-error-wrapper_error .g-select:not(.df-error-wrapper-ignore) .g-select-control::before,
 .df-error-wrapper_error .g-select:hover:not(.df-error-wrapper-ignore) .g-select-control_open::before,
 .df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__control,
+.df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__content,
 .df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
   border-color: var(--yc-color-text-danger);
 }

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

@@ -46,7 +46,7 @@ const ArrayBase = ({ spec, name, arrayInput, input }) => {
         if (!itemSpec) {
             return null;
         }
-        return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
+        return (react_1.default.createElement(core_1.Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
     }), [keys.join(''), name, getItemSpec, parentOnChange, parentOnUnmount, input.value]);
     if (!itemSpecCorrect) {
         return null;

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

@@ -32,6 +32,6 @@ const CardOneOf = (props) => {
     }, [input.onChange, input.name]);
     const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(__1.Card, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
+    return (react_1.default.createElement(__1.Card, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };
 exports.CardOneOf = CardOneOf;

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

@@ -27,7 +27,7 @@ const ObjectBase = (_a) => {
         const specProperties = Object.assign({}, spec.properties);
         return (react_1.default.createElement(react_1.default.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
             var _a;
-            return specProperties[property] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
+            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: parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
         })));
     }, [
         spec.properties,

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

@@ -23,7 +23,7 @@ const ObjectValueInput = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (react_1.default.createElement(core_1.Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
     if (Layout) {
         return react_1.default.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -5,10 +5,10 @@
 .df-oneof:last-child > .df-group-indent {
   margin-bottom: 0;
 }
-.df-oneof .df-group-indent {
+.df-oneof_base .df-group-indent {
   all: unset;
 }
-.df-oneof .df-group-indent > .df-use-search {
+.df-oneof_base .df-group-indent > .df-use-search {
   padding-top: 11px;
   padding-left: 20px;
   margin-top: 4px;
@@ -16,12 +16,23 @@
   margin-left: 5px;
   border-left: 1px solid var(--yc-color-line-generic-accent);
 }
-.df-oneof .df-group-indent > .df-use-search:empty {
+.df-oneof_base .df-group-indent > .df-use-search:empty {
   display: none;
 }
-.df-oneof .df-group-indent > .df-use-search:last-child {
+.df-oneof_base .df-group-indent > .df-use-search:last-child {
   margin-bottom: 0;
 }
-.df-oneof .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
+.df-oneof_base .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
   margin-top: -10px;
+}
+.df-oneof_flat > .df-group-indent {
+  margin: 0;
+  border-left: none;
+  padding: 0;
+}
+.df-oneof_flat > .df-group-indent > .df-use-search {
+  margin-top: 15px;
+}
+.df-oneof_flat > .df-group-indent > .df-use-search:empty {
+  display: none;
 }

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OneOf = void 0;
+exports.OneOfFlat = exports.OneOf = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
@@ -9,7 +9,7 @@ const core_1 = require("../../../../core");
 const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('oneof');
-const OneOf = (props) => {
+const OneOfComponent = (props) => {
     var _a;
     const { oneOfValue, specProperties, toggler } = (0, hooks_1.useOneOf)({ props });
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => {
@@ -17,9 +17,14 @@ const OneOf = (props) => {
         props.input.onChange(value, childErrors);
     }, [props.input.onChange, props.input.name]);
     const parentOnUnmount = react_1.default.useCallback((childName) => props.input.onChange((currentValue) => currentValue, { [childName]: false }), [props.input.onChange]);
-    return (react_1.default.createElement("div", { className: b() },
+    return (react_1.default.createElement("div", { className: b({
+            base: !props.withoutIndent,
+            flat: props.withoutIndent,
+        }) },
         react_1.default.createElement("div", null, toggler),
         specProperties[oneOfValue] ? (react_1.default.createElement(__1.GroupIndent, null,
-            react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
+            react_1.default.createElement(core_1.Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
 };
-exports.OneOf = OneOf;
+exports.OneOf = OneOfComponent;
+const OneOfFlat = (props) => (react_1.default.createElement(OneOfComponent, Object.assign({}, props, { withoutIndent: true })));
+exports.OneOfFlat = OneOfFlat;

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

@@ -39,6 +39,6 @@ const OneOfCard = (props) => {
     }, [input.onChange, input.name]);
     const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
-    return (react_1.default.createElement(__1.AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
+    return (react_1.default.createElement(__1.AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };
 exports.OneOfCard = OneOfCard;

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

@@ -23,7 +23,7 @@ const Secret = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: childSpec, name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+    const content = (react_1.default.createElement(core_1.Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: childSpec, name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
     if (Layout) {
         return react_1.default.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -62,7 +62,7 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                         arr: (0, core_1.isArraySpec)(preparedEntitySpec),
                         obj: (0, core_1.isObjectSpec)(preparedEntitySpec),
                     }), key: `${name}.<${key}>.${property}` },
-                    react_1.default.createElement(core_1.Controller, { initialValue: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount })));
+                    react_1.default.createElement(core_1.Controller, { value: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount })));
             },
         }));
         return [idxColumn, ...columns, removeColumn];

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

@@ -24,7 +24,7 @@ const TextLink = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (react_1.default.createElement(core_1.Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
     if (Layout) {
         return react_1.default.createElement(Layout, Object.assign({}, props), content);
     }

package/build/cjs/lib/kit/components/Views/OneOfView/OneOfView.css

@@ -0,0 +1,8 @@
+.df-oneof-view .df-group-indent {
+  margin-bottom: 20px;
+}
+.df-oneof-view_flat > .df-group-indent {
+  margin: 0 0 20px;
+  border-left: none;
+  padding: 0;
+}

package/build/cjs/lib/kit/components/Views/{OneOfView.js → OneOfView/OneOfView.js}

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OneOfView = void 0;
+exports.OneOfFlatView = exports.OneOfView = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const __1 = require("../");
-const core_1 = require("../../../core");
-const OneOfView = (props) => {
+const __1 = require("../../");
+const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('oneof-view');
+const OneOfViewComponent = (props) => {
     const { value = {}, spec, Layout, name } = props;
     const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
     const valueKey = react_1.default.useMemo(() => Object.keys(value)[0], [value]);
@@ -26,9 +28,11 @@ const OneOfView = (props) => {
     if (!value || !Object.keys(value).length) {
         return null;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: b({ flat: props.withoutIndent }) },
         wrappedValue,
         specProperties[valueKey] ? (react_1.default.createElement(__1.GroupIndent, null,
             react_1.default.createElement(core_1.ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` }))) : null));
 };
-exports.OneOfView = OneOfView;
+exports.OneOfView = OneOfViewComponent;
+const OneOfFlatView = (props) => (react_1.default.createElement(OneOfViewComponent, Object.assign({}, props, { withoutIndent: true })));
+exports.OneOfFlatView = OneOfFlatView;

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

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

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

@@ -57,6 +57,7 @@ exports.dynamicConfig = {
     object: {
         inputs: {
             oneof: { Component: components_1.OneOf, independent: true },
+            oneof_flat: { Component: components_1.OneOfFlat, independent: true },
             card_oneof: { Component: components_1.CardOneOf, independent: true },
             secret: { Component: components_1.Secret, independent: true },
             base: { Component: components_1.ObjectBase, independent: true },
@@ -242,6 +243,7 @@ exports.dynamicViewConfig = {
     object: {
         views: {
             oneof: { Component: components_1.OneOfView, independent: true },
+            oneof_flat: { Component: components_1.OneOfFlatView, independent: true },
             card_oneof: { Component: components_1.CardOneOfView, independent: true },
             secret: undefined,
             base: { Component: components_1.ObjectBaseView, independent: true },

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

@@ -7,6 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const MAX_TAB_TITLE_LENGTH = 20;
 const useOneOf = ({ props, onTogglerChange }) => {
+    var _a;
     const { name, input, spec, Layout } = props;
     const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
     const [oneOfValue, setOneOfValue] = react_1.default.useState(() => {
@@ -39,12 +40,15 @@ const useOneOf = ({ props, onTogglerChange }) => {
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
     const togglerInput = react_1.default.useMemo(() => {
-        if (options.length > 3 ||
-            lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH)) {
+        var _a, _b;
+        if (((_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' ||
+                options.length > 3 ||
+                lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
             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)))));
-    }, [options, oneOfValue, onOneOfChange, name]);
+    }, [options, oneOfValue, onOneOfChange, name, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
     const toggler = react_1.default.useMemo(() => {
         if (Layout) {
             return react_1.default.createElement(Layout, Object.assign({}, props), togglerInput);

package/build/esm/lib/core/components/Form/Controller.d.ts

@@ -3,8 +3,8 @@ import { FieldValue, ValidateError } from './types';
 export interface ControllerProps<Value extends FieldValue, SpecType extends Spec> {
     spec: SpecType;
     name: string;
-    initialValue: Value;
+    value: Value;
     parentOnChange: ((childName: string, childValue: FieldValue, childErrors: Record<string, ValidateError>) => void) | null;
     parentOnUnmount: ((childName: string) => void) | null;
 }
-export declare const Controller: <Value extends FieldValue, SpecType extends Spec>({ spec, name, initialValue, parentOnChange, parentOnUnmount, }: ControllerProps<Value, SpecType>) => JSX.Element | null;
+export declare const Controller: <Value extends FieldValue, SpecType extends Spec>({ spec, name, value, parentOnChange, parentOnUnmount, }: ControllerProps<Value, SpecType>) => JSX.Element | null;

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

@@ -1,14 +1,15 @@
 import _ from 'lodash';
 import { isCorrectSpec } from '../../helpers';
 import { useComponents, useControllerMirror, useDynamicFormsCtx, useField, useRender, useSearch, useValidate, } from './hooks';
-export const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount, }) => {
+export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) => {
     const { tools, __mirror } = useDynamicFormsCtx();
     const { inputEntity, Layout } = useComponents(spec);
     const render = useRender({ name, spec, inputEntity, Layout });
     const validate = useValidate(spec);
     const renderProps = useField({
         name,
-        initialValue,
+        initialValue: _.get(tools.initialValue, name),
+        value,
         spec,
         validate,
         tools,

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

@@ -32,7 +32,7 @@ export const DynamicField = ({ name, spec, config, Monaco, search, __mirror, })
     if (correctParams) {
         return (React.createElement(DynamicFormsCtx.Provider, { value: context },
             React.createElement(SearchContext.Provider, { value: searchContext },
-                React.createElement(Controller, { spec: spec, name: name, parentOnChange: null, parentOnUnmount: null, initialValue: _.get(tools.initialValue, name) }),
+                React.createElement(Controller, { spec: spec, name: name, parentOnChange: null, parentOnUnmount: null, value: _.get(store.values, name) }),
                 watcher)));
     }
     return null;

package/build/esm/lib/core/components/Form/hooks/useField.d.ts

@@ -4,9 +4,10 @@ export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec>
     name: string;
     spec: SpecType;
     initialValue: Value;
+    value: Value;
     validate?: (value?: Value) => ValidateError;
     tools: DynamicFormsContext['tools'];
     parentOnChange: ((childName: string, childValue: FieldValue, childErrors: Record<string, ValidateError>) => void) | null;
     parentOnUnmount: ((childName: string) => void) | null;
 }
-export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;
+export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;

package/build/esm/lib/core/components/Form/hooks/useField.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import _ from 'lodash';
-import { isArraySpec, isObjectSpec, isReact18OrMore } from '../../../helpers';
+import { isArraySpec, isNumberSpec, isObjectSpec } from '../../../helpers';
 import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM } from '../constants';
 import { isArrayItem, transformArrIn, transformArrOut } from '../utils';
-export const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
+export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }) => {
     const firstRenderRef = React.useRef(true);
     const validate = React.useCallback((value) => {
         if (value === REMOVED_ITEM) {
@@ -12,7 +12,7 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
         return propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate(transformArrOut(value));
     }, [propsValidate]);
     const [state, setState] = React.useState(() => {
-        let value = _.cloneDeep(initialValue);
+        let value = _.cloneDeep(externalValue);
         if (_.isNil(value)) {
             if (spec.defaultValue) {
                 value = transformArrIn(spec.defaultValue);
@@ -29,17 +29,19 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
             }
         }
         const error = validate === null || validate === void 0 ? void 0 : validate(value);
+        const dirty = !_.isEqual(value, initialValue);
+        const pristine = value === initialValue;
         return {
             active: false,
-            dirty: false,
+            dirty,
             error,
             invalid: Boolean(error),
-            modified: false,
-            pristine: false,
-            touched: false,
+            modified: dirty || !pristine,
+            pristine,
+            touched: dirty || !pristine,
             valid: !error,
             value,
-            visited: false,
+            visited: dirty || !pristine,
             childErrors: {},
         };
     });
@@ -48,7 +50,10 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
             setState((state) => {
                 const _value = _.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
                 const error = validate === null || validate === void 0 ? void 0 : validate(_value);
-                const value = transformArrIn(_value);
+                let value = transformArrIn(_value);
+                if (isNumberSpec(spec) && value && !error) {
+                    value = Number(value);
+                }
                 let newChildErrors = Object.assign({}, state.childErrors);
                 if (childErrors) {
                     const nearestChildName = _.keys(childErrors).sort((a, b) => a.length - b.length)[0];
@@ -69,7 +74,7 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
             }
         };
         return { onChange, onDrop };
-    }, [initialValue, setState, name, validate]);
+    }, [initialValue, setState, name, validate, spec]);
     const onBlur = React.useCallback(() => {
         setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
     }, [setState]);
@@ -122,16 +127,13 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
         onDrop,
     ]);
     React.useEffect(() => {
-        if (!firstRenderRef.current || !_.isEqual(initialValue, state.value) || state.error) {
+        if (!firstRenderRef.current || !_.isEqual(externalValue, state.value) || state.error) {
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);
     React.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            if (isReact18OrMore()) {
-                firstRenderRef.current = true;
-            }
             (parentOnUnmount ? parentOnUnmount : tools.onUnmount)(name);
         };
     }, []);

package/build/esm/lib/core/components/Form/hooks/useStore.js

@@ -1,19 +1,21 @@
 import React from 'react';
 import _ from 'lodash';
 import { useForm } from 'react-final-form';
-import { isReact18OrMore } from '../../../helpers';
 import { transformArrIn } from '../utils';
 export const useStore = (name) => {
     const form = useForm();
     const firstRenderRef = React.useRef(true);
     const [store, setStore] = React.useState(() => {
-        const initialValue = transformArrIn({
+        const values = transformArrIn({
             [name]: _.get(form.getState().values, name),
         });
+        const initialValue = transformArrIn({
+            [name]: _.get(form.getState().initialValues, name),
+        });
         return {
             name,
-            initialValue,
-            values: _.cloneDeep(initialValue),
+            initialValue: _.cloneDeep(initialValue),
+            values: _.cloneDeep(values),
             errors: {},
         };
     });
@@ -26,24 +28,22 @@ export const useStore = (name) => {
     }), [store.initialValue, setStore, submitFailed]);
     React.useEffect(() => {
         if (!firstRenderRef.current) {
-            const initialValue = transformArrIn({
+            const values = transformArrIn({
                 [name]: _.get(form.getState().values, name),
             });
+            const initialValue = transformArrIn({
+                [name]: _.get(form.getState().initialValues, name),
+            });
             setStore({
                 name: name,
-                initialValue,
-                values: _.cloneDeep(initialValue),
+                initialValue: _.cloneDeep(initialValue),
+                values: _.cloneDeep(values),
                 errors: {},
             });
         }
     }, [name]);
     React.useEffect(() => {
         firstRenderRef.current = false;
-        return () => {
-            if (isReact18OrMore()) {
-                firstRenderRef.current = true;
-            }
-        };
     }, []);
     return { tools, store };
 };

package/build/esm/lib/core/components/Form/types/context.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { DynamicFormConfig, FieldObjectValue, FieldValue, ValidateError, WonderMirror } from './';
+import { DynamicFormConfig, FieldValue, ValidateError, WonderMirror } from './';
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
     tools: {
-        initialValue: FieldObjectValue;
+        initialValue: FieldValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
         onUnmount: (name: string) => void;
         submitFailed: boolean;

package/build/esm/lib/core/helpers.d.ts

@@ -5,4 +5,3 @@ export declare const isBooleanSpec: (candidate: any) => candidate is BooleanSpec
 export declare const isNumberSpec: (candidate: any) => candidate is NumberSpec<any>;
 export declare const isObjectSpec: (candidate: any) => candidate is ObjectSpec<any>;
 export declare const isStringSpec: (candidate: any) => candidate is StringSpec<any>;
-export declare const isReact18OrMore: () => boolean;

package/build/esm/lib/core/helpers.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import _ from 'lodash';
 import { SpecTypes } from './constants';
 export const isCorrectSpec = (candidate) => _.isObjectLike(candidate) &&
@@ -14,4 +13,3 @@ export const isBooleanSpec = (candidate) => (candidate === null || candidate ===
 export const isNumberSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === SpecTypes.Number;
 export const isObjectSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === SpecTypes.Object;
 export const isStringSpec = (candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.type) === SpecTypes.String;
-export const isReact18OrMore = () => Number(React.version.split('.')[0]) >= 18;

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

@@ -77,6 +77,9 @@ export interface ObjectSpec<LinkType = any> {
         layoutOpen?: boolean;
         order?: string[];
         link?: LinkType;
+        oneOfParams?: {
+            toggler?: 'select' | 'radio';
+        };
     };
 }
 export interface StringSpec<LinkType = any> {

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

@@ -38,13 +38,14 @@
 .df-card__header-left {
   display: flex;
   align-items: center;
+  flex-grow: 1;
 }
 .df-card__header-right {
   display: flex;
   align-items: center;
 }
 .df-card__header-right > * {
-  margin-left: 5px;
+  margin-left: 10px;
 }
 .df-card__title {
   font-size: var(--yc-text-subheader-2-font-size);

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

@@ -12,6 +12,7 @@
 .df-error-wrapper_error .g-select:not(.df-error-wrapper-ignore) .g-select-control::before,
 .df-error-wrapper_error .g-select:hover:not(.df-error-wrapper-ignore) .g-select-control_open::before,
 .df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__control,
+.df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__content,
 .df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
   border-color: var(--yc-color-text-danger);
 }

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

@@ -42,7 +42,7 @@ export const ArrayBase = ({ spec, name, arrayInput, input }) => {
         if (!itemSpec) {
             return null;
         }
-        return (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
+        return (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
     }), [keys.join(''), name, getItemSpec, parentOnChange, parentOnUnmount, input.value]);
     if (!itemSpecCorrect) {
         return null;

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

@@ -28,5 +28,5 @@ export const CardOneOf = (props) => {
     }, [input.onChange, input.name]);
     const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(Card, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
+    return (React.createElement(Card, { name: name, title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };

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

@@ -24,7 +24,7 @@ export const ObjectBase = (_a) => {
         const specProperties = Object.assign({}, spec.properties);
         return (React.createElement(React.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
             var _a;
-            return specProperties[property] ? (React.createElement(Controller, { initialValue: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
+            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: parentOnUnmount, key: `${name ? name + '.' : ''}${property}` })) : null;
         })));
     }, [
         spec.properties,

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

@@ -19,7 +19,7 @@ export const ObjectValueInput = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
     if (Layout) {
         return React.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -5,10 +5,10 @@
 .df-oneof:last-child > .df-group-indent {
   margin-bottom: 0;
 }
-.df-oneof .df-group-indent {
+.df-oneof_base .df-group-indent {
   all: unset;
 }
-.df-oneof .df-group-indent > .df-use-search {
+.df-oneof_base .df-group-indent > .df-use-search {
   padding-top: 11px;
   padding-left: 20px;
   margin-top: 4px;
@@ -16,12 +16,23 @@
   margin-left: 5px;
   border-left: 1px solid var(--yc-color-line-generic-accent);
 }
-.df-oneof .df-group-indent > .df-use-search:empty {
+.df-oneof_base .df-group-indent > .df-use-search:empty {
   display: none;
 }
-.df-oneof .df-group-indent > .df-use-search:last-child {
+.df-oneof_base .df-group-indent > .df-use-search:last-child {
   margin-bottom: 0;
 }
-.df-oneof .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
+.df-oneof_base .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
   margin-top: -10px;
+}
+.df-oneof_flat > .df-group-indent {
+  margin: 0;
+  border-left: none;
+  padding: 0;
+}
+.df-oneof_flat > .df-group-indent > .df-use-search {
+  margin-top: 15px;
+}
+.df-oneof_flat > .df-group-indent > .df-use-search:empty {
+  display: none;
 }

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

@@ -1,3 +1,8 @@
-import { ObjectIndependentInput } from '../../../../core';
+import React from 'react';
+import { ObjectIndependentInput, ObjectIndependentInputProps } from '../../../../core';
 import './OneOf.css';
-export declare const OneOf: ObjectIndependentInput;
+export interface OneOfProps extends ObjectIndependentInputProps {
+    withoutIndent?: boolean;
+}
+export declare const OneOf: React.FC<OneOfProps>;
+export declare const OneOfFlat: ObjectIndependentInput;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import _ from 'lodash';
 import { GroupIndent } from '../../';
-import { Controller } from '../../../../core';
+import { Controller, } from '../../../../core';
 import { useOneOf } from '../../../hooks';
 import { block } from '../../../utils';
 import './OneOf.css';
 const b = block('oneof');
-export const OneOf = (props) => {
+const OneOfComponent = (props) => {
     var _a;
     const { oneOfValue, specProperties, toggler } = useOneOf({ props });
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
@@ -14,8 +14,13 @@ export const OneOf = (props) => {
         props.input.onChange(value, childErrors);
     }, [props.input.onChange, props.input.name]);
     const parentOnUnmount = React.useCallback((childName) => props.input.onChange((currentValue) => currentValue, { [childName]: false }), [props.input.onChange]);
-    return (React.createElement("div", { className: b() },
+    return (React.createElement("div", { className: b({
+            base: !props.withoutIndent,
+            flat: props.withoutIndent,
+        }) },
         React.createElement("div", null, toggler),
         specProperties[oneOfValue] ? (React.createElement(GroupIndent, null,
-            React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
+            React.createElement(Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
 };
+export const OneOf = OneOfComponent;
+export const OneOfFlat = (props) => (React.createElement(OneOfComponent, Object.assign({}, props, { withoutIndent: true })));

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

@@ -36,5 +36,5 @@ export const OneOfCard = (props) => {
     }, [input.onChange, input.name]);
     const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
+    return (React.createElement(AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };

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

@@ -19,7 +19,7 @@ export const Secret = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: childSpec, name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: childSpec, name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
     if (Layout) {
         return React.createElement(Layout, Object.assign({}, props), content);
     }

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

@@ -59,7 +59,7 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
                         arr: isArraySpec(preparedEntitySpec),
                         obj: isObjectSpec(preparedEntitySpec),
                     }), key: `${name}.<${key}>.${property}` },
-                    React.createElement(Controller, { initialValue: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount })));
+                    React.createElement(Controller, { value: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount })));
             },
         }));
         return [idxColumn, ...columns, removeColumn];

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

@@ -20,7 +20,7 @@ export const TextLink = (props) => {
     if (!childSpec) {
         return null;
     }
-    const content = (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
     if (Layout) {
         return React.createElement(Layout, Object.assign({}, props), content);
     }

package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.css

@@ -0,0 +1,8 @@
+.df-oneof-view .df-group-indent {
+  margin-bottom: 20px;
+}
+.df-oneof-view_flat > .df-group-indent {
+  margin: 0 0 20px;
+  border-left: none;
+  padding: 0;
+}

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

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

package/build/esm/lib/kit/components/Views/{OneOfView.js → OneOfView/OneOfView.js}

@@ -1,8 +1,11 @@
 import React from 'react';
 import _ from 'lodash';
-import { GroupIndent } from '../';
-import { ViewController } from '../../../core';
-export const OneOfView = (props) => {
+import { GroupIndent } from '../../';
+import { ViewController } from '../../../../core';
+import { block } from '../../../utils';
+import './OneOfView.css';
+const b = block('oneof-view');
+const OneOfViewComponent = (props) => {
     const { value = {}, spec, Layout, name } = props;
     const specProperties = React.useMemo(() => (_.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
     const valueKey = React.useMemo(() => Object.keys(value)[0], [value]);
@@ -22,8 +25,10 @@ export const OneOfView = (props) => {
     if (!value || !Object.keys(value).length) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement("div", { className: b({ flat: props.withoutIndent }) },
         wrappedValue,
         specProperties[valueKey] ? (React.createElement(GroupIndent, null,
             React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` }))) : null));
 };
+export const OneOfView = OneOfViewComponent;
+export const OneOfFlatView = (props) => (React.createElement(OneOfViewComponent, Object.assign({}, props, { withoutIndent: true })));

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

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

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

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

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, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, 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, 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, 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: {
@@ -54,6 +54,7 @@ export const dynamicConfig = {
     object: {
         inputs: {
             oneof: { Component: OneOf, independent: true },
+            oneof_flat: { Component: OneOfFlat, independent: true },
             card_oneof: { Component: CardOneOf, independent: true },
             secret: { Component: Secret, independent: true },
             base: { Component: ObjectBase, independent: true },
@@ -239,6 +240,7 @@ export const dynamicViewConfig = {
     object: {
         views: {
             oneof: { Component: OneOfView, independent: true },
+            oneof_flat: { Component: OneOfFlatView, independent: true },
             card_oneof: { Component: CardOneOfView, independent: true },
             secret: undefined,
             base: { Component: ObjectBaseView, independent: true },

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

@@ -3,6 +3,7 @@ import { RadioButton, Select } from '@gravity-ui/uikit';
 import _ from 'lodash';
 const MAX_TAB_TITLE_LENGTH = 20;
 export const useOneOf = ({ props, onTogglerChange }) => {
+    var _a;
     const { name, input, spec, Layout } = props;
     const specProperties = React.useMemo(() => (_.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
     const [oneOfValue, setOneOfValue] = React.useState(() => {
@@ -35,12 +36,15 @@ export const useOneOf = ({ props, onTogglerChange }) => {
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
     const togglerInput = React.useMemo(() => {
-        if (options.length > 3 ||
-            _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH)) {
+        var _a, _b;
+        if (((_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' ||
+                options.length > 3 ||
+                _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
             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)))));
-    }, [options, oneOfValue, onOneOfChange, name]);
+    }, [options, oneOfValue, onOneOfChange, name, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
     const toggler = React.useMemo(() => {
         if (Layout) {
             return React.createElement(Layout, Object.assign({}, props), togglerInput);

package/package.json

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

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

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